/* The app as the demo shows it (demo/CONTRACT.md §8, "The app inside the panes"). The demo image
   links this file into the app's built index.html (demo/embed-app.js), so it applies to every page
   the two demo hosts serve: both panes, and a phone that took the student's place. It only takes
   away: never a word, a colour or an element of its own. The shell's bar already names the
   product and the course, and everything else removed here repeats what the page says elsewhere
   or does not help a first-time visitor in the demo's first minutes.

   Every selector names its target by the app's own structure and labels in the one build the
   demo image pins. demo/test/embed.e2e.mjs opens each page on the local stack and checks that
   every rule matches exactly what it says it does, so a change in the app fails there instead of
   leaving a silent gap on screen. No raw colour: tokens only, as in shell.css. */

/* -- every page ----------------------------------------------------------------------------- */

/* The app's own header: a second and third logo beside the shell's, the signed-in name ("You",
   next to a grid row also called "You") and a "Log out" that would sign the visitor's sandbox out
   mid-demo. tokens.css's --header-h is the one owner of its height (the focus scroll padding). */
header:has(> nav[aria-label="Main"]) { display: none; }
:root { --header-h: 0px; }

/* Headings and labels this file takes off the screen stay for a screen reader (the app's sr-only
   recipe), so every page keeps its outline and every control its name. Each is named below. */
div:has(> nav[aria-label="Breadcrumb"]):has(+ div > [role="tablist"][aria-label="Class sections"]),
[role="tabpanel"] > section > div > .space-y-1:first-child:has(> select) > label,
[role="dialog"] [role="region"] > div > div:has(> div > h3 + ol) > div:first-child:has(> h3 + p) > h3,
div:has(> nav[aria-label="Your pages"]) > div:has(> div > div > h1),
div:has(> div > a[href="/words"]) > div:has(> div > div > h1) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* -- the class page and its Results tab --------------------------------------------------- */

/* The class header (above, for the eye only): its name, language and unit, and a breadcrumb to a
   list of one class. The bar names the course; the breadcrumb's links and the line go. */
div:has(> nav[aria-label="Breadcrumb"]):has(+ div > [role="tablist"][aria-label="Class sections"]) :is(nav, p) {
  display: none;
}

/* The homework picker keeps its select ("Day 3 of Unit 1 · due Oct 23"); its label (above, for
   the eye only) and the full due time under it say that again. */
[role="tabpanel"] > section > div > .space-y-1:first-child:has(> select) > select ~ p { display: none; }

/* "Not analyzed yet": true for the first seconds of a live grid and then never again. */
.border-l-3:has(+ div > [role="region"] > table) { display: none; }

/* The key over the grid goes. "No answer yet" is an empty cell (below), a skip or a topic not
   given does not happen in the demo class, an answer reads as its seconds ("4.3 s"; opened, "4.3 s
   spoken"), and the line on how to open things repeats what the cells and the names do. Each
   cell's meaning stays on the cell for a screen reader, as before. */
div:has(> [role="region"] > table) > div:first-child { display: none; }

/* A topic column says "3 of 9 answered" once: the bar over the same words goes. The "Student"
   column head says what the names say; a screen reader still hears it. Rows keep the app's 44px
   cells with less air between them, so the whole class fits a laptop's pane at a readable size
   (shell.js TEACHER_VIEW_HEIGHT). */
[role="region"] > table > thead th span[aria-hidden="true"]:has(> .bar-draw) { display: none; }
[role="region"] > table > thead th:first-child { color: transparent; }
[role="region"] > table > tbody > tr > :is(th, td) { padding-block: var(--spacing-1); }
/* Each column's topic is cut to its share of the page (in full on hover and to a screen reader,
   as before), so the three topics fit beside the names without a sideways scroll; on a phone,
   to a few words. */
