/* The flow's own skin. Layout is /nine/shell.css; this is only what the nine
   canvases put inside themselves.

   THE VARIABLE NAMES ARE THE PACK'S, NOT MINE. The first draft of this file
   invented --line, --wash and --ink-2, none of which exist: an undefined var()
   is not an error, it is transparent, so all ninety ticks rendered invisible
   and the canvas looked empty rather than broken. The pack publishes
   --ink --muted --paper --card --rule --crimson --ochre --olive --teal, and a
   trade re-skins by swapping the pack, which only works if nothing here
   invents a colour of its own. */

/* ── the question ───────────────────────────────────────────────────────── */
.ask{
  font-size:clamp(1rem,1.9vw,1.35rem);
  line-height:1.28;
  letter-spacing:-.011em;
  margin:0;
  color:var(--ink);
}

/* ── the ninety, as ninety ──────────────────────────────────────────────── */
/* Five rows of eighteen, because 90 divides that way exactly and a ragged last
   row reads as an error. Not a percentage bar: the ninety are countable, and a
   bar that fills would hide WHICH ones are left, which is the only thing a
   person standing at step six actually wants to know. */
.grid{
  display:grid;
  grid-template-columns:repeat(18,1fr);
  gap:2px;
  margin:.55rem 0 .35rem;   /* clear of the rule above and of a scaled tick */
}
.tick{
  appearance:none;
  border:0;
  padding:0;
  aspect-ratio:1;
  border-radius:2px;
  cursor:pointer;
  background:var(--rule);
  transition:transform .12s ease, background .12s ease;
}
.tick[data-state="done"]{ background:var(--ink); }
/* The 23 a website can carry read differently from the 67 that cannot, because
   that difference is the ceiling and the ceiling is the honest part. */
.tick[data-reach="system"]{ opacity:.45; }
.tick[data-here]{ outline:2px solid var(--crimson); outline-offset:1px; transform:scale(1.4); }
.tick:hover{ transform:scale(1.4); }

/* ── why this one ───────────────────────────────────────────────────────── */
.cellq{ font-style:italic; color:var(--muted); margin:0 0 .5rem; }
.does{ margin:0 0 .5rem; }

/* ── the answer ─────────────────────────────────────────────────────────── */
.answer{ display:flex; flex-direction:column; gap:.55rem; height:100%; }
.answer textarea{
  width:100%;
  flex:1 1 auto;
  min-height:5rem;
  resize:none;
  font:inherit;
  font-size:1rem;                 /* +2pt on the box you type into — Victor, 23 Sep */
  line-height:1.45;
  padding:.7rem .8rem;
  border:1px solid var(--rule);
  border-radius:8px;
  background:var(--paper);
  color:var(--ink);
}
.answer textarea:focus{ outline:2px solid var(--crimson); outline-offset:-1px; }
.eg{
  margin:0;
  font-size:.82rem;
  color:var(--muted);
  /* A worked example shows the SHAPE. It sits under the box rather than inside
     it as placeholder text, because a placeholder is something people paste. */
}
.answer .go{ display:flex; align-items:center; gap:.5rem; }
.answer button{
  font:inherit; font-weight:600; cursor:pointer;
  padding:.5rem .9rem; border-radius:7px;
  border:1px solid transparent; background:var(--ink); color:var(--paper);
}
.answer button.quiet{
  background:transparent; color:var(--muted);
  border-color:var(--rule); font-weight:400;
}
.saved{ font-size:.78rem; color:var(--muted); }

/* ── where you stand ────────────────────────────────────────────────────── */
.stand{ display:flex; flex-direction:column; gap:.3rem; height:100%;
        min-height:0; overflow-y:auto; scrollbar-width:thin; }
.stand .dial{ width:100%; }
.stand hr{ border:0; border-top:1px solid var(--rule); margin:.45rem 0; width:100%; }
.stand .band{ margin:0; font-weight:600; }
.prog{ margin:0; font-size:1.6rem; font-weight:600; line-height:1; }
.prog small{ font-size:.72rem; font-weight:400; color:var(--muted); margin-left:.25rem; }

/* ── this part of the ninety ────────────────────────────────────────────── */
.near{ margin:0; padding-left:1.4rem; font-size:.86rem; }
.near li{ cursor:pointer; padding:.1rem 0; color:var(--muted); }
.near li[data-state="done"]{ opacity:.6; text-decoration:line-through; }
.near li[data-here]{ color:var(--ink); font-weight:600; }
.near li:hover{ color:var(--ink); }

/* ── move ───────────────────────────────────────────────────────────────── */
.move{ display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; }
/* flex:0 0 auto, or the buttons stretch to the canvas width and stack, which
   put this canvas 30px over its box. */
.move button{
  flex:0 0 auto; width:auto;
  font:inherit; cursor:pointer; padding:.45rem .8rem; border-radius:7px;
  border:1px solid var(--rule); background:var(--card); color:var(--ink);
}
.move button:disabled{ opacity:.4; cursor:default; }
.move .note{ margin:0; font-size:.76rem; }