/* ============================================================================
   Elroy design system — one palette, one nav, one set of components.
   Loaded LAST on every page so it settles disagreements with inline styles.

   The palette is black, white and grey. Red is an ACCENT, not a colour:
   it marks the brand and it marks trouble, and nothing else. If red is on
   screen more than twice, something is wrong with the page, not the palette.
   ========================================================================= */

:root {
  /* ground */
  --bg:        #0B0B0B;   /* the canvas */
  --bg-2:      #111111;   /* raised: header, sidebars */
  --panel:     #141414;   /* cards, tables, wells */
  --panel-2:   #1A1A1A;   /* hover, stripe, input */
  --line:      #262626;   /* hairline */
  --line-2:    #333333;   /* emphasised divider */

  /* ink */
  --ink:       #FFFFFF;   /* primary */
  --ink-2:     #A3A3A3;   /* secondary, labels */
  --ink-3:     #6B6B6B;   /* tertiary, hints, disabled */

  /* the one accent */
  --red:       #D92B2B;
  --red-hi:    #F04444;   /* hover only */
  --red-dim:   #7A1818;   /* borders, fills under text */
  --red-wash:  rgba(217, 43, 43, .10);

  /* Verdicts are a stoplight, and a stoplight is the one place hue carries
     meaning rather than decoration. These three are the ONLY chromatic colours
     outside the brand mark — margins.py's GREEN / AMBER / RED is the product,
     and a reader should be able to grade a page without reading a word of it. */
  --ok:        #3FB950;   /* GREEN  — passes */
  --warn:      #E0A32E;   /* AMBER  — go look */
  --bad:       var(--red);/* RED    — fails */

  --radius:    6px;
  --radius-lg: 10px;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Aliases for the names the nineteen pages already use. These matter more
     than they look: --accent alone is referenced 164 times, so whatever it
     points at IS the palette. It points at white. Red is reserved for --bad,
     the logo, and the current-page marker — nothing else earns it. */
  --accent:            var(--ink);
  --accent-vivid:      var(--ink);
  --accent-subtle:     var(--ink-3);
  --accent-glow:       rgba(255, 255, 255, .06);
  --accent-green:      var(--ok);
  --accent-gold:       var(--warn);
  --accent-blue:       var(--ink-2);
  --accent-cyan:       var(--ink-2);
  --accent-purple:     var(--ink-2);

  --fg:                var(--ink);
  --text:              var(--ink);
  --muted:             var(--ink-2);
  --fg-sec:            var(--ink-2);
  --ink-4:             var(--ink-3);

  --page:              var(--bg);
  --bg-dark:           var(--bg);
  --panel-bg:          var(--panel);
  --panel-card:        var(--panel);
  --card-bg:           var(--panel);
  --panel-card-hover:  var(--panel-2);
  --border:            var(--line);
  --panel-border:      var(--line);
  --border-hover:      var(--line-2);
  --track:             var(--panel-2);

  --good:              var(--ok);
  --green:             var(--ok);
  --amber:             var(--warn);
  --run:               var(--ink-2);
}

* { box-sizing: border-box; }

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink-2); text-decoration: none; }
a:hover { color: var(--ink); }

code, kbd, pre, .mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- left navigation sidebar */

.elroy-sidebar a { text-decoration: none; border: none; background: none; }
.elroy-sidebar img { max-width: none; filter: none; }
.elroy-sidebar span, .elroy-sidebar b { text-transform: none; }

