/* BOARD RAILS v2 (Nick 2026-09-07: "the panels overlap the middle and seem
   bootleg").

   TWO MODES, one law — main is never resized:
   • DOCK  (viewport wide enough that the 1280px column leaves real margin):
     each rail takes exactly that wasted margin. It cannot overlap the
     content, because it is only ever as wide as the empty space.
   • DRAWER (no margin to spare): the rail is a deliberate overlay with a
     scrim and a close control — an intentional panel, not a floating box.
   Rails also sit BELOW the header (--hdr-h, measured live) so the brand bar
   and nav are never covered.

   Styling is tokens-only, matching the board (spec §1): panel grounds,
   gold display headers, the same radii, shadows and type scale. */

:root {
  --rail-max: 380px;
  --rail-min: 268px;
  --rail-w: 320px;
  --hdr-h: 0px;
}

/* ---------- shell ---------- */
.rail {
  position: fixed;
  top: var(--hdr-h);
  bottom: 0;
  width: var(--rail-w);
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 0;
  transition: transform .22s cubic-bezier(.2, .7, .3, 1);
  overflow: hidden;
}
.rail-l { left: 0; border-left: 0; }
.rail-r { right: 0; border-right: 0; }
body.rl-off .rail-l { transform: translateX(-101%); }
body.rr-off .rail-r { transform: translateX(101%); }

/* DOCK: the rail is exactly the margin the 1280px column doesn't use, so it
   is physically incapable of covering the middle. */
@media (min-width: 1830px) {
  :root { --rail-w: clamp(268px, calc((100vw - 1300px) / 2), 380px); }
  .rail { box-shadow: none; }
  .rail-scrim { display: none; }
}
/* DRAWER: not enough margin — an open rail is an intentional overlay. */
@media (max-width: 1829px) {
  .rail { box-shadow: var(--shadow-pop); }
  .rail-scrim {
    position: fixed; inset: var(--hdr-h) 0 0 0; z-index: 39;
    background: rgba(12, 15, 20, .38);
  }
  body.rl-off.rr-off .rail-scrim { display: none; }
}
@media (max-width: 640px) { :root { --rail-w: min(94vw, 400px); } }

/* ---------- the tab that reopens a collapsed rail ---------- */
.rail-tab {
  position: fixed; top: calc(var(--hdr-h) + 46px); z-index: 41;
  background: var(--panel); color: var(--mut);
  border: 1px solid var(--line); border-left: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 10px 6px; cursor: pointer;
  font-family: var(--font-body); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase;
  writing-mode: vertical-rl; box-shadow: var(--shadow);
}
.rail-tab.r { right: 0; left: auto; border: 1px solid var(--line);
  border-right: 0; border-radius: var(--radius) 0 0 var(--radius); }
.rail-tab:hover { color: var(--tx); border-color: var(--rule); }
body:not(.rl-off) .rail-tab.l, body:not(.rr-off) .rail-tab.r { display: none; }
/* phone: the page gutter is 14px, so the tab must fit inside it - a slim handle low on
   the edge, never over a heading or the first letter of a line (seen 2026-09-27) */
@media (max-width: 640px) {
  .rail-tab { top: auto; bottom: 150px; padding: 8px 1px; font-size: 8px; letter-spacing: .1em; opacity: .9; }
}

/* ---------- rail header ---------- */
.rail-hd {
  display: flex; align-items: baseline; gap: var(--gap-2);
  padding: 11px 12px 10px; border-bottom: 1px solid var(--line);
  background: var(--panel2);
  font-family: var(--font-display); font-size: var(--fs-2); color: var(--tx);
}
.rail-hd .sub { font-family: var(--font-body); font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); }
.rail-hd .x { margin-left: auto; cursor: pointer; background: none;
  border: 0; color: var(--faint); font-size: 15px; line-height: 1;
  padding: 2px 5px; border-radius: var(--radius); }
.rail-hd .x:hover { color: var(--tx); background: var(--panel); }
.rail-body { flex: 1; overflow-y: auto; padding: var(--gap-2); }
.rail-body::-webkit-scrollbar { width: 9px; }
.rail-body::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 9px;
  border: 3px solid var(--panel); }

