/* nav_shell_html — the form's stylesheet.
   Every rule is scoped :where(.px-nav-shell), which adds no specificity, so no
   rule changes which declaration wins. Five stay BARE: the root rule itself,
   its universal box-sizing reset, the @keyframes block, and the two rules whose
   SUBJECT's ancestor is the root (.px-nav-shell.px-nav-no-timer ... and
   .px-nav-shell.is-loading ...) — wrapping those in :where(.px-nav-shell)
   would ask for a shell inside a shell and never match.
   [data-theme="dark"] .px-nav-theme-knob keeps its document-level ancestor and
   takes the scope in the middle: (0,2,0) before and after. */
/* =====================================================================
   px_ui / nav_shell_html — shared page shell + navigation drawer
   (W-A, OD-12, 3C-07). Generalised from management's
   main/navigation_menu_html.

   COLOUR POLICY (3C-07 / 3T-07 / OD-02, hard):
     * ZERO colour literals live in this file. Every surface, text and
       border colour is a --px-* token from the unified set.
     * NO var() fallbacks (3C-03b) — an unresolved token must fail
       visibly rather than silently paint a stand-in.
     * The per-screen accent arrives on the local --px-nav-accent* vars,
       set by the script below from the host-supplied accentQuad or
       derived from --px-accent. Those vars are referenced ONLY by the
       active-item rules, so the shell paints correctly before any
       screen is active.
   ===================================================================== */

.px-nav-shell {
  font-family: var(--px-font);
  background: var(--px-bg-deep);
  color: var(--px-text-primary);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  animation: px-nav-fade-in 220ms ease-out both;
}

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

@keyframes px-nav-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------- logo ---- */
:where(.px-nav-shell) .px-nav-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 16px 8px;
  flex-shrink: 0;
}
:where(.px-nav-shell) .px-nav-logo[hidden] { display: none; }
:where(.px-nav-shell) .px-nav-logo img { max-width: 100%; height: auto; max-height: 80px; }

/* -------------------------------------------------- theme toggle ---- */
:where(.px-nav-shell) .px-nav-theme-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 16px;
  flex-shrink: 0;
}

/* Owner 07/08: the toggle is CENTRED, and on a light-only screen it is
   disabled in place rather than taken away. Hiding it would remove it from
   the flow and shift every menu item above and below it as the user moved
   on and off the Branding screen. Present but inert costs no layout. */
:where(.px-nav-shell) .px-nav-theme-section[data-px-disabled="yes"] .px-nav-theme-toggle {
  opacity: 0.4;
  cursor: not-allowed;
}
:where(.px-nav-shell) .px-nav-theme-section[data-px-disabled="yes"] .px-nav-theme-label {
  opacity: 0.4;
}

:where(.px-nav-shell) .px-nav-theme-toggle {
  position: relative;
  width: 52px;
  height: 26px;
  border-radius: 999px;
  background: var(--px-bg-elevated);
  border: 1px solid var(--px-border);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 160ms ease, border-color 160ms ease;
}
:where(.px-nav-shell) .px-nav-theme-toggle:focus-visible {
  outline: 2px solid var(--px-border-strong);
  outline-offset: 2px;
}

:where(.px-nav-shell) .px-nav-theme-track {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  font-size: 12px;
  line-height: 1;
  color: var(--px-text-muted);
  pointer-events: none;
}

:where(.px-nav-shell) .px-nav-theme-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--px-bg-card);
  box-shadow: var(--px-shadow);
  transition: transform 160ms ease;
  pointer-events: none;
}
[data-theme="dark"] :where(.px-nav-shell) .px-nav-theme-knob { transform: translateX(26px); }

:where(.px-nav-shell) .px-nav-theme-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--px-text-secondary);
}

/* ---------------------------------------------------------- user ---- */
:where(.px-nav-shell) .px-nav-user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 12px;
  padding: 10px 12px;
  background: var(--px-bg-card);
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius);
  box-shadow: var(--px-shadow);
  flex-shrink: 0;
}

:where(.px-nav-shell) .px-nav-user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--px-bg-elevated);
  color: var(--px-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

:where(.px-nav-shell) .px-nav-user-info { min-width: 0; }
:where(.px-nav-shell) .px-nav-user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--px-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:where(.px-nav-shell) .px-nav-user-email {
  font-size: 11px;
  color: var(--px-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -------------------------------------------------------- logout ---- */
:where(.px-nav-shell) .px-nav-logout-section { padding: 0 12px 8px; flex-shrink: 0; }

:where(.px-nav-shell) .px-nav-logout-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--px-danger);
  background: var(--px-bg-card);
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius-sm);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
:where(.px-nav-shell) .px-nav-logout-btn:hover {
  background: color-mix(in srgb, var(--px-danger) 8%, transparent);
  border-color: var(--px-danger);
}
:where(.px-nav-shell) .px-nav-logout-icon { font-size: 13px; line-height: 1; }

/* ---------------------------------------------------------- menu ---- */
:where(.px-nav-shell) .px-nav-menu-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 12px 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--px-border-strong) var(--px-bg-elevated);
}
:where(.px-nav-shell) .px-nav-menu-wrapper::-webkit-scrollbar { width: 8px; }
:where(.px-nav-shell) .px-nav-menu-wrapper::-webkit-scrollbar-track {
  background: var(--px-bg-elevated);
  border-radius: 4px;
}
:where(.px-nav-shell) .px-nav-menu-wrapper::-webkit-scrollbar-thumb {
  background: var(--px-border-strong);
  border-radius: 4px;
}

