/* zhodowli desktop navigation: the >=900px header, its anchored popover and
   the breakpoints it shrinks through. The mobile shell lives in shell.css. */

.dheader, .dpanel, .dsearch-mini { display: none; }

@media (min-width: 900px) {
  .topbar, .bottomnav, .sheet, .mobile-only { display: none !important; }

  /* Sticky and constant. The bar pins to the top and nothing on it changes
     while scrolling — no shrink, no logo scale, no search collapse. Mockup 44
     drew a 76 -> 60px compact state; the owner cut it, because any mid-scroll
     morph of the bar reads as a jump. A constant-height sticky element cannot
     shift the page. */
  .dheader {
    display: block;
    position: sticky; top: 0; z-index: 40;
    background: var(--surface-card);
    border-bottom: 1px solid var(--border-subtle);
  }
  .dheader-in {
    width: min(calc(100% - 48px), 1240px); margin: 0 auto;
    display: flex; align-items: center; gap: 22px;
    min-height: 76px; padding: 10px 0;
  }
  .dheader .brand-logo-horizontal { width: 160px; }
  .dnav-groups { position: relative; display: flex; align-items: center; gap: 2px; }
  .dnav-link {
    display: flex; align-items: center; gap: 7px;
    min-height: 44px; padding: 10px 14px;
    font-size: 14.5px; font-weight: 500; color: var(--text-primary);
    background: transparent; border: 0; cursor: pointer;
    border-radius: var(--radius-pill);
  }
  .dnav-link:hover, .dnav-link.active { background: var(--surface-sky); }
  .dnav-link[aria-expanded="true"] { color: var(--text-primary); background: var(--surface-sky); }
  .dnav-caret { flex: none; transition: transform .16s ease; }
  .dnav-link[aria-expanded="true"] .dnav-caret { transform: rotate(180deg); }
  .dsearch {
    flex: 1; max-width: 420px;
    display: flex; align-items: center; gap: 8px;
    height: 46px; padding: 0 20px;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-control);
  }
  .dsearch input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: 0; }
  .dsearch-mini {
    place-items: center; width: 44px; height: 44px;
    margin-inline-start: auto; color: var(--text-primary);
    border-radius: var(--radius-pill);
  }
  .dsearch-mini:hover { background: var(--surface-sky); }
  .dnav { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
  .dnav-icon {
    display: grid; place-items: center; width: 44px; height: 44px;
    color: var(--text-primary); border-radius: var(--radius-pill);
  }
  .dnav-icon:hover, .dnav-icon[aria-current="page"] { background: var(--surface-sky); }
  .dnav .btn { padding: 10px 18px; font-size: 13px; }
  .dheader .btn.brand {
    background: var(--action-primary); color: var(--action-ink);
    font-size: 13px; letter-spacing: normal; font-weight: 700;
  }
  .dcta-short { display: none; }
  .nav-avatar { width: 30px; height: 30px; }

  /* One compact popover, swapped content: a group opens at hover speed because
     nothing is fetched when it does. It belongs to the nav, not the viewport. */
  .dpanel {
    display: block;
    position: absolute; inset-inline-start: 0; top: calc(100% + 16px);
    z-index: 5;
    width: min(700px, calc(100vw - 240px));
    padding: 10px;
    background: var(--surface-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-float);
  }
  .dpanel[hidden] { display: none; }
  .dpanel-in {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px; padding: 6px;
  }
  .dpanel-in[hidden] { display: none; }
  .dpanel-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .dpanel-h {
    margin: 0; margin-block-end: 6px; margin-inline-start: 12px;
    font-family: var(--font-ui); font-size: 10px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--text-muted);
  }
  .dpanel-item { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: var(--radius-xs); }
  .dpanel-item:hover, .dpanel-item:focus-visible { background: var(--surface-sky); }
  .dpanel-item-t { font-weight: 600; font-size: 14.5px; }
  .dpanel-item-d { color: var(--text-secondary); font-size: 12.5px; }
  .dpanel-knowledge { display: flex; flex-direction: column; }
  .dpanel-feature-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  }
  .dpanel-feature {
    --dpanel-feature-surface: var(--surface-meadow);
    position: relative;
    display: flex; flex-direction: column; gap: 4px;
    min-height: 112px; padding-block: 16px; padding-inline: 16px 42px;
    background: color-mix(in srgb, var(--dpanel-feature-surface) 82%, var(--surface-card));
    border: 1px solid color-mix(in srgb, var(--dpanel-feature-surface) 68%, var(--border-subtle));
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-control);
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
  }
  .dpanel-feature:nth-child(3n + 2) { --dpanel-feature-surface: var(--surface-coral); }
  .dpanel-feature:nth-child(3n + 3) { --dpanel-feature-surface: var(--surface-butter); }
  .dpanel-feature:hover, .dpanel-feature:focus-visible {
    background: color-mix(in srgb, var(--dpanel-feature-surface) 92%, var(--surface-card));
    border-color: color-mix(in srgb, var(--dpanel-feature-surface) 72%, var(--text-secondary));
    transform: translateY(-1px);
  }
  .dpanel-feature-t { font-weight: 700; font-size: 16px; }
  .dpanel-feature-d { color: var(--text-secondary); font-size: 12.5px; line-height: 1.45; }
  .dpanel-feature-arrow { position: absolute; inset-inline-end: 16px; inset-block-end: 14px; font-size: 18px; }
  .dpanel-quick {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 8px; padding-block-start: 4px;
  }
}

/* The search field is the first thing to go, then the call to action shortens;
   below 900px the mobile bar takes the whole job. */
@media (min-width: 900px) and (max-width: 1179px) {
  .dsearch { display: none; }
  .dsearch-mini { display: grid; }
  .dnav { margin-inline-start: 0; }
}
@media (min-width: 900px) and (max-width: 1039px) {
  .dheader-in { gap: 12px; }
  .dnav-link { padding-inline: 10px; font-size: 13.5px; }
  .dcta-long { display: none; }
  .dcta-short { display: inline; }
}