/* FREE SAILING — blm-stage.css — the results surface the rail drives.

   The rail is 400px of conversation. The stage is everything else: the page
   area, taken over by what was just asked, exactly as the model does it.
   It sits ABOVE the page and BELOW the rail (rail is z-index 71).            */

.blm-stage{
  position:fixed; z-index:60;
  top:0; left:0; right:0; bottom:0;
  background:var(--white,#fff);
  overflow-y:auto; overscroll-behavior:contain;
  padding:0 0 120px;
  animation:stIn .22s ease both;
}
@keyframes stIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .blm-stage{ animation:none; } }

/* the rail keeps its own space on desktop so the two read as one product */
@media (min-width:900px){
  .blm-stage{ right:436px; border-right:1px solid var(--line-2); }
}

/* ───────────────────────────────────────────────────────────────── header */
.st-head{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center; gap:14px;
  padding:18px 26px 15px;
  background:var(--white,#fff); border-bottom:1px solid var(--line-2);
}
.st-head h2{
  font-size:clamp(17px,2.1vw,23px); line-height:1.25; color:var(--navy);
  letter-spacing:-.02em; font-weight:650; margin:0; flex:1; min-width:0;
}
.st-x{
  flex:none; width:34px; height:34px; border:0; border-radius:50%;
  background:none; color:var(--ink-40); font-size:24px; line-height:1;
  cursor:pointer; display:grid; place-items:center;
}
.st-x:hover{ background:var(--pale,#F2F7FA); color:var(--navy); }

/* ── the pager. Every turn keeps its own set; refining never destroys the
      last one, so going back is a button rather than retyping. */
.st-pager{
  flex:none; display:flex; align-items:center; gap:2px;
  border:1px solid var(--line); border-radius:999px; padding:2px;
  background:#fff;
}
.st-pager button{
  width:26px; height:26px; border:0; border-radius:50%; background:none;
  color:var(--navy); font-size:17px; line-height:1; cursor:pointer;
  display:grid; place-items:center;
}
.st-pager button:hover:not(:disabled){ background:var(--pale,#F2F7FA); }
.st-pager button:disabled{ color:var(--line); cursor:default; }
.st-pager span{
  font-size:12px; color:var(--ink-40); padding:0 6px; font-variant-numeric:tabular-nums;
}

/* the restated query — what it thinks you asked, accumulated */
.st-line{
  margin:16px 26px 0; padding-left:12px;
  border-left:2px solid var(--cyan);
  font-size:14px; line-height:1.6; color:var(--ink-60); max-width:70ch;
}

/* ───────────────────────────────────────────────────────────────── results */
.st-grid{
  display:grid; gap:14px; padding:20px 26px 0;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  align-items:start;
}
.st-grid .card{ margin:0; }

/* evidence, highlighted inside the row, chosen by THIS query */
.st-ev{
  background:linear-gradient(transparent 58%, rgba(0,128,175,.24) 58%);
  color:inherit; padding:0 1px; border-radius:2px;
}

.st-empty{
  margin:26px; padding:26px; border:1px dashed var(--line);
  border-radius:14px; background:var(--pale,#F7FAFC); max-width:60ch;
}
.st-empty b{ display:block; font-size:16px; color:var(--navy); margin-bottom:6px; }
.st-empty span{ font-size:14.5px; line-height:1.6; color:var(--ink-60); }

/* the page behind must not scroll while the stage owns the view */
html.blm-staged, html.blm-staged body{ overflow:hidden; }

@media (max-width:899px){
  .blm-stage{ padding-bottom:78vh; }   /* the sheet covers the lower screen */
  .st-grid{ padding:16px; grid-template-columns:1fr; }
  .st-line{ margin:14px 16px 0; }

  /* On a phone the title, two actions and a close button cannot share a row —
     they collided, and the heading wrapped to six lines behind the buttons.
     Title takes the width; the actions sit under it on their own line. */
  .st-head{
    display:grid; grid-template-columns:1fr auto; gap:8px 10px;
    padding:12px 14px 10px; align-items:start;
  }
  .st-head h2{ grid-column:1; grid-row:1; font-size:16px; }
  .st-x{ grid-column:2; grid-row:1; }
  .st-pager{ grid-column:1 / -1; grid-row:2; justify-self:start; }
  .st-cmp, .st-regen{
    grid-row:3; font-size:12px; padding:6px 11px;
  }
  .st-cmp{ grid-column:1; justify-self:start; }
  .st-regen{ grid-column:2; justify-self:end; }
}

/* ── header actions: compare + regenerate */
.st-cmp, .st-regen{
  flex:none; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
  padding:7px 13px; border-radius:999px; border:1px solid var(--line);
  background:#fff; color:var(--navy); white-space:nowrap;
}
.st-cmp:hover, .st-regen:hover{ border-color:var(--cyan); }
.st-cmp.on{ background:var(--navy); border-color:var(--navy); color:#fff; }
.st-regen:disabled{ color:var(--ink-40); cursor:default; border-color:var(--line-2); }

/* ── keep / kept. Pinning a row is what makes the set yours. */
.st-cell{ position:relative; }
/* The Keep control floats over the card's top-right, so the heading needs the
   room or the two collide — which they did, straight through the title text. */
.st-cell .card > :first-child, .st-cell .card h3, .st-cell .card h4,
.st-cell .card b:first-child{ padding-right:64px; }
.st-pin{
  position:absolute; top:10px; right:10px;
  font:inherit; font-size:11.5px; font-weight:600; cursor:pointer;
  padding:5px 11px; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.94); color:var(--ink-60);
  /* Discoverable at rest, obvious on approach. A control nobody can see is a
     control nobody uses — hover-only hides it entirely on touch. */
  opacity:.55; transition:opacity .14s, border-color .14s, background .14s;
}
.st-cell:hover .st-pin, .st-pin:focus-visible{ opacity:1; border-color:var(--cyan); }
@media (hover:none){ .st-pin{ opacity:1; } }
.st-pin[aria-pressed="true"]{
  opacity:1; background:var(--navy); border-color:var(--navy); color:#fff;
}
.st-cell.pinned .card{ border-color:var(--cyan); box-shadow:0 0 0 1px var(--cyan) inset; }

/* ── compare: only columns we actually hold */
.st-table{ padding:20px 26px 0; overflow-x:auto; }
.st-table table{ border-collapse:collapse; width:100%; min-width:640px; font-size:14px; }
.st-table th{
  text-align:left; font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-40); padding:0 14px 9px 0; border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.st-table td{
  padding:12px 14px 12px 0; border-bottom:1px solid var(--line-2);
  color:var(--ink-60); vertical-align:top; line-height:1.5;
}
.st-table td b{ color:var(--navy); font-weight:600; }
.st-table tr.on td{ background:#F2FAFE; }
.st-na{ color:var(--ink-40); font-style:italic; font-size:13px; }
@media (max-width:899px){ .st-table{ padding:16px; } }