/* ---------- left: sessions ---------- */
.sx-new {
  display: block; width: calc(100% - 20px); margin: 10px;
  padding: 9px 12px; background: var(--panel2); color: var(--tx);
  border: 1px solid var(--rule); border-radius: var(--radius);
  font: 600 var(--fs-1)/1 var(--font-body); cursor: pointer;
  text-align: left; }
.sx-new:hover { border-color: var(--gold-ink); color: var(--gold-ink); }
.sx { display: block; padding: 9px 10px; border-radius: var(--radius);
  cursor: pointer; border: 1px solid transparent; margin-bottom: 2px; }
.sx:hover { background: var(--panel2); }
.sx.on { background: var(--panel2); border-color: var(--line);
  box-shadow: inset 2px 0 0 var(--gold); }
.sx b { display: block; font: 500 var(--fs-1)/1.35 var(--font-body);
  color: var(--tx); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.sx span { display: block; margin-top: 2px; font-size: var(--fs-0);
  color: var(--faint); }

/* ---------- right: chat ---------- */
.ch-turn { margin: 0 0 var(--gap-3); }
.ch-q { font: 600 var(--fs-1)/1.45 var(--font-body); color: var(--tx);
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) var(--radius) 2px;
  padding: 8px 10px; }
.ch-a { margin-top: 7px; padding: 2px 2px 0;
  font: 400 var(--fs-1)/var(--lh) var(--font-body); color: var(--tx);
  white-space: pre-wrap; word-break: break-word; }
.ch-meta { font-size: var(--fs-0); color: var(--faint); margin-top: 6px;
  display: flex; gap: 8px; align-items: center; }
.ch-meta .tag { border: 1px solid var(--line); border-radius: 20px;
  padding: 1px 7px; color: var(--mut); }
.ch-empty { color: var(--mut); font-size: var(--fs-1); line-height: var(--lh);
  padding: 6px 4px; }

.ch-form { display: flex; gap: var(--gap-1); padding: var(--gap-2);
  border-top: 1px solid var(--line); background: var(--panel2); }
.ch-form textarea {
  flex: 1; resize: none; height: 58px;
  font: 400 var(--fs-1)/1.45 var(--font-body); color: var(--tx);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 8px 10px; }
.ch-form textarea:focus { outline: 0; border-color: var(--gold-ink); }
.ch-form button { padding: 0 14px; border-radius: var(--radius);
  border: 1px solid var(--rule); background: var(--panel); color: var(--tx);
  font: 600 var(--fs-1)/1 var(--font-body); cursor: pointer; }
.ch-form button:hover { border-color: var(--gold-ink); color: var(--gold-ink); }

/* ---------- artifacts: drafts + related ---------- */
.ch-art { border-top: 1px solid var(--line); background: var(--panel);
  max-height: 38%; overflow-y: auto; padding: var(--gap-2); }
.ch-art h4 { margin: 0 0 6px; font: 600 10px/1 var(--font-body);
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); }
.ch-art a { display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-0); color: var(--tx); text-decoration: none;
  padding: 6px 8px; border-radius: var(--radius);
  border: 1px solid transparent; }
.ch-art a:hover { background: var(--panel2); border-color: var(--line); }
.ch-art a.dft { border-color: var(--line); background: var(--panel2);
  margin-bottom: 3px; }
.ch-art a span.k { font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint);
  border: 1px solid var(--line); border-radius: 20px; padding: 1px 6px;
  flex: 0 0 auto; }
.ch-art a.dft span.k { color: var(--gold-ink); border-color: var(--gold-soft);
  background: var(--gold-soft); }
.ch-art a i { margin-left: auto; font-style: normal; color: var(--faint);
  padding: 0 3px; }
.ch-art a i:hover { color: var(--gold-ink); }


/* ---------- collision with the pre-existing floating controls ----------
   While a rail is open, its floating counterpart stands down. Rail closed =
   the board exactly as it was. */
body:not(.rr-off) .askfab,
body:not(.rr-off) .askpanel { display: none !important; }
body:not(.rl-off) .toc-fab,
body:not(.rl-off) .toc-panel { display: none !important; }