/* Calculator pages in 01Shared (ConvSale first), and the Settings page on top of CS/Settings.css. Same look as the home page (Home.css): keep the tokens below in step with it.
   CS/ConvSale.css is the old look, still used by the per-user copies and InspireTemplate. */
:root {
    --brand: #0a5bd6;
    --brand-dark: #07439f;
    --brand-soft: #e8f0fd;
    --ink: #13233a;
    --muted: #5b6b82;
    --line: #dce3ee;
    --field-line: #8492a6;   /* text box outlines: darker than --line so they're easy to see */
    --bg: #e4e9f1;
    --card: #f0f3f8;   /* a soft grey so the white text boxes stand out */
    --field: #ffffff;
    --alert: #b42318;
    --alert-soft: #fdecea;
    --radius: 12px;
}

body {
    background: var(--bg);
    color: var(--ink);
    font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.calc-page *, .calc-page *::before, .calc-page *::after { box-sizing: border-box; }
.calc-page { margin: 0 auto; max-width: 1100px; padding: 20px 16px 8px; }

/* Cards and headings */
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(19, 35, 58, .06), 0 8px 24px rgba(19, 35, 58, .06);
    margin-bottom: 16px;
    padding: 18px 20px;
}
.card h2 { color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .08em; margin: 0 0 10px; text-transform: uppercase; }
.card h3 { color: var(--muted); font-size: .85rem; font-weight: 600; margin: 16px 0 6px; }
.card .lines + h2 { margin-top: 20px; }   /* a second list in the same card (Compare's three option columns) */
.hint { color: var(--muted); font-size: .82rem; margin: -4px 0 8px; }
.cols { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols > .card { margin-bottom: 16px; }
.cols.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols > *, .cc > * { min-width: 0; }

/* Text boxes, lists and choices */
.calc-page input[type=text], .calc-page input[type=password], .calc-page textarea, .calc-page select {
    background: var(--field);
    border: 1px solid var(--field-line);
    border-radius: 8px;
    color: var(--ink);
    font: inherit;
    max-width: 100%;
    min-height: 34px;
    padding: 5px 8px;
}
.calc-page input[type=text]:focus, .calc-page input[type=password]:focus, .calc-page textarea:focus, .calc-page select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
    outline: none;
}
.calc-page textarea { display: block; min-height: 64px; resize: vertical; width: 100%; }
.calc-page input[type=checkbox], .calc-page input[type=radio] { accent-color: var(--brand); height: 16px; margin: 0 5px 0 0; vertical-align: -3px; width: 16px; }
.calc-page label { cursor: pointer; }
.calc-page img:not([src]), .calc-page img[src=""] { display: none; }

/* Worked-out amounts: plain text, not boxes */
.calc-page input[type=text][readonly] { background: transparent; border-color: transparent; box-shadow: none; padding-left: 0; padding-right: 0; }

/* One item per row: label on the left, box(es) on the right */
.row { align-items: center; display: flex; gap: 6px; min-height: 38px; }
.row > :first-child { flex: 1 1 0; min-width: 0; }
.row input[type=text] { font-variant-numeric: tabular-nums; text-align: right; width: 104px; }
.row input.name { font-variant-numeric: normal; text-align: left; width: auto; }
.row input.small { width: 52px; }
.row .unit { color: var(--muted); font-size: .85rem; min-width: 30px; }
.row:not(:has(*)) { display: none; }   /* rows whose items are all hidden by the page code */
.lines .row { border-bottom: 1px solid var(--line); }
.lines .row:last-child { border-bottom: 0; }
.row.total { border-top: 2px solid var(--ink); font-size: 1.05rem; font-weight: 700; margin-top: 4px; }
.row.total input[type=text] { color: var(--brand-dark); font-size: 1.15rem; font-weight: 700; }
.row.total input.name { color: var(--ink); font-size: 1.05rem; }
.choices { align-items: center; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0; }
.choices > span { white-space: nowrap; }
.full { margin-top: 6px; width: 100%; }
.choices .full { flex: 1 1 150px; margin-top: 0; width: auto; }   /* a list on the checkbox line takes the room left (ConvSale's MI options) */
.sub-box { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; margin-top: 12px; overflow-x: auto; padding: 8px 12px; }

