/* The colours of the roles. They are set on body, with the theme kind's class VS Code gives it, so that the
   ones made of others (--c-number) follow the theme's too. */
body {
  --c-command: var(--vscode-charts-blue, #3794ff);
  --c-option: var(--vscode-charts-orange, #d18616);
  --c-argument: var(--vscode-charts-green, #89d185);
  --c-number: var(--c-argument);
  --c-keyword: var(--vscode-charts-purple, #b180d7);
  --c-operator: var(--c-keyword);
  --c-redirect: var(--vscode-charts-yellow, #cca700);
  --c-pattern: var(--c-redirect);
  --c-variable: var(--vscode-charts-red, #ff5c65);
  --c-comment: var(--vscode-descriptionForeground, #888);
  --c-muted: var(--vscode-descriptionForeground, #888);
  /* level table (src/levels.ts, scripts/level-css.ts): root */
  --c-error-level: var(--vscode-editorError-foreground, var(--vscode-charts-red, #f14c4c));
  --c-error: var(--c-error-level);
  --c-warning: var(--vscode-editorWarning-foreground, var(--vscode-charts-yellow, #cca700));
  --c-info: var(--vscode-editorInfo-foreground, var(--vscode-charts-blue, #3794ff));
  /* end of the level table */
}

/* Where the theme's chart colours are too light or too dark for text (below 4.5:1), our own: the values of
   src/ui/palette.ts, which the hover uses too (test/contrast.test.ts compares them and measures them).
   Light themes: all six, darkened, as on the web page. Dark themes: red, which is 3.96:1 on a code block.
   The levels of the notes take the editor's error, warning and info colours, ours where they fall below it
   (src/levels.ts, the regions "level table"): the error's in all four (Light Modern's is 4.23:1 on a code block, Dark
   Modern's 3.96:1, the high contrast themes' below 7:1 on a code block), which a part that cannot be read takes too. */
body.vscode-light {
  /* level table (src/levels.ts, scripts/level-css.ts): light */
  --c-error-level: #d0020f;
  --c-warning: #855f00;
  --c-info: #005fb8;
  /* end of the level table */
  --c-command: #0161f8;
  --c-option: #9f5c00;
  --c-argument: #1f7c2b;
  --c-keyword: #5f2489;
  --c-redirect: #645000;
  --c-variable: #d0020f;
}

body.vscode-dark {
  /* level table (src/levels.ts, scripts/level-css.ts): dark */
  --c-error-level: #fd6358;
  /* end of the level table */
  --c-variable: #ff5c65;
}

/* High contrast: VS Code gives a webview the theme's workbench colours, not its token colours, and its chart
   colours are those of the dark and light themes; the foreground alone would lose the roles. So our own,
   at least 7:1 on the theme's black or white and on a code block, keeping the hues. HC light comes last:
   VS Code may give it both classes. */
body.vscode-high-contrast {
  /* level table (src/levels.ts, scripts/level-css.ts): highContrast */
  --c-error-level: #f6937e;
  --c-info: #6badff;
  /* end of the level table */
  --c-command: #6badff;
  --c-option: #f69d3d;
  --c-argument: #89d185;
  --c-keyword: #c796ee;
  --c-redirect: #efd62f;
  --c-variable: #ff888e;
}

body.vscode-high-contrast-light {
  /* level table (src/levels.ts, scripts/level-css.ts): highContrastLight */
  --c-error-level: #9b1c0b;
  --c-warning: #704500;
  --c-info: #0f4a85;
  /* end of the level table */
  --c-command: #0148bc;
  --c-option: #794402;
  --c-argument: #015f15;
  --c-keyword: #5f2489;
  --c-redirect: #453e01;
  --c-variable: #a20222;
}

body {
  font-family: var(--vscode-font-family);
  font-size: var(--vscode-font-size);
  color: var(--vscode-foreground);
  padding: 0 1rem 2rem;
  line-height: 1.5;
}

header {
  color: var(--c-muted);
  margin-bottom: 0.5rem;
}

/* The header and the line stay at the top together, header first, while the explanation scrolls
   under them. The container is opaque, so nothing shows through around the line (its rounded
   corners included), and it holds the body's top padding, so it does not move when a scroll
   starts. A tall statement (shown whole) scrolls inside its box, so the tree keeps room.
   --line-h (panel.js) is its height, for scrolling a row into view below it. */
#top {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0.5rem 0 0.75rem;
  background: var(--vscode-editor-background);
}

/* Scrolled under: a thin rule below (a shadow, so the layout does not move). */
#top.stuck {
  box-shadow: 0 1px 0 var(--vscode-panel-border, rgba(127, 127, 127, 0.3));
}

#where {
  font-weight: 600;
  color: var(--vscode-foreground);
}

html {
  scroll-padding-top: calc(var(--line-h, 0px) + var(--controls-h, 0px) + 0.25rem);
  /* The panel keeps the row folded or unfolded in place itself (media/panel.js, `hold`): the browser's own
     anchoring would choose another row. */
  overflow-anchor: none;
}

/* The room kept below the content after a fold near the end, so that the page does not move (panel.js). Placed
   absolutely, from the top of the page: the content's own height leaves it out. */
#scroll-spacer {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 0;
  visibility: hidden;
  pointer-events: none;
}

pre#line {
  font-family: var(--vscode-editor-font-family);
  font-size: var(--vscode-editor-font-size);
  background:
    linear-gradient(var(--vscode-textCodeBlock-background, rgba(127, 127, 127, 0.1)), var(--vscode-textCodeBlock-background, rgba(127, 127, 127, 0.1))),
    var(--vscode-editor-background);
  padding: 0.6rem 0.8rem;
  border-radius: 4px;
  overflow: auto;
  max-height: 40vh;
  white-space: pre;
  margin: 0;
}

/*
 * The line box wraps a long line between shell words when the editor does (the web page's `editor.wrap`, VS Code's
 * `editor.wordWrap`; src/ui/lineBox.ts). Each run of the line stays on one row (`.run`), so a row ends only at the
 * blanks between runs; a run wider than a row (`.wide`, measured by panel.js `fitLine`) breaks at its own blanks,
 * and as a last resort anywhere. The rows after the first hang in, with a faint ↪ as in the editor's gutter. A line
 * over more than three rows shows three and a fade (`.clamped`) until a click opens it whole (`.open`).
 */
pre#line.wrap {
  --row: 1.5em;
  line-height: var(--row);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow: hidden auto;
}

pre#line.wrap > .rows {
  display: block;
  position: relative;
  padding-left: 2ch;
  text-indent: -2ch;
}

/*
 * A ↪ on every row but the first: panel.js `fitLine` counts the rows and sets `data-marks` to a blank line and a ↪ for
 * each row after the first. The empty alternative text (`/ ""`) keeps the marks out of the accessibility tree: a screen
 * reader would otherwise read them before the line, and in the folded box's name. Text, not a background, so that
 * forced colours draw it in the text colour.
 */
pre#line.wrap > .rows::before {
  content: attr(data-marks) / "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2ch;
  overflow: hidden;
  text-indent: 0;
  white-space: pre;
  color: var(--c-muted);
  opacity: 0.7;
  pointer-events: none;
}

pre#line.wrap .run {
  white-space: pre;
}

pre#line.wrap .run.wide {
  white-space: pre-wrap;
}

/* (The third row fades out, and the fourth, under it in the bottom padding of 0.6rem, does not show.) */
pre#line.wrap.clamped {
  --fade: linear-gradient(to bottom, #000 calc(100% - 0.6rem - var(--row)), transparent calc(100% - 0.6rem));
  max-height: calc(3 * var(--row));
  overflow: hidden;
  cursor: pointer;
  -webkit-mask-image: var(--fade);
  mask-image: var(--fade);
}

pre#line[role="button"]:focus-visible {
  outline: 1px solid var(--vscode-focusBorder);
  outline-offset: -1px;
}

.seg {
  border-bottom: 2px solid currentColor;
  cursor: pointer;
  border-radius: 2px;
}

.seg.active {
  background: var(--vscode-editor-findMatchHighlightBackground, rgba(234, 92, 0, 0.33));
}

/* The sentence of the line, "In short", at the top of the Meaning view: plain text, its label in bold. */
#short {
  margin: 0 0 0.6rem;
  overflow-wrap: anywhere;
}
.short-label { font-weight: 600; }

.note {
  margin: 0 0 0.5rem;
  padding: 0.3rem 0.6rem;
  border-left: 3px solid var(--vscode-textBlockQuote-border, #888);
  background: var(--vscode-textBlockQuote-background, transparent);
  display: flex;
  gap: 0.4em;
  align-items: flex-start;
}

/*
 * The level of a note (src/levels.ts): the editor's colour of its squiggle on the left border, the icon and the word
 * (the region "rules" below). The colour is the theme's where it is readable as text (4.5:1), and the level table's
 * where it is not. A plain note keeps the quote's border, and its icon is muted.
 */
.note-icon {
  flex: none;
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  fill: var(--c-muted);
}
.note-text { min-width: 0; }

/* The editor's squiggle under the part of the line a problem is about. */
#line .squiggle {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
}
/* level table (src/levels.ts, scripts/level-css.ts): rules */
.note.level-error { border-left-color: var(--c-error-level); }
.note.level-warning { border-left-color: var(--c-warning); }
.note.level-info { border-left-color: var(--c-info); }
.level-error .note-icon, .level-error .note-label { fill: var(--c-error-level); color: var(--c-error-level); }
.level-warning .note-icon, .level-warning .note-label { fill: var(--c-warning); color: var(--c-warning); }
.level-info .note-icon, .level-info .note-label { fill: var(--c-info); color: var(--c-info); }
#line .squiggle.level-error { text-decoration-color: var(--c-error-level); }
#line .squiggle.level-warning { text-decoration-color: var(--c-warning); }
#line .squiggle.level-info { text-decoration-color: var(--c-info); }
/* end of the level table */

@media (forced-colors: active) {
  /* (An error's border is double, a warning's dashed, so that the levels differ without colour.) */
  /* level table (src/levels.ts, scripts/level-css.ts): forced */
  .note-icon, .level-error .note-icon, .level-warning .note-icon, .level-info .note-icon { fill: CanvasText; }
  .level-error .note-label, .level-warning .note-label, .level-info .note-label { color: CanvasText; }
  .note.level-error { border-left: 4px double CanvasText; }
  .note.level-warning { border-left: 3px dashed CanvasText; }
  /* end of the level table */
}

ul {
  list-style: none;
  margin: 0;
  padding-left: 1.1rem;
}

ul#tree {
  padding-left: 0;
}

/* Indent guides, as in VS Code's trees: a faint line in the column of the rows' own coloured
   border, beside what lies under an item (its examples and parts), when a sibling follows. Like the
   rule beside an example, it keeps clear of the rows: it starts below the item's row and ends above
   the next sibling's. */
#tree li:not(:last-child) > .body {
  position: relative;
}

