/* ==========================================================================
   WHERE'S MY MONEY   ·   public_html/assets/css/style.css
   --------------------------------------------------------------------------
   CHANGED 08/04/2026, 12:15 PM EDT

   APPENDED ONLY. Nothing above the new block at the very END of this file
   has been touched. If you are comparing against your copy, everything from
   the top down to "THE PAYMENT SCHEDULE TOOL" is byte for byte identical.

   WHAT WAS ADDED, AND HOW TO FIND IT           (all at the end of the file)

     .wmm-sched-*      the rebuilt payment schedule tool
     .wmm-stand-*      the four choices, and the date box that belongs to one
     .wmm-preview-*    the panel that says what a click will do
     .wmm-settle-*     the settlement box
     .wmm-basis-*      the "Every 45 Days" pop-out
     .wmm-dash-permission   the one-thing-left card on the Dashboard

   COLOUR. Every panel added today is NAVY (--financial-bg-info with a navy
   left border). None of them is yellow. Yellow on this site means "this box
   still needs you", and none of these do - they explain, they do not ask.

   CACHED BY THE BROWSER. Shift-Reload once after uploading.
   ========================================================================== */

/* Where's My Money - shared styling */

/* ==========================================================================
   Financial Color System
   --------------------------------------------------------------------------
   One meaning, one color, defined once - used everywhere a dollar amount,
   status, or warning is shown across the investor portal, admin dashboard,
   and print reports. Before this existed, nearly every financial figure was
   red regardless of what it meant (money received, money owed, money at
   risk, or an actual default), which made reports hard to read at a glance
   and trained people to tune red out. Now:
     - Navy   = informational only (principal invested, totals) - never red.
     - Green  = money the investor has actually received.
     - Gold   = money owed, but not necessarily lost (interest/balloon owed).
     - Orange = money at risk (missed payments, principal at risk) - caution,
                not "this is gone."
     - Red    = reserved for true financial danger: an account that's both
                in Default AND past its Maturity Date, legal action, or a
                critical error. If everything is red, nothing is.
   ========================================================================== */
:root {
  --financial-primary: #1F3A5F; /* Navy   - informational only, never "bad news" */
  --financial-success: #2E7D32; /* Green  - money successfully received */
  --financial-warning: #D97706; /* Amber/Gold - money owed, not necessarily lost */
  --financial-risk:    #E67E22; /* Orange - money at risk / caution */
  --financial-danger:  #C62828; /* Red    - true financial danger only */

  --financial-bg-success: #ECFDF5;
  --financial-bg-warning: #FEF3C7;
  --financial-bg-risk:    #FFF7ED;
  --financial-bg-danger:  #FEE2E2;
  --financial-bg-info:    #EAF1F8;
}

/* Text-color utilities for dollar figures - pick by MEANING, not by whether
   the number happens to be inside a "Default" contract. A defaulted
   contract's "Interest Owed" is still money that's owed (gold), not
   automatically red; only the contract's overall status/severity indicator
   (see .wmm-badge-* and .wmm-default-alert below) escalates to red, and only
   once it's actually past its Maturity Date. */
.wmm-fin-info    { color: var(--financial-primary); }
.wmm-fin-success { color: var(--financial-success); }
.wmm-fin-warning { color: var(--financial-warning); }
.wmm-fin-risk    { color: var(--financial-risk); }
.wmm-fin-danger  { color: var(--financial-danger); font-weight: 700; }

/* Subtle background tints for cards/rows - intentionally muted, not
   saturated, so they read as "context" rather than shouting for attention.
   Kept legible when printed in grayscale since text labels are never
   dropped in favor of color alone (see accessibility note further down). */
.wmm-bg-success { background-color: var(--financial-bg-success); }
.wmm-bg-warning { background-color: var(--financial-bg-warning); }
.wmm-bg-risk    { background-color: var(--financial-bg-risk); }
.wmm-bg-danger  { background-color: var(--financial-bg-danger); }

/* Left-accent card variants - a calmer alternative to painting a whole card
   border/header in a semantic color; used on dashboard summary cards. */
.wmm-card-accent { border-left: 4px solid transparent; }
.wmm-card-accent.wmm-accent-info    { border-left-color: var(--financial-primary); }
.wmm-card-accent.wmm-accent-success { border-left-color: var(--financial-success); }
.wmm-card-accent.wmm-accent-warning { border-left-color: var(--financial-warning); }
.wmm-card-accent.wmm-accent-risk    { border-left-color: var(--financial-risk); }
.wmm-card-accent.wmm-accent-danger  { border-left-color: var(--financial-danger); }

/* Status badges (Current / Late / Default / Past Maturity) - rounded,
   white-lettered, consistent sizing, replacing plain-text status columns.
   Every badge keeps its text label (never relies on color alone), which
   also keeps them meaningful when a report is printed in grayscale. */
