/* The loan officer's home page (01Shared/Default.aspx), on top of Home.css (which Admin and Team also use).
   Slim bar with the owner's settings, calculators in two cards, tools down the right, all on one screen. */

.ic { fill: none; flex: none; height: 18px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 18px; }

/* Top bar: the calculators' slim bar (CS/Site.css .qq-bar), with my name and company where they show the page name and
   my phone and email stacked beside them; the area menu, "?", light/dark and my menu on the right */
.qq-bar-home { background: #1f3c6b; }
html.dark .qq-bar-home { background: #13284d; }
.qq-bar-home .qq-bar-inner { flex-wrap: nowrap; max-width: 1180px; padding: 8px 16px; }
.qq-bar-lo { align-items: center; display: flex; gap: 16px; min-width: 0; }
.qq-bar-lo-who { min-width: 0; }
.qq-bar-lo-name { display: block; font-size: 17px; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qq-bar-lo-co { display: block; font-size: 12.5px; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qq-bar-lo-contact { border-left: 1px solid rgba(255, 255, 255, .25); display: grid; font-size: 12.5px; gap: 1px; opacity: .85; padding-left: 16px; }
.qq-bar-lo-contact span { align-items: center; display: flex; gap: 6px; white-space: nowrap; }
.qq-bar-lo-contact .ic { height: 13px; opacity: .8; width: 13px; }
.qq-bar-area { align-items: center; display: flex; font-size: 13px; gap: 8px; }
.qq-bar-area > span { opacity: .75; }
.bar-select { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .35); border-radius: 8px; color: #fff; cursor: pointer; font: inherit; font-size: 13.5px; max-width: 200px; padding: 4px 8px; }
.bar-select:hover, .bar-select:focus-visible { background: rgba(255, 255, 255, .22); outline: none; }
.bar-select option { background: var(--card); color: var(--ink); }
.bar-theme .sun, html.dark .bar-theme .moon { display: none; }
html.dark .bar-theme .sun { display: inline; }
html.dark .qq-bar-home .bar-theme { background: #fff; border-color: #fff; color: #07439f; }   /* "on", as on the calculators' bar */
.qq-bar-user a { cursor: pointer; }
@media (max-width: 900px) {
    .qq-bar-lo-contact { display: none; }   /* my own number and email: the first thing to go when the bar is short of room */
}

/* Page */
html:not(.dark) body { background: #e6ebf3; }   /* a shade darker than the cards, so they stand out */
.page { max-width: 1180px; padding-bottom: 8px; }
.page > .auth, .page > .paid-note { margin-top: 28px; }   /* no big header to tuck into */
.paid-note ~ .lo-home { margin-top: 16px; }
.area-alert { background: var(--alert-soft); border-radius: 999px; color: var(--alert); display: inline-block; font-size: .9rem; font-weight: 600; margin-top: 16px; padding: 5px 14px; }

.lo-home { align-items: start; display: grid; gap: 18px; grid-template-columns: 1fr 1fr 300px; grid-template-rows: auto 1fr; margin-top: 20px; }
.lo-home .card {
    background: var(--card); border: 1px solid #c9d3e3; border-radius: 14px; padding: 16px;
    box-shadow: 0 1px 3px rgba(21, 32, 56, .12), 0 8px 24px rgba(21, 32, 56, .10);
}
html.dark .lo-home .card { border-color: var(--line); box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .25); }
.lo-home h2 {
    border-bottom: 1px solid var(--line); color: var(--brand); font-size: .75rem; font-weight: 700; letter-spacing: .09em;
    margin-bottom: 10px; padding-bottom: 8px; text-transform: uppercase;
}

/* Calculator rows */
.lo-home .calc { background: #f4f7fc; border-left: 4px solid var(--brand); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); padding: 11px 14px; }
html.dark .lo-home .calc { background: #1b2740; }
.lo-home .calc + .calc { margin-top: 8px; }
.lo-home .calc:hover, .lo-home .calc:focus-visible { background: var(--card); box-shadow: 0 4px 12px rgba(0, 0, 0, .18); }
html.dark .lo-home .calc:hover, html.dark .lo-home .calc:focus-visible { background: var(--brand-soft); }
.lo-home .calc strong { font-size: 1rem; }
.lo-home .calc small { font-size: .82rem; }

/* Side-by-side: purchase and refinance, lined up with the cards above (gap = the cards' gap + both paddings) */
.lo-home .cmp { grid-column: 1 / 3; }
.cmp2 { display: grid; gap: 50px; grid-template-columns: 1fr 1fr; }
.lo-home .calc.sbs { border-color: var(--line); border-left-color: #f59e0b; border-style: dashed solid dashed solid; margin: 0; }
.sbs-txt { align-items: center; display: flex; gap: 12px; }
.sbs-txt .ic { color: #f59e0b; height: 24px; width: 24px; }
button.calc { cursor: pointer; font: inherit; text-align: left; width: 100%; }
.refi-pick { position: relative; }
.refi-ask {
    align-items: center; background: var(--card); border: 1px solid #f59e0b; border-left-width: 4px; border-radius: 10px; display: flex; gap: 6px;
    inset: 0; opacity: 0; padding: 0 4px 0 12px; position: absolute; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility .2s; visibility: hidden;
}
.refi-pick.open .refi-ask { opacity: 1; transform: none; visibility: visible; }
.refi-ask .q { font-weight: 700; margin-right: auto; white-space: nowrap; }
.refi-ask a { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font-size: .9rem; padding: 6px 10px; text-decoration: none; white-space: nowrap; }
.refi-ask a:hover, .refi-ask a:focus-visible { border-color: #f59e0b; color: #b45309; outline: none; }
html.dark .refi-ask a:hover, html.dark .refi-ask a:focus-visible { color: #f59e0b; }
.refi-ask .x { background: none; border: 0; color: var(--muted); cursor: pointer; flex: none; font: inherit; padding: 6px; }

/* Tools column */
.lo-tools { display: flex; flex-direction: column; gap: 8px; grid-column: 3; grid-row: 1 / 3; }
.lo-tools h2 { margin-bottom: 2px; }
.lo-tools h2 ~ h2 { margin-top: 10px; }
.tool-btn {
    align-items: center; background: #f4f7fc; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); cursor: pointer; display: flex;
    font: inherit; font-size: .95rem; gap: 10px; min-height: 40px; padding: 8px 14px; text-align: left; text-decoration: none; width: 100%;
}
html.dark .tool-btn { background: #1b2740; }
.tool-btn:hover, .tool-btn:focus-visible { border-color: var(--brand); outline: none; }
.tool-btn.tool-primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }

/* Flyers: slides open under its button */
.fly-toggle .chev { margin-left: auto; transition: transform .25s; }
.fly-toggle[aria-expanded="true"] { border-color: var(--brand); }
.fly-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.fly-menu { display: grid; grid-template-rows: 0fr; margin-top: -8px; transition: grid-template-rows .28s ease, margin-top .28s ease; }
.fly-menu.open { grid-template-rows: 1fr; margin-top: 0; }
.fly-inner { display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.fly-inner > a { background: var(--bg); border-left: 2px solid var(--brand); border-radius: 0 9px 9px 0; color: var(--ink); display: block; margin-left: 14px; padding: 8px 12px; text-decoration: none; }
.fly-inner > a:hover, .fly-inner > a:focus-visible { outline: 1px solid var(--brand); }
.fly-inner strong { display: block; font-size: .925rem; }
.fly-inner small { color: var(--muted); display: block; font-size: .78rem; }

/* Footer: one thin line */
.qq-foot { border-top: 1px solid var(--line); justify-content: space-between; margin: 16px auto 0; max-width: 1148px; padding: 10px 0 14px; }
.qq-foot img.qq-logo { height: 22px; }
.qq-foot .qq-eho svg { height: 24px; width: 24px; }

@media (max-width: 900px) {
    .lo-home { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
    .lo-tools { grid-column: 1 / -1; grid-row: auto; order: 2; }   /* side-by-side stays next to the calculators */
    .lo-home .cmp { grid-column: 1 / -1; order: 1; }
}
@media (max-width: 640px) {
    .qq-bar-home .qq-bar-inner { flex-wrap: wrap; }   /* phones: the area menu and buttons go under the name */
    .qq-bar-home .qq-bar-right { flex: 1 1 100%; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
    .qq-bar-area > span { display: none; }
    .bar-select { max-width: 150px; }
    .lo-home { grid-template-columns: 1fr; }
    .cmp2 { gap: 8px; grid-template-columns: 1fr; }
    .refi-ask .q { display: none; }   /* the three choices need the whole row */
    .refi-ask a { flex: 1; text-align: center; }
    .qq-foot { margin: 16px 16px 0; }
}

/* ---- Same look as the calculators (2026-10-14, see the "fresh" block in CS/Calculator.css): light blue page,
   solid navy top bar, white cards with a soft blue edge, navy heading bars with white Title Case text ---- */
html:not(.dark) { --bar: #1f3c6b; --card-line: #b7cbe3; --card-shadow: rgba(18, 53, 127, .10); }
html.dark { --bar: #2d538f; --card-line: #2b3d5a; --card-shadow: rgba(0, 0, 0, .45); }
html:not(.dark) body { background: #cfe2f7; }
html.dark body { background: #0e1828; }
html.dark { --bg: #0e1828; --card: #172335; --line: #263650; }
.lo-home .card, html.dark .lo-home .card { border-color: var(--card-line); border-radius: 8px; box-shadow: 0 1px 3px var(--card-shadow); }
.lo-home h2 {
    background: var(--bar); border: 0; border-radius: 5px; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 0;
    margin-bottom: 10px; padding: 4px 10px; text-transform: none;
}
.lo-tools h2 { margin-bottom: 2px; }   /* the column's 8px gap already spaces it from the first button */
.qq-foot { border-top-color: var(--card-line); }

/* Beta testers only, until November 1 (QQBetaPlan, 2026-10-21): the way to the test plan, above the home page cards */
.bt-banner { align-items: center; border-left: 4px solid var(--brand); display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: space-between; margin-top: 20px; padding: 14px 18px; }
.bt-banner p { margin: 0; }
.bt-banner p span { color: var(--muted); }
.bt-banner .bt-count { background: var(--brand-soft, #e7f1fb); border-radius: 10px; color: var(--brand-dark, var(--brand)); font-size: .8rem; font-weight: 700; margin-left: 6px; padding: 2px 8px; white-space: nowrap; }
.bt-banner .btn { text-decoration: none; white-space: nowrap; }
.bt-banner + .lo-home, .bt-banner ~ .lo-home { margin-top: 16px; }
.bt-banner .bt-count:empty { display: none; }
#btPopup .wn-body p { margin: 0 0 12px; }
#btPopup .wn-body p:last-child { margin-bottom: 0; }
#btPopup .wn-foot .btn { text-decoration: none; }