/* ---------- the element guide ----------

   The window that opens when a writer clicks the little red i in the page's
   gutter and asks what an element is. It is drawn at the TOP LEVEL over
   whatever room is open (lib/render.js draws every modal there), which is why
   it is not in the room's own sheet: it is a surface of its own, and the room
   sheet was seven lines from the size warn with a whole feature list still to
   land in it.

   The colours are the teaching colours from tokens.css, one per element, the
   same ones the page itself wears when a lesson turns them on. */

.sf-el-scrim{
  position:fixed;
  inset:0;
  z-index:82;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--s7);
  pointer-events:none;
}
.sf-el{
  width:min(620px, 92vw);
  max-height:80vh;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:var(--s5);
  padding:var(--s8);
  pointer-events:auto;
  border:var(--bd) solid var(--edge);
  border-radius:var(--r-lg);
  background:var(--panel);
  box-shadow:0 var(--s8) calc(var(--s8) * 3) var(--shad);
}
.sf-el-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--s5);
}
.sf-el-heading{ display:flex; flex-direction:column; gap:var(--s1); min-width:0; }
.sf-el-kicker{
  color:var(--muted);
  font-size:var(--t-label);
  font-weight:var(--w-semi);
  letter-spacing:var(--ls-label);
}
.sf-el-name{
  display:flex;
  align-items:center;
  gap:var(--s3);
  color:var(--text);
  font-size:var(--t-head);
  font-weight:var(--w-semi);
}
.sf-el-sw{ width:14px; height:14px; flex:none; border-radius:var(--r-sm); }
.sf-el-x{
  padding:var(--s2) var(--s3);
  flex:none;
  border:var(--bd) solid var(--edge);
  border-radius:var(--r-sm);
  background:var(--panel);
  color:var(--muted);
  font-size:var(--t-sub);
  line-height:1;
}
.sf-el-what,
.sf-el-how{ margin:0; color:var(--text); font-size:var(--t-body); line-height:1.5; }
.sf-el-how-head{
  margin-top:var(--s2);
  color:var(--muted);
  font-size:var(--t-label);
  font-weight:var(--w-semi);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
}
.sf-el-ex{
  margin:var(--s2) 0 0;
  padding:var(--s6);
  border-radius:var(--r-md);
  background:var(--sf-paper);
  color:var(--sf-pencil);
  font-family:var(--sf-mono);
  font-size:var(--t-small);
  line-height:1.45;
  white-space:pre-wrap;
}
.sf-el-ex mark{
  background:color-mix(in srgb, var(--sf-el-mark) 38%, transparent);
  color:var(--sf-pencil);
}

.sf-el-scene{ --sf-el-mark:var(--sf-c-scene); }
.sf-el-action{ --sf-el-mark:var(--sf-c-action); }
.sf-el-character{ --sf-el-mark:var(--sf-c-character); }
.sf-el-dialogue{ --sf-el-mark:var(--sf-c-dialogue); }
.sf-el-paren{ --sf-el-mark:var(--sf-c-paren); }
.sf-el-transition{ --sf-el-mark:var(--sf-c-transition); }
.sf-el-title{ --sf-el-mark:var(--sf-c-quiet); }
.sf-el-section{ --sf-el-mark:var(--sf-c-quiet); }
.sf-el-synopsis{ --sf-el-mark:var(--sf-c-quiet); }
.sf-el-center{ --sf-el-mark:var(--sf-c-center); }

.sf-el-scene .sf-el-sw{ background:var(--sf-c-scene); }
.sf-el-action .sf-el-sw{ background:var(--sf-c-action); }
.sf-el-character .sf-el-sw{ background:var(--sf-c-character); }
.sf-el-dialogue .sf-el-sw{ background:var(--sf-c-dialogue); }
.sf-el-paren .sf-el-sw{ background:var(--sf-c-paren); }
.sf-el-transition .sf-el-sw{ background:var(--sf-c-transition); }
.sf-el-title .sf-el-sw{ background:var(--sf-c-quiet); }
.sf-el-section .sf-el-sw{ background:var(--sf-c-quiet); }
.sf-el-synopsis .sf-el-sw{ background:var(--sf-c-quiet); }
.sf-el-center .sf-el-sw{ background:var(--sf-c-center); }