.wmm-badge {
  display: inline-block;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  line-height: 1.2;
}
.wmm-badge-success { background-color: var(--financial-success); color: #fff; }
.wmm-badge-danger   { background-color: var(--financial-danger); color: #fff; }
.wmm-badge-neutral  { background-color: #64748b; color: #fff; }
/* Amber and orange badges use dark text instead of white - with white
   lettering their contrast ratio against these particular background colors
   falls short for small badge text (checked against WCAG AA), so a dark
   label keeps them properly readable rather than just "on-brand." */
.wmm-badge-warning { background-color: var(--financial-warning); color: #2b1600; }
.wmm-badge-risk     { background-color: var(--financial-risk); color: #2b1600; }

/* Link variant - same pill shape and sizing as every other .wmm-badge
   above, but quieter (light fill, navy text) and clickable, for a
   completed step/field that's still worth a quick way back to review it -
   as opposed to the colored variants above, which only ever report a
   fixed status and are never links. Added 08/21/2026 for the Investor
   Resources Self-Check Checklist (a step marked done gets one of these
   instead of its full action button) - written as a shared modifier
   rather than a one-off class so any other "done, but here's a way back"
   spot can reuse it instead of inventing its own pill again. */
.wmm-badge-link {
  background-color: #EEF2F6;
  color: var(--financial-primary);
  text-decoration: none;
  cursor: pointer;
}
.wmm-badge-link:hover,
.wmm-badge-link:focus {
  background-color: #E0E7EE;
  color: var(--financial-primary);
  text-decoration: none;
}

/* Outline variant - white pill, colored text/border. Reserved for the
   contract-level status pill (header, next to the CTR code/borrower name)
   when that contract is Default or Post Maturity, per Mary's 07-09-2026
   request. Layered on top of .wmm-badge-danger/.wmm-badge-risk so it only
   affects call sites that explicitly add .wmm-badge-outline - schedule-row
   labels and other badges using the same base classes are untouched. */
.wmm-badge-outline.wmm-badge-danger {
  background-color: #ffffff;
  color: var(--financial-danger);
  border: 1.5px solid var(--financial-danger);
}
.wmm-badge-outline.wmm-badge-risk {
  background-color: #ffffff;
  color: var(--financial-risk);
  border: 1.5px solid var(--financial-risk);
}

/* The prominent "N MONTHS IN DEFAULT" callout - large, bold, unmissable.
   Reserved for contracts that are BOTH in Default status AND past their
   Maturity Date (the "Past Maturity" state), so it only ever appears for
   the single most serious situation on the site. A Default that hasn't
   reached Maturity yet gets the calmer orange .wmm-badge-risk pill instead
   - see render_months_in_default_badge_html() in includes/functions.php. */
.wmm-default-alert {
  display: block;
  background-color: var(--financial-danger);
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-align: center;
  padding: 0.65rem 1.25rem;
  border-radius: 0.5rem;
  margin: 0.75rem 0;
}
@media (min-width: 480px) {
  .wmm-default-alert { display: inline-block; text-align: left; }
}

/* Default / Post Maturity breakdown - three small boxes side by side,
   replacing the old single oversized .wmm-default-alert callout. Per
   Mary's 07-09-2026 request: boxes stay neutral/bordered, only the month
   NUMBER itself is red - not the whole box - so the red is reserved for
   the actual number that matters instead of painting a whole large block
   red for one contract. */
.wmm-default-box-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.6rem 0;
}
.wmm-default-box {
  border: 1px solid #e2ddd3;
  border-radius: 0.4rem;
  padding: 0.4rem 0.75rem;
  min-width: 128px;
  background-color: #fafaf8;
}
.wmm-default-box-label {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #6b6b66;
  white-space: nowrap;
}
.wmm-default-box-value {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--financial-danger);
  line-height: 1.3;
}
.wmm-default-box-unit {
  font-size: 0.82rem;
  font-weight: 600;
  color: #6b6b66;
  text-transform: uppercase;
}

body {
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

.card {
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    border-radius: 0.75rem;
}

.card-header {
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    font-weight: 600;
    border-radius: 0.75rem 0.75rem 0 0 !important;
}

/* ==========================================================================
   Broader UX polish - spacing, typography, tables, cards, mobile
   ========================================================================== */

/* Slightly roomier card bodies and a clearer label/value rhythm on the
   stat-tile cards used throughout the dashboards. */
.card-body { padding: 1.25rem 1.35rem; }
.card .text-muted.small { letter-spacing: 0.01em; }

/* Financial tables: clearer header row, calmer borders, comfortable row
   height - the goal is a report that scans easily left-to-right instead of
   a dense grid of numbers. */
.table {
  font-variant-numeric: tabular-nums;
}
.table thead th {
  background-color: #f8fafc;
  border-bottom: 2px solid #e2e8f0;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
  font-weight: 700;
  white-space: nowrap;
}
.table td, .table th { vertical-align: middle; }
.table tfoot td, .table tfoot th {
  border-top: 2px solid #cbd5e1;
  background-color: #f8fafc;
}

/* Give every "totals" row a bit more visual weight without resorting to
   color alone - bold text + a slightly heavier top border is enough. */
.wmm-totals-row td, .wmm-totals-row th { font-weight: 700; }

/* Section headings inside reports (Investor Summary, Accounting Breakdown,
   etc.) get a bit more breathing room and a consistent look wherever h6 is
   used as a section label. */
h6.wmm-section-label,
h6 {
  letter-spacing: 0.03em;
}

/* Mobile: let wide financial tables scroll horizontally inside their own
   card instead of squeezing every column or breaking the page layout. */
@media (max-width: 767.98px) {
  .table-responsive-wmm { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .card-body { padding: 1rem; }
  h3 { font-size: 1.5rem; }
}

.repeatable-block {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    background: #fff;
    position: relative;
}

.repeatable-block .remove-block-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

/* Contract-level remove button: the summary line's text length varies a lot
   (contract code, type, principal amount, status badge all concatenated),
   so an absolutely-positioned top-right button can overlap wrapped summary
   text on narrower screens or with longer contract details. Instead of
   using flexbox "order" to visually relocate the button (which silently
   overrides the actual HTML order below it - a real bug that caused this
   whole block to render out of sequence no matter how the PHP markup was
   arranged), the button is simply placed directly in the HTML wherever it
   should visually appear (see render_contract_block() in
   wizard/step4_contracts.php - right after the Contract Details <details>
   closes). That keeps "what order things appear in on screen" always equal
   to "what order things appear in in the file," with nothing hidden in
   CSS. The button keeps both .remove-block-btn (required by wizard.js's
   ':scope > .remove-block-btn' selector) and the .remove-contract-btn
   modifier, which now only needs to cancel the absolute positioning. */
.repeatable-block--contract .remove-contract-btn {
    position: static;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

.wizard-nav-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
}

.required-star {
    color: #dc3545;
}

/* ---- Contract Details accordion (investor-facing print_summary.php) ----
   Built for an audience skewing older: generous text size, comfortable
   spacing, and large click targets throughout, rather than packing more
   onto the screen. */
.wmm-contract-card {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    background: #fff;
}

.wmm-contract-header-title {
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
}

.wmm-contract-header-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2rem;
    margin: 0.75rem 0 0.25rem;
}

.wmm-contract-header-stats > div {
    min-width: 130px;
}

.wmm-contract-header-stats .text-muted.small {
    font-size: 0.95rem;
}

.wmm-contract-header-stats .fw-bold {
    font-size: 1.1rem;
}

details.wmm-subsection {
    border-top: 1px solid #e9ecef;
}

details.wmm-subsection:last-of-type {
    border-bottom: 1px solid #e9ecef;
}

.wmm-accordion-summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--financial-primary);
    padding: 0.9rem 0.5rem;
    list-style: none;
    min-height: 44px; /* comfortable tap target on touchscreens */
    display: flex;
    align-items: center;
}

.wmm-accordion-summary:hover {
    background-color: #f8fafc;
}

.wmm-accordion-summary::-webkit-details-marker {
    display: none;
}

.wmm-accordion-summary::before {
    content: '>';
    display: inline-block;
    margin-right: 0.6rem;
    font-size: 0.75em;
}

details[open] > .wmm-accordion-summary::before {
    content: 'v';
}

.wmm-accordion-body {
    padding: 0.25rem 0.5rem 1.25rem;
    font-size: 1rem;
}

.wmm-subsection-standalone {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    background: #fff;
    padding: 0 0.5rem;
}

.wmm-subsection-standalone.wmm-subsection {
    border-top: 1px solid #dee2e6;
}

/* The months-in-default callout sits after the calm informational stats
   (dates/principal/rate/balance) rather than between the title and those
   stats, and is right-aligned so it reads as a distinct flag rather than
   interrupting the header's normal reading order. */
.wmm-contract-header-alert {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
}

/* ---- "You're securely viewing..." banner (wizard/step4_contracts.php) ----
   Calm and reassuring rather than a warning: soft green background, plenty
   of white space, message on the left and a contact block on the right so
   an investor always knows who to reach if something looks wrong, without
   the page telling them something IS wrong. */
.wmm-viewing-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    background-color: var(--financial-bg-success);
    border: 1px solid #cfe8d6;
    border-radius: 0.5rem;
    padding: 1.1rem 1.5rem;
}

.wmm-viewing-banner-message {
    flex: 1 1 320px;
    font-size: 1.02rem;
    text-align: left;
}

.wmm-viewing-banner-contact {
    flex: 0 0 auto;
    text-align: left;
}

/* A plain small text link here was too easy to miss for an audience
   skewing older, especially against a busy page - Mary specifically flagged
   this after watching a real investor session. This makes "email me" a
   real, unmissable button instead of a line of small blue text: generous
   padding, a big touch target, high contrast, and a plain-English label
   ("Email Mary") instead of the raw address doing double duty as the
   only clickable element. The actual address still shows underneath in
   plain text, for anyone who'd rather type it into their own email app. */
.wmm-contact-email-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--financial-primary);
    color: #fff !important;
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none !important;
    padding: 0.6rem 1.25rem;
    border-radius: 0.5rem;
    margin-top: 0.3rem;
}
.wmm-contact-email-btn:hover {
    background-color: #16293f;
}
.wmm-contact-email-address {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.95rem;
    color: #555;
}

@media (max-width: 575.98px) {
    .wmm-viewing-banner {
        flex-direction: column;
        align-items: flex-start;
    }
    /* Reset the flex-basis inherited from the row layout above - in a
       column-direction flex container, a leftover "320px" basis is read as
       a height, not a width, which stretched this block far taller than
       its actual text needed. */
    .wmm-viewing-banner-message {
        flex: 0 1 auto;
    }
    .wmm-viewing-banner-contact {
        flex: 0 0 auto;
        width: 100%;
        border-top: 1px solid #cfe8d6;
        padding-top: 0.85rem;
        margin-top: 0.25rem;
    }
}

/* ---- Professional accent color instead of Bootstrap's stock blue ----
   Bootstrap's default "primary" blue was never part of this app's
   financial color system (navy/green/gold/orange/red) and stood out next
   to it. These bring every blue-by-default Bootstrap element - solid
   buttons, outline buttons, and plain links - in line with the same navy
   already used for informational content elsewhere on the site. */
a {
    color: var(--financial-primary);
}
a:hover, a:focus {
    color: #14283f;
}

/* Added 2026-07-06: the plain `a { color }` rule above (navy) was silently
   making any solid-background button BUILT FROM AN <a> TAG unreadable -
   navy text on top of an equally-navy .btn-primary background - since it
   overrides whatever text color Bootstrap would otherwise give that button.
   A <button> element never had this problem since these navy/link color
   rules only ever targeted <a>. Found on wizard/print_summary.php's new
   "Go to Dashboard" button; wizard/success.php's "Print / Save My Summary"
   button (also an <a class="btn btn-primary">) had the exact same
   invisible-text bug already live before today. */
a.btn-primary, a.btn-primary:hover, a.btn-primary:focus,
a.btn-success, a.btn-success:hover, a.btn-success:focus {
    color: #fff;
}

.btn-primary {
    background-color: var(--financial-primary);
    border-color: var(--financial-primary);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: #14283f;
    border-color: #14283f;
}

.btn-outline-primary {
    color: var(--financial-primary);
    border-color: var(--financial-primary);
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
    background-color: var(--financial-primary);
    border-color: var(--financial-primary);
    color: #fff;
}

.text-primary {
    color: var(--financial-primary) !important;
}

