/*
 * Graphing guide (/support/students/graphing). Every rule is scoped to `#xyz-support .xyzg` (plus the
 * body-level demo flag and the announcer): nothing leaks out, and the ID keeps these rules ahead of the
 * support layout's own #xyz-support rules (ol.steps, p, h3, lists), which would otherwise restyle the
 * examples. Found 2026-09-28: `#xyz-support ol.steps > li::before` squeezed each step to one word a line.
 *
 * Breakpoints are CONTAINER queries on the block, not viewport media queries: the article column
 * is narrower than the viewport, so the viewport says little about the space an example has.
 * The question card (`.paper`) is white like a real XYZ Homework question page, and the toolbar
 * rules marked "verbatim" are assess2's own (assess2/vue-src/src/assess2.css:278-306).
 * Ported from the reviewed guide (xyz-user-docs #25) on 2026-09-28; the site is light-only, so
 * the dark-theme tokens were dropped.
 */

/* Screen-reader-only text. Defined here, not left to a utility class, because the guide's
   script creates these elements at runtime. */
#xyzg-announcer, #xyz-support .xyzg .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

#xyz-support .xyzg {
  --surface: #ffffff;
  --ink: #1b2533;
  --muted: #535e6d;
  --line: #d8d3cf;
  --line-strong: #b9b2ac;
  --navy: #154984;
  --navy-hover: #0f3a6b;
  --on-navy: #ffffff;
  --link: #a94509;
  --orange: #ff6e2d;
  --orange-ink: #a94509;
  --tint: #f5f3f1;
  --current: #fff0e6;
  --good: #0e6b49;
  --good-bg: #e5f3eb;
  --bad: #a3261b;
  --bad-bg: #fae9e6;
  --paper: #ffffff;
  --paper-ink: #1b2533;
  --paper-muted: #535e6d;
  --paper-line: #dad5d1;
  --shadow: 0 1px 2px rgba(21, 73, 132, 0.06), 0 8px 24px rgba(21, 73, 132, 0.07);
  --focus: #a94509;
  --radius: 10px;
  --font-body: inherit;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  container-type: inline-size;
  margin-block: 1.25rem;
  color: var(--ink);
  font-family: var(--font-body);
}

/* guide.js toggles `hidden`; an element's own display value must never override it.
   (The demo shield's override below is more specific, so it still wins while a demo plays.) */
#xyz-support .xyzg [hidden] { display: none !important; }
#xyz-support .xyzg a { color: var(--link); text-underline-offset: 2px; }
#xyz-support .xyzg a:focus-visible,
#xyz-support .xyzg button:focus-visible,
#xyz-support .xyzg .table-scroll:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}
#xyz-support .xyzg p { margin: 0; }
#xyz-support .xyzg math { font-size: 1.04em; }
#xyz-support .xyzg h3 {
  margin: 0; font-size: 1.16rem; line-height: 1.3; font-weight: 700; text-wrap: balance;
  font-family: inherit; color: var(--ink);
}

/* ---------- the toolbar explained ---------- */
#xyz-support .xyzg .basics { display: grid; gap: 18px; grid-template-columns: 1fr; }
@container (min-width: 680px) {
  #xyz-support .xyzg .basics { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
}
#xyz-support .xyzg .panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px;
}
#xyz-support .xyzg .anatomy { display: grid; gap: 14px; }
#xyz-support .xyzg .anatomy .paper { padding: 14px; }
#xyz-support .xyzg .anatomy dl { margin: 0; display: grid; gap: 10px; }
#xyz-support .xyzg .anatomy dt { font-weight: 700; }
#xyz-support .xyzg .anatomy dd { margin: 0; color: var(--muted); }
#xyz-support .xyzg .rules { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
/* The rules list is also a panel; without this its padding reset put the icons on the border
   (a fault in the standalone guide too, found in the 2026-09-28 screenshots). */
