/*
 * THE TEACHER'S SURFACES — the ones that are NOT the board.
 *
 * docs/מצב-לימוד.md §7, §8, §9. The ink itself is `web/sketch.js` and its
 * styles live with the rest of the chart's skin in `style.css`; what is here is
 * everything AROUND it: a sentence that plays its own step, the chip that says
 * a question carries a circled window, the card that opens a moment from
 * another day, and the "what we covered" pane.
 *
 * ⚠ ITS OWN FILE AND NOT AN ELEVENTH BLOCK IN `style.css`, deliberately. That
 * file is the CHART's skin, it is 6,000 lines, and this feature is a whole
 * surface of its own that two people ended up editing at once. Every colour
 * here is still one of the tokens `:root` declares - a hex value typed in here
 * would be exactly the drift the palette exists to prevent (see `style.css`'s
 * own opening rule: do not put a hex back into the chart).
 *
 * THE SAME SYSTEM AS THE PANEL THEY SIT IN (2026-09-27): the analyst's objects
 * in the transcript - the report card, the level notice, and the moment and
 * play cards here - are one surface, a faint ice ground with an ice hairline
 * at a row's radius, and their controls are ice on ice rather than boxes cut
 * out of the page. The user's own gesture (the circled region) is gold.
 */

/* ---- a sentence that keeps its drawing (§7, §17 decision 2) ----
 *
 * The analyst's own blue, and UNDERLINED RATHER THAN BOXED: it is a run of the
 * answer's own prose, not a control dropped into it. The glossary's clickable
 * term is gold one line up, so the two never read as the same offer - one
 * opens a definition, one replays a drawing.
 */
.clog .sk-ref{
  cursor:pointer; color:var(--agent-hi);
  border-bottom:1px solid rgba(110,169,255,.34);
  border-radius:2px;
  transition:background var(--dur-1) ease, border-color var(--dur-1) ease;
}
.clog .sk-ref:hover,
.clog .sk-ref:focus-visible{background:var(--agent-soft); border-bottom-color:var(--agent); outline:none}
.clog .sk-ref::after{
  /* A small pen, after the words, so it is legible as "this draws something"
     before anybody has pressed it. It is a glyph rather than an icon because
     it has to sit inside a line of text at its own size. */
  content:'✎'; margin-inline-start:4px; font-size:.82em; color:var(--agent); opacity:.7;
}
/* ...AND A MEMORY CITED IN AN ANSWER (§9). Same shape, different verb: it
   opens a card in the sheet rather than drawing on the chart in front of them,
   which is decision 3 - a citation does not move somebody's chart. */
.clog .mo-ref{
  cursor:pointer; color:var(--agent-hi);
  border-bottom:1px dashed rgba(110,169,255,.4);
  transition:background var(--dur-1) ease, border-color var(--dur-1) ease;
}
.clog .mo-ref:hover,
.clog .mo-ref:focus-visible{background:var(--agent-soft); border-bottom-color:var(--agent); outline:none}

/* ---- the card a citation opens (§9) ---- */
.clog .mcard{
  align-self:stretch; display:flex; flex-direction:column; gap:8px;
  padding:12px 14px; border:1px solid rgba(110,169,255,.17); border-radius:var(--r);
  background:var(--agent-dim-soft);
}
.clog .mcard img{
  width:100%; border-radius:var(--r-sm); border:1px solid var(--line); display:block;
}
.clog .mcard .mhead{display:flex; align-items:baseline; gap:8px; font:600 12.5px var(--sans); color:var(--agent)}
.clog .mcard .mhead .when{margin-inline-start:auto; font:var(--fs-cap) var(--num); color:var(--dim)}
.clog .mcard button{
  align-self:flex-start; height:28px; padding:0 12px; border-radius:var(--r-sm); cursor:pointer;
  border:0; background:rgba(110,169,255,.1); color:var(--agent-hi);
  box-shadow:inset 0 0 0 1px rgba(110,169,255,.28);
  font:500 12px var(--sans); transition:background var(--dur-1), box-shadow var(--dur-1);
}
.clog .mcard button:hover{background:rgba(110,169,255,.18); box-shadow:inset 0 0 0 1px rgba(110,169,255,.42)}