#tree li:not(:last-child) > .body::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0.35rem;
  border-left: 2px solid var(--vscode-panel-border, rgba(127, 127, 127, 0.3));
  pointer-events: none;
}

/* Parts come closer to the row (0.15rem) than an example does: start the line as far below it. */
#tree li:not(:last-child) > .body:has(> ul:first-child)::before {
  top: 0.35rem;
}

/* A row: the fold mark, the label (the part's code), its name badge, the explanation and the links. A label
   and its explanation share the row when at least half of it (60% on a narrow panel) is left for the
   explanation; otherwise the explanation goes under the label, in line with it, and the label, shown whole,
   wraps at its spaces (or anywhere in a long word) when it is longer than the row. Links that would take
   that room go under the explanation, at the right. The fold mark sits in the
   left padding (a negative margin), so that a wrapped line starts under the label, not under the mark; the
   shares are of the row from the fold mark on (--fold: the mark and its gap), as when the mark was in line. */
.row {
  --fold: calc(0.8em + 0.6rem);
  --share: 0.5;
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.6rem;
  row-gap: 0;
  align-items: baseline;
  padding: 0.15rem 0.4rem 0.15rem calc(0.4rem + var(--fold));
  border-left: 3px solid currentColor;
  margin: 0.15rem 0;
  border-radius: 2px;
  cursor: pointer;
}