.elroy-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-w, 236px);
  background: var(--bg-2);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-x: hidden;
  user-select: none;
  /* Pages style their own right-hand panel with a bare `aside { }` rule, which
     leaks onto this injected <aside> for every property we don't declare.
     arm/forearm/upper_arm and style.css all set padding, which pushed the brand
     down by 16-22px; cell/growth/optimizer set gap. Reset them explicitly. */
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  gap: 0;
  height: auto;
  min-width: 0;
  border-left: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html.has-elroy-sidebar body {
  margin-left: var(--sidebar-w, 236px);
  padding-top: 0;
  transition: margin-left 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Collapsed sidebar state */
html.elroy-nav-collapsed .elroy-sidebar {
  width: var(--sidebar-collapsed-w, 56px);
}

html.elroy-nav-collapsed body {
  margin-left: var(--sidebar-collapsed-w, 56px);
}

/* Sidebar Header */
.elroy-sidebar-head {
  position: relative;
  height: 52px;
  display: flex;
  align-items: center;
  /* flex-end, not space-between: the brand below is absolutely positioned and
     out of flow, so the collapse toggle is the only flex child left and needs
     pinning right. */
  justify-content: flex-end;
  padding: 0 12px 0 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

/* Centred on the sidebar itself, not on the space left over beside the toggle.
   Taken out of flow so the toggle button's width does not shift it. */
.elroy-sidebar-brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  text-decoration: none;
  cursor: pointer;
}

.elroy-brand-badge {
  display: block !important;
  height: 30px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
}

.elroy-brand-square {
  display: none !important;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  flex-shrink: 0;
}

.elroy-sidebar-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  white-space: nowrap;
}

.elroy-sidebar-brand-text span {
  color: var(--ink-3);
  font-size: 9px;
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.elroy-sidebar-toggle {
  background: none;
  border: 1px solid transparent;
  color: var(--ink-3);
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.elroy-sidebar-toggle:hover {
  color: var(--ink);
  background: var(--panel-2);
  border-color: var(--line-2);
}

.elroy-sidebar-toggle .icon-toggle {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

html.elroy-nav-collapsed .elroy-sidebar-toggle .icon-toggle {
  transform: rotate(180deg);
}

html.elroy-nav-collapsed .elroy-sidebar-head {
  padding: 0;
  justify-content: center;
}

html.elroy-nav-collapsed .elroy-sidebar-brand {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

html.elroy-nav-collapsed .elroy-sidebar-brand:hover .elroy-brand-square {
  transform: scale(1.08);
  box-shadow: 0 0 10px rgba(217, 43, 43, 0.4);
}

html.elroy-nav-collapsed .elroy-brand-badge {
  display: none !important;
}

html.elroy-nav-collapsed .elroy-sidebar-brand-text {
  display: none !important;
}

html.elroy-nav-collapsed .elroy-brand-square {
  display: block !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

html.elroy-nav-collapsed .elroy-sidebar-toggle {
  display: none;
}

/* Nav scroll area */
.elroy-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.elroy-sidebar-nav::-webkit-scrollbar {
  width: 4px;
}
.elroy-sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 2px;
}

/* Section */
.elroy-nav-section {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.elroy-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  font: 600 10px/1 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

.elroy-section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--ink-2);
  flex-shrink: 0;
}

.elroy-subnav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Nav Item */
.elroy-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 10px 6px 20px;
  border-radius: var(--radius);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 500;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: all 0.12s ease;
  position: relative;
}

.elroy-nav-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: transparent;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.elroy-nav-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.elroy-nav-item:hover {
  color: var(--ink);
  background: var(--panel-2);
}

.elroy-nav-item[aria-current="page"] {
  color: var(--ink);
  background: var(--panel-2);
  border-color: var(--line-2);
  font-weight: 600;
}

.elroy-nav-item[aria-current="page"] .elroy-nav-dot {
  background: var(--red);
  box-shadow: 0 0 6px var(--red-wash);
}

/* Collapsed state adjustments */
html.elroy-nav-collapsed .elroy-section-title,
html.elroy-nav-collapsed .elroy-nav-label,
html.elroy-nav-collapsed .elroy-sidebar-brand-text,
html.elroy-nav-collapsed .elroy-collapse-pill span {
  display: none;
}

html.elroy-nav-collapsed .elroy-nav-item {
  justify-content: center;
  padding: 8px 0;
}

html.elroy-nav-collapsed .elroy-nav-dot {
  width: 6px;
  height: 6px;
  background: var(--line-2);
}

html.elroy-nav-collapsed .elroy-nav-item[aria-current="page"] .elroy-nav-dot {
  background: var(--red);
  box-shadow: 0 0 8px var(--red);
}

html.elroy-nav-collapsed .elroy-section-header {
  justify-content: center;
  padding: 4px 0;
}

/* Sidebar Footer */
/* Environment chip. Dev is quiet because dev is the constant case; production
   is inverted so it cannot be mistaken for it at a glance. Monochrome on
   purpose - hue in this system means a verdict, and this is not one. */
.elroy-env-chip {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 2px 6px;
  border-radius: 3px;
  margin-right: 7px;
  color: var(--ink-3);
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  flex-shrink: 0;
}
.elroy-env-chip.prod {
  color: var(--bg);
  background: var(--ink);
  border-color: var(--ink);
}
html.elroy-nav-collapsed .elroy-env-chip {
  display: none;
}

/* A column, not a row. The footer carries the operator, the sign-out and the
   collapse control; three block children in one flex row wrapped into an
   unreadable pile at 236px wide. */
.elroy-sidebar-foot {
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  flex-shrink: 0;
  background: var(--bg-2);
}

/* Environment Badge above Username */
.elroy-foot-env-row {
  display: flex;
  align-items: center;
}

.elroy-env-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 700 9px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 6px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.elroy-env-badge.dev {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--ink-2);
}

.elroy-env-badge.prod {
  background: rgba(43, 217, 128, 0.12);
  border: 1px solid rgba(43, 217, 128, 0.3);
  color: #2BD980;
}

html.elroy-nav-collapsed .elroy-foot-env-row {
  justify-content: center;
  width: 100%;
}

html.elroy-nav-collapsed .elroy-env-badge {
  font-size: 8px;
  padding: 2px 4px;
  letter-spacing: 0;
}

/* Operator Avatar & User Menu */
.elroy-user-menu-wrapper {
  position: relative;
  width: 100%;
}

.elroy-user-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
  font-family: inherit;
}

