/* HomeOwl product navigation: cream rail on desktop, cream app bar on mobile. */
[data-nav-theme="cream"] > aside {
  width: var(--sidebar-width) !important;
  background: var(--paper) !important;
  color: var(--green-900) !important;
  border-right: 1px solid var(--line);
}

[data-nav-theme="cream"] > aside > div:first-child > div > div:first-child { color: var(--green-900) !important; }
[data-nav-theme="cream"] > aside > div:first-child > div > div:last-child { color: var(--green-500) !important; }
[data-nav-theme="cream"] > aside nav button { color: var(--green-700) !important; }
[data-nav-theme="cream"] > aside nav button[style*="background: var(--green-800)"] {
  background: var(--green-50) !important;
  color: var(--green-900) !important;
  border-color: var(--green-300) !important;
}
[data-nav-theme="cream"] > aside > div:nth-of-type(2) { background: var(--surface) !important; border-color: var(--line) !important; }
[data-nav-theme="cream"] > aside > div:nth-of-type(2) div { color: var(--ink-soft) !important; }
[data-nav-theme="cream"] > aside > div:nth-of-type(2) > div:nth-child(2) { color: var(--green-900) !important; }
[data-nav-theme="cream"] > aside > div:nth-of-type(2) > div:nth-child(4) { background: var(--green-100) !important; }
[data-nav-theme="cream"] > aside > div:nth-of-type(3) { background: var(--lime-100) !important; border-color: var(--lime-500) !important; }
[data-nav-theme="cream"] > aside > div:nth-of-type(3) div { color: var(--green-700) !important; }
[data-nav-theme="cream"] > aside > div:last-child { border-top-color: var(--line) !important; }
[data-nav-theme="cream"] > aside > div:last-child span { background: var(--green-900) !important; color: var(--text-inverse) !important; }
[data-nav-theme="cream"] > aside > div:last-child div { color: var(--green-900) !important; }

.ho-mobile-brand,
.ho-more-button,
.ho-more-menu { display: none !important; }