.row > .twisty {
  margin-left: calc(-1 * var(--fold));
}

.row .text {
  flex: 1 1 calc(var(--share) * (100% + var(--fold)));
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--vscode-foreground);
}

/* The sections of the manual a row or a note is about: small links at the end, quiet until pointed at. */
.refs {
  font-size: 0.85em;
  white-space: nowrap;
}

.row .refs {
  margin-left: auto;
}

.note .refs {
  margin-left: 0.5em;
}

/*
 * What a note rests on where it is bash's behaviour rather than the manual (media/panel.js `basisParts`,
 * docs/design/basis.md): a quiet chip after the text, in the foreground on a tint of the muted colour (not a level's
 * colour: it is no problem; not an outlined box: those are the name kinds' badges), and the try-it folded under it.
 */
.basis {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0 0.5em;
  font-size: 0.85em;
  line-height: 1.5;
  color: var(--vscode-foreground);
  background: color-mix(in srgb, var(--c-muted) 18%, transparent);
  border-radius: 999px;
  overflow-wrap: anywhere;
}

.tryit {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.92em;
}

/* A row's try-it: a line of its own under the row, as wide as the row (media/panel.js `item`). */
.row > .tryit {
  flex: 1 1 100%;
  min-width: 0;
  margin-top: 0.15rem;
  cursor: auto;
}

summary.tryit-head {
  color: var(--c-muted);
  cursor: pointer;
  width: fit-content;
}

details.tryit[open] > summary.tryit-head {
  margin-bottom: 0.25rem;
}

.tryit-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.25rem 0.5rem;
  align-items: baseline;
}

.tryit-line {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.4rem;
  align-items: flex-start;
  min-width: 0;
}

.tryit-code,
.tryit-output {
  display: block;
  min-width: 0;
  padding: 0.15rem 0.45rem;
  border-radius: 3px;
  font-family: var(--vscode-editor-font-family, monospace);
  color: var(--vscode-foreground);
  background: var(--vscode-textCodeBlock-background, rgba(127, 127, 127, 0.1));
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: text;
}

.tryit-code {
  flex: 1 1 auto;
}

/* (A word of code moves to the next line whole; one wider than the box breaks anywhere in it: media/panel.js `shellWords`.) */
.tryit-word {
  display: inline-block;
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.tryit-prints {
  color: var(--c-muted);
}

.tryit-copy {
  flex: none;
  min-height: 24px;
  padding: 0 0.6em;
  font: inherit;
  color: var(--vscode-foreground);
  background: transparent;
  border: 1px solid var(--c-muted);
  border-radius: 3px;
  cursor: pointer;
}

.tryit-copy:hover {
  background: var(--vscode-toolbar-hoverBackground, rgba(127, 127, 127, 0.15));
}

/* (On a touch screen, and on the web page's phone layout, the targets are taller.) */
@media (pointer: coarse) {
  .tryit-copy { min-height: 40px; }
  summary.tryit-head { padding-block: 0.6rem; }
}

@media (max-width: 520px) {
  html.bx-web .tryit-copy { min-height: 40px; }
  html.bx-web summary.tryit-head { padding-block: 0.6rem; }
}

@media (forced-colors: active) {
  .basis { border: 1px solid CanvasText; color: CanvasText; }
  summary.tryit-head, .tryit-prints { color: CanvasText; }
  .tryit-copy { border-color: ButtonText; color: ButtonText; }
}

.refs a {
  color: var(--c-muted);
  text-decoration: none;
}

.refs a:hover,
.refs a:focus-visible {
  color: var(--vscode-textLink-activeForeground, var(--vscode-textLink-foreground));
  text-decoration: underline;
}

.row.active {
  background: var(--vscode-list-hoverBackground);
}

.label {
  font-family: var(--vscode-editor-font-family);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

/* A placeholder in a label (what a skeleton leaves out): proportional, italic and muted, unlike the code around it. */
.label .ph {
  font-family: var(--vscode-font-family);
  font-style: italic;
  color: var(--c-muted);
  /* An italic letter leans out of its box; the label clips what overflows, so give the last one room. */
  padding-right: 0.15em;
}

code {
  font-family: var(--vscode-editor-font-family);
}

.text code {
  background: var(--vscode-textCodeBlock-background, rgba(127, 127, 127, 0.15));
  padding: 0 0.25em;
  border-radius: 3px;
}

/* With `bashExplainer.panel.colors` set to follow the theme, the host sets every role's variable on body (src/ui/themePalette.ts);
   the roles the palette groups (a builtin with commands, a string with arguments) default to their group's. */
.kind-command, .kind-subcommand, .kind-function, .kind-alias { color: var(--c-command); }
.kind-builtin { color: var(--c-builtin, var(--c-command)); }
.kind-option { color: var(--c-option); }
.kind-pattern { color: var(--c-pattern); }
.kind-argument { color: var(--c-argument); }
.kind-string { color: var(--c-string, var(--c-argument)); }
.kind-number { color: var(--c-number); }
.kind-keyword { color: var(--c-keyword); }
.kind-operator, .kind-block, .kind-test { color: var(--c-operator); }
.kind-redirect { color: var(--c-redirect); }
.kind-variable, .kind-expansion, .kind-substitution { color: var(--c-variable); }
.kind-assignment { color: var(--c-assignment, var(--c-variable)); }
.kind-comment { color: var(--c-comment); }
/* The shebang names the program that runs the file: a command's colour, not a comment's (src/ui/themePalette.ts, GROUP). */
.kind-shebang { color: var(--c-shebang, var(--c-command)); }
.kind-error { color: var(--c-error); }

#empty {
  color: var(--c-muted);
}

.example {
  margin-top: 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--vscode-panel-border, rgba(127, 127, 127, 0.3));
}

