/* Precision Studio workstation chrome. Layout only — IDs stay in engineer-console.js. */

body.ps-workstation {
  --ps-nav-w: 220px;
  background: var(--surface-root, #070b10) !important;
}

body.ps-workstation .hdr {
  position: sticky;
  top: 0;
  z-index: 40;
}

/* The sticky header is 48-269px depending on how `.hdr` wraps, so programmatic
   scrolling (`scrollIntoView`, `#anchor` links, focus) must be kept clear of it
   or it parks controls underneath the bar. `--vip-hdr-h` is the measured layout
   height published by engineer-console.js.
   This has to sit on `:root`: scroll-padding is read from the scroll container,
   and for the document viewport that is the `html` element — unlike `overflow`
   and `scroll-behavior`, it does not propagate up from `body`. This sheet only
   ships on the Engineer surface, so `:root` is already scoped to it. */
:root {
  scroll-padding-top: calc(var(--vip-hdr-h, var(--titlebar-h, 48px)) + 8px);
}

.ps-workspace-nav {
  display: none;
}

@media (min-width: 1100px) {
  body.ps-workstation {
    padding-left: var(--ps-nav-w);
  }
  .ps-workspace-nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: var(--vip-hdr-h, var(--titlebar-h, 48px));
    bottom: 0;
    width: var(--ps-nav-w);
    padding: 16px 10px 24px;
    gap: 4px;
    background: var(--surface-panel, #0d131b);
    border-right: 1px solid var(--border-subtle, #1d2a34);
    z-index: 30;
    overflow-y: auto;
  }
  .ps-workspace-nav a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    color: var(--text-secondary, #8d9aaa);
    text-decoration: none;
    font-size: 13px;
  }
  .ps-workspace-nav a:hover {
    background: var(--surface-raised, #121a23);
    color: var(--text-primary, #f4f7fa);
  }
  .ps-workspace-nav a[aria-current="page"] {
    color: var(--text-primary, #f4f7fa);
    box-shadow: inset 2px 0 0 var(--action-process, #ff3d4d);
    background: rgba(255, 61, 77, 0.08);
  }
}

/* Keyboard focus.
   These previously shared one rule with :hover and set `outline: none`, so the
   only indicator was #121a23 on #0d131b — about 1.1:1, effectively invisible,
   and indistinguishable from hover. The primary Engineer navigation had no
   perceivable focus indicator (WCAG 2.4.7). Kept top-level, outside the
   min-width:1100px block, so it holds wherever the nav is shown. */
.ps-workspace-nav a:focus-visible,
.ps-field-nav__btn:focus-visible {
  outline: 2px solid var(--action-live, #2ed5e5);
  outline-offset: -2px;
  background: var(--surface-raised, #121a23);
  color: var(--text-primary, #f4f7fa);
  border-radius: 8px;
}

body.ps-forensic .ps-workspace-nav a[aria-current="page"] {
  box-shadow: inset 2px 0 0 var(--action-live, #2ed5e5);
  background: rgba(46, 213, 229, 0.08);
}

.ps-quick-strip {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 8px 16px;
  list-style: none;
  overflow-x: auto;
  border-bottom: 1px solid var(--border-subtle, #1d2a34);
  background: var(--surface-panel, #0d131b);
}
.ps-quick-strip li {
  flex: none;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--border-subtle, #1d2a34);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-secondary, #8d9aaa);
}
.ps-quick-strip li::before {
  content: attr(data-step) " · ";
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--action-process, #ff3d4d);
}

.ps-field-nav {
  display: none;
}

@media (max-width: 640px) {
  /* One source for the two stacked fixed bars at the bottom of the screen:
     the field nav, and the sticky Process bar (mobile.css) directly above
     it (61px measured, plus a little air). */
  :root {
    --ps-field-nav-h: 64px;
    --ps-bottom-stack: calc(var(--ps-field-nav-h) + 69px + env(safe-area-inset-bottom, 0px));
  }
  .ps-field-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    min-height: calc(var(--ps-field-nav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--surface-panel, #0d131b);
    border-top: 1px solid var(--border-subtle, #1d2a34);
  }
  .ps-field-nav__btn {
    min-height: 44px;
    border: 0;
    background: transparent;
    color: var(--text-secondary, #8d9aaa);
    font: 600 12px/1 var(--font-ui, system-ui, sans-serif);
  }
  .ps-field-nav__btn[aria-current="page"] {
    color: var(--text-primary, #f4f7fa);
    box-shadow: inset 0 -2px 0 var(--action-process, #ff3d4d);
  }
  /* The field nav owns the bottom of the screen, so the sticky Process bar
     sits directly above it. Both were fixed to bottom:0, and every tap on
     Process landed on "Analyze" (measured on a 412px viewport). */
  body.ps-workstation .mobile-action-bar {
    bottom: calc(var(--ps-field-nav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: 8px;
  }
  /* mobile.css re-sets this at :root after this sheet loads; out-rank it. */
  html:root {
    scroll-padding-bottom: var(--ps-bottom-stack);
  }
  body.ps-workstation {
    padding-bottom: var(--ps-bottom-stack);
  }
  .ps-field-sheet {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: var(--ps-bottom-stack);
    z-index: 45;
    max-height: 40vh;
    overflow: auto;
    padding: 12px;
    border: 1px solid var(--border-subtle, #1d2a34);
    border-radius: 10px 10px 0 0;
    background: var(--surface-raised, #121a23);
  }
  .ps-field-sheet__close {
    min-height: 44px;
    width: 100%;
    margin-bottom: 8px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle, #1d2a34);
    background: var(--surface-panel, #0d131b);
    color: var(--text-primary, #f4f7fa);
  }
}

@media (max-width: 1024px) and (min-width: 641px) {
  .ec-col-rack,
  .ec-col-session {
    max-height: none;
  }
}

body.eng-console .btn:hover,
body.eng-console input[type="range"]:hover {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  body.ps-workstation *,
  body.ps-workstation *::before,
  body.ps-workstation *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}