.elroy-user-btn:hover {
  background: var(--panel-2);
  border-color: var(--line-2);
}

.elroy-avatar-badge {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #D92B2B;
  color: #FFFFFF;
  font: 700 12px/28px var(--mono);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
}

.elroy-avatar-status {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  border: 1.5px solid var(--bg);
}

.elroy-user-btn .elroy-operator-name {
  font: 600 12.5px var(--sans);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.elroy-user-chevron {
  color: var(--ink-3);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.elroy-user-menu-wrapper.open .elroy-user-chevron {
  transform: rotate(180deg);
}

/* User Popup Menu */
.elroy-user-popup {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: 220px;
  background: #121212;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7);
  padding: 6px;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.15s ease;
}

.elroy-popup-header {
  padding: 8px 10px;
}

.elroy-popup-user-name {
  font: 700 12.5px var(--sans);
  color: #FFFFFF;
}

.elroy-popup-user-email {
  font: 500 10.5px var(--mono);
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.elroy-popup-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 0;
}

.elroy-popup-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.85);
  font: 500 12px var(--sans);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}

.elroy-popup-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}

.elroy-popup-item.logout {
  color: #FF7070;
}

.elroy-popup-item.logout:hover {
  background: rgba(217, 43, 43, 0.15);
  color: #FF9090;
}

/* Collapsed state adjustments */
html.elroy-nav-collapsed .elroy-user-btn .elroy-operator-name,
html.elroy-nav-collapsed .elroy-user-btn .elroy-user-chevron {
  display: none !important;
}

html.elroy-nav-collapsed .elroy-user-btn {
  justify-content: center;
  padding: 6px 0;
}

html.elroy-nav-collapsed .elroy-user-popup {
  left: 56px;
  bottom: 0;
}

html.elroy-nav-collapsed .elroy-sidebar-foot {
  padding: 8px 6px;
  align-items: center;
}


/* ------------------------------------------------------------- structure */

.elroy-page,
.elroy-page-wrap {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 24px 28px 60px;
  box-sizing: border-box;
}

.elroy-page-wrap.wide {
  max-width: 1600px;
}

.elroy-page > header, .elroy-page-wrap > header { margin-bottom: 20px; }
.elroy-page h1, .elroy-page-wrap h1 { font-size: 22px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.01em; }
.elroy-page .lede, .elroy-page-wrap .lede { color: var(--ink-2); font-size: 13px; margin: 0; max-width: 68ch; }