.example h3 {
  font-size: 1em;
  margin: 0 0 0.4rem;
}

.example-label {
  color: var(--c-muted);
  font-size: 0.9em;
  margin: 0.4rem 0 0.15rem;
}

.example-note {
  color: var(--c-muted);
  font-size: 0.9em;
  margin: 0.2rem 0 0.4rem;
}

.example pre {
  font-family: var(--vscode-editor-font-family);
  font-size: var(--vscode-editor-font-size);
  background: var(--vscode-textCodeBlock-background, rgba(127, 127, 127, 0.1));
  padding: 0.4rem 0.7rem;
  border-radius: 4px;
  margin: 0;
  overflow-x: auto;
  white-space: pre;
}

.example pre.example-empty {
  color: var(--c-muted);
  font-style: italic;
}

/* The words of a brace expansion (media/panel.js `wordList`): chips with an edge in a row, as the words of a value
   (`.ev-word`), so that they read as separate arguments, not as lines of output; then the cut, muted. */
.example-words {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.6rem;
}

.example-words.example-empty {
  color: var(--c-muted);
  font-style: italic;
}

.example-words ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.example-words code.ev-word {
  font-family: var(--vscode-editor-font-family);
  font-size: var(--vscode-editor-font-size);
  background: var(--vscode-textCodeBlock-background, rgba(127, 127, 127, 0.15));
  border: 1px solid var(--c-muted);
  border-radius: 3px;
  padding: 0.1em 0.45em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.example-words-after {
  color: var(--c-muted);
  font-size: 0.9em;
}

/* Lines wider than their section scroll sideways; an edge fades where more lies beyond it. */
.example pre.ex-more-right {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2em), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 2em), transparent);
}

.example pre.ex-more-left {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 2em), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 2em), transparent);
}

.example pre.ex-more-left.ex-more-right {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 2em, #000 calc(100% - 2em), transparent);
  mask-image: linear-gradient(to right, transparent, #000 2em, #000 calc(100% - 2em), transparent);
}

/* What the next stage of a pipeline reads (src/examples/marks.ts): a background and an underline, not a colour alone;
   no padding or border, so that the columns stay lined up. The lines it leaves out are dimmer. */
.example mark.ex-read {
  background: var(--vscode-editor-findMatchHighlightBackground, rgba(234, 92, 0, 0.33));
  color: inherit;
  text-decoration: underline 2px;
  text-underline-offset: 0.2em;
  border-radius: 2px;
}

.example .ex-left-out {
  color: color-mix(in srgb, currentColor 45%, transparent);
}

@media (forced-colors: active) {
  .example mark.ex-read {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }

  .example .ex-left-out {
    color: GrayText;
  }
}

/* An example placed under its token: indented with the token's children, set off by a left rule. */
.example.nested {
  margin: 0.5rem 0 0.5rem 1.1rem;
  padding: 0.1rem 0 0.1rem 0.7rem;
  border-top: none;
  border-left: 2px solid var(--vscode-panel-border, rgba(127, 127, 127, 0.3));
}

/* The header, as a view's title bar in VS Code: the line shown and the shell's dropdown (.here), the yq
   dropdown, then the view switch and the toolbar's icon buttons (.actions). It wraps between these groups
   only, never inside them, so the rows do not depend on how wide the words are in a font: a narrow panel
   shows the line and the shell on the first row and the actions on a row of their own (the views at the
   left, the buttons at the right); a line too long for its row ends in an ellipsis, the shell stays whole.
   (.here grows a thousand times faster than .actions, so on one row the actions stay at the right.) */
header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  padding: 0.2rem 0;
}

