/* THE OPENFLOW SHELL (report 203, 1 October 2026).

   Mike and Tim's concept and Claude Design's handoff of it
   (`planning/openflow_design/`): a dark column of icons down the left that
   opens OVER the page, with its labels, while the pointer is on it; a white
   top bar with the firm's logo, search, the bell and the person.

   Loaded LAST, after every page sheet. It changes the shell's look and the
   rail's behaviour, and nothing inside a page. The colours are the
   handoff's: rail #11173A (--navy-deep), hover #222B57, the open row
   #2A3466, row text #C3C8DA, divider #2C3566, a count in red. */

:root {
  --of-rail-bg:      var(--navy-deep);  /* #11173A */
  --of-rail-hover:   #222B57;
  --of-rail-on:      #2A3466;
  --of-rail-ink:     #C3C8DA;
  --of-rail-dim:     #8F96B3;
  --of-rail-line:    #2C3566;
  --of-rail-count:   #D93A2B;
  --of-rail-closed:  64px;
  --of-rail-open:    240px;
}

/* ── The rail, dark ─────────────────────────────────────────────────── */
.shell-rail {
  background: var(--of-rail-bg);
  border-right: 0;
  color: var(--of-rail-ink);
}
.shell-rail__scroll { padding: 12px 10px; gap: 0; }
.shell-rail .shell-nav { gap: 0; }

/* The two headings are for a screen reader; the divider is what shows. */
.shell-rail .nav-group__label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; padding: 0; margin: 0;
}
.shell-rail .nav-group { gap: 4px; }
.shell-rail .nav-group + .nav-group {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--of-rail-line);
}

