/* 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);
  --c-error: var(--vscode-errorForeground, #f14c4c);
}

/* 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.
   Both: the error colour (Light Modern's is 4.23:1 on a code block, Dark Modern's 4.22:1). */
body.vscode-light {
  --c-command: #0161f8;
  --c-option: #9f5c00;
  --c-argument: #1f7c2b;
  --c-keyword: #5f2489;
  --c-redirect: #645000;
  --c-variable: #d0020f;
  --c-error: #d0020f;
}

body.vscode-dark {
  --c-variable: #ff5c65;
  --c-error: #fd6358;
}

/* 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 {
  --c-command: #6badff;
  --c-option: #f69d3d;
  --c-argument: #89d185;
  --c-keyword: #c796ee;
  --c-redirect: #efd62f;
  --c-variable: #ff888e;
}

body.vscode-high-contrast-light {
  --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;
}

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

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

.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);
}

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;
}

.row {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.15rem 0.4rem;
  border-left: 3px solid currentColor;
  margin: 0.15rem 0;
  border-radius: 2px;
  cursor: pointer;
}

.row .text {
  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;
}

.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;
  flex: 0 0 auto;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 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;
}

.kind-command, .kind-subcommand, .kind-builtin, .kind-function, .kind-alias { color: var(--c-command); }
.kind-option { color: var(--c-option); }
.kind-pattern { color: var(--c-pattern); }
.kind-argument, .kind-string { color: 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-assignment, .kind-substitution { color: var(--c-variable); }
.kind-comment { color: var(--c-comment); }
.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;
}

/* 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 switch: two words in a segmented control, the view shown pressed (VS Code's input toggles). */
.segmented {
  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;
}

.segmented button {
  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;
}

.segmented 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,
.segmented 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,
.segmented button:focus-visible,
.dropdown select:focus-visible {
  outline: 1px solid var(--vscode-focusBorder);
  outline-offset: -1px;
}

/* Folding: the twisty, and a collapsed item's children. */
.twisty {
  flex: 0 0 0.8em;
  color: var(--c-muted);
  user-select: none;
}

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): a long label no longer squeezes the explanation into a few words. When
   less than 60% of the row is left beside the label, the explanation goes under it, in line with the
   label (after the twisty); a label too long for the row is cut at the row's width. A short label
   keeps its explanation beside it. */
@media (max-width: 520px) {
  .row {
    flex-wrap: wrap;
    row-gap: 0;
  }

  .row .text {
    flex: 1 1 60%;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* The label stays on the twisty's line, cut with "…" at what is left of it. */
  .label {
    flex: 0 1 auto;
    min-width: 0;
    max-width: calc(100% - 0.8em - 0.6rem);
  }

}

/* ---------------------------------------------------------------- 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;
}

#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). */
#reading-tree li.band {
  background: color-mix(in srgb, var(--l) 6%, var(--t-bg));
  border-radius: 4px;
}

#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;
  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;
}

@media (forced-colors: active) {
  #reading-tree li.band {
    background: none;
    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 {
    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;
  }

  .segmented 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;
  }
}