header .here {
  display: flex;
  flex: 1000 1 auto;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

header .where {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

header .here .pick {
  flex: none;
}

header .actions {
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  gap: 0.4rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* An icon (media/icons.js draws it): 16px, in the text's colour. */
.ico {
  width: 16px;
  height: 16px;
  flex: none;
  fill: currentColor;
}

/* The shell (and yq): VS Code's dropdown, with its arrow drawn as an icon (the CSP allows no image). */
.pick:not([hidden]) {
  display: inline-flex;
  min-width: 0;
}

.dropdown {
  position: relative;
  display: inline-flex;
  min-width: 0;
}

.dropdown select {
  appearance: none;
  -webkit-appearance: none;
  height: 24px;
  min-width: 5.5rem;
  max-width: min(100%, 14rem);
  margin: 0;
  padding: 0 22px 0 6px;
  border: 1px solid var(--vscode-dropdown-border, var(--vscode-dropdown-background));
  border-radius: 2px;
  background: var(--vscode-dropdown-background);
  color: var(--vscode-dropdown-foreground);
  font: inherit;
  text-overflow: ellipsis;
  cursor: pointer;
}

.dropdown .ico {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--vscode-dropdown-foreground, var(--vscode-foreground));
}

/* The view control (media/view-control.js): its options as segments, the one shown pressed (VS Code's input
   toggles); where they do not fit the header's row (panel.js, `drawViews`), a dropdown that opens them as a menu.
   A text that changes with the option shown is drawn over the others it may become (.vc-stack), so that a press
   moves nothing. */
.vc {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.35rem;
}

.vc-stack {
  display: inline-grid;
}

.vc-stack > * {
  grid-area: 1 / 1;
}

.vc-size {
  visibility: hidden;
}

/* An option with a digit shows its name only when it is the one shown. */
.vc[data-form="segments"] button[aria-pressed="false"] .vc-digit + .vc-name,
.vc[data-form="segments"] .vc-open,
.vc[data-form="menu"]:not([data-open="true"]) .vc-options {
  display: none;
}

.vc-digit + .vc-name {
  margin-left: 0.3em;
}

.vc-options {
  display: inline-flex;
  flex: none;
  padding: 1px;
  border: 1px solid var(--vscode-dropdown-border, var(--vscode-panel-border, rgba(127, 127, 127, 0.4)));
  border-radius: 4px;
}

/* The menu: under its button, an option per row. */
.vc[data-form="menu"] .vc-options {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  z-index: 5;
  flex-direction: column;
  min-width: 100%;
  padding: 2px;
  background: var(--vscode-menu-background, var(--vscode-dropdown-background));
  color: var(--vscode-menu-foreground, var(--vscode-foreground));
  box-shadow: 0 2px 8px var(--vscode-widget-shadow, rgba(0, 0, 0, 0.3));
}

.vc[data-form="menu"] .vc-options button {
  justify-content: flex-start;
  height: 24px;
  text-align: left;
  white-space: nowrap;
}

/* The menu's button: VS Code's dropdown, its arrow drawn as an icon. */
.vc-open {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 4px 0 6px;
  border: 1px solid var(--vscode-dropdown-border, var(--vscode-dropdown-background));
  border-radius: 2px;
  background: var(--vscode-dropdown-background);
  color: var(--vscode-dropdown-foreground);
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.vc-chev {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.vc-options button {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 5px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--vscode-foreground);
  font: inherit;
  font-size: 0.85em;
  line-height: 1;
  cursor: pointer;
}

.vc-options button[aria-pressed="true"] {
  background: var(--vscode-inputOption-activeBackground, rgba(36, 137, 219, 0.3));
  border-color: var(--vscode-inputOption-activeBorder, transparent);
  color: var(--vscode-inputOption-activeForeground, var(--vscode-foreground));
}

/* The toolbar: 24px icon buttons, as in a view's title bar. */
.tools {
  display: flex;
  flex: none;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.tb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--vscode-icon-foreground, var(--vscode-foreground));
  cursor: pointer;
}

/* Hover: the toolbar's colour; in high contrast, which has none, a dashed outline (toolbar.hoverOutline). */
.tb:hover,
.vc-options button[aria-pressed="false"]:hover {
  background: var(--vscode-toolbar-hoverBackground, transparent);
  outline: 1px dashed var(--vscode-toolbar-hoverOutline, transparent);
  outline-offset: -1px;
}

.tb[aria-pressed="true"] {
  background: var(--vscode-inputOption-activeBackground, rgba(36, 137, 219, 0.3));
  border-color: var(--vscode-inputOption-activeBorder, transparent);
  color: var(--vscode-inputOption-activeForeground, var(--vscode-foreground));
}

/* The keyboard's focus: VS Code's 1px ring. */
.tb:focus-visible,
.vc-options button:focus-visible,
.vc-open:focus-visible,
.dropdown select:focus-visible {
  outline: 1px solid var(--vscode-focusBorder);
  outline-offset: -1px;
}

/* The explanation as a whole, focused by the web page's F6 (panel.js, `focusExplanation`). */
#main:focus {
  outline: none;
}

#main:focus-visible {
  outline: 1px solid var(--vscode-focusBorder);
  outline-offset: 2px;
}

/* Folding: the twisty, and a collapsed item's children. The list's twisty is a button (panel.js, `item`) drawn as
   the glyph alone, in the same place. */
.twisty {
  flex: 0 0 0.8em;
  color: var(--c-muted);
  user-select: none;
}

button.twisty {
  box-sizing: border-box;
  width: 0.8em;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  line-height: inherit;
  text-align: left;
  color: var(--c-muted);
  cursor: pointer;
  border-radius: 2px;
}

button.twisty:focus-visible {
  outline: 1px solid var(--vscode-focusBorder);
  outline-offset: 1px;
}

li.collapsed > .body {
  display: none;
}

/* A box folded by hand is drawn until it has shrunk (panel.js, fold). */
li.collapsed > .body[data-closing],
#reading-tree ul[role="group"][hidden][data-closing] {
  display: block;
}