#xyz-support .xyzg .rules.panel { padding: 20px; }
#xyz-support .xyzg .rules li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; }
#xyz-support .xyzg .rules .ic {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tint); color: var(--navy); border: 1px solid var(--line);
}
#xyz-support .xyzg .rules .ic svg { width: 16px; height: 16px; }
#xyz-support .xyzg .rules strong.h { display: block; }
#xyz-support .xyzg .rules span.t { color: var(--muted); }

/* ---------- the XYZ Homework question surface ---------- */
#xyz-support .xyzg .paper {
  background: var(--paper); color: var(--paper-ink); border: 1px solid var(--paper-line);
  border-radius: 8px;
}
/* verbatim from assess2/vue/css/index.css (assess2/vue-src/src/assess2.css:278-306) */
#xyz-support .xyzg .drawtools{margin-left:8px}
#xyz-support .xyzg .drawtools>span{display:inline-block}
#xyz-support .xyzg .drawtools img{vertical-align:middle}
#xyz-support .xyzg .drawtools [data-drawaction]{border:1px solid #ccc;padding:2px;cursor:pointer}
#xyz-support .xyzg .drawtools span[data-drawaction]{padding:2px 8px}
#xyz-support .xyzg .drawtools [data-drawaction]:hover{background-color:#edf4fc}
#xyz-support .xyzg .drawtools [data-drawaction].sel{background-color:#e6f0f9}
#xyz-support .xyzg .drawcanvas{margin-bottom:5px}
#xyz-support .xyzg .drawcanvas img{max-width:100%!important}
/* page additions for the toolbar row */
#xyz-support .xyzg .paper .drawtools { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; font-size: 15px; line-height: 1.3; margin-top: 4px; }
#xyz-support .xyzg .drawtools img { display: inline-block; margin-right: 3px; }
#xyz-support .xyzg .anatomy .drawtools [data-drawaction] { cursor: default; }
#xyz-support .xyzg .anatomy .drawtools [data-drawaction]:hover { background-color: transparent; }
#xyz-support .xyzg .anatomy .drawtools [data-drawaction].sel { background-color: #e6f0f9; }
/* The engine's canvas and grid are sized in pixels; nothing may scale them. */
#xyz-support .xyzg .drawcanvas canvas,
#xyz-support .xyzg .drawcanvas svg { max-width: none; }

/* ---------- lessons ---------- */
#xyz-support .xyzg .lessons { display: grid; gap: 22px; }
/* minmax(0, 1fr), not 1fr: a bare 1fr track's automatic minimum grew past the card on
   MathML-heavy examples (363px in a 341px phone column), and the card's overflow:hidden
   clipped the question. Measured 2026-09-28; the standalone guide had the same fault. */