.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 14px;
}
.panel > h2, .panel-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-2); margin: 0 0 10px;
}
.hint { color: var(--ink-3); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* ------------------------------------------------------------ index list */

.elroy-list { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.elroy-list li { border-bottom: 1px solid var(--line); }
.elroy-list li:first-child { border-top: 1px solid var(--line); }
.elroy-list a {
  display: grid; grid-template-columns: 200px 1fr auto; gap: 18px; align-items: baseline;
  padding: 13px 10px; color: var(--ink);
}
.elroy-list a:hover { background: var(--panel); }
.elroy-list .name { font-weight: 600; font-size: 13px; }
.elroy-list .desc { color: var(--ink-2); font-size: 12px; }
.elroy-list .meta { color: var(--ink-3); font: 500 11px var(--mono); white-space: nowrap; }
.elroy-list a:hover .meta { color: var(--red); }
.elroy-list-group {
  font: 600 11px var(--mono); letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); margin: 26px 0 8px;
}

/* -------------------------------------------------------------- controls */

button, .btn {
  font: 600 12px var(--sans); padding: 7px 13px; border-radius: var(--radius);
  border: 1px solid var(--line-2); background: var(--panel-2); color: var(--ink);
  cursor: pointer;
}
button:hover, .btn:hover { background: #202020; border-color: #3d3d3d; }
/* Inverted, not red. A page can have several primary actions; it should not
   have several red things. */
button.primary, .btn.primary { background: var(--ink); border-color: var(--ink); color: var(--bg); }
button.primary:hover, .btn.primary:hover { background: #E5E5E5; border-color: #E5E5E5; }
button.danger, .btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
button.danger:hover, .btn.danger:hover { background: var(--red-hi); border-color: var(--red-hi); }
button.ghost, .btn.ghost { background: transparent; color: var(--ink-2); }
button.ghost:hover { color: var(--ink); background: var(--panel-2); }

input, select, textarea {
  font: 500 12px var(--sans); color: var(--ink);
  background: var(--panel-2); border: 1px solid var(--line-2);
  border-radius: var(--radius); padding: 6px 8px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink-3); }
input[type=range] { accent-color: var(--ink); padding: 0; border: none; background: none; }
label { color: var(--ink-2); font-size: 11px; font-weight: 500; }

/* ---------------------------------------------------------------- tables */

table { width: 100%; border-collapse: collapse; font-size: 12px; }
th {
  text-align: left; font: 600 10.5px var(--sans); text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-3);
  padding: 7px 9px; border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
td { padding: 7px 9px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:hover td { background: var(--panel-2); }
td.empty, .empty {
  color: var(--ink-3); text-align: center; padding: 22px 10px; font-style: normal;
}

/* --------------------------------------------------------------- verdict */

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 20px; font: 600 11px var(--sans);
  border: 1px solid var(--line-2); color: var(--ink-2); background: var(--panel-2);
}
.badge.bad, .badge.red { color: var(--red); border-color: var(--red-dim); background: var(--red-wash); }
.badge.ok, .badge.green { color: var(--ok); border-color: #1E5C28; background: rgba(63,185,80,.10); }
.badge.warn, .badge.amber { color: var(--warn); border-color: #6B4D14; background: rgba(224,163,46,.10); }

.green, .ok   { color: var(--ok); }
.amber, .warn { color: var(--warn); }
.red, .bad    { color: var(--red); }
.bg-green { background: var(--ok); }
.bg-amber { background: var(--warn); }
.bg-red   { background: var(--red); }

.track { position: relative; height: 6px; background: var(--panel-2); border-radius: 3px; overflow: hidden; }
.fill  { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--ink-2); }
.fill.ok, .fill.green { background: var(--ok); }
.fill.warn, .fill.amber { background: var(--warn); }
.fill.bad, .fill.red { background: var(--red); }

/* ----------------------------------------------------------------- tiles */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.tile {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 11px 13px;
}
.tile .k { color: var(--ink-3); font: 600 10px var(--sans); text-transform: uppercase; letter-spacing: .07em; }
.tile .v { color: var(--ink); font: 700 21px var(--mono); margin-top: 3px; }
.tile.accent { border-color: var(--line-2); }
.tile.accent .v { color: var(--ink); }
.tile.bad { border-color: var(--red-dim); }
.tile.bad .v { color: var(--red); }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }
::-webkit-scrollbar-track { background: transparent; }

/* Several studios float their own "ELROY / <studio>" pill over the viewer.
   The bar says both of those things now, so the pill is a duplicate. */
html.has-elroy-bar #viewer > .brand { display: none; }

/* ==========================================================================
   MOBILE
   --------------------------------------------------------------------------
   Breakpoint 860px, mirrored from MOBILE_BP in chrome.js. Change both or the
   script and the stylesheet will disagree about which mode they are in.

   The rail becomes a 52px top bar with a hamburger on the right; the nav opens
   as a full-screen sheet over the content with the same button as its close.
   ========================================================================== */

/* The hamburger does not exist on desktop. */
.elroy-hamburger { display: none; }
.elroy-hamburger .icon-close { display: none; }

@media (max-width: 860px) {

  /* ---- the rail becomes a top bar --------------------------------------- */
  .elroy-sidebar {
    top: 0; left: 0; right: 0; bottom: auto;
    width: 100% !important;
    height: 52px;
    flex-direction: column;
    border-right: none;
    border-bottom: 1px solid var(--line);
    overflow: hidden;
    transition: none;
  }
  .elroy-sidebar-head {
    height: 52px;
    width: 100%;
    padding: 0 12px 0 14px;
    border-bottom: none;
    flex-shrink: 0;
  }

  /* The desktop collapse control is meaningless when the rail is a bar. */
  .elroy-sidebar-toggle { display: none !important; }

  .elroy-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink-2);
    /* 40px, not the 24px the icon needs: a tap target smaller than this is a
       miss on a phone. */
    width: 40px;
    height: 40px;
    margin-left: auto;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .elroy-hamburger:hover,
  .elroy-hamburger:focus-visible { color: var(--ink); border-color: var(--line-2); }

  /* Nav and footer live in the sheet, not the bar. */
  .elroy-sidebar-nav,
  .elroy-sidebar-foot { display: none; }

  /* ---- the sheet -------------------------------------------------------- */
  html.elroy-mobile-nav-open .elroy-sidebar {
    height: 100%;
    height: 100dvh;          /* dvh so iOS chrome does not clip the footer */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-2);
  }
  html.elroy-mobile-nav-open .elroy-sidebar-nav {
    display: block;
    flex: 1 1 auto;
    padding: 6px 0 8px;
  }
  html.elroy-mobile-nav-open .elroy-sidebar-foot {
    display: flex;
    border-top: 1px solid var(--line);
  }
  html.elroy-mobile-nav-open .elroy-hamburger .icon-burger { display: none; }
  html.elroy-mobile-nav-open .elroy-hamburger .icon-close { display: block; }

  /* Bigger rows: nav items are 32px on desktop, which is a coin-flip on glass. */
  .elroy-nav-item { padding: 11px 14px; font-size: 14px; }
  .elroy-section-title { padding: 12px 14px 6px; }

  /* ---- the page under it ------------------------------------------------ */
  html.has-elroy-sidebar body,
  html.elroy-nav-collapsed body {
    margin-left: 0 !important;
    padding-top: 52px;
  }

  /* The app-shell pages pin the body to the viewport and turn off scrolling so
     a 3D viewer and a fixed-width inspector can sit side by side. On a phone
     that is a page that cannot be read: the aside is off-screen and nothing
     scrolls to reach it. Unpin it and let the two stack. */
  html.has-elroy-sidebar body {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    display: block !important;
  }
  html.has-elroy-sidebar main {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* The 3D viewers size themselves from a flexed, viewport-height parent. Once
     the body is unpinned that parent has no height, the viewer collapses to
     zero, and its absolutely-positioned HUD ends up floating over the page
     heading. Give it an explicit box instead of auto. */
  html.has-elroy-sidebar #viewer,
  html.has-elroy-sidebar #view3d,
  html.has-elroy-sidebar .viewer {
    width: 100% !important;
    max-width: 100% !important;
    height: 52vh !important;
    min-height: 300px !important;
    flex: none !important;
    position: relative !important;
  }
  html.has-elroy-sidebar #viewer canvas,
  html.has-elroy-sidebar #view3d canvas,
  html.has-elroy-sidebar .viewer canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
  }
  /* :not(.elroy-sidebar) matters. The nav is itself an <aside>, so an
     unqualified rule here unpins the navigation along with the page's
     inspector panel - it lands in flow, gets pushed down by the body's own
     padding-top, and the top bar ends up 52px below the top of the screen. */
  html.has-elroy-sidebar aside:not(.elroy-sidebar) {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    border-left: none !important;
    border-top: 1px solid var(--line);
    position: static !important;
    flex: none !important;
  }

  /* Multi-column layouts collapse to one. Covers the grid utilities the
     dashboards use as well as any two-column main. */
  html.has-elroy-sidebar main,
  .grid, .grid-2, .grid-3, .tiles, .econgrid, .cards {
    grid-template-columns: 1fr !important;
  }

  /* Wide content scrolls inside its own box rather than pushing the page
     sideways. A horizontally scrolling body is the classic mobile defect. */
  html.has-elroy-sidebar .scroll,
  html.has-elroy-sidebar .table-wrap,
  html.has-elroy-sidebar .panel > table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  html.has-elroy-sidebar { overflow-x: hidden; }

  .elroy-page { padding: 14px 12px 40px; }
}