/* Capture groups: the same colour for the group in the tree and what it matched in the examples. */
.grp-1 { --grp: var(--vscode-charts-blue, #3794ff); }
.grp-2 { --grp: var(--vscode-charts-green, #89d185); }
.grp-3 { --grp: var(--vscode-charts-orange, #d18616); }
.grp-4 { --grp: var(--vscode-charts-purple, #b180d7); }
.grp-5 { --grp: var(--vscode-charts-yellow, #cca700); }
.grp-6 { --grp: var(--vscode-charts-red, #f14c4c); }

.grp-label {
  border-bottom: 2px solid var(--grp);
}

.match {
  background: var(--vscode-editor-findMatchHighlightBackground, rgba(234, 92, 0, 0.33));
  border-radius: 2px;
}

.match.grp {
  background: color-mix(in srgb, var(--grp) 35%, transparent);
}

/* The example input: a transparent textarea over a layer showing the same text with highlights. */
.editor {
  position: relative;
}

.editor .layer,
.editor textarea {
  font-family: var(--vscode-editor-font-family);
  font-size: var(--vscode-editor-font-size);
  line-height: 1.5;
  padding: 0.4rem 0.7rem;
  margin: 0;
  border-radius: 4px;
  white-space: pre-wrap;
  word-break: break-all;
  tab-size: 8;
}

.editor .layer {
  background: var(--vscode-textCodeBlock-background, rgba(127, 127, 127, 0.1));
  color: var(--vscode-editor-foreground);
  border: 1px solid transparent;
  overflow: hidden;
}

.editor textarea {
  position: absolute;
  inset: 0;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  color: transparent;
  caret-color: var(--vscode-editor-foreground);
  border: 1px dashed var(--vscode-input-border, rgba(127, 127, 127, 0.4));
  resize: none;
  overflow: hidden;
  outline: none;
}

.editor textarea:focus {
  border: 1px solid var(--vscode-focusBorder);
}

.hint {
  font-size: 0.9em;
  opacity: 0.8;
}

/* Quick reference. */
#reference h3 {
  font-size: 1em;
  margin: 1rem 0 0.3rem;
}

#ref-search {
  width: 100%;
  box-sizing: border-box;
  padding: 0.3rem 0.5rem;
  margin: 0.4rem 0;
  background: var(--vscode-input-background);
  color: var(--vscode-input-foreground);
  border: 1px solid var(--vscode-input-border, transparent);
  border-radius: 4px;
  font: inherit;
}

#ref-search:focus-visible {
  outline: 2px solid var(--vscode-focusBorder);
  outline-offset: -1px;
}

.ref-row {
  display: flex;
  gap: 0.8rem;
  padding: 0.1rem 0.4rem;
}

.ref-row code {
  flex: 0 0 auto;
  min-width: 9em;
  color: var(--c-command);
}

.ref-row span code {
  background: var(--vscode-textCodeBlock-background, rgba(127, 127, 127, 0.15));
  padding: 0 0.25em;
  border-radius: 3px;
}

/* Narrow panels (a phone): the explanation keeps 60% of the row beside a label, or goes under it. */
@media (max-width: 520px) {
  .row {
    --share: 0.6;
  }
}

/* ---------------------------------------------------------------- the tree view */

/* The layers of the tree view (src/reading.ts), in the colours of the roles: bash in the keyword colour, a
   the shell of a script inside in the command colour, a command's reading in the argument colour, a language in the option colour. */
body {
  --l-bash: var(--c-keyword);
  --l-child: var(--c-command);
  --l-command: var(--c-argument);
  --l-language: var(--c-option);
}

.l-bash { --l: var(--l-bash); }
.l-child { --l: var(--l-child); }
.l-command { --l: var(--l-command); }
.l-language { --l: var(--l-language); }

#layers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin: 0 0 0.5rem;
}

#layers button {
  font: inherit;
  font-size: 0.9em;
  color: var(--vscode-foreground);
  background: transparent;
  border: 1px solid var(--vscode-panel-border, rgba(127, 127, 127, 0.4));
  border-radius: 4px;
  padding: 0.1rem 0.6rem;
  cursor: pointer;
}

#layers-label {
  color: var(--c-muted);
  font-size: 0.9em;
  /* (On one line: squeezed, the label would wrap a character per line and never make the row overflow, so
     fitControls would not hide it.) */
  white-space: nowrap;
  flex: none;
}

#layers button:focus-visible {
  outline: 2px solid var(--vscode-focusBorder);
  outline-offset: 1px;
}

/* The steps of the tree view (media/panel.js, STEPS): the row of controls stays under the line at the top while
   the tree scrolls under it. Each step has the colour of its reader; the steps shown before the current one keep a
   light tint, so the row reads as how far the tree is unfolded. */
#layers {
  position: sticky;
  top: var(--line-h, 0px);
  z-index: 1;
  background: var(--vscode-editor-background);
  padding: 0.2rem 0;
}

#layers.stuck {
  box-shadow: 0 1px 0 var(--vscode-panel-border, rgba(127, 127, 127, 0.3));
}

#layers button {
  min-height: 24px;
  min-width: 24px;
  white-space: nowrap;
}

#layers button[aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
}

#layers .tp-icon {
  display: inline-block;
  min-width: 1em;
  text-align: center;
}

.tp-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* A segmented row of the steps, on one line; where it does not fit (panel.js adds .compact), a stepper whose
   middle button opens the steps as a menu. */
#layers {
  flex-wrap: nowrap;
}

.step-pick {
  display: contents;
}

#steps {
  display: inline-flex;
}

#steps button.step {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 0;
  margin-left: -1px;
  padding: 0.1rem 0.5rem;
}

#steps button.step:first-child {
  border-radius: 4px 0 0 4px;
  margin-left: 0;
}

#steps button.step:last-child {
  border-radius: 0 4px 4px 0;
}

#layers .num {
  font-size: 0.85em;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

#layers button.step.passed {
  background: color-mix(in srgb, var(--l) 8%, transparent);
}

#layers button.step[aria-current="step"] {
  position: relative;
  border-color: var(--l);
  background: color-mix(in srgb, var(--l) 22%, transparent);
}

#layers button.step.empty .short {
  opacity: 0.6;
}

/* With forced colours the step's tint is gone: the current step is drawn in the system's highlight. */
@media (forced-colors: active) {
  #layers button.step[aria-current="step"] {
    forced-color-adjust: none;
    background: Highlight;
    border-color: Highlight;
    color: HighlightText;
  }

  #layers button.step[aria-current="step"] * {
    color: HighlightText;
  }
}

#step-menu {
  display: none;
}

#layers.tight #layers-label,
#layers.tighter:not(.compact) #tp-back,
#layers.tighter:not(.compact) #tp-forward,
#layers.tighter #steps .num {
  display: none;
}

#layers.tighter #steps button.step {
  padding: 0.1rem 0.4rem;
}

#layers.compact .step-pick {
  position: relative;
  display: inline-flex;
  min-width: 0;
  flex: 0 1 auto;
}