[role="region"] > table > thead th .max-w-sm { max-width: min(24rem, calc((100vw - 20rem) / 3)); }
@media (width < 48rem) {
  [role="region"] > table > thead th .max-w-sm { max-width: 4.5rem; }
}

/* A cell with no answer yet is empty, so the answers stand out, the visitor's first above all.
   Its words stay for a screen reader (the badge's sr-only meaning, the button's label), and a
   cell that opens a topic still in progress keeps its hover and its focus ring. */
[role="region"] > table td > span.relative > .bg-sunken { background: transparent; }
[role="region"] > table td > span.relative > .bg-sunken > [aria-hidden="true"] { visibility: hidden; }
[role="region"] > table td > button.bg-sunken { color: transparent; }
[role="region"] > table td > button.bg-sunken:not(:hover) { background: transparent; }

/* The visitor's own row, marked. Today's homework is the one grid of nine rows (the class file's
   eight classmates and the visitor), and every classmate's name sorts before "You"
   (demo/gate/class-script.js checks both), so its last row is the visitor's. */
[role="region"] > table > tbody:has(> tr:nth-child(9)) > tr:last-child > :is(th, td) {
  background: var(--color-brand-wash);
}
[role="region"] > table > tbody:has(> tr:nth-child(9)) > tr:last-child > th a {
  font-weight: var(--font-weight-semibold);
}

/* -- a student's unit view (the feedback) ---------------------------------------------------- */

/* "Practiced homework, not a level or a grade." */
div:has(> nav[aria-label="Breadcrumb"]) + p.text-text-muted:has(+ section) { display: none; }
/* The four-state key under the slips: each slip already says how it ended. */
ol[aria-label="Possible slips by form"] + ul { display: none; }
/* The definitions beside "Word", "Phrase", "Sentence" and "Sentences". */
ol[aria-label="The shape of each analysed first answer"] li .text-caption { display: none; }
/* One "AI" mark on the page, on the first of the two AI cards. */
.grid > section:nth-child(2) > div > div:first-child > h2 + .bg-brand-wash { display: none; }

/* -- an answer, opened ------------------------------------------------------------------------ */

/* The transcript and its slip card are the selling moment. The dialog's title already names the
   Day and the topic, so the "Topic" label (above, for the eye only) and the "Day 3 of Unit 1"
   line go, and so do the tries (the transcript shows them), the pause before speaking, the words
   and forms (the unit view's cards) and the AI labels box. The slip card keeps the dialog's one
   "AI" mark. */
[role="dialog"] [role="region"] > div > div:has(> div > h3 + ol) > div:first-child:has(> h3 + p) > p.text-text-muted,
[role="dialog"] [role="region"] > div > div:has(> div > h3 + ol) > dl,
[role="dialog"] [role="region"] > div > div:has(> div > h3 + ol) > div:has(> h3 + dl),
[role="dialog"] [role="region"] > div > div:has(> div > h3 + ol) > .shadow-raised { display: none; }

/* -- the student: the start panel, the Words tab, the card after turning in ----------------- */

/* The start panel keeps two tips, sound and microphone, so Start sits under the topic. Replay and
   Slower are labelled where they appear, and the tutor's echo is met when it happens. */
.shadow-raised:has(> div > h1) > ul.grid > li:nth-child(n + 3) { display: none; }

/* The Words tab: the tab names the page and the card says "Tap to see the meaning", so the page's
   heading and its instruction are for a screen reader only (above). The ratings wait for the
   turned card: while every one is off ("Turn the card first") and none is being sent, the dock is
   not shown. */
.sticky.bottom-0:has([role="group"] > .grid > button[aria-disabled="true"]):not(:has([role="group"] > .grid > button:not([aria-disabled="true"]))):not(:has([aria-busy="true"])) {
  display: none;
}

/* After turning in, "Your words" over "Class words you used" is one heading too many (the first
   is for a screen reader only, above), and the homework "Back to homework" would open is done. */
div:has(> a[href="/words"]) > a[href="/"] { display: none; }