#xyz-support .xyzg .lesson {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden;
}
#xyz-support .xyzg .lesson-loading { padding: 16px; color: var(--muted); }
@container (min-width: 700px) {
  #xyz-support .xyzg .lesson { grid-template-columns: minmax(350px, auto) minmax(0, 1fr); }
  #xyz-support .xyzg .qpane { padding: 18px; border-bottom: 0; border-right: 1px solid var(--line); }
  #xyz-support .xyzg .spane { padding: 22px 24px; }
}
#xyz-support .xyzg .qpane { background: var(--tint); padding: 14px 12px; display: grid; align-content: start; border-bottom: 1px solid var(--line); }
#xyz-support .xyzg .qcard { padding: 14px 12px 10px; display: grid; gap: 10px; }
@container (min-width: 448px) { #xyz-support .xyzg .qcard { padding: 16px 16px 10px; } }
/* Phones: the graph is 304-310px wide, so the question card gives up its frame and padding. */
@container (max-width: 447px) {
  #xyz-support .xyzg .qpane { padding: 0; }
  #xyz-support .xyzg .qcard { border: 0; border-radius: 0; padding: 14px 6px 10px; }
}
#xyz-support .xyzg .qhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
#xyz-support .xyzg .qnum { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper-muted); }
#xyz-support .xyzg .chip {
  font-size: 0.78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--paper-line); color: var(--paper-muted); background: #f6f4f2;
}
#xyz-support .xyzg .chip[data-mode='playing'] { color: #8a3706; border-color: #f6c4a6; background: #fff1e7; }
#xyz-support .xyzg .chip[data-mode='try'] { color: #0e5c3f; border-color: #b7e0c9; background: #eaf6ef; }
#xyz-support .xyzg .prompt { font-size: 1.05rem; color: var(--paper-ink); }
#xyz-support .xyzg .offline { color: var(--paper-muted); padding: 8px 0; }
#xyz-support .xyzg .stage-scroll { padding-bottom: 4px; }
/* Only phones narrower than the 310px graph need to scroll it; elsewhere the demo pointer may overhang freely. */
@container (max-width: 327px) { #xyz-support .xyzg .stage-scroll { overflow-x: auto; } }
/* fit-content, not max-content: the toolbar row lives inside the stage, and at max-content a
   seven-tool toolbar (about 350px) pushed the stage past a 341px phone card. fit-content lets
   the toolbar wrap to the space there is, while the graph keeps its pixel size (the stage's
   inline min-width) and scrolls only on screens narrower than the graph. */
#xyz-support .xyzg .stage { position: relative; width: fit-content; max-width: none; }
#xyz-support .xyzg .stage .shield { position: absolute; inset: 0; z-index: 5; cursor: default; }
#xyz-support .xyzg .stage .shield[hidden] { display: none !important; }
/* While any demo plays, every example is shielded: the engine's state is shared by all graphs. */
body.xyzg-demo-running #xyz-support .xyzg .stage .shield[hidden] { display: block !important; }
#xyz-support .xyzg .fcursor {
  position: absolute; left: 0; top: 0; z-index: 7; pointer-events: none;
  width: 26px; height: 30px; transform: translate(-200px, -200px); will-change: transform;
}
#xyz-support .xyzg .fcursor[hidden] { display: none; }
#xyz-support .xyzg .fcursor .arrow, #xyz-support .xyzg .fcursor .pen { position: absolute; left: 0; top: 0; }
#xyz-support .xyzg .fcursor .pen { width: 22px; height: 22px; display: none; }
#xyz-support .xyzg .fcursor.on-canvas .pen { display: block; }
#xyz-support .xyzg .fcursor.on-canvas .arrow { display: none; }
#xyz-support .xyzg .fcursor .press {
  position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--orange); opacity: 0; transform: scale(0.4);
}
#xyz-support .xyzg .fcursor.pressed .press { opacity: 0.95; transform: scale(1); }
#xyz-support .xyzg .fcursor .ripple {
  position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--orange); opacity: 0;
}
#xyz-support .xyzg .fcursor.clicked .ripple { animation: xyzg-ripple 0.5s ease-out; }
@keyframes xyzg-ripple { from { opacity: 0.95; transform: scale(0.3); } to { opacity: 0; transform: scale(1.35); } }

#xyz-support .xyzg .spane { padding: 18px 16px 20px; display: grid; gap: 14px; align-content: start; }
#xyz-support .xyzg .steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; counter-reset: step; }
#xyz-support .xyzg .steps li {
  position: static; border-bottom: 1px solid transparent;
  counter-increment: step; display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start;
  padding: 8px 10px; border-radius: 8px; border: 1px solid transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
