/* Single stylesheet — sans-led, dark-navy ground. Inter for all text,
   JetBrains Mono for numbers and data labels. Hairline-divided grids,
   count-up stats, scroll reveals, an ambient canvas behind the hero. */

:root {
    --navy:      #10173d;
    --navy-2:    #1c2a5e;
    --navy-wash: #eef1fb;
    --accent:      #4e61c8;
    --accent-2:    #3e4ea8;
    --paper:       #ffffff;
    --fog:         #f6f6f4;
    --fog-2:       #eeeeec;
    --line:        #e6e6e2;
    --line-2:      #d8d8d3;
    --ink:         #0e0e10;
    --ink-2:       #3a3a3f;
    --ink-3:       #6e6e76;
    --ink-4:       #9b9ba2;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--sans);
    color: var(--ink);
    background: var(--paper);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
.container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 40px; }

/* ---- reveal ---- */
.rv { opacity: 0; transform: translateY(26px);
      transition: opacity 1.5s cubic-bezier(.16,1,.3,1), transform 1.5s cubic-bezier(.16,1,.3,1); }
.rv.in { opacity: 1; transform: none; }


/* ---- header ----
   A floating bar the width of the main column (matches .container), rather
   than a pill hugging its own content — room for real space between the
   brand, the nav links and the order button. Sits near the top of every
   page and hides on scroll down / reappears on scroll up (JS toggles
   .nav-hidden below) so it stays out of the way while reading without ever
   being more than a scroll-up away. */
.site-header {
    position: fixed; top: 16px; left: 50%; z-index: 50;
    transform: translate(-50%, 0);
    width: calc(100% - 32px); max-width: 1320px;
    /* The same frosted-white fill as .hero-form-card — this is the "on a
       dark background" look, since that's what sits behind it by default
       (the hero, or nothing yet). JS (base.html) adds .nav-on-light once
       the header is no longer over something dark, which darkens the
       backdrop via the second rule below — a brighter fill would fight the
       white nav text on a light page instead of helping it, so contrast
       comes from darkening what's behind rather than from the fill itself. */
    background: rgba(235,235,238,.08);
    backdrop-filter: blur(16px) saturate(80%);
    -webkit-backdrop-filter: blur(16px) saturate(80%);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 999px;
    box-shadow: 0 14px 34px rgba(8,10,26,.32);
    transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .3s ease,
                backdrop-filter .3s ease, background-color .3s ease,
                border-color .3s ease, box-shadow .3s ease;
}
.site-header.nav-hidden { transform: translate(-50%, -130%); opacity: 0; }
.site-header.nav-on-light {
    backdrop-filter: blur(16px) saturate(80%) brightness(.45);
    -webkit-backdrop-filter: blur(16px) saturate(80%) brightness(.45);
}
@media (prefers-reduced-motion: reduce) {
    .site-header { transition: none; }
}
.header-inner { position: relative; display: flex; align-items: center;
                justify-content: space-between; padding: 15px 30px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: 0 0 auto; }

.site-nav { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
/* Centred in the space between the brand and the actions, via the auto
   margins below, rather than centred against the header as a whole — that
   used to be done with absolute positioning, which put the links on their
   own layout axis entirely and let them drift over the brand or the CTA
   button as the header narrowed, before the hamburger breakpoint kicked
   in. Normal flow can't overlap a sibling, only crowd it. */
.nav-links { display: flex; gap: 30px; align-items: center; font-size: .9rem;
             font-weight: 500; margin: 0 auto; }
.nav-links > a, .nav-drop-toggle { white-space: nowrap; }
.nav-links a { color: rgba(255,255,255,.82); text-decoration: none; transition: color .2s; }
.nav-links a:hover { color: #fff; }

.nav-actions { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.nav-actions > a { white-space: nowrap; }
.nav-cta { background: var(--accent); color: #fff !important; padding: 10px 18px;
           border-radius: 999px; font-weight: 600; font-size: .9rem; text-decoration: none;
           transition: background .2s; }
.nav-cta:hover { background: var(--accent-2); }

/* ---- hero ---- */
/* The hero fills the first screen, with the 1 July 2027 banner
   (.reserve-band) along its bottom edge (Dylan, 2026-10-27): a column, the
   text and form centred in the space above the banner. The svh line is for
   phones, whose 100vh includes the space behind the browser's address bar.
   On a screen too short for the hero's content the hero grows past this
   rather than the content being squashed. */
.hero { position: relative; display: flex; flex-direction: column;
        min-height: 100vh;
        min-height: 100svh;
        overflow: hidden; background: var(--navy); }
.hero-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; }
/* Left-to-right scrim: the text column sits on near-solid navy and the
   map shows through on the right, behind the card. One column (≤860px)
   gets an even overlay instead, further down. The light hero's version is
   in the "Home hero: light look" block at the end of this file. */
.hero-shade { position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(16,23,61,.9) 0%, rgba(16,23,61,.7) 40%,
                                rgba(16,23,61,.1) 72%, rgba(16,23,61,0) 100%); }
/* padding-top/-bottom only: this element is also a .container (for its
   max-width and horizontal padding), and a shorthand `padding` here would
   overwrite that horizontal padding with 0 rather than layer on top of it —
   which is exactly what had the hero content sitting flush against the
   viewport edges below 1320px wide. */
.hero-inner { position: relative; z-index: 2; width: 100%; flex: 1 0 auto;
    display: flex; align-items: center; padding-top: 112px; padding-bottom: 48px; }
/* The form column is at most 460px (less on a narrow laptop, where the
   heading needs the room) and the gap grows with the screen, so the text
   and the form have room between them (Dylan, 2026-10-27).
   Top-aligned, with the card nudged down to the heading's capital letters:
   centring the two made the text look lower than the card, because the
   tab under the card makes the form column the taller one. */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, min(460px, 40vw));
    gap: clamp(32px, 5vw, 112px); align-items: start; width: 100%; }
.hero-form-stack { margin-top: 10px; }
.hero h1 { font-family: var(--sans); font-weight: 700; letter-spacing: -.035em;
    font-size: clamp(34px, 4.4vw, 64px); line-height: 1.04; color: #fff; white-space: nowrap; }
.hero h1 em { font-style: normal; color: #a9b2e4; }
/* Weight 400 rather than 300: thin white text on navy was what users
   found hard to read (2026-10-15). */
.hero .sub { font-size: 18px; font-weight: 400; color: rgba(255,255,255,.92);
    max-width: 46ch; line-height: 1.6; margin-top: 22px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---- hero mini order form ---- */
/* Solid, not see-through: the map moving behind a translucent card made
   its text harder to read (2026-10-15). */
.hero-form-card {
    background: #19224f; border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 24px 60px rgba(4,6,20,.4);
    border-radius: 22px; padding: 26px 26px 24px;
}
.hero-form-title { font-size: 13px; font-weight: 600; letter-spacing: .04em;
    color: rgba(255,255,255,.6); margin-bottom: 10px; }
.hero-form-lede { font-size: 15px; color: rgba(255,255,255,.85); line-height: 1.5; margin-bottom: 20px; }
.hero-form-card .field { margin-bottom: 16px; }
.hero-form-card .field label { color: #fff; }
.hero-form-card .field input:not([type="checkbox"]):not([type="radio"]),
.hero-form-card .field select {
    background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.22); color: #fff;
}
.hero-form-card .field input::placeholder { color: rgba(255,255,255,.42); }
.hero-form-card .field input:focus, .hero-form-card .field select:focus {
    border-color: var(--accent); box-shadow: 0 0 0 3px rgba(78,97,200,.35);
}
.hero-form-card .hint { color: rgba(255,255,255,.5); }
.hero-form-submit { width: 100%; justify-content: center; margin-top: 18px; }
.hero-form-example { margin-top: 14px; text-align: center; }
.hero-form-example a { font-size: 13px; color: rgba(255,255,255,.78); text-decoration: underline;
    text-underline-offset: 3px; }
.hero-form-example a:hover { color: #fff; }
/* The PDF icon on the sample report links (_macros.pdf_icon). Sits inline
   before the link text, nudged down to line up with it. */
.pdf-icon { width: 1.6em; height: 1.6em; display: inline-block; vertical-align: -.42em;
            margin-right: 5px; }
.hero-form-example a, .fcta-note a { white-space: nowrap; }
.hero-form-powered-by { margin-top: 10px; text-align: center; font-size: 12px;
    color: rgba(255,255,255,.7); }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 15px 30px;
    border-radius: 999px; font-family: var(--sans); font-size: 15px; font-weight: 500;
    text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: all .2s; }
.btn-solid { background: #fff; color: var(--navy); }
.hero .btn-solid { background: var(--accent); color: #fff; border-color: transparent; }
.hero .btn-solid:hover { background: var(--accent-2); }
.btn-solid:hover { background: var(--navy-wash); }
.btn-line { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn-line:hover { border-color: #fff; }
/* interior (non-hero) solid button = accent fill */
.page-interior .btn-solid,
.statement .btn-solid, .sec .btn-solid, .fcta .btn-solid, .form-wrap .btn-solid {
    background: var(--accent); color: #fff; }
.page-interior .btn-solid:hover,
.sec .btn-solid:hover, .fcta .btn-solid:hover { background: var(--accent-2); }

/* Primary CTA variant: text plus a circular up-right arrow. The circle's
   fill is mixed from the button's own text colour, so it reads correctly
   whether the button is white-on-navy or accent-on-white without a second
   set of colour rules. */
.btn-arrow { padding-right: 10px; }
.btn-arrow-circle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
    background: color-mix(in srgb, currentColor 14%, transparent);
    transition: transform .2s ease;
}
.btn-arrow-circle svg { width: 17px; height: 17px; }
.btn-arrow:hover .btn-arrow-circle { transform: translate(2px, -2px); }

/* ---- stat strip ---- */
.statline { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); }
.statline-grid { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1320px;
                 margin: 0 auto; padding: 0 40px; }
.statcell { padding: 46px 30px; border-right: 1px solid var(--line); }
.statcell:last-child { border-right: none; }
.sv { font-family: var(--mono); font-weight: 500; font-size: clamp(26px, 2.6vw, 38px);
      color: var(--accent); line-height: 1; letter-spacing: -.02em; margin-bottom: 14px;
      font-variant-numeric: tabular-nums; }
.sv-day { font-size: .5em; margin-left: 4px; color: var(--ink-3); font-family: var(--mono); font-style: normal; }
.sl { font-family: var(--mono); text-transform: uppercase; font-size: 11px; font-weight: 500;
      letter-spacing: .4px; color: var(--ink-4); line-height: 1.55; }
.ph-flag { font-style: italic; color: var(--ink-4); opacity: .8; }

/* ---- statement ---- */
.statement { padding: 130px 0; text-align: center; }
.statement h2 { font-family: var(--sans); font-weight: 700; letter-spacing: -.03em;
    font-size: clamp(28px, 4.2vw, 54px); line-height: 1.12; color: var(--ink); max-width: 22ch; margin: 0 auto; }
.statement h2 em { font-style: normal; color: var(--accent); }
.statement .small { font-size: 16px; color: var(--ink-3); margin-top: 32px; max-width: 60ch;
    margin-left: auto; margin-right: auto; font-weight: 400; }

/* ---- generic sections ---- */
.sec { padding: 104px 0; }
.sec-fog { background: var(--fog); }
.no-top { padding-top: 0; }
/* The header is a floating pill now (position: fixed) rather than a bar in
   flow, so it never pushes page content down on its own — every interior
   page needs its own top gap to clear it, with real breathing room below
   the pill rather than just enough to avoid overlapping it. */
.page-top { padding-top: 150px; }
.section-eyebrow { font-family: var(--mono); font-size: 12px; text-transform: uppercase;
    letter-spacing: .1em; color: var(--accent); font-weight: 500; margin-bottom: 18px; }
.sec-head { max-width: 780px; margin-bottom: 60px; }
.sec-head h2 { font-family: var(--sans); font-weight: 700; letter-spacing: -.03em;
    font-size: clamp(30px, 4vw, 52px); line-height: 1.1; color: var(--ink); }
.sec-head h2 em { font-style: normal; color: var(--accent); }
.sec-head-note { margin-top: 18px; color: var(--ink-3); font-size: 15px; max-width: 60ch; }
h2, h3 { color: var(--ink); }

.prose-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 64px; max-width: 1040px; }
.prose-cols p { color: var(--ink-2); font-size: 16.5px; line-height: 1.7; }
.prose-cols p.prose-note { color: var(--ink-3); font-size: 13.5px; }
.prose-cols a, .sec-head-note a { color: var(--accent); font-weight: 500; }

/* ---- feature grid (hairline, not cards) ---- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
    border-top: 1px solid var(--line-2); }
.feature { padding: 40px 34px 40px 0; border-right: 1px solid var(--line); position: relative; }
.feature:last-child { border-right: none; padding-right: 0; }
.feature-rule { position: absolute; top: -1px; left: 0; width: 0; height: 2px;
    background: var(--accent); transition: width 1.4s cubic-bezier(.16,1,.3,1); }
.feature.in .feature-rule { width: 56%; }
.feature h3 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 12px; }
.feature p { font-size: 14.5px; font-weight: 300; color: var(--ink-3); line-height: 1.65; }

/* ---- process grid (how it works) ---- */
.proc-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-2); }
.proc-step { padding: 36px 26px 40px 0; border-right: 1px solid var(--line); position: relative; }
.proc-step:last-child { border-right: none; padding-right: 0; }
.proc-step::before { content: ''; position: absolute; top: -1px; left: 0; width: 0; height: 2px;
    background: var(--accent); transition: width 1.4s cubic-bezier(.16,1,.3,1); }
.proc-step.in::before { width: 60%; }
.proc-step .n { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--accent);
    margin-bottom: 44px; font-variant-numeric: tabular-nums; }
.proc-step h3 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 12px; }
.proc-step p { font-size: 14px; font-weight: 300; color: var(--ink-3); line-height: 1.65; }
.proc-final { display: grid; grid-template-columns: 60px 1fr; gap: 24px; align-items: start;
    margin-top: 56px; padding: 40px; background: var(--navy); border-radius: 16px; }
.proc-final .n { font-family: var(--mono); font-style: normal; font-size: 32px; color: rgba(255,255,255,.5); }
.proc-final h3 { color: #fff; font-size: 24px; font-weight: 600; margin-bottom: 10px; }
.proc-final p { color: rgba(255,255,255,.8); font-size: 16px; max-width: 60ch; }
.hiw-cta { margin-top: 52px; }

/* ---- team grid (about page) ---- */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.team-card {
    background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
    padding: 30px 22px; text-align: center;
}
.team-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 60px; height: 60px; border-radius: 50%;
    background: var(--navy-wash); color: var(--accent);
    font-family: var(--mono); font-weight: 600; font-size: 17px; margin-bottom: 16px;
}
.team-card h3 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 4px; }
.team-role { font-size: 13px; color: var(--ink-3); }

/* ---- placeholder boxes (per standing constraint) ---- */
.placeholder-box {
    background: repeating-linear-gradient(45deg, var(--fog), var(--fog) 10px, var(--fog-2) 10px, var(--fog-2) 20px);
    border: 1px dashed var(--line-2); border-radius: 10px; padding: 30px 22px;
    text-align: center; color: var(--ink-4); font-size: 13px; line-height: 1.5; font-weight: 500; }

/* ---- final CTA band ---- */
.fcta { background: var(--navy); padding: 110px 0; text-align: center; }
.fcta-inner h2 { font-family: var(--sans); font-weight: 700; letter-spacing: -.03em;
    font-size: clamp(30px, 4vw, 50px); color: #fff; margin-bottom: 18px; }
.fcta-inner p { color: rgba(255,255,255,.8); font-size: 17px; margin-bottom: 34px; }
.fcta-note { margin-top: 18px !important; margin-bottom: 0 !important;
    font-size: 14px !important; color: rgba(255,255,255,.65) !important; }
.fcta-note a { color: rgba(255,255,255,.65); text-decoration: underline;
    text-underline-offset: 3px; }
.fcta-note a:hover { color: #fff; }
.fcta .btn-solid { background: #fff; color: var(--navy); }
.fcta .btn-solid:hover { background: var(--navy-wash); }

/* ---- form ---- */
.form-wrap { max-width: 620px; }
.field { margin-bottom: 22px; }
.field label { display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 8px; color: var(--ink); }
.field .hint { font-weight: 400; color: var(--ink-4); font-size: 13px; }
/* Every text-like input, by exclusion rather than by listing each type.
   Listing them meant a type nobody thought of fell back to the browser's
   default and looked nothing like its neighbours — that happened to date
   inputs, and then again to password inputs on the staff screens. Excluding
   the handful that must NOT get this treatment is the version that stays
   correct when a new input type turns up. */
.field input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="hidden"]),
.field select, .field textarea {
    width: 100%; padding: 13px 15px; font-size: 15px; font-family: var(--sans);
    border: 1px solid var(--line-2); border-radius: 9px; background: #fff; color: var(--ink); }
.field textarea { min-height: 110px; resize: vertical; }
.field input[type="date"] { min-height: 48px; -webkit-appearance: none; appearance: none;
    text-align: left; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--navy-wash); }
.checkbox-grid { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 4px; }
.checkbox-item { display: flex; align-items: center; gap: 8px; font-size: 14.5px;
    font-weight: 400; color: var(--ink); }
.checkbox-item input { margin: 0; }
/* A label that wraps to more than one line (e.g. one containing a link)
   needs the checkbox top-aligned rather than centred on the whole block —
   centre-aligned only looks right against a single line of text. The 3px
   nudges the box down to the first line's cap-height instead of its own
   box-top, matching .field-consent's already-established fix for the same
   problem. (A nested link inside the same <label> still needs its own
   click-propagation fix in the template — CSS can't stop that part.) */
.checkbox-item-wrap { align-items: flex-start; }
.checkbox-item-wrap input { margin-top: 3px; }
.field-consent { display: flex; gap: 12px; align-items: flex-start; background: var(--fog);
    border: 1px solid var(--line); border-radius: 10px; padding: 18px; font-size: 14px; }
.field-consent input { margin-top: 3px; }
.errors { background: #fdecec; border: 1px solid #e4b4b4; border-radius: 10px; padding: 16px 20px;
    margin-bottom: 28px; font-size: 14px; color: #8a2b2b; }
.errors ul { margin: 8px 0 0; padding-left: 20px; }

/* ---- thank-you ---- */
/* The order received box (thank_you.html): centred and wide enough for the
   five-column order table (Dylan, 2026-10-28). At 640px wide on the left
   it filled half the page and squeezed the table into narrow columns. */
.confirm { background: var(--navy-wash); border: 1px solid #dcdcec; border-radius: 16px;
    padding: 44px; max-width: 960px; margin: 0 auto; }
.confirm .order-summary-wrap { overflow-x: auto; margin: 24px 0; }
.confirm .order-summary { margin: 0; }
.confirm .order-summary .mono { white-space: nowrap; }
@media (max-width: 640px) {
    .confirm { padding: 28px 20px; }
    .confirm .order-summary { min-width: 560px; }
}
.confirm h2 { font-family: var(--sans); font-weight: 700; letter-spacing: -.02em; font-size: 1.9rem; }
.confirm p { color: var(--ink-2); margin-top: 14px; }
.lead-id { font-family: var(--mono); background: var(--accent); color: #fff;
    padding: 3px 10px; border-radius: 6px; font-size: .9em; }
.ty-cta { margin-top: 30px; text-align: center; }

/* ---- footer ---- */
.site-footer { background: var(--paper); border-top: 1px solid var(--line); padding: 68px 0 0; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 60px; }
.footer-logo { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-bottom: 20px; }
.footer-blurb { font-size: 14px; color: var(--ink-3); line-height: 1.7; max-width: 34ch; }
.footer-head { font-size: 11.5px; text-transform: uppercase; letter-spacing: .14em;
               font-weight: 600; color: var(--ink-4); margin-bottom: 18px; }
.footer-col a { display: block; font-size: 14.5px; color: var(--ink-2); text-decoration: none;
                margin-bottom: 12px; transition: color .2s; }
.footer-col a:hover { color: var(--navy); }
/* padding-top/-bottom only — see the .hero-inner comment above; this is
   also a .container and a shorthand padding here would zero its horizontal
   padding instead of adding to it. */
.footer-bottom { border-top: 1px solid var(--line); padding-top: 24px; padding-bottom: 34px; }
.footer-note { font-size: 12.5px; color: var(--ink-4); margin: 0; max-width: 118ch; line-height: 1.65; }
.footer-entity { margin-top: 12px; }

/* ---- helpers ---- */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }

/* ---- responsive ---- */
@media (max-width: 860px) {
    .statline-grid { grid-template-columns: repeat(2, 1fr); }
    .statcell:nth-child(2) { border-right: none; }
    .statcell:nth-child(1), .statcell:nth-child(2) { border-bottom: 1px solid var(--line); }
    .feature-grid, .proc-grid { grid-template-columns: 1fr; }
    .hero-grid { grid-template-columns: 1fr; align-items: start; gap: 28px; }
    /* One column puts the card under the text, so the scrim would leave
       the card's half un-shaded: an even overlay instead. */
    .hero-shade { background: rgba(16,23,61,.75); }
    .feature, .proc-step { border-right: none; border-bottom: 1px solid var(--line);
        padding: 32px 0; }
    .feature:last-child, .proc-step:last-child { border-bottom: none; }
    .prose-cols { grid-template-columns: 1fr; gap: 20px; }
    .footer-top { grid-template-columns: 1fr 1fr; gap: 34px; }
}
@media (max-width: 640px) {
    .container { padding: 0 24px; }
    .statline-grid { padding: 0 24px; }
    .footer-top { grid-template-columns: 1fr; }
    /* Header layout on small screens is handled by the mobile nav block at
       the end of this file — stacking the brand above a wrapped row of
       links is what made the header sprawl. */
    .hero { min-height: auto; }
    .hero-inner { padding-top: 128px; padding-bottom: 56px; }
    .statement { padding: 80px 0; }
    .sec { padding: 70px 0; }
    .page-top { padding-top: 128px; }
    .dash { padding-top: 128px; }
    .proc-final { grid-template-columns: 1fr; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .rv { opacity: 1; transform: none; }
    .feature-rule, .proc-step::before { transition: none; }
}


/* =========================================================================
   NEW COMPONENTS (page restructure)
   Nav dropdown · trusted-by marquee · pillar cards ·
   icon process band · quality row · split panels · FAQ · contact band.
   ========================================================================= */

/* ---- nav dropdown ---- */
.nav-drop { position: relative; }
.nav-drop-toggle {
    background: none; border: 0; padding: 0; cursor: pointer;
    font-family: var(--sans); font-size: .92rem; font-weight: 500;
    color: rgba(255,255,255,.82); display: inline-flex; align-items: center; gap: 6px;
    transition: color .2s;
}
.nav-drop:hover .nav-drop-toggle, .nav-drop:focus-within .nav-drop-toggle { color: #fff; }
.nav-drop-toggle .caret { font-size: 10px; opacity: .8; }
.nav-drop-menu {
    position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-6px);
    min-width: 268px; background: #fff; border: 1px solid var(--line);
    border-radius: 12px; padding: 8px; box-shadow: 0 18px 40px rgba(16,23,61,.14);
    opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease;
    z-index: 20;
}
/* Hover-to-open belongs to the desktop layout only. Scoped to a min-width
   so it can't compete with the tap-to-open accordion on small screens —
   there's no hover on a touchscreen, and leaving these global meant the two
   sets of rules resolved by specificity accident. */
@media (min-width: 861px) {
    /* invisible bridge so the menu doesn't close as the cursor travels down */
    .nav-drop::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 16px; }
    .nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu {
        opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
    }
}
.nav-drop-menu a {
    display: block; padding: 11px 14px; border-radius: 8px; color: var(--ink) !important;
    text-decoration: none;
}
.nav-drop-menu a:hover { background: var(--navy-wash); }
.nav-drop-menu strong { display: block; font-size: .92rem; font-weight: 600; }
.nav-drop-menu span { display: block; font-size: .8rem; color: var(--ink-3); font-weight: 400; }

/* ---- trusted-by marquee ---- */
.trusted { padding: 52px 0 58px; background: var(--paper); }
.trusted-label {
    font-family: var(--mono);
    font-size: 12.5px; text-transform: uppercase; letter-spacing: .14em;
    color: var(--ink-4); font-weight: 600; margin-bottom: 26px; text-align: center;
}
.trusted-note { font-size: 12px; color: var(--ink-4); font-style: italic;
                margin-top: 24px; text-align: center; }
/* The mask sits on the container-width element, so logos fade in on the right
   and out on the left at the page column edges — not the viewport edges. */
.marquee {
    overflow: hidden; position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.marquee-track { display: flex; gap: 20px; width: max-content; animation: marquee 52s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.logo-slot {
    flex: 0 0 auto; width: 190px; height: 78px; display: flex;
    align-items: center; justify-content: center; border: 1px dashed var(--line-2);
    border-radius: 10px; background: var(--fog); color: var(--ink-4);
    font-size: 12.5px; font-weight: 500;
}

/* ---- pillar cards ---- */
.pillar-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.pillar {
    background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
    padding: 32px; transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s;
}
.pillar:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(16,23,61,.10); }
.pillar-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.pillar-icon {
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--accent); flex: 0 0 auto;
}
.pillar-icon svg { width: 36px; height: 36px; }
.pillar h3 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 0; }
.pillar p { font-size: 14.5px; font-weight: 300; color: var(--ink-3); line-height: 1.65; }