.shell-rail .nav-item {
  height: 42px; min-height: 42px;
  gap: 14px; padding: 0 11px;
  border-radius: 10px;
  color: var(--of-rail-ink);
  font-size: 14.5px; font-weight: 500;
  position: relative;
}
.shell-rail .nav-item .ms { font-size: 22px; width: 22px; flex: none; }
.shell-rail .nav-item:hover { background: var(--of-rail-hover); color: #fff; }
.shell-rail .nav-item.active,
.shell-rail .nav-item.active:hover { background: var(--of-rail-on); color: #fff; font-weight: 600; }
.shell-rail .nav-item:focus-visible { outline: 2px solid var(--copper-lift); outline-offset: -2px; }

/* A count is a small red badge on the icon, open or closed. */
.shell-rail .nav-item__count,
.shell-rail .nav-item.active .nav-item__count {
  position: absolute; top: 5px; left: 24px; margin: 0;
  min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  border-radius: 999px; background: var(--of-rail-count); color: #fff;
  font-size: 10.5px; font-weight: 600; line-height: 16px; text-align: center;
  box-shadow: none;
}

/* The firm's links, the products, the chat's history: light on the dark. */
.shell-rail .side-group-label,
.shell-rail .hist-label { color: var(--of-rail-dim); }
.shell-rail .side-link,
.shell-rail .product-link,
.shell-rail .kb-item,
.shell-rail .conv-item,
.shell-rail .conv-empty { color: var(--of-rail-ink); }
.shell-rail .side-link { background: transparent; border-color: var(--of-rail-line); }
.shell-rail .side-link:hover,
.shell-rail .product-link:hover,
.shell-rail .conv-item:hover { background: var(--of-rail-hover); color: #fff; }
.shell-rail .conv-item.active { background: var(--of-rail-on); color: #fff; }
.shell-rail .prod-sub, .shell-rail .prod-here { color: var(--of-rail-dim); }
.shell-rail .product-link.current { background: transparent; border-color: var(--of-rail-line); }
.shell-rail .new-chat-mini { color: var(--of-rail-ink); border-color: var(--of-rail-line); background: transparent; }
.shell-rail .conv-del { color: var(--of-rail-dim); }
.shell-rail__foot { border-top: 1px solid var(--of-rail-line); }
.shell-rail__powered,
.shell-rail__adealia { color: var(--of-rail-dim); }

/* ── Closed, and open on hover, at 760px and wider ─────────────────── */
@media (min-width: 760px) {
  /* The rail is taken out of the flow and the page keeps a 64px gutter for
     it, so opening it covers the page instead of pushing it. */
  html[data-rail="collapsed"] .shell-rail {
    position: fixed; top: 0; left: 0; bottom: 0; height: auto;
    width: var(--of-rail-closed);
    transition: width .16s ease, box-shadow .16s ease;
    z-index: 150;
  }
  html[data-rail="collapsed"] .shell-col { margin-left: var(--of-rail-closed); }

  html[data-rail="collapsed"] .shell-rail .nav-item { justify-content: flex-start; padding: 0 11px; }
  html[data-rail="collapsed"] .shell-rail .nav-item__count { top: 5px; left: 24px; right: auto; }
  html[data-rail="collapsed"] .shell-rail .nav-item.active .nav-item__count { box-shadow: none; }

  html[data-rail="collapsed"] .shell-rail:is(:hover, :focus-within) {
    width: var(--of-rail-open);
    box-shadow: 8px 0 24px rgba(17, 23, 58, .18);
  }
  html[data-rail="collapsed"] .shell-rail:is(:hover, :focus-within) .nav-item__label {
    position: static; width: auto; height: auto; overflow: hidden;
    clip: auto; white-space: nowrap;
  }
  html[data-rail="collapsed"] .shell-rail:is(:hover, :focus-within) .shell-rail__extra,
  html[data-rail="collapsed"] .shell-rail:is(:hover, :focus-within) .shell-rail__powered { display: block; }
  html[data-rail="collapsed"] .shell-rail:is(:hover, :focus-within) .shell-rail__powered { display: flex; }
  html[data-rail="collapsed"] .shell-rail:not(:hover):not(:focus-within) .shell-rail__foot { border-top-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-rail="collapsed"] .shell-rail { transition: none; }
}

/* ── The top bar: the firm's logo first ────────────────────────────── */
.shell-top__brand {
  display: inline-flex; align-items: center; gap: 8px;
  flex: none; margin-right: 8px;
  color: var(--ink-1); text-decoration: none; font-weight: 600;
}
.shell-top__logo { height: 28px; width: auto; max-width: 160px; display: block; object-fit: contain; }
.shell-top__name { white-space: nowrap; }
.shell-top .topsearch { max-width: 440px; }
@media (max-width: 759.98px) {
  .shell-top__brand { display: none; }
}
.shell-rail .prod-name { color: var(--of-rail-ink); }
.shell-rail .product-link.current .prod-name { color: #fff; }

/* ── The page scrolls the full width (Danny, 7 Oct 2026: "why isn't the
   scroll bar all the way to the right?") ─────────────────────────────
   `.ui-page` is the element that scrolls (nav.js keeps the window still).
   It was capped and centered, so its scrollbar sat at the edge of the
   column. Now it runs the full width and the SAME content width is
   centered inside it by padding: max(the page's gutter, half of what is
   left). Each page keeps exactly the width it had. */
@media (min-width: 760px) {
  .shell-col > .ui-page {
    --pg-c: calc(var(--content-max) - 80px);   /* the 1200 cap, minus its 40px gutters */
    --pg-g: 40px;
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    box-sizing: border-box;
    padding-left: max(var(--pg-g), calc((100% - var(--pg-c)) / 2)) !important;
    padding-right: max(var(--pg-g), calc((100% - var(--pg-c)) / 2)) !important;
  }
  .shell-col > .ui-page.of-t { --pg-g: 32px; --pg-c: 1240px; }
  .shell-col > .ui-page.t-progress { --pg-c: 880px; }
  .shell-col > .ui-page.t-form { --pg-c: 760px; }
  .shell-col > .ui-page.of-home { --pg-g: 40px; --pg-c: 1240px; }
}