#xyz-support .xyzg .steps li::before {
  /* The support layout positions ol.steps numbers absolutely; the guide's number is a grid item. */
  position: static; left: auto; top: auto; line-height: 1;
  content: counter(step); content: counter(step) / ''; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 0.88rem;
  font-variant-numeric: tabular-nums; background: var(--tint); border: 1px solid var(--line);
  color: var(--ink);
}
#xyz-support .xyzg .steps li.is-current { background: var(--current); border-color: color-mix(in srgb, var(--orange) 45%, transparent); }
#xyz-support .xyzg .steps li.is-current::before { background: var(--orange); border-color: var(--orange); color: #1b2533; }
#xyz-support .xyzg .steps li.is-done::before { content: '✓'; content: '✓' / ''; background: var(--good-bg); border-color: transparent; color: var(--good); }
#xyz-support .xyzg .controls { display: flex; flex-wrap: wrap; gap: 10px; }
#xyz-support .xyzg .controls[hidden] { display: none; }
#xyz-support .xyzg .btn {
  appearance: none; font: 600 0.98rem/1 var(--font-body); padding: 11px 16px; border-radius: 8px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 42px;
}
#xyz-support .xyzg .btn:hover { border-color: var(--navy); }
#xyz-support .xyzg .btn.primary { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
#xyz-support .xyzg .btn.primary:hover { background: var(--navy-hover); border-color: var(--navy-hover); }
#xyz-support .xyzg .btn svg { width: 14px; height: 14px; flex: none; }
#xyz-support .xyzg .btn[hidden] { display: none !important; }
#xyz-support .xyzg .hint { font-size: 0.92rem; color: var(--muted); }
#xyz-support .xyzg .hint[hidden] { display: none; }
#xyz-support .xyzg .hint:focus { outline: none; }
#xyz-support .xyzg .feedback { display: grid; gap: 8px; }
#xyz-support .xyzg .feedback:empty { display: none; }
#xyz-support .xyzg .feedback .summary { font-weight: 700; }
#xyz-support .xyzg .feedback .summary.ok { color: var(--good); }
#xyz-support .xyzg .feedback .summary.no { color: var(--bad); }
#xyz-support .xyzg .feedback ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
#xyz-support .xyzg .feedback li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; padding: 8px 10px; border-radius: 8px; }
#xyz-support .xyzg .feedback li.ok { background: var(--good-bg); }
#xyz-support .xyzg .feedback li.no { background: var(--bad-bg); }
#xyz-support .xyzg .feedback li .mark { font-weight: 700; }
#xyz-support .xyzg .feedback li.ok .mark { color: var(--good); }
#xyz-support .xyzg .feedback li.no .mark { color: var(--bad); }
#xyz-support .xyzg .feedback .fine { font-size: 0.86rem; color: var(--muted); }

/* ---------- reference tables ---------- */
#xyz-support .xyzg .table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
#xyz-support .xyzg table { border-collapse: collapse; width: 100%; display: table; margin: 0; }
#xyz-support .xyzg th, #xyz-support .xyzg td { text-align: left; vertical-align: top; padding: 11px 14px; border-bottom: 1px solid var(--line); color: var(--ink); }
#xyz-support .xyzg tr:last-child td { border-bottom: 0; }
#xyz-support .xyzg thead th { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); background: var(--tint); }
#xyz-support .xyzg tbody th { font-weight: 600; }
#xyz-support .xyzg .group-row th { background: var(--tint); font-size: 0.86rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
#xyz-support .xyzg .toolcell { display: flex; gap: 10px; align-items: center; font-weight: 600; }
#xyz-support .xyzg .toolcell img { width: 32px; height: 32px; background: #ffffff; border: 1px solid #ccc; border-radius: 3px; padding: 1px; flex: none; }
#xyz-support .xyzg .wordbtn { display: inline-block; border: 1px solid #ccc; background: #ffffff; color: #1b2533; padding: 2px 8px; border-radius: 3px; font-size: 0.9rem; font-weight: 400; white-space: nowrap; }
#xyz-support .xyzg td.count { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: center; }
#xyz-support .xyzg .table-note { margin: 0; padding: 12px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.94rem; }
#xyz-support .xyzg code {
  font-family: var(--font-mono); font-size: 0.88em; background: var(--tint); border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 6px; white-space: nowrap; color: var(--ink);
}
@container (max-width: 527px) {
  #xyz-support .xyzg th, #xyz-support .xyzg td { padding: 10px 10px; }
  #xyz-support .xyzg .toolcell img { width: 28px; height: 28px; }
  #xyz-support .xyzg code { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  #xyz-support .xyzg .steps li { transition: none; }
  #xyz-support .xyzg .fcursor.clicked .ripple { animation: none; }
}