/* Phones proper: tighten further. */
@media (max-width: 520px) {
  .elroy-page { padding: 12px 10px 36px; }
  .elroy-page h1 { font-size: 20px; }
  html.has-elroy-sidebar .panel { padding: 12px; }
}

/* ============================================================================
   Model Catalog Table & 3D Studio Dual-Mode Layout
   ========================================================================= */

body.catalog-mode {
  display: block !important;
  height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
body.catalog-mode .studio-layout,
body.catalog-mode #studio-view {
  display: none !important;
}
body.catalog-mode .catalog-page-wrap,
body.catalog-mode #catalog-view {
  display: block !important;
}

body.studio-mode {
  display: flex !important;
  height: 100vh !important;
  overflow: hidden !important;
}
body.studio-mode .catalog-page-wrap,
body.studio-mode #catalog-view {
  display: none !important;
}
body.studio-mode .studio-layout,
body.studio-mode #studio-view {
  display: flex !important;
  flex: 1;
  height: 100%;
  width: 100%;
  min-width: 0;
}

.catalog-page-wrap {
  max-width: 1360px;
  margin: 0 auto;
  padding: 32px 28px 64px;
}

/* Category Hero */
.catalog-hero {
  margin-bottom: 24px;
}
.catalog-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.catalog-badge .badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
}
.catalog-hero h1 {
  font-size: 26px;
  font-weight: 750;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  color: var(--ink);
}
.catalog-hero p {
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.55;
  max-width: 860px;
  margin: 0;
}