/* ---- icon process band ---- */
.proc-band { position: relative; padding-top: 8px; }
.proc-band-line { position: absolute; top: 36px; left: 12.5%; right: 12.5%; height: 1px; background: var(--line-2); }
.proc-band-grid {
    position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 26px; list-style: none; text-align: center;
}
.proc-icon-step { padding: 0 8px; }
.proc-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 58px; height: 58px; border-radius: 50%; background: var(--paper);
    border: 1px solid var(--line-2); color: var(--accent); margin-bottom: 18px;
}
.proc-icon svg { width: 24px; height: 24px; }
.proc-icon-n {
    font-family: var(--mono);
    display: block; font-size: 12px; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-4); margin-bottom: 10px;
}
.proc-icon-step h3 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 8px; }
.proc-icon-step p { font-size: 14px; font-weight: 300; color: var(--ink-3); line-height: 1.6; }
.proc-icon-step a { color: var(--accent); }
/* dark variant, matching the reference visual */
.proc-band-dark { background: var(--navy); border-radius: 18px; padding: 52px 30px; }
.proc-band-dark .proc-band-line { background: rgba(255,255,255,.22); top: 88px; }
.proc-band-dark .proc-icon { background: transparent; border-color: rgba(255,255,255,.3); color: #fff; }
.proc-band-dark .proc-icon-n { color: rgba(255,255,255,.55); }
.proc-band-dark h3 { color: #fff; }
.proc-band-dark p { color: rgba(255,255,255,.72); }
.proc-band-dark a { color: #fff; }

/* ---- quality row (property owners) ---- */
.quality-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.quality-item { display: flex; flex-direction: column; gap: 14px; }
.quality-mark {
    display: inline-flex; align-items: center; justify-content: center; text-align: center;
    padding: 26px 18px; border-radius: 10px; background: var(--navy); color: #fff;
    font-size: 14px; font-weight: 600; letter-spacing: .04em; line-height: 1.3;
}
.quality-item p { font-size: 13.5px; color: var(--ink-3); }
.po-cta { margin-top: 40px; display: flex; gap: 14px; flex-wrap: wrap; }
.btn-ghost-line { background: transparent; color: var(--accent); border-color: var(--line-2); }
.btn-ghost-line:hover { border-color: var(--accent); }

/* ---- disclosure (example + FAQ) ---- */
.example, .faq details {
    background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
    padding: 20px 24px; max-width: 900px;
}
.example { margin-top: 40px; }
.faq details + details { margin-top: 12px; }
.example summary, .faq summary {
    cursor: pointer; font-weight: 600; font-size: 15px; color: var(--accent); list-style: none;
}
.example summary::marker, .faq summary::marker { content: ''; }
.example summary::before, .faq summary::before { content: '+ '; font-weight: 500; }
.example[open] summary::before, .faq details[open] summary::before { content: '– '; }
.example p, .faq details p { margin-top: 14px; font-size: 15.5px; color: var(--ink-2); line-height: 1.7; }
.muted-note { font-size: 12.5px !important; color: var(--ink-4) !important; font-style: italic; }

/* ---- split panels (what you get / what it costs) ---- */
.split-panels { display: grid; grid-template-columns: 1.25fr 1fr; gap: 22px; align-items: start; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 34px; }
.panel h3 { font-size: 21px; font-weight: 600; margin-bottom: 12px; }
.panel p { font-size: 15px; color: var(--ink-3); line-height: 1.7; }
.panel-price { background: var(--navy-wash); border-color: #dcdcec; }
/* .panel p.price too: the .panel p rule below would otherwise shrink it to
   body size (it did, on the CGT and SMSF pages, until 2026-10-26). */
.price, .panel p.price { font-family: var(--mono); font-weight: 500; font-size: 44px; color: var(--accent);
         line-height: 1; letter-spacing: -.02em; margin: 6px 0 14px; }
.price span { font-family: var(--sans); font-size: 14px; color: var(--ink-3); margin-left: 6px; }
.panel .btn { margin-top: 22px; }

/* ---- sample report preview (_sample_preview.html) ----
   Two report pages, summary behind and up-right, cover in front and
   down-left. Each page is 70% of the box's width; at the pages' 910:1287
   shape that's 0.99 of the width tall, and the cover sits 0.08 lower, so
   the box is 100:107. Fixing that shape up front means nothing below it
   moves while the (lazy-loaded) images arrive. */
.sample-preview { position: relative; display: block; width: 100%; max-width: 420px;
    aspect-ratio: 100 / 107; margin-top: 26px; }
.sample-preview img { position: absolute; width: 70%; height: auto; display: block;
    background: var(--fog); border: 1px solid var(--line); border-radius: 4px;
    transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease; }
.sample-preview-back { top: 0; right: 0; box-shadow: 0 6px 18px rgba(16,23,61,.08); }
.sample-preview-front { bottom: 0; left: 0; box-shadow: 0 14px 36px rgba(16,23,61,.18); }
.sample-preview:hover .sample-preview-back { transform: translate(4px, -4px); }
.sample-preview:hover .sample-preview-front { transform: translate(-4px, 4px);
    box-shadow: 0 18px 44px rgba(16,23,61,.22); }
.sample-preview:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 6px; }
.panel .sample-preview-link { margin-top: 18px; font-size: 14.5px; }
.sample-preview-link a { color: var(--accent); font-weight: 600; text-decoration: none; }
.sample-preview-link a:hover { text-decoration: underline; text-underline-offset: 3px; }
.panel .sample-preview-note { margin-top: 10px; font-size: 13.5px; color: var(--ink-4); }
@media (prefers-reduced-motion: reduce) {
    .sample-preview img { transition: none; }
}

/* ---- contact band ---- */
.contact-band { border-top: 1px solid var(--line); }
.contact-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: start; }
.contact-inner h2 { font-family: var(--sans); font-weight: 700; letter-spacing: -.03em;
                    font-size: clamp(26px, 3vw, 38px); line-height: 1.15; }
.contact-details p { font-size: 15px; color: var(--ink-2); margin-bottom: 10px; }
.contact-details .btn { margin-top: 18px; }
.ph-inline { color: var(--ink-4); font-style: italic; }

/* ---- responsive for the new blocks ---- */
@media (max-width: 900px) {
    .pillar-grid, .quality-row, .split-panels, .contact-inner { grid-template-columns: 1fr; }
    .team-grid { grid-template-columns: repeat(2, 1fr); }
    .proc-band-grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
    .proc-band-line { display: none; }
}
@media (max-width: 640px) {
    .proc-band-grid { grid-template-columns: 1fr; }
    .team-grid { grid-template-columns: 1fr; }
    /* The nav used to wrap onto multiple centred rows here, with the "How it
       works" menu forced permanently open (opacity/visibility overridden).
       Both are replaced by the collapsible menu at the end of this file. */
}
@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; }
    .pillar { transition: none; }
}

/* =========================================================================
   STAFF CONSOLE (dashboard, job detail, debug views)
   Deliberately different in feel from the marketing pages: denser, cooler,
   data-first. Keeps the brand navy, drops the serif display type.
   ========================================================================= */

