/* Approved Loan Officer navigation shell. Page content and role links stay local. */
html { scrollbar-gutter:stable; }
.app-shell .app-sidebar {
  width: 224px;
  padding: 12px 10px 14px;
  background: #172226;
  font-family: 'OHB Card Inter', Inter, ui-sans-serif, sans-serif;
}
.app-shell .sidebar-brand-row { flex: 0 0 44px; height: 44px; margin: 0 2px 10px 4px; padding: 0; }
.app-shell .sidebar-brand-row .brand-mark { padding: 0; }
.app-shell .sidebar-brand-row .brand-mark .brand-logo-full,
.app-shell .mobile-brand .brand-mark .brand-logo-full { width: 172px; height: 30px; object-fit: contain; }
.app-shell .sidebar-brand-row + .sidebar-nav { margin-top: 11px; }
.app-shell .sidebar-nav { gap: 3px; }
.app-shell .app-sidebar .sidebar-nav a {
  min-height: 40px;
  gap: 10px;
  padding: 0 11px;
  border-radius: 9px;
  color: #e0e6e7;
  font-family: 'OHB Card Inter', Inter, ui-sans-serif, sans-serif;
  font-size: 13px;
  font-weight: 350;
  line-height: 1.4;
}
.app-shell .sidebar-nav a svg { width: 17px; height: 17px; flex: 0 0 17px; stroke-width: 1.8; }
.app-shell .sidebar-nav a:hover { color: #fff; background: #263237; }
.app-shell .sidebar-nav a.active { color: #ffc400; background: #1e2b2f; }
/* Approved lighter desktop navigation with icons; keep the mobile drawer unchanged. */
@media (min-width: 761px) {
  .app-shell:not(.sidebar-collapsed) .app-sidebar .sidebar-nav a { font-weight: 275; }
}
.app-shell .nav-heading { color: #bdc7ca; font-size: 10px; font-weight: 600; letter-spacing: .12em; }
.app-shell .app-topbar { height: 58px; min-height: 58px; padding: 0 24px; border-bottom-color: #dfe5e6; background: rgba(255,255,255,.95); }
.app-shell .app-topbar .topbar-title { gap: 9px; color: #536166; font-family: 'OHB Card Inter', Inter, ui-sans-serif, sans-serif; font-size: 14px; font-weight: 450; letter-spacing: 0; }
.app-shell .app-topbar .topbar-title > svg { width: 17px; height: 17px; padding: 0; border-radius: 0; color: #536166; background: transparent; box-shadow: none; }
.app-shell .topbar-actions { gap: 10px; }
.app-shell .topbar-actions .avatar { width: 36px; height: 36px; }
.app-shell .app-topbar .solo-topbar-logo { display: block; width: 102px; height: 32px; object-fit: contain; }
.app-shell .app-topbar .topbar-actions { margin-left: auto; }
.desktop-view .desktop-top .brokerage-logo { display: block; width: 102px; height: 32px; object-fit: contain; }
@media (max-width: 380px) { .app-shell .mobile-brand .brand-mark .brand-logo-full { width: 124px; } }
@media (min-width: 761px) {
  .app-shell .sidebar-brand-row > button { display: none; }
  .app-shell > .app-topbar { left: 224px; }
  .app-shell > main.workspace { margin-left: 224px; padding-top: 77px; }
}
@media (max-width: 760px) {
  .app-shell .app-topbar { height: 62px; min-height: 62px; padding: 0 14px; }
  .app-shell .sidebar-brand-row > button { display: grid; min-width: 40px; min-height: 40px; }
  .app-shell .app-sidebar { max-width: 86vw; }
  .app-shell .mobile-brand > button { width: 44px; height: 44px; }
  .app-shell .app-sidebar .sidebar-nav a { min-height: 44px; }
  .app-shell .app-topbar .topbar-actions { position: absolute; top: 50%; right: 65px; display: flex; transform: translateY(-50%); }
  .app-shell .app-topbar .solo-topbar-logo { width: 75px; height: 27px; }
  .app-shell .mobile-brand .brand-mark .brand-logo-full { width: 142px; }
}

/* The two standalone open-house documents use the same navigation measurements. */
.app > .sidebar, .desktop-view > .sidebar { width: 224px; padding: 12px 10px 14px; color: #fff; background: #172226; }
.app .brand-row, .desktop-view .side-brand { height: 44px; min-height: 44px; flex: 0 0 44px; margin: 0 2px 21px 4px; padding: 0; }
.app .brand-row .logo-full, .desktop-view .side-brand .side-logo-full { display: block; width: 172px; height: 30px; padding: 0; object-fit: contain; background: transparent; }
.app .brand-row .logo-icon, .desktop-view .side-brand .side-logo-icon { display: none; }
.app .sidebar .nav a, .desktop-view .side-link { min-height: 40px; justify-content: flex-start; gap: 10px; padding: 0 11px; border-radius: 9px; color: #e0e6e7; font-family: 'OHB Card Inter', Inter, ui-sans-serif, sans-serif; font-size: 13px; font-weight: 350; line-height: 1.4; }
.desktop-view .side-link span { display: inline; }
.app .sidebar .nav a.active, .desktop-view .side-link.active { color: #ffc400; background: #1e2b2f; }
.desktop-view .side-link.active::before { display: none; }
.app .sidebar .nav a svg, .desktop-view .side-link .icon { width: 17px; height: 17px; stroke-width: 1.8; }
@media (min-width: 1161px) {
  .app:not(.sidebar-collapsed) .sidebar .nav a { font-weight: 275; }
}
@media (min-width: 1025px) {
  .desktop-view .side-link { font-weight: 275; }
}
.app .nav-label, .desktop-view .nav-caption { display: block; color: #bdc7ca; font-size: 10px; font-weight: 600; letter-spacing: .12em; }
@media (min-width: 761px) {
  .app > .sidebar { transform: none; box-shadow: none; }
  .app .brand-row > .collapse, .desktop-view .side-brand > .collapse { display: none; }
  .app > .mobile-header { display: none; }
  .app > .main { margin-left: 224px; padding-top: 77px; }
  .app .topbar { position: fixed; z-index: 30; left: 224px; height: 58px; min-height: 58px; padding: 0 24px; }
  .app .topbar h1 { font-family: 'OHB Card Inter', Inter, ui-sans-serif, sans-serif; font-size: 14px; font-weight: 450; color: #536166; }
  .app .topbar .top-actions { display: flex; }
  .app .bottom-nav, .app .mobile-scrim { display: none; }
}
@media (min-width: 821px) {
  .desktop-view .desktop-main { margin-left: 224px; padding-top: 77px; }
  .desktop-view .desktop-top { position: fixed; z-index: 30; inset: 0 0 auto 224px; height: 58px; min-height: 58px; padding: 0 24px; margin: 0; border-bottom: 1px solid #dfe5e6; background: #fff; }
  .desktop-view .desktop-top .back-link { font-family: 'OHB Card Inter', Inter, ui-sans-serif, sans-serif; font-size: 14px; font-weight: 450; }
}
@media (max-width: 760px) {
  .app .mobile-header { height: 62px; min-height: 62px; padding-block: 0; }
  .app .mobile-brand .logo { width: 172px; height: 30px; object-fit: contain; }
  .app .sidebar .nav a { min-height: 44px; }
.app .brand-row > .collapse { display: block; min-width: 40px; min-height: 40px; }
}
@media (max-width: 820px) {
  .mobile-view .mobile-header { min-height: 62px; height: 62px; padding-block: 0; }
  .mobile-view .mobile-header { gap: 8px; }
  .mobile-view .mobile-logo { width: min(40vw, 150px); height: 30px; object-fit: contain; }
  .mobile-view .mobile-header .brokerage-logo { display: block; width: min(25vw, 78px); height: 27px; object-fit: contain; }
}

/* Solo page-by-page review: quieter header, mobile mark, and content actions. */
.app-shell .app-topbar .solo-page-title { position:absolute; left:24px; top:50%; transform:translateY(-50%); margin:0; color:#536166; font-family:'OHB Card Inter',Inter,sans-serif; font-size:14px; font-weight:400; line-height:1.4; }
.app-shell .app-sidebar .solo-profile-link { margin-top:auto; padding-top:14px; text-decoration:none; min-height:64px; }
.app-shell .solo-profile-link strong { font-size:12px; font-weight:500; }
.app-shell .solo-profile-link small { font-size:11px; color:#b5c0c3; }
.app-shell .solo-profile-link:focus-visible { outline:2px solid #ffc400; outline-offset:2px; }
.app-shell .solo-profile-link:hover { background:#1e2b2f; }
.listings-app .listings-panel-head { min-height:0; padding:12px 14px; justify-content:flex-end; }
.listings-app .listings-panel-actions { width:auto; margin-left:auto; }
.listings-app .listings-panel-actions .button { width:auto; min-height:38px; }
.listings-app .listing-card-heading { grid-template-columns:minmax(0,1fr); align-content:start; gap:6px; }
.listings-app .listing-card-heading h3 { overflow:visible; white-space:normal; line-height:1.35; }
.listings-app .listing-card-heading p { margin:0; }
.listings-app .listing-price-line { justify-content:flex-start; margin-top:4px; }
.listings-app .listing-card:last-child { grid-column:auto; }
.solo-page-footer-actions { display:flex; align-items:center; justify-content:flex-end; gap:14px; padding-top:16px; }
.solo-page-footer-actions p { margin:0 auto 0 0; color:#667176; font-size:12px; line-height:1.5; }
.cohost-footer { padding:14px 18px; border-top:1px solid #e4e9ea; }
.solo-page-footer-actions .button { min-height:40px; padding:9px 14px; font-size:13px; font-weight:500; }
.email-app .email-heading { align-items:center; gap:16px; margin-bottom:14px; }
.email-app .email-heading h1 { font-size:18px; font-weight:450; line-height:1.35; letter-spacing:-.015em; }
.email-app .email-heading > div > p:last-child { margin-top:4px; font-size:12px; line-height:1.5; }
.email-app .email-heading .button { min-height:38px; font-size:13px; padding:8px 12px; }
.video-follow-up-app .video-record-controls .video-landing-preview { align-self:center; justify-self:end; padding:8px 10px; min-height:38px; font-size:12px; font-weight:450; white-space:nowrap; }
@media(max-width:760px) {
  .app-shell .app-topbar .solo-page-title { display:none; }
  .app-shell .mobile-brand .brand-mark .brand-logo-full { display:none !important; }
  .app-shell .mobile-brand .brand-mark .brand-logo-icon { display:block; width:36px; height:36px; object-fit:contain; }
  .app-shell .mobile-brand .brand-mark { padding:0; }
  .app-shell .app-topbar .mobile-brand { display:flex; align-items:center; justify-content:space-between; width:100%; }
  .app .mobile-header .mobile-brand { width:36px; flex:0 0 36px; }
  .app .mobile-header .mobile-brand .logo { width:36px; height:36px; object-fit:contain; }
  .solo-page-footer-actions { flex-wrap:wrap; }
  .cohost-footer p { flex-basis:100%; }
  .email-app .email-heading { align-items:stretch; gap:10px; }
  .email-app .email-heading h1 { font-size:17px; }
  .video-follow-up-app .video-record-controls .video-landing-preview { grid-column:1 / -1; justify-self:stretch; min-height:44px; }
  .settings-footer-save { display:none; }
}

/* Stage 2: one 16px gap above page content. Card geometry stays unchanged. */
:root { --ohb-content-top-gap: 16px; }
@media (min-width: 761px) {
  .app-shell > main.workspace, .app > .main { padding-top: calc(58px + var(--ohb-content-top-gap)) !important; }
}
@media (max-width: 760px) {
  .app-shell > main.workspace, .app > .main { padding-top: calc(62px + var(--ohb-content-top-gap)) !important; }
}
@media (min-width: 821px) {
  .desktop-view .desktop-main { padding-top: calc(58px + var(--ohb-content-top-gap)) !important; }
}
@media (max-width: 820px) {
  .mobile-view .mobile-content { padding-top: var(--ohb-content-top-gap) !important; }
}