.btn-success {
    background-color: var(--financial-success);
    border-color: var(--financial-success);
}
.btn-success:hover, .btn-success:focus, .btn-success:active {
    background-color: #1f5723;
    border-color: #1f5723;
}

.btn-outline-success {
    color: var(--financial-success);
    border-color: var(--financial-success);
}
.btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success:active {
    background-color: var(--financial-success);
    border-color: var(--financial-success);
    color: #fff;
}

/* Bootstrap's stock alert colors, remapped to the same financial palette
   used everywhere else (info=navy, success=green, warning=gold, danger=red)
   instead of Bootstrap's own blue/green/yellow/red, so a flash message or
   inline notice never clashes with the badges and figures right next to it. */
.alert-info {
    background-color: var(--financial-bg-info);
    border-color: #c9dced;
    color: #14283f;
}
.alert-success {
    background-color: var(--financial-bg-success);
    border-color: #b7dfc5;
    color: #1e4620;
}
.alert-warning {
    background-color: var(--financial-bg-warning);
    border-color: #f3dfa5;
    color: #6b4a05;
}
.alert-danger {
    background-color: var(--financial-bg-danger);
    border-color: #f3b4b4;
    color: #7a1f1f;
}

/* Darken the default checkbox outline for legibility against a white
   background, and use the site's own green (not Bootstrap's) once checked.
   Shared globally so every checkbox on the site looks the same - this used
   to be copy-pasted into a <style> block on both the Contracts & Payments
   and Investment Objectives pages individually. */
.form-check-input {
    border: 2px solid #495057;
}
.form-check-input:checked {
    background-color: var(--financial-success);
    border-color: var(--financial-success);
}

/* Targeted, non-global recolors for the two spots still using Bootstrap's
   stock red/yellow instead of the site's own palette (the Admin Investor
   Detail page's Danger Zone and "Contact Info Provided" cards) - done as
   dedicated classes rather than overriding .border-danger/.bg-danger
   everywhere, since those Bootstrap classes/utilities are also used by
   unrelated elements (e.g. delete buttons) that aren't part of this pass. */
.wmm-card-border-danger {
    border-color: var(--financial-danger) !important;
}
.wmm-card-header-danger {
    background-color: var(--financial-danger) !important;
    color: #fff;
}
.wmm-card-border-warning {
    border-color: var(--financial-warning) !important;
}

/* ---- Legal Representation rows (wizard/step6_legal.php) ----
   Same overlap-safe layout already used for Contract blocks: the remove
   button is pushed below the row's own content instead of being absolutely
   positioned over the top-right corner, where it could crowd the Email
   field on narrower screens. */
.repeatable-block--legal {
    display: flex;
    flex-direction: column;
}
.repeatable-block--legal > .repeatable-block-content {
    order: 1;
}
.repeatable-block--legal .remove-legal-btn {
    position: static;
    align-self: flex-start;
    order: 2;
    margin-top: 0.75rem;
}

@media print {
    nav, footer, .no-print { display: none !important; }
    .container { max-width: 100% !important; }
    body { background: #fff !important; }

    /* Force badge/callout background colors to actually print (browsers
       strip backgrounds by default when printing) - but even if a printer
       renders these as plain grayscale, the text label inside every badge
       ("Late", "Default", "11 MONTHS IN DEFAULT", etc.) still carries the
       meaning on its own, so nothing here depends on color alone. */
    .wmm-badge, .wmm-default-alert, .wmm-bg-success, .wmm-bg-warning, .wmm-bg-risk, .wmm-bg-danger {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        color-adjust: exact;
    }

    /* Printed/PDF reports must show everything regardless of what an
       investor happened to have expanded or collapsed on screen. A closed
       <details> element's contents aren't just visually hidden by CSS -
       browsers skip rendering them entirely - so an author stylesheet rule
       can't force them to show. The actual expand-all-for-print happens in
       JS (see print_summary.php), which flips every <details> open before
       the print dialog opens and restores it after. This rule just hides
       the now-redundant disclosure arrow so a printed page doesn't show a
       "collapsed" triangle next to fully-expanded content. */
    .wmm-accordion-summary::before {
        display: none;
    }
}

/* ---- Term / Post-Maturity / Grand Total / Value-equation boxes ----
   Shared by the investor Print Report (wizard/print_summary.php) and the
   Investor Dashboard's per-contract detail view, so a contract reads
   identically whether an investor is looking at it on screen or on paper.
   Colors carry the same meaning as everywhere else on the site: orange for
   "owed but still within the original term," red for "owed because of a
   default past maturity," navy for a plain total, and the value-equation
   cells reuse info/risk/danger backgrounds to visually walk through how a
   contract's worth grew because of the default. */
.wmm-summary-box {
    margin-top: 1.25rem;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    overflow: hidden;
}
.wmm-summary-box h4 {
    color: #fff;
    font-size: 0.98rem;
    margin: 0;
    padding: 0.6rem 1rem;
}
.wmm-summary-box.wmm-box-term h4 { background: var(--financial-risk); }
.wmm-summary-box.wmm-box-since h4 { background: var(--financial-danger); }
.wmm-summary-box.wmm-box-grand h4 { background: var(--financial-primary); }
.wmm-summary-box.wmm-box-value h4 { background: var(--financial-primary); }
.wmm-summary-rows { padding: 0.8rem 1rem; }
.wmm-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.98rem;
    padding: 0.35rem 0;
    border-bottom: 1px dotted #ddd;
}
.wmm-summary-row:last-child { border-bottom: none; font-weight: 700; }
.wmm-summary-box.wmm-box-grand .wmm-summary-row:last-child { font-size: 1.1rem; color: var(--financial-primary); }

/* Added 2026-07-06 at Mary's request: "Payments Received" needed to be
   visible somewhere in the Contract Term Summary box, in green. This row
   is deliberately styled apart from the ordinary dotted-border rows above
   it since it's money actually received (good news), not money owed. */
.wmm-summary-row-highlight {
    background: var(--financial-bg-success);
    border: 1px solid #b6e3c4;
    border-radius: 6px;
    padding: 0.5rem 0.75rem !important;
    margin-bottom: 0.4rem;
    font-weight: 700;
}
.wmm-summary-row-highlight span:last-child { color: var(--financial-success); }