/* KPI Summary Cards */
.catalog-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.catalog-stat-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
}
.catalog-stat-card .stat-label {
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.catalog-stat-card .stat-val {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.catalog-stat-card .stat-sub {
  font-size: 11px;
  color: var(--ink-2);
  margin-top: 2px;
}

/* Search & Filter Bar */
.catalog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.catalog-search-wrap {
  position: relative;
  flex: 1;
  max-width: 420px;
  min-width: 240px;
}
.catalog-search-wrap svg {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  pointer-events: none;
}
.catalog-search-input {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 12px 8px 34px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12.5px;
  outline: none;
  transition: border-color 0.15s ease;
}
.catalog-search-input:focus {
  border-color: var(--line-2);
  background: var(--panel-2);
}
.catalog-filter-pills {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.catalog-pill {
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 550;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.catalog-pill:hover {
  color: var(--ink);
  border-color: var(--line-2);
}
.catalog-pill.active {
  background: var(--panel-2);
  border-color: var(--ink-3);
  color: var(--ink);
  font-weight: 600;
}

/* Model Catalog Table */
.catalog-table-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.catalog-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  text-align: left;
}
.catalog-table th {
  background: var(--bg-2);
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.catalog-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: middle;
}
.catalog-table tr:last-child td {
  border-bottom: none;
}
.catalog-row {
  cursor: pointer;
  transition: background 0.15s ease;
}
.catalog-row:hover td {
  background: var(--panel-2);
}

.model-cell-primary {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.model-cell-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.model-cell-sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
}

.order-count-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(63, 185, 80, 0.12);
  border: 1px solid rgba(63, 185, 80, 0.3);
  color: var(--ok);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.btn-launch-3d {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.catalog-row:hover .btn-launch-3d {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

/* Studio HUD Top Bar (floating in 3D viewer) */
.studio-hud-top {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 100;
  pointer-events: none;
}
.studio-hud-left,
.studio-hud-right {
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}
.btn-back-table {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 20px;
  background: rgba(14, 14, 14, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line-2);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 650;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.btn-back-table:hover {
  background: var(--panel-2);
  border-color: var(--ink-3);
  transform: translateY(-1px);
}
.studio-model-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(14, 14, 14, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink);
}
.studio-view-toggle {
  display: inline-flex;
  align-items: center;
  background: rgba(14, 14, 14, 0.88);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line-2);
  border-radius: 20px;
  padding: 2px;
}
.studio-view-toggle button {
  background: none;
  border: none;
  padding: 4px 10px;
  border-radius: 16px;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.studio-view-toggle button.active {
  background: var(--panel-2);
  color: var(--ink);
}


/* =========================================================================
   CAM TAB — the EA-90 on machine #1 (the Tormach), inside the model page.
   Overlays the 3D viewer rather than sitting beside it: the question "can
   this machine make this part" deserves the whole canvas, and the sidebar
   parameters stay live so a design change re-runs the programs.
   ========================================================================= */

#cam-view {
  display: none;
  position: absolute;
  inset: 0;
  background: var(--bg);
  z-index: 6;
}
body.cam-mode #cam-view { display: block; }
body.cam-mode #statusbadge,
body.cam-mode #building { display: none !important; }

.cam-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 64px 28px 40px;
}
.cam-loading { color: var(--ink-3); font-family: var(--mono); font-size: 12px; }

.cam-wrap { max-width: 1080px; margin: 0 auto; }
.cam-wrap h2 {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2); margin: 26px 0 10px; font-family: var(--mono);
  border-bottom: 1px solid var(--line); padding-bottom: 6px;
}
.cam-wrap h2:first-child { margin-top: 0; }

.cam-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cam-head h1 { font-size: 20px; margin: 0; letter-spacing: -.01em; }
.cam-head .sub { color: var(--ink-2); font-size: 12px; }

/* headline numbers */
.cam-stats { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 4px; }
.cam-stat {
  flex: 1 1 150px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px 12px;
}
.cam-stat .k {
  font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); font-family: var(--mono);
}
.cam-stat .v {
  font-size: 20px; font-weight: 650; margin-top: 3px; font-family: var(--mono);
}
.cam-stat .n { font-size: 11px; color: var(--ink-3); margin-top: 2px; }

/* the "this is not evidence" band */
.cam-note {
  border-left: 2px solid var(--warn); background: rgba(224,163,46,.07);
  padding: 9px 12px; border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 12px; color: var(--ink-2); margin: 12px 0;
}
.cam-note.bad { border-left-color: var(--red); background: var(--red-wash); }
.cam-note b { color: var(--ink); }
.cam-note ul { margin: 6px 0 0; padding-left: 16px; }
.cam-note li { margin: 3px 0; }

table.cam-table { width: 100%; border-collapse: collapse; font-size: 12px; }
table.cam-table th {
  text-align: left; font-family: var(--mono); font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--line-2); padding: 6px 8px; font-weight: 600;
}
table.cam-table td {
  padding: 6px 8px; border-bottom: 1px solid var(--line);
  vertical-align: top; color: var(--ink-2);
}
table.cam-table td.n { font-family: var(--mono); text-align: right; color: var(--ink); }
table.cam-table tr:hover td { background: var(--panel-2); }
table.cam-table td.part { color: var(--ink); font-weight: 600; }

/* op cards */
.cam-op {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px; margin: 10px 0;
}
.cam-op-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.cam-op-head .op {
  font-family: var(--mono); font-weight: 700; font-size: 13px; color: var(--ink);
}
.cam-op-head .setup { color: var(--ink-3); font-size: 11px; }
.cam-op-head .t { margin-left: auto; font-family: var(--mono); font-size: 12px; }
.cam-tool {
  font-family: var(--mono); font-size: 11px; color: var(--ink-2);
  padding: 5px 0 5px 10px; border-left: 1px solid var(--line-2); margin: 5px 0;
}
.cam-tool .tk { color: var(--ink); font-weight: 600; }
.cam-tool .why { color: var(--ink-3); display: block; margin-top: 2px; }
.cam-tool .also { color: var(--warn); display: block; margin-top: 2px; }

.cam-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }