/* The shared shell every page gets from templates/base.html: a small base, the rail, and the
   Need help now? window. A page's own look lives in its own stylesheet.

   The rail floats over the page on a desktop and never pushes it. It collapses to a small handle
   at the left edge to give the page its full width, and the handle brings it back. On a phone it is
   a bar along the bottom. Pages read two variables to keep clear of it:
     --rail-w    the width the rail covers on the left (0 when it is collapsed, and on a phone)
     --rail-bar  the height the bar covers at the bottom (0 on a desktop) */

/* ---------- base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{text-wrap:balance}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
  transition-duration:.001ms!important;scroll-behavior:auto!important}}

:root{--rail-w:58px;--rail-bar:0px}
:root[data-rail="closed"]{--rail-w:0px}

/* A page's centred column. It stays centred while the window is wide enough and starts beside the
   rail on a narrower one, so the rail never covers it. The page sets the column's width with --col. */
.shell-col{max-width:var(--col,940px);margin-left:max(var(--rail-w),calc((100% - var(--col,940px)) / 2));margin-right:auto}

/* ---------- the rail ---------- */
.rail{position:fixed;left:0;top:0;bottom:0;width:58px;z-index:60;display:flex;flex-direction:column;align-items:center;
  gap:3px;padding:10px 0 12px;background:color-mix(in srgb,var(--surface) 88%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-right:1px solid var(--rule);
  transition:transform .2s ease,visibility 0s linear 0s}
:root[data-rail="closed"] .rail{transform:translateX(-100%);visibility:hidden;transition:transform .2s ease,visibility 0s linear .2s}
.rail .sp{flex:1}
.rail button,.rail a.railbtn{width:42px;height:42px;border-radius:10px;border:1px solid transparent;background:none;color:var(--ink-soft);
  display:grid;place-items:center;cursor:pointer;text-decoration:none;padding:0}
.rail button:hover,.rail a.railbtn:hover{background:var(--surface-2);color:var(--ink)}
.rail a.railbtn.active{background:var(--accent);color:var(--on-accent)}
.rail svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rail .rail-collapse{height:34px;margin-bottom:6px;color:var(--ink-faint)}
.rail .rail-collapse svg{width:18px;height:18px}
.rail button:focus-visible,.rail a:focus-visible,.rail-handle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* the handle that brings a collapsed rail back */
.rail-handle{position:fixed;left:0;top:50%;z-index:60;width:20px;height:60px;margin-top:-30px;padding:0;display:none;
  align-items:center;justify-content:center;border:1px solid var(--rule-strong);border-left:0;border-radius:0 10px 10px 0;
  background:color-mix(in srgb,var(--surface) 92%,transparent);color:var(--ink-soft);cursor:pointer;
  box-shadow:2px 0 10px rgba(0,0,0,.08)}
.rail-handle:hover{color:var(--ink);width:24px}
.rail-handle svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:root[data-rail="closed"] .rail-handle{display:flex}

/* ---------- a phone: the rail is a bar along the bottom ---------- */
@media (max-width:640px){
  :root,:root[data-rail="closed"]{--rail-w:0px;--rail-bar:calc(56px + env(safe-area-inset-bottom))}
  .rail,:root[data-rail="closed"] .rail{top:auto;right:0;width:auto;flex-direction:row;justify-content:space-around;gap:0;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));border-right:0;border-top:1px solid var(--rule);
    transform:none;visibility:visible}
  .rail .sp,.rail .rail-collapse,.rail-handle,:root[data-rail="closed"] .rail-handle{display:none}
  .rail button,.rail a.railbtn{flex:1 1 0;min-width:36px;max-width:52px;width:auto;height:44px}
}
@media (pointer:coarse){.rail button,.rail a.railbtn{min-height:44px}}

/* ---------- tool chips (Shell.chips): one per tool, with a count when it ran more than once ----------
   A page lays out the box that holds them. A plain .tool-chip with text and no dot is a short note. */
.tool-chip{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-family:var(--mono);font-size:12px;
  color:var(--ink-soft);background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:5px 10px}
.tool-chip .ic{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.tool-chip.running .ic{animation:chip-pulse 1s infinite}
.tool-chip.done .ic{background:var(--iron)}
.tool-chip.error .ic{background:var(--err)}
.tool-chip .n{min-width:18px;height:18px;padding:0 5px;margin-right:-4px;border-radius:9px;background:var(--surface-2);
  border:1px solid var(--rule);color:var(--ink);font-size:10.5px;font-weight:600;line-height:16px;text-align:center}
@keyframes chip-pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- the status line (Shell.status): what a reply is doing while nothing shows yet ----------
   It takes a line of its own, after any chips beside it, and the answer fades in when it goes. */
.shell-status{display:flex;align-items:center;gap:8px;flex-basis:100%;order:9;margin:4px 0 2px;padding-left:11px;
  font-family:var(--sans);font-size:13px;line-height:1.4;color:var(--ink-soft)}   /* its dot under the chips' dots */
.shell-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;
  animation:chip-pulse 1.2s infinite}
.shell-status .ct{font-variant-numeric:tabular-nums}
.shell-reveal{animation:shell-reveal .45s ease-out}
@keyframes shell-reveal{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---------- print: the page alone ---------- */
@media print{
  :root,:root[data-rail="closed"]{--rail-w:0px;--rail-bar:0px}
  .rail,.rail-handle,.help-bg{display:none!important}
}

/* ---------- dialogs: the Need help now? window (and any page dialog that borrows its look) ---------- */
.help-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:80;padding:20px}
.help-bg.open{display:flex}
.help-card{background:var(--surface);border:1px solid var(--rule-strong);border-radius:14px;max-width:460px;width:100%;
  padding:22px 22px 12px;max-height:85vh;overflow:auto;position:relative}
.help-card h3{margin:0 0 8px;font-family:var(--serif,Georgia,serif);font-size:19px;color:var(--ink)}
.help-lead{color:var(--ink-soft);font-size:13px;line-height:1.55;margin:0 0 14px}
.help-x{position:absolute;top:8px;right:12px;border:0;background:none;color:var(--ink-faint);font-size:24px;cursor:pointer;line-height:1}
.help-item{border-top:1px solid var(--rule);padding:11px 2px}
.help-item .hn{font-weight:600;font-size:14px;color:var(--ink)}
.help-item .hc{font-size:14px;margin-top:2px;color:var(--ink)}
.help-item .hnote{color:var(--ink-faint);font-size:12px;margin-top:3px}
.help-item a{color:var(--iron)}
@media (pointer:coarse){.help-x{min-width:44px;min-height:44px}}