/* ---------- Ann's panel ----------

   The writing coach, on the house assistant tab. She has her own room file
   (rooms/forge-script-ann.js) and now her own sheet, because the room's sheet
   was past the size warn and she is a surface of her own rather than part of
   the page: she is house furniture that Script Forge dresses, and nothing in
   here draws a screenplay.

   THE WIDTH THAT HAS TO WORK IS 200px. That is where the panel opens, and
   nearly every rule below exists because something read fine in a mockup and
   was unreadable, wrapped or clipped at the width a writer actually meets. */

/* ---------- Ann ---------- */
/* ---------- Ann, in a narrow panel ----------
   The right panel opens at 200px and a writer can pull it wider, so the
   resting width is the width that has to work. Everything here stacks: her
   name and role take the row, her two controls take the next, and a setting
   puts its label over its control rather than beside it. The first draft laid
   them out side by side, which reads fine in a mockup and cost the role its
   second word, wrapped every setting three lines deep, and pushed Load the
   kitchen sink off the edge of the panel. */
.house-right-ann .house-ann-head{ flex-wrap:wrap; }
.sf-ann-controls{
  width:100%;
  display:flex;
  align-items:center;
  gap:var(--s2);
}
.sf-ann-controls .house-ann-gear{ margin-left:auto; }
.sf-ann-pill{ color:var(--muted); white-space:nowrap; }
.sf-ann-pill.on{
  border-color:var(--accent);
  background:var(--accent);
  color:var(--onAccent);
}
/* THE PANEL'S EDGE IS --ann-pad (2026-08-31), not a token that happens to
   equal it today. Both blocks in this sheet that sit against the panel wall
   read the variable now, so Ann's inset moves in one place or not at all. */
.sf-ann-gear-panel{
  margin:0 var(--ann-pad) var(--ann-pad);
  padding:var(--s4);
  display:flex;
  flex-direction:column;
  gap:var(--s4);
  border:var(--bd) solid var(--edge);
  border-radius:var(--r-md);
  background:var(--panel);
}
.sf-ann-setting{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--s2);
  color:var(--text);
  font-size:var(--t-small);
  line-height:1.3;
}
.sf-ann-range{ width:100%; }
.sf-ann-range input{
  width:100%;
  min-width:0;
  accent-color:var(--accent);
}
/* the number and its unit sit together under the slider, not beside the label */
.sf-ann-range span:nth-last-child(-n+2){ display:inline; color:var(--muted); font-size:var(--t-label); }
.sf-ann-gear-actions{
  display:flex;
  flex-direction:column;
  gap:var(--s2);
}
/* A LABEL IN A 200px PANEL WRAPS OR IT IS LOST. The house button holds one
   line and clips, which is right on a row of chips beside each other and
   wrong in a stacked column this narrow: "Show every element on one page"
   arrived on screen as "how every element on one pag", and the sample script
   chip had been losing its last letters since the day it was written. Every
   full-width button in this panel is as tall as its own words. */
.sf-ann-gear-actions .btn,
.sf-ann-chips .btn,
.sf-ann-walk .btn{
  width:100%;
  height:auto;
  min-height:0;
  padding-block:var(--s3);
  white-space:normal;
  line-height:1.35;
}
.sf-ann-chips{
  display:flex;
  flex-direction:column;
  gap:var(--s2);
  margin-top:var(--s4);
}
.sf-ann-chips .btn{ text-align:left; }

/* the number and its unit share the last row, under the slider */
.sf-ann-range{ display:flex; flex-flow:row wrap; align-items:center; gap:var(--s2); }
.sf-ann-range > span:first-child{ width:100%; }


/* ---------- Red Fish, Blue Fish ----------
   The shape, in dumb words, when somebody has been stuck long enough that
   they said so. It sits in Ann's panel and never on the page, which is the
   whole point of it: she shows the shape, they still type the line. */
.sf-fish{
  margin:var(--s2) 0 0;
  padding:var(--s4);
  border-radius:var(--r-sm);
  border-left:3px solid var(--accent);
  background:var(--inset);
  color:var(--text);
  font-family:var(--sf-mono);
  font-size:var(--t-small);
  line-height:1.5;
  white-space:pre-wrap;
}

/* The lesson's own controls, pinned under the log and above the ask box.
   They are chrome, not conversation, so they do not scroll away with it. */
.sf-ann-walk{
  flex:none;
  margin:0 var(--ann-pad) var(--ann-gap);
  padding-top:var(--s3);
  border-top:var(--bd) solid var(--edge);
  display:flex;
  flex-direction:column;
  gap:var(--s2);
}