/* ---- the play card: the whole lesson again, for nothing (§21) ----
 *
 * It is a ROW and not the moment card's stacked block, because it carries no
 * picture and is read at a glance: the button first, then what it will play.
 * The blue is the analyst's, like everything else the teacher leaves behind -
 * and the button is filled rather than outlined, because unlike a citation
 * this one is the point of the card rather than a way out of it: a solid ice
 * disc, the one filled thing in the transcript, with the page's own dark in
 * the triangle.
 */
.clog .pcard{
  align-self:stretch; display:flex; align-items:center; gap:12px;
  padding:8px; padding-inline-end:12px; border:1px solid rgba(110,169,255,.17); border-radius:var(--r);
  background:var(--agent-dim-soft);
}
.clog .pcard .go{
  flex:none; width:32px; height:32px; padding:0 0 0 2px; border-radius:999px; cursor:pointer;
  display:grid; place-items:center;
  border:0; background:var(--agent); color:var(--panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
  font:11px/1 var(--sans); transition:background var(--dur-1), box-shadow var(--dur-1);
}
.clog .pcard .go:hover{background:var(--agent-hi)}
.clog .pcard .go:active{box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}
.clog .pcard .pbody{display:flex; flex-direction:column; gap:2px; min-width:0}
.clog .pcard .pbody b{
  font:600 12.5px var(--sans); color:var(--agent-hi);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.clog .pcard .pbody span{font:var(--fs-cap)/1.4 var(--num); color:var(--dim)}
/* WHY THE PRESS DID NOTHING, on the card that was pressed. Orange, because it
   is a warning rather than a verdict (CLAUDE.md, "The skin": gold owns yellow,
   so warnings are --warn) - the lesson is not wrong, it could not be opened. */
.clog .pcard.failed{border-color:var(--warn-line); background:var(--warn-soft)}
.clog .pcard .pwhy{font:var(--fs-meta)/1.4 var(--sans); color:var(--warn); white-space:normal}
.clog .pcard .go:disabled{opacity:.5; cursor:default}
/* The option-value card is the play card's shape with the calculator's own
   mark in the button - a curve over its axes, drawn as a line like the page's
   other icons rather than filled like the play triangle. */
.clog .ocard .go svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* ---- the region they circled, over the composer (§8) ----
 *
 * GOLD, because the loop on the chart is gold: it is the USER's hand, and the
 * chip is the same gesture said in words. It sits on the composer rather than
 * in the transcript because it is a property of the question being written -
 * and it goes with that question and with nothing after it. Said the way the
 * transcript says the user's words: a gold hairline and a breath of gold.
 */
.rgchip{
  display:flex; align-items:center; gap:8px; margin:0 0 2px; flex:1 1 100%; min-width:0;
  padding:4px; padding-inline-start:10px; border-radius:var(--r-sm);
  border:1px solid rgba(228,199,120,.3); background:rgba(228,199,120,.05);
  color:var(--gold-hi); font:500 var(--fs-meta) var(--sans);
}
.rgchip .x{
  margin-inline-start:auto; width:20px; height:20px; line-height:1; cursor:pointer;
  border:0; border-radius:var(--r-xs); background:transparent; color:var(--gold); font-size:11px;
  /* It is a button inside the composer, so the send button's own shape
     (`.cbar button`) reaches it too; it is not a second send. */
  min-width:0; padding:0; box-shadow:none; font-weight:400;
  transition:background var(--dur-1), color var(--dur-1);
}
.rgchip .x:hover{background:var(--gold-soft); color:var(--gold-hi)}
/* The chart says which hand is on it, the way `.measuring` already does. */
#wrap.penning{cursor:crosshair}

/* ---- "what we covered" (§9, §17 decision 4) ----
 *
 * A LEDGER, NOT A WALL OF CARDS. Floors are small sentence-case headings, a
 * topic is a row between hairlines, and a topic that has been shown is lit
 * the analyst's way - its name and count in ice, a breath of ice under it -
 * while one not reached yet is simply the page's own quiet type.
 */
.hcovered{display:flex; flex-direction:column; gap:0}
.hcovered .tlead{margin:0 0 6px; font-size:13px; line-height:1.6; color:var(--doc-muted, var(--muted))}
.hcovered .dim{margin:0 0 6px; font-size:12.5px; color:var(--doc-dim, var(--dim))}
.hcovered .offnote{
  margin:4px 0 8px; padding:8px 12px; border-radius:var(--r); font-size:12px;
  border:0; background:var(--hover); color:var(--muted);
}
.hcovered .cfloor{
  margin:22px 0 6px; font:600 var(--fs-meta) var(--sans); letter-spacing:.01em;
  color:var(--doc-muted, var(--muted));
}
.hcovered .ctopic{
  padding:10px 12px; border-radius:0; border:0;
  border-top:1px solid var(--doc-line, var(--line));
  background:transparent;
}
.hcovered .cfloor + .ctopic{border-top-color:transparent}
/* A TOPIC THAT HAS BEEN COVERED IS LIT, and one that has not is not dimmed
   further: nothing here is a task list, and a topic nobody has reached is an
   ordinary state rather than a failure (§5: the floors say what sits under
   what, never what order to walk in). */
.hcovered .ctopic.on{
  border-radius:var(--r); background:var(--agent-dim-soft);
  border-top-color:transparent; box-shadow:inset 0 0 0 1px rgba(110,169,255,.13);
  margin:2px 0;
}
.hcovered .ctopic.on + .ctopic{border-top-color:transparent}
/* `.chead` is also the analyst panel's head, and that rule's height, padding
   and rule under it leaked into every topic's first line here - a 44px bar
   with a line under a name and a count. The panel's rule stays the panel's. */
.hcovered .chead{
  display:flex; align-items:baseline; gap:8px; font-size:13px; color:var(--doc-text, var(--text));
  height:auto; min-height:0; padding:0; border-bottom:0;
}
/* ...and on a phone the sheet's grab handle is drawn on that rule's
   `::before`, which would put a handle on every topic here. */
.hcovered .chead::before{content:none}
.hcovered .chead b{font-weight:500}
.hcovered .ctopic.on .chead b{color:var(--agent-hi); font-weight:600}
.hcovered .chead .cnt{font:var(--fs-meta) var(--num); color:var(--doc-dim, var(--dim))}
.hcovered .ctopic.on .chead .cnt{color:var(--agent)}
.hcovered .cmoment{
  display:flex; align-items:baseline; gap:8px 12px; flex-wrap:wrap;
  margin-top:8px; padding-top:8px; border-top:1px solid rgba(110,169,255,.1);
  font-size:12.5px; color:var(--muted);
}
.hcovered .cmoment .cwhat{color:var(--text)}
.hcovered .cmoment .cwhen{font:var(--fs-cap) var(--num); color:var(--dim)}
/* What the same animation showed on every stock it walked - its own line, so a
   lesson across three stocks reads as one lesson under each of them. */
.hcovered .cmoment .cacross{flex-basis:100%; font-size:var(--fs-meta); color:var(--muted)}
.hcovered button.link{
  margin-inline-start:auto; padding:0; border:0; background:transparent; cursor:pointer;
  font:500 12px var(--sans); color:var(--agent); transition:color var(--dur-1);
}
.hcovered button.link:hover{color:var(--agent-hi); text-decoration:underline; text-underline-offset:3px}
/* Deleting is the reader's own, so it is available and quiet - never the
   loudest thing on the row (§17, decision 4). */
.hcovered button.link.rm{margin-inline-start:0; color:var(--dim)}
.hcovered button.link.rm:hover{color:var(--down)}

/* A PHONE READS THIS PANE TOO, and the rows are the tap targets: 44px is the
   rule the rest of the phone surface is held to (`tests/phone.test.mjs`). */
@media (max-width:760px){
  .hcovered .cmoment{gap:10px}
  .hcovered button.link{min-height:44px; display:inline-flex; align-items:center}
  .clog .mcard button{height:44px}
  /* The tap target is the rule the rest of the phone surface is held to, and
     this is the control the whole feature is pressed by. */
  .clog .pcard .go{width:44px; height:44px}
  .clog .pcard .go{font-size:14px}
}