.wmm-value-equation {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    padding: 1rem;
    flex-wrap: wrap;
}
.wmm-value-cell {
    flex: 1;
    min-width: 140px;
    text-align: center;
    border-radius: 8px;
    padding: 0.75rem 0.6rem;
    background: var(--financial-bg-info);
    border: 1px solid #c7d9ec;
}
.wmm-value-cell.wmm-value-risk { background: var(--financial-bg-risk); border-color: #f6c896; }
.wmm-value-cell.wmm-value-danger { background: var(--financial-bg-danger); border-color: #f0b3b3; }
.wmm-value-label {
    font-size: 0.88rem;
    color: #555;
    margin-bottom: 0.4rem;
    line-height: 1.3;
}
.wmm-value-cell.wmm-value-risk .wmm-value-label { color: var(--financial-risk); }
.wmm-value-cell.wmm-value-danger .wmm-value-label { color: var(--financial-danger); }
.wmm-value-amount {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--financial-primary);
}
.wmm-value-cell.wmm-value-risk .wmm-value-amount { color: var(--financial-risk); }
.wmm-value-cell.wmm-value-danger .wmm-value-amount { color: var(--financial-danger); }
.wmm-value-op {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 700;
    color: #999;
    padding: 0 0.25rem;
}

/* Added 2026-07-06: the two stat chips under the Then-vs-Now equation
   (Total Interest Paid to Date, Missed Payments) - approved from a mockup
   built with these exact classes, so this must stay visually identical to
   that mockup. Deliberately separate from .wmm-value-cell/.wmm-value-op
   since these two numbers aren't part of the +/= chain above them. */
.wmm-stat-chip-row {
    display: flex;
    gap: 0.75rem;
    padding: 0 1rem 1rem;
    flex-wrap: wrap;
}
.wmm-stat-chip {
    flex: 1;
    min-width: 200px;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1px solid #dee2e6;
}
.wmm-stat-chip-label { font-size: 0.9rem; color: #555; margin-bottom: 0.3rem; }
.wmm-stat-chip-value { font-size: 1.25rem; font-weight: 800; }
.wmm-stat-chip.chip-received { background: var(--financial-bg-success); border-color: #b6e3c4; }
.wmm-stat-chip.chip-received .wmm-stat-chip-value { color: var(--financial-success); }
.wmm-stat-chip.chip-missed { background: #f4f5f7; border-color: #d8dde3; }
.wmm-stat-chip.chip-missed .wmm-stat-chip-value { color: #555; }

@media print {
    .wmm-summary-box { break-inside: avoid; }
}

/* ---- Investor Dashboard (wizard/dashboard.php) ----
   Sidebar + KPI cards + contracts table + portfolio donut, matching the
   reference layout Mary shared. Reuses the same financial color variables
   as every other screen - nothing new invented, just newly arranged. */
.wmm-dash-layout {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}
.wmm-dash-sidebar {
    flex: 0 0 200px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1rem 0;
    position: sticky;
    top: 1rem;
}
.wmm-dash-sidebar a {
    display: block;
    padding: 0.6rem 1.25rem;
    color: #495057;
    text-decoration: none;
    font-size: 0.98rem;
    border-left: 3px solid transparent;
}
.wmm-dash-sidebar a:hover {
    background: #f8fafc;
}
.wmm-dash-sidebar a.active {
    color: var(--financial-primary);
    font-weight: 700;
    border-left-color: var(--financial-primary);
    background: var(--financial-bg-info);
}
.wmm-dash-main {
    flex: 1;
    min-width: 0;
}
.wmm-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.wmm-kpi-card {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
}
.wmm-kpi-card .wmm-kpi-label {
    font-size: 0.88rem;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 0.35rem;
}
.wmm-kpi-card .wmm-kpi-value {
    font-size: 1.5rem;
    font-weight: 800;
}
.wmm-kpi-card .wmm-kpi-sub {
    font-size: 0.9rem;
    color: #888;
    margin-top: 0.25rem;
}
.wmm-dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
    gap: 1.5rem;
}
@media (max-width: 900px) {
    .wmm-dash-layout { flex-direction: column; }
    .wmm-dash-sidebar { flex: none; width: 100%; position: static; }
    .wmm-dash-grid { grid-template-columns: 1fr; }
}
.wmm-dash-card {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1.25rem;
}

/* Added 2026-07-06: the small "needs attention first" line at the very top
   of the Dashboard, above the KPI cards. Always the same contract the list
   below already sorts to the top (Past Maturity first) - nothing for the
   investor to pick or configure, per Mary's request to keep this simple. */
.wmm-dash-featured {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    background: var(--financial-bg-risk);
    border: 1px solid #f6c896;
    border-radius: 0.5rem;
    padding: 0.6rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.98rem;
}
.wmm-dash-featured a { color: var(--financial-primary); text-decoration: underline; }

/* Added 2026-07-06: replaced the click-to-expand table with one card per
   contract. Each card always shows the Then-vs-Now box (see
   render_contract_then_now_box_html() in includes/functions.php) with no
   click required, then an accordion (native <details name="...">, same
   exclusive-open pattern as the Print Report's Contract Details sections)
   reveals the fuller Term Summary / Default Info / Total Owed breakdown
   only if the investor wants to dig further - per Mary's 2026-07-06
   feedback ("Each Then and Now should be in the dash, then if investor
   wants to open, the card appears"). */
.wmm-dash-contract-block {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1rem 1.25rem 0.25rem;
    margin-bottom: 1.5rem;
    background: #fff;
}
.wmm-dash-contract-block:last-child { margin-bottom: 0; }
.wmm-dash-contract-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}
.wmm-dash-contract-head-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-size: 1.05rem;
}
.wmm-dash-contract-head-stats {
    font-size: 0.95rem;
    color: #666;
}

table.wmm-contracts-table {
    width: 100%;
    border-collapse: collapse;
}
table.wmm-contracts-table th {
    text-align: left;
    font-size: 0.88rem;
    text-transform: uppercase;
    color: #888;
    border-bottom: 1px solid #dee2e6;
    padding: 0.5rem 0.6rem;
}
table.wmm-contracts-table td {
    padding: 0.7rem 0.6rem;
    border-bottom: 1px solid #f1f3f5;
    vertical-align: middle;
}
table.wmm-contracts-table tr.wmm-row-clickable {
    cursor: pointer;
}
table.wmm-contracts-table tr.wmm-row-clickable:hover {
    background: #f8fafc;
}
table.wmm-contracts-table tr.wmm-row-detail-open > td {
    border-bottom: none;
}
.wmm-donut {
    border-radius: 50%;
    width: 160px;
    height: 160px;
    margin: 0 auto 1rem auto;
}
.wmm-donut-legend {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.95rem;
}
.wmm-donut-legend-item {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}
.wmm-donut-legend-swatch {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 2px;
    margin-right: 0.4rem;
}
.wmm-dash-detail-row td {
    background: #fafbfc;
    padding: 1rem 1.5rem;
}
.wmm-dash-empty {
    text-align: center;
    color: #888;
    padding: 3rem 1rem;
}
/* ==========================================================================
   ADDED 2026-07-25 — Round 20 design standards.
   Everything below this line was decided with Mary on 07/25/2026 and is
   recorded in the Design & Function Register, Items 44, 45 and 47.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ITEM 44 — COLOUR DESCRIBES MONEY. NAVY OPERATES THE MACHINE.

   Green, gold, orange and red are reserved for what money is DOING, exactly
   as the Financial Color System at the top of this file defines them. They
   never appear on a control.

   Green had been doing two jobs at once - "money you have actually received"
   AND "press here" - so the same colour meant good news in one place and an
   instruction in another. It is also the worst possible choice for a button
   on this site: green against white is precisely the hue pair that collapses
   for a colour-blind reader, and roughly one man in twelve cannot separate
   them reliably. Navy against white differs in LIGHTNESS rather than hue, so
   it survives every form of colour blindness - and navy is already defined
   here as informational, never bad news.

   The companion rule, which matters as much as the colour: EXACTLY ONE
   FILLED BUTTON PER SCREEN. If a second one feels necessary, one of the two
   is not really the next step. Applying this rule is what exposed two
   buttons that should not have existed at all.
   -------------------------------------------------------------------------- */
.btn-wmm-primary,
.btn.btn-wmm-primary {
    background-color: var(--financial-primary);
    border: 2px solid var(--financial-primary);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    padding: 0.65rem 1.9rem;
    border-radius: 0.5rem;
    min-height: 44px;              /* comfortable tap target */
}
.btn-wmm-primary:hover,
.btn-wmm-primary:focus {
    background-color: #16293f;
    border-color: #16293f;
    color: #fff;
}
.btn-wmm-secondary,
.btn.btn-wmm-secondary {
    background-color: #fff;
    border: 2px solid var(--financial-primary);
    color: var(--financial-primary);
    font-size: 1.02rem;
    font-weight: 700;
    padding: 0.6rem 1.6rem;
    border-radius: 0.5rem;
    min-height: 44px;
}
.btn-wmm-secondary:hover,
.btn-wmm-secondary:focus {
    background-color: var(--financial-bg-info);
    color: var(--financial-primary);
}
/* A way out of a page is a text link, not a button competing with the action. */
.btn-wmm-quiet {
    background: none;
    border: none;
    color: #6c757d;
    text-decoration: underline;
    font-size: 0.98rem;
    padding: 0.5rem 0.25rem;
    cursor: pointer;
}
.btn-wmm-quiet:hover { color: var(--financial-primary); }

/* --------------------------------------------------------------------------
   ITEMS 45 and 47 — the Then-vs-Now box, rebuilt.
   Each side leads with the one number that side is about, at a size that can
   be read across a room, with short label/value pairs beneath that do not
   wrap. See render_contract_then_now_box_html() in includes/functions.php.
   -------------------------------------------------------------------------- */
.wmm-tn-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
@media (max-width: 700px) {
    .wmm-tn-split { grid-template-columns: 1fr; }
}
.wmm-tn-side { padding: 1.1rem 1.25rem; }
.wmm-tn-then { background: #f6f7f9; border-right: 1px solid #e3e6ea; }
.wmm-tn-now  { background: var(--financial-bg-risk); }
@media (max-width: 700px) {
    .wmm-tn-then { border-right: none; border-bottom: 1px solid #e3e6ea; }
}
.wmm-tn-head {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    color: #8b8b84;
    margin-bottom: 0.7rem;
}
.wmm-tn-now .wmm-tn-head { color: var(--financial-risk); }
.wmm-tn-big {
    font-size: 2.15rem;
    font-weight: 800;
    line-height: 1.05;
    color: var(--financial-primary);
}
/* the meaning colours must survive .wmm-tn-big's own colour declaration */
.wmm-tn-big.wmm-fin-danger  { color: var(--financial-danger); }
.wmm-tn-big.wmm-fin-success { color: var(--financial-success); }
.wmm-tn-big.wmm-fin-risk    { color: var(--financial-risk); }
.wmm-tn-sub {
    font-size: 0.98rem;
    color: #5b5b54;
    margin: 0.15rem 0 0.9rem;
}
.wmm-tn-detail {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding-top: 0.6rem;
}
.wmm-tn-detail > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    font-size: 0.98rem;
    padding: 0.22rem 0;
}
.wmm-tn-detail span { color: #6b6b66; white-space: nowrap; }
.wmm-tn-detail b { font-weight: 700; white-space: nowrap; }
/* the growth block is a group, not a row - it must not inherit the row flex */
.wmm-tn-detail > .wmm-tn-growing {
    display: block;
    margin-top: 0.6rem;
    padding-top: 0.55rem;
    border-top: 1px dashed rgba(0, 0, 0, 0.18);
}
.wmm-tn-growing > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    font-size: 0.98rem;
    padding: 0.22rem 0;
}
.wmm-tn-grow-head {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--financial-risk);
    margin-bottom: 0.25rem;
}
.wmm-tn-grow-rate {
    margin-top: 0.3rem;
    padding-top: 0.3rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.wmm-tn-grow-rate b { color: var(--financial-risk); }

/* ADDED 08/15/2026 - the "?" help icon used next to "May Be Owed Past
   Maturity - 6% Rate" and its equivalents on the Print Report / admin view.
   Was previously used unstyled (bare "?" link) on the Company Name field in
   wizard/step3b_borrower.php; styled here for the first time, so that older
   usage picks up the same look automatically. */
.wmm-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    background: #dfe3e8;
    color: #555;
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
    vertical-align: middle;
    margin-left: 0.15rem;
}
.wmm-info-icon:hover, .wmm-info-icon:focus { background: var(--financial-primary); color: #fff; }

/* ==========================================================================
   ADDED 2026-07-25 — the navigation rebuild.
   Register Items 5, 7, 16, 26, 27, 42 and 43.
   ========================================================================== */

/* ---- Item 16: the sidebar, drawn from one shared definition ------------- */
.wmm-nav-parent {
    display: block;
    padding: 0.6rem 1.25rem;
    color: #495057;
    text-decoration: none;
    font-size: 0.98rem;
    font-weight: 700;
    border-left: 3px solid transparent;
}
.wmm-nav-parent:hover { background: #f8fafc; }
.wmm-nav-parent.active {
    color: var(--financial-primary);
    border-left-color: var(--financial-primary);
    background: var(--financial-bg-info);
}
.wmm-nav-child {
    display: block;
    padding: 0.38rem 1.25rem 0.38rem 2.1rem;
    color: #6c757d;
    text-decoration: none;
    font-size: 0.98rem;
    border-left: 3px solid transparent;
}
.wmm-nav-child:hover { background: #f8fafc; color: var(--financial-primary); }
.wmm-nav-sep { height: 1px; background: #e9ecef; margin: 0.55rem 1rem; }
/* Log Out was one grey link among eight and easy to hit by mistake. */
.wmm-nav-logout {
    display: block;
    margin: 0.6rem 1.25rem 0.15rem;
    padding: 0.4rem 1rem;
    text-align: center;
    border: 1px solid #adb5bd;
    border-radius: 0.4rem;
    color: #495057;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
}
.wmm-nav-logout:hover {
    border-color: var(--financial-primary);
    color: var(--financial-primary);
    background: var(--financial-bg-info);
}

/* ---- Items 5 and 42: the named areas and the one button out ------------- */
.wmm-area-head {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.6rem;
    background: var(--financial-primary); color: #fff;
    border-radius: 0.5rem 0.5rem 0 0;
    padding: 0.7rem 1.15rem;
    font-weight: 800; font-size: 1.02rem;
}
.wmm-area-step {
    font-size: 0.88rem; font-weight: 700; color: #cfe0f2;
    letter-spacing: 0.04em; text-transform: uppercase;
}
.wmm-area-body {
    background: #fff; border: 1px solid #dee2e6; border-top: none;
    border-radius: 0 0 0.5rem 0.5rem; padding: 1.35rem 1.25rem;
}
.wmm-area-nav {
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; flex-wrap: wrap;
    margin-top: 2.2rem; padding-top: 1.3rem; border-top: 1px solid #e9ecef;
}
.wmm-nav-actions { margin-left: auto; }
/* Saving is a statement, not a control - so it is green text, never a button. */
.wmm-save-state {
    display: flex; align-items: center; gap: 0.45rem;
    font-size: 0.98rem; color: var(--financial-success); font-weight: 600;
}
.wmm-save-dot {
    width: 0.55rem; height: 0.55rem; border-radius: 50%;
    background: var(--financial-success); display: inline-block;
}

/* ---- Item 5: the chooser ------------------------------------------------ */
.wmm-chooser { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.wmm-choice {
    display: block; text-decoration: none;
    background: #fff; border: 2px solid #dee2e6; border-radius: 0.6rem;
    padding: 1.2rem 1.3rem;
}
.wmm-choice:hover { border-color: var(--financial-primary); background: var(--financial-bg-info); }
.wmm-choice-title { display: block; font-size: 1.12rem; font-weight: 800; color: var(--financial-primary); margin-bottom: 0.3rem; }
.wmm-choice-sub { display: block; font-size: 0.98rem; color: #5b5b54; }

/* ---- Item 26: yellow means it needs you --------------------------------- */
.wmm-needs-you {
    background: var(--financial-bg-warning) !important;
    border-color: var(--financial-warning) !important;
    border-width: 2px !important;
}
.wmm-yellow-counter {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.75rem;
    background: var(--financial-bg-warning); border: 1px solid #f0d089;
    border-radius: 0.5rem; padding: 0.7rem 1.1rem; margin-bottom: 1.1rem;
    font-size: 1rem; font-weight: 600; color: #7a4a00;
}
.wmm-yellow-counter.all-clear {
    background: var(--financial-bg-success); border-color: #b6e3c4;
    color: var(--financial-success);
}

/* ---- Item 27: help on demand, in words --------------------------------- */
.wmm-help-btn {
    background: #fff; border: 2px solid var(--financial-primary);
    color: var(--financial-primary); font-weight: 700; font-size: 0.98rem;
    border-radius: 0.5rem; padding: 0.45rem 1.1rem; cursor: pointer;
}
.wmm-help-btn:hover { background: var(--financial-bg-info); }
.wmm-help-panel {
    display: none;
    background: #fff; border: 2px solid var(--financial-primary);
    border-radius: 0.5rem; padding: 1.1rem 1.35rem; margin-top: 0.75rem;
    font-size: 1rem; line-height: 1.55; max-width: 660px;
}
.wmm-help-panel.open { display: block; }
.wmm-help-panel h6 { color: var(--financial-primary); font-weight: 800; margin-bottom: 0.5rem; }
.wmm-quiet-link {
    background: none; border: none; color: var(--financial-primary);
    text-decoration: underline; font-size: 0.98rem; padding: 0.4rem 0.2rem; cursor: pointer;
}

/* ---- Item 42: the hub --------------------------------------------------- */
.wmm-hub-lede { font-size: 1.08rem; max-width: 64ch; color: #3d3d38; margin-bottom: 1.4rem; }
.wmm-hub-block { border: 1px solid #dee2e6; border-radius: 0.55rem; background: #fff; margin-bottom: 1.3rem; overflow: hidden; }
.wmm-hub-block-head { font-weight: 800; font-size: 1rem; padding: 0.6rem 1.05rem; border-bottom: 1px solid #e9ecef; }
.wmm-hub-done .wmm-hub-block-head  { background: var(--financial-bg-success); color: var(--financial-success); }
.wmm-hub-open .wmm-hub-block-head  { background: var(--financial-bg-warning); color: #7a4a00; }
.wmm-hub-clear .wmm-hub-block-head { background: var(--financial-bg-success); color: var(--financial-success); }
.wmm-hub-block-body { padding: 1rem 1.05rem; }
.wmm-hub-list { margin: 0 0 0.6rem; padding-left: 1.25rem; font-size: 0.98rem; }
.wmm-hub-list li { margin-bottom: 0.22rem; }
.wmm-hub-foot { font-size: 0.95rem; color: #8b8b84; margin: 0; }
.wmm-hub-open-item {
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; flex-wrap: wrap; padding: 0.7rem 0; border-bottom: 1px solid #f1f3f5;
}
.wmm-hub-open-title { font-weight: 700; color: #2b2b28; }
.wmm-hub-open-sub { font-size: 0.98rem; color: #5b5b54; margin-top: 0.1rem; }
.wmm-hub-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 2rem; }
@media (max-width: 640px) { .wmm-hub-doors { grid-template-columns: 1fr; } }
.wmm-hub-door {
    display: block; text-decoration: none;
    background: #fbfbfa; border: 2px solid #dee2e6; border-radius: 0.6rem;
    padding: 1.15rem 1.3rem;
}
.wmm-hub-door:hover { border-color: var(--financial-primary); background: var(--financial-bg-info); }
.wmm-hub-door-go { border-color: var(--financial-primary); background: var(--financial-bg-info); }
.wmm-hub-door-go:hover { background: #dce8f4; }
.wmm-hub-door-title { display: block; font-size: 1.2rem; font-weight: 800; color: #55554e; margin-bottom: 0.25rem; }
.wmm-hub-door-go .wmm-hub-door-title { color: var(--financial-primary); }
.wmm-hub-door-sub { display: block; font-size: 0.98rem; color: #5b5b54; }

/* ---- Item 7: the name she calls a contract ------------------------------ */
.wmm-contract-name { font-size: 1.08rem; font-weight: 800; color: var(--financial-primary); }
/* CHANGED 08/30/2026 (Batch 91). Was 0.86rem in #8b8b84 - two sizes down and
   grey enough to read as filing reference rather than as part of the name.
   Mary: "i use numbers and names - they use just the name and i have to make
   them check the number." Now the same size as the name, in a readable ink,
   one weight lighter so the name still leads. */
.wmm-contract-code { font-size: 1.08rem; color: #55554e; font-weight: 600; letter-spacing: 0.03em; }
.wmm-contract-actions {
    display: flex; gap: 0.6rem; flex-wrap: wrap;
    margin-top: 1.2rem; padding-top: 1rem; padding-bottom: 1.2rem;
    border-top: 1px solid #eceef1;
}
.wmm-card-link {
    background: none; border: none; color: var(--financial-primary);
    font-weight: 700; font-size: 0.98rem; text-decoration: underline;
    text-underline-offset: 3px; padding: 0.35rem 0; cursor: pointer;
}
.wmm-card-link::after { content: ' \2192'; }

/* ==========================================================================
   THE PAYMENT SCHEDULE TOOL          (rebuilt 08/04/2026, Register 75-79)
   --------------------------------------------------------------------------
   Four plain choices instead of one date box that meant two things, and a
   panel that says what the button is about to do before it is pressed.

   COLOUR: the preview panel is NAVY, deliberately. On this site yellow means
   "this box still needs you" and that is the only colour rule the investor is
   ever told about - so a panel that needs nothing from her may not use it,
   however much it wants attention. Navy is information. See the Financial
   Color System at the top of this file.
   ========================================================================== */
.wmm-sched-tool { margin-top: 0.2rem; }

.wmm-sched-step {
    font-weight: 800; color: var(--financial-primary);
    margin: 1.35rem 0 0.5rem; font-size: 1rem;
}
.wmm-sched-tool > .wmm-sched-step:first-child { margin-top: 0.2rem; }

/* One choice per card. The whole card is clickable, not just the small
   circle - these are laptop track pads and older hands. */
.wmm-stand-choice {
    border: 1px solid #dee2e6; border-radius: 0.4rem;
    padding: 0.6rem 0.8rem; margin-bottom: 0.4rem;
    background: #fff; cursor: pointer;
}
.wmm-stand-choice.on { border-color: var(--financial-primary); background: #f7fafd; }
.wmm-stand-choice label { cursor: pointer; font-size: 1rem; }
.wmm-stand-hint { font-size: 0.95rem; color: #6c757d; margin: 0.15rem 0 0 1.5em; }

/* The date box belongs to its choice, and only appears with it - so a blank
   box never silently means something. */
.wmm-stand-follow { display: none; margin: 0.55rem 0 0.1rem 1.5em; max-width: 520px; }
.wmm-stand-choice.on .wmm-stand-follow { display: block; }
.wmm-stand-follow input[type="date"] { max-width: 250px; }

.wmm-sched-subq {
    font-weight: 700; color: var(--financial-primary);
    margin: 0.85rem 0 0.35rem; font-size: 0.98rem;
}

.wmm-sched-preview {
    background: var(--financial-bg-info);
    border-left: 5px solid var(--financial-primary);
    border-radius: 0.3rem; padding: 0.8rem 0.95rem; margin-top: 0.9rem;
    font-size: 0.98rem; color: var(--financial-primary); line-height: 1.55;
}
.wmm-preview-rows { margin: 0.45rem 0 0.45rem 1.1rem; font-variant-numeric: tabular-nums; }
.wmm-preview-rows span { display: inline-block; min-width: 6.5rem; }
.wmm-preview-rows em { color: #5B5B54; font-style: normal; font-size: 0.98rem; }
.wmm-preview-total { border-top: 1px solid #b9cde2; margin-top: 0.5rem; padding-top: 0.45rem; }
.wmm-preview-note { opacity: 0.75; }
.wmm-preview-wait { opacity: 0.8; }

/* "Bring this contract up to date" - the everyday job for a contract that is
   already on file, so it sits at the top and it ADDS. "Start over", which
   replaces everything, stays collapsed underneath. */
.wmm-sched-catchup {
    background: var(--financial-bg-info);
    border-left: 5px solid var(--financial-primary);
    border-radius: 0.3rem; padding: 0.9rem 1rem; margin-bottom: 0.75rem;
}
.wmm-sched-catchup-head {
    font-weight: 800; color: var(--financial-primary); margin-bottom: 0.4rem;
}
.wmm-sched-catchup .wmm-sched-preview { background: #fff; }

/* The one-thing-left card on the Dashboard (Register 84). Navy, not yellow:
   yellow means a box needs filling in, and this is a signpost, not a field. */
.wmm-dash-permission {
    border-left: 5px solid var(--financial-primary);
    background: var(--financial-bg-info);
}
/* "At Maturity" heading inside the preview panel (Mary's wording, 08/04). */
.wmm-preview-head { font-weight: 700; margin-top: 0.5rem; }

/* The settlement box (Register 91). Opens only when the status is Settled.
   Navy like the schedule preview and the dashboard card, so the three panels
   that explain rather than ask all look the same. */
.wmm-settle-box {
    background: var(--financial-bg-info);
    border-left: 5px solid var(--financial-primary);
    border-radius: 0.3rem; padding: 0.9rem 1rem; margin-top: 0.9rem;
}
.wmm-settle-head {
    font-weight: 800; color: var(--financial-primary); margin-bottom: 0.5rem;
}
.wmm-settle-sum {
    border-top: 1px solid #b9cde2; margin-top: 0.9rem; padding-top: 0.5rem;
    font-variant-numeric: tabular-nums; color: var(--financial-primary);
}
.wmm-settle-line { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.12rem 0; }
.wmm-settle-line > span { min-width: 11rem; }
.wmm-settle-line > b { min-width: 7rem; text-align: right; font-weight: 800; }
.wmm-settle-line > em { color: #5B5B54; font-style: normal; font-size: 0.95rem; }
.wmm-settle-total { border-top: 1px solid #b9cde2; margin-top: 0.3rem; padding-top: 0.35rem; }

/* The "Every 45 Days" explanation (Register 92). Full width and only shown
   when that cadence is chosen - it used to wrap into a nine-line grey ribbon
   inside the narrow "Per" column, where nobody would read it. */
.wmm-basis-note {
    background: var(--financial-bg-info);
    border-left: 4px solid var(--financial-primary);
    border-radius: 0.3rem;
    padding: 0.65rem 0.9rem;
    margin-top: 0.35rem;
    font-size: 0.98rem;
    color: var(--financial-primary);
}
.wmm-basis-sum { margin-top: 0.4rem; font-variant-numeric: tabular-nums; }
.wmm-basis-sum em { color: #5B5B54; font-style: normal; font-size: 0.98rem; }
.wmm-basis-why    { display: block; color: #5B5B54; margin-bottom: 0.3rem; }
.wmm-basis-answer { display: block; font-size: 1.05rem; font-weight: 800;
                    color: var(--financial-primary); }

/* ==========================================================================
   UPDATE MY PAYMENTS          (new screen 08/04/2026, Register 93-96)
   --------------------------------------------------------------------------
   The screen it replaces put 618 controls in front of an investor whose
   question was "did my August payment arrive?". These styles exist to make
   the answer to that question the biggest thing on the page and to make the
   history underneath something she reads rather than a form she can break.

   Sizes here are deliberately larger than the rest of the site. The people
   using this are in their seventies, often on a laptop track pad.
   ========================================================================== */
.wmm-pay-lede { font-size: 1.05rem; margin-bottom: 1rem; }

.wmm-pay-crumb { color: #5B5B54; font-size: 0.98rem; margin-bottom: 0.9rem; }

.wmm-pay-card {
    background: #fff; border: 1px solid #dee2e6; border-radius: 0.5rem;
    padding: 1.5rem 1.4rem;
}
.wmm-pay-who { color: #5B5B54; font-size: 0.98rem; }
.wmm-pay-who strong { color: var(--financial-primary); font-size: 1.05rem; }
.wmm-pay-progress {
    font-size: 0.92rem; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: #5B5B54; margin-top: 0.9rem;
}
.wmm-pay-q {
    font-size: 1.45rem; font-weight: 800; color: var(--financial-primary);
    margin: 0.65rem 0 1.1rem; line-height: 1.3;
}

/* The two buttons. Large, unmissable, and the only things on the screen that
   record anything. */
.wmm-pay-btns { display: flex; gap: 1rem; flex-wrap: wrap; }
.wmm-pay-big {
    flex: 1 1 220px; min-height: 92px; border-radius: 0.5rem;
    border: 2px solid transparent; font-size: 1.15rem; font-weight: 700;
    padding: 1rem 1.2rem; cursor: pointer; text-align: left;
    display: flex; flex-direction: column; justify-content: center; gap: 0.2rem;
}
.wmm-pay-big small { font-weight: 400; font-size: 0.98rem; opacity: 0.88; }
.wmm-pay-yes { background: var(--financial-success); color: #fff; }
.wmm-pay-yes:hover { filter: brightness(1.08); }
.wmm-pay-no  { background: #fff; color: var(--financial-danger); border-color: var(--financial-danger); }
.wmm-pay-no:hover { background: var(--financial-bg-danger); }

.wmm-pay-foot { margin-top: 1rem; font-size: 0.98rem; color: #5B5B54; }

/* When the contract's own terms and what she was last paid disagree. Amber:
   money owed / worth checking, not danger. */
.wmm-pay-mismatch {
    margin-top: 1rem; background: var(--financial-bg-warning);
    border-left: 4px solid var(--financial-warning);
    border-radius: 0.3rem; padding: 0.75rem 0.95rem; font-size: 0.98rem;
}

/* The three plain choices, for a first entry or a long gap. */
/* REBUILT 08/04/2026 (Register 98-99). Mary photographed this screen with
   the three answers strung across one line and the date box floating beside
   them - the browser was still running an older style.css. The markup is
   block-level on its own now, so the worst a missing stylesheet can do is
   make it plain. It cannot make it unreadable.

   :has() is no longer load-bearing either. It selects the chosen answer and
   reveals the date box, and both of those are also done in JavaScript by
   adding .is-chosen - so an older browser that does not understand :has()
   still shows the date field the moment she picks that answer. */
.wmm-pay-choices { margin: 0.5rem 0 1.1rem; }
.wmm-pay-choice {
    display: block; border: 1px solid #dee2e6; border-radius: 0.45rem;
    padding: 0.85rem 1rem; margin-bottom: 0.5rem;
    font-size: 1.05rem;
}
.wmm-pay-choice > label {
    display: flex; align-items: flex-start; gap: 0.6rem;
    cursor: pointer; margin: 0;
}
.wmm-pay-choice input { margin: 0.25rem 0 0; flex: 0 0 auto; }
.wmm-pay-choice:has(input:checked),
.wmm-pay-choice.is-chosen {
    border-color: var(--financial-primary); background: #f7fafd;
}
.wmm-pay-follow { display: none; margin: 0.6rem 0 0 1.7rem; max-width: 260px; }
.wmm-pay-choice:has(input:checked) .wmm-pay-follow,
.wmm-pay-choice.is-chosen .wmm-pay-follow { display: block; }
.wmm-pay-money { margin-top: 0.4rem; }

/* Choosing between contracts. Only ever shown when she has more than one. */
.wmm-pay-pick {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    border: 1px solid #dee2e6; border-radius: 0.45rem;
    padding: 0.9rem 1rem; margin-bottom: 0.6rem;
    text-decoration: none; color: inherit; background: #fff;
}
.wmm-pay-pick:hover { border-color: var(--financial-primary); background: #f7fafd; }
.wmm-pay-pick strong { display: block; color: var(--financial-primary); font-size: 1.05rem; }
.wmm-pay-pick small { color: #5B5B54; }
.wmm-pay-due { color: var(--financial-danger); font-weight: 800; white-space: nowrap; }
.wmm-pay-ok  { color: var(--financial-success); font-weight: 700; white-space: nowrap; }

/* YOUR PAYMENTS - AND EVERY ONE OF THEM CAN BE CHANGED.
                                        08/04/2026  ·  Register 101
   A list she reads, with one plain "Change" on each line that opens the
   answer for that one date. Nothing here deletes: Change is an UPDATE of a
   row she owns, and removal is not offered at all.

   The rows wrap on a narrow screen rather than squeezing four columns into
   a phone. min-width with flex-wrap, not a table - a table of four columns
   on a 380px screen is unreadable at any font size. */
.wmm-pay-hist { margin-top: 1.7rem; }
.wmm-pay-hist-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 1rem; flex-wrap: wrap;
    border-bottom: 1px solid #dee2e6; padding-bottom: 0.4rem;
}
.wmm-pay-hist-title { font-weight: 800; color: var(--financial-primary); font-size: 1.05rem; }
.wmm-pay-hist-row {
    display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap;
    padding: 0.6rem 0.2rem; border-bottom: 1px solid #f1f2f4;
    font-variant-numeric: tabular-nums; font-size: 1.02rem;
}
.wmm-pay-hist-row .d { min-width: 7rem; font-weight: 600; }
.wmm-pay-hist-row .a { min-width: 9rem; font-weight: 600; }
.wmm-pay-hist-row .m { min-width: 5rem; color: #5B5B54; }
.wmm-pay-hist-row .x { margin-left: auto; }
.wmm-pay-hist-row.is-changing { background: #f7fafd; }
.wmm-pay-kind { font-style: normal; font-size: 0.95rem; color: #5B5B54; }
.wmm-pay-missed { color: var(--financial-risk); font-weight: 800; }
.wmm-pay-flagged { background: var(--financial-bg-warning); }

/* "Change" is a real target, not a 12px link: an older hand on a trackpad
   has to be able to hit it. Underlined as well as coloured, because colour
   alone is not a signal everybody can see. */
.wmm-pay-change {
    display: inline-block; padding: 0.3rem 0.9rem;
    border: 1px solid var(--financial-primary); border-radius: 0.3rem;
    color: var(--financial-primary); text-decoration: none;
    font-weight: 700; font-size: 0.98rem; background: #fff;
}
.wmm-pay-change:hover, .wmm-pay-change:focus {
    background: var(--financial-primary); color: #fff; text-decoration: none;
}

.wmm-pay-fix {
    background: var(--financial-bg-info);
    border: 1px solid #b9cde2; border-left: 5px solid var(--financial-primary);
    border-radius: 0.4rem; padding: 1rem 1.1rem; margin: 0.2rem 0 0.9rem;
}
.wmm-pay-fix-q {
    font-weight: 800; color: var(--financial-primary);
    font-size: 1.1rem; margin-bottom: 0.7rem;
}
.wmm-pay-fix-btns {
    display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center;
    margin-top: 0.9rem;
}
.wmm-pay-fix-btns .btn { font-size: 1rem; padding: 0.55rem 1.1rem; font-weight: 700; }
.wmm-pay-fix-flag { border-top: 1px solid #b9cde2; margin-top: 0.9rem; padding-top: 0.7rem; }

/* The "no" half of a two-answer question. Outlined rather than filled: both
   answers are equally acceptable, so neither should look like the one the
   website is pushing her towards. */
.btn-wmm-outline {
    background: #fff; color: var(--financial-primary);
    border: 2px solid var(--financial-primary);
}
.btn-wmm-outline:hover, .btn-wmm-outline:focus {
    background: var(--financial-primary); color: #fff;
}

/* ==========================================================================
   "DID YOUR MONEY COME BACK?"          08/04/2026  ·  Register 97
   --------------------------------------------------------------------------
   The fulfilment question on Finish a Contract. Same navy panel as the
   settlement box beneath it, because they are the two halves of one screen -
   the contract completing, and anything negotiated afterwards.

   Navy, never yellow. On this site yellow means "this box still needs you",
   and this panel is a question she may quite correctly leave alone.
   ========================================================================== */
.wmm-finish-box {
    background: var(--financial-bg-info);
    border-left: 5px solid var(--financial-primary);
    border-radius: 0.3rem; padding: 0.9rem 1rem; margin-bottom: 1rem;
}
.wmm-finish-head {
    font-weight: 800; color: var(--financial-primary); margin-bottom: 0.5rem;
    font-size: 1.05rem;
}
/* The fields stay visible but stand back until she ticks the box, so the
   panel reads as one question rather than a form she has to fill in. */
.wmm-finish-fields { opacity: 0.55; transition: opacity 0.15s ease-in-out; }
.wmm-finish-box.is-finishing .wmm-finish-fields { opacity: 1; }
.wmm-finish-post {
    border-top: 1px solid #b9cde2; margin-top: 0.8rem; padding-top: 0.6rem;
}
.wmm-finish-subq { font-weight: 700; color: var(--financial-primary); margin-bottom: 0.35rem; }
.wmm-finish-hint { font-size: 0.98rem; color: #5B5B54; margin-top: 0.3rem; }
.wmm-finish-note { font-size: 0.98rem; color: var(--financial-primary); margin-top: 0.8rem; }

/* The two buckets under Payments Not Received.   08/04/2026 · Register 105
   Mary: "it needs to be for both buckets so it works for all investors."
   Term money and post-maturity money are not the same kind of money, and
   for an investor past her Maturity Date one lump answers neither question
   she has. Quiet, tabular, and clearly subordinate to the total above it -
   this is the total broken open, not two more figures competing with it. */
.wmm-kpi-split {
    border-top: 1px solid #e6e8ea; margin-top: 0.6rem; padding-top: 0.5rem;
    font-variant-numeric: tabular-nums;
}
.wmm-kpi-split-line {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 0.6rem; font-size: 0.98rem; color: #5B5B54; padding: 0.15rem 0;
}
/* Both halves stay on one line each. A label broken across three lines
   ("In the / contract / term") is harder to read than a shorter one. */
.wmm-kpi-split-line > span { white-space: nowrap; }
.wmm-kpi-split-line > b {
    font-weight: 800; color: var(--financial-primary); white-space: nowrap;
}
.wmm-kpi-split-line em { font-style: normal; font-weight: 600; opacity: 0.7; }

/* ==========================================================================
   READABILITY — added 08/16/2026. Mary: "are these readable to a 70 year
   old?" An audit found helper/label text as small as ~11px and a muted-gray
   that fails contrast on this page's off-white background. Approved
   mockup (readability_mockup.png): raise the small-text floor, open up
   line spacing, and darken the muted gray — colors that carry meaning
   (warning/risk/danger) are untouched; a separate contrast-only mockup for
   those was reviewed and rejected ("let's keep what we have").
   ========================================================================== */
body {
  line-height: 1.55;
}

/* Bootstrap's own .text-muted rule ships with !important, so the override
   needs it too, and this file loads after bootstrap.min.css in both
   includes/header.php and admin/includes/admin_header.php so it wins. */
.text-muted {
  color: #5B636B !important;
}

/* Bootstrap's `small { font-size: .875em }` has no !important, so a plain
   rule here is enough to win by load order alone. */
small, .small {
  font-size: 0.9rem;
}

/* ==========================================================================
   ADDED 08/19/2026 - "Resave"/re-certification notices
   --------------------------------------------------------------------------
   Shared by wizard/step2_investor.php, wizard/step4_contracts.php, and
   wizard/payments.php. Reuses the site's existing .alert-warning colors
   (see "Bootstrap's stock alert colors, remapped" above) - this class only
   adds a bit of margin so the notice doesn't crowd the Save button right
   below it. No new color introduced.
   ========================================================================== */
.wmm-resave-note {
  margin: 14px 0 18px 0;
  font-size: .92rem;
}

/* Document-upload attestation checkbox (wizard/step5_documents.php) - a
   light background so the required checkbox reads as its own distinct
   block, not just another form-check floating in the page. */
.wmm-upload-attest {
  background: #f4f6fa;
  border: 1px solid #dbe2ea;
  border-radius: .4rem;
  padding: .7rem 1rem .7rem 2.4rem;
}

/* ---- My Permission: the receipt ---------------------------------------
   ADDED 08/31/2026 (Batch 93). Four classes, used only by
   wizard/step8_certification.php when permission is already on file.

   Mary, 08/31/2026, on what that page is: "they are attesting to their
   information is true and correct and i have permission to keep that on
   the site."  101 of 117 investors have done it, and until this batch the
   page showed all of them a signing form instead of saying so.

   Green, because this is the one place on the site where green means
   genuinely finished rather than "money received" - and the tick and the
   words carry the meaning on their own, so it survives a grey-scale
   printer. Nothing here depends on colour.                             */
.wmm-perm-receipt {
    border: 1px solid #A6D3AE;
    border-left: 4px solid var(--financial-success);
    background: #EFFAF1;
    border-radius: 0 8px 8px 0;
    padding: 1rem 1.15rem;
    margin-bottom: 1.5rem;
}
.wmm-perm-receipt-head {
    font-weight: 800;
    color: #1d5c25;
    font-size: 1.1rem;
    line-height: 1.35;
    margin-bottom: 0.15rem;
}
.wmm-perm-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.3rem 1.1rem;
    margin: 0.75rem 0 0;
    font-size: 1rem;
}
.wmm-perm-facts dt { color: #1d5c25; font-weight: 700; white-space: nowrap; }
.wmm-perm-facts dd { margin: 0; }
.wmm-perm-receipt-foot {
    margin: 0.85rem 0 0;
    font-size: 0.94rem;
    color: #2f5c36;
}
/* Print. SCOPED to this page only, through .wmm-perm-page on its layout
   wrapper. An earlier draft of this block hid .wmm-dash-sidebar and .btn
   with no scope at all, which would have hidden every button on every page
   of the site whenever anything was printed - including print_summary.php,
   which exists to be printed. Caught on a second read, not in production. */
@media print {
    .wmm-perm-page .wmm-dash-sidebar,
    .wmm-perm-page .btn { display: none !important; }
    .wmm-perm-page .wmm-perm-receipt { break-inside: avoid; page-break-inside: avoid; }
    .wmm-perm-page .card { break-inside: avoid; page-break-inside: avoid; }
}


/* ---- My Permission: the record summary --------------------------------
   ADDED 08/31/2026 (Batch 93), second pass.

   Mary: "it doesn't look like it was designed by a senior ux designer."
   She was right about the first build. It reused the old page's treatment -
   five identical uppercase grey headings stacked over bullet lists - which
   is a data dump wearing labels.

   WHAT THIS IS INSTEAD. The page shows one thing: a record, and what part
   of it a signature covers. A record reads as label-then-value, so it is
   set as a two-column list - the label in a fixed left column, the content
   beside it - with a hairline between sections. The eye runs down the
   labels and stops at the one it wants, instead of scanning five identical
   grey shouts.

   The label column collapses above the content on a narrow screen.       */
.wmm-rec {
    display: grid;
    grid-template-columns: 10.5rem 1fr;
    gap: 0 1.5rem;
}
.wmm-rec > dt {
    font-weight: 700;
    color: var(--financial-primary);
    font-size: 0.95rem;
    padding: 0.95rem 0 0.95rem 0;
    border-top: 1px solid #ecebe4;
    line-height: 1.4;
}
.wmm-rec > dd {
    margin: 0;
    padding: 0.95rem 0;
    border-top: 1px solid #ecebe4;
    font-size: 0.96rem;
}
.wmm-rec > dt:first-of-type,
.wmm-rec > dd:nth-of-type(1) { border-top: 0; padding-top: 0.25rem; }
.wmm-rec-count {
    display: block;
    font-weight: 400;
    font-size: 0.82rem;
    color: #7d7b73;
    margin-top: 0.1rem;
}
/* the person's own name, set slightly up from the body text around it */
.wmm-rec-name { font-weight: 700; font-size: 1.02rem; color: var(--financial-primary); }
.wmm-rec-sub  { color: #5b5b54; }
/* a plain list that does not shout: no bullets, one line each */
.wmm-rec-list { list-style: none; margin: 0; padding: 0; }
.wmm-rec-list li { padding: 0.16rem 0; }
.wmm-rec-list li + li { border-top: 1px dotted #eceae2; }
/* the small grey word in front of a file name - a tag, not a sentence */
.wmm-rec-tag {
    display: inline-block;
    min-width: 7.4rem;
    color: #6f6d66;
    font-size: 0.86rem;
}
.wmm-rec-empty { color: #8a887f; }
.wmm-rec table { margin-bottom: 0.35rem; }

@media (max-width: 700px) {
    .wmm-rec { grid-template-columns: 1fr; gap: 0; }
    .wmm-rec > dt { border-top: 1px solid #ecebe4; padding-bottom: 0.15rem; }
    .wmm-rec > dd { border-top: 0; padding-top: 0; padding-bottom: 0.95rem; }
    .wmm-rec > dd:nth-of-type(1) { padding-top: 0; }
}