#layers.compact #step-menu {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  border-color: var(--l);
}

#step-menu .sm-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

#step-menu .sm-count {
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

#layers.compact #steps {
  display: none;
}

#layers.compact.open #steps {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 12rem;
  padding: 0.25rem;
  background: var(--vscode-editorWidget-background, var(--vscode-editor-background));
  border: 1px solid var(--vscode-editorWidget-border, var(--vscode-panel-border, rgba(127, 127, 127, 0.4)));
  border-radius: 4px;
  box-shadow: 0 2px 8px var(--vscode-widget-shadow, rgba(0, 0, 0, 0.3));
}

#layers.compact.open #steps button.step {
  margin: 0;
  border-radius: 4px;
  justify-content: flex-start;
}

/* Touch screens and the web page on a phone: larger targets. */
@media (pointer: coarse) {
  #layers button {
    min-height: 40px;
    min-width: 40px;
  }
}

@media (max-width: 520px) {
  html.bx-web #layers button {
    min-height: 40px;
    min-width: 40px;
  }
}

/* The tree view: an outline. Each row has the code in a pill and the kind on its first line, the text on a line
   of its own under them. Connectors are drawn with borders: a vertical line per group of children, under the
   twisty of their parent, and an elbow to each child at the middle of its first line; where a new reader takes
   over, the item and what lies under it have the layer's tint.
   The lengths below place the lines: a group is indented by --t-indent, a row's twisty is --t-tw wide at
   --t-twisty, and its code starts at --t-code. */
#reading-tree {
  --t-indent: 1.2rem;
  --t-twisty: 0.3rem;
  --t-tw: 0.9rem;
  --t-code: 1.3rem;
  --t-pad: 0.15rem;
  /* Where a group's line is, from the left of each child: under the middle of the parent's twisty. */
  --t-line: calc(var(--t-twisty) + var(--t-tw) / 2 - var(--t-indent));
  /* The middle of a row's first line (the rows have the body's line height, 1.5). */
  --t-elbow: calc(var(--t-pad) + 0.75em);
  --t-guide: color-mix(in srgb, var(--vscode-foreground) 35%, transparent);
  --t-bg: var(--vscode-editor-background, Canvas);
}

#reading-tree,
#reading-tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#reading-tree ul {
  padding-left: var(--t-indent);
}

/* A band where a reader takes over: the item and what lies under it, in its layer's tint. The tint is opaque
   (the layer's colour mixed with the background, not laid over it), so a band in a band has the same tint as
   one at the top: the text measures the same on every band (at least 4.5:1, test/contrast.test.ts).
   Its edges show where the reader's part starts and ends: a rule in the layer's colour down its left side, and a
   hairline at its top and its bottom, mixed with the background but still 3:1 against the background and every
   tint (test/contrast.test.ts). No edge on the right: nested bands end at the same right edge. Borders, not a
   shadow, so the row under the pointer does not paint over them; the negative margins give back the room they
   take, so the content and the outline's lines stay where they are. */
#reading-tree li.band {
  background: color-mix(in srgb, var(--l) 6%, var(--t-bg));
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--l) 80%, var(--t-bg));
  border-left: 2px solid var(--l);
  border-right: 0;
  margin: -1px 0 -1px -2px;
}

#reading-tree ul[role="group"] > li {
  position: relative;
}

#reading-tree ul[role="group"] > li::before,
#reading-tree ul[role="group"] > li::after {
  content: "";
  position: absolute;
  left: var(--t-line);
  pointer-events: none;
}

/* The group's line, along each child; it stops at the last child's elbow. */
#reading-tree ul[role="group"] > li::before {
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--t-guide);
}

#reading-tree ul[role="group"] > li:last-child::before {
  bottom: auto;
  height: var(--t-elbow);
}

/* The elbow, to the child's twisty, or to its code when it has none. */
#reading-tree ul[role="group"] > li::after {
  top: var(--t-elbow);
  width: calc(var(--t-twisty) - var(--t-line) - 0.1rem);
  border-top: 1px solid var(--t-guide);
}

#reading-tree ul[role="group"] > li:not([aria-expanded])::after {
  width: calc(var(--t-code) - var(--t-line) - 0.2rem);
}

#reading-tree li:focus {
  outline: none;
}

.trow {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 0.5rem;
  /* The twisty sits in the left padding: the text under the code lines up with it. */
  padding: var(--t-pad) 0.4rem var(--t-pad) var(--t-code);
  border-radius: 3px;
  cursor: pointer;
}

/* The code and the kind, which wrap together; the reader's name and the links keep to the first line. */
.trow .thead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.5rem;
  min-width: 0;
}

.trow .tright {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.trow .twisty {
  position: absolute;
  left: var(--t-twisty);
  width: var(--t-tw);
  text-align: center;
}

#reading-tree li:focus-visible > .trow {
  outline: 2px solid var(--vscode-focusBorder);
  outline-offset: -2px;
}

.trow.active {
  background: var(--vscode-list-hoverBackground);
}

.trow .chip {
  color: var(--l);
  font-weight: 600;
  font-size: 0.85em;
  white-space: nowrap;
}

/* The pill has the background of the page, not a code block's grey: its code measures as on the page. */
.trow .tcode {
  font-family: var(--vscode-editor-font-family);
  background: var(--t-bg);
  border: 1px solid var(--vscode-panel-border, rgba(127, 127, 127, 0.3));
  border-radius: 4px;
  padding: 0 0.35em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  min-width: 0;
}

.trow .text {
  grid-column: 1 / -1;
  min-width: 0;
  color: var(--vscode-foreground);
  overflow-wrap: anywhere;
}

.trow .text.about {
  color: var(--c-muted);
  font-style: italic;
}

.trow .band-label {
  color: var(--l);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--l) 60%, transparent);
  border-radius: 3px;
  padding: 0 0.3em;
}

