/* Shared header and footer from 01Shared/Site.master. Loaded on every page, before the page's own styles.
   Rules use qq- classes and set their own font, colour and alignment, because older page styles set these on body. */
body { margin: 0; }

.qq-topbar {
    background: linear-gradient(135deg, #0a5bd6 0%, #07439f 100%);
    color: #fff;
    font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    text-align: left;
}
.qq-topbar .qq-inner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1100px;
    padding: 10px 16px;
}
.qq-topbar .qq-name { color: #fff; font-size: 17px; font-weight: 700; }
.qq-topbar .qq-co { color: #fff; margin-left: 8px; opacity: .85; }
.qq-topbar .qq-right { align-items: center; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.qq-topbar .qq-contact { color: #fff; font-size: 14px; opacity: .9; overflow-wrap: anywhere; }
.qq-topbar a.qq-home {
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 4px 14px;
    text-decoration: none;
}
.qq-topbar a.qq-home:hover { background: rgba(255, 255, 255, .15); }

/* Demo site only: a slim strip above the header with the way back to the sales site. */
.qq-demobar {
    background: #f1f5fb;
    border-bottom: 1px solid #d7e0ee;
    font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    text-align: left;
}
.qq-demobar .qq-demobar-inner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 0 auto;
    max-width: 1100px;
    padding: 6px 16px;
}
.qq-demobar a.qq-demobar-logo { display: inline-flex; }
.qq-demobar img { height: 24px; width: auto; }
.qq-demobar img.qq-dl-dark { display: none; }
.qq-demobar .qq-demobar-text { color: #5b6b82; }
.qq-demobar .qq-demobar-classic { display: none; }
html.classic .qq-demobar .qq-demobar-classic { display: inline; }
.qq-demobar a.qq-demobar-back { color: #0a5bd6; font-weight: 600; margin-left: auto; text-decoration: none; }
.qq-demobar a.qq-demobar-back:hover { text-decoration: underline; }
html.dark .qq-demobar { background: #141c2b; border-bottom-color: #2a3650; }
html.dark .qq-demobar img.qq-dl-light { display: none; }
html.dark .qq-demobar img.qq-dl-dark { display: inline; }
html.dark .qq-demobar .qq-demobar-text { color: #9fb0c8; }
html.dark .qq-demobar a.qq-demobar-back { color: #7db2ff; }

/* A strip across the top (QQUserPage.NoticeBarHtml): the renewal reminder (amber, red once the paid year has ended)
   or Quick Qualifier support inside a customer's site (blue). The link on the right is the action. */
.qq-notice {
    align-items: center;
    border-bottom: 1px solid;
    display: flex;
    flex-wrap: wrap;
    font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    gap: 6px 16px;
    justify-content: center;
    padding: 9px 16px;
    text-align: left;
}
.qq-notice a { border: 1px solid currentColor; border-radius: 999px; color: inherit; font-weight: 700; padding: 3px 14px; text-decoration: none; white-space: nowrap; }
.qq-notice a:hover { background: rgba(0, 0, 0, .06); }
.qq-notice-soon { background: #fff3d6; border-color: #f0d38a; color: #6b4500; }
.qq-notice-grace { background: #fdecea; border-color: #f3b8b2; color: #8f1d14; }
.qq-notice-support { background: #e8f0fd; border-color: #b9cff5; color: #07439f; }
.qq-notice-news { background: #e6f4ea; border-color: #a8d5b5; color: #14532d; }
.qq-notice-news b { margin-right: 4px; }
.qq-notice .qq-notice-x { background: none; border: 0; border-radius: 50%; color: inherit; cursor: pointer; font-size: 20px; height: 28px; line-height: 1; padding: 0; width: 28px; }
.qq-notice .qq-notice-x:hover, .qq-notice .qq-notice-x:focus-visible { background: rgba(0, 0, 0, .08); }
html.dark .qq-notice-news { background: #13361f; border-color: #2f7a47; color: #9be3b2; }
html.dark .qq-notice .qq-notice-x:hover, html.dark .qq-notice .qq-notice-x:focus-visible { background: rgba(255, 255, 255, .1); }
html.dark .qq-notice-soon { background: #3d3014; border-color: #6b5420; color: #f0c25e; }
html.dark .qq-notice-grace { background: #3b1f20; border-color: #6e3431; color: #ff9d94; }
html.dark .qq-notice-support { background: #1b2d4d; border-color: #2f4f86; color: #9cc0ff; }
html.dark .qq-notice a:hover { background: rgba(255, 255, 255, .08); }
@media print { .qq-notice { display: none; } }

/* Quick Qualifier on the left, Equal Housing on the right, lined up with the bar's edges under a thin line (2026-11-03:
   side by side in the middle, they read as one logo). Equal Housing is a notice, so it's smaller and quieter. */
.qq-foot {
    align-items: center;
    border-top: 1px solid rgba(31, 60, 107, .18);
    box-sizing: border-box;
    clear: both;
    color: #5b6b82;
    display: flex;
    flex-wrap: wrap;
    font: 13px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    gap: 10px 16px;
    justify-content: space-between;
    margin: 24px auto 0;
    max-width: 1208px;
    padding: 12px 0 18px;
    width: calc(100% - 32px);
}
html.dark .qq-foot { border-top-color: rgba(255, 255, 255, .1); color: #8fa3c0; }
.qq-foot img { height: 40px; width: auto; }
.qq-foot img.qq-logo { height: 24px; }
.qq-foot .qq-foot-brand { align-items: center; display: inline-flex; gap: 10px; }
.qq-foot .qq-foot-copy { font-size: 12px; }
.qq-foot a.qq-logo-link { display: inline-flex; }   /* the logo links to the sales site */
.qq-foot .qq-eho { align-items: center; display: inline-flex; font-size: 10.5px; font-weight: 600; gap: 6px; letter-spacing: .03em; line-height: 1.2; opacity: .85; text-transform: uppercase; }
/* the house from the Equal Housing badge (ZPics/EqualHousingHouse.png) as a mask, so it takes the text color in light and dark */
.qq-foot .qq-eho-house { background: currentColor; flex: none; height: 22px; width: 29px; -webkit-mask: url(../ZPics/EqualHousingHouse.png) center / contain no-repeat; mask: url(../ZPics/EqualHousingHouse.png) center / contain no-repeat; }
html.dark .qq-foot .qq-eho { color: #b8c5d9; }
.qq-foot img.qq-logo-dark { display: none; }          /* the dark-page logo (light lettering), swapped in below */
html.dark .qq-foot img.qq-logo-light { display: none; }
html.dark .qq-foot img.qq-logo-dark { display: inline; }

/* Messages for the visitor (qqMsg in Site.master, from ClassMsg.MsgBox), in place of the browser's alert() box. A warning
   look (amber with a ! badge; red for errors, green with a tick when done) so it stands out from the page; its own colours, as not every page loads Calculator.css. */
#qqMsgs { position: fixed; top: 56px; left: 50%; transform: translateX(-50%); z-index: 1000; width: min(500px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 10px; }
.qq-msg { display: flex; align-items: center; gap: 12px; padding: 14px 10px 14px 14px; background: #fff4d4; color: #3b2a00; border: 1px solid #ecc15a; border-left: 6px solid #d98e04; border-radius: 10px; box-shadow: 0 12px 32px rgba(60, 40, 0, .28), 0 2px 6px rgba(0, 0, 0, .12); font: 500 15.5px/1.45 "Segoe UI", system-ui, sans-serif; text-align: left; animation: qq-msg-in .22s cubic-bezier(.2, 1.4, .4, 1); }
.qq-msg-icon { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #d98e04; color: #fff; font: 700 16px/1 "Segoe UI", system-ui, sans-serif; }
.qq-msg-text { flex: 1; }
.qq-msg-x { flex: none; align-self: flex-start; background: none; border: 0; color: inherit; opacity: .65; font-size: 22px; line-height: 1; padding: 0 4px; cursor: pointer; border-radius: 6px; }
.qq-msg-x:hover, .qq-msg-x:focus-visible { opacity: 1; background: rgba(217, 142, 4, .18); }
html.dark .qq-msg { background: #3d2d08; color: #ffefc6; border-color: #8c6b1d; border-left-color: #f5b82e; box-shadow: 0 12px 32px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .4); }
html.dark .qq-msg-icon { background: #f5b82e; color: #2a1e00; }
html.dark .qq-msg-x:hover, html.dark .qq-msg-x:focus-visible { background: rgba(245, 184, 46, .2); }
/* A question (qqAsk in Site.master) in place of the browser's confirm() box: the message with Yes / Cancel under it */
.qq-ask { align-items: flex-start; }
.qq-ask-btns { display: flex; gap: 8px; margin-top: 10px; }
.qq-ask-btns button { padding: 6px 16px; border-radius: 8px; font: 600 14.5px/1.3 "Segoe UI", system-ui, sans-serif; cursor: pointer; }
.qq-ask-yes { background: #d98e04; color: #fff; border: 1px solid #d98e04; }
.qq-ask-yes:hover { background: #b87800; }
.qq-ask-no { background: transparent; color: inherit; border: 1px solid #c9a24a; }
/* A question asked where its button was (qqAskHere in Site.master): on its own line, with the yes button in red */
.qq-here { align-items: center; display: flex; flex-basis: 100%; flex-wrap: wrap; gap: 6px 8px; font: 500 14.5px/1.35 "Segoe UI", system-ui, sans-serif; }
.qq-here-text { flex-basis: 100%; font-weight: 600; }
span.qq-here button.qq-here-yes, span.qq-here button.qq-here-no { border-radius: 8px; cursor: pointer; font: 600 14.5px/1.3 "Segoe UI", system-ui, sans-serif; min-height: 34px; padding: 6px 16px; }
span.qq-here button.qq-here-yes { background: #c4320a; border: 1px solid #c4320a; color: #fff; }
span.qq-here button.qq-here-yes:hover { background: #a3290a; border-color: #a3290a; }
span.qq-here button.qq-here-no { background: transparent; border: 1px solid #b9c2cf; color: inherit; }
span.qq-here button.qq-here-no:hover { border-color: #0a5bd6; }
html.dark span.qq-here button.qq-here-yes { background: #e0533a; border-color: #e0533a; }
html.dark span.qq-here button.qq-here-no { border-color: #4b5f7d; }
.qq-ask-no:hover { background: rgba(217, 142, 4, .14); }
.qq-ask-btns button:focus-visible { outline: 2px solid #1d5fbf; outline-offset: 2px; }
html.dark .qq-ask-yes { background: #f5b82e; color: #2a1e00; border-color: #f5b82e; }
html.dark .qq-ask-yes:hover { background: #ffcb52; }
html.dark .qq-ask-no { border-color: #8c6b1d; }
html.dark .qq-ask-btns button:focus-visible { outline-color: #8fb8ff; }
/* red: something not allowed or out of range */
.qq-msg-error { background: #fde8e8; color: #4a0e0e; border-color: #f0a3a3; border-left-color: #c62828; box-shadow: 0 12px 32px rgba(90, 10, 10, .28), 0 2px 6px rgba(0, 0, 0, .12); }
.qq-msg-error .qq-msg-icon { background: #c62828; color: #fff; }
.qq-msg-error .qq-msg-x:hover, .qq-msg-error .qq-msg-x:focus-visible { background: rgba(198, 40, 40, .14); }
html.dark .qq-msg-error { background: #461519; color: #ffe0e0; border-color: #93323a; border-left-color: #ff6b6b; box-shadow: 0 12px 32px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .4); }
html.dark .qq-msg-error .qq-msg-icon { background: #ff6b6b; color: #2a0505; }
html.dark .qq-msg-error .qq-msg-x:hover, html.dark .qq-msg-error .qq-msg-x:focus-visible { background: rgba(255, 107, 107, .2); }
/* green: done (saved, sent, deleted) */
.qq-msg-ok { background: #e5f6ea; color: #0f3b1c; border-color: #9fd6ad; border-left-color: #1e8e3e; box-shadow: 0 12px 32px rgba(10, 60, 25, .25), 0 2px 6px rgba(0, 0, 0, .12); }
.qq-msg-ok .qq-msg-icon { background: #1e8e3e; color: #fff; }
.qq-msg-ok .qq-msg-x:hover, .qq-msg-ok .qq-msg-x:focus-visible { background: rgba(30, 142, 62, .14); }
html.dark .qq-msg-ok { background: #13361f; color: #dcf7e4; border-color: #2f7a47; border-left-color: #4cc777; box-shadow: 0 12px 32px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .4); }
html.dark .qq-msg-ok .qq-msg-icon { background: #4cc777; color: #062010; }
html.dark .qq-msg-ok .qq-msg-x:hover, html.dark .qq-msg-ok .qq-msg-x:focus-visible { background: rgba(76, 199, 119, .2); }
@keyframes qq-msg-in { from { opacity: 0; transform: translateY(-10px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .qq-msg { animation: none; } }
/* an in-place update on its way */
html.qq-busy, html.qq-busy * { cursor: progress !important; }
/* a page being put back as it was after Back or reload (Site.master): hidden for the moment it takes */
html.qq-restoring #qqForm { visibility: hidden; }

/* The slim top bar (web.config NewTopBar), the same on every page (QQBar; the home page has its own copy): Home, the page
   with a calculator menu, the page's own control (Prepared for, New / Classic, the home page's Area), then the bell, "?"
   and the loan officer's menu with Dark mode. One color, height and width everywhere, so it doesn't jump between pages.
   Its menus are <details>; Site.master closes them on a click outside or Escape. */
.qq-bar { --topbar: #1f3c6b; background: #1f3c6b; }
html.dark .qq-bar { --topbar: #13284d; background: #13284d; }
.qq-bar .qq-bar-inner { align-items: center; box-sizing: border-box; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 auto; max-width: 1240px; min-height: 48px; padding: 8px 16px; }
.qq-bar .qq-bar-logo { color: var(--topbar, #07439f); display: inline-flex; flex: none; line-height: 0; text-decoration: none; }   /* the Q check mark (favicon.svg) on the bar; the check's outline takes the bar color */
.qq-bar .qq-bar-logo svg { display: block; }
.qq-bar details { position: relative; }
.qq-bar summary { color: #fff; cursor: pointer; list-style: none; white-space: nowrap; }
.qq-bar summary::-webkit-details-marker { display: none; }
.qq-bar summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }
.qq-bar .qq-bar-calc > summary { align-items: center; border: 1px solid rgba(255, 255, 255, .4); border-radius: 8px; display: flex; font-size: 17px; font-weight: 700; gap: 8px; padding: 2px 8px 2px 12px; }   /* outlined, so the page name reads as a menu */
.qq-bar .qq-bar-calc > summary:hover, .qq-bar .qq-bar-calc[open] > summary { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .7); }
.qq-bar .qq-bar-calc .qq-bar-caret { font-size: 13px; opacity: 1; }
.qq-bar .qq-bar-caret { font-size: 12px; opacity: .9; }
.qq-bar .qq-bar-menu { background: #fff; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); color: #1f2937; left: 0; padding: 10px 14px; position: absolute; top: calc(100% + 6px); z-index: 50; }
.qq-bar .qq-bar-calcs { display: grid; gap: 2px 20px; grid-auto-flow: column; grid-template-rows: repeat(5, auto); }
.qq-bar .qq-bar-grp { border-bottom: 2px solid #1f3c6b; color: #1f3c6b; font-size: 12px; font-weight: 800; letter-spacing: .06em; margin-bottom: 4px; padding-bottom: 3px; text-transform: uppercase; white-space: nowrap; }
.qq-bar .qq-bar-menu a { color: #1f3c6b; display: block; font-size: 14px; padding: 3px 0; text-decoration: none; white-space: nowrap; }
.qq-bar .qq-bar-menu a:hover { text-decoration: underline; }
.qq-bar .qq-bar-menu-r { left: auto; min-width: 200px; right: 0; }
.qq-bar .qq-bar-who { border-bottom: 1px solid #e5e7eb; font-weight: 700; margin-bottom: 6px; padding-bottom: 6px; }
.qq-bar .qq-bar-who small { color: #6b7280; display: block; font-weight: 400; }
.qq-bar .qq-bar-contact { color: #6b7280; display: grid; font-size: 12.5px; font-weight: 400; gap: 2px; margin-top: 6px; }
.qq-bar .qq-bar-contact span { align-items: flex-start; display: flex; gap: 6px; overflow-wrap: break-word; }   /* long lines wrap (two people's phones and emails on one line, MarthaRamos) */
.qq-bar .qq-bar-contact .ic { margin-top: 2px; }
.qq-bar .qq-bar-user .qq-bar-menu-r { max-width: min(320px, calc(100vw - 32px)); }
.qq-bar .qq-bar-contact .ic { fill: none; flex: none; height: 13px; stroke: currentColor; stroke-width: 2; width: 13px; }
/* Dark mode in the name menu: a switch, on when the page is dark (JS/Dark.js) */
.qq-bar .qq-bar-dark { align-items: center; background: none; border: 0; border-top: 1px solid #e5e7eb; box-sizing: border-box; color: #1f3c6b; cursor: pointer; display: flex; font: inherit; font-size: 14px; gap: 14px; justify-content: space-between; margin-top: 6px; padding: 8px 0 4px; text-align: left; width: 100%; }
.qq-bar .qq-bar-dark-label { align-items: center; display: inline-flex; gap: 8px; }
.qq-bar .qq-bar-dark:focus-visible { outline: 2px solid #1f3c6b; outline-offset: 2px; }
.qq-bar .qq-bar-dark + a { border-top: 1px solid #e5e7eb; margin-top: 4px; padding-top: 7px; }   /* Sign out */
.qq-switch { background: #cbd5e1; border-radius: 10px; flex: none; height: 18px; position: relative; transition: background .15s; width: 32px; }
.qq-switch::after { background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); content: ""; height: 14px; left: 2px; position: absolute; top: 2px; transition: left .15s; width: 14px; }
html.dark .qq-switch { background: #3dba7e; }
html.dark .qq-switch::after { left: 16px; }
html.dark .qq-bar .qq-bar-dark, html.dark .qq-bar .qq-bar-dark + a { border-color: #33476a; color: #cfe0ff; }
html.dark .qq-bar .qq-bar-contact { color: #9fb2cf; }
@media (prefers-reduced-motion: reduce) { .qq-switch, .qq-switch::after { transition: none; } }
.qq-bar .qq-bar-prep { align-items: center; color: #fff; display: flex; font-size: 13px; gap: 8px; }
.qq-bar .qq-bar-prep[hidden] { display: none; }
.qq-bar .qq-bar-prep input { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .4); border-radius: 6px; color: #fff; font: inherit; font-size: 14px; padding: 4px 8px; width: 220px; }
.qq-bar .qq-bar-prep input::placeholder { color: rgba(255, 255, 255, .6); }
.qq-bar .qq-bar-right { align-items: center; display: flex; gap: 10px; margin-left: auto; }
.qq-bar .qq-bar-user > summary { align-items: center; display: flex; font-size: 14px; gap: 6px; }
/* Round buttons in the bar: "?" for a page's tour and light/dark, one size and outline */
.qq-bar .qq-bar-round, .qq-bar .look-toggle .look-dark {
    align-items: center; background: transparent; border: 1px solid rgba(255, 255, 255, .55); border-radius: 50%; box-sizing: border-box; color: #fff;
    cursor: pointer; display: inline-flex; font: 700 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; height: 30px; justify-content: center; margin: 0; padding: 0; width: 30px;
}
.qq-bar .qq-bar-round:hover, .qq-bar .qq-bar-round:focus-visible { background: rgba(255, 255, 255, .15); border-color: #fff; outline: none; }
.qq-bar .qq-bar-round[hidden] { display: none; }
/* The Help menu ("?", Site.master): Show me how (the page's tour button, moved in), Help topics, Email support */
.qq-bar .qq-bar-help[hidden] { display: none; }
.qq-bar .qq-bar-help[open] > summary { background: rgba(255, 255, 255, .15); border-color: #fff; }
.qq-bar .qq-bar-help .qq-bar-menu small { color: #6b7280; display: block; font-size: 12px; }
.qq-bar .qq-help-tour { background: none; border: 0; color: #1f3c6b; cursor: pointer; display: block; font: inherit; font-size: 14px; padding: 3px 0; text-align: left; }
.qq-bar .qq-help-tour:hover { text-decoration: underline; }
.qq-bar .qq-help-tour[hidden] { display: none; }
html.dark .qq-bar .qq-help-tour { color: #cfe0ff; }
html.dark .qq-bar .qq-bar-help .qq-bar-menu small { color: #9fb2cf; }
/* The bell (My messages, Site.master) beside the "?", with the number not opened yet */
.qq-bar .qq-bar-inbox { position: relative; text-decoration: none; }
.qq-bar .qq-bar-inbox[hidden], .qq-inbox-count[hidden] { display: none; }
.qq-inbox-count { background: #d93025; border: 2px solid var(--topbar, #07439f); border-radius: 10px; box-sizing: border-box; color: #fff; font: 700 11px/16px system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; min-width: 20px; padding: 0 4px; position: absolute; right: -8px; text-align: center; top: -7px; }
.qq-bar .look-toggle .look-dark { margin-right: 6px; }
.qq-bar img.qq-bar-av { border: 1.5px solid rgba(255, 255, 255, .8); box-sizing: border-box; object-fit: cover; object-position: 50% 12%; }   /* my photo in place of my initials */
.qq-bar .qq-bar-av { background: rgba(255, 255, 255, .2); border-radius: 50%; display: inline-grid; font-size: 11px; font-weight: 700; height: 28px; place-items: center; width: 28px; }
html.dark .qq-bar .qq-bar-menu { background: #1b2a44; color: #dbe6f7; }
html.dark .qq-bar .qq-bar-menu a { color: #cfe0ff; }
html.dark .qq-bar .qq-bar-who { border-color: #33476a; }
html.dark .qq-bar .qq-bar-grp { border-color: #6f9be0; color: #fff; }
html.dark .qq-bar .qq-bar-who small { color: #9fb2cf; }
@media (max-width: 600px) {
    .qq-bar .qq-bar-prep { order: 5; width: 100%; }
    .qq-bar .qq-bar-prep input { flex: 1; min-width: 0; width: auto; }
    .qq-bar .qq-bar-calcs { grid-auto-flow: row; grid-template-rows: none; }
    .qq-bar .qq-bar-calcs > span { display: none; }
}
/* What the bar takes over from a calculator's heading card (Site.master's script moves the pieces). */
html.qq-newbar #Header .head-title, html.qq-newbar #Header .prepared { display: none; }
html.qq-newbar #Header.qq-fitted, html.qq-newbar .calc-page:not(:has(.head-buttons)) #Header { display: none; }
html.qq-newbar #Header.qq-slim .head-row { margin-top: 0; }
.qq-bar-pick { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.qq-bar-pick select { flex: 1 1 140px; min-width: 0; }
/* A calculator heading's list gets its name in front (data-label), in a tinted box, so it reads as a choice to make. */
.qq-pick { align-items: center; background: var(--brand-soft); border: 1px solid var(--brand); border-radius: 10px; cursor: pointer; display: flex; flex: 1 1 240px; gap: 10px; min-width: 0; padding: 5px 6px 5px 12px; }
.qq-pick span { color: var(--brand-dark, var(--brand)); font-size: .9rem; font-weight: 700; white-space: nowrap; }
html .calc-page .qq-pick select { background: var(--field); border: 1px solid var(--brand); border-radius: 6px; color: var(--ink); flex: 1 1 auto; font-weight: 600; min-height: 32px; min-width: 0; }
html.dark .qq-pick span { color: #cfe0ff; }
.head-row .qq-pick { flex: 0 1 auto; }
.qq-pdf-title { grid-column: 1 / -1; }
html .qq-pdf-title input.head-title, html:not(.classic) .compact .qq-pdf-title .head-title, html:not(.classic) .fresh .qq-pdf-title .head-title { font-size: inherit !important; font-weight: 400 !important; min-height: 0 !important; text-align: left; width: 100%; }

/* A limited team member's calculator (QQLimited): the boxes their team set, which they can't change. */
html input.qq-limited { cursor: not-allowed; opacity: .6; }