.page-dashboard { background: var(--dash-bg, #f4f5f8); }
/* Valuers live inside the console, not the marketing site around it — the
   floating public header/footer (base.html) are hidden here in favour of
   the left sidebar below. */
.page-dashboard .site-header { display: none; }
.page-dashboard .site-footer { display: none; }

.dash-page { padding-top: 8px; }
.page-dashboard .container { max-width: 1440px; }

/* ---- console sidebar ----
   Left-hand nav for every dashboard page, replacing the old horizontal
   .dash-nav. Collapsible on desktop (state remembered in localStorage) and
   an off-canvas drawer on mobile — see the script in dashboard_base.html. */
.dash-shell { display: flex; align-items: stretch; min-height: 100vh; }

.dash-sidebar {
    width: 240px; flex: 0 0 240px; background: var(--navy); color: #fff;
    display: flex; flex-direction: column; position: sticky; top: 0;
    height: 100vh; overflow-y: auto; overflow-x: hidden;
    /* flex-basis, not width, is what actually sizes a flex item when both
       are set — .is-collapsed changes flex-basis, so that's what has to be
       in the transition list or the resize just snaps instead of easing. */
    transition: flex-basis .22s cubic-bezier(.4,0,.2,1), width .22s cubic-bezier(.4,0,.2,1);
    z-index: 60;
}
.dash-sidebar-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 20px 18px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.dash-sidebar-brand { display: flex; align-items: center; gap: 10px; text-decoration: none;
    color: #fff; font-family: var(--sans); font-weight: 700; font-size: 15px; min-width: 0; }
.dash-sidebar-brand-word {
    white-space: nowrap; overflow: hidden; display: inline-block;
    max-width: 160px; opacity: 1; transition: opacity .15s ease, max-width .22s ease;
}

/* The collapse toggle — same circular, line-drawn-arrow language as the
   marketing site's arrow_button (see _macros.html / .btn-arrow-circle), so
   the console doesn't introduce a second button language of its own. */
.dash-sidebar-toggle {
    flex: 0 0 auto; border: none; color: #fff; cursor: pointer;
    width: 34px; height: 34px; border-radius: 50%;
    background: color-mix(in srgb, currentColor 14%, transparent);
    display: flex; align-items: center; justify-content: center;
    transition: background .15s ease;
}
.dash-sidebar-toggle:hover { background: color-mix(in srgb, currentColor 24%, transparent); }
.dash-sidebar-toggle svg { width: 17px; height: 17px; transition: transform .2s ease; }
.dash-sidebar.is-collapsed .dash-sidebar-toggle svg { transform: rotate(180deg); }

.dash-sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 14px 12px; }
.dash-sidebar-link {
    display: flex; align-items: center; gap: 12px;
    font-family: var(--sans); font-size: 14px; font-weight: 600; color: rgba(255,255,255,.72);
    text-decoration: none; padding: 10px 12px; border-radius: 8px; white-space: nowrap;
    overflow: hidden;
}
.dash-sidebar-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.dash-sidebar-link.is-active { background: var(--accent); color: #fff; }
.dash-sidebar-icon { flex: 0 0 20px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
.dash-sidebar-icon svg { width: 19px; height: 19px; }
.dash-sidebar-group-label {
    font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255,255,255,.35); margin: 14px 0 4px; padding: 0 12px;
}
.dash-sidebar-group-label:first-child { margin-top: 2px; }

.dash-sidebar-bottom {
    margin-top: auto; padding: 14px 12px 18px; border-top: 1px solid rgba(255,255,255,.1);
    display: flex; flex-direction: column; gap: 10px;
}
/* Build id, for a tester to say which version they saw a problem on —
   deliberately plain text, not a chip, so it reads as a quiet footnote
   rather than another button competing with the nav above it. */
.dash-sidebar-build {
    font-size: 11px; color: rgba(255,255,255,.35); text-align: center;
    margin: 4px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-sidebar-bottom .dash-nav-user { width: 100%; }
.dash-sidebar-bottom .dash-user-trigger { width: 100%; justify-content: space-between; color: rgba(255,255,255,.85); padding: 8px 12px; }
.dash-sidebar-bottom .dash-user-trigger:hover { color: #fff; }
.dash-sidebar-bottom .dash-user-menu { left: 0; right: 0; bottom: 100%; top: auto; }

/* Every label fades and collapses to zero width rather than snapping to
   display:none, so toggling the rail reads as a slide rather than a cut —
   the icons themselves never move. */
.dash-sidebar-label {
    display: inline-block; opacity: 1; max-width: 180px; overflow: hidden;
    white-space: nowrap; text-overflow: ellipsis;
    transition: opacity .15s ease, max-width .22s ease;
}

.dash-sidebar.is-collapsed { width: 72px; flex-basis: 72px; }
.dash-sidebar.is-collapsed .dash-sidebar-label { opacity: 0; max-width: 0; }
.dash-sidebar.is-collapsed .dash-sidebar-brand-word { opacity: 0; max-width: 0; }
.dash-sidebar.is-collapsed .dash-sidebar-top { justify-content: center; }
.dash-sidebar.is-collapsed .dash-sidebar-brand { gap: 0; }
.dash-sidebar.is-collapsed .dash-sidebar-link { justify-content: center; gap: 0; }
.dash-sidebar.is-collapsed .dash-sidebar-bottom .dash-user-trigger { justify-content: center; gap: 0; }

/* visibility (not display) toggles this off, with its own transition
   delayed until the opacity fade-out finishes — display:none can't be
   transitioned, so toggling it directly made the backdrop vanish instantly
   on close while opacity was still trying to fade it (smooth open, jumpy
   close, since opening had no such conflict). */
.dash-sidebar-backdrop {
    position: fixed; inset: 0; background: rgba(10,12,26,.5); z-index: 55;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .22s ease, visibility 0s linear .22s;
}
.dash-sidebar-backdrop.is-active {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity .22s ease, visibility 0s linear 0s;
}
.dash-mobile-toggle {
    display: none; background: #fff; border: 1px solid var(--line-2); border-radius: 8px;
    width: 38px; height: 38px; align-items: center; justify-content: center; cursor: pointer;
    margin-bottom: 16px; font-size: 16px; color: var(--navy);
}

/* ---- floating feedback button (base.html, every page) ---- */
.dash-feedback-toggle {
    position: fixed; right: 22px; bottom: 22px; z-index: 70;
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--navy); color: #fff; border: none; border-radius: 999px;
    padding: 12px 18px 12px 14px; font-family: var(--sans); font-size: 13.5px; font-weight: 600;
    cursor: pointer; box-shadow: 0 8px 24px rgba(16,23,61,.25);
    transition: background .15s ease, transform .15s ease;
}
.dash-feedback-toggle:hover { background: var(--navy-2); transform: translateY(-1px); }
.dash-feedback-toggle svg { width: 17px; height: 17px; flex: 0 0 auto; }
.dash-feedback-panel {
    position: fixed; right: 22px; bottom: 78px; z-index: 70;
    width: min(320px, calc(100vw - 44px)); background: #fff; border: 1px solid var(--line-2);
    border-radius: 14px; padding: 18px; box-shadow: 0 16px 44px rgba(16,23,61,.2);
}
.dash-feedback-panel textarea {
    width: 100%; box-sizing: border-box; border: 1px solid var(--line-2); border-radius: 8px;
    padding: 10px 12px; font-family: var(--sans); font-size: 13.5px; resize: vertical;
}
/* Back to the top (2026-11-06): beside the Feedback button, same look. */
.dash-top-button {
    position: fixed; right: 158px; bottom: 22px; z-index: 70;
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; color: var(--navy); border: 1px solid var(--line-2); border-radius: 999px;
    padding: 11px 16px 11px 13px; font-family: var(--sans); font-size: 13.5px; font-weight: 600;
    cursor: pointer; box-shadow: 0 8px 24px rgba(16,23,61,.15);
    transition: transform .15s ease;
}
.dash-top-button[hidden] { display: none; }
.dash-top-button:hover { transform: translateY(-1px); }
.dash-top-button svg { width: 16px; height: 16px; flex: 0 0 auto; }
@media (max-width: 700px) {
    .dash-top-button { right: 146px; bottom: 16px; }
    .dash-feedback-toggle { right: 16px; bottom: 16px; }
    .dash-feedback-panel { right: 16px; left: 16px; width: auto; bottom: 72px; }
}

.dash-main { flex: 1; min-width: 0; }
.dash-main .container { padding: 32px 40px 90px; max-width: 1440px; }

@media (max-width: 900px) {
    .dash-sidebar {
        position: fixed; left: 0; top: 0; width: 260px; flex-basis: 260px;
        transform: translateX(-100%); transition: transform .25s cubic-bezier(.2,.8,.2,1);
    }
    .dash-sidebar.is-open { transform: translateX(0); }
    .dash-sidebar.is-collapsed { width: 260px; flex-basis: 260px; }
    .dash-sidebar.is-collapsed .dash-sidebar-label,
    .dash-sidebar.is-collapsed .dash-sidebar-brand-word { opacity: 1; max-width: 180px; }
    .dash-sidebar.is-collapsed .dash-sidebar-brand { gap: 10px; }
    .dash-sidebar.is-collapsed .dash-sidebar-link,
    .dash-sidebar.is-collapsed .dash-sidebar-bottom .dash-user-trigger { justify-content: flex-start; gap: 12px; }
    .dash-sidebar-toggle { display: none; }
    .dash-mobile-toggle { display: inline-flex; }
    .dash-main .container { padding: 24px 20px 70px; }
}

/* ---- property photo strip (dashboard job page + order form preview) ---- */
.photo-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; max-width: 640px; }
.photo-strip img {
    width: 108px; height: 108px; object-fit: cover; border-radius: 8px;
    border: 1px solid var(--line); display: block;
}
.photo-strip:empty { margin-top: 0; }

/* ---- job page: Domain listing photos, with a tick box each ---- */
.listing-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px; max-width: 1000px;
}
.listing-photo { font-size: .86rem; line-height: 1.4; }
.listing-photo img {
    width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block;
    border-radius: 8px; border: 1px solid var(--line); background: var(--line);
}
.listing-photo label { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; cursor: pointer; }
.listing-photo input { margin-top: 3px; flex: none; }
.listing-photo.is-unticked img { opacity: .4; }
.listing-state { margin: 4px 0 0 24px; color: var(--ink-4); }
/* Step 6's place for each photo (reportphotos.py, 2026-11-01). */
.photo-choices select { width: 100%; }
.listing-state.is-failed { color: #a12a2a; }

/* ---- order form photo picker ---- */
.photo-upload-row { display: flex; align-items: center; gap: 12px; }
.prop-images-clear {
    background: none; border: none; padding: 0; font-family: var(--sans);
    color: var(--ink-4); text-decoration: underline; cursor: pointer;
}
.prop-images-clear:hover { color: var(--navy); }

/* ---- loading overlay: shown while a real, possibly-slow POST is in
   flight (order submit, AI drafting, property-data lookup) so the page
   doesn't read as hung. Pure CSS spinner, no library. ---- */
.loading-overlay {
    position: fixed; inset: 0; z-index: 999;
    background: rgba(14, 14, 16, 0.72);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
}
.loading-overlay.is-active { opacity: 1; pointer-events: auto; }
.loading-overlay-card {
    background: #fff; border-radius: 14px; padding: 30px 38px;
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3); max-width: 340px; text-align: center;
}
.loading-spinner {
    width: 34px; height: 34px; border-radius: 50%;
    border: 3px solid var(--line); border-top-color: var(--navy);
    animation: loading-spin 0.8s linear infinite;
}
@keyframes loading-spin { to { transform: rotate(360deg); } }
.loading-overlay-text { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ink); }
.loading-overlay-note { font-family: var(--sans); font-size: 12.5px; color: var(--ink-4); margin-top: -8px; }

/* ---- top bar ---- */
.dash-bar {
    display: flex; align-items: flex-end; justify-content: space-between;
    flex-wrap: wrap; gap: 18px; padding-bottom: 26px;
    border-bottom: 1px solid var(--line-2); margin-bottom: 28px;
}
/* Several pages read cleaner without the divider under the title — same
   spacing, no rule. */
.dash-bar-plain { border-bottom: none; padding-bottom: 0; margin-bottom: 22px; }
.dash-eyebrow {
    font-family: var(--sans); font-size: 11.5px; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 8px;
}
.dash-title { font-family: var(--sans); font-size: 30px; font-weight: 700;
              letter-spacing: -.02em; color: var(--ink); }
.dash-bar-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.dash-chip {
    font-size: 11.5px; font-weight: 600; letter-spacing: .04em; padding: 6px 11px;
    border-radius: 6px; background: #fff; border: 1px solid var(--line-2); color: var(--ink-3);
}
.dash-chip-warn { background: #fff6e6; border-color: #f0d9a8; color: #8a5d10; }
/* Job page: the customer's bedrooms/bathrooms/car spaces disagree with the
   provider's record. Same amber as the warning chip. */
.feature-flag { background: #fff6e6; border: 1px solid #f0d9a8; color: #8a5d10;
    border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; font-size: 14px; }
.feature-flag ul { margin: 6px 0; padding-left: 20px; }
td.feature-differs { color: #8a5d10; font-weight: 600; }

/* ---- counters ---- */
.dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 34px; }
.dash-stat {
    background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px;
    display: flex; flex-direction: column; gap: 6px;
}
/* A tile is a link straight to its section below when it's counting one —
   "Total jobs" isn't, so it stays a plain div. */
a.dash-stat {
    text-decoration: none; color: inherit; cursor: pointer;
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
a.dash-stat:hover { border-color: var(--accent); box-shadow: 0 6px 18px rgba(16,23,61,.09); transform: translateY(-1px); }
.dash-stat-n { font-family: var(--mono); font-size: 28px; font-weight: 500; letter-spacing: -.02em;
               color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; }
.dash-stat-l { font-size: 11.5px; font-weight: 600; letter-spacing: .08em;
               text-transform: uppercase; color: var(--ink-4); }
.dash-stat-alert { border-color: #f0c9a8; background: #fffaf4; }
.dash-stat-alert .dash-stat-n { color: #b4560f; }
.dash-stat-total { background: var(--navy); border-color: var(--navy); }
.dash-stat-total .dash-stat-n { color: #fff; }
.dash-stat-total .dash-stat-l { color: rgba(255,255,255,.65); }
/* Amber = work still open, green = work done — same amber as .dash-stat-alert
   and same green as .status-approved, reused here for one visual language. */
.dash-stat-amber { border-color: #f0c9a8; background: #fffaf4; }
.dash-stat-amber .dash-stat-n { color: #b4560f; }
.dash-stat-green { border-color: #c3e6cd; background: #f3fbf5; }
.dash-stat-green .dash-stat-n { color: #1e6b34; }
/* Which tab a stat tile currently controls (dashboard.html's tabbed buckets). */
a.dash-stat.is-active { box-shadow: inset 0 0 0 2px var(--accent); }
/* Booked ahead (future-dated valuations, 2026-10-20): the same purple as
   .status-scheduled, over faint diagonal stripes, so these read as "not
   started yet" beside the live work. The table gets the stripes too. */
.dash-stat-booked {
    border-color: #ddd3fb;
    background: repeating-linear-gradient(135deg, #f7f4ff 0 10px, #efe9ff 10px 20px);
}
.dash-stat-booked .dash-stat-n { color: #5b3fb5; }
.dash-stat-booked .dash-stat-l { color: #6d55b8; }
a.dash-stat-booked:hover { border-color: #5b3fb5; }
a.dash-stat-booked.is-active { box-shadow: inset 0 0 0 2px #5b3fb5; }
.dash-tab-booked { color: #5b3fb5; }
.dash-card-booked { border-color: #ddd3fb;
    background: repeating-linear-gradient(135deg, #fbfaff 0 10px, #f5f1ff 10px 20px); }
.dash-card-booked .leads-table { background: transparent; }
.dash-card-booked .leads-table tbody tr { background: rgba(255,255,255,.7); }

/* ---- inline assign dropdown (dashboard.html "to be assigned" rows) ---- */
.assign-select {
    font-family: var(--sans); font-size: 12.5px; padding: 5px 8px; border-radius: 7px;
    border: 1px solid var(--line-2); background: #fff; max-width: 150px;
}

/* ---- in-page tabs (Settings, All Valuations) ----
   Same visual language as the old horizontal .dash-nav this replaced at the
   console level — an underline tab bar reads as "you are here" without
   introducing a second style of navigation. #}*/
.dash-tabs-nav { display: flex; gap: 4px; border-bottom: 1px solid var(--line-2);
                 margin-bottom: 20px; flex-wrap: wrap; }
.dash-tab-btn {
    background: none; border: none; padding: 10px 4px; margin-bottom: -1px;
    font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--ink-4);
    border-bottom: 2px solid transparent; cursor: pointer;
}
.dash-tab-btn + .dash-tab-btn { margin-left: 18px; }
.dash-tab-btn:hover { color: var(--ink); }
.dash-tab-btn.is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* ---- grouped permission checkboxes (Staff) ---- */
.perm-groups { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 4px; }
.perm-group { display: flex; flex-direction: column; gap: 8px; }
.perm-group-label {
    font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-4); margin: 0 0 2px;
}

/* ---- collapsible rows (Staff, Valuers) ---- */
.dash-collapse-row { background: #fff; border: 1px solid var(--line); border-radius: 12px;
                     margin-bottom: 14px; overflow: hidden; }
.dash-collapse-head {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 16px 20px; cursor: pointer; background: none; border: none; width: 100%;
    text-align: left; font-family: inherit;
}
.dash-collapse-head:hover { background: #fbfbfc; }
.dash-collapse-chevron { flex: 0 0 auto; color: var(--ink-4); transition: transform .18s ease; }
.dash-collapse-chevron svg { width: 16px; height: 16px; }
.dash-collapse-row.is-expanded .dash-collapse-chevron { transform: rotate(180deg); }
/* grid-template-rows 0fr->1fr animates smoothly to whatever height the
   content actually is, unlike max-height (which needs a guessed ceiling and
   then animates its full nominal range regardless of real content height,
   so short content "pops" open almost instantly instead of easing). */
.dash-collapse-body {
    display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease;
}
.dash-collapse-row.is-expanded .dash-collapse-body { grid-template-rows: 1fr; }
/* Padding/border live only in the expanded state — collapsed, the row
   should be able to reach true 0 height, but padding and a border are part
   of the box model regardless of min-height:0, so any collapsed-state
   padding shows up as an uncollapsible sliver. */
.dash-collapse-body-inner { overflow: hidden; min-height: 0; padding: 0 20px; }
.dash-collapse-row.is-expanded .dash-collapse-body-inner {
    padding: 4px 20px 20px; border-top: 1px solid var(--line);
}
/* An open address suggestion list (Valuers page) must not be cut off by
   the overflow: hidden the open/close animation needs. Only while a list is
   showing, so the animation is unaffected. */
.dash-collapse-row.is-expanded:has(.addr-suggest:not([hidden])),
.dash-collapse-row.is-expanded:has(.addr-suggest:not([hidden])) .dash-collapse-body-inner {
    overflow: visible;
}

/* ---- claim card + counters row (my_dashboard.html) ---- */
.dash-overview-row { display: flex; align-items: stretch; gap: 20px; margin-bottom: 34px; }
/* Same blue as .btn-primary — this card IS a button (it's the primary "go
   claim something" action on the page), so it should read as one. */
.dash-claim-card {
    flex: 0 0 200px; display: flex; flex-direction: column; justify-content: center; gap: 6px;
    background: var(--accent); color: #fff; border-radius: 12px; padding: 20px 22px;
    text-decoration: none; transition: background .15s ease, transform .15s ease;
}
.dash-claim-card:hover { background: var(--accent-2); transform: translateY(-1px); }
.dash-claim-n { font-family: var(--mono); font-size: 28px; font-weight: 500; letter-spacing: -.02em;
                line-height: 1; font-variant-numeric: tabular-nums; }
.dash-claim-l { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.dash-claim-arrow { font-size: 13px; color: rgba(255,255,255,.7); margin-top: 4px; }
.dash-overview-divider { flex: 0 0 1px; background: var(--line-2); align-self: stretch; }
.dash-overview-row .dash-stats { flex: 1; margin-bottom: 0; }

@media (max-width: 700px) {
    .dash-overview-row { overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
    .dash-overview-row .dash-stats { display: flex; gap: 14px; }
    .dash-overview-row .dash-stat { flex: 0 0 150px; }
    .dash-claim-card { flex: 0 0 170px; }
}

/* ---- cards holding each bucket ---- */
.dash-card { background: #fff; border: 1px solid var(--line); border-radius: 14px;
             margin-bottom: 20px; overflow: hidden; scroll-margin-top: 20px; }
.dash-card-alert { border-color: #e8cba9; }
.dash-card-head {
    display: flex; align-items: center; gap: 10px; padding: 18px 22px;
    border-bottom: 1px solid var(--line); background: #fcfcfd;
}
.dash-card-head h2 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.dash-count {
    font-size: 11.5px; font-weight: 700; min-width: 22px; text-align: center;
    padding: 2px 7px; border-radius: 20px; background: var(--navy-wash); color: var(--navy);
}
.dash-empty { padding: 26px 22px; font-size: 13.5px; color: var(--ink-4); }

/* ---- dashboard spacing (Dylan, 2026-10-28) ----
   The reset at the top of this file zeroes every margin, so an intro or
   note paragraph sat flush against whatever came under it: a table's
   header, a form field, a checkbox, another note. These put a steady gap
   there, everywhere on the dashboard, rather than page by page. A
   paragraph given an inline margin (label/value pairs on the System
   panel, say) keeps it: inline styles win over these. */
.dash-card-note { margin: 0; padding: 16px 22px 0; font-size: 13px; color: var(--ink-3);
    line-height: 1.6; }
.page-dashboard :is(p.muted, p.hint, p.dash-card-note)
    + :is(.field, .table-scroll, table, form, .checkbox-item, .rf-daterow, p.muted, p.hint) {
    margin-top: 14px;
}
/* A note above an empty-state line: the line's own top padding was
   doubling the gap. */
.dash-card-note + .dash-empty { padding-top: 14px; }
/* A hint under its input, inside a form field. */
.page-dashboard .field :is(input, select, textarea) + .hint { margin-top: 6px; }
.dash-foot-note { margin-top: 26px; font-size: 12.5px; color: var(--ink-4); font-style: italic; }

/* ---- tables ---- */
.table-scroll { overflow-x: auto; }
.leads-table { width: 100%; border-collapse: collapse; font-size: 13.5px; background: #fff; }
.leads-table th, .leads-table td {
    text-align: left; padding: 13px 22px; border-bottom: 1px solid var(--line);
    vertical-align: top; line-height: 1.5;
}
.leads-table thead th {
    font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-4); background: #fbfbfc; border-bottom: 1px solid var(--line-2);
    white-space: nowrap;
}
.leads-table tbody tr:last-child td { border-bottom: none; }
.leads-table tbody tr:hover { background: #fbfbfe; }
.leads-table a { color: var(--accent); font-weight: 600; text-decoration: none; }
.leads-table a:hover { text-decoration: underline; }
/* Fixed column widths (set by a <colgroup>), so two tables built the same
   way line up column for column: My valuations' Active and Completed
   lists. Long text wraps inside its column instead of widening it. */
.jobs-table-fixed { table-layout: fixed; min-width: 860px; }
.jobs-table-fixed td { overflow-wrap: break-word; }
/* key/value tables (job detail) use th in the first column */
.leads-table tr > th:first-child {
    width: 150px; background: #fbfbfc; color: var(--ink-3); font-size: 12px;
    letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
}
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px; }
.cell-dim { color: var(--ink-4); white-space: nowrap; }
.cell-wide { min-width: 240px; }
.cell-action { text-align: right; white-space: nowrap; }
.cell-action form { display: inline-block; margin: 0 6px 0 0; vertical-align: middle; }
.btn-mini {
    display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
    padding: 5px 12px; border-radius: 7px; font-size: 12px; font-family: inherit; line-height: 1.4;
    font-weight: 600; text-decoration: none !important; color: var(--accent) !important;
    border: 1px solid var(--line-2); background: #fff; cursor: pointer;
}
.btn-mini:hover { border-color: var(--accent); background: var(--navy-wash); }
/* The claim action is the primary thing to do with an unassigned row, so it
   gets the filled treatment; "Open" next to it stays the quiet default. */
.btn-mini-primary { background: var(--accent); border-color: var(--accent); color: #fff !important; }
.btn-mini-primary:hover { background: var(--accent-2); border-color: var(--accent-2); }

/* ---- status pills ---- */
.status-pill {
    display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px;
    font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    border: 1px solid transparent; white-space: nowrap;
}
.status-new       { background: #eef1f6; color: #4a5568; border-color: #dbe1ea; }
/* Booked for a future date (db.STATUS_SCHEDULED, 2026-10-20). */
.status-scheduled { background: #f3efff; color: #5b3fb5; border-color: #ddd3fb; }
.status-enriched  { background: #eaf3fb; color: #1d5c8a; border-color: #c6e0f2; }
.status-drafted   { background: #fff3e2; color: #96540c; border-color: #f2d6ad; }
.status-approved  { background: #e9f6ec; color: #1e6b34; border-color: #c3e6cd; }
.status-delivered { background: var(--navy-wash); color: var(--navy); border-color: #cfd3ee; }
/* A preparation step failed and nothing is running (2026-10-24). */
.status-attention { background: #fdecec; color: #a12020; border-color: #f4c7c7; }
/* Payments (payments.py, 2026-10-27): a job not paid for yet, a cancelled
   one, and an order's payment state on its page (status-pay-*). */
.status-awaiting_payment, .status-pay-awaiting { background: #fff3e2; color: #96540c; border-color: #f2d6ad; }
.status-cancelled, .status-pay-cancelled { background: #eef1f6; color: #4a5568; border-color: #dbe1ea; }
/* Closed as not suitable for a desktop valuation (refunds.py, stage 4). */
.status-refunded, .status-not_suitable { background: #eef1f6; color: #4a5568; border-color: #dbe1ea; }
.status-pay-paid { background: #e9f6ec; color: #1e6b34; border-color: #c3e6cd; }
.status-pay-failed, .status-pay-paid_after_cancel { background: #fdecec; color: #a12020; border-color: #f4c7c7; }
.text-danger { color: #a12020; }

/* ---- job detail panels ---- */
.page-dashboard h2 { font-family: var(--sans); font-weight: 700; font-size: 26px;
                     letter-spacing: -.02em; display: flex; align-items: center; gap: 12px;
                     flex-wrap: wrap; }
.page-dashboard h3 { font-family: var(--sans); font-size: 16px; font-weight: 700;
                     letter-spacing: -.01em; }
.page-dashboard h4 { font-family: var(--sans); font-size: 13px; font-weight: 700;
                     letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
                     margin-bottom: 10px; }
/* .section-eyebrow is the marketing site's label style (mono, accent blue) —
   on dashboard pages that mismatched the sans-serif grey .dash-eyebrow used
   elsewhere, so the same "eyebrow" text read in two different colours and
   fonts depending which page you were on. This makes every .section-eyebrow
   inside the console match .dash-eyebrow instead of restyling each template. */
.page-dashboard .section-eyebrow {
    font-family: var(--sans); font-size: 11.5px; font-weight: 600;
    letter-spacing: .16em; color: var(--ink-4);
}
.page-dashboard .section-eyebrow a { color: var(--navy); text-decoration: none; }
.page-dashboard .muted { color: var(--ink-3); font-size: 14px; }
.page-dashboard .leads-table { border: 1px solid var(--line); border-radius: 12px; }

.review-panel {
    background: #fff; border: 1px solid #e8cba9; border-left: 3px solid #d98524;
    border-radius: 12px; padding: 26px 28px; margin: 26px 0;
}
.review-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.review-actions form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.review-note-input {
    padding: 10px 13px; font-size: 13.5px; font-family: var(--sans); min-width: 240px;
    border: 1px solid var(--line-2); border-radius: 8px; background: #fff; color: var(--ink);
}
.review-note-input:focus { outline: none; border-color: var(--navy);
                           box-shadow: 0 0 0 3px var(--navy-wash); }
.signoff-record {
    background: #e9f6ec; border: 1px solid #c3e6cd; border-radius: 12px;
    padding: 16px 20px; margin: 22px 0; font-size: 14px; color: #1e6b34;
}
.signoff-record .muted { color: #3d7a52; font-size: 13px; }
.report-panel {
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    padding: 26px 28px; margin: 26px 0; display: flow-root;
}
.report-panel .btn { margin-right: 10px; }
.draft-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    flex-wrap: wrap; background: var(--navy); color: #fff; font-size: 13px;
    padding: 12px 18px; border-radius: 12px 12px 0 0;
}
.draft-mode { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px;
              background: rgba(255,255,255,.14); padding: 3px 9px; border-radius: 6px; }
.draft-body {
    background: #fff; border: 1px solid var(--line); border-top: none;
    border-radius: 0 0 12px 12px; padding: 26px 28px;
}
.draft-body p { font-size: 15px; line-height: 1.75; color: var(--ink-2); }
.draft-body h4 { margin-top: 24px; }
.draft-body ul { margin: 0 0 0 20px; }
.draft-body li { font-size: 14px; line-height: 1.65; margin-bottom: 6px; }
.indic-range {
    font-family: var(--mono);
    font-size: 24px !important; font-weight: 500; color: var(--accent) !important;
    letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}

/* dashboard buttons (used by the job actions) */
.btn-primary { background: var(--accent); color: #fff; padding: 12px 22px; font-size: 14px; }
.btn-primary:hover { background: var(--accent-2); }
.btn-ghost { background: #fff; color: var(--navy); border-color: var(--line-2);
             padding: 12px 22px; font-size: 14px; }
.btn-ghost:hover { border-color: var(--navy); background: var(--navy-wash); }
.btn-ghost-dark { background: #fff; color: var(--navy) !important; border-color: var(--line-2);
                  padding: 12px 22px; font-size: 14px; }
.btn-ghost-dark:hover { border-color: var(--navy); background: var(--navy-wash); }

/* Deleting in Settings (Feedback, Interviews). A row's delete is a
   two-click button: the first click arms it ("Confirm delete"), the second
   deletes. No browser pop-up. Delete all goes through its own page. */
.btn-danger { background: #b42318; color: #fff; border-color: transparent;
              padding: 12px 22px; font-size: 14px; }
.btn-danger:hover { background: #8f1c13; }
.del-btn { font: inherit; font-size: 12.5px; padding: 5px 10px; border-radius: 8px;
           border: 1px solid var(--line-2); background: #fff; color: #b42318;
           cursor: pointer; white-space: nowrap; }
.del-btn:hover { border-color: #b42318; }
.del-btn.is-armed { background: #b42318; color: #fff; border-color: #b42318; }
.dash-card-tools { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
                   padding: 12px 22px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.dash-card-tools a.is-active { font-weight: 700; color: var(--ink); text-decoration: none; }

/* ---- earnings-over-time chart (staff_earnings.html) ----
   A plain CSS bar chart, no JS library — consistent with the rest of the
   app. Each bar's height is set inline from that month's share of the
   highest month, so this only lays out the frame. */
.earn-chart {
    display: flex; align-items: flex-end; gap: 10px; height: 190px;
    padding: 22px 22px 0; overflow-x: auto;
}
.earn-chart-col {
    flex: 1 0 44px; display: flex; flex-direction: column; align-items: center;
    justify-content: flex-end; height: 100%; gap: 8px;
}
.earn-chart-bar {
    width: 100%; max-width: 40px; min-height: 3px; background: var(--accent);
    border-radius: 5px 5px 0 0;
}
.earn-chart-value { font-family: var(--mono); font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.earn-chart-label { font-size: 11px; color: var(--ink-4); white-space: nowrap; }

@media (max-width: 1080px) { .dash-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .dash-stats { grid-template-columns: repeat(2, 1fr); }
                             .dash-bar { align-items: flex-start; } }


/* =========================================================================
   ORDER FORM — growing property list, advisor fields, CSV review
   ========================================================================= */

.order-wrap { max-width: 780px; }
.order-wrap-wide { max-width: 1180px; }
.order-heading {
    font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-4); margin: 44px 0 18px; padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fieldset-note { font-size: 13.5px; font-weight: 600; color: var(--ink-3); margin-bottom: 14px; }
/* Bedrooms / bathrooms / car spaces: three short number boxes, kept side by
   side even on a phone (two classes, so it beats the mobile .field-row rule). */
.field-row.field-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
/* Vacant land swaps the three for a land area (brief B, 2026-11-04). The
   grid's display would otherwise beat the hidden attribute. */
.prop-counts[hidden], .prop-land[hidden] { display: none; }
.prop-features .hint { font-size: 13px; color: var(--ink-4); margin-top: -6px; margin-bottom: 18px; }

/* ---- bulk / CSV panel ---- */
.bulk-panel, .bulk-panel-open {
    border: 1px solid var(--line-2); border-radius: 12px; background: var(--fog);
    margin-bottom: 20px; overflow: hidden;
}
.bulk-panel-open { padding: 4px 24px 22px; }
.bulk-panel summary {
    cursor: pointer; padding: 18px 22px; list-style: none;
    display: flex; flex-direction: column; gap: 3px;
}
.bulk-panel summary::marker, .bulk-panel summary::-webkit-details-marker { display: none; content: ''; }
.bulk-title { font-size: 15px; font-weight: 600; color: var(--accent); }
.bulk-title::before { content: '+ '; }
.bulk-panel[open] .bulk-title::before { content: '– '; }
.bulk-sub { font-size: 13px; color: var(--ink-3); padding-left: 16px; }
.bulk-body { padding: 4px 22px 24px; border-top: 1px solid var(--line); }
.bulk-body p, .bulk-panel-open p { font-size: 14.5px; color: var(--ink-2); line-height: 1.7; margin: 16px 0; }
.bulk-body .hint, .bulk-panel-open .hint { display: block; font-size: 12.5px; color: var(--ink-4); }
.bulk-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 18px 0 12px; }
.bulk-form input[type="file"] { font-size: 13.5px; font-family: var(--sans); }

/* ---- property blocks ---- */
.prop-block {
    border: 1px solid var(--line); border-radius: 12px; background: #fff;
    padding: 22px 24px; margin-bottom: 14px;
}
.prop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.prop-n { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
          color: var(--accent); }
.prop-remove {
    background: none; border: 0; cursor: pointer; font-family: var(--sans);
    font-size: 12.5px; font-weight: 600; color: var(--ink-4); padding: 4px 6px;
}
.prop-remove:hover { color: #b4300f; }
.prop-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.bulk-nudge {
    background: none; border: 0; cursor: pointer; font-family: var(--sans);
    font-size: 13.5px; color: var(--accent); text-decoration: underline; padding: 0;
}

/* ---- on-behalf toggle + advisor fields ---- */
.onbehalf-toggle {
    display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
    background: var(--navy-wash); border: 1px solid #dcdcec; border-radius: 12px;
    padding: 18px 20px; margin-bottom: 26px;
}
.onbehalf-toggle input { margin-top: 4px; }
.onbehalf-toggle strong { display: block; font-size: 14.5px; }
.onbehalf-toggle .hint { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.advisor-fields {
    border-left: 2px solid var(--accent); padding-left: 22px; margin-bottom: 30px;
}
.advisor-fields[hidden] { display: none; }

/* ---- running total ---- */
.order-total {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    flex-wrap: wrap; background: var(--ink); border-radius: 12px;
    padding: 22px 26px; margin: 34px 0 26px;
}
.order-total-l { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .14em;
                 text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 6px; }
.order-total-n { font-family: var(--mono); font-weight: 500; font-size: 30px; color: #fff;
                 letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.order-total-s { font-size: 13px; color: rgba(255,255,255,.6); margin-left: 10px; }
.order-total .hint { color: rgba(255,255,255,.5); font-size: 12.5px; }
.order-total-d { display: block; margin-top: 6px; font-size: 13px; color: rgba(255,255,255,.75); }

/* ---- discount code (discounts.py, 2026-11-12) ---- */
.order-discount { margin: 34px 0 0; }
.order-discount-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.order-discount-row input { flex: 1 1 200px; max-width: 320px; text-transform: uppercase;
                            font-family: var(--mono); letter-spacing: .04em; }
.order-discount-row .btn { padding: 12px 22px; }
.order-discount-note { margin: 8px 0 0; }
.order-discount-note.is-applied { color: var(--accent); }

/* ---- CSV review screen ---- */
.review-flagbar, .review-okbar {
    border-radius: 10px; padding: 14px 20px; font-size: 14px; margin-bottom: 22px;
}
.review-flagbar { background: #fff6e6; border: 1px solid #f0d9a8; color: #8a5d10; }
.review-okbar { background: #e9f6ec; border: 1px solid #c3e6cd; color: #1e6b34; }
.review-table-wrap { border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.review-table td { padding: 10px 14px; }
.review-table thead th { padding: 12px 14px; }
.review-input {
    width: 100%; padding: 8px 10px; font-size: 13.5px; font-family: var(--sans);
    border: 1px solid var(--line-2); border-radius: 7px; background: #fff; color: var(--ink);
}
.review-input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-wash); }
.row-flagged { background: #fffaf1; }
.row-flagged .review-input { border-color: #e8c48f; }
.row-flag { display: block; font-size: 11.5px; color: #96540c; margin-top: 5px; }
.row-remove { background: none; border: 0; cursor: pointer; font-family: var(--sans);
              font-size: 12px; font-weight: 600; color: var(--ink-4); }
.row-remove:hover { color: #b4300f; }
.review-footer { margin-top: 4px; }
.review-actions-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }

/* ---- order summary on the thank-you page ---- */
.order-summary { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 14px;
                 background: #fff; border: 1px solid #dcdcec; border-radius: 10px; }
.order-summary th, .order-summary td { text-align: left; padding: 10px 14px;
                                       border-bottom: 1px solid var(--line); }
.order-summary thead th { font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
                          color: var(--ink-4); }
.order-summary tbody tr:last-child td { border-bottom: none; }

/* ---- console: batch context ---- */
.order-context {
    display: flex; gap: 34px; flex-wrap: wrap; background: #fff;
    border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px; margin: 24px 0;
    font-size: 14px;
}
.oc-label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
            text-transform: uppercase; color: var(--ink-4); margin-bottom: 5px; }
.order-context a { color: var(--accent); font-weight: 600; text-decoration: none; }
.oc-sub { color: var(--ink-4); margin-left: 8px; font-size: 13px; }
.tag-advisor {
    display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; padding: 2px 7px; border-radius: 4px;
    background: var(--navy-wash); color: var(--navy); margin-left: 6px;
}
.dash-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.dash-split-wide { grid-template-columns: 2fr 1fr; }
.dash-split .dash-card { margin-bottom: 0; }
.cell-wide .status-pill { margin-right: 6px; }

@media (max-width: 760px) {
    .field-row, .dash-split, .dash-split-wide { grid-template-columns: 1fr; }
    .order-total { flex-direction: column; align-items: flex-start; }
}

/* ---- address validation feedback ---- */
.addr-note { font-size: 12.5px; margin-top: 6px; }
.addr-note-checking { color: var(--ink-4); }
.addr-note-ok { color: #1e6b34; }
.addr-note-ok::before { content: '✓ '; }
.addr-note-warn { color: #96540c; }
.addr-note-warn::before { content: '! '; font-weight: 700; }
.addr-input.addr-ok { border-color: #9ccfae; }
.addr-input.addr-warn { border-color: #e8c48f; }
.review-input-tight { margin-bottom: 6px; }
.review-table td { vertical-align: top; }
.review-table .addr-note { font-size: 11.5px; margin-top: 4px; }
#client-legend .hint { display: block; font-weight: 400; margin-top: 3px; }


/* ---- mode switch button (manual entry <-> spreadsheet upload) ---- */
.btn-mode { font-size: 14px; padding: 13px 20px; }
.prop-actions { justify-content: space-between; }
.prop-actions #add-property { margin-right: auto; }

/* ---- address type-ahead ---- */
.addr-wrap { position: relative; }
.addr-suggest {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
    list-style: none; margin: 0; padding: 6px; background: #fff;
    border: 1px solid var(--line-2); border-radius: 10px;
    box-shadow: 0 14px 32px rgba(16,23,61,.13); max-height: 260px; overflow-y: auto;
}
.addr-suggest li {
    padding: 9px 12px; border-radius: 7px; font-size: 14px; color: var(--ink-2);
    cursor: pointer; line-height: 1.4;
}
.addr-suggest li:hover, .addr-suggest li.is-active {
    background: var(--navy-wash); color: var(--navy);
}
/* A small spinner at the right of the box while suggestions are on their
   way (2026-10-24), so a slow answer reads as "working", not "nothing". */
.addr-wrap.is-searching::after {
    content: ""; position: absolute; right: 12px; top: 50%;
    width: 14px; height: 14px; margin-top: -7px; border-radius: 50%;
    border: 2px solid var(--line-2); border-top-color: var(--accent);
    animation: addr-spin .7s linear infinite; pointer-events: none;
}
@keyframes addr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .addr-wrap.is-searching::after { animation: none; } }

@media (max-width: 620px) {
    .prop-actions { flex-direction: column; align-items: stretch; }
    .btn-mode { justify-content: center; }
}

/* ===========================================================================
   MOBILE NAVIGATION  (≤ 1200px)
   ---------------------------------------------------------------------------
   The top-level items don't fit a phone — or, at their full width (~715px
   for the links alone since the 2026-10-26 nav added Pricing and For
   accountants and advisers), a narrow laptop either; 860px used to
   let the brand, links and CTA button start crowding and touching each
   other before the hamburger kicked in. Brand and a hamburger stay on one
   row; everything else collapses into a panel inside the same floating
   pill, which grows to hold it while open.
   =========================================================================== */
.nav-toggle { display: none; }

@media (max-width: 1200px) {
    /* Light/dark is still handled by .nav-on-light (JS, base.html) at this
       width too — width and centring are already handled by the base rule
       above. */
    .site-header.nav-hidden { transform: translate(-50%, -130%); }
    /* A stadium shape stops looking like one once the open panel makes it
       tall, so the JS toggles this class alongside .site-nav.is-open. */
    .site-header.nav-panel-open { border-radius: 26px; }
    .header-inner { flex-wrap: wrap; padding: 12px 16px 12px 20px; }

    .nav-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 44px; height: 44px;   /* full touch target */
        background: none; border: 0; border-radius: 9px;
        color: #fff; cursor: pointer;
    }
    .nav-toggle-bars { display: block; width: 20px; height: 14px; position: relative; }
    .nav-toggle-bars span {
        position: absolute; left: 0; width: 100%; height: 2px;
        background: currentColor; border-radius: 2px;
        transition: transform .22s ease, opacity .18s ease;
    }
    .nav-toggle-bars span:nth-child(1) { top: 0; }
    .nav-toggle-bars span:nth-child(2) { top: 6px; }
    .nav-toggle-bars span:nth-child(3) { top: 12px; }
    /* Bars morph into a cross while open. */
    .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
    .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    /* The panel itself: a full-width second row inside the flex header. */
    .site-nav {
        display: none;
        flex-basis: 100%; flex-direction: column; align-items: stretch;
        gap: 0; padding: 6px 0 14px;
    }
    .site-nav.is-open { display: flex; }
    .nav-links {
        position: static; transform: none;
        flex-direction: column; align-items: stretch; gap: 0;
    }
    .nav-actions { flex-direction: column; align-items: stretch; gap: 0; margin-left: 0; }

    .nav-links > a, .nav-actions > a, .nav-drop-toggle {
        display: flex; align-items: center; width: 100%;
        min-height: 48px; padding: 4px 2px; font-size: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, .13);
        color: rgba(255, 255, 255, .9);
    }

    /* "How it works" becomes a tap-to-open accordion. */
    .nav-drop { width: 100%; }
    .nav-drop-toggle { justify-content: space-between; text-align: left; }
    .nav-drop-toggle .caret { transition: transform .2s ease; }
    .nav-drop.is-open .nav-drop-toggle .caret { transform: rotate(180deg); }

    .nav-drop-menu {
        position: static; transform: none; opacity: 1; visibility: visible;
        display: none; min-width: 0;
        margin: 6px 0 10px; padding: 4px;
        background: rgba(0, 0, 0, .16); border: 0; border-radius: 10px;
        box-shadow: none;
    }
    .nav-drop.is-open .nav-drop-menu { display: block; }
    .nav-drop-menu a { color: rgba(255, 255, 255, .92) !important; padding: 12px 12px; }
    .nav-drop-menu a:hover { background: rgba(255, 255, 255, .09); }
    .nav-drop-menu span { color: rgba(255, 255, 255, .6); }

    /* The order button is the one thing that should still look like a button. */
    .nav-actions .nav-cta {
        justify-content: center; border-bottom: 0;
        margin-top: 14px; padding: 13px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-toggle-bars span, .nav-drop-toggle .caret { transition: none; }
}


/* ---------------------------------------------------------------------------
   Report details editor (dashboard job page)
   ---------------------------------------------------------------------------
   The valuer's view of the approved report's own fields. Colour carries the
   state — filled, typed by hand, or waiting on a source that doesn't exist —
   because the point of the panel is seeing at a glance what still needs work.
--------------------------------------------------------------------------- */
.rf-progress { display: flex; flex-direction: column; gap: 8px; margin: 0 0 24px; }
.rf-progress-bar { height: 6px; border-radius: 3px; background: var(--fog-2); overflow: hidden; }
.rf-progress-bar span { display: block; height: 100%; background: var(--navy);
    border-radius: 3px; transition: width .2s ease; }
.rf-progress-text { margin: 0; font-size: 13.5px; color: var(--ink-2); }
/* Red/amber/green variant (staff_account.html's profile-completeness bar) —
   a modifier rather than changing the base colour, so the report editor's
   own progress bar (always navy) is unaffected. */
.rf-progress-bar span.is-low { background: #c0392b; }
.rf-progress-bar span.is-mid { background: #b4560f; }
.rf-progress-bar span.is-done { background: #1e6b34; }

.rf-datebox { background: var(--navy-wash); border: 1px solid var(--line);
    border-radius: 10px; padding: 20px 22px; margin: 0 0 28px; }
.rf-datebox h4 { font-size: 15px; margin-bottom: 4px; }

/* ---- two-factor sign-in (twofactor.py) ---- */
.twofactor-steps { padding-left: 20px; margin: 18px 0; }
.twofactor-steps li { margin-bottom: 18px; }
.twofactor-qr { display: block; margin: 12px 0; background: #fff; border-radius: 8px; }
.twofactor-key { word-break: break-all; }
.recovery-codes { list-style: none; padding: 0; margin: 16px 0 22px;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.recovery-codes li { font-size: 16px; }

/* ---- TRAINING banner on every practice screen (training.py) ---- */
.training-banner { background: #fff6e6; border: 2px solid #e0a83a; color: #6b4708;
    border-radius: 10px; padding: 12px 18px; margin: 18px 0; font-size: 14px; }
.training-banner strong { letter-spacing: .08em; margin-right: 8px; }

/* ---- valuer application details (Valuers page > Applications) ---- */
.app-details { border-collapse: collapse; font-size: 14px; }
.app-details th { text-align: left; font-weight: 600; color: var(--ink-3);
    padding: 4px 18px 4px 0; vertical-align: top; white-space: nowrap; }
.app-details td { padding: 4px 0; }

/* ---- valuer onboarding checklist (staff.readiness, _valuer_fields.html) ---- */
.ready-list { list-style: none; margin: 8px 0 0; padding: 0; font-size: 14px; }
.ready-list li { display: flex; gap: 10px; align-items: baseline; padding: 4px 0; }
.ready-mark { flex: 0 0 18px; font-weight: 700; text-align: center; }
.ready-list .is-ok .ready-mark { color: #1e6b34; }
.ready-list .is-not .ready-mark { color: #8a2b2b; }
/* Read out by screen readers, not shown: the tick and cross alone are
   colour and a symbol, which isn't enough on its own. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.rf-daterow { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px; margin-bottom: 14px; }
.rf-asat { font-size: 13px; color: var(--ink-3); margin: 0 0 14px; }
.rf-warn { color: #a8323c; font-weight: 600; display: block; margin-top: 3px; }

.rf-section { border: 1px solid var(--line); border-radius: 10px;
    padding: 0 22px 6px; margin: 0 0 16px; background: #fff; }
.rf-head { display: flex; align-items: center; justify-content: space-between;
    gap: 14px; padding: 15px 0 12px; border-bottom: 1px solid var(--line);
    margin-bottom: 18px; }
.rf-head h4 { margin: 0; font-size: 15px; display: flex; align-items: baseline; gap: 10px; }
.rf-num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px;
    color: var(--navy); background: var(--navy-wash); border-radius: 4px;
    padding: 2px 7px; }

.rf-badge { font-size: 11px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; border-radius: 4px; padding: 3px 8px; white-space: nowrap; }
.rf-badge-done { background: #e9f6ec; color: #1e6b34; }
.rf-badge-count { background: var(--navy-wash, #eef1fb); color: var(--ink-2); }
.rf-badge-blank { background: #fdecec; color: #a8323c; }

.rf-field { margin-bottom: 18px; }
.rf-field label { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    font-weight: 600; font-size: 14px; margin-bottom: 6px; color: var(--ink); }
.rf-field input[type="text"], .rf-field input[type="date"],
.rf-field select, .rf-field textarea {
    width: 100%; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 8px;
    font: inherit; font-size: 14px; background: #fff; color: var(--ink); }
/* As tall as the text in it (2026-11-04, Dylan): the review script sizes
   each box to its content, so a short field isn't a tall empty box. */
.rf-field textarea { resize: vertical; min-height: 42px; }
.rf-field textarea.is-fitted { overflow-y: hidden; }
.rf-field input:focus, .rf-field select:focus, .rf-field textarea:focus {
    outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy); }
.rf-field ::placeholder { color: var(--ink-4); font-style: italic; }

.rf-chip { font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; border-radius: 4px; padding: 2px 7px; }
.rf-chip-auto { background: #e9f6ec; color: #1e6b34; }
.rf-chip-typed { background: var(--navy-wash); color: var(--navy); }
.rf-chip-manual { background: #fdecec; color: #a8323c; }
.rf-chip-pending { background: #fff6e6; color: #8a5d10; }

.rf-help { margin: 5px 0 0; font-size: 12.5px; color: var(--ink-4); line-height: 1.5; }
.rf-override { display: block; color: var(--ink-3); }
.rf-await { display: block; color: #a8323c; }

.rf-comp { border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px;
    margin-bottom: 14px; background: #fbfbfc; }
.rf-comp-head { margin: 0 0 14px; font-size: 14px; display: flex;
    flex-direction: column; gap: 2px; }
.rf-comp-head .muted { font-size: 12.5px; }

.rf-save { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    margin: 22px 0 8px; }
.rf-save .muted { font-size: 12.5px; }

@media (max-width: 640px) {
    .rf-daterow { grid-template-columns: 1fr; }
}

/* Locality map preview on the job page. The pin sits dead centre because
   locality.bounding_box centres the fetched map on the property — same
   reasoning as the report renderers. */
.locality-fig { margin: 0; max-width: 640px; }
.locality-frame { position: relative; border: 1px solid var(--line);
    border-radius: 8px; overflow: hidden; line-height: 0; }
.locality-frame img { width: 100%; display: block; }
.locality-pin { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px;
    margin: -8px 0 0 -8px; border-radius: 50%; background: #c8102e;
    border: 2.5px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.45); }
.locality-fig figcaption { font-size: 12.5px; line-height: 1.5; margin-top: 8px; }

/* The AI's proposed adopted value, shown beside the field rather than in it.
   Bordered and set apart so it reads as a recommendation awaiting a decision,
   not as a value already in the report. */
.rf-suggest { margin: 10px 0 0; padding: 12px 14px; border: 1px solid var(--line-2);
    border-left: 3px solid var(--navy); border-radius: 8px; background: var(--navy-wash); }
.rf-suggest-head { display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; }
.rf-suggest-head strong { font-size: 15px; color: var(--ink); }

/* Who is signed in, and the way out — pinned at the bottom of the sidebar. */
.dash-nav-user { position: relative; }
.dash-user-trigger {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    background: none; border: 0; padding: 6px 2px 14px; font-family: var(--sans);
    font-size: 14px; font-weight: 600; color: var(--ink-3); }
.dash-user-trigger:hover { color: var(--ink); }
.dash-user-trigger[aria-expanded="true"] { color: var(--navy); }
.dash-user-caret { font-size: 10px; line-height: 1; }
.dash-user-menu {
    position: absolute; right: 0; top: 100%; z-index: 40; min-width: 190px;
    background: #fff; border: 1px solid var(--line-2); border-radius: 10px;
    padding: 6px; box-shadow: 0 10px 30px rgba(16, 23, 61, .13); }
.dash-user-menu a, .dash-user-menu button {
    display: block; width: 100%; text-align: left; box-sizing: border-box;
    padding: 9px 12px; border: 0; border-radius: 7px; background: none;
    cursor: pointer; font-family: var(--sans); font-size: 14px;
    color: var(--ink-2); text-decoration: none; }
.dash-user-menu a:hover, .dash-user-menu button:hover {
    background: var(--navy-wash); color: var(--ink); }
.dash-user-menu form { margin: 0; border-top: 1px solid var(--line); margin-top: 6px;
    padding-top: 6px; }

/* Intro text under a dashboard heading. The global `* { margin: 0 }` reset
   left these sitting flush against the heading above and the content below,
   and an inline max-width of 640px looked stranded in a column twice that
   wide. The 78ch measure that replaced it did the same (2026-10-26): text
   now runs the full width of the section. */
.dash-intro { margin: 10px 0 26px; line-height: 1.65; }

/* Staff sign-in, first-run setup and the forced password change. These sit
   outside the dashboard chrome — a person who can't get in yet shouldn't be
   looking at navigation into pages they can't reach — so they need their own
   centred column rather than .container's full width. */
.auth-wrap { max-width: 430px; margin: 0 auto; }
.auth-wrap h1 { font-size: 1.7rem; line-height: 1.25; }
.auth-wrap .btn { width: 100%; justify-content: center; margin-top: 4px; }
.auth-note { margin-top: 22px; font-size: 13px; color: var(--ink-4); line-height: 1.6; }


/* =========================================================================
   2026-10-09 — logo, valuation types, contact page, home page refresh
   ========================================================================= */

/* ---- logo (inline SVG from _macros.logo) ----
   The dark parts are fill="currentColor", so the colour set here is the
   colour of the lettering: white on the dark header and sidebar, navy in
   the footer. */
.logo, .logo-mark { display: block; }
.brand { color: #fff; }
.brand-logo { height: 26px; width: auto; }
.footer-logo { color: var(--navy); }
.footer-logo-svg { height: 30px; width: auto; }

.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Dashboard sidebar logo. Collapsed to icons (wide screens only — below
   900px the rail is never collapsed), the logo is hidden altogether so the
   expand button has the 72px to itself. */
.dash-sidebar-brand { color: #fff; }
.dash-sidebar-logo { height: 20px; width: auto; }
@media (min-width: 901px) {
    .dash-sidebar.is-collapsed .dash-sidebar-brand { display: none; }
}

/* ---- contact band (every public page, _contact_band.html) ---- */
.contact-inner { align-items: center; }
.contact-action { display: flex; justify-content: flex-end; }
@media (max-width: 900px) {
    .contact-action { justify-content: flex-start; }
}

/* ---- hero: price line ---- */
/* Same colour as the hero heading (white here, navy on the light hero —
   decisions.md, 2026-10-15), and big enough to be the first thing read on
   the card. */
.hero-form-title {
    font-size: clamp(24px, 2.3vw, 32px); font-weight: 700; letter-spacing: -.025em;
    line-height: 1.1; color: #fff; text-transform: none; margin-bottom: 10px;
}
.hero-form-example { color: rgba(255,255,255,.78); font-size: 13px; }
.hero-form-powered-by { display: flex; align-items: center; justify-content: center; gap: 8px; }
/* "Domain" in text, in green, in place of the logo image (Dylan,
   2026-10-20). Domain's own green. */
.domain-word { color: #0ea800; font-weight: 700; letter-spacing: -.01em; font-size: 15px; }
.hero-form-example + .hero-form-example { margin-top: 8px; }

/* ---- hero tick list (2026-10-26 redesign) ----
   The mock-up's four points, in place of the credential wall. A white tick
   on the accent circle reads on both hero looks. */
.hero-ticks { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; }
.hero-ticks li { position: relative; padding-left: 32px; font-size: 16px; line-height: 1.5;
    color: rgba(255,255,255,.92); }
.hero-ticks li::before {
    content: ''; position: absolute; left: 0; top: 2px; width: 20px; height: 20px;
    border-radius: 50%; background: var(--accent) center / 12px no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
}
[data-theme="light"] .hero-ticks li { color: var(--ink-2); }
/* The heading's three lines (home.html) are set with <br>s and don't wrap
   on wider screens; on a phone the middle line is wider than the screen, so
   there it wraps normally instead. */
@media (max-width: 640px) {
    .hero h1 { white-space: normal; }
    .hero h1 br { display: none; }
}

/* ---- 1 July 2027 banner along the bottom of the hero ----
   Dark on both hero looks (Dylan, 2026-10-27): darker than the dark hero's
   navy so it reads as a band, and solid so the map doesn't show through. */
.reserve-band { position: relative; z-index: 2; background: #0a0f2c;
    border-top: 1px solid rgba(255,255,255,.08); }
.reserve-band-inner { display: flex; align-items: center; justify-content: space-between;
    gap: 18px 40px; padding-top: 26px; padding-bottom: 26px; }
.reserve-band h2 { font-family: var(--sans); font-weight: 700; letter-spacing: -.025em;
    font-size: clamp(20px, 2vw, 26px); line-height: 1.2; margin-bottom: 4px; color: #fff; }
.reserve-band p { color: rgba(255,255,255,.75); font-size: 15px; line-height: 1.55; }

/* ---- "Not sure which valuation you need?": a darker tab under the card ----
   Tucked under the card's bottom edge (negative margin, card above it). */
.hero-form-stack { position: relative; }
.hero-form-card { position: relative; z-index: 1; }
.hero-form-extra { position: relative; z-index: 0; margin: -20px 16px 0;
    padding: 32px 20px 14px; border-radius: 0 0 18px 18px; text-align: center;
    background: #090e2a; border: 1px solid rgba(255,255,255,.2); border-top: 0;
    box-shadow: 0 14px 30px rgba(4,6,20,.35);
    font-size: 14px; color: rgba(255,255,255,.78); }
/* The text and its small arrow button side by side, wrapping onto two
   lines only when the card is narrow. */
.hero-form-extra { display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 8px 14px; }
[data-theme="light"] .hero-form-extra { background: #dfe5f7; border-color: #cfd7f0; color: var(--ink-2); }

/* A smaller version of the arrow button (_macros.arrow_button with
   'btn-small'), for a secondary link like the hero's "Find out". */
.btn.btn-small { padding: 6px 6px 6px 16px; font-size: 13.5px; font-weight: 600; gap: 8px; }
.btn-small .btn-arrow-circle { width: 26px; height: 26px; }
.btn-small .btn-arrow-circle svg { width: 14px; height: 14px; }
.reserve-band .btn-solid { background: var(--accent); color: #fff; flex: 0 0 auto; }
.reserve-band .btn-solid:hover { background: var(--accent-2); }
@media (max-width: 900px) {
    .reserve-band-inner { flex-direction: column; align-items: flex-start; }
}

/* ---- hero on big screens (Dylan, 2026-10-28) ----
   The hero was laid out on a 1080p screen. On a 1440p or 4K screen the
   same layout sat small in the middle, with a lot of empty space round it,
   because the text and card are fixed sizes and the column stops at
   1320px. Here the hero's content and the 1 July 2027 banner are scaled up
   as a whole with `zoom`, so they look exactly as they do on 1080p, just
   bigger. Scaling everything at once keeps the text, card and gaps in
   proportion, which tuning each font size separately wouldn't.
   Each step needs a tall window as well as a wide one, so a wide but
   short window (an ultrawide, or a browser not full screen) isn't
   zoomed past what fits. Only the content is zoomed, not the .hero
   itself, so the map behind still fills the screen. Nothing changes at
   1080p or below. */
@media (min-width: 2100px) and (min-height: 1100px) {
    .hero-inner, .reserve-band-inner { zoom: 1.15; }
}
@media (min-width: 2400px) and (min-height: 1200px) {
    .hero-inner, .reserve-band-inner { zoom: 1.3; }
}
@media (min-width: 3200px) and (min-height: 1650px) {
    .hero-inner, .reserve-band-inner { zoom: 1.65; }
}

/* ---- three-up cards and links under them (Home, 2026-10-26) ---- */
.pillar-grid-3 { grid-template-columns: repeat(3, 1fr); }
.pillar > h3 { margin-bottom: 10px; }
.pillar p + p { margin-top: 12px; }
.pillar-link a, .faq-more a { color: var(--accent); font-weight: 600; text-decoration: none; }
.pillar-link a:hover, .faq-more a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pillar-link a::after, .faq-more a::after { content: ' \2192'; }
.faq-more { margin-top: 24px; font-size: 15px; }
@media (max-width: 900px) {
    .pillar-grid-3 { grid-template-columns: 1fr; }
}

/* ---- Contact page ---- */
.contact-form { max-width: 680px; }
.contact-form textarea { resize: vertical; }
.contact-privacy { margin: -4px 0 18px; font-size: 13.5px; color: var(--ink-3); }
.contact-sent {
    max-width: 680px; background: var(--navy-wash); border: 1px solid #dcdcec;
    border-radius: 16px; padding: 28px 30px;
}
.contact-sent h3 { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.contact-sent p { color: var(--ink-2); }
.contact-sent p + p { margin-top: 10px; }
.contact-sent a { color: var(--accent); font-weight: 500; }
.contact-way { display: flex; gap: 14px; align-items: flex-start; }
.contact-way-icon {
    width: 40px; height: 40px; border-radius: 12px; background: #fff;
    border: 1px solid var(--line); color: var(--accent);
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.contact-way-icon svg { width: 20px; height: 20px; }
.contact-way-label { font-size: 13px; color: var(--ink-3); margin-bottom: 2px; }
.contact-way a { color: var(--ink); font-weight: 600; text-decoration: none; word-break: break-word; }
.contact-way a:hover { color: var(--accent); }
/* The intro beside the form, then "Other ways to contact us" below
   (2026-10-26 redesign). */
.contact-title { font-size: clamp(30px, 3.6vw, 46px); }
.contact-privacy-after { margin: 14px 0 0; }
/* "Other ways to contact us" as a coloured bubble under the intro
   (Dylan, 2026-10-27). */
.contact-bubble { margin-top: 32px; padding: 24px 26px; border-radius: 18px;
    background: var(--navy-wash); border: 1px solid #dcdcec; }
.contact-bubble .section-eyebrow { margin-bottom: 16px; }
.contact-bubble-note { margin-top: 18px; padding-top: 14px; border-top: 1px solid #d5dcf3;
    font-size: 14px; color: var(--ink-3); }
.contact-bubble-note a { color: var(--accent); font-weight: 500; }

/* ---- About us: team, three equal cards (2026-10-26 redesign) ----
   Photo on top, then name, role and a short background, in the order
   Stephanie, Peta, Dylan. Dylan's card shows initials until there's a
   photo. */
.team-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.team-person { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 24px; }
.team-photo { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px;
    display: block; background: var(--fog-2); margin-bottom: 18px; }
.team-initials { display: flex; align-items: center; justify-content: center;
    background: var(--navy-wash); color: var(--accent);
    font-family: var(--mono); font-weight: 600; font-size: 40px; }
.team-person h3 { font-size: 19px; font-weight: 700; letter-spacing: -.015em; margin-bottom: 2px; }
.team-person .team-role { font-size: 14px; color: var(--accent); font-weight: 600; }
.team-bio { margin-top: 12px; font-size: 14.5px; color: var(--ink-2); line-height: 1.6; }
@media (max-width: 900px) {
    .team-trio { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .team-trio { grid-template-columns: 1fr; }
}


/* ===========================================================================
   HOME HERO: LIGHT AND DARK  (decisions.md, 2026-10-15)
   ---------------------------------------------------------------------------
   Users found the all-navy hero hard to read, so the home page hero now has
   two looks: the dark one (the rules further up, tuned for readability) and
   a light one on the pale navy wash (below). Which one shows is
   <html data-theme="light|dark">, set by the script at the top of
   base.html from the visitor's browser setting or their own pick with the
   sun/moon button. Only the hero and the header pill over it change; the
   rest of the site is already light and its navy bands stay navy, so this
   is NOT a site-wide dark mode. Dark stays the default in this file, and
   everything for the light look is scoped under [data-theme="light"].
   =========================================================================== */

/* ---- the sun/moon button (home page only, see base.html) ---- */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: 0 0 auto; padding: 0; cursor: pointer;
    border-radius: 50%; border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.08); color: #fff;
    transition: background-color .2s, border-color .2s, color .2s;
}
.theme-toggle:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); }
/* currentColor: white on the dark pill, navy on the light one, so the ring
   always stands out from whatever is behind it. */
.theme-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.theme-toggle svg { width: 19px; height: 19px; display: block; }
/* Moon on the light look ("go dark"), sun on the dark look ("go light"). */
.theme-toggle .theme-icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .theme-icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; }
/* Two copies of the button (base.html): beside the order button on wide
   screens, beside the hamburger below 1200px so it never hides in the
   menu panel. display:none also takes the unused one out of the tab order. */
.theme-toggle-mobile { display: none; }
@media (max-width: 1200px) {
    .theme-toggle-desktop { display: none; }
    /* margin-left:auto pushes it (and the hamburger after it) to the right. */
    .theme-toggle-mobile { display: inline-flex; width: 44px; height: 44px;
                           margin-left: auto; margin-right: 6px; }
}

/* ---- header pill over the dark hero: links a touch brighter ---- */
@media (min-width: 1201px) {
    .site-header.nav-on-hero .nav-links a,
    .site-header.nav-on-hero .nav-drop-toggle { color: rgba(255,255,255,.88); }
    .site-header.nav-on-hero .nav-links a:hover,
    .site-header.nav-on-hero .nav-drop:hover .nav-drop-toggle { color: #fff; }
}

/* ---- header pill over the light hero: white glass, navy text ----
   base.html's updateNavTone() adds .nav-on-hero-light only while the
   light hero is behind the header; past the hero it's the usual look. */
.site-header.nav-on-hero-light {
    background: rgba(255,255,255,.78);
    border-color: rgba(16,23,61,.08);
    box-shadow: 0 12px 30px rgba(16,23,61,.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.site-header.nav-on-hero-light .brand { color: var(--navy); }
.site-header.nav-on-hero-light .nav-links a,
.site-header.nav-on-hero-light .nav-drop-toggle { color: var(--ink-2); }
.site-header.nav-on-hero-light .nav-links a:hover,
.site-header.nav-on-hero-light .nav-drop:hover .nav-drop-toggle,
.site-header.nav-on-hero-light .nav-drop:focus-within .nav-drop-toggle { color: var(--navy); }
.site-header.nav-on-hero-light .theme-toggle {
    background: #fff; border-color: rgba(16,23,61,.14); color: var(--navy);
}
.site-header.nav-on-hero-light .theme-toggle:hover { background: var(--navy-wash); }
@media (max-width: 1200px) {
    .site-header.nav-on-hero-light .nav-toggle { color: var(--navy); }
    /* The open menu panel, while it's over the light hero. */
    .site-header.nav-on-hero-light .nav-links > a,
    .site-header.nav-on-hero-light .nav-drop-toggle {
        color: var(--ink-2); border-bottom-color: rgba(16,23,61,.1);
    }
    .site-header.nav-on-hero-light .nav-drop-menu { background: rgba(16,23,61,.05); }
    .site-header.nav-on-hero-light .nav-drop-menu a { color: var(--ink) !important; }
    .site-header.nav-on-hero-light .nav-drop-menu a:hover { background: rgba(16,23,61,.06); }
    .site-header.nav-on-hero-light .nav-drop-menu span { color: var(--ink-3); }
}

/* ---- the light hero ---- */
[data-theme="light"] .hero { background: var(--navy-wash); }
[data-theme="light"] .hero-shade {
    background: linear-gradient(90deg, rgba(238,241,251,.95) 0%, rgba(238,241,251,.82) 40%,
                                rgba(238,241,251,.2) 72%, rgba(238,241,251,0) 100%);
}
@media (max-width: 860px) {
    [data-theme="light"] .hero-shade { background: rgba(238,241,251,.8); }
}
[data-theme="light"] .hero h1 { color: var(--navy); }
/* --accent-2, not --accent: plain accent is too faint on the wash. */
[data-theme="light"] .hero .sub { font-size: 17px; font-weight: 400; color: var(--ink-2); }

[data-theme="light"] .hero-form-card {
    background: #fff; border-color: var(--line);
    box-shadow: 0 24px 60px rgba(16,23,61,.12);
}
[data-theme="light"] .hero-form-title { color: var(--navy); }
[data-theme="light"] .hero-form-lede { color: var(--ink-2); }
[data-theme="light"] .hero-form-card .field label { color: var(--ink); }
[data-theme="light"] .hero-form-card .hint { color: var(--ink-3); }
/* On a white card the fields need their border back to be seen at all. */
[data-theme="light"] .hero-form-card .field select,
[data-theme="light"] .hero-form-card .field input:not([type="checkbox"]):not([type="radio"]) {
    background-color: #fff; color: var(--ink); border-color: var(--line-2);
}
[data-theme="light"] .hero-form-card .field input::placeholder { color: var(--ink-4); }
[data-theme="light"] .hero-form-card .field input:focus,
[data-theme="light"] .hero-form-card .field select:focus { border-color: var(--accent); }
[data-theme="light"] .hero-form-example,
[data-theme="light"] .hero-form-powered-by { color: var(--ink-3); }
[data-theme="light"] .hero-form-example a { color: var(--accent); }
[data-theme="light"] .hero-form-example a:hover { color: var(--accent-2); }

/* ---- pop-up dialogs (dashboard) ----
   The native <dialog>, opened with showModal() by the script in
   dashboard_base.html (data-open-dialog). First use: the high-value
   sign-off on the job page (2026-10-24). */
.hv-dialog {
    /* margin: auto is what centres a modal <dialog>; the reset at the top
       of this file (* { margin: 0 }) removes it, which put the pop-up in
       the top-left corner. */
    margin: auto;
    max-width: 520px; width: calc(100% - 32px);
    border: 1px solid var(--line); border-radius: 14px;
    padding: 26px; background: var(--paper); color: var(--ink);
    box-shadow: 0 24px 60px rgba(16, 23, 61, .25);
}
.hv-dialog::backdrop { background: rgba(16, 23, 61, .45); }
.hv-dialog p { font-size: 15px; color: var(--ink-2); }
.hv-dialog button[disabled] { opacity: .5; cursor: not-allowed; }

/* ---- job preparation checklist (2026-10-24) ----
   dashboard_job.html: the automatic steps (property data, locality map,
   planning, AI draft) and where each is up to. */
.prep-panel {
    margin: 18px 0; padding: 18px 20px; border-radius: 12px;
    background: var(--navy-wash); border: 1px solid #cfd3ee;
}
.prep-panel-failed { background: #fdf3f3; border-color: #f4c7c7; }
.prep-title { font-weight: 700; margin: 0 0 4px; }
.prep-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.prep-step { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.prep-icon {
    flex: 0 0 18px; height: 18px; margin-top: 2px; border-radius: 50%;
    border: 2px solid var(--line-2); box-sizing: border-box;
}
.prep-done .prep-icon { background: #1e6b34; border-color: #1e6b34; }
.prep-done .prep-icon::after {
    content: ""; display: block; width: 5px; height: 9px; margin: 1px 0 0 4px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.prep-running .prep-icon {
    border-color: var(--accent); border-right-color: transparent;
    animation: prep-spin .9s linear infinite;
}
.prep-failed .prep-icon { background: #a12020; border-color: #a12020; }
.prep-error { display: block; margin-top: 4px; font-size: 13px; color: #a12020; }
@keyframes prep-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .prep-running .prep-icon { animation: none; } }

/* "Re-run automatic steps" — kept small and out of the way. */
.rerun-menu { margin-top: 48px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; }
.rerun-menu summary { cursor: pointer; color: var(--ink-3); font-size: 13px; }
.rerun-menu summary:hover { color: var(--ink); }

/* ===========================================================================
   DASHBOARD DARK MODE  (2026-10-24, Dylan)
   ---------------------------------------------------------------------------
   The dashboard has its own light/dark choice, separate from the home page
   hero's (they're different places, used differently). <html
   data-dash-theme="dark"> is set before anything is drawn by the script at
   the top of base.html, from the sidebar's sun/moon button (remembered in
   this browser only, under "veristone-dash-theme"). Light stays the default.
   Everything below only applies inside the dashboard (.page-dashboard).

   How it works: the colour variables are redefined for dark, so every rule
   written with var(--line), var(--ink) and so on follows by itself. --navy
   becomes a light navy, because most rules use it as a text colour; the few
   that use it as a background (sidebar, banners) are set again below. Then
   the rules that hard-code a light colour (#fff cards, pale status colours)
   get a dark version. A new dashboard rule should use the variables, or add
   its dark version here.
   =========================================================================== */
[data-dash-theme="dark"] .page-dashboard {
    --dash-bg:   #0d1120;
    --paper:     #151a2c;   /* cards and panels */
    --fog:       #1a2034;
    --fog-2:     #222944;
    --line:      #273050;
    --line-2:    #323b5f;
    --ink:       #e7e9f2;
    --ink-2:     #c8cde0;
    --ink-3:     #a2a9c4;
    --ink-4:     #8088a8;
    --navy:      #c9cfee;   /* as text: headings, figures, links */
    --navy-2:    #2a3566;
    --navy-wash: #1d2650;
    --accent:    #8996da;   /* the brand blue, lifted for contrast on dark */
    --accent-2:  #9ea8e1;
    /* Dark form controls, scrollbars and date pickers (base.html says
       "light only" for the public site). */
    color-scheme: dark;
    color: var(--ink);
}
html[data-dash-theme="dark"]:has(body.page-dashboard) { color-scheme: dark; background: #0d1120; }

/* --navy used as a background: keep these dark. */
[data-dash-theme="dark"] .page-dashboard .dash-sidebar { background: #0a0e1b; border-right: 1px solid var(--line); }
[data-dash-theme="dark"] .page-dashboard .dash-feedback-toggle { background: #26315f; }
[data-dash-theme="dark"] .page-dashboard .dash-feedback-toggle:hover { background: #313d74; }
[data-dash-theme="dark"] .page-dashboard .dash-top-button { background: #1b2140; color: #e7eaf6; border-color: #313d74; }
[data-dash-theme="dark"] .page-dashboard .dash-stat-total { background: #1d2650; border-color: #2c3870; }
[data-dash-theme="dark"] .page-dashboard .draft-banner { background: #1d2650; color: var(--ink); }
[data-dash-theme="dark"] .page-dashboard .rf-progress-bar span { background: var(--accent); }
[data-dash-theme="dark"] .page-dashboard .loading-spinner { border-top-color: var(--accent); }

/* Surfaces hard-coded white or near-white. */
[data-dash-theme="dark"] .page-dashboard :is(
    .dash-card, .dash-stat, .dash-collapse-row, .dash-chip, .dash-mobile-toggle,
    .dash-feedback-panel, .loading-overlay-card, .review-panel, .report-panel,
    .draft-body, .order-context, .rf-section, .dash-user-menu, .review-table-wrap,
    .leads-table, .addr-suggest, .assign-select, .btn-mini, .del-btn,
    .btn-ghost, .btn-ghost-dark) {
    background: var(--paper); color: inherit;
}
[data-dash-theme="dark"] .page-dashboard :is(.btn-ghost, .btn-ghost-dark) { color: var(--ink) !important; }
[data-dash-theme="dark"] .page-dashboard .del-btn { color: #ff8f86; }
[data-dash-theme="dark"] .page-dashboard .del-btn.is-armed { background: #b42318; color: #fff; }
[data-dash-theme="dark"] .page-dashboard .btn-mini-primary { background: var(--accent); color: #0d1120 !important; }
/* The lifted blue is light, so filled blue buttons take dark text. */
[data-dash-theme="dark"] .page-dashboard :is(.btn-primary, .dash-claim-card, .btn-solid) { color: #0d1120; }
/* The selected sidebar link keeps white text on the deeper brand blue. */
[data-dash-theme="dark"] .page-dashboard .dash-sidebar-link.is-active { background: #4e61c8; color: #fff; }
/* .btn-secondary has no light-mode style of its own (the browser's grey
   button); in dark it needs one, or it shows as a flat mid-grey pill. */
[data-dash-theme="dark"] .page-dashboard .btn-secondary {
    background: var(--fog-2); color: var(--ink); border-color: var(--line-2);
}
[data-dash-theme="dark"] .page-dashboard .btn-secondary:hover { border-color: var(--accent); }
[data-dash-theme="dark"] .page-dashboard .dash-claim-arrow { color: rgba(13,17,32,.7); }
[data-dash-theme="dark"] .page-dashboard :is(.dash-card-head, .leads-table thead th,
    .leads-table tr > th:first-child, .rf-comp, .dash-collapse-head:hover) {
    background: var(--fog);
}
[data-dash-theme="dark"] .page-dashboard .leads-table tbody tr:hover { background: #1a2140; }
[data-dash-theme="dark"] .page-dashboard :is(
    .field input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="hidden"]),
    .field select, .field textarea, .rf-field input[type="text"], .rf-field input[type="date"],
    .rf-field select, .rf-field textarea, .review-note-input, .review-input,
    .dash-feedback-panel textarea) {
    background: #0f1426; color: var(--ink); border-color: var(--line-2);
}
[data-dash-theme="dark"] .page-dashboard .addr-suggest li { color: var(--ink-2); }
[data-dash-theme="dark"] .page-dashboard .addr-suggest li:hover,
[data-dash-theme="dark"] .page-dashboard .addr-suggest li.is-active { color: var(--ink); }

/* The coloured states: pale pastels glare on dark, so each becomes a tint
   of the same colour with lighter text. Same meaning, same colour family. */
[data-dash-theme="dark"] .page-dashboard {
    --amber-bg: rgba(240, 168, 60, .12);  --amber-line: rgba(240, 168, 60, .38);  --amber-ink: #f2c27a;
    --green-bg: rgba(70, 190, 110, .12);  --green-line: rgba(70, 190, 110, .38);  --green-ink: #86d9a0;
    --red-bg:   rgba(235, 90, 90, .13);   --red-line:   rgba(235, 90, 90, .40);   --red-ink:   #ff9d9d;
    --blue-bg:  rgba(90, 160, 235, .13);  --blue-line:  rgba(90, 160, 235, .38);  --blue-ink:  #93c8f4;
    --violet-bg: rgba(150, 120, 245, .15); --violet-line: rgba(150, 120, 245, .42); --violet-ink: #bfaeff;
    --grey-bg:  rgba(160, 172, 196, .12); --grey-line:  rgba(160, 172, 196, .30); --grey-ink:  #bcc4d6;
}
[data-dash-theme="dark"] .page-dashboard :is(.review-flagbar, .dash-chip-warn, .feature-flag,
    .status-drafted, .rf-chip-pending, .training-banner, .dash-stat-alert, .dash-stat-amber) {
    background: var(--amber-bg); border-color: var(--amber-line); color: var(--amber-ink);
}
[data-dash-theme="dark"] .page-dashboard td.feature-differs { color: var(--amber-ink); }
[data-dash-theme="dark"] .page-dashboard :is(.dash-stat-alert, .dash-stat-amber) .dash-stat-n { color: var(--amber-ink); }
[data-dash-theme="dark"] .page-dashboard .review-panel { border-color: var(--amber-line); border-left-color: #d98524; }
[data-dash-theme="dark"] .page-dashboard :is(.review-okbar, .signoff-record, .status-approved,
    .rf-badge-done, .rf-chip-auto, .dash-stat-green) {
    background: var(--green-bg); border-color: var(--green-line); color: var(--green-ink);
}
[data-dash-theme="dark"] .page-dashboard .signoff-record .muted { color: var(--green-ink); opacity: .8; }
[data-dash-theme="dark"] .page-dashboard .dash-stat-green .dash-stat-n { color: var(--green-ink); }
[data-dash-theme="dark"] .page-dashboard .ready-list .is-ok .ready-mark { color: var(--green-ink); }
[data-dash-theme="dark"] .page-dashboard :is(.errors, .status-attention, .rf-badge-blank,
    .rf-chip-manual) {
    background: var(--red-bg); border-color: var(--red-line); color: var(--red-ink);
}
/* The failed checklist keeps ordinary text; only the heading is red. */
[data-dash-theme="dark"] .page-dashboard .prep-panel-failed { background: var(--red-bg); border-color: var(--red-line); }
[data-dash-theme="dark"] .page-dashboard .prep-panel-failed .prep-title { color: var(--red-ink); }
[data-dash-theme="dark"] .page-dashboard :is(.text-danger, .prep-error, .rf-warn, .rf-await,
    .listing-state.is-failed, .ready-list .is-not .ready-mark) { color: var(--red-ink); }
[data-dash-theme="dark"] .page-dashboard .status-enriched {
    background: var(--blue-bg); border-color: var(--blue-line); color: var(--blue-ink);
}
[data-dash-theme="dark"] .page-dashboard .status-new {
    background: var(--grey-bg); border-color: var(--grey-line); color: var(--grey-ink);
}
[data-dash-theme="dark"] .page-dashboard .status-scheduled,
[data-dash-theme="dark"] .page-dashboard .dash-stat-booked,
[data-dash-theme="dark"] .page-dashboard .dash-card-booked {
    background: var(--violet-bg); border-color: var(--violet-line); color: var(--violet-ink);
}
[data-dash-theme="dark"] .page-dashboard :is(.dash-stat-booked .dash-stat-n, .dash-stat-booked .dash-stat-l,
    .dash-tab-booked) { color: var(--violet-ink); }
[data-dash-theme="dark"] .page-dashboard .dash-card-booked .leads-table tbody tr { background: rgba(21,26,44,.75); }
[data-dash-theme="dark"] .page-dashboard .status-delivered { border-color: #2c3870; }
[data-dash-theme="dark"] .page-dashboard :is(.status-awaiting_payment, .status-pay-awaiting) {
    background: var(--amber-bg); border-color: var(--amber-line); color: var(--amber-ink);
}
[data-dash-theme="dark"] .page-dashboard :is(.status-cancelled, .status-pay-cancelled,
    .status-refunded, .status-not_suitable) {
    background: var(--grey-bg); border-color: var(--grey-line); color: var(--grey-ink);
}
[data-dash-theme="dark"] .page-dashboard .status-pay-paid {
    background: var(--green-bg); border-color: var(--green-line); color: var(--green-ink);
}
[data-dash-theme="dark"] .page-dashboard :is(.status-pay-failed, .status-pay-paid_after_cancel) {
    background: var(--red-bg); border-color: var(--red-line); color: var(--red-ink);
}
[data-dash-theme="dark"] .page-dashboard .prep-panel { border-color: #2c3870; }
[data-dash-theme="dark"] .page-dashboard .prep-done .prep-icon { background: #2f9a55; border-color: #2f9a55; }
[data-dash-theme="dark"] .page-dashboard .prep-failed .prep-icon { background: #d64545; border-color: #d64545; }
[data-dash-theme="dark"] .page-dashboard .rf-progress-bar span.is-low { background: #d64545; }
[data-dash-theme="dark"] .page-dashboard .rf-progress-bar span.is-mid { background: #d98524; }
[data-dash-theme="dark"] .page-dashboard .rf-progress-bar span.is-done { background: #2f9a55; }

/* Pictures keep their own colours; just soften the frame. The two-factor
   QR code stays on white, or phone cameras can't read it. */
[data-dash-theme="dark"] .page-dashboard .twofactor-qr { background: #fff; padding: 8px; }
[data-dash-theme="dark"] .page-dashboard .hv-dialog { box-shadow: 0 24px 60px rgba(0,0,0,.55); }

/* ---- the sun/moon button in the sidebar (dashboard_base.html) ----
   Laid out like a sidebar link so it lines up and still works with the
   rail collapsed to icons. The moon shows in light mode (switch to dark),
   the sun in dark mode. */
.dash-theme-toggle { width: 100%; background: none; border: 0; cursor: pointer; font-family: inherit; text-align: left; }
.dash-theme-toggle .dash-theme-sun { display: none; }
[data-dash-theme="dark"] .dash-theme-toggle .dash-theme-sun { display: inline; }
[data-dash-theme="dark"] .dash-theme-toggle .dash-theme-moon { display: none; }

/* ===========================================================================
   JOB PAGE: AT A GLANCE + REVIEW WALKTHROUGH  (2026-10-24, Dylan)
   dashboard_job.html and review.py. Colours are the variables only, so the
   dashboard's dark mode follows without rules of its own.
   =========================================================================== */
.job-meta { margin: 0 0 18px; font-size: 14px; color: var(--ink-3); }
.job-meta strong { color: var(--ink); }
.job-cards { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; margin: 18px 0; }
.job-card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; min-width: 0; }
.job-card-title { margin: 0 0 12px; font-size: 12px !important; letter-spacing: .1em !important;
    text-transform: uppercase; color: var(--ink-4); font-weight: 700; }
.job-prop { display: flex; gap: 16px; align-items: flex-start; }
.job-thumb { width: 150px; height: 110px; object-fit: cover; border-radius: 10px;
    border: 1px solid var(--line); flex: 0 0 auto; }
.job-address { font-size: 19px; font-weight: 700; line-height: 1.3; margin: 0 0 6px; color: var(--ink); }
.job-facts { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--ink-3); }
.job-facts b { display: block; font-family: var(--mono); font-weight: 500; font-size: 17px; color: var(--ink); }
.job-domain-link { margin: 12px 0 0; font-size: 14px; }
.job-kv { display: grid; grid-template-columns: 96px 1fr; gap: 6px 12px; margin: 0; font-size: 14px; }
.job-kv dt { color: var(--ink-4); }
.job-kv dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 900px) {
    .job-cards { grid-template-columns: 1fr; }
    .job-prop { flex-direction: column; }
    .job-thumb { width: 100%; height: 160px; }
}

/* "Review the property details" */
.review-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px;
    flex-wrap: wrap; background: var(--navy-wash); border: 1px solid var(--line-2);
    border-radius: 14px; padding: 18px 22px; margin: 18px 0 26px; }
.review-cta[hidden] { display: none; }

/* The walkthrough: every step on one page (brief F, 2026-11-04), with the
   step list and "Next to review" beside them, staying in view. */
.review { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 22px;
    align-items: start; margin: 18px 0 26px; }
.review-side { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px;
    max-height: calc(100vh - 32px); overflow-y: auto; }
.review-steplist-box { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 10px; }
.review-progress-text { margin: 4px 10px 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.review-progress { height: 6px; background: var(--fog); border-radius: 999px; margin: 0 10px 10px; overflow: hidden; }
.review-progress span { display: block; height: 100%; background: #1e6b34; border-radius: 999px;
    transition: width .2s ease; }
[data-dash-theme="dark"] .page-dashboard .review-progress span { background: #2f9a55; }
.review-steplist { list-style: none; margin: 0; padding: 0; }
.review-steplink { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left;
    border-radius: 8px; padding: 9px 10px; text-decoration: none;
    font-size: 14px; color: var(--ink-2); box-sizing: border-box; }
.review-steplink:hover { background: var(--fog); color: var(--ink); }
.review-steplink.is-current { background: var(--navy-wash); color: var(--navy); font-weight: 600; }
.review-dot { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%;
    border: 2px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: var(--ink-3); box-sizing: border-box; }
.review-steplink.is-current .review-dot { border-color: var(--accent); color: var(--accent); }
.review-steplink.is-done .review-dot { background: #1e6b34; border-color: #1e6b34; color: #fff; }
[data-dash-theme="dark"] .page-dashboard .review-steplink.is-done .review-dot { background: #2f9a55; border-color: #2f9a55; }
.review-next { width: 100%; box-sizing: border-box; justify-content: center; text-align: center; }
.review-side-note { margin: 0 4px !important; font-size: 12.5px !important; line-height: 1.45; }
.review-steps { display: flex; flex-direction: column; gap: 20px; }
.review-step { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 24px 26px;
    scroll-margin-top: 16px; }
.review-signoff { border-color: var(--accent); }
.review-stepnum { margin: 0 0 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-4); }
.review-steptitle { margin: 0 0 6px !important; font-size: 22px !important; }
.review-steptitle:focus { outline: none; }
.review-steptitle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
/* No max-width on dashboard text (Dylan, 2026-10-26): text runs to the edge
   of its section, like everything else in it. CLAUDE.md, Conventions. */
.review-intro { margin: 0 0 20px !important; }
.review-step .step-sub { margin: 26px 0 10px; }
.review-step .step-sub:first-of-type { margin-top: 6px; }
.review-step .rf-datebox { margin-bottom: 18px; }
.review-nav { display: flex; align-items: center; gap: 14px;
    flex-wrap: wrap; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.review-nav [hidden] { display: none !important; }
.review-nav-note { font-size: 13px !important; }
.review-done { display: inline-flex; align-items: center; gap: 12px; margin: 0; }
.review-done-badge { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
    border-radius: 9px; font-weight: 600; font-size: 14px;
    background: #e7f4ec; color: #1e6b34; border: 1px solid #b9dfc6; }
[data-dash-theme="dark"] .page-dashboard .review-done-badge { background: rgba(47,154,85,.16); color: #7fd49c; border-color: rgba(47,154,85,.4); }
/* Sign off's list of sections (2026-11-04, Dylan): one ruled row each, the
   name as a plain link, a pill on the right for where it stands. */
.review-summary, .review-step ol.review-summary, .review-step ul.review-summary { list-style: none;
    margin: 4px 0 20px; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.review-step .review-summary li { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 0; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 14px; }
.review-step .review-summary li:first-child { border-top: 0; }
.review-summary a { color: var(--ink); text-decoration: none; font-weight: 500; }
.review-summary a:hover { color: var(--accent); text-decoration: underline; }
.review-pill { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 10px; white-space: nowrap;
    background: #fff4e0; color: #8a5d10; border: 1px solid #f0d9a8; }
.review-summary li.is-done .review-pill { background: #e7f4ec; color: #1e6b34; border-color: #b9dfc6; }
[data-dash-theme="dark"] .page-dashboard .review-pill { background: var(--amber-bg); color: var(--amber-ink); border-color: var(--amber-line); }
[data-dash-theme="dark"] .page-dashboard .review-summary li.is-done .review-pill { background: var(--green-bg); color: var(--green-ink); border-color: var(--green-line); }

/* Sign off: "What you changed" and the final check by Claude (brief E,
   2026-11-04). "Must fix" in red, "Check" in the amber pill. */
.change-list { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.5; }
.change-list li { margin: 4px 0; }
.final-check-issues { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line);
    border-radius: 10px; overflow: hidden; }
.final-check-issues li { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 10px 14px;
    border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; }
.final-check-issues li:first-child { border-top: 0; }
.final-check-fix { white-space: nowrap; font-weight: 600; margin-left: 4px; }
.final-check-issues li.is-must .review-pill { background: #fdecec; color: #a12020; border-color: #f2c4c4; }
.final-check-status { margin: 0 0 6px; font-weight: 600; }
.final-check-status.is-current { color: #1e6b34; }
.final-check-status.is-stale { color: #a12020; }
.final-check-running { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.final-check-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #e8cba9;
    border-top-color: #d98524; animation: final-check-spin 0.9s linear infinite; }
@keyframes final-check-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .final-check-spinner { animation: none; } }
[data-dash-theme="dark"] .page-dashboard .final-check-issues li.is-must .review-pill { background: var(--red-bg); color: var(--red-ink); border-color: var(--red-line); }
[data-dash-theme="dark"] .page-dashboard .final-check-status.is-current { color: var(--green-ink); }
[data-dash-theme="dark"] .page-dashboard .final-check-status.is-stale { color: var(--red-ink); }

/* Tags in the Property & site table (2026-11-04, Dylan): green when Domain
   agrees, red when it doesn't, grey when it has nothing, blue for a
   valuer's change. */
.tag { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; line-height: 1.3;
    border-radius: 999px; padding: 3px 10px; border: 1px solid transparent; white-space: nowrap; }
.tag-ok { background: #e7f4ec; color: #1e6b34; border-color: #b9dfc6; }
.tag-bad { background: #fdecec; color: #a8323c; border-color: #f2c4c7; }
.tag-none { background: var(--fog); color: var(--ink-3); border-color: var(--line); }
.tag-valuer { background: var(--navy-wash); color: var(--navy); border-color: var(--line-2); }
[data-dash-theme="dark"] .page-dashboard .tag-ok { background: var(--green-bg); color: var(--green-ink); border-color: var(--green-line); }
[data-dash-theme="dark"] .page-dashboard .tag-bad { background: var(--red-bg); color: var(--red-ink); border-color: var(--red-line); }
.prop-table td, .prop-table th { vertical-align: middle; }
.prop-table .prop-value { font-weight: 600; white-space: nowrap; width: 1%; padding-right: 24px; }
.prop-table .prop-tags .tag { margin: 2px 6px 2px 0; }
.prop-was { font-size: 12.5px; font-weight: 400; }
.prop-legal .rf-field { margin: 0; }
.prop-help { display: block; font-size: 12.5px; margin-top: 4px; }

/* Report fields shown for information only (Instructions, planning and
   flooding, 2026-11-04): a plain table, values in normal weight. */
.rf-info td { line-height: 1.5; }
.rf-info-notes { font-size: 12.5px !important; margin: 8px 0 0 !important; }

/* A field without its label (the adopted value, the legal description). */
.rf-field-bare { margin-bottom: 10px; }
.adopted-box .rf-field-adopted_value input { font-size: 22px; font-weight: 700; padding: 10px 14px;
    max-width: 280px; font-variant-numeric: tabular-nums; }
.adopted-box h3 label { font: inherit; margin: 0; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--accent);
    cursor: pointer; text-decoration: underline; }
/* Phone and narrow windows: the list stacks above the steps, and the Next
   button floats at the bottom of the screen while the steps are in view
   (the script sets .is-in-view), just above the feedback button. */
@media (max-width: 900px) {
    /* minmax(0, ...): a wide table in one step mustn't stretch the column
       (and the page) past the screen now that every step is on it. */
    .review { grid-template-columns: minmax(0, 1fr); }
    .review-side { position: static; max-height: none; overflow: visible; }
    .review-steplist { display: flex; flex-wrap: wrap; gap: 4px; }
    .review-steplist li { flex: 1 1 140px; }
    .review.is-in-view .review-next { position: fixed; left: 16px; right: 16px; bottom: 68px; width: auto;
        z-index: 60; box-shadow: 0 6px 20px rgba(10, 12, 26, .25); }
    .review.is-in-view .review-steps { padding-bottom: 120px; }
}

/* ---- Job page round 2 (2026-10-24, Dylan's review of stage 6) ---- */
/* Tables and text in a step use the step's full width. */
.review-step .leads-table { max-width: none; }
.review-step ul, .review-step ol:not(.review-steplist) { padding-left: 22px; margin: 6px 0 0; }
.review-step li { margin: 4px 0; line-height: 1.55; }
.step-sections { margin-top: 26px; }
/* Label/value tables (property, planning, market): the label column
   doesn't wrap, and every row is ruled so the values line up. */
.review-kv { border: 1px solid var(--line); border-collapse: collapse; width: 100%; }
.review-kv tr > th:first-child { width: 1%; white-space: nowrap; padding-right: 28px; }
.review-kv th, .review-kv td { border-bottom: 1px solid var(--line); vertical-align: top; }
.review-kv td { line-height: 1.6; }
.cell-note { display: block; margin-top: 6px; font-size: 12.5px; color: var(--ink-3); }
/* Comparable sales: compact enough for a 1080p screen, scrolls only below. */
.comps-table th, .comps-table td { padding: 11px 12px; }
.comps-table th { white-space: nowrap; }
.comps-table td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.comps-table td:first-child { min-width: 200px; }
/* A customer figure that doesn't match Domain's record (or Domain has none). */
.fact-mismatch, .fact-mismatch b, td.fact-mismatch { color: #a14d00 !important; font-weight: 600; }
[data-dash-theme="dark"] .page-dashboard :is(.fact-mismatch, .fact-mismatch b, td.fact-mismatch) { color: #f2c27a !important; }
/* "Check first" in step 1: what's missing or out of line. */
.check-first { background: #fff6e6; border: 1px solid #f0d9a8; border-radius: 10px; padding: 16px 20px; margin: 0 0 22px; color: var(--ink); }
.check-first h3 { font-size: 15px !important; margin-bottom: 6px; color: #8a5d10; }
[data-dash-theme="dark"] .page-dashboard .check-first { background: rgba(240,168,60,.10); border-color: rgba(240,168,60,.38); }
[data-dash-theme="dark"] .page-dashboard .check-first h3 { color: #f2c27a; }
.review-step .errors { margin-bottom: 18px; }
/* Locality map thumbnail: closer in than the report's wide map. */
a.job-thumb { position: relative; display: block; overflow: hidden; padding: 0; }
a.job-thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(2.4);
    transform-origin: center; display: block; }
a.job-thumb .locality-pin { width: 12px; height: 12px; margin: -6px 0 0 -6px; }
.locality-frame { display: block; }
.job-inline-link { font-size: 13px; margin-left: 4px; }
.job-card-alert { margin: 14px 0 0 !important; font-size: 13.5px; }
.claim-strip { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px 18px; margin: 0 0 18px; }
.claim-strip form { margin: 0; }
.dialog-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 18px; }
.hv-dialog h3 { font-size: 17px; }
.hv-dialog .rf-datebox { margin: 10px 0 0; }
/* Step 7 */
.draft-note { font-size: 13.5px; color: var(--ink-3); border-left: 3px solid var(--line-2);
    padding: 2px 0 2px 12px; margin: 0 0 18px; }
.adopted-box { margin: 0 0 18px !important; }
.adopted-figure { font-size: 30px; font-weight: 700; margin: 0 0 4px; color: var(--navy); }
/* A sale's photos, under it in step 5. */
.rf-comp-photos-label { margin: 14px 0 8px; font-size: 13.5px; font-weight: 600; }
.rf-comp .listing-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
/* Photo gallery pop-up (dashboard_base.html). */
.gallery-dialog { margin: auto; width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
    padding: 0; border: 0; border-radius: 14px; background: #0d1120; color: #fff; overflow: hidden; }
.gallery-dialog::backdrop { background: rgba(5, 8, 20, .82); }
.gallery-top { display: flex; align-items: center; gap: 14px; padding: 12px 16px; font-size: 14px; }
.gallery-caption { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gallery-count { color: rgba(255,255,255,.6) !important; font-size: 13px; }
.gallery-full { color: #c0c7ec; white-space: nowrap; }
.gallery-close { background: none; border: 0; color: #fff; font-size: 18px; cursor: pointer; padding: 4px 8px; }
.gallery-stage { position: relative; display: flex; align-items: center; justify-content: center;
    height: min(76vh, 760px); background: #000; }
.gallery-stage img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.gallery-prev, .gallery-next { position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255,255,255,.14); color: #fff; font-size: 26px; line-height: 1; }
.gallery-prev { left: 12px; } .gallery-next { right: 12px; }
.gallery-prev:hover, .gallery-next:hover { background: rgba(255,255,255,.26); }
.gallery-prev[hidden], .gallery-next[hidden], .gallery-pin[hidden] { display: none; }
/* A button waiting on something (Save and next before the adopted-value
   tick; Sign off before the high-value tick) looks it. */
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-primary:disabled:hover { background: var(--accent); }

/* ---- Valuer welcome flow and dashboard tour (2026-10-25) ---- */
/* Centred in the dashboard's content area (Dylan 2026-10-25: it sat too far left). */
.welcome { max-width: 760px; margin-left: auto; margin-right: auto; }
.welcome .dash-title { margin-bottom: 10px; }
.welcome-lead { font-size: 16px; line-height: 1.6; color: var(--ink-2); margin: 0 0 22px; }
.welcome-path { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 12px; }
.welcome-path li { display: flex; gap: 16px; align-items: flex-start; background: var(--paper);
    border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.welcome-path p { margin: 4px 0 0; color: var(--ink-3); font-size: 14px; line-height: 1.55; }
.welcome-path-n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; }
[data-dash-theme="dark"] .page-dashboard .welcome-path-n { color: #0d1120; }
.welcome-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; margin-top: 24px; }
.welcome-actions form { margin: 0; }
.welcome-spacer { flex: 1; }
.welcome-later { font-size: 14px; color: var(--ink-3); }
button.welcome-later { background: none; border: 0; cursor: pointer; padding: 0; font: inherit; font-size: 14px; }
.welcome-later:hover { color: var(--ink); }
.welcome-steps { list-style: none; padding: 0; margin: 4px 0 22px; display: flex; gap: 8px 22px; flex-wrap: wrap;
    font-size: 13.5px; color: var(--ink-3); }
.welcome-steps li { display: flex; align-items: center; gap: 8px; }
.welcome-steps-dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
    border: 1.5px solid var(--line-2); font-size: 12px; font-weight: 700; }
.welcome-steps li.is-current { color: var(--ink); font-weight: 600; }
.welcome-steps li.is-current .welcome-steps-dot { border-color: var(--accent); color: var(--accent); }
.welcome-steps li.is-done .welcome-steps-dot { background: #1f7a4d; border-color: #1f7a4d; color: #fff; }
.welcome-form .welcome-actions { border-top: 1px solid var(--line); padding-top: 18px; }
.welcome-tour-card, .setup-card { display: flex; gap: 18px; align-items: center; justify-content: space-between;
    flex-wrap: wrap; background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
    padding: 20px 22px; margin-top: 22px; }
.welcome-tour-card h2, .setup-card h2 { font-size: 17px; margin: 0 0 4px; }
.welcome-tour-card p, .setup-card p { margin: 0; font-size: 14px; }
.setup-card { margin: 0 0 22px; border-color: #cfd4f0; background: #f4f5fc; }
[data-dash-theme="dark"] .page-dashboard .setup-card { background: rgba(122,137,214,.10); border-color: rgba(122,137,214,.35); }
.setup-card-text { flex: 1 1 320px; min-width: 0; }
.setup-card-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.setup-card-actions form { margin: 0; }
.setup-dismiss { font-size: 13.5px; color: var(--ink-3); }
/* The tour: the page dimmed around one item, a card beside it. */
.tour { position: fixed; inset: 0; z-index: 5000; }
.tour[hidden] { display: none; }
.tour-shade { position: absolute; inset: 0; background: rgba(8, 12, 30, .62); }
.tour-shade[hidden], .tour-spot[hidden] { display: none; }
.tour-spot { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(8, 12, 30, .62);
    outline: 2px solid #9aa5e0; pointer-events: none; transition: all .18s ease; }
.tour-card { position: fixed; width: min(340px, calc(100vw - 24px)); background: var(--paper); color: var(--ink);
    border-radius: 14px; padding: 18px 20px 16px; box-shadow: 0 18px 50px rgba(8, 12, 30, .35); outline: none; }
.tour-count { margin: 0 0 4px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); font-weight: 600; }
.tour-card h3 { margin: 0 0 6px; font-size: 17px; }
.tour-text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.tour-hint { margin: 8px 0 0; font-size: 13px; color: var(--ink-3); }
.tour-hint[hidden] { display: none; }
.tour-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.tour-actions [hidden] { display: none; }
.tour-spacer { flex: 1; }
.tour-skip { font-size: 13px; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .tour-spot { transition: none; } }
.welcome-form > p.muted:first-child { margin: 0 0 20px; font-size: 14px; line-height: 1.55; }
.welcome-form .hint { font-size: 13px; color: var(--ink-3); line-height: 1.5; }

/* Step 7: who signs, laid out like the report's signature block, read-only
   (2026-10-25). */
.signatory-box { margin: 18px 0 0; padding: 16px 20px; border: 1px solid var(--line);
    border-radius: 10px; background: var(--paper); max-width: 440px; }
.signatory-label { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink-3); }
.signatory-line { margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
    color: var(--ink-3); font-size: 13px; font-style: italic; }
.signatory-who { margin: 0 0 8px; font-weight: 600; line-height: 1.55; }
.signatory-who .gap, .comp-missing { color: #b0430b; font-weight: 500; }
.signatory-firm { margin: 0; font-size: 14px; line-height: 1.5; }
.signatory-note { margin: 10px 0 0; font-size: 12.5px; }

/* Valuer signatures (2026-11-01, signatures.py). The handwriting fonts a
   typed signature can use, named "Sig <name>" (signatures.css_family);
   the PDF embeds the same files. SIL OFL, licences in static/fonts/. */
@font-face { font-family: 'Sig Great Vibes'; src: url('fonts/GreatVibes-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Sig Allura'; src: url('fonts/Allura-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Sig Sacramento'; src: url('fonts/Sacramento-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Sig Mrs Saint Delafield'; src: url('fonts/MrsSaintDelafield-Regular.ttf') format('truetype'); font-display: swap; }
.sig-preview { display: inline-flex; align-items: center; min-height: 84px; padding: 10px 24px;
    margin: 0 0 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.sig-preview img { display: block; max-height: 80px; max-width: 100%; }
.sig-typed { font-size: 40px; line-height: 1.2; color: var(--navy); }
[data-dash-theme="dark"] .page-dashboard .sig-typed { color: #10173d; }
.sig-meta { margin: 0 0 12px; font-size: 13px; }
.sig-modes { border: 0; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.sig-modes-lead { flex-basis: 100%; margin: 0; font-weight: 600; font-size: 14px; }
.sig-fonts-label { margin: 12px 0 6px; font-weight: 600; font-size: 14px; }
.sig-fonts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.sig-font { display: flex; align-items: center; gap: 10px; padding: 8px 14px; cursor: pointer;
    border: 1px solid var(--line-2); border-radius: 10px; background: #fff; min-height: 64px; }
.sig-font:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.sig-font-sample { font-size: 30px; line-height: 1.2; color: #10173d; overflow: hidden;
    white-space: nowrap; text-overflow: ellipsis; }
.sig-admin > summary { list-style: none; display: inline-block; }
.sig-admin > summary::-webkit-details-marker { display: none; }
.sig-admin[open] { flex-basis: 100%; }

/* Step 5: one table for the sales and what the valuer writes about each
   (2026-10-25). */
.comps-evidence tbody.comp-group + tbody.comp-group tr.comp-facts td { border-top: 2px solid var(--line); }
.comps-evidence tr.comp-detail td { border-top: 0; padding-top: 10px; padding-bottom: 18px; }
.comps-evidence .comp-fields { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(200px, 1fr);
    gap: 4px 18px; align-items: start; }
.comps-evidence .comp-fields .rf-field { margin: 0; }
.comps-evidence .comp-fields textarea, .comps-evidence .comp-fields select { width: 100%; }
@media (max-width: 760px) { .comps-evidence .comp-fields { grid-template-columns: 1fr; } }
.comp-num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
    background: var(--navy, #1b2559); color: #fff; font-size: 12px; font-weight: 600; }
.comp-domain-link { display: block; font-size: 12.5px; margin-top: 3px; font-weight: 400; }
.comp-photos { margin-top: 10px; }
/* Removing and correcting a sale (brief D, 2026-11-04). */
.comps-evidence .comp-group { scroll-margin-top: 20px; }
.comp-removed .comp-facts td { color: var(--ink-3); }
.comp-removed .comp-facts td strong, .comp-removed .comp-facts td.num { text-decoration: line-through; }
.comp-num-off { background: var(--fog); color: var(--ink-3); }
.comp-removed-note { margin: 0 0 8px; font-size: 13.5px; color: var(--ink-3); }
.comp-notice { margin: 0 0 12px; }
/* Under a corrected figure: the "Valuer" tag, then Domain's figure, both
   left-aligned with the figure and in the same small type. */
.comp-was { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; margin-top: 5px; }
.comp-valuer { font-size: 11px; padding: 1px 8px; }
.comp-was-domain { font-size: 11.5px; color: var(--ink-3); }
.comp-remove { margin-top: 10px; }
.comp-actions { margin-top: 12px; }
.comp-edit summary { cursor: pointer; font-size: 13.5px; font-weight: 600; }
/* The six figures in one even row of boxes (two or three on a narrow screen). */
.comp-edit-form { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 14px;
    margin-top: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px;
    background: var(--fog); }
.comps-evidence .comp-edit-form .rf-field { margin: 0; }
.comp-edit-box label { font-size: 13px; margin-bottom: 5px; }
.comp-edit-box input { padding: 7px 10px; font-size: 14px; }
.comp-edit-box input[type="date"] { padding-right: 4px; min-width: 0; }
.comp-edit-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.comp-edit-foot .rf-help { margin: 0; }
/* Adding sales (brief D stage 3). */
.comp-added { display: block; margin-top: 5px; font-size: 12.5px; color: var(--ink-3); font-weight: 400; }
.comp-added .tag { font-size: 11px; padding: 1px 8px; margin-right: 4px; }
.sales-add { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); scroll-margin-top: 20px; }
.sales-add-title { margin: 0 0 4px; }
.sales-add-intro { margin: 0 0 12px; }
.sales-add-part { margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; }
.sales-add-part > summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.sales-add-part > summary .muted { font-weight: 400; font-size: 13px; }
.sales-find-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 12px 14px;
    align-items: end; margin-top: 12px; }
.sales-add-part .rf-field { margin: 0; }
.sales-add-part .rf-field label { font-size: 13px; margin-bottom: 5px; }
.sales-find-go { padding-bottom: 2px; }
.sales-find-note { grid-column: 1 / -1; margin: 0; }
.sales-found { margin-top: 14px; }
.sales-found-table td:first-child, .sales-found-table th:first-child { min-width: 0; width: 1%; }
.sales-add-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; }
.sales-add-foot .rf-help { margin: 0; }
.sales-ai { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13.5px; }
.sales-one { margin-top: 12px; }
.sale-addr { max-width: 640px; }
.sales-typed { margin-top: 14px; }
.sales-typed > summary { cursor: pointer; font-size: 13.5px; font-weight: 600; }
.sales-source { grid-column: span 3; }
.sales-source input[type="text"] { margin-top: 6px; }
.sales-typed .sales-ai { grid-column: 1 / -1; margin-top: 0; }
.sales-history { border: 0; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; }
.sales-history legend { font-weight: 600; font-size: 13.5px; margin-bottom: 6px; }
.sales-history label { display: flex; gap: 8px; align-items: center; font-size: 14px; }
@media (max-width: 900px) { .sales-find-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sales-source { grid-column: 1 / -1; } }
@media (max-width: 1100px) { .comp-edit-form { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .comp-edit-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.comp-photos summary { cursor: pointer; font-size: 13.5px; font-weight: 600; }
.comp-photos summary .muted { font-weight: 400; font-size: 12.5px; }
.comp-photos .listing-grid { margin-top: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.comps-map { margin: 18px 0 6px; max-width: 760px; }
.comps-map figcaption { font-size: 12.5px; line-height: 1.5; margin-top: 8px; }

/* Step 1 "Check first": each line with its importance, most important
   first (checkfirst.py, 2026-10-25). */
.check-first-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.check-first-list li { display: flex; gap: 10px; align-items: baseline; font-size: 14px; line-height: 1.5; }
.cf-badge { flex: none; display: inline-block; min-width: 86px; text-align: center; font-size: 11.5px;
    font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid transparent; }
.cf-must .cf-badge { background: #b42318; color: #fff; }
.cf-must > span:last-child { font-weight: 600; }
.cf-check .cf-badge { background: #fff; color: #8a5d10; border-color: #e4bf7a; }
.cf-note .cf-badge { background: transparent; color: var(--ink-3); border-color: var(--line); }
.cf-process { margin-top: 12px; font-size: 13px; color: var(--ink-3); }
.cf-process summary { cursor: pointer; }
.cf-process ul { margin: 6px 0 0; padding-left: 18px; }
[data-dash-theme="dark"] .page-dashboard .cf-check .cf-badge { background: transparent; color: #f2c27a; border-color: rgba(240,168,60,.5); }

/* Step 7: why the adopted value was changed (2026-10-25). */
.regenerate-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 16px; padding: 12px 16px;
    border: 1px dashed var(--line-2); border-radius: 10px; }
.regenerate-box form { margin: 0; }
.regenerate-box p { flex: 1 1 320px; font-size: 13px; }
.value-change { margin: 16px 0 0; padding: 16px 20px; border: 1px solid #f0d9a8; border-radius: 10px;
    background: #fff9ee; }
.value-change[hidden] { display: none; }
.value-change-inline { margin: 4px 0 18px; }   /* moved under section 5's field (2026-11-04) */
.value-change-title { font-size: 15px; font-weight: 700; margin: 0 0 6px; }
.value-change textarea { width: 100%; }
.value-change-new { margin: 0 0 10px; font-size: 13.5px; }
.value-change-new summary { cursor: pointer; }
[data-dash-theme="dark"] .page-dashboard .value-change { background: rgba(240,168,60,.08); border-color: rgba(240,168,60,.35); }
.comps-evidence th:first-child, .comps-evidence td:first-child { min-width: 0; width: 1%; padding-right: 4px; white-space: nowrap; }
.comps-evidence tr.comp-facts td:nth-child(2) { min-width: 210px; }
.comps-evidence .comp-fields .comp-field-comparison select { min-width: 180px; }

/* Find a job (jobsearch.py, 2026-10-25): a box at the top of the sidebar;
   the magnifier link instead when the rail is collapsed to icons. */
.dash-sidebar-search { display: block; margin: 0 12px 12px; max-width: none; opacity: 1; }
.dash-sidebar-search input { width: 100%; box-sizing: border-box; padding: 9px 12px; font: inherit;
    font-size: 13.5px; color: #fff; background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16); border-radius: 8px; }
.dash-sidebar-search input::placeholder { color: rgba(255,255,255,.55); }
.dash-sidebar-search input:focus { outline: none; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.12); }
.dash-sidebar-search-icon { display: none !important; }
.dash-sidebar.is-collapsed .dash-sidebar-search { display: none; }
.dash-sidebar.is-collapsed .dash-sidebar-search-icon { display: flex !important; }
.search-page-form { display: flex; gap: 10px; max-width: 640px; margin: 0 0 22px; }
.search-page-form input { flex: 1; }

/* Reporting (reports.py, 2026-10-25). */
.report-period { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 14px; }
.report-period select { padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); font: inherit; }
.report-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 20px; }
.report-tile { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px;
    display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--ink-3); }
.report-tile-n { font-size: 26px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.report-table th { white-space: nowrap; }
.report-table td.num, .report-table th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.report-notes { margin-top: 20px; font-size: 13.5px; }
.report-notes summary { cursor: pointer; font-weight: 600; }
.report-notes dl { display: grid; grid-template-columns: 160px 1fr; gap: 6px 16px; margin: 12px 0; }
.report-notes dt { font-weight: 600; }
.report-notes dd { margin: 0; color: var(--ink-2); }
.status-pill.status-waiting { background: #fff1d6; color: #8a5d10; margin-left: 4px; }

/* Messages with the customer (jobmessages.py, 2026-10-25). */
.job-messages { margin: 28px 0 0; padding: 22px 24px; background: var(--paper); border: 1px solid var(--line);
    border-radius: 12px; }
.job-messages-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.job-messages-head h2 { font-size: 18px; margin-bottom: 6px; }
.job-messages-flag { display: flex; align-items: center; gap: 8px; margin: 0; }
.message-list { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 10px; }
.message { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); max-width: 760px; }
.message-out { background: var(--navy-wash, #eef1fb); margin-left: auto; }
.message-in { background: #fff; }
.message-meta { margin: 0 0 6px; font-size: 13px; }
.message-body { white-space: pre-wrap; font-size: 14.5px; line-height: 1.55; }
.message-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.message-thumb img { width: 110px; height: 82px; object-fit: cover; border-radius: 6px; display: block;
    border: 1px solid var(--line); }
.message-file { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line);
    border-radius: 6px; font-size: 13px; background: var(--paper); }
.message-form textarea { width: 100%; }
.message-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap; margin-top: 8px; font-size: 13.5px; }
[data-dash-theme="dark"] .page-dashboard .message-in { background: transparent; }
.report-table td:first-child { white-space: nowrap; }

/* The customer's reply page (message_link.html, 2026-10-25). */
.reply-page { max-width: 680px; }
.reply-thread { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 10px; }
.reply-msg { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); }
.reply-from-us { background: #f4f6fb; }
.reply-from-you { background: #fff; margin-left: 40px; }
.reply-meta { margin: 0 0 6px; font-size: 13px; }
.reply-body { white-space: pre-wrap; line-height: 1.55; }
.reply-files { margin: 6px 0 0; font-size: 13px; }
.reply-heading { font-size: 20px; margin: 26px 0 10px; }
.reply-form textarea { width: 100%; }

.message-test-link { margin-top: 14px; font-size: 13px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }

/* Notes for information on the sales (step 5) and planning (step 4): things
   to know, nothing to check (checkfirst.py FYI, 2026-10-26). */
.fyi-list { list-style: none; margin: 10px 0 16px; padding: 10px 14px; border-radius: 8px;
    background: var(--navy-wash, #eef1fb); font-size: 13px; color: var(--ink-2); display: grid; gap: 4px; }
.fyi-list li { padding-left: 20px; position: relative; line-height: 1.5; }
.fyi-list li::before { content: "i"; position: absolute; left: 0; top: 2px; width: 14px; height: 14px;
    border-radius: 50%; border: 1px solid currentColor; font-size: 10px; font-weight: 700; font-style: italic;
    display: grid; place-items: center; opacity: .65; }
.fyi-note { font-size: 13px; margin: 8px 0 0; }
[data-dash-theme="dark"] .page-dashboard .fyi-list { background: rgba(255,255,255,.05); }

/* Links under the locality map (2026-10-26), and the "Address copied" note,
   which reads like the text around it rather than a different style. */
.map-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 10px 0 18px; font-size: 14px; }
.map-links-note { font-size: 13px; }
.copy-note { font-size: inherit; color: inherit; }
.copy-note:not(:empty)::before { content: "✓ "; color: #1f7a4d; }
.map-links .copy-note { flex-basis: 100%; font-size: 13px; color: var(--ink-3); }

/* After sign-off (2026-10-26): one "Processing" notice until the photos are
   copied and the report sent, and room between the notices and the buttons. */
.processing-box { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 16px; padding: 12px 16px;
    border-radius: 10px; background: var(--navy-wash, #eef1fb); border: 1px solid #d5dcf3; font-size: 14px; line-height: 1.5; }
.processing-spinner { flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%;
    border: 2px solid rgba(78,97,200,.25); border-top-color: var(--accent, #4e61c8); animation: processing-spin .8s linear infinite; }
@keyframes processing-spin { to { transform: rotate(360deg); } }
.report-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.report-panel > p.muted + .report-actions { margin-top: 18px; }
[data-dash-theme="dark"] .page-dashboard .processing-box { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.signoff-actions { display: flex; justify-content: flex-end; }

/* =========================================================================
   WEBSITE REDESIGN (2026-10-26)
   Pieces the mock-up's pages need that the site didn't have, built from
   the existing tokens so they look like the rest of it: two text columns,
   tick lists, the formula example and comparison table (CGT), the 1 July
   2027 timeline, numbered steps, and the small notes under buttons.
   ========================================================================= */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 72px; align-items: start; }
.col-title { font-family: var(--sans); font-weight: 700; letter-spacing: -.025em;
    font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; margin-bottom: 18px; }
.col-text, .prose-stack p, .prose-note-wide { color: var(--ink-2); font-size: 16.5px; line-height: 1.7; }
.col-text + .col-text, .prose-stack p + p { margin-top: 16px; }
.col-note { margin-top: 20px; color: var(--ink-3); font-size: 15px; }
.col-text a, .col-note a, .prose-note-wide a, .tick-list a, .panel-small a,
.sec-head-note a { color: var(--accent); font-weight: 500; }

.tick-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.tick-list li { position: relative; padding-left: 32px; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }
.tick-list li::before {
    content: ''; position: absolute; left: 0; top: 3px; width: 20px; height: 20px;
    border-radius: 50%; background: var(--navy-wash) center / 12px no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234e61c8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
}
.tick-list strong { color: var(--ink); font-weight: 600; }
.panel .tick-list { margin-top: 4px; }
.panel-sub { font-size: 15px; font-weight: 600; margin: 24px 0 12px; }
.panel p + p { margin-top: 14px; }
.panel-gap { margin-top: 22px; }
.panel-small { margin-top: 16px !important; font-size: 13.5px !important; color: var(--ink-3) !important; }

/* ---- formula vs valuation (CGT #formula) ---- */
.formula-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; margin-top: 48px; align-items: start; }
.split-example { margin: 0; }
.split-example figcaption { font-size: 15px; color: var(--ink-2); line-height: 1.6; margin-bottom: 20px; }
.split-row + .split-row { margin-top: 18px; }
.split-label { font-size: 14.5px !important; color: var(--ink-2) !important; margin-bottom: 8px; }
.split-bar { display: flex; border-radius: 8px; overflow: hidden; font-size: 12.5px; font-weight: 600; }
.split-bar span { padding: 10px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.split-old { background: var(--navy); color: #fff; }
.split-new { background: var(--navy-wash); color: var(--navy); }
.split-note { margin-top: 18px; font-size: 14px !important; }

.compare-table { width: 100%; border-collapse: collapse; background: var(--paper);
    border: 1px solid var(--line); border-radius: 16px; overflow: hidden; font-size: 14.5px; }
.compare-table th, .compare-table td { padding: 14px 18px; text-align: left; vertical-align: top;
    border-bottom: 1px solid var(--line); line-height: 1.5; }
.compare-table tr:last-child th, .compare-table tr:last-child td { border-bottom: 0; }
.compare-table thead th { font-family: var(--mono); font-size: 12px; text-transform: uppercase;
    letter-spacing: .08em; color: var(--ink-3); font-weight: 500; background: var(--fog); }
.compare-table tbody th { font-weight: 600; color: var(--ink); width: 30%; }
.compare-table td { color: var(--ink-2); }
.compare-table td:last-child { color: var(--ink); font-weight: 500; }

/* A reserve call-out inside a section (CGT, accountants, pricing). */
.reserve-inline { display: flex; align-items: center; justify-content: space-between; gap: 20px 40px;
    margin-top: 48px; padding: 30px 34px; border-radius: 16px; background: var(--navy-wash);
    border: 1px solid #dcdcec; }
.reserve-inline h3 { font-size: 21px; font-weight: 600; margin-bottom: 6px; }
.reserve-inline p { color: var(--ink-3); font-size: 15px; line-height: 1.6; }
.reserve-inline .btn { flex: 0 0 auto; }

/* ---- 1 July 2027 timeline (CGT #changes) ---- */
.timeline { margin: 0 0 32px; }
.timeline-bands { display: grid; grid-template-columns: 1fr 1fr; border-radius: 14px; overflow: hidden; }
.timeline-bands > div { padding: 22px 24px; }
.timeline-bands strong { display: block; font-size: 16px; }
.timeline-bands span { display: block; font-size: 14px; margin-top: 4px; }
.timeline-old { background: var(--navy); color: #fff; }
.timeline-old span { color: rgba(255,255,255,.75); }
.timeline-new { background: var(--navy-wash); color: var(--navy); }
.timeline-new span { color: var(--ink-3); }
.timeline-marks { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; margin-top: 12px;
    font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--ink-3); }
.timeline-marks span:last-child { text-align: right; }
.timeline-line { color: var(--accent); text-align: center; }

/* ---- numbered steps ---- */
.steps-title { font-size: 21px; font-weight: 600; margin: 56px 0 20px; }
.num-steps { list-style: none; counter-reset: step; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.num-steps li { counter-increment: step; position: relative; padding: 58px 22px 24px;
    background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
    font-size: 15px; color: var(--ink-2); line-height: 1.55; }
.num-steps li::before { content: counter(step); position: absolute; top: 20px; left: 22px;
    width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff;
    font-family: var(--mono); font-size: 13px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center; }
.sec-fog .num-steps li, .sec-fog .pillar { background: var(--paper); }

/* CGT "How your valuer arrives at the figure": text left, sample report
   right (2026-10-27). */
.valuer-panel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 40px 64px; align-items: center; }
.valuer-panel-sample .sample-preview { margin: 0 auto; }
.valuer-panel-sample .sample-preview-link { text-align: center; }
.fcta-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; align-items: center; }

@media (max-width: 900px) {
    .two-col, .formula-grid, .valuer-panel { grid-template-columns: 1fr; }
    .num-steps { grid-template-columns: 1fr 1fr; }
    .reserve-inline { flex-direction: column; align-items: flex-start; }
    .timeline-marks { grid-template-columns: 1fr 1fr; }
    .timeline-line { grid-column: 1 / -1; grid-row: 2; text-align: left; }
}
@media (max-width: 640px) {
    .num-steps { grid-template-columns: 1fr; }
    .timeline-bands { grid-template-columns: 1fr; }
    .compare-table th, .compare-table td { padding: 12px; }
    /* The narrow bar's label wraps rather than being cut off. */
    .split-bar { font-size: 11.5px; }
    .split-bar span { white-space: normal; text-overflow: clip; padding: 8px; line-height: 1.3; }
}
.reserve-form-note { margin: 0 0 32px; }

/* ---- four-up cards, two-column ticks, "which do I need" rows, FAQ page ---- */
.pillar-grid-4 { grid-template-columns: repeat(4, 1fr); }
.tick-list-2 { grid-template-columns: 1fr 1fr; gap: 14px 48px; }
.match-list { display: grid; gap: 14px; }
.match-row { background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
    padding: 22px 26px; }
.match-row h3 { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.match-row p { color: var(--ink-3); font-size: 15px; line-height: 1.6; }
.match-row a { color: var(--accent); font-weight: 600; white-space: nowrap; }
.price-panels { grid-template-columns: 1fr 1fr; align-items: stretch; }
.faq-jumps { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.faq-jumps a { padding: 8px 16px; border: 1px solid var(--line-2); border-radius: 999px;
    color: var(--accent); font-size: 14px; font-weight: 500; text-decoration: none; }
.faq-jumps a:hover { border-color: var(--accent); }
.faq-group { padding-top: 40px; scroll-margin-top: 110px; }
.faq-group-title { font-size: 22px; font-weight: 700; letter-spacing: -.015em; margin-bottom: 16px; }
.faq details a { color: var(--accent); font-weight: 500; }
#formula, #changes, #reserve, #sample { scroll-margin-top: 40px; }
@media (max-width: 1100px) {
    .pillar-grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
    .price-panels { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .pillar-grid-4, .tick-list-2 { grid-template-columns: 1fr; }
}

/* ---- For valuers: titled steps, the application form's groups ---- */
.num-steps-titled li strong { display: block; color: var(--ink); font-size: 16px; margin-bottom: 6px; }
.apply-fieldset { border: 0; padding: 0; margin-left: 0; margin-right: 0; }
.apply-fieldset legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: 14.5px; color: var(--ink); }
.apply-fieldset .checkbox-item { font-weight: 400; }
.apply-fieldset .apply-radio { display: inline-flex; margin-right: 20px; }
.field input.input-short { max-width: 140px; }

/* "Review the report and sign off" (2026-11-06, review_sign_off.html): the
   report as it will be issued, in a frame, with Sign off under it. */
.report-frame-wrap { border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; background: #f3f3f0; }
.report-frame { display: block; width: 100%; height: 78vh; min-height: 520px; border: 0; background: #fff; }
/* Review and sign off (round 2, 2026-11-06): the bar with the buttons on
   top, the report scrolling in a frame that fills the rest of the window,
   so the buttons never need a scroll to reach. */
.signoff-review { display: flex; flex-direction: column; gap: 10px; }
.signoff-review-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: 12px 24px; }
.signoff-review-head { flex: 1 1 380px; min-width: 0; }
.signoff-review-head .dash-title { margin: 0 0 4px; }
.signoff-review-head p.muted { margin: 0; }
.signoff-review-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.signoff-review-actions .signoff-actions { margin: 0; }
.signoff-review-notes { margin: 0; padding: 8px 12px; border-radius: 8px; background: #FFF6DA;
    color: #6B4A00; font-size: 14px; }
.signoff-review .report-frame { height: calc(100vh - 320px); min-height: 360px; }

/* Where each report photo goes, and the chooser pop-up (2026-11-06). */
.photo-place { display: inline-block; margin: 2px 0 4px; padding: 2px 9px; border-radius: 999px;
    font-size: 12px; font-weight: 600; background: var(--line); color: var(--ink-2); }
.photo-place.is-cover { background: var(--navy); color: #fff; }
.photo-place.is-photos { background: #e3e7fb; color: #2a3680; }
.photo-place.is-appendix { background: #eef0ef; color: var(--ink-2); }
.photo-place.is-out { background: transparent; border: 1px dashed var(--line-2); color: var(--ink-3); }
.photo-chooser { width: min(920px, calc(100vw - 32px)); max-width: none; }
.chooser-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px;
    max-height: 60vh; overflow-y: auto; padding: 2px; }
.chooser-tile { position: relative; display: flex; flex-direction: column; gap: 6px; cursor: pointer;
    border: 2px solid transparent; border-radius: 10px; padding: 6px; font-size: 12px; color: var(--ink-2); }
.chooser-tile img { width: 100%; height: 110px; object-fit: cover; border-radius: 6px; display: block; }
.chooser-tile input { position: absolute; top: 12px; left: 12px; width: 18px; height: 18px; }
.chooser-tile.is-chosen { border-color: var(--accent, #4E61C8); background: rgba(78, 97, 200, .06); }

/* The page's messages, shown in a corner when the job page has kept its
   place below them (2026-11-06, "keep my place"). */
.flash-toast { position: fixed; top: 18px; right: 22px; z-index: 90; width: min(420px, calc(100vw - 44px));
    padding: 4px 34px 4px 4px; background: #fff; border: 1px solid var(--line-2); border-radius: 12px;
    box-shadow: 0 16px 44px rgba(16,23,61,.2); transition: opacity .5s ease; }
.flash-toast > div { margin: 0 !important; }
.flash-toast.is-fading { opacity: 0; }
.flash-toast-close { position: absolute; top: 6px; right: 8px; border: 0; background: none; font-size: 20px;
    line-height: 1; cursor: pointer; color: var(--ink-3); }

/* ---- Job page header and top cards (2026-11-06, Dylan's second list) ---- */
/* The status tags on the title's middle line, not its baseline. */
.job-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.job-title .status-pill { position: relative; top: 1px; }
button.status-pill { cursor: pointer; font-family: inherit; }
.job-cards { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.job-prop > div:nth-child(2), .job-prop > div:first-child:not(.ext-links) { flex: 1 1 auto; }
/* Links out to other sites, in each site's colours, stacked on the right. */
.ext-links { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; min-width: 150px; margin-left: auto; }
.ext-link { display: flex; align-items: center; gap: 9px; padding: 7px 12px 7px 7px; border-radius: 9px;
    font-size: 13.5px; font-weight: 600; text-decoration: none; border: 1px solid; white-space: nowrap;
    transition: transform .12s ease, box-shadow .12s ease; }
.ext-link:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(16,23,61,.12); text-decoration: none; }
.ext-mark { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
    border-radius: 6px; font-size: 11px; font-weight: 800; color: #fff; flex: 0 0 auto; }
.ext-mark svg { width: 15px; height: 15px; }
.ext-domain { color: #0b7a00; border-color: #bfe6b8; background: #f1fbef; }
.ext-domain .ext-mark { background: #0ea800; font-size: 14px; }
.ext-streetview { color: #1a5fd0; border-color: #c9dafb; background: #f2f6fe; }
.ext-streetview .ext-mark { background: #fbbc04; color: #3c3c3c; }
.ext-six { color: #002664; border-color: #c4cde0; background: #f2f4f9; }
.ext-six .ext-mark { background: #002664; font-size: 8.5px; letter-spacing: .02em; }
.ext-links .copy-note { font-size: 12px; }
[data-dash-theme="dark"] .page-dashboard .ext-domain { background: rgba(14,168,0,.12); border-color: rgba(14,168,0,.4); color: #7fdc72; }
[data-dash-theme="dark"] .page-dashboard .ext-streetview { background: rgba(66,133,244,.12); border-color: rgba(66,133,244,.4); color: #9cc0ff; }
[data-dash-theme="dark"] .page-dashboard .ext-six { background: rgba(120,150,220,.12); border-color: rgba(120,150,220,.4); color: #b9c8ee; }
@media (max-width: 1180px) {
    .job-prop { flex-wrap: wrap; }
    .ext-links { flex-direction: row; flex-wrap: wrap; margin-left: 0; width: 100%; }
}
/* Contact the customer: the messages pop-up, with a count and a dot for a reply. */
.contact-btn { margin-top: 14px; position: relative; display: inline-flex; align-items: center; gap: 8px; }
.msg-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
    padding: 0 6px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 11.5px; font-weight: 700; }
.msg-dot { position: absolute; top: -4px; right: -4px; width: 11px; height: 11px; border-radius: 50%;
    background: #d93025; border: 2px solid #fff; }
.messages-dialog { width: min(760px, calc(100vw - 32px)); max-width: none; padding: 0; }
.messages-dialog .job-messages { margin: 0; border: 0; }
.dialog-x { border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--ink-3); padding: 2px 6px; }
/* Correct the property details: one source a line (2026-11-06). */
.fix-sources { margin: 4px 0 0; display: flex; flex-direction: column; gap: 1px; }
.cf-go { white-space: nowrap; font-weight: 600; font-size: 13px; margin-left: 4px; }
/* Market overview in Sales evidence (2026-11-06): heading, the paragraph, a note. */
.market-overview { margin: 6px 0 22px; }
.market-overview .step-sub { margin: 0 0 8px; }
.market-overview .rf-help { margin: 6px 0 0; }
.cf-go, .final-check-fix { color: var(--accent, #4E61C8); text-decoration: none; }
.cf-go:hover, .final-check-fix:hover { text-decoration: underline; }
.draft-proposal { margin: 6px 0 4px; font-size: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Your changes and the final check, one panel (2026-11-06). */
.final-check .fc-sub {
    font-size: 15px;
    margin: 18px 0 6px;
}
.final-check h3 + .fc-sub { margin-top: 4px; }
.final-check .change-list { margin: 0 0 4px; }

/* My profile (2026-11-06): cards in the order of the checklist, Security
   on its own at the bottom. */
.profile-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.profile-nav a { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-2);
    font-size: 13.5px; color: var(--ink-2); text-decoration: none; background: var(--paper); }
.profile-nav a:hover { border-color: var(--accent); color: var(--accent); }
.profile-card { border: 1px solid var(--line-2); border-radius: 12px; padding: 22px 24px;
    margin: 0 0 18px; background: var(--paper); scroll-margin-top: 16px; }
.profile-card-title { font-size: 19px !important; margin: 0 0 8px !important; }
.profile-card > .muted:first-of-type { margin-top: 0; }
.profile-ready.is-todo { border-color: #E8C65A; background: #FFFBEE; }
.profile-ready.is-ready { border-color: #9FD3A8; background: #F3FBF4; }
.profile-save { margin-top: 20px; }
.profile-sub { font-size: 15.5px !important; margin: 24px 0 6px !important; }
.profile-security { border-style: dashed; }
.profile-fold { margin: 12px 0 0; }
.profile-fold > summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.profile-fold[open] > summary { margin-bottom: 12px; }
html[data-dash-theme="dark"] .profile-ready.is-todo { background: rgba(232, 198, 90, .08); }
html[data-dash-theme="dark"] .profile-ready.is-ready { background: rgba(159, 211, 168, .08); }
.profile-card p.hint { color: var(--ink-4); font-size: 13px; }
.final-check [data-final-check-form][hidden] { display: none; }
/* The job's menus, inside the review column (2026-11-06). */
.review-trailing:empty { display: none; }
.review-trailing > .rerun-menu:first-child, .review-trailing > .review-flagbar:first-child { margin-top: 0; }
/* The sticky section list has to fit between the top of the window and
   the end of the review, or it slides up at the bottom of the page
   (2026-11-06): no margin under the review, and on short windows the
   note under "Next to review" is left out. */
.review { margin-bottom: 0; }
@media (max-height: 760px) { .review-side-note { display: none; } }

/* ---- "How did we do?" (customer_survey.html, surveys.py, 2026-11-09) ---- */
/* Wider than the sign-in pages' .auth-wrap (Dylan, 2026-11-09), so the
   text boxes have room. */
.survey-wrap { max-width: 680px; margin: 0 auto; }
.survey-wrap h1 { font-size: 1.7rem; line-height: 1.25; }
.survey-faces { display: flex; flex-wrap: wrap; gap: 16px; margin: 24px 0; }
.survey-face { display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px;
    border: 1px solid var(--line-2); border-radius: 12px; background: #fff;
    font-weight: 600; font-size: 16px; text-decoration: none; }
.survey-face-good { color: #2F7D4F; }
.survey-face-bad { color: #B3463A; }
.survey-face:hover, .survey-face:focus-visible { border-color: currentColor; }
.survey-head { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.survey-head img { flex: none; }
.survey-form { margin-top: 20px; }
.survey-form .apply-fieldset .checkbox-item { margin-bottom: 6px; }
.survey-switch { margin-top: 24px; font-size: 14px; }
/* Customer feedback (dashboard_customer_feedback.html, stage 3). */
.feedback-table td { vertical-align: top; }
.feedback-table td:nth-child(-n+2) { white-space: nowrap; }
.feedback-col { min-width: 220px; }
.feedback-text { white-space: pre-line; }
.feedback-done { display: flex; flex-direction: column; gap: 6px; min-width: 180px; }
.feedback-done textarea { width: 100%; font: inherit; font-size: 13px; padding: 6px 8px;
    border: 1px solid var(--line-2); border-radius: 6px; resize: vertical; }
.feedback-face { font-weight: 600; }
.feedback-face-good { color: #2F7D4F; }
.feedback-face-not-good { color: #B3463A; }