/* The tree view's highlight in the line at the top. */
pre#line span.mark {
  background: var(--vscode-editor-findMatchHighlightBackground, rgba(234, 92, 0, 0.33));
  border-radius: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .trow {
    transition: background-color 0.15s;
  }
}

/* High contrast: no tints, a solid edge round each band instead (VS Code's themes, and the system's forced
   colours). An outline, not a border: it takes no room, so the lines stay where they are. */
body.vscode-high-contrast #reading-tree li.band,
body.vscode-high-contrast-light #reading-tree li.band {
  background: none;
  border: 0;
  margin: 0;
  outline: 1px solid var(--l);
  outline-offset: -1px;
}

/* What a command name is (media/panel.js `nameBadge`, src/namefacts.ts), in both views: a badge with the kind's
   word after the name, then who looks the name up when another command does, and a muted line on the other
   meanings of the same name. The word is in the foreground colour; the edge only repeats the role's colour: solid
   for bash's own (a keyword, a builtin, a function, an alias), dashed for a program, a file started as another
   process, and dotted where nothing runs. */
.nk-badge {
  font-size: 0.78em;
  font-weight: 600;
  line-height: 1.3;
  color: var(--vscode-foreground);
  border: 1px solid var(--c-command);
  border-radius: 3px;
  padding: 0 0.35em;
  white-space: nowrap;
  flex: 0 0 auto;
}

.nk-badge.nk-keyword {
  border-color: var(--c-keyword);
}

.nk-badge.nk-program {
  border-style: dashed;
  border-color: var(--vscode-foreground);
}

.nk-badge.nk-none {
  border-style: dotted;
  border-color: var(--vscode-foreground);
}

.nk-by {
  font-size: 0.85em;
  color: var(--c-muted);
  font-style: italic;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* (No slanted Japanese: the fonts have no italic, and the browser would only skew the glyphs.) */
:lang(ja) .nk-by {
  font-style: normal;
}

.nk-also {
  display: block;
  color: var(--c-muted);
  font-size: 0.9em;
  margin-top: 0.1rem;
  overflow-wrap: anywhere;
}

.trow .nk-also {
  grid-column: 1 / -1;
  min-width: 0;
}

/* The value of an expansion where it runs (media/panel.js `valueLine`, docs/design/expansion-values.md): a line under
   the meaning, the lead muted, the value and its words as chips with an edge, so that two words read as two (and a
   space inside a word stays visible). */
.ev-value {
  display: block;
  font-size: 0.9em;
  margin-top: 0.15rem;
  overflow-wrap: anywhere;
}

.ev-lead {
  color: var(--c-muted);
}

.text code.ev-word {
  white-space: pre-wrap;
  border: 1px solid var(--c-muted);
  padding: 0 0.3em;
  margin-right: 0.1em;
}

/* A space at an end of a value, drawn by CSS (media/panel.js `valueLine`): a glyph for it (the symbol for a space) is a box
   where no font has it. A real space in a box with a bottom edge, like the open box that marks a space in a terminal. */
.ev-sp {
  display: inline-block;
  white-space: pre;
  width: 1ch;
  height: 0.55em;
  box-sizing: border-box;
  border: 1px solid var(--c-muted);
  border-top: 0;
  vertical-align: -0.1em;
}

/* A control character in a shown text (media/panel.js `withMarks`): its name in a small box, since the glyphs for them (the
   Unicode control pictures: a newline, an escape, a tab) are boxes where no font has their block, as in Consolas or Segoe UI. */
.ev-ctl {
  display: inline-block;
  font-size: 0.78em;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  padding: 0 0.3em;
  margin: 0 0.1em;
  border: 1px solid var(--c-muted);
  border-radius: 3px;
  color: var(--c-muted);
  vertical-align: 0.05em;
  white-space: pre;
}

@media (forced-colors: active) {
  .ev-sp,
  .ev-ctl {
    border-color: CanvasText;
  }

  .ev-ctl {
    color: CanvasText;
  }

  #reading-tree li.band {
    background: none;
    border: 0;
    margin: 0;
    outline: 1px solid CanvasText;
    outline-offset: -1px;
  }

  #reading-tree ul[role="group"] > li::before,
  #reading-tree ul[role="group"] > li::after {
    border-color: CanvasText;
  }

  .trow .chip,
  .trow .band-label {
    color: CanvasText;
  }

  .nk-badge,
  .nk-badge.nk-keyword,
  .nk-badge.nk-program,
  .nk-badge.nk-none {
    color: CanvasText;
    border-color: CanvasText;
  }

  .nk-by,
  .nk-also,
  .ev-lead {
    color: CanvasText;
  }

  .text code.ev-word,
  .example-words code.ev-word {
    border-color: CanvasText;
  }

  .example-words-after {
    color: CanvasText;
  }

  .trow .band-label {
    border-color: CanvasText;
  }

  /* What backgrounds say elsewhere (the row in focus or under the pointer, the pressed button, the marked
     characters) is said with an outline or the system's highlight colours. */
  .trow.active {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }

  .vc-options button[aria-pressed="true"],
  .tb[aria-pressed="true"],
  #layers button[aria-pressed="true"] {
    outline: 2px solid Highlight;
    outline-offset: 1px;
    border-color: Highlight;
  }

  pre#line span.mark {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
}

/* A phone: a smaller indent. */
@media (max-width: 480px) {
  #reading-tree {
    --t-indent: 0.9rem;
    --t-twisty: 0.15rem;
    --t-tw: 0.8rem;
    --t-code: 1.05rem;
  }
}

/* A narrow VS Code panel: a long kind ("command name · program") deep in the tree wraps, not past the edge. */
@media (max-width: 340px) {
  .trow .chip {
    white-space: normal;
  }
}