/* px_ui / master_detail_html — the form's stylesheet, an asset because the
   server strips a template's style text.
   Head-linked from anvil.yaml native_deps.head_html, so it also styles the
   designer canvas.

   Scoping: the root rule `.px-md-shell` stays bare, and so does every rule
   that already named the root as an ancestor — `:where()` around one of those
   would COST it a class. Everything else takes `:where(.px-md-shell)`, which
   adds ZERO specificity, so no rule changes which declaration wins.

   No second class is needed anywhere in this file. The `px-md-` stem appears
   in no host theme asset, in PX_TOKENS_CSS / PX_CHROME_CSS or in
   PXM_SHARED_CSS, so every scoped rule here ties with nothing. The one rule
   that reaches host-slotted children, `.px-md-shell *`, sets `border-box` —
   the same value every competing declaration in the estate sets — so the
   head-versus-runtime order cannot change what is painted.

   No designer gate. Nothing here is hidden pending JavaScript: the two
   display:none rules live inside the @media block and ARE the wide/narrow
   layout, which the canvas resolves the same way at either width. */

/* =====================================================================
   px_ui / master_detail_html — the shared responsive master/detail
   container (6C-49). `.px-md-detail-open` is the narrow-viewport state:
   its two rules show the detail panel and hide the list panel.

   Changing tab does NOT clear the state class here: tabs are a separate
   component and the host wires the two together.

   COLOUR POLICY (3C-07 / 3T-07 / OD-02 / 3C-03b, hard):
     * ZERO colour literals — every surface, border and text colour is
       a --px-* token.
     * NO var() fallbacks — an unresolved token must fail visibly
       rather than silently paint a stand-in.

   BREAKPOINT: 768px, and the ONE place it is written in
   CSS. master_detail.mjs reads the same value from NARROW_QUERY; the
   two must stay equal or focus/history fire on the wrong layout.
   ===================================================================== */

.px-md-shell {
  display: flex;
  gap: var(--px-space-md);
  align-items: flex-start;
  font-family: var(--px-font);
  color: var(--px-text-primary);
  box-sizing: border-box;
}

.px-md-shell * { box-sizing: border-box; }

:where(.px-md-shell) .px-md-list-panel {
  width: 360px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--px-space-sm);
}

:where(.px-md-shell) .px-md-detail-panel { flex: 1; min-width: 0; }

/* The detail region is programmatically focusable (focus moves into it
   on a narrow-viewport open) but must not paint a focus ring for that
   scripted move — the ring belongs on the list option the user drove. */
:where(.px-md-shell) .px-md-detail-panel:focus { outline: none; }

:where(.px-md-shell) .px-md-list {
  max-height: 600px;
  overflow-y: auto;
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius-sm);
  background: var(--px-bg-card);
}

:where(.px-md-shell) .px-md-item {
  display: flex;
  flex-direction: column;
  gap: var(--px-space-xs);
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--px-border);
  border-left: 3px solid transparent;
  font-size: 1rem;
  font-weight: 600;
  color: var(--px-text-primary);
  background: transparent;
  transition: background var(--px-transition-fast);
}

:where(.px-md-shell) .px-md-item:last-child { border-bottom: none; }
:where(.px-md-shell) .px-md-item:hover { background: var(--px-bg-elevated); }
:where(.px-md-shell) .px-md-item:focus { outline: 2px solid var(--px-accent); outline-offset: -2px; }

:where(.px-md-shell) .px-md-item[aria-selected="true"] {
  background: var(--px-accent-soft);
  border-left-color: var(--px-accent);
}

/* Wide viewports show both panels, so there is nothing to go back to. */
:where(.px-md-shell) .px-md-back-btn { display: none; }

@media (max-width: 768px) {
  .px-md-shell { flex-direction: column; gap: 0; }
  :where(.px-md-shell) .px-md-list-panel { width: 100%; }

  /* Detail becomes a full-screen overlay; the list hides behind it. */
  :where(.px-md-shell) .px-md-detail-panel {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--px-z-modal);
    background: var(--px-bg-deep);
    overflow-y: auto;
    padding: var(--px-space-md);
    -webkit-overflow-scrolling: touch;
  }
  /* `.px-md-detail-open` IS the root — the module adds the class to the
     form root itself — so this pair stays BARE, byte for byte. Scoped as
     `:where(.px-md-shell) .px-md-detail-open ...` it would never match and
     the whole narrow-viewport behaviour would vanish with no error. */
  .px-md-detail-open .px-md-detail-panel { display: block; }
  .px-md-detail-open .px-md-list-panel { display: none; }

  :where(.px-md-shell) .px-md-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
    padding: 8px 14px;
    min-height: 40px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--px-text-secondary);
    background: var(--px-bg-card);
    border: 1px solid var(--px-border-strong);
    border-radius: var(--px-radius-sm);
  }
  :where(.px-md-shell) .px-md-back-btn:hover,
  :where(.px-md-shell) .px-md-back-btn:focus {
    background: var(--px-bg-elevated);
    outline: none;
  }
}