:where(.px-nav-shell) .px-nav-menu { display: flex; flex-direction: column; gap: 4px; }

:where(.px-nav-shell) .px-nav-btn {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  color: var(--px-text-secondary);
  background: var(--px-bg-card);
  border: 1px solid var(--px-border);
  border-left: 3px solid transparent;
  border-radius: var(--px-radius-sm);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease,
              border-color 140ms ease, box-shadow 140ms ease;
}
:where(.px-nav-shell) .px-nav-btn:hover {
  background: color-mix(in srgb, var(--px-bg-elevated) 92%, var(--px-text-primary));
  color: var(--px-text-primary);
}
:where(.px-nav-shell) .px-nav-btn:focus-visible {
  outline: 2px solid var(--px-border-strong);
  outline-offset: 2px;
}

:where(.px-nav-shell) .px-nav-btn-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Elapsed-on-this-screen badge. Rendered on every button but only
   filled for the active one, so the row height never jumps on
   navigation. Hidden outright when the host declined the timer. */
:where(.px-nav-shell) .px-nav-btn-elapsed {
  margin-left: auto;
  padding-left: 8px;
  font-family: var(--px-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--px-text-muted);
}
.px-nav-shell.px-nav-no-timer .px-nav-btn-elapsed,
.px-nav-shell.px-nav-no-timer .px-nav-timer-section {
  display: none;
}

/* --- collapsible section (a record's `group`) ---------------------- */

:where(.px-nav-shell) .px-nav-group { display: flex; flex-direction: column; gap: 4px; }

:where(.px-nav-shell) .px-nav-group-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  color: var(--px-text-secondary);
  background: var(--px-bg-elevated);
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius-sm);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
:where(.px-nav-shell) .px-nav-group-trigger:hover {
  background: color-mix(in srgb, var(--px-bg-elevated) 92%, var(--px-text-primary));
  color: var(--px-text-primary);
}
:where(.px-nav-shell) .px-nav-group-trigger:focus-visible {
  outline: 2px solid var(--px-border-strong);
  outline-offset: 2px;
}

:where(.px-nav-shell) .px-nav-group-chevron {
  margin-left: auto;
  font-size: 11px;
  line-height: 1;
  transition: transform 160ms ease;
}
:where(.px-nav-shell) .px-nav-group-trigger.is-expanded .px-nav-group-chevron {
  transform: rotate(90deg);
}

/* Collapsed by default; `max-height: none` on expand so a section of
   any length scrolls with the menu rather than being clipped. */
:where(.px-nav-shell) .px-nav-group-body {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding-left: 10px;
}
:where(.px-nav-shell) .px-nav-group-body.is-visible { display: flex; }

/* --- session timer ------------------------------------------------- */

:where(.px-nav-shell) .px-nav-timer-section { padding: 0 12px 8px; }
:where(.px-nav-shell) .px-nav-timer-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--px-bg-elevated);
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius-sm);
}
:where(.px-nav-shell) .px-nav-timer-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--px-text-muted);
}
:where(.px-nav-shell) .px-nav-timer-value {
  font-family: var(--px-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--px-text-secondary);
}

/* The ONLY rules that consume the accent vars — set from the record's
   accentQuad or derived from --px-accent by the script below. */
:where(.px-nav-shell) .px-nav-btn.is-active {
  color: var(--px-nav-accent);
  background: var(--px-nav-accent-subtle);
  border-color: var(--px-nav-accent-subtle);
  border-left-color: var(--px-nav-accent);
  box-shadow: 0 0 0 3px var(--px-nav-accent-glow);
  font-weight: 600;
}
:where(.px-nav-shell) .px-nav-btn.is-active:hover {
  background: var(--px-nav-accent-glow);
  color: var(--px-nav-accent-alt);
}

/* Host is mid-navigation: the whole shell is inert. */
.px-nav-shell.is-loading .px-nav-btn,
.px-nav-shell.is-loading .px-nav-logout-btn,
.px-nav-shell.is-loading .px-nav-theme-toggle {
  pointer-events: none;
  opacity: 0.55;
  cursor: progress;
}