/* Buttons */
.calc-page input[type=submit] {
    background: var(--field);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    font-size: .9rem;
    font-weight: 500;
    min-height: 38px;
    padding: 7px 14px;
}
.calc-page input[type=submit]:hover { border-color: var(--brand); color: var(--brand-dark); }
.calc-page input[type=submit]:disabled { cursor: default; opacity: .5; }
.calc-page input.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.calc-page input.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.calc-page input.btn-step { font-weight: 700; min-height: 34px; padding: 0; width: 34px; }
.calc-page input.btn-wide { width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.actions + .actions, .actions + h2 { margin-top: 14px; }
.tools input[type=submit] { background: var(--brand-soft); border-color: transparent; color: var(--brand-dark); font-size: .85rem; min-height: 34px; }

/* The page code colours a few controls to flag something; these keep the flags, in the site's colours.
   Its inline colours beat this stylesheet, hence !important. */
.calc-page input.btn-primary[style*="background-color:Red"] { background: var(--alert) !important; border-color: var(--alert) !important; color: #fff !important; }
.calc-page input.btn-primary[style*="background-color:Blue"] { background: var(--brand) !important; }
/* Hide CC & PP turns Purple once P&I is 0 and never changes back, so it is not a useful flag */
html:not(.classic) .calc-page input[type=submit][style*="background-color:Purple"] { background: var(--card) !important; }
.calc-page select[style*="background-color:Red"] { background: var(--alert-soft) !important; border-color: var(--alert) !important; color: var(--alert); }
.calc-page select[style*="background-color:Aqua"] { background: var(--card) !important; }
.calc-page input[style*="border-color:Black"] { border-color: var(--field-line) !important; }
.calc-page input[style*="border-color:Red"] { border-color: var(--alert) !important; }
.calc-page span[style*="background-color:Aquamarine"] { background: var(--brand-soft) !important; border-radius: 4px; color: var(--brand-dark); font-weight: 600; padding: 1px 6px; }

/* Messages */
.warn { color: var(--alert); display: block; font-weight: 600; margin-bottom: 8px; }
.calc-page span[style*="color:Red"] { font-size: .85rem; }
.disclaimer { color: var(--muted); display: block; font-size: .82rem; margin: 4px 0 0; }

/* Plain tables (ARM details, income) */
.grid-table { border-collapse: collapse; width: 100%; }
.grid-table th, .grid-table td { border-bottom: 1px solid var(--line); padding: 4px 6px; text-align: left; vertical-align: middle; }
.grid-table th { color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.grid-table tr:last-child td { border-bottom: 0; }
.grid-table input[type=text] { font-variant-numeric: tabular-nums; text-align: right; width: 84px; }
.grid-table input.name { text-align: left; width: 140px; }
.grid-table input.small { width: 52px; }
.scroll { overflow-x: auto; }

.calc-page select[size], .calc-page select[multiple] { display: block; height: 300px; margin-top: 10px; width: 100%; }

/* Header: editable heading, then who it's for and the page options */
.head-title { font-size: 1.3rem !important; font-weight: 700; min-height: 44px !important; width: 100%; }
.head-row { align-items: center; display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 12px; }
.head-row .prepared { align-items: center; display: flex; gap: 8px; }
.head-row .prepared input { font-weight: 600; width: 220px; }
.head-row img { height: 22px; width: 22px; }

/* Closing costs: three columns of rows */
.cc { display: grid; gap: 8px 28px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); }
.cc .row input.name { flex: 1 1 0; min-width: 0; }
.cc .row input[type=text]:not(.name):not(.small) { width: 92px; }
.cc .row .unit { min-width: 2.6em; }  /* fits "days" so the day and month boxes line up */
.cols.top-aligned { align-items: start; }

@media (max-width: 900px) {
    .cols, .cols.two, .cc { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .calc-page { padding: 12px 10px 4px; }
    .card { padding: 14px; }
    .actions input[type=submit] { flex: 1 1 calc(50% - 8px); }
    .grid-table input[type=text] { width: 68px; }
    .row input[type=text] { width: 92px; }
}

/* New / Classic switch, top right of the header */
.look-toggle { display: inline-flex; margin-left: auto; }
.look-toggle button {
    background: var(--card);
    border: 1px solid var(--line);
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    padding: 4px 12px;
}
.look-toggle .look-new { border-radius: 999px 0 0 999px; }
.look-toggle .look-classic { border-left: 0; border-radius: 0 999px 999px 0; }
.look-toggle .look-dark { align-items: center; border-radius: 999px; display: inline-flex; margin-right: 8px; padding: 4px 8px; }
.look-toggle .look-dark .sun, html.dark .look-toggle .look-dark .moon { display: none; }
html.dark .look-toggle .look-dark .sun { display: inline; }
html.classic .look-toggle .look-dark { display: none; }   /* dark mode is for the new look only */
html:not(.classic) .look-toggle .look-new, html.dark .look-toggle .look-dark,
html.classic .look-toggle .look-classic { background: var(--brand); border-color: var(--brand); color: #fff; }
/* In the blue header bar (Site.master): outlined white like the Home button, the chosen one filled white */
.qq-topbar .look-toggle { margin-left: 0; }
.qq-topbar .look-toggle button { background: transparent; border-color: rgba(255, 255, 255, .55); color: #fff; }
.qq-topbar .look-toggle button:hover { background: rgba(255, 255, 255, .15); }
html:not(.classic) .qq-topbar .look-toggle .look-new, html.dark .qq-topbar .look-toggle .look-dark,
html.classic .qq-topbar .look-toggle .look-classic { background: #fff; border-color: #fff; color: #07439f; }

/* "Create a PDF" card: look, font, colour and language, then the PDF buttons */
.pdf-style { display: grid; gap: 12px 16px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.pdf-field > label { color: var(--muted); display: block; font-size: .78rem; font-weight: 600; letter-spacing: .04em; margin-bottom: 4px; text-transform: uppercase; }
.pdf-field select { width: 100%; }
.pdf-field .choices { margin: 6px 0 0; }
.pdf-cobrand { align-items: center; display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 12px; }
.pdf-cobrand > label { flex-basis: 100%; margin-bottom: 0; }
.pdf-cobrand select { flex: 0 1 340px; min-width: 0; }
.pdf-cobrand a { font-size: .9rem; }
.pdf-card .hint { margin: 10px 0 0; min-height: 1.2em; }
.pdf-buttons { margin-top: 14px; }

/* ---- Compact (.calc-page.compact, ConvSale first): the three top cards, the buttons and all three closing-cost
   lists fit on one screen (about 930px tall). Smaller type, tighter rows and boxes, a one-line header,
   the buttons and tools on one line. PDF and Client sit below the costs. New and dark looks only. ---- */
html:not(.classic) .compact { font-size: 13.5px; max-width: 1240px; padding-top: 12px; }
html:not(.classic) .compact .card { margin-bottom: 10px; padding: 10px 14px; }
html:not(.classic) .compact .cols { gap: 10px; }
html:not(.classic) .compact .cols > .card { margin-bottom: 10px; }
/* the blue header bar (Site.master) slimmed down to match, and as wide as the page */
html:not(.classic) body:has(.compact) .qq-topbar .qq-inner { gap: 4px 16px; max-width: 1240px; padding: 4px 16px; }
html:not(.classic) body:has(.compact) .qq-topbar .qq-name { font-size: 15px; }
html:not(.classic) body:has(.compact) .qq-topbar .qq-co, html:not(.classic) body:has(.compact) .qq-topbar .qq-contact { font-size: 13px; }
html:not(.classic) body:has(.compact) .qq-topbar .qq-right { gap: 4px 10px; }
html:not(.classic) body:has(.compact) .qq-topbar a.qq-home { font-size: 13px; padding: 2px 12px; }
html:not(.classic) body:has(.compact) .qq-topbar .look-toggle button { font-size: .75rem; padding: 2px 10px; }
html:not(.classic) body:has(.compact) .qq-topbar .look-toggle .look-dark { padding: 2px 6px; }
/* card headings stand out: brand colour, larger, underlined across the card or column */
html:not(.classic) .compact .card h2 { border-bottom: 2px solid var(--brand); color: var(--brand-dark); font-size: .84rem; font-weight: 800; letter-spacing: .06em; margin-bottom: 6px; padding-bottom: 3px; }
html:not(.classic) .compact .card h3 { font-size: .8rem; margin: 6px 0 2px; }
html:not(.classic) .compact .hint { font-size: .78rem; margin: -2px 0 2px; }
html:not(.classic) .compact input[type=text], html:not(.classic) .compact input[type=password],
html:not(.classic) .compact select { border-radius: 6px; height: 19px; font-size: 13px; line-height: 17px; min-height: 0; padding: 0 5px; }   /* 19px boxes, like the live site */
html:not(.classic) .compact select { font-size: 12.5px; line-height: normal; padding-bottom: 0; padding-top: 0; }   /* lists ignore line height and size to the font: Segoe UI at 13.5px needs 18px and is clipped in a 19px box */
html:not(.classic) .compact input[type=text][readonly] { padding-left: 0; padding-right: 0; }
html:not(.classic) .compact .row { gap: 5px; min-height: 21px; }
html:not(.classic) .compact .row input[type=text] { width: 92px; }
html:not(.classic) .compact .row input.name { width: auto; }
html:not(.classic) .compact .row input.small { width: 44px; }
html:not(.classic) .compact #lblS { min-width: 0; }   /* the $ sits right next to the Sales Price box */
html:not(.classic) .compact #txtIntRate { width: 58px; }   /* room for rates like 6.875 */
html:not(.classic) .compact .row.total { font-size: 1rem; margin-top: 2px; }
html:not(.classic) .compact .row.total input[type=text] { font-size: 1.05rem; }
html:not(.classic) .compact .row.total input.name { font-size: 1rem; }
html:not(.classic) .compact .row.total input[type=text] { height: 22px; line-height: 20px; }   /* the larger bold totals need a little more than 19px */
html:not(.classic) .compact .choices { gap: 4px 12px; margin: 6px 0; }
html:not(.classic) .compact .card > .choices:last-child { margin-bottom: 0; }   /* no gap under the checkbox + MI options line at the foot of the Loan card */
html:not(.classic) .compact input[type=checkbox], html:not(.classic) .compact input[type=radio] { height: 14px; width: 14px; }
html:not(.classic) .compact input[type=submit] { font-size: .85rem; min-height: 30px; padding: 4px 11px; }
html:not(.classic) .compact input.btn-step { height: 19px; min-height: 0; padding: 0; width: 22px; line-height: 1; }
html:not(.classic) .compact .actions { gap: 6px; }
/* header: heading, prepared for and Conforming/Jumbo on one line */
html:not(.classic) .compact #Header { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 14px; }
html:not(.classic) .compact .head-title { flex: 1 1 380px; font-size: 1.05rem !important; min-height: 32px !important; width: auto; }
html:not(.classic) .compact .head-row { margin-top: 0; order: -1; }   /* Prepared for and Conforming/Jumbo first, at the far left */
html:not(.classic) .compact .head-row .prepared input { width: 180px; }
/* buttons, then the tools after a divider, all on one line when there's room */
html:not(.classic) .compact .card:has(#Buttons) { align-items: center; display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 6px 14px; }
html:not(.classic) .compact .card:has(#Buttons) > h2 { border-left: 1px solid var(--line); border-bottom: 0; color: var(--muted); font-size: .72rem; padding-bottom: 0; margin: 0; padding-left: 10px; }
html:not(.classic) .compact .tools { margin: 0; }
html:not(.classic) .compact .tools input[type=submit] { font-size: .8rem; line-height: 1.2; min-height: 22px; padding: 2px 9px; }
html:not(.classic) .compact #Buttons input[type=submit] { line-height: 1.2; min-height: 24px; padding: 2px 11px; }   /* Calculate, Side by Side, Hide CC & PP, Main Menu: shorter to save space */
/* closing costs */
html:not(.classic) .compact .cc { gap: 0 40px; grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* three equal columns lined up with the cards above: 40px = 10px gap between cards + 2 × (14px padding + 1px border) */
html:not(.classic) .compact .cc .row input[type=text]:not(.name):not(.small) { width: 84px; }
html:not(.classic) .compact .pdf-row { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 6px; }   /* PDF, Client and Saved client estimates side by side */
@media (max-width: 900px) { html:not(.classic) .compact .pdf-row { grid-template-columns: 1fr; } }
html:not(.classic) .compact select[size], html:not(.classic) .compact select[multiple] { height: 220px; line-height: normal; padding: 4px; }   /* the old Saved clients list (calcs not yet on the shared card) keeps its height */
html:not(.classic) .compact .se-list { height: 220px; }   /* shorter saved-estimates list so that row isn't much taller than the PDF card */
html:not(.classic) .compact textarea { min-height: 52px; }
html:not(.classic) .compact .head-title + .head-row { flex: 0 1 auto; }

/* ---- Classic look: the calculator as it looked before the 2026 restyle (old CS/ConvSale.css) ----
   Same page, restyled: light blue page, plain Arial, red Calculate, blue buttons, no cards. */
html.classic body { background: #99ccff url("../ZPics/SoftBlend2.png") repeat-x; color: #000; font: 14px Arial, Helvetica, sans-serif; }
html.classic .calc-page { max-width: 780px; padding: 6px 0 0; }
html.classic .card { background: transparent; border: 0; border-radius: 0; box-shadow: none; margin-bottom: 8px; padding: 8px 16px; }
html.classic .card h2, html.classic .card h3 { color: #0000ff; font-size: 14px; font-weight: normal; letter-spacing: 0; margin: 4px 0 8px; text-transform: none; }
html.classic .card > h2 { display: none; }   /* the old page had no card headings; the closing-cost ones sit deeper and stay */
html.classic .hint { color: #0000ff; font-size: 14px; margin: -4px 0 8px; }
html.classic .cols { gap: 0; grid-template-columns: 310px 249px 221px; }
html.classic .cols.two { border-top: 3px solid #0000ff; grid-template-columns: 1fr 1fr; padding-top: 6px; }

/* Boxes: small, square, bold figures */
html.classic .calc-page input[type=text], html.classic .calc-page input[type=password],
html.classic .calc-page textarea, html.classic .calc-page select {
    border: 1px solid #767676; border-radius: 0; box-shadow: none; font: 14px Arial, Helvetica, sans-serif; min-height: 0; padding: 1px 2px;
}
html.classic .calc-page select { background: #99ccff; padding: 0; }
html.classic .calc-page input[type=text]:not([readonly]) { background: #fff; font-weight: bold; }
html.classic .calc-page input[type=text][readonly] { background: transparent; border-color: transparent; font-weight: normal; }
html.classic .calc-page input.name:not([readonly]) { background: #ccffff; border: 0; font-weight: normal; }
html.classic #ContactLeft input.name, html.classic #txtSearch { background: #fff; border: 1px solid #767676; }
html.classic .head-title { color: #cc3300; font-size: 16px !important; font-weight: bold; min-height: 24px !important; text-align: center; }
html.classic .head-row { justify-content: center; margin-top: 10px; }
html.classic .calc-page input[type=checkbox], html.classic .calc-page input[type=radio] { accent-color: auto; height: 13px; margin: 0 2px 0 0; width: 13px; }

/* Rows: tight, no lines */
html.classic .row { gap: 4px; min-height: 19px; }
html.classic .row input[type=text] { height: 18px; width: 70px; }
html.classic .row input.small { width: 30px; }
html.classic .row .unit { color: #0000ff; font-size: 14px; min-width: 0; }
html.classic .lines .row { border-bottom: 0; }
html.classic .row.total { border-top: 0; font-size: 14px; margin-top: 14px; }
html.classic .row.total > :first-child, html.classic .row.total input.name { color: #0000ff; font-size: 14px; font-weight: bold; }
html.classic .row.total input[type=text] { color: #000; font-size: 14px; font-weight: bold; }
html.classic .choices { gap: 2px 10px; margin: 4px 0; }
html.classic .full { margin-top: 2px; width: auto; }
html.classic .sub-box { background: transparent; border: 2px ridge #ccc; border-radius: 0; padding: 4px 8px; }
html.classic .cc { gap: 0 24px; }
html.classic .cc .row input[type=text]:not(.name):not(.small) { border: 0; width: 50px; }
html.classic .grid-table th, html.classic .grid-table td { border-bottom: 0; color: #000; font-size: 14px; font-weight: normal; letter-spacing: 0; padding: 1px 2px; text-transform: none; }
html.classic .grid-table input[type=text] { height: 18px; width: 56px; }

/* Buttons: blue bars, red Calculate */
html.classic .calc-page input[type=submit] {
    background: #3399ff; border: 2px solid #3399ff; border-radius: 0; color: #fff; font: bold 13px Arial, Helvetica, sans-serif; min-height: 0; padding: 2px 10px;
}
html.classic .calc-page input[type=submit]:hover { color: #fff; }
html.classic #Buttons input[type=submit], html.classic .calc-page input.btn-primary { background: #0000ff; border-color: #0000ff; }
html.classic .calc-page input.btn-step { background: transparent; border: 0; color: #000; padding: 0; width: 14px; }
html.classic .calc-page #btnCalculate:not([style*="background-color:Blue"]) { background: #ff0000 !important; border-color: #ff0000 !important; }
html.classic .calc-page input.btn-primary[style*="background-color:Blue"] { background: #0000ff !important; border-color: #0000ff !important; }
html.classic .calc-page input[type=submit][style*="background-color:Purple"] { background: #800080 !important; border-color: #800080 !important; }
html.classic .card:has(#Buttons) { border-bottom: 3px solid #0000ff; border-top: 3px solid #0000ff; padding: 8px 10px 4px; }
html.classic #Buttons { justify-content: space-between; }
html.classic .actions { gap: 6px; }
html.classic .tools { border-top: 3px solid #0000ff; justify-content: center; margin: 8px -10px 0; padding-top: 4px; }
html.classic .tools input[type=submit] { background: #3399ff; border: 2px ridge #cc3300; font-size: 8pt; font-weight: normal; padding: 1px 6px; }
html.classic .warn { color: #990000; text-align: center; }
html.classic .disclaimer { color: #000; font-size: 14px; }
html.classic .pdf-field > label { color: #0000ff; font-size: 14px; font-weight: normal; letter-spacing: 0; text-transform: none; }
html.classic .pdf-card .hint { color: #000; margin: 10px 0 8px; }
html.classic .pdf-buttons { justify-content: flex-start; }
html.classic .pdf-row { display: block; border-top: 0; padding-top: 0; }   /* classic keeps PDF and Client stacked full width */

@media (max-width: 820px) {
    html.classic .cols, html.classic .cols.two { grid-template-columns: 1fr; }
}

/* ---- Side by Side (Compare), classic: the old CS/Comp.css page ----
   Three coloured columns, 244px of content each, every row a fixed height so the Calculate buttons line up across them.
   .classic-only is shown only in this look (the old page's extra "(optional field)", Main Menu and "Printing in");
   .new-only only in the new one. */
.classic-only { display: none; }
html.classic .classic-only { display: inline-block; }
html.classic .new-only { display: none; }

html.classic .cmp-page { max-width: 793px; padding-top: 0; }
html.classic .cmp-page #Header { padding: 8px 6px 0; text-align: center; }
html.classic .cmp-page .head-title { color: #cc3300; display: block; font-size: 16px !important; font-weight: normal; height: 24px; margin: 0 auto; min-height: 0 !important; width: 662px; }
html.classic .cmp-page .head-row { gap: 0 10px; justify-content: center; margin-top: 10px; }
html.classic .cmp-page .prepared { color: #0000ff; }
html.classic .cmp-page .prepared input { color: #0000ff; font-weight: normal; text-align: center; width: 344px; }
html.classic .cmp-page .head-row .choices { font-size: small; }
html.classic .cmp-page #Header .head-row:last-of-type input[type=submit] { background: #0000cc; border: 0; font-size: 13px; height: 20px; padding: 0; width: 110px; }
html.classic .cmp-page #Header select { background: #99ccff; font-size: 14px; }

html.classic .cmp-page .cols { grid-template-columns: repeat(3, 258px); justify-content: center; margin: 0 auto; }
html.classic .cmp-page .cols > .card { margin: 0; min-height: 892px; padding: 14px 0 0 14px; }
html.classic .cmp-page #Left { background: #66ffff; --tint: #66ffff; }
html.classic .cmp-page #Middle { background: #ffffcc; --tint: #ffffcc; }
html.classic .cmp-page #Right { background: #cc99ff; --tint: #cc99ff; }
html.classic .cmp-page .cols .choices { font-size: 14px; gap: 0 8px; margin: 0; width: 244px; }
html.classic .cmp-page .cols .choices .check { margin: 0; white-space: nowrap; }

/* one line per row, the same height in every column; labels 136px, boxes 77px, as before */
html.classic .cmp-page .cols .row { gap: 0; height: 22px; min-height: 22px; width: 244px; }
html.classic .cmp-page .cols .row > :first-child { flex: 0 0 136px; width: 136px; }
html.classic .cmp-page .cols .row input[type=text] { height: 20px; width: 77px; text-align: right; font-weight: bold; padding: 0 1px; }
html.classic .cmp-page .cols .row input.name { font-size: 16px; font-weight: normal; text-align: center; width: 217px; color: #0000ff; background: #fff; border: 1px solid #767676; margin-bottom: 18px; }
html.classic .cmp-page .cols .row:has(input.name) { height: auto; min-height: 0; }
html.classic .cmp-page .cols .row .unit { flex: 0 0 10px; width: 10px; }
html.classic .cmp-page .cols .row:has(.unit) > :first-child { flex-basis: 122px; width: 122px; }
html.classic .cmp-page .cols .row input.small { width: 44px; }
html.classic .cmp-page .cols .row input.btn-step { background: var(--tint); color: #000; font-size: 16px; height: 16px; margin-left: 3px; order: 2; width: 14px; }
html.classic .cmp-page .cols .row input.btn-step[value="+"] { font-size: 12px; order: 3; }
html.classic .cmp-page .cols .row:has(.btn-step) input.small { order: 1; }
html.classic .cmp-page .cols .row:has(.btn-step) > :first-child { flex-basis: 136px; }
html.classic .cmp-page .cols .row:has(.btn-step) { gap: 0; }

/* worked-out figures and drop-downs wear the column colour, like the old page */
html.classic .cmp-page .cols input[type=text][readonly] { background: var(--tint); border: 1px solid #767676; }
html.classic .cmp-page .cols .lines .row input[type=text]:not([readonly]) { background: #fff; }
html.classic .cmp-page .cols select { background: var(--tint); border: 1px solid #767676; margin-top: 0; width: auto; }
html.classic .cmp-page .cols .actions { margin: 10px 0 12px; }
html.classic .cmp-page .cols input.btn-wide { background: #ff0000 !important; border: 0; color: #fff; font-weight: normal; height: 20px; padding: 0; width: 213px; }
html.classic .cmp-page .cols .sub-box { background: transparent; border: 2px groove #c0c0c0; height: 58px; padding: 0; width: 239px; }
html.classic .cmp-page .cols .sub-box .row { height: 20px; min-height: 20px; width: auto; }
html.classic .cmp-page .cols .sub-box .row > :first-child { flex-basis: 83px; width: 83px; }
html.classic .cmp-page .cols .lines { margin: 0; }
html.classic .cmp-page .cols .lines .row { border: 0; }
html.classic .cmp-page .cols .lines + h2 + .lines, html.classic .cmp-page .cols .calc-gap { margin-top: 0; }
html.classic .cmp-page .cols .lines { margin-bottom: 18px; }
html.classic .cmp-page .cols .row.total { border: 0; font-size: 14px; height: 24px; margin: 0; }
html.classic .cmp-page .cols .row.total > :first-child { color: #0000ff; font-weight: normal; }
html.classic .cmp-page .cols .row.total input[type=text] { color: #000; font-size: 14px; height: 22px; }
html.classic .cmp-page .cols .lines:last-of-type .row > :first-child { color: #0000ff; }

html.classic .cmp-page .card:has(#Buttons) { border-bottom: 3px solid #0000ff; border-top: 3px solid #0000ff; margin: 0; padding: 10px 0 0; }
html.classic .cmp-page #Buttons { gap: 10px; height: 40px; justify-content: flex-start; padding-left: 12px; }
html.classic .cmp-page #Buttons input[type=submit] { background: #0000cc; border: 0; font-size: 13px; height: 20px; padding: 0; width: 130px; }
html.classic .cmp-page #Buttons .classic-only { font-size: small; margin-left: 24px; }
html.classic .cmp-page .cols.two { border-top: 0; padding-top: 0; }
/* the refinance comparisons: a loan-type list tops each column, "Cash Required" is an editable label, columns are shorter */
html.classic .cmp-page .cols h2 + select, html.classic .cmp-page .cols .opt-include + select { margin-bottom: 18px; }
html.classic .cmp-page .cols .row.total > input.name { background: var(--tint) !important; border: 0 !important; color: #0000ff; flex: 0 0 136px; font-size: 14px; margin: 0; text-align: left; width: 136px; }
html.classic .cmp-page .cols .row > .check:has(+ input.small) { flex: 0 0 97px; width: 97px; }   /* "MI per mo" with its factor box beside it */
html.classic .cmp-page .cols .check + input.small { width: 30px; }
html.classic .cmp-refi .cols > .card { min-height: 815px; }
html.classic .cmp-refi .cols.two { grid-template-columns: 370px 358px; }
html.classic .cmp-page .cols .row > input.name { flex: 0 0 217px; margin-bottom: 18px; width: 217px; }
html.classic .cmp-page .cols .row input.btn-step[value="+"] { order: 2; }
html.classic .cmp-page .cols .row input.btn-step:not([value="+"]) { order: 3; }
html.classic .cmp-page .cols h2 + .choices:not(.opt-include), html.classic .cmp-page .cols .opt-include + .choices { margin-bottom: 18px; }
html.classic .cmp-page .cols .mi-line { flex-wrap: nowrap; gap: 0 8px; }
html.classic .cmp-page .cols .mi-line select { margin-left: 0; }
html.classic .cmp-page .cols .actions { margin: 6px 0 18px; }
html.classic .cmp-page .cols .row:not(:has(input)) > :first-child { flex: 1 1 auto; white-space: nowrap; width: auto; }
html.classic .cmp-page .cols .lines:last-of-type .row:not(:has(input)) { height: 29px; }

/* the client area: 403px and 358px wide, as before */
html.classic .cmp-page .cols.two { grid-template-columns: 403px 358px; justify-content: center; }
html.classic .cmp-page .cols.two > .card { margin: 0; padding: 10px 0 0 10px; }
html.classic .cmp-page #ContactLeft .row { height: 24px; min-height: 24px; }
html.classic .cmp-page #ContactLeft .row > :first-child { flex: 0 0 110px; width: 110px; }
html.classic .cmp-page #ContactLeft .row input.name { font-weight: bold; text-align: left; width: 198px; }
html.classic .cmp-page #ContactLeft .choices { gap: 0 8px; margin: 10px 0; }
html.classic .cmp-page #ContactLeft input[type=submit]:not(.btn-data) { background: #0000cc; border: 0; font-size: 13px; height: 20px; padding: 0; width: 148px; }
html.classic .cmp-page .btn-data { background: #3399ff !important; border: 1px solid #cc3300 !important; height: 26px; padding: 0; width: 150px; }
html.classic .cmp-page #ContactLeft .warn { text-align: left; width: 295px; }
html.classic .cmp-page #ContactRight textarea { height: 75px; width: 300px; }
html.classic .cmp-page #ContactRight select[size], html.classic .cmp-page #ContactRight select { width: 300px; }
html.classic .cmp-page #ContactRight .row { gap: 6px; }
html.classic .cmp-page #ContactRight .row > :first-child { flex: 0 0 auto; }
html.classic .cmp-page #ContactRight input.name { width: 127px; }
html.classic .cmp-page .data-buttons { display: block; }
html.classic .cmp-page .data-buttons input { display: block; margin-bottom: 4px; }


/* ---- Dark mode (new look only): the same page in dark colours ---- */
html.dark {
    --brand: #4d8dff;
    --brand-dark: #9cc0ff;     /* used for text (totals, tool buttons), so lighter in the dark */
    --brand-soft: #1b2d4d;
    --ink: #e4ebf5;
    --muted: #97a6bc;
    --line: #2b3a52;
    --field-line: #51647f;
    --bg: #0d1420;
    --card: #162032;
    --field: #162032;
    --alert: #ff7a6e;
    --alert-soft: #3b1f20;
    color-scheme: dark;        /* dark drop-down lists, checkboxes and scroll bars */
}
html.dark .card { box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .25); }
html.dark .calc-page input[type=text]:not([readonly]), html.dark .calc-page input[type=password],
html.dark .calc-page textarea, html.dark .calc-page select { background: #0f1828; }
html.dark .calc-page input.btn-primary, html.dark .calc-page input.btn-primary:hover { color: #fff; }
html.dark .calc-page input.btn-primary:hover { background: #2f6fe0; border-color: #2f6fe0; }
html.dark .sub-box { background: #111a2a; }
html.dark .row.total { border-top-color: var(--muted); }
html.dark .disclaimer { color: var(--muted); }
html.dark .qq-foot img.qq-ehl { background: #fff; border-radius: 6px; padding: 3px; }   /* the Equal Housing badge is drawn for white paper; the Quick Qualifier logo has its own dark version */
/* Page code sets some text back to black (e.g. after No Impounds is unticked) and some to dark red: keep it readable */
html.dark .calc-page [style^="color:Black"], html.dark .calc-page [style*=";color:Black"] { color: var(--ink) !important; }
html.dark .calc-page [style^="color:Firebrick"], html.dark .calc-page [style*=";color:Firebrick"] { color: var(--alert) !important; }

/* ---- Client app pages (ClientPage="True": App, ConvApp, FhaApp, VaApp, AppShop, AppRates) — phone first ---- */
.app-page { max-width: 640px; }
.app-page .head-title { font-size: clamp(1rem, 4.2vw, 1.3rem) !important; text-overflow: ellipsis; }   /* "Conventional Home Loan Financing" fits a 390px phone */
.app-lo { align-items: center; display: flex; flex-wrap: wrap; gap: 14px 18px; }
.app-lo > div { display: flex; flex: 1 1 200px; flex-direction: column; gap: 2px; }
.app-lo .hint { margin: 0 0 2px; }
.app-lo-name { font-size: 1.25rem; font-weight: 700; }
.app-lo-line { color: var(--muted); overflow-wrap: anywhere; }
.app-lo-line:empty { display: none; }
.app-photo { border-radius: 50%; height: 96px; object-fit: cover; width: 96px; }
.app-logo { height: auto; max-height: 64px; max-width: 160px; }
.app-tiles { display: grid; gap: 10px; }
.calc-page .app-tiles input[type=submit] { font-size: 1.1rem; font-weight: 600; min-height: 56px; width: 100%; }
.calc-page .app-tiles.lead input[type=submit]:first-child { background: var(--brand); border-color: var(--brand); color: #fff; }
.app-howto { display: block; height: auto; margin: 12px auto 0; max-width: 100%; }
html.dark .app-logo, html.dark .app-howto { background: #fff; border-radius: 8px; padding: 4px; }
.app-page .row input[type=text], .app-page .row input[type=number], .app-page .row input[type=tel], .app-page .row input[type=email] {
    font-size: 1rem; height: auto !important; max-width: 55%; min-height: 40px; width: 140px !important;   /* the page code sets fixed pixel sizes */
}
.app-page .row input.app-wide { text-align: left; width: 62% !important; }
.app-page .row > span:first-child, .app-page .row > label:first-child { width: auto !important; }
.app-page .row select { min-height: 40px; }
.app-page input[type=number] { -moz-appearance: textfield; text-align: right; }
.calc-page input.app-go { font-size: 1.05rem; margin-top: 14px; min-height: 52px; }
.app-grid { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.calc-page .app-grid input[type=submit] { min-height: 48px; width: 100%; }
.app-toggles { gap: 8px; }
.calc-page .app-toggles input.toggle { border-radius: 999px; min-height: 40px; padding: 6px 16px; }
.calc-page .app-toggles input.toggle.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.calc-page input[type=number], .calc-page input[type=tel], .calc-page input[type=email] {
    min-height: 34px; background: var(--field); border: 1px solid var(--field-line); border-radius: 8px; color: var(--ink); font: inherit; padding: 5px 8px;
}
.calc-page input[type=number]:focus, .calc-page input[type=tel]:focus, .calc-page input[type=email]:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); outline: none; }
html.dark .calc-page input[type=number], html.dark .calc-page input[type=tel], html.dark .calc-page input[type=email] { background: #0f1828; }
.app-page input[type=submit][style*="background-color:Blue"] { background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; }
.app-rates td:not(:first-child), .app-rates th:not(:first-child) { text-align: right; }
.app-rates td { font-variant-numeric: tabular-nums; padding: 8px 6px; }
.app-rates tr:nth-child(6) th { padding-top: 16px; }
/* Send App (the loan officer's page for the client app) */
.calc-page a.app-link { color: var(--brand-dark); font-weight: 600; overflow-wrap: anywhere; }
.copy-btn { background: var(--card); border: 1px solid var(--line); border-radius: 999px; color: var(--ink); cursor: pointer; flex: none; font: inherit; font-size: .85rem; font-weight: 600; padding: 6px 14px; }
.copy-btn:hover { border-color: var(--brand); color: var(--brand-dark); }
.app-qr { align-items: center; display: flex; gap: 12px; margin-top: 10px; }
.app-qr img { height: 120px; width: 120px; }
.app-steps { display: flex; flex-wrap: wrap; gap: 16px; }
.app-steps img { border: 1px solid var(--line); border-radius: 10px; height: auto; max-width: 160px; width: 45%; }

/* ---- Extra Points (Points.aspx) ---- */
.pts-title { color: var(--ink); font-size: 1.4rem; margin: 0 0 14px; }
.pts-page .head-row { margin-top: 0; }
.pts-page label.field { align-items: center; display: inline-flex; gap: 8px; }
.pts-page label.field input { font-variant-numeric: tabular-nums; text-align: right; }
.pts-page label.field input.money { width: 130px; }
.pts-page label.field input.small { width: 64px; }
.pts-table th:not(:first-child), .pts-table td:not(:first-child) { text-align: right; }
.pts-table input[type=text] { width: 92px; }
.pts-table input.small { width: 72px; }
.pts-table td:first-child { white-space: nowrap; width: 1%; }
.pts-table .pts-now { color: var(--muted); font-size: .85rem; font-weight: 600; }
.pts-table label { color: var(--muted); font-size: .85rem; }
.pts-actions { margin-top: 14px; }
html.dark .pts-title { color: #e6edf7; }

/* Classic: the old CS/Points.css page - white title on the blue page, small square boxes, worked-out figures on pale
   aqua, red Calculate, blue buttons */
html.classic .pts-page { background: #99ccff; max-width: 840px; padding: 6px 0 12px; }
html.classic .pts-page .head-row { justify-content: flex-start; }
html.classic .pts-title { color: #fff; font: 24px Arial, Helvetica, sans-serif; margin: 4px 0 8px; text-align: center; }
html.classic .pts-page .card > h2 { color: #000; display: block; font-size: 14px; margin: 6px 0 10px; }
html.classic .pts-page .card.pts-loan > h2 { display: none; }
html.classic .pts-page .card { margin-bottom: 0; padding: 4px 0; }
html.classic .pts-page label.field input.money { height: 20px; width: 66px; }
html.classic .pts-page label.field input.small { height: 20px; width: 44px; }
html.classic .pts-table { width: 100%; }
html.classic .pts-table th, html.classic .pts-table td { text-align: left !important; }
html.classic .pts-table td:first-child { width: 98px; }
html.classic .pts-table .pts-now { visibility: hidden; }
html.classic .pts-table input[type=text] { height: 20px; width: 66px; }
html.classic .pts-table input.small { width: 44px; }
html.classic .pts-table input[type=text][readonly] { background: #ccffff; border: 0; font-weight: bold; text-align: right; }
html.classic .pts-table label { color: #000; font-size: 14px; }
html.classic .pts-actions { margin-top: 12px; }
html.classic .pts-page input[type=submit] { background: #0000cc; border-color: #0000cc; height: 20px; padding: 0 10px; width: 170px; }
html.classic .pts-page #btnCalculate, html.classic .pts-page #btnCalculateX { width: 110px; }
html.classic .pts-page #btnCalculateX:not([style*="background-color:Blue"]) { background: #ff0000 !important; border-color: #ff0000 !important; }

/* ---- Interest Rate Buydown (BuyDown.aspx) ---- */
.bd-title { color: var(--ink); font-size: 1.4rem; margin: 0 0 14px; }
.bd-facts { display: block; font-variant-numeric: tabular-nums; }
.bd-types { margin-top: 0; }
.bd-types label { font-weight: 600; }
.bd-plan { display: block; margin: 0; }
.bd-table th:not(:first-child), .bd-table td:not(:first-child) { text-align: right; }
.bd-table td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bd-table td.bd-lower { color: #1a7f4b; font-weight: 600; }
.bd-sums { display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 14px 0 4px; }
.bd-sums > div > span:first-child { color: var(--muted); display: block; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.bd-figure { color: var(--ink); font-size: 1.35rem; font-variant-numeric: tabular-nums; font-weight: 700; }
.bd-page .row input.name { width: min(320px, 62%); }
.bd-blurb { line-height: 1.5; margin: 12px 0 0; max-width: 70ch; }
.bd-addcost { display: block; margin: 0; }
.bd-row { align-items: stretch; display: grid; gap: 0 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* Buydown type + Who pays, and Create a PDF + Email it, side by side */
.bd-row-choices { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }   /* six buydown types need the wider card */
.bd-row > * { min-width: 0; }
@media (max-width: 760px) { .bd-row, .bd-row-choices { grid-template-columns: 1fr; } }
html.classic .bd-row { display: block; }
.bd-page .warn { display: block; }
html.dark .bd-title, html.dark .bd-figure { color: #e6edf7; }
html.dark .bd-table td.bd-lower { color: #5fd197; }

/* Classic: the old CS/Bd.css page - the blue page with red headings, plain figures and blue buttons */
html.classic .bd-page { background: #99ccff; font: 16px Arial, Helvetica, sans-serif; max-width: 785px; padding: 6px 0 12px; }
html.classic .bd-title { color: #cc3300; font: 22px Arial, Helvetica, sans-serif; margin: 6px 0 8px; text-align: center; }
html.classic .bd-page .card { background: transparent; border: 0; box-shadow: none; margin-bottom: 0; padding: 6px 30px; }
html.classic .bd-page .card > h2 { color: #000; font-size: 14px; letter-spacing: 0; margin: 6px 0; text-transform: none; }
html.classic .bd-page .card.bd-loan { border-bottom: 3px solid #cc3300; text-align: center; }
html.classic .bd-page .card.bd-loan > h2 { display: none; }
html.classic .bd-facts { color: #cc3300; }
html.classic .bd-types { justify-content: center; }
html.classic .bd-plan, html.classic .bd-addcost { color: #cc3300; font-weight: bold; }
html.classic .bd-table { background: transparent; width: 100%; }
html.classic .bd-table th, html.classic .bd-table td { border: 0; font-size: 18px; text-align: left !important; }
html.classic .bd-table th { background: transparent; color: #000; font-size: 16px; font-weight: normal; }
html.classic .bd-table td.bd-lower { color: #000; font-weight: normal; }
html.classic .bd-sums > div > span:first-child { color: #000; font-size: 16px; font-weight: normal; letter-spacing: 0; text-transform: none; }
html.classic .bd-page .row input.name { height: 22px; width: 222px; }
html.classic .bd-figure { color: #cc3300; font-size: 18px; }
html.classic .bd-page input[type=submit] { background: #0000cc; border-color: #0000cc; color: #fff; height: 30px; padding: 0 10px; min-width: 86px; }
.bd-figure-muted { color: var(--muted) !important; }

/* ---- Saved client estimates card (Controls/SavedEstimates.ascx), on every calculator that saves ---- */
.se-status { line-height: 1.35; margin: 0 0 12px; }
.se-status strong { overflow-wrap: anywhere; }
.se-label { color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .04em; margin-right: 4px; text-transform: uppercase; }
.se-when { color: var(--muted); font-size: .85rem; white-space: nowrap; }
.se-main input[type=submit] { flex: 1 1 0; }
.se-saveas { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; margin-top: 10px; padding: 10px 12px; }
.se-saveas[hidden] { display: none; }
/* "Which Carla Bennett is this?" before saving for a name two of my clients share */
.se-who { background: var(--alert-soft); border: 1px solid #f1b8b2; border-radius: 10px; margin: 0 0 12px; padding: 10px 12px; }
.se-who[hidden] { display: none; }
html.dark .se-who { border-color: #6b2c2a; }
.se-who p { font-size: .88rem; margin: 0 0 8px; }
.se-who label { align-items: flex-start; background: var(--field); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; display: flex; gap: 8px; margin-top: 6px; padding: 7px 10px; }
.se-who label input { accent-color: var(--brand); flex: none; margin-top: 3px; }
.se-who label b { display: block; font-size: .9rem; }
.se-who label small { color: var(--muted); display: block; font-size: .78rem; overflow-wrap: anywhere; }
.se-who .actions { margin-top: 10px; }
.se-who button { background: var(--field); border: 1px solid var(--field-line); border-radius: 9px; color: var(--ink); cursor: pointer; font: inherit; font-size: .9rem; min-height: 38px; padding: 7px 14px; }
.se-who button.se-who-go { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.se-saveas label { color: var(--muted); display: block; font-size: .82rem; margin-bottom: 4px; }
.calc-page .se-saveas input.name { margin-bottom: 8px; width: 100%; }
.se-tools { align-items: center; display: flex; gap: 8px; margin-top: 14px; }
.calc-page .se-tools input[type=text] { flex: 1 1 0; min-width: 0; text-align: left; }
.se-sort { display: inline-flex; flex: none; }
.se-sort button { background: var(--field); border: 1px solid var(--line); color: var(--muted); cursor: pointer; font: inherit; font-size: .8rem; padding: 6px 10px; }
.se-sort button:first-child { border-radius: 8px 0 0 8px; }
.se-sort button:last-child { border-left: 0; border-radius: 0 8px 8px 0; }
.se-sort button[aria-pressed=true] { background: var(--brand-soft); color: var(--brand-dark); font-weight: 600; }
.se-list { background: var(--field); border: 1px solid var(--field-line); border-radius: 8px; height: 320px; margin-top: 8px; overflow-y: auto; padding: 4px; }
.se-item { align-items: baseline; background: none; border: 0; border-radius: 6px; color: var(--ink); cursor: pointer; display: flex; font: inherit; gap: 10px; padding: 5px 8px; text-align: left; width: 100%; }
.se-item[hidden] { display: none; }
.se-item:hover, .se-item:focus-visible { background: var(--brand-soft); outline: none; }
.se-item.is-current { background: var(--brand); color: #fff; }
.se-item.is-current .se-date { color: rgba(255, 255, 255, .85); }
/* The open estimate's client: their other estimates (any calculator), and the green person on client estimates in the list */
.se-cests { border-left: 3px solid #15803d; display: block; margin: 6px 0 2px; padding: 2px 0 2px 10px; }
.se-cests-head { color: var(--muted); display: block; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.se-cest { color: var(--brand); display: block; font-size: .88rem; overflow-wrap: anywhere; padding: 2px 0; text-decoration: none; }
a.se-cest:hover { text-decoration: underline; }
.se-cest.is-open { color: var(--ink); }
.se-cest em { color: var(--muted); font-size: .78rem; font-style: normal; }
.se-cest-all { color: var(--muted); display: inline-block; font-size: .82rem; margin-top: 2px; }
.se-ic { fill: none; flex: none; height: 14px; margin-right: 5px; stroke: #15803d; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; vertical-align: -2px; width: 14px; }
html.dark .se-ic { stroke: #4ade80; }
.se-item.is-current .se-ic { stroke: #fff; }
.se-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.se-date { color: var(--muted); flex: none; font-size: .82rem; font-variant-numeric: tabular-nums; }
.se-none { margin: 8px 0 0; }
.se-more { border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 12px; padding-top: 8px; }
.calc-page .se-more input[type=submit] { background: none; border: 0; color: var(--brand-dark); font-size: .85rem; min-height: 30px; padding: 4px 0; }
.calc-page .se-more input[type=submit]:hover { text-decoration: underline; }
.calc-page .se-more input.se-danger { color: var(--alert); }
html.dark .se-saveas { background: #111a2a; }
html.dark .se-list, html.dark .se-sort button { background: #0f1828; }
html.dark .se-sort button[aria-pressed=true] { background: var(--brand-soft); }
html.classic .se-list { background: #fff; border: 1px solid #767676; border-radius: 0; }
html.classic .se-item.is-current { background: #0000cc; }
html.classic .se-saveas { background: transparent; border-color: #0000ff; border-radius: 0; }
html.classic .se-more input[type=submit] { color: #0000cc; }

/* ---- Fresh look (.calc-page.compact.fresh, ConvSale first, 2026-10-14): same layout and fields, clearer colours.
   Light blue page like the old site, white cards, solid navy heading bars, black totals on a shaded band, and the
   closing costs as three cards lined up with the three above. Blue is kept for buttons. New and dark only. */
html:not(.classic):not(.dark):has(.calc-page.fresh) {
    --bg: #cfe2f7; --card: #ffffff; --line: #e3e6ea; --field-line: #a4adb9;
    --ink: #1c2633; --muted: #5f6b7a; --brand: #0a5bd6; --brand-dark: #0a3f94; --brand-soft: #e7eefb;
    --bar: #1f3c6b; --card-line: #b7cbe3; --card-shadow: rgba(18, 53, 127, .10); --total-bg: #f0f2f5; --total-line: #1f3c6b;
    --btn-line: #c3c9d2; --title: #1f3c6b; --sub: #1f3c6b; --topbar: #1f3c6b;
}
html.dark:has(.calc-page.fresh) {
    --bg: #0e1828; --card: #172335; --field: #0f1828; --line: #263650; --field-line: #4b5f7d;
    --ink: #e6edf7; --muted: #9aabc3; --brand: #4d8dff; --brand-dark: #9cc0ff; --brand-soft: #1b2d4d;
    --bar: #2d538f; --card-line: #2b3d5a; --card-shadow: rgba(0, 0, 0, .45); --total-bg: #1f2d44; --total-line: #7f9cc9;
    --btn-line: #3a4d6b; --title: #cfe0ff; --sub: #a9c4ef; --topbar: #13284d;
}
html:not(.classic) body:has(.fresh) .qq-topbar { background: var(--topbar); }
html:not(.classic) .fresh .card { border-color: var(--card-line); border-radius: 8px; box-shadow: 0 1px 3px var(--card-shadow); }
html:not(.classic) .fresh .card h2 { background: var(--bar); border: 0; border-radius: 5px; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 0; margin: 0 0 6px; padding: 3px 10px; text-transform: none; }
html:not(.classic) .fresh .card:has(#Buttons) > h2 { background: none; color: var(--muted); font-size: 12px; padding: 0 0 0 10px; }
html:not(.classic) .fresh .card h3 { color: var(--sub); font-weight: 700; }
html:not(.classic) .fresh input[type=text]:not([readonly]), html:not(.classic) .fresh select { border-radius: 4px; }
html:not(.classic) .fresh .row.total { background: var(--total-bg); border-radius: 0 0 4px 4px; border-top: 2px solid var(--total-line); margin: 2px -6px 0; padding: 0 6px; }
html:not(.classic) .fresh .row.total > *, html:not(.classic) .fresh .row.total input[type=text] { color: var(--ink); }
html:not(.classic) .fresh .head-title { color: var(--title); font-weight: 700 !important; text-align: center; }
html:not(.classic) .fresh .tools input[type=submit], html:not(.classic) .fresh #Buttons input[type=submit]:not(.btn-primary) { background: transparent; border: 1px solid var(--btn-line); color: var(--ink); }
html:not(.classic) .fresh .tools input[type=submit]:hover, html:not(.classic) .fresh #Buttons input[type=submit]:not(.btn-primary):hover { border-color: var(--brand); color: var(--brand-dark); }
/* small labels in the PDF and saved-estimate cards: Title Case like the headings, not spaced capitals */
html:not(.classic) .fresh .pdf-field > label, html:not(.classic) .fresh .se-label, html:not(.classic) .fresh .se-cests-head { color: var(--ink); font-size: 13px; letter-spacing: 0; text-transform: none; }
/* closing costs: each column is its own card; the 10px gap matches the cards above so the columns line up */
html:not(.classic) .fresh .cc { background: transparent; border: 0; box-shadow: none; gap: 10px; padding: 0; }
html:not(.classic) .fresh .cc > .lines { background: var(--card); border: 1px solid var(--card-line); border-radius: 8px; box-shadow: 0 1px 3px var(--card-shadow); padding: 10px 14px; }
/* Hide/View CC & PP: the page code paints it Purple/Red (P&I 0, never resets), DarkRed (costs hidden) or Blue (shown);
   its text already says Hide or View, so it stays a plain outlined button like its neighbours */
html:not(.classic) .fresh input#btnViewCc[style*="background-color"] { background: transparent !important; color: var(--ink) !important; }
/* Agents: the "My agents" heading shares a line with "+ Add an agent", so its bar fills the room beside the button */
html:not(.classic) .fresh .list-head h2 { flex: 1 1 auto; margin: 0; }
/* Light: text boxes and lists a light blue so they stand out on the white cards (2026-10-20, user picked C); white while typing */
html:not(.classic):not(.dark) .calc-page.fresh :is(input[type=text], input[type=number], input[type=tel], input[type=email], textarea, select):not([readonly]) { background: #eaf2fd; border-color: #9fb6d6; }
html:not(.classic):not(.dark) .calc-page.fresh :is(input[type=text], input[type=number], input[type=tel], input[type=email], textarea, select):not([readonly]):focus { background: #fff; border-color: var(--brand); }

/* Side by side (Compare): a little room between each option's Calculate button and the "Monthly payment" heading under it */
html:not(.classic) .cmp-page .cols .card > .actions { margin: 8px 0 12px; }

/* ---- Amortization Options (Amortize.aspx, 2026-10-15): the loan and the faster way on top, what it saves beside the
   balance chart, the year-by-year table, then the PDF and email cards. Faster-way figures use --am-fast throughout. */
.am-page { --am-fast: var(--bar, #1f3c6b); --am-base: #b9c9de; --am-good: #1a7f4b; --am-good-soft: #e5f4ec; }
html.dark .am-page { --am-fast: #6f9ce0; --am-base: #3a4d6b; --am-good: #5fd197; --am-good-soft: #17332a; }
.am-title { color: var(--ink); font-size: 1.4rem; margin: 0 0 14px; }
.am-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 16px; }
.am-grid > .card { margin-bottom: 0; min-width: 0; }
.am-page .lines .row input[type=text] { width: 120px; }
.am-page .lines .row input.small { width: 64px; }
.am-page .lines .row input.am-name { text-align: left; width: 180px; }
.am-pi { color: var(--muted); display: block; font-size: .9rem; margin-top: 8px; }
.am-pi strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.am-choice { border-bottom: 1px solid var(--line); padding: 4px 0 8px; }
.am-choice:last-of-type { border-bottom: 0; margin-bottom: 8px; }
.am-choice label { font-weight: 600; }
.am-inline { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 6px 22px; }
.am-inline input[type=text] { font-variant-numeric: tabular-nums; text-align: right; width: 104px; }
.am-inline input.small { width: 64px; }
.am-inline input[disabled] { opacity: .5; }
.am-choice .hint { margin: 0 0 0 22px; }
.am-problem { margin: -4px 0 16px; }
.am-tiles { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 4px 0 14px; }
.am-tile { background: var(--am-good-soft); border-radius: 8px; padding: 10px 12px; }
.am-tile:last-child { background: var(--total-bg, #f0f2f5); }
.am-tile span { color: var(--muted); display: block; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.am-tile strong { color: var(--am-good); display: block; font-size: 1.15rem; white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 1.25; margin-top: 2px; }
.am-tile:last-child strong { color: var(--ink); }
.am-side th:not(:first-child), .am-side td:not(:first-child) { text-align: right; }
.am-side th { text-transform: none; letter-spacing: 0; font-size: .82rem; }
.am-side td { font-variant-numeric: tabular-nums; }
.am-side th.am-faster, .am-side td.am-faster { color: var(--am-fast); font-weight: 700; }
.am-blurb { color: var(--ink); font-size: .9rem; line-height: 1.5; margin: 12px 0 0; }
.am-legend { display: flex; flex-wrap: wrap; font-size: .85rem; gap: 4px 18px; margin: 2px 0 6px; }
.am-key { border-radius: 2px; display: inline-block; height: 10px; margin-right: 6px; vertical-align: 0; width: 12px; }
.am-key-base { background: var(--am-base); }
.am-key-faster { background: var(--am-fast); }
.am-chart-card { display: flex; flex-direction: column; }
.am-plot { flex: 1 1 auto; margin: 4px 0 20px 62px; min-height: 240px; position: relative; }
.am-plot svg { display: block; height: 100%; inset: 0; position: absolute; width: 100%; }
.am-plot .am-ylab, .am-plot .am-xlab { color: var(--muted); font-size: 11px; line-height: 1; position: absolute; white-space: nowrap; }
.am-plot .am-ylab { right: calc(100% + 8px); transform: translateY(-50%); }
.am-plot .am-xlab { top: calc(100% + 6px); transform: translateX(-50%); }
.am-plot .am-gl { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.am-plot .am-axis { stroke: var(--muted); }
.am-plot .am-hit { fill: transparent; }
.am-plot g:hover .am-hit { fill: var(--brand-soft); }
.am-plot .am-bar-base { fill: var(--am-base); }
.am-plot .am-bar-faster { fill: var(--am-fast); }
.am-years { display: grid; gap: 0 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.am-ytable th:not(:first-child), .am-ytable td:not(:first-child) { text-align: right; }
.am-ytable th { font-size: .72rem; }
.am-ytable td { font-variant-numeric: tabular-nums; padding-bottom: 3px; padding-top: 3px; }
.am-ytable td.am-faster, .am-ytable th.am-faster { color: var(--am-fast); }
.am-ytable td.am-gain { color: var(--am-good); font-weight: 600; }
.am-ytable tr.am-payoff td { background: var(--am-good-soft); }
.am-tag { background: var(--am-good); border-radius: 4px; color: #fff; font-size: .68rem; font-weight: 700; margin-left: 4px; padding: 1px 5px; vertical-align: 1px; white-space: nowrap; }
html.dark .am-tag { color: #0e1828; }
.am-email .row input.name { width: min(320px, 70%); }
@media (max-width: 860px) {
    .am-grid, .am-years { grid-template-columns: minmax(0, 1fr); }
    .am-tiles { grid-template-columns: minmax(0, 1fr); }
}
/* Classic: the old site's blue page; cards stay plain */
html.classic .am-page { background: #99ccff; padding: 6px 12px 12px; }
html.classic .am-title { color: #cc3300; font: 22px Arial, Helvetica, sans-serif; text-align: center; }

/* ---- The way back on the Tools pages (Controls/ToolNav.ascx: Amortize, BuyDown, Points, 2026-10-16): the title on the
   left, "Back to <calculator>" and "Main Menu" on the right, so the LO never has to scroll to the bottom to leave. */
.tool-head { align-items: center; display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: space-between; margin: 0 0 14px; }
.tool-head h1 { margin: 0 !important; }
.tool-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-nav a { background: var(--card); border: 1px solid var(--btn-line, var(--line)); border-radius: 6px; color: var(--ink); font-size: .9rem; font-weight: 600; line-height: 1.2; padding: 7px 14px; text-decoration: none; white-space: nowrap; }
.tool-nav a:hover { border-color: var(--brand); color: var(--brand-dark); }
.tool-nav a.tool-back { background: var(--brand); border-color: var(--brand); color: #fff; }
.tool-nav a.tool-back:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
html.classic .tool-head { justify-content: center; }
html.classic .tool-nav a { background: #0000cc; border-color: #0000cc; border-radius: 0; color: #fff; font: 14px Arial, Helvetica, sans-serif; padding: 5px 12px; }

/* ---- Rent vs. Own (01Shared/Rent.aspx, 2026-10-16): uses the Amortize cards, tiles and chart (.am-*) with these extras:
   the "US averages" table of growth rates, the two chart lines and the year table. */
.rv-page { --rv-rent: #cd5f28; --rv-pay: var(--am-fast); }
html.dark .rv-page { --rv-rent: #f0925c; }
.rv-key-rent { background: var(--rv-rent); height: 3px; vertical-align: 3px; }
.rv-key-pay { background: var(--rv-pay); height: 3px; vertical-align: 3px; }
.am-plot .rv-line-rent, .am-plot .rv-line-pay { fill: none; stroke-linejoin: round; stroke-width: 3; vector-effect: non-scaling-stroke; }
.am-plot .rv-line-rent { stroke: var(--rv-rent); }
.am-plot .rv-line-pay { stroke: var(--rv-pay); }
.rv-market { margin: 4px 0 10px; }
.rv-mtable th:not(:first-child), .rv-mtable td:not(:first-child) { text-align: right; }
.rv-mtable th { font-size: .72rem; }
.rv-mtable td { padding-bottom: 3px; padding-top: 3px; }
.rv-pick { background: none; border: 1px solid transparent; border-radius: 4px; color: var(--brand); cursor: pointer; font: inherit; font-variant-numeric: tabular-nums; font-weight: 600; padding: 1px 6px; }
.rv-pick:hover { border-color: var(--brand); }
.rv-market .hint { margin: 6px 0 0; }
.rv-mi-end { display: block; margin: 2px 0 4px; text-align: right; }
.rv-page .am-blurb + .hint { margin-top: 8px; }
.rv-lower { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.rv-scroll { overflow-x: auto; }
.rv-table th:not(:first-child), .rv-table td:not(:first-child) { text-align: right; }
.rv-table th { font-size: .72rem; }
.rv-table td { font-variant-numeric: tabular-nums; padding-bottom: 3px; padding-top: 3px; white-space: nowrap; }
.rv-table td.am-gain { color: var(--am-good); font-weight: 600; }
.rv-table td.rv-cheaper { color: var(--am-good); font-weight: 600; }
@media (max-width: 860px) { .rv-lower { grid-template-columns: minmax(0, 1fr); } }

/* ---- FHA and VA ARMs (01Shared/Arm.aspx, 2026-10-21): the Amortize cards, tiles and chart (.am-*) with the fixed-period
   buttons and the rate and payment table. */
.arm-fixed { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; min-height: 38px; }
.arm-label { flex: 1 1 auto; }
.arm-seg { border: 1px solid var(--line); border-radius: 8px; display: inline-flex; overflow: hidden; }
.arm-seg input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.arm-seg label { background: var(--field, var(--card)); color: var(--ink); cursor: pointer; font-size: .9rem; font-variant-numeric: tabular-nums; min-width: 2.4em; padding: 6px 10px; text-align: center; }
.arm-seg label + input + label { border-left: 1px solid var(--line); }
.arm-seg input:checked + label { background: var(--brand); color: #fff; font-weight: 700; }
.arm-seg input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: -2px; }
.arm-page { --arm-up: #a4500f; --arm-up-soft: #fbeee2; }
html.dark .arm-page { --arm-up: #f2a35e; --arm-up-soft: #3a2616; }
.arm-page .am-tile { background: var(--total-bg, #f0f2f5); }
.arm-page .am-tile strong { color: var(--ink); }
.arm-page .am-tile:nth-child(2) { background: var(--arm-up-soft); }
.arm-page .am-tile:nth-child(2) strong { color: var(--arm-up); }
.arm-page .am-blurb + .hint { margin-top: 8px; }
.arm-table th:not(:first-child), .arm-table td:not(:first-child) { text-align: right; }
.arm-table th { font-size: .72rem; }
.arm-table td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.arm-table td.arm-total { font-weight: 700; }
.arm-table tr.arm-top td { background: var(--total-bg, #f0f2f5); }
/* FHA 203(k) worksheet (01Shared/Fha203K.aspx, 2026-10-21): the ARM page's look; contingency buttons in the row label,
   the sums as plain figures */
.rh-cont > span { align-items: center; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.rh-cont .arm-seg label { font-size: .8rem; min-width: 0; padding: 3px 8px; }
.rh-sums { margin-top: 10px; }
.rh-fig { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 104px; text-align: right; }
.rh-sums .row.total .rh-fig { color: var(--brand-dark); font-size: 1.15rem; }
.rh-min { display: block; margin-top: 6px; }
.rh-page .am-tile:nth-child(2) { background: var(--total-bg, #f0f2f5); }
.rh-page .am-tile:nth-child(2) strong { color: var(--ink); }
.rh-page .am-tile:nth-child(3) { background: var(--am-good-soft); }
.rh-page .am-tile:nth-child(3) strong { color: var(--am-good); }
/* Payment Table (01Shared/Table.aspx, 2026-10-21): the choices in one row over the full-width table */
.tb-client { margin: 12px 0 4px; }
.tb-line { color: var(--ink); font-weight: 600; margin: 0 0 10px; }
.tb-pick { align-items: center; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.tb-pick label { align-items: center; display: inline-flex; gap: 8px; }
.tb-table th, .tb-table td { text-align: right; white-space: nowrap; }
.tb-table th { font-size: .72rem; }
.tb-table td { font-variant-numeric: tabular-nums; padding-bottom: 5px; padding-top: 5px; }
.tb-table th.tb-key, .tb-table td.tb-key { color: var(--brand-dark); font-weight: 700; }
html.dark .tb-table th.tb-key, html.dark .tb-table td.tb-key { color: var(--ink); }
.tb-table tr:nth-child(odd) td { background: var(--total-bg, #f0f2f5); }
.tb-page .card .hint { margin: 10px 0 0; }
html.classic .arm-seg { border-radius: 0; }
html.classic .arm-seg input:checked + label { background: #0000cc; }

/* side-by-side pages: "Include in the PDF" on the Option 2 and 3 cards sits on the heading line, so the rows still line up across the cards;
   a card left out of the PDF is dimmed (still editable) */
.cmp-page .cols > .card { position: relative; }
html:not(.classic) .cmp-page .opt-include { color: #fff; font-size: .8rem; margin: 0; height: 26px; position: absolute; right: 24px; top: 10px; }   /* the heading bar: 10px padding down (absolute top starts inside the border), 26px tall; .choices centers the tick in it */
html:not(.classic) .cmp-page .opt-include .check { color: inherit; margin: 0; align-items: center; display: inline-flex; line-height: 1; }
.cmp-page .card:has(.opt-include input:not(:checked)) > :not(h2):not(.opt-include) { opacity: .45; }
html.classic .cmp-page .cols > .card { padding-top: 32px; }   /* room for the tick line at the top of Options 2 and 3 */
html.classic .cmp-page .cols .opt-include { left: 14px; position: absolute; top: 6px; }

/* Beta Test Plan (01Shared/BetaTest.aspx, 2026-10-21): the plan in two cards, then the checklist by area */
.bt-page .am-blurb { margin: 0; }
.bt-intro { margin-bottom: 16px; }
.bt-p { color: var(--ink); font-size: .92rem; line-height: 1.5; margin: 8px 0; }
.bt-list { color: var(--ink); font-size: .92rem; line-height: 1.5; margin: 6px 0 8px; padding-left: 20px; }
.bt-list li { margin: 4px 0; }
.bt-progress { float: right; font-weight: 600; opacity: .9; }
.bt-areas { columns: 2 380px; column-gap: 28px; }
.bt-area { break-inside: avoid; margin: 0 0 14px; }
.bt-area h3 { color: var(--ink); font-size: .98rem; margin: 10px 0 4px; }
.bt-item { align-items: flex-start; border-bottom: 1px solid var(--line); cursor: pointer; display: flex; font-size: .9rem; gap: 10px; line-height: 1.45; padding: 7px 0; }
.bt-item input { accent-color: var(--brand); flex: none; height: 17px; margin: 2px 0 0; width: 17px; }
.bt-item:has(input:checked) span { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line); }

/* Qualifying ratios card (Controls/RatiosCard.ascx): on the six calculators below the PDF row, and on its own at /Ratios.
   Three columns: income, debts, results; the tiles turn green within the limit, red over it. */
.ra-card { --ra-good: #1a7f4b; --ra-good-soft: #e5f4ec; --ra-bad: #b42318; --ra-bad-soft: #fdecea; }
html.dark .ra-card { --ra-good: #5fd197; --ra-good-soft: #17332a; --ra-bad: #ff8a80; --ra-bad-soft: #3a1d1b; }
.ra-card .row { align-items: center; display: flex; gap: 8px; justify-content: space-between; margin: 3px 0; }
.ra-card .row > span:first-child { flex: 1; }
.ra-card .row input[type=text] { font-variant-numeric: tabular-nums; text-align: right; width: 110px; }
.ra-card .row input.small { width: 64px; }
.ra-card .row select { max-width: 240px; }
.ra-card .unit { color: var(--muted); font-size: .85rem; }
.ra-card .hint { margin: 4px 0; }
.ra-card h3 { margin-top: 10px; }
.ra-head { display: flex; flex-wrap: wrap; gap: 4px 24px; align-items: center; }
.ra-head .row { gap: 10px; }
.ra-cols { display: grid; gap: 8px 28px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ra-col .actions { margin-top: 8px; }
.ra-tiles { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 10px 0 10px; }
.ra-tile { background: var(--total-bg, #f0f2f5); border-radius: 8px; padding: 10px 12px; }
.ra-tile span { color: var(--muted); display: block; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.ra-tile strong { color: var(--ink); display: block; font-size: 1.45rem; font-variant-numeric: tabular-nums; line-height: 1.25; margin-top: 2px; }
.ra-tile small { color: var(--muted); display: block; font-size: .78rem; }
.ra-tile.ra-ok { background: var(--ra-good-soft); }
.ra-tile.ra-ok strong, .ra-tile.ra-ok small { color: var(--ra-good); }
.ra-tile.ra-over { background: var(--ra-bad-soft); }
.ra-tile.ra-over strong, .ra-tile.ra-over small { color: var(--ra-bad); }
.ra-sum { border-collapse: collapse; width: 100%; }
.ra-sum td { border-bottom: 1px solid var(--line); padding: 4px 0; }
.ra-sum td:last-child { font-variant-numeric: tabular-nums; text-align: right; }
.ra-sum tr.ra-max td { border-bottom: 0; font-weight: 700; }
.ra-empty { display: block; margin-top: 34px; }
.ra-inc { border-top: 1px solid var(--line); margin-top: 14px; max-width: 640px; padding-top: 4px; }
.ra-pick { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 8px; }
.ra-years input[type=text] { font-variant-numeric: tabular-nums; text-align: right; width: 96px; }
.ra-years th { color: var(--muted); font-size: .75rem; text-align: right; }
.ra-inc .actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ra-inc-result { font-weight: 700; }
@media (max-width: 900px) { .ra-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ra-out { grid-column: 1 / -1; } }
@media (max-width: 600px) { .ra-cols { grid-template-columns: minmax(0, 1fr); } }
html.classic .ra-card .row input[type=text] { width: 100px; }
/* Classic pages: a full-width row below the client and saved-estimates boxes (they float side by side). */
.ra-classic { background: #99ccff; clear: both; padding: 8px 20px 14px; }
.ra-classic .calc-page { margin: 0; max-width: none; padding: 0; }
.ra-classic .card { margin: 0; padding: 10px 14px; }
html.classic .ra-classic .ra-card .row input[type=text] { width: 96px; }