@media (max-width: 920px) {
  *, *::before, *::after { box-sizing: border-box; }

  :root {
    --text-2xl: 28px;
    --text-3xl: 36px;
  }

  html, body, #root { height: 100%; min-width: 0; overflow: hidden; }
  body { padding: 0; }

  #root > [data-screen-label] {
    height: 100dvh !important;
    min-height: 100dvh;
    min-width: 0;
  }

  /* Persistent bottom navigation mirrors the desktop rail. */
  #root > [data-screen-label] > aside {
    position: fixed;
    z-index: 100;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    height: calc(72px + env(safe-area-inset-bottom));
    min-height: calc(72px + env(safe-area-inset-bottom)) !important;
    padding-bottom: env(safe-area-inset-bottom);
    flex-direction: row !important;
    align-items: stretch !important;
    border: 0 !important;
    border-top: 1px solid var(--line) !important;
    box-shadow: 0 -10px 28px rgba(20, 33, 26, .12);
  }

  #root > [data-screen-label] > aside > div:first-child,
  #root > [data-screen-label] > aside > div:nth-of-type(2),
  #root > [data-screen-label] > aside > div:nth-of-type(3),
  #root > [data-screen-label] > aside > div:last-child { display: none !important; }

  #root > [data-screen-label] > aside nav {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px !important;
    width: 100%;
    padding: 6px 8px !important;
    position: relative;
  }

  #root > [data-screen-label] > aside nav > button {
    min-width: 0;
    min-height: 58px;
    padding: 5px 2px !important;
    flex-direction: column;
    justify-content: center;
    gap: 4px !important;
    border-radius: 10px !important;
    font-size: 10px !important;
    line-height: 1.1;
    white-space: nowrap;
  }

  #root > [data-screen-label] > aside nav > button svg { width: 19px; height: 19px; }
  #root > [data-screen-label] > aside nav > button > span:first-of-type { flex: 0 !important; }
  #root > [data-screen-label] > aside nav > button > span:nth-of-type(2) {
    position: absolute;
    transform: translate(13px, -17px);
    padding: 1px 5px !important;
    font-size: 9px !important;
  }

  #root > [data-screen-label] > aside nav > button[data-nav-item="Watch zones"],
  #root > [data-screen-label] > aside nav > button[data-nav-item="Profile"] { display: none !important; }
  #root > [data-screen-label] > aside nav .ho-more-button { display: flex !important; }

  #root > [data-screen-label] > aside nav .ho-more-menu {
    display: flex !important;
    position: fixed;
    right: 12px;
    bottom: calc(80px + env(safe-area-inset-bottom));
    min-width: 210px;
    padding: 8px;
    flex-direction: column;
    gap: 4px;
    background: var(--surface-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop);
  }

  #root > [data-screen-label] > aside nav .ho-more-menu button {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 10px 12px;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--green-900);
    font: 650 14px var(--font-sans);
    cursor: pointer;
  }

  #root > [data-screen-label] > main {
    min-width: 0;
    height: 100dvh;
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  /* Cream mobile app bar keeps the HomeOwl identity and current screen visible. */
  .ho-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    min-height: 68px;
    padding: 10px 16px !important;
    align-items: center !important;
    gap: 12px;
    background: rgba(248, 247, 241, .96) !important;
    border-bottom: 1px solid var(--line) !important;
    backdrop-filter: blur(14px);
  }

  .ho-mobile-brand {
    display: flex !important;
    align-items: center;
    gap: 8px;
    color: var(--green-900);
    font-family: var(--font-display);
    font-size: 18px;
    white-space: nowrap;
  }
  .ho-mobile-brand svg { width: 28px; height: 28px; }
  .ho-topbar > div:nth-child(2) { margin-left: auto; text-align: right; }
  .ho-topbar > div:nth-child(2) > div { display: none; }
  .ho-topbar > div:nth-child(2) h1 { font: 700 16px var(--font-sans) !important; letter-spacing: 0; }
  .ho-topbar > div:last-child { display: none !important; }

  #root > [data-screen-label] > main > div { overscroll-behavior: contain; }
  [data-screen-label] [style*="padding: 28px 32px"] { padding: 18px 14px 24px !important; }
  [data-screen-label] h2 { text-wrap: balance; }
  [data-screen-label] p, [data-screen-label] span, [data-screen-label] div { overflow-wrap: break-word; }
  [data-screen-label] button, [data-screen-label] input { touch-action: manipulation; }
  [data-screen-label] button { min-height: 40px; }

  /* Free scan */
  [data-screen-label="Free scan"] [style*="background: rgba(255,255,255,0.06)"],
  [data-screen-label="Free scan"] [style*="background: rgba(255, 255, 255, 0.06)"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  [data-screen-label="Free scan"] input { width: 100%; min-height: 48px; font-size: 16px !important; }
  [data-screen-label="Free scan"] [style*="grid-template-columns: repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
  [data-screen-label="Free scan"] [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: 1fr !important; }
  [data-screen-label="Free scan"] [style*="border-left"] { border-left: 0 !important; border-top: 1px solid var(--line-soft); }
  [data-screen-label="Free scan"] [style*="display: flex"][style*="align-items: flex-start"] { flex-direction: column !important; }

  /* Daily brief hero and watch strip */
  [data-screen-label="Daily brief"] main > div > div > div:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 18px !important;
    padding: 22px 18px !important;
  }
  [data-screen-label="Daily brief"] main > div > div > div:first-child h2 { font-size: 29px !important; }
  [data-screen-label="Daily brief"] main > div > div > div:first-child > div:last-child { width: 100%; min-width: 0 !important; }
  [data-screen-label="Daily brief"] main > div > div > div:nth-child(2) {
    flex-wrap: wrap;
    gap: 10px !important;
    padding: 14px !important;
  }
  [data-screen-label="Daily brief"] main > div > div > div:nth-child(2) > div:nth-child(3) {
    order: 4;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  [data-screen-label="Daily brief"] main > div > div > div:nth-child(2) > button { margin-left: auto; }

  /* Daily brief filter row */
  [data-screen-label="Daily brief"] [style*="position: sticky"] {
    position: static !important;
    flex-wrap: wrap;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 8px 0 4px !important;
    box-shadow: none !important;
  }
  [data-screen-label="Daily brief"] [style*="position: sticky"] > div:first-child { width: 100%; }
  [data-screen-label="Daily brief"] [style*="position: sticky"] > div:nth-child(2) {
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }
  [data-screen-label="Daily brief"] [style*="position: sticky"] > span:last-child { width: 100%; line-height: 1.45; }

  /* Listing cards */
  [data-screen-label="Daily brief"] [style*="grid-template-columns: repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
  [data-screen-label="Daily brief"] [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: 1fr !important; }
  [data-screen-label="Daily brief"] [style*="padding: 16px 18px"] > div:first-child {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  [data-screen-label="Daily brief"] [style*="padding: 16px 18px"] > div:first-child > span:last-child { align-items: flex-start !important; }
  [data-screen-label="Daily brief"] [style*="justify-content: space-between"][style*="align-items: baseline"] {
    align-items: flex-start !important;
    flex-direction: column;
    gap: 6px !important;
  }
  [data-screen-label="Daily brief"] [style*="justify-content: space-between"][style*="align-items: baseline"] > span { line-height: 1.5; }

  /* Saved homes */
  [data-screen-label="Saved homes"] main > div > div > div:first-child {
    align-items: flex-start !important;
    flex-direction: column;
    gap: 6px;
  }
  [data-screen-label="Saved homes"] main > div > div > div:not(:first-child)[style*="align-items: center"] {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  [data-screen-label="Saved homes"] main > div > div > div:not(:first-child)[style*="align-items: center"] > button { width: 100%; }

  /* Comparison stays legible through deliberate horizontal scrolling. */
  [data-screen-label="Compare"] main > div > div > div:first-child,
  [data-screen-label="Watch zones"] main > div > div > div:first-child {
    align-items: flex-start !important;
    flex-direction: column;
    gap: 6px;
  }
  [data-screen-label="Compare"] main > div > div > div:nth-child(2) { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  [data-screen-label="Compare"] [style*="grid-template-columns: 160px 1fr 1fr"] { min-width: 720px; }

  /* Watch zones */
  [data-screen-label="Watch zones"] main > div > div > div[style*="align-items: center"]:not(:first-child) {
    align-items: flex-start !important;
    flex-wrap: wrap;
    gap: 12px !important;
  }
  [data-screen-label="Watch zones"] main > div > div > div[style*="align-items: center"]:not(:first-child) > div:nth-child(2) { min-width: calc(100% - 90px); }
  [data-screen-label="Watch zones"] main > div > div > div[style*="align-items: center"]:not(:first-child) > div:nth-child(3) {
    width: 100%;
    padding-left: 90px;
    text-align: left !important;
  }
  [data-screen-label="Watch zones"] main > div > div > div[style*="align-items: center"]:not(:first-child) > button { margin-left: auto; }

  /* Profile */
  [data-screen-label="Profile"] main > div > div > div:first-child { gap: 12px; }
  [data-screen-label="Profile"] [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
  [data-screen-label="Profile"] [style*="align-items: center"][style*="gap: 20px"] {
    align-items: stretch !important;
    flex-direction: column !important;
  }
  [data-screen-label="Profile"] [style*="align-items: center"][style*="gap: 20px"] > div:last-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }

  /* Shared mobile finishing */
  [data-screen-label] [style*="max-width: var(--content-max)"] { max-width: 100% !important; }
  [data-screen-label] [style*="display: flex"] { max-width: 100%; }
  [data-screen-label] input { min-width: 0; }
}

@media (max-width: 560px) {
  #root > [data-screen-label] > aside nav { padding-left: 4px !important; padding-right: 4px !important; }
  #root > [data-screen-label] > aside nav > button { font-size: 9px !important; }
  .ho-topbar { padding-left: 12px !important; padding-right: 12px !important; }
  .ho-mobile-brand { font-size: 17px; }
  .ho-topbar > div:nth-child(2) h1 { font-size: 14px !important; }
  [data-screen-label="Daily brief"] main > div > div > div:first-child h2 { font-size: 27px !important; }
  [data-screen-label="Profile"] [style*="align-items: center"][style*="gap: 20px"] > div:last-child { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  #root > [data-screen-label] > aside nav > button { font-size: 8px !important; }
  #root > [data-screen-label] > aside nav > button svg { width: 18px; height: 18px; }
  .ho-mobile-brand strong { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-screen-label] * { scroll-behavior: auto !important; }
}