/*
 * The web page: an app shell as high as the window. A top bar, then the editor and the explanation,
 * side by side (one above the other on a phone) with a divider to resize them. The page itself never
 * scrolls; the editor, the explanation and the side sheets (the menu, the settings) scroll inside.
 * The colours are the tokens of theme.css.
 */

* {
  box-sizing: border-box;
}

/* The colours of the notes' levels, under the panel's names (media/panel.css): the editor's squiggles, gutter icons
   and tooltips, and the Problems list. theme.css has their light and dark values. */
:root {
  /* level table (src/levels.ts, scripts/level-css.ts): root */
  --c-error-level: var(--vscode-editorError-foreground);
  --c-warning: var(--vscode-editorWarning-foreground);
  --c-info: var(--vscode-editorInfo-foreground);
  /* end of the level table */
}

/* The app shell: the window's height, and no page scroll. */
html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}

a {
  color: var(--vscode-textLink-foreground);
}

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

/* The icons, drawn with the text's colour. */
.icons {
  display: none;
}

.icon-btn svg,
.menu-item svg,
.text-btn svg,
.tool-btn svg,
.popitem svg,
.empty-btn svg,
.file-pencil {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The Codicons shared with the VS Code panel (media/icons.js): filled, drawn on their 16px grid as in VS Code. Their
   glyphs fill more of the box than the page's own 24px icons, so at 16px they look as large as those at 18px. */
.icon-btn svg.ico,
.panel-tool svg.ico,
.menu-item svg.ico {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: none;
}

/* In the menu, in the 18px column of the other icons, so that the labels line up. */
.menu-item svg.ico {
  margin: 0 1px;
}

/* GitHub's mark: filled, in its own colour only (black or white), at the size of the other icons. */
.icon-btn svg.gh-mark,
.menu-item svg.gh-mark {
  fill: var(--github-mark);
  stroke: none;
}

/* ---- Controls --------------------------------------------------------------------------------- */

select,
button {
  font: inherit;
  color: var(--vscode-dropdown-foreground);
}

select {
  appearance: none;
  -webkit-appearance: none;
  min-height: var(--control-h);
  max-width: 100%;
  padding: 0 28px 0 10px;
  border: 1px solid var(--vscode-dropdown-border);
  border-radius: var(--radius-sm);
  background: var(--vscode-dropdown-background) var(--select-arrow) no-repeat right 8px center / 12px 12px;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* Hover states for a mouse only: on a touch screen they would stay after a tap. */
@media (hover: hover) {
  select:hover {
    border-color: var(--hover-border);
  }
}

button {
  min-height: var(--control-h);
  padding: 0 12px;
  border: 1px solid var(--vscode-dropdown-border);
  border-radius: var(--radius-sm);
  background: var(--vscode-dropdown-background);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

@media (hover: hover) {
  button:hover {
    background: var(--vscode-list-hoverBackground);
    border-color: var(--hover-border);
  }
}

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

/* A square button with an icon only; its name is its aria-label and its title. */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-height: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--vscode-foreground);
  text-decoration: none;
}

@media (hover: hover) {
  .icon-btn:hover {
    background: var(--vscode-list-hoverBackground);
    border-color: transparent;
  }
}

.icon-btn:active,
.menu-item:active {
  background: var(--accent-soft);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after,
  ::backdrop {
    transition: none !important;
    animation: none !important;
  }
}

/* ---- The top bar ------------------------------------------------------------------------------ */

.top {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--bar-h);
  padding: 0 8px 0 12px;
  background: var(--page-background);
  border-bottom: 1px solid var(--vscode-panel-border);
}

.brand {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  color: var(--vscode-foreground);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.brand .logo {
  flex: none;
}

.logo-accent {
  color: var(--logo-accent);
}

.logo-ink {
  color: var(--logo-ink);
}

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

/* The file kind (the compare page): a button drawn as a select, with the whole name, and its list. A narrow window
   hides it (below). */
.picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 15rem;
  padding: 0 8px 0 10px;
  font-weight: 500;
  white-space: nowrap;
}

.picker-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.picker .chev {
  flex: none;
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--vscode-descriptionForeground);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.picker[aria-expanded="true"] {
  border-color: var(--vscode-focusBorder);
}

.picker-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  min-width: max(100%, 13rem);
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - var(--bar-h) - 16px);
  margin: 0;
  padding: 4px;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--vscode-dropdown-border);
  border-radius: var(--radius);
  background: var(--vscode-editor-background);
  color: var(--vscode-foreground);
  box-shadow: var(--shadow);
}

.picker-list[hidden] {
  display: none;
}

.picker-list [role="option"] {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  cursor: pointer;
}

/* The chosen kind has a check mark after its name. */
.picker-list [aria-selected="true"] {
  font-weight: 600;
}

.picker-list [aria-selected="true"]::after {
  content: "✓";
  margin-left: auto;
  padding-left: 12px;
  color: var(--vscode-focusBorder);
}

.picker-list [role="option"]:focus {
  outline: none;
  background: var(--accent-soft);
}

.picker-list [role="option"]:focus-visible {
  outline: 2px solid var(--vscode-focusBorder);
  outline-offset: -2px;
}

@media (hover: hover) {
  .picker-list [role="option"]:hover {
    background: var(--vscode-list-hoverBackground);
  }
}

.tagline {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--vscode-descriptionForeground);
  font-size: 12.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.actions .sep {
  width: 1px;
  height: 20px;
  margin: 0 6px;
  background: var(--vscode-panel-border);
}

.compact select {
  font-size: 12.5px;
}

.install {
  display: inline-flex;
  align-items: center;
  height: 30px;
  margin: 0 4px 0 6px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  background: var(--page-accent);
  color: var(--page-accent-foreground);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.15s;
}

.install:hover {
  filter: brightness(1.1);
}

/* "Copy a link": an icon and its words; after a copy, ✓ and "Copied" for about 2 s (web/editor-head.ts). */
.text-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  min-height: 0;
  padding: 0 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--vscode-foreground);
  font-size: 13px;
  white-space: nowrap;
}

@media (hover: hover) {
  .text-btn:hover {
    border-color: transparent;
  }
}

.text-btn.copied svg {
  color: var(--page-accent);
}

/* ≡ keeps its size; the file kind's picker gives way first. */
#menu-open {
  flex: none;
}

/* A control given the focus back after a pointer has no ring until the next key (web/popover.ts). */
.no-ring:focus-visible {
  outline: none;
}

/* ---- The editor's header: Open, Save, the file name, ⋯ ------------------------------------------ */

.ed-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 36px;
  padding: 0 4px;
  border-bottom: 1px solid var(--vscode-panel-border);
  background: var(--page-background);
}

.tool-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 28px;
  min-height: 0;
  padding: 0 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--vscode-foreground);
  font-size: 13px;
  white-space: nowrap;
}

@media (hover: hover) {
  .tool-btn:hover {
    border-color: transparent;
  }
}

/* Open and Save as icons, their words for a screen reader, where the header has no room for them (web/scope-chip.ts). */
.ed-head[data-tools="icons"] .tool-btn {
  justify-content: center;
  width: 32px;
  padding: 0;
}

.ed-head[data-tools="icons"] .tool-btn .lbl {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The name only in the menu (its first row), but while it is renamed here. */
.ed-head[data-name="menu"] .file-box:not(:has(.file-name-input:not([hidden]))) {
  display: none;
}

/* The name: as wide as it is, cut in its stem ("very-long-dep….sh") when the header is short of room. */
.file-box {
  display: flex;
  flex: 0 1 auto;
  min-width: 0;
  margin-left: 6px;
  margin-right: auto;
}

.file-name {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  height: 28px;
  min-height: 0;
  padding: 0 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--vscode-foreground);
  font-size: 13px;
  white-space: nowrap;
}

/* Never saved or opened: muted. */
.file-name.draft,
.menu-file.draft .menu-file-name {
  color: var(--vscode-descriptionForeground);
}

.fn-stem {
  min-width: 3ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fn-ext,
.file-dot {
  flex: none;
}

.file-dot {
  margin-left: 6px;
  font-size: 10px;
}

.file-dot[hidden] {
  display: none;
}

/* A pencil says that a click renames, on hover and on focus. */
.file-pencil {
  width: 14px;
  height: 14px;
  margin-left: 6px;
  opacity: 0;
  color: var(--vscode-descriptionForeground);
}

.file-name:focus-visible .file-pencil,
.menu-file .file-pencil {
  opacity: 1;
}

@media (hover: hover) {
  .file-name:hover {
    border-color: var(--vscode-panel-border);
  }

  .file-name:hover .file-pencil {
    opacity: 1;
  }
}

.file-name-input {
  min-width: 0;
  max-width: 100%;
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--vscode-focusBorder);
  border-radius: var(--radius-sm);
  background: var(--vscode-input-background, var(--vscode-editor-background));
  color: var(--vscode-foreground);
  font: inherit;
  font-size: 13px;
}

.file-name[hidden],
.menu-file[hidden],
.file-name-input[hidden] {
  display: none;
}

/* ---- The chip of the file type and the shell, and its popover (web/scope-chip.ts) --------------------------- */

/* At the right, before ⋯, on a quiet round fill. */
.scope-box {
  min-width: 0;
}

.scope-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  height: 28px;
  min-height: 0;
  padding: 0 10px 0 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--vscode-foreground) 7%, transparent);
  color: var(--vscode-foreground);
  font-size: 13px;
  white-space: nowrap;
}

@media (hover: hover) {
  .scope-chip:hover {
    border-color: transparent;
    background: color-mix(in srgb, var(--vscode-foreground) 12%, transparent);
  }
}

.scope-chip[aria-expanded="true"] {
  border-color: var(--vscode-focusBorder);
}

.scope-chip .chev {
  flex: none;
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--vscode-descriptionForeground);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* No form fits: the chip's text is cut. */
.ed-head.squeezed .scope-box {
  flex: 0 1 auto;
}

.scope-chip-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Beside the editor: a popover under the chip, at its right edge, the two lists side by side. */
.scope-pop {
  position: absolute;
  inset: calc(100% + 4px) 0 auto auto;
  z-index: 30;
  width: max-content;
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - var(--bar-h) - 56px);
  margin: 0;
  padding: 8px 4px 4px;
  overflow-y: auto;
  border: 1px solid var(--popup-border);
  border-radius: var(--radius);
  background: var(--vscode-editor-background);
  color: var(--vscode-foreground);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}

.scope-pop:not([open]) {
  display: none;
}

/* Its title is for a screen reader there; the sheet shows it, with Done. */
.scope-pop:not(.sheet-pop) .scope-head {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.scope-pop:not(.sheet-pop) .scope-done {
  display: none;
}

.scope-lists {
  display: grid;
  grid-template-columns: auto auto;
  gap: 4px 16px;
}

@container source (max-width: 519.98px) {
  .scope-lists {
    grid-template-columns: auto;
  }
}

.scope-h {
  margin: 4px 10px 4px;
  color: var(--vscode-descriptionForeground);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.scope-items {
  display: flex;
  flex-direction: column;
}

.scope-sub {
  margin-top: 8px;
}

.scope-sub[hidden] {
  display: none;
}

.scope-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  padding: 0 12px 0 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--vscode-foreground);
  text-align: left;
  white-space: nowrap;
}

@media (hover: hover) {
  .scope-opt:hover {
    background: var(--vscode-list-hoverBackground);
  }
}

.scope-opt:focus-visible {
  outline-offset: -2px;
}

.scope-opt[aria-checked="true"] {
  font-weight: 600;
}

/* The radio's mark: a ring, filled when checked. */
.scope-dot {
  flex: none;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--vscode-descriptionForeground);
  border-radius: 50%;
}

.scope-opt[aria-checked="true"] .scope-dot {
  border-color: var(--vscode-focusBorder);
  background: radial-gradient(circle, var(--vscode-focusBorder) 0 3.5px, transparent 4px);
}

/* On a phone (and in the narrow layout): a sheet from the bottom, its title and Done on top, 44 px rows. */
.scope-pop.sheet-pop {
  position: fixed;
  inset: auto 0 0;
  width: auto;
  max-width: none;
  max-height: 85dvh;
  padding: 0 8px calc(8px + env(safe-area-inset-bottom));
  border-width: 1px 0 0;
  border-radius: 14px 14px 0 0;
  overscroll-behavior: contain;
}

.scope-pop.sheet-pop::backdrop {
  background: rgba(0, 0, 0, 0.32);
}

.sheet-pop .scope-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 0 4px 0 10px;
  background: var(--vscode-editor-background);
}

.scope-title {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
}

.scope-done {
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--vscode-textLink-foreground);
  font-size: 15px;
  font-weight: 600;
}

.sheet-pop .scope-lists {
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
}

.sheet-pop .scope-opt {
  min-height: 44px;
  font-size: 15px;
  white-space: normal;
}

/* ⋯ and its menu, under it at its right edge. */
.popbox {
  position: relative;
  flex: none;
}

.popmenu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 13rem;
  padding: 4px;
  border: 1px solid var(--popup-border);
  border-radius: var(--radius);
  background: var(--vscode-editor-background);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}

.popmenu[hidden] {
  display: none;
}

.popitem {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--vscode-foreground);
  text-align: left;
  white-space: nowrap;
}

.popitem svg {
  color: var(--vscode-descriptionForeground);
}

.popitem:focus-visible {
  outline-offset: -2px;
}

.popsep {
  height: 1px;
  margin: 4px 6px;
  background: var(--vscode-panel-border);
}

/* The first visit's hint: one row over the editor (it pushes the code down; it covers none). */
.first-hint {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 12px;
  min-height: 32px;
  padding: 2px 2px 2px 12px;
  background: var(--accent-soft);
  color: var(--vscode-foreground);
  font-size: 13px;
}

.first-hint[hidden] {
  display: none;
}

.first-hint p {
  flex: 1 1 auto;
  margin: 0;
}

.hint-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.hint-btn {
  min-height: 28px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--vscode-textLink-foreground);
  font-size: 13px;
}

.first-hint .icon-btn {
  width: 28px;
  height: 28px;
}

/* The empty editor's block: Paste, Open, Load the sample, 30% down the editor (web/editor-head.ts puts it inside the
   editor's box); the editor around it takes clicks. */
.empty-editor {
  position: absolute;
  inset: 30% 0 auto;
  z-index: 4;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.empty-editor[hidden] {
  display: none;
}

.empty-box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: min(18rem, calc(100% - 32px));
  pointer-events: auto;
}

.empty-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  font-size: 13px;
  text-align: left;
}

.empty-btn.primary {
  border-color: var(--page-accent);
  background: var(--page-accent);
  color: var(--page-accent-foreground);
}

.empty-btn kbd {
  margin-left: auto;
  font-family: inherit;
  font-size: 12px;
  opacity: 0.8;
}

.empty-drop {
  margin: 0;
  color: var(--vscode-descriptionForeground);
  font-size: 12px;
  text-align: center;
}

/* ---- The editor and the explanation ----------------------------------------------------------- */

.split {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, var(--split, 50%)) var(--gutter) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
}

/* The editor's pane is a container: the Problems list and the chip's popover follow its width. */
.source {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  container: source / inline-size;
}

/* How to leave the editor (web/a11y.ts): the editor's description, shown at its top right for a few seconds when the
   focus comes in by the keyboard. The pointer goes through it, and it never takes the focus. */
.editor-hint {
  position: absolute;
  top: 6px;
  right: 18px;
  z-index: 5;
  max-width: calc(100% - 36px);
  margin: 0;
  padding: 4px 10px;
  border: 1px solid var(--vscode-focusBorder);
  border-radius: var(--radius-sm);
  background: var(--vscode-editor-background);
  color: var(--vscode-foreground);
  box-shadow: var(--shadow);
  font-size: 12px;
  pointer-events: none;
}

.editor-hint:not(.shown) {
  display: none;
}

/* Over the editor while a file is dragged onto it (web/main.ts): a dashed frame and what a drop does. It lets the
   drag through to the editor below. */
.drop-target {
  position: absolute;
  inset: 6px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border: 2px dashed var(--vscode-focusBorder);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--vscode-editor-background) 88%, transparent);
  color: var(--vscode-foreground);
  text-align: center;
  pointer-events: none;
}

.drop-target[hidden] {
  display: none;
}

.drop-target p {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 22rem;
  margin: 0;
}

.drop-target svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: var(--vscode-focusBorder);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.drop-target strong {
  font-size: 15px;
  font-weight: 650;
}

.drop-target span {
  color: var(--vscode-descriptionForeground);
  font-size: 12.5px;
}

#editor {
  position: relative;
  flex: 1;
  min-height: 0;
}

#editor .cm-editor {
  height: 100%;
}

#panel {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  background: var(--vscode-editor-background);
}

/* ---- The panel's header (web/panel-head.ts; docs/design/chrome-redesign.md, decisions 4 and 11, C7) ---------------- */

/* The explanation's pane: its header, then the panel's frame. */
.panel-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.panel-body {
  flex: 1;
  min-height: 0;
}

/* One row: the tabs, the view control, then the tools at the right end. The row takes the first of its forms that
   fits (the view as segments or a menu, the tools' words beside or under their icons); only when none does, its
   groups wrap, never inside one. Nothing in it changes width with a press or a tab. */
.panel-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 6px 0 2px;
  border-bottom: 1px solid var(--vscode-panel-border);
  background: var(--page-background);
  white-space: nowrap;
}

.panel-head.wrap {
  flex-wrap: wrap;
  row-gap: 0;
}

.panel-tabs {
  display: flex;
  flex: none;
  align-self: stretch;
}

/* A tab: its word, and a line under it while it is chosen (its colour too, never its weight: the width stays). */
.panel-tab {
  min-height: 0;
  padding: 0 9px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--vscode-descriptionForeground);
  font-size: 13px;
}

.panel-head[data-tabs="short"] .tab-full,
.panel-head:not([data-tabs="short"]) .tab-short {
  display: none;
}

.panel-tab[aria-selected="true"] {
  border-bottom-color: var(--page-accent);
  color: var(--vscode-foreground);
}

@media (hover: hover) {
  .panel-tab:hover {
    color: var(--vscode-foreground);
  }
}

.panel-tab:focus-visible {
  outline-offset: -2px;
}

.view-slot {
  display: flex;
  flex: none;
}

/* The quick reference has no view to choose and nothing to fold: they keep their room, unseen. */
.panel-head.reference .view-slot,
.panel-head.reference #collapse {
  visibility: hidden;
}

.panel-tools {
  display: flex;
  flex: none;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

/* A tool: its icon and its word ("Copy"; the full name is its tooltip and its accessible name). Where the row is
   short, the word goes under the icon, smaller. */
.panel-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--vscode-foreground);
  font-size: 12.5px;
}

.panel-head[data-tools="under"] .panel-tool {
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-height: 32px;
  padding: 1px 4px;
  font-size: 10.5px;
  line-height: 1.1;
}

@media (hover: hover) {
  .panel-tool:hover {
    background: var(--vscode-list-hoverBackground);
  }
}

/* A text drawn over the other texts it may become (unseen): its box is as wide as the widest, so a press moves nothing. */
.tool-word,
.vc-stack {
  display: inline-grid;
}

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

.vc-size {
  visibility: hidden;
}

/* The view control (media/view-control.js): segments, the option shown pressed; or a menu under its button. An option
   with a digit shows its name only while it is the one shown. */
.vc {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.vc-label {
  color: var(--vscode-descriptionForeground);
  font-size: 12.5px;
}

.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.35em;
}

.vc-options {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--vscode-dropdown-border);
  border-radius: var(--radius-sm);
  background: var(--vscode-dropdown-background);
}

.vc-options button {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  height: 24px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--vscode-descriptionForeground);
  font-size: 12.5px;
}

@media (hover: hover) {
  .vc-options button:hover {
    color: var(--vscode-foreground);
  }
}

.vc-options button[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--vscode-foreground);
}

.vc[data-form="menu"] .vc-options {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  flex-direction: column;
  min-width: 100%;
  padding: 4px;
  box-shadow: var(--shadow);
}

.vc[data-form="menu"] .vc-options button {
  justify-content: flex-start;
  height: 32px;
}

/* The menu's button: the option shown, and an arrow. */
.vc-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  height: 28px;
  padding: 0 8px 0 10px;
  border: 1px solid var(--vscode-dropdown-border);
  border-radius: var(--radius-sm);
  background: var(--vscode-dropdown-background);
  color: var(--vscode-foreground);
  font-size: 12.5px;
}

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

/* ?view=panel: the panel shows its own header. */
html.view-panel .panel-head {
  display: none;
}

/* The divider: a line to drag, to move with the arrow keys, or to double-click for the default sizes. */
.splitter {
  position: relative;
  z-index: 2;
  background: var(--page-background);
  border-inline: 1px solid var(--vscode-panel-border);
  cursor: col-resize;
  touch-action: none;
  transition: background-color 0.15s;
}

.splitter::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 28px;
  border-radius: 2px;
  background: var(--vscode-descriptionForeground);
  opacity: 0.45;
  transform: translate(-50%, -50%);
}

.splitter:hover,
.splitter:focus-visible,
body.resizing .splitter {
  background: var(--accent-soft);
}

.splitter:focus-visible {
  outline-offset: -2px;
}

/* While the divider is dragged, the frame must not take the pointer. */
body.resizing,
body.resizing * {
  user-select: none;
}

body.resizing iframe {
  pointer-events: none;
}

#problems {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  max-height: 30%;
  border-top: 1px solid var(--vscode-panel-border);
  background: var(--page-background);
}

#problems[hidden] {
  display: none;
}

/* A height chosen with the handle (the editor keeps its three lines or so). */
#problems:not(.collapsed) {
  height: var(--problems-height, auto);
}

#problems[style*="--problems-height"] {
  max-height: calc(100% - 66px);
}

#problems.collapsed {
  max-height: none;
}

#problems.collapsed #problem-list {
  display: none;
}

/* The handle on the list's top edge: the same look as the divider between the panes, lying across. */
.problems-resize {
  position: absolute;
  z-index: 2;
  top: -5px;
  left: 0;
  right: 0;
  height: 9px;
  cursor: row-resize;
  touch-action: none;
  transition: background-color 0.15s;
}

.problems-resize::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--vscode-descriptionForeground);
  opacity: 0.45;
  transform: translate(-50%, -50%);
}

.problems-resize:hover,
.problems-resize:focus-visible,
body.resizing .problems-resize {
  background: var(--accent-soft);
}

.problems-resize:focus-visible {
  outline-offset: -2px;
}

/* With no problem the strip says so, alone: no list, no handle (a stored height waits for the next problem). */
#problems.empty:not(.collapsed) {
  height: auto;
}

#problems.empty #problem-list,
#problems.empty .problems-resize {
  display: none;
}

/*
 * The strip (web/problem-list.ts): "› Problems ⓧ 1 ⚠ 5 ⓘ 6", which folds and opens the list, and at the right where the
 * cursor is ("Ln 20 · 1/11") with ‹ › (F8, Shift+F8). 32 px high; 44 on a phone.
 */
.problems-strip {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 32px;
  padding-inline-end: 4px;
  background: var(--page-background);
}

#problems h2 {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  color: var(--vscode-foreground);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* (The compare page's strip has no fold: the heading is the strip's words.) */
#problems h2:not(:has(button)) {
  padding-inline: 12px;
}

#problems-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 32px;
  padding: 0 10px 0 8px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

@media (hover: hover) {
  #problems-toggle:not(:disabled):hover {
    background: var(--vscode-list-hoverBackground);
  }
}

#problems-toggle:focus-visible {
  outline-offset: -2px;
}

#problems-toggle:disabled {
  color: var(--vscode-descriptionForeground);
  cursor: default;
}

.problems-strip .chev {
  flex: none;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The fold's mark: › folded, ⌄ open, none while there is nothing to open. */
#problems-toggle .chev {
  transition: transform 0.15s;
}

#problems.collapsed #problems-toggle .chev {
  transform: rotate(-90deg);
}

#problems-toggle:disabled .chev {
  visibility: hidden;
}

/* The count of each level: its mark in its colour (the level table, below), then the number. */
#problems .counts {
  display: inline-flex;
  gap: 10px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

#problems .counts .count {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

#problem-pos {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0 0 0 auto;
  padding-inline: 6px;
  overflow: hidden;
  color: var(--vscode-descriptionForeground);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#problem-prev,
#problem-next {
  flex: none;
  width: 28px;
  height: 28px;
}

#problem-prev[hidden],
#problem-next[hidden] {
  display: none;
}

/*
 * The list: the line in a column of its own (as wide as the longest "Ln 95"), the message on up to two lines (the
 * tooltip has it whole), and the rule from a pane of 520 px. Each row takes the list's columns (subgrid).
 */
#problem-list {
  display: grid;
  flex: 1;
  grid-template-columns: auto max-content minmax(0, 1fr) auto;
  align-content: start;
  column-gap: 8px;
  min-height: 0;
  overflow: auto;
  list-style: none;
  margin: 0;
  padding: 0 6px 6px;
}

#problem-list li {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

/* Each problem is a button (web/problem-list.ts), drawn as a row of the list. */
#problem-list .problem {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: baseline;
  width: 100%;
  padding: 3px 6px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

#problem-list .problem:hover {
  background: var(--vscode-list-hoverBackground);
}

#problem-list .problem:focus-visible {
  outline: 2px solid var(--vscode-focusBorder);
  outline-offset: -2px;
}

#problem-list .message {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

#problem-list .where,
#problem-list .code {
  color: var(--vscode-descriptionForeground);
  white-space: nowrap;
}

@container source (max-width: 519.98px) {
  #problem-list .code {
    display: none;
  }

  /* The position without its line, "1/11": the strip keeps one row on a phone (the line is the cursor's, in the gutter). */
  #problem-pos .pos-ln {
    display: none;
  }
}

/* level table (src/levels.ts, scripts/level-css.ts): problems */
:is(#problems, #tab-problems) .icon.level-error {
  color: var(--c-error-level);
}

:is(#problems, #tab-problems) .icon.level-warning {
  color: var(--c-warning);
}

:is(#problems, #tab-problems) .icon.level-info {
  color: var(--c-info);
}
/* end of the level table */

/*
 * The toast (web/toast.ts): one look for every message. Its place is set by the script, above the Problems list in
 * the editor's pane (`placed`); without a pane (the compare page) it sits at the middle of the window's bottom.
 */
#status {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 20;
  box-sizing: border-box;
  width: max-content;
  max-width: min(32rem, calc(100vw - 32px));
  margin: 0;
  padding: 6px 6px 6px 12px;
  /* (The page's stronger border: the panel's line is 1.1:1 against the dark editor, and a toast would not stand out.) */
  border: 1px solid var(--hover-border);
  border-radius: var(--radius);
  background: var(--vscode-editor-background);
  color: var(--vscode-foreground);
  box-shadow: var(--shadow);
  transform: translateX(-50%);
  /* (Only the slide up is animated: `translate`, apart from the centring `transform`, which never moves.) */
  transition: opacity 0.2s, translate 0.2s var(--ease);
}

#status.placed {
  transform: none;
}

#status:not(.shown) {
  opacity: 0;
  translate: 0 8px;
  pointer-events: none;
  visibility: hidden;
}

.toast-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.toast-icon {
  flex: none;
  width: 1.25em;
  font-weight: 700;
  text-align: center;
  color: var(--vscode-textLink-foreground);
}

.toast-icon.note {
  color: var(--vscode-descriptionForeground);
}

.toast-text {
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 0;
  overflow-wrap: anywhere;
}

.toast-more {
  margin: 0;
  padding: 2px 6px 4px calc(1.25em + 8px);
  color: var(--vscode-descriptionForeground);
  overflow-wrap: anywhere;
}

.toast-button {
  flex: none;
  min-height: 32px;
  padding: 4px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--vscode-textLink-foreground);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

@media (pointer: coarse) {
  .toast-button {
    min-height: 44px;
  }
}

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

@media (hover: hover) {
  .toast-button:hover {
    background: var(--vscode-list-hoverBackground);
  }
}

@media (prefers-reduced-motion: reduce) {
  #status {
    transition: none;
  }
}

/* The questions before the text is replaced (web/kind-dialog.ts): a small modal box in the middle. */
.ask {
  width: min(26rem, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 20px 20px 16px;
  border: 1px solid var(--vscode-panel-border);
  border-radius: 12px;
  background: var(--vscode-editor-background);
  color: var(--vscode-foreground);
  box-shadow: var(--shadow);
  overflow: auto;
  overflow-wrap: anywhere;
}

.ask::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

.ask h2 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 650;
}

.ask p {
  margin: 0 0 16px;
  color: var(--vscode-descriptionForeground);
  line-height: 1.5;
}

.ask-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.ask-actions .ask-confirm {
  border-color: var(--page-accent);
  background: var(--page-accent);
  color: var(--page-accent-foreground);
}

@media (hover: hover) {
  .ask-actions .ask-confirm:hover {
    filter: brightness(1.1);
  }
}

.ask-actions button:focus-visible {
  outline: 2px solid var(--vscode-focusBorder);
  outline-offset: 2px;
}

/* On a phone the two choices are full-width touch targets, the one that changes the text first. */
:where(html.narrow) .ask-actions {
  flex-direction: column-reverse;
}

:where(html.narrow) .ask-actions button {
  min-height: 44px;
}

@media (pointer: coarse) {
  .ask-actions button {
    min-height: 44px;
  }
}

/* Strips along the edges of a touch screen: a swipe from the left one opens the menu, from the right one the settings. */
.edge {
  display: none;
}

@media (pointer: coarse) {
  .edge {
    display: block;
    position: fixed;
    top: var(--bar-h);
    left: 0;
    bottom: 0;
    z-index: 5;
    width: 12px;
    touch-action: none;
  }

  .edge-right {
    left: auto;
    right: 0;
  }
}

.noscript {
  padding: 1rem;
}

/* ---- The side sheets: the menu and the settings ------------------------------------------------ */

.sheet {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(22rem, calc(100vw - 48px));
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--vscode-panel-border);
  border-radius: 12px 0 0 12px;
  background: var(--vscode-editor-background);
  color: var(--vscode-foreground);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform 0.22s var(--ease);
}

/* A swipe sideways moves the sheet (layout.ts); up and down scrolls it. The scrolling parts need it
   too, as touch-action does not reach past a scroll container. */
.sheet,
.sheet-body,
.settings-body {
  touch-action: pan-y pinch-zoom;
}

.sheet[open] {
  display: flex;
  flex-direction: column;
}

@starting-style {
  .sheet[open] {
    transform: translateX(100%);
  }
}

.sheet::backdrop {
  background: rgba(0, 0, 0, 0.4);
  transition: opacity 0.22s;
}

@starting-style {
  .sheet[open]::backdrop {
    opacity: 0;
  }
}

/* The menu comes from the left; the settings from the right. */
.sheet.menu {
  inset: 0 auto 0 0;
  border-left: 0;
  border-right: 1px solid var(--vscode-panel-border);
  border-radius: 0 12px 12px 0;
}

@starting-style {
  .sheet.menu[open] {
    transform: translateX(-100%);
  }
}

/* A sheet sliding out (closeSheet in layout.ts) goes the way a swipe takes it, and the backdrop fades. */
.sheet.closing {
  pointer-events: none;
}

.sheet.closing::backdrop {
  opacity: 0;
}

/* A sheet being swiped away follows the finger. */
.sheet.dragging {
  transition: none;
}

.sheet-head,
.settings-head,
.settings-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 16px;
  background: var(--page-background);
}

.sheet-head,
.settings-head {
  justify-content: space-between;
  min-height: var(--bar-h);
  border-bottom: 1px solid var(--vscode-panel-border);
}

.sheet-head h2,
.settings-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
}

.sheet-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 8px;
}

.menu-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
}

.menu-group + .menu-group {
  border-top: 1px solid var(--vscode-panel-border);
}

/* Each group's heading: small capitals over its items. */
.menu-h {
  margin: 0;
  padding: 2px 8px 4px;
  color: var(--vscode-descriptionForeground);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Share and Explanation: only where the app bar and the panel have no room for them (stacked). */
.menu-group.narrow-only {
  display: none;
}

:where(html.narrow) .menu-group.narrow-only {
  display: flex;
}

/* Help: the keys, for a page with a keyboard (not a touch screen without a mouse). "Go to the explanation and back"
   stays there: a screen reader on a touch screen has no other way to it. */
@media (hover: none) and (pointer: coarse) {
  #menu-keys-title,
  #menu-keys {
    display: none;
  }
}

.menu-sub {
  margin: 4px 8px 2px;
  font-size: 12px;
  font-weight: 600;
}

.menu-keys {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px 12px;
  margin: 0;
  padding: 0 8px 4px;
  font-size: 12.5px;
}

.menu-keys dt {
  color: var(--vscode-descriptionForeground);
  white-space: nowrap;
}

.menu-keys dd {
  margin: 0;
}

/* The script's name, the menu's first row: a click renames it here. */
.menu-file-row {
  display: flex;
  min-width: 0;
}

.menu-file {
  flex: 1 1 auto;
  min-width: 0;
}

.menu-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-file-row .file-name-input {
  flex: 1 1 auto;
  height: 40px;
  margin: 0 8px;
}

.field {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 4px 8px;
  color: var(--vscode-foreground);
}

/* On a narrow sheet the label goes above its select, so that every select has the same full width. */
@media (max-width: 420px) {
  .field {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}

.field[hidden] {
  display: none;
}

.field select {
  min-width: 0;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--vscode-foreground);
  text-align: left;
  text-decoration: none;
}

.menu-item[hidden] {
  display: none;
}

/* After a label: the file Save writes to (cut with "…"), and the item's shortcut (only with a mouse: a touch
   screen has no keyboard for it). */
.menu-note,
.menu-key {
  margin-left: auto;
  color: var(--vscode-descriptionForeground);
  font-size: 12px;
  white-space: nowrap;
}

.menu-note {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-note + .menu-key {
  margin-left: 0;
}

.menu-key {
  flex: none;
  font-family: inherit;
}

@media (pointer: coarse) {
  .menu-key {
    display: none;
  }
}

@media (hover: hover) {
  .menu-item:hover {
    background: var(--vscode-list-hoverBackground);
  }
}

.menu-item svg {
  color: var(--vscode-descriptionForeground);
}

.about {
  padding: 8px;
  color: var(--vscode-descriptionForeground);
  font-size: 12px;
}

.about p {
  margin: 0 0 6px;
}

/* The banner of the development version and of the previews (/next/, /pr/N/). */
.banner {
  flex: none;
  padding: 4px 12px;
  background: var(--vscode-textBlockQuote-background);
  border-bottom: 2px solid var(--vscode-focusBorder);
  color: var(--vscode-foreground);
  font-size: 12px;
}

.banner[hidden] {
  display: none;
}

/* The read-mode switch (Read | Edit) is for touch screens: elsewhere there is no soft keyboard to keep away. */
.touch-only {
  display: none;
}

@media (pointer: coarse) {
  .touch-only {
    display: inline-flex;
  }
}

/* Read | Edit, in the strip above the editor: two 44 px boxes, drawn as one pill 30 px high, the mode on filled. */
.read-edit {
  flex: none;
}

.read-edit button {
  position: relative;
  z-index: 0;
  min-width: 44px;
  height: 44px;
  min-height: 0;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: var(--vscode-descriptionForeground);
  font-size: 13px;
}

.read-edit button::before {
  content: "";
  position: absolute;
  inset: 7px 0;
  z-index: -1;
  border: 1px solid var(--vscode-dropdown-border);
  background: var(--vscode-dropdown-background);
}

.read-edit button:first-child::before {
  border-right: 0;
  border-radius: 15px 0 0 15px;
}

.read-edit button:last-child::before {
  border-radius: 0 15px 15px 0;
}

.read-edit button[aria-pressed="true"] {
  color: var(--vscode-foreground);
}

.read-edit button[aria-pressed="true"]::before {
  background: var(--accent-soft);
}

.read-edit button:focus-visible {
  outline-offset: -4px;
}

/* The first-run tip for the read-mode switch: a bubble under the switch (top, set by the script, which also sets --arrow-x for its arrow). */
.tip {
  position: fixed;
  top: calc(var(--bar-h) + 8px);
  right: 8px;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  width: min(19rem, calc(100vw - 16px));
  padding: 8px 4px 8px 12px;
  border: 1px solid var(--vscode-focusBorder);
  border-radius: var(--radius);
  background: var(--vscode-editor-background);
  color: var(--vscode-foreground);
  font-size: 13px;
  box-shadow: var(--shadow);
}

.tip[hidden] {
  display: none;
}

.tip p {
  flex: 1;
  min-width: 0;
  margin: 4px 0 0;
}

.tip::before {
  content: "";
  position: absolute;
  top: -6px;
  left: var(--arrow-x, calc(100% - 24px));
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-top: 1px solid var(--vscode-focusBorder);
  border-left: 1px solid var(--vscode-focusBorder);
  background: var(--vscode-editor-background);
  transform: rotate(45deg);
}

/* ---- Sizes ------------------------------------------------------------------------------------ */

/* No room for the tagline, then for the button to install. */
@media (max-width: 1100px) {
  .tagline {
    visibility: hidden;
  }
}

/* A phone zoomed out can be wider than these widths: it keeps the phone's bar (theme-init.js). */
:where(html.narrow) .top .install {
  display: none !important;
}

/* "Install for VS Code" from 1100 px. */
@media (max-width: 1099px) {
  .top .install {
    display: none;
  }
}

/* Phones (at every zoom) and windows up to 767px wide, as theme-init.js sets `narrow`: the explanation
   below the script, and the top bar's main controls only (the menu, the file kind with a short name, the
   fold, the quick reference, the copy, the link, read mode, the settings), 44px to tap, down to 40px wide
   when the bar is short of room; the rest is in the menu. */
:root.narrow {
  --gutter: 14px;
}

:where(html.narrow) .top {
  gap: 2px;
  padding: 0 4px;
}

:where(html.narrow) .wide-only,
:where(html.narrow) .desk-bar,
:where(html.narrow) .actions .sep {
  display: none;
}

/* The file kind is in the menu on a phone, and the logo and the name take its place in the bar. */
:where(html.narrow) .kind {
  display: none;
}

:where(html.narrow) .brand {
  flex: 0 1 auto;
  min-width: 0;
  gap: 6px;
  margin-inline: 4px;
  font-size: 15px;
}

:where(html.narrow) .actions {
  flex: 0 1 auto;
  min-width: 0;
  gap: 0;
}

:where(html.narrow) .top .icon-btn {
  flex: 0 1 44px;
  min-width: 40px;
}

:where(html.narrow) .tagline {
  display: none;
}

:where(html.narrow) .icon-btn {
  width: 44px;
  height: 44px;
}

:where(html.narrow) .icon-btn svg {
  width: 20px;
  height: 20px;
}

:where(html.narrow) .icon-btn svg.ico {
  width: 18px;
  height: 18px;
}

:where(html.narrow) .split {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, var(--split, 45%)) var(--gutter) minmax(0, 1fr);
}

:where(html.narrow) .splitter {
  border-inline: 0;
  border-block: 1px solid var(--vscode-panel-border);
  cursor: row-resize;
}

:where(html.narrow) .splitter::after {
  width: 36px;
  height: 4px;
}

/* A wider area to grab with a finger than the line shows. */
:where(html.narrow) .splitter::before {
  content: "";
  position: absolute;
  inset: -8px 0;
}

:where(html.narrow) .menu-item {
  min-height: 44px;
}

/* The panel's header on a phone: 44 px to tap, the view's menu a bordered pill. */
/* (Its top 8 px are the divider's grab area, above them: web/page.css `.splitter::before`.) */
:where(html.narrow) .panel-head {
  min-height: 53px;
  padding-top: 8px;
}

:where(html.narrow) .panel-tab {
  min-width: 44px;
  min-height: 44px;
}

:where(html.narrow) .panel-head[data-tools] .panel-tool {
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
}

:where(html.narrow) .vc-options {
  padding: 0;
}

:where(html.narrow) .vc[data-form] .vc-options button {
  min-width: 44px;
  height: 44px;
}

:where(html.narrow) .vc-open {
  height: 44px;
  padding-inline: 14px 12px;
  border-radius: 22px;
}

:where(html.narrow) .ed-head {
  height: 44px;
  padding: 0;
}

:where(html.narrow) .tool-btn,
:where(html.narrow) .file-name,
:where(html.narrow) .file-name-input {
  height: 44px;
}

:where(html.narrow) .tool-btn {
  min-width: 44px;
  justify-content: center;
}

/* The chip is a 44 px box, its fill drawn 32 px high inside it. */
:where(html.narrow) .scope-chip {
  height: 44px;
  border-width: 6px 0;
  background-clip: padding-box;
}

:where(html.narrow) .scope-chip[aria-expanded="true"] {
  border-color: transparent;
}

/* A touch screen has strips along its edges for the swipes that open the menu and the settings (.edge): the header's
   and the hint's controls keep clear of them. */
@media (pointer: coarse) {
  :where(html.narrow) .ed-head,
  :where(html.narrow) .panel-head,
  :where(html.narrow) .first-hint {
    padding-inline: 12px;
  }

  /* The Problems strip also keeps clear of the divider's grab area under it. */
  :where(html.narrow) .problems-strip {
    padding: 0 12px 8px;
  }
}

/* Stacked, the hint's × is 44 px; on a phone (a touch screen) its text and × share the first row, its buttons the second. */
:where(html.narrow) .first-hint .icon-btn {
  width: 44px;
  height: 44px;
}

@media (pointer: coarse) {
  :where(html.narrow) .first-hint p {
    flex-basis: calc(100% - 60px);
  }

  :where(html.narrow) .first-hint .icon-btn {
    order: 1;
  }

  :where(html.narrow) .hint-actions {
    order: 2;
  }
}

:where(html.narrow) .popitem,
:where(html.narrow) .hint-btn,
:where(html.narrow) .empty-btn {
  min-height: 44px;
}


:where(html.narrow) .field select {
  min-height: 40px;
}

:where(html.narrow) #problem-list .problem {
  padding-block: 8px;
}

/* A broader strip to take with a finger. */
:where(html.narrow) .problems-resize {
  top: -10px;
  height: 20px;
}

:where(html.narrow) :is(.problems-strip, #problems-toggle) {
  min-height: 44px;
}

:where(html.narrow) :is(#problem-prev, #problem-next) {
  width: 44px;
  height: 44px;
}

/* ---- The phone's bottom sheet (web/sheet.ts; docs/design/chrome-redesign.md, step C8a) ---------------------------
   On a phone (and a touch screen held upright up to 1024 px: html.bottom-sheet, from theme-init.js) the explanation's
   pane is a sheet over the editor, at the height in --sheet-h; the editor ends at the sheet's top at half or lower
   (--sheet-rest). Its header is one 48 px row at every height, and all of it is the grabber. At full height the app
   bar slides away (data-sheet="full"). */
.sheet-grab,
#tab-problems,
.tab-line,
.sheet-hint {
  display: none;
}

:where(html.bottom-sheet) .split {
  display: block;
  position: relative;
}

:where(html.bottom-sheet) .source {
  height: 100%;
  padding-bottom: var(--sheet-rest, 55dvh);
}

:where(html.bottom-sheet) .splitter,
:where(html.bottom-sheet) #open-btn,
:where(html.bottom-sheet) #save-btn {
  display: none;
}

:where(html.bottom-sheet) .panel-pane {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 12;
  height: var(--sheet-h, 55dvh);
  padding-bottom: env(safe-area-inset-bottom, 0);
  border-top: 1px solid var(--hover-border);
  border-radius: 12px 12px 0 0;
  background: var(--vscode-editor-background);
  box-shadow: 0 -2px 12px rgb(0 0 0 / 16%);
}

:where(html.bottom-sheet) .panel-head {
  position: relative;
  gap: 4px;
  height: 48px;
  min-height: 48px;
  padding: 0 12px;
  border-radius: 12px 12px 0 0;
  touch-action: none;
}

/* The grabber: a slider as big as the header, under its tabs and its pill, for the keyboard (the arrows, Home, End and
   Enter) and a screen reader; a press lets it through to the header, which takes the taps and the drags. The bar drawn at its
   top says the sheet moves. */
:where(html.bottom-sheet) .sheet-grab {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
}

:where(html.bottom-sheet) .sheet-grab::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  width: 36px;
  height: 4px;
  margin-left: -18px;
  border-radius: 2px;
  background: var(--vscode-descriptionForeground);
  opacity: 0.6;
}

:where(html.bottom-sheet) .sheet-grab:focus-visible {
  outline: 2px solid var(--vscode-focusBorder);
  outline-offset: -2px;
}

:where(html.bottom-sheet) :is(.panel-tabs, .view-slot, .panel-tools) {
  position: relative;
  z-index: 1;
}

:where(html.bottom-sheet) .view-slot {
  margin-left: auto;
}

:where(html.bottom-sheet) .panel-tools {
  margin-left: 0;
}

:where(html.bottom-sheet) .panel-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  font-size: 14px;
}

:where(html.bottom-sheet) #tab-problems {
  display: inline-flex;
}

/* The Explanation tab's line, quiet ("Ln 8"); the Problems tab's counts, each level's mark in its colour. */
:where(html.bottom-sheet) .tab-line {
  display: inline;
  margin-left: 5px;
  color: var(--vscode-descriptionForeground);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

#tab-problems .count {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  font-variant-numeric: tabular-nums;
}

#tab-problems .count + .count {
  margin-left: 6px;
}

/* Where the sheet's row has no room for the panel's tools, the menu has Copy as Markdown (in its Share group). */
#menu-copy-md {
  display: none;
}

:where(html:has(.panel-head[data-tools="none"])) #menu-copy-md {
  display: flex;
}

.panel-head[data-line="false"] .tab-line,
.panel-head[data-tools="none"] .panel-tools {
  display: none;
}

/* When no form fits (very large text), the Explanation tab's words are cut, never the row. */
.panel-head[data-squeeze] {
  overflow: hidden;
}

.panel-head[data-squeeze] .panel-tabs {
  flex: 0 1 auto;
  min-width: 0;
}

.panel-head[data-squeeze] #tab-explain {
  display: block;
  flex: 0 1 auto;
  min-width: 44px;
  overflow: hidden;
  line-height: 44px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* At the bottom of the window (folded), the view's menu opens upwards, and it never runs past the right edge. */
:where(html.bottom-sheet) .vc[data-form="menu"] .vc-options {
  right: 0;
  left: auto;
}

:where(html[data-sheet="peek"]) .vc[data-form="menu"] .vc-options {
  top: auto;
  bottom: calc(100% + 4px);
}

:where(html.bottom-sheet) .sheet-hint:not([hidden]) {
  display: block;
  margin: 0;
  padding: 6px 16px;
  border-bottom: 1px solid var(--vscode-panel-border);
  background: var(--vscode-textBlockQuote-background);
  color: var(--vscode-foreground);
  font-size: 13px;
}

/* The Problems tab: the page's list (moved into the sheet), without the strip that folds and resizes it. */
:where(html.bottom-sheet) .panel-pane[data-problems] .panel-body,
:where(html.bottom-sheet) .panel-pane:not([data-problems]) #problems,
:where(html.bottom-sheet) #problems .problems-resize,
:where(html.bottom-sheet) #problems:not(.empty) .problems-strip {
  display: none;
}

html.bottom-sheet #problems {
  flex: 1;
  height: auto;
  max-height: none;
  min-height: 0;
  border-top: 0;
  background: transparent;
}

html.bottom-sheet #problems #problem-list {
  display: grid;
  padding-top: 4px;
  overscroll-behavior: contain;
}

/* The edges' swipe strips lie over the sheet too, as along the editor. */
:where(html.bottom-sheet) .edge {
  z-index: 13;
}

/* At full height the app bar slides away; it comes back below full. */
:where(html.bottom-sheet[data-sheet="full"]) .top {
  margin-top: calc(-1 * var(--bar-h));
}

@media (prefers-reduced-motion: no-preference) {
  :where(html.bottom-sheet) .panel-pane:not(.dragging) {
    transition: height 0.25s var(--ease);
  }

  :where(html.bottom-sheet) .top {
    transition: margin-top 0.25s var(--ease);
  }
}

/* The copy and the link are in the menu on every phone. Below 480px the logo is 24px and the name 14px;
   below 390px the name goes on two lines (13px), to leave the four buttons 40px or more each. */
@media (max-width: 479px) {
  .brand {
    flex: none;
    gap: 6px;
    margin-inline: 2px;
  }

  .brand .logo {
    width: 24px;
    height: 24px;
  }

  .brand-name {
    font-size: 14px;
  }
}

@media (max-width: 389px) {
  .brand-name {
    width: min-content;
    font-size: 13px;
    line-height: 1.15;
    white-space: normal;
  }
}

/* ?view=panel: the explanation panel only, the whole window (the compare page puts it in a frame). */
html.view-panel .top,
html.view-panel .banner,
html.view-panel .noscript,
html.view-panel .source,
html.view-panel .splitter,
html.view-panel .edge,
html.view-panel .edge-right,
html.view-panel #status {
  display: none;
}

html.view-panel .split {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

/* ---- compare.html: the script, then the two copies' panels, each under the name of its version -- */

.compare {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 0;
}

.compare > section {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.compare > section + section {
  border-left: 1px solid var(--vscode-panel-border);
}

.copy-head {
  margin: 0;
  padding: 6px 12px;
  background: var(--page-background);
  border-bottom: 1px solid var(--vscode-panel-border);
  color: var(--vscode-descriptionForeground);
  font-size: 12px;
  font-weight: 650;
}

.copy iframe {
  flex: 1;
  width: 100%;
  min-height: 0;
  border: 0;
  background: var(--vscode-editor-background);
}

.copy iframe[hidden],
.copy-note[hidden] {
  display: none;
}

.copy-note {
  margin: 0;
  padding: 1rem;
  color: var(--vscode-descriptionForeground);
}

/* Narrower than 1000px: the script on top, the two panels side by side below it; on a phone, one
   under the other. Three panes do not fit in a window's height there, so this page scrolls. */
@media (max-width: 1000px) {
  html:has(.compare),
  html:has(.compare) body {
    height: auto;
    overflow: auto;
  }

  .compare {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .compare .source {
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--vscode-panel-border);
  }

  .compare > section + section {
    border-left: 0;
  }

  .compare .copy + .copy {
    border-left: 1px solid var(--vscode-panel-border);
  }

  .compare #editor {
    height: 40vh;
    flex: none;
  }

  .compare .copy iframe {
    flex: none;
    height: 75vh;
  }

  body[data-page="compare"] .tagline {
    display: none;
  }
}

:where(html.narrow) .compare {
  grid-template-columns: minmax(0, 1fr);
}

:where(html.narrow) .compare .copy + .copy {
  border-left: 0;
  border-top: 1px solid var(--vscode-panel-border);
}

:where(html.narrow) body[data-page="compare"] .top {
  height: auto;
  min-height: var(--bar-h);
  flex-wrap: wrap;
  padding-block: 2px;
}

:where(html.narrow) body[data-page="compare"] .actions {
  flex-wrap: wrap;
}

/* ---- The settings sheet ----------------------------------------------------------------------- */

/* Side by side, the settings lie over the editor, from the left as the menu comes, and never wider than the editor's
   pane (--pane-w, from web/settings-dialog.ts): the explanation they change stays in view and live. They start below the
   top bar (--pane-top: the pane's own top, under the banner of a preview too), so that the whole bar stays in use, and
   the editor they cover is inert. The sheet is not a modal dialog there (no backdrop): the panel scrolls and takes
   clicks, and the sheet stays open. It is
   not in the top layer, so it needs a z-index above the page (and under the toasts, 20). In the narrow layout (a phone, a narrow window) they are a
   modal dialog and take the whole screen, from the right. */
#settings-dialog {
  width: 100vw;
  border-radius: 0;
}

:where(html:not(.narrow)) #settings-dialog {
  inset: var(--pane-top, 0px) auto 0 0;
  height: auto;
  /* As wide as the pane, so that no strip of the (inert) editor shows beside it; the text keeps a column of 40rem
     (--side: the room each side of it), as the pane is 40rem at 1280 px and wider after. */
  width: var(--pane-w, 36rem);
  --side: max(0px, calc((100% - 40rem) / 2));
  border-left: 0;
  border-right: 1px solid var(--vscode-panel-border);
  border-radius: 0 12px 12px 0;
  z-index: 15;
}

@starting-style {
  :where(html:not(.narrow)) #settings-dialog[open] {
    transform: translateX(-100%);
  }
}

:where(html:not(.narrow)) #settings-dialog :is(.settings-head, .settings-nav, .settings-body, .settings-foot) {
  padding-inline: calc(var(--side, 0px) + 12px);
}

:where(html:not(.narrow)) #settings-dialog .settings-head {
  padding-inline: calc(var(--side, 0px) + 16px) calc(var(--side, 0px) + 8px);
}

:where(html:not(.narrow)) #settings-dialog .settings-body {
  padding-inline: calc(var(--side, 0px) + 16px);
}

/* "Jump to": links in a row, which wrap. */
.settings-nav {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 4px;
  padding: 2px 12px;
  border-bottom: 1px solid var(--vscode-panel-border);
  font-size: 0.92em;
}

.settings-jump {
  color: var(--vscode-descriptionForeground);
  margin-inline-end: 4px;
}

.settings-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding-inline: 4px;
  color: var(--vscode-textLink-foreground);
}

#settings-search {
  display: block;
  width: 100%;
  min-height: var(--control-h);
  margin: 4px 0 8px;
  padding: 4px 8px;
  font: inherit;
  color: var(--vscode-input-foreground);
  background: var(--vscode-input-background);
  border: 1px solid var(--vscode-input-border, var(--vscode-dropdown-border));
  border-radius: var(--radius-sm);
}

.settings-nomatch {
  color: var(--vscode-descriptionForeground);
}

/* A section's heading; after Common, a button that folds it. */
.settings-major {
  margin: 16px 0 0;
  font-size: 16px;
  font-weight: 650;
}

.settings-fold {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--vscode-foreground);
  font-weight: inherit;
  text-align: start;
}

.fold-chev {
  display: inline-block;
  width: 1em;
  text-align: center;
  transition: transform 0.15s;
}

.settings-group.open .fold-chev {
  transform: rotate(90deg);
}

.settings-group + .settings-group {
  border-top: 1px solid var(--vscode-panel-border);
  margin-top: 12px;
}

/* Data's parts: export and import, stored data. */
.settings-part {
  padding: 10px 0;
}

.settings-part h4 {
  margin: 0 0 2px;
  font-weight: 600;
}

/* "More" right after the last word shown. Its box is 6 px taller than the line (a 24 px target), and its margins take
   the 6 px back, so that the line keeps its height. */
.desc-more {
  min-height: 0;
  margin-block: -3px;
  padding: 3px 0;
  line-height: inherit;
  border: 0;
  background: none;
  color: var(--vscode-textLink-foreground);
  font-size: inherit;
}

@media (hover: hover) {
  .desc-more:hover {
    background: none;
    text-decoration: underline;
  }
}

.desc-ell {
  color: var(--vscode-descriptionForeground);
}

.settings-show-keys {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  margin-top: 16px;
}

/* On a touch screen, every row and control of the settings is a 44 px target. */
@media (pointer: coarse) {
  #settings-dialog :is(.settings-nav a, .settings-fold, .settings-show-keys, .setting-head label, .setting-choices label, select, button, input:not([type='checkbox']), summary) {
    min-height: 44px;
  }

  #settings-dialog :is(.setting-choices label, summary) {
    padding-block: 12px;
  }

  .settings-nav a {
    justify-content: center;
    min-width: 44px;
  }
}

.settings-x {
  font-size: 1.3rem;
  line-height: 1;
}

.settings-foot {
  flex-wrap: wrap;
  justify-content: flex-end;
  padding: 8px 12px;
  border-top: 1px solid var(--vscode-panel-border);
}

.settings-foot #settings-done {
  border-color: var(--page-accent);
  background: var(--page-accent);
  color: var(--page-accent-foreground);
}

.settings-foot #settings-done:hover {
  filter: brightness(1.1);
}

.settings-body {
  /* (Positioned: the visually hidden rest of a cut description is placed inside it, not in the sheet, which would
     then scroll with it.) */
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 4px 16px 12px;
  overflow-wrap: anywhere;
}

.settings-intro,
.settings-elsewhere {
  color: var(--vscode-descriptionForeground);
  margin: 8px 0;
}

.settings-elsewhere {
  font-size: 0.9em;
  border-top: 1px solid var(--vscode-panel-border);
  padding-top: 12px;
}

.setting {
  padding: 10px 0;
  border-bottom: 1px solid var(--vscode-panel-border);
}

.setting-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 12px;
}

.setting-head label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  font-weight: 600;
}

.setting-key {
  margin: 0;
  font-size: 0.8em;
  color: var(--vscode-descriptionForeground);
}

.setting-desc {
  margin: 2px 0 6px;
  font-size: 0.92em;
  color: var(--vscode-descriptionForeground);
}

.settings-body code {
  font-family: var(--vscode-editor-font-family);
  font-size: 0.92em;
  background: var(--vscode-textCodeBlock-background);
  border-radius: 4px;
  padding: 0 0.25em;
}

.setting input[type='text'],
.setting input[type='number'],
.setting textarea,
.settings-io textarea {
  max-width: 100%;
  min-height: var(--control-h);
  font: inherit;
  color: var(--vscode-input-foreground);
  background: var(--vscode-input-background);
  border: 1px solid var(--vscode-input-border, var(--vscode-dropdown-border));
  border-radius: var(--radius-sm);
  padding: 4px 8px;
}

.setting select {
  width: 100%;
}

.setting textarea,
.settings-io textarea {
  display: block;
  width: 100%;
  font-family: var(--vscode-editor-font-family);
  font-size: var(--vscode-editor-font-size);
  resize: vertical;
}

.setting input[type='checkbox'] {
  accent-color: var(--page-accent);
}

.setting textarea[aria-invalid='true'] {
  border-color: var(--vscode-errorForeground);
}

.setting-error {
  margin: 4px 0 0;
  color: var(--vscode-errorForeground);
}

.setting-error:empty {
  display: none;
}

.setting-choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
  gap: 2px 16px;
  margin: 0;
  padding: 0;
  border: 0;
}

.setting-choices label {
  display: block;
  padding-block: 4px;
  font-size: 0.92em;
}

.setting-choices code {
  white-space: nowrap;
}

.setting-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
}

.setting-list li {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--vscode-panel-border);
  border-radius: 999px;
  padding: 0 2px 0 8px;
}

.setting-list li.setting-none {
  border: 0;
  padding: 0;
  color: var(--vscode-descriptionForeground);
}

.setting-list button {
  min-height: 0;
  border: none;
  border-radius: 999px;
  background: none;
  padding: 0 6px;
  line-height: 1.4;
}

.setting-add {
  display: flex;
  gap: 8px;
}

.setting-add input {
  flex: 1;
  min-width: 0;
}

.settings-io-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-io details {
  margin-top: 8px;
}

.settings-io summary {
  padding-block: 3px;
  cursor: pointer;
  color: var(--vscode-textLink-foreground);
}

.settings-io textarea {
  margin: 6px 0;
}

.settings-io-status:empty {
  display: none;
}

.settings-io-status {
  margin-top: 8px;
  padding: 6px 12px;
  border-left: 3px solid var(--vscode-charts-green);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--vscode-textBlockQuote-background);
}

.settings-io-status.error {
  border-left-color: var(--vscode-errorForeground);
}

.settings-io-status p {
  margin: 2px 0;
}

.settings-io-status ul {
  margin: 2px 0;
  padding-left: 20px;
}

/* ---- The opening (src/ui/opening.ts) -----------------------------------------------------------
   A full-screen overlay from the first paint until the page is ready (web/theme-init.js, web/opening.ts). It is
   hidden from assistive technology and has nothing to focus; it takes pointer events only until it starts to leave.
   The static styles are the finished picture, shown as such when it is still; `.opening-whole` animates towards it,
   with opacity and transform only, which the compositor runs while app.js is parsed and run. */

.opening {
  display: none;
}

html.opening-on .opening {
  /* The line is read when the last role's colour has come in (web/opening.ts waits for it): 650 + 2 × 150 + 180. */
  --opening-read: 1130ms;
  --opening-plain: var(--vscode-descriptionForeground);
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--page-background);
  color: var(--vscode-foreground);
  transition: opacity 280ms var(--ease);
}

html.opening-gone .opening {
  display: none;
}

.opening.out {
  opacity: 0;
  pointer-events: none;
}

.opening.fast {
  transition-duration: 150ms;
}

.opening-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  transition: transform 280ms var(--ease);
}

.opening.out .opening-stage {
  transform: translateY(-8px);
}

.opening-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.opening-logo {
  width: 56px;
  height: 56px;
  flex: none;
}

.opening-name {
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* The cursor of the logo's prompt blinks while the page starts. */
.opening-logo .opening-cursor {
  animation: opening-blink 1060ms steps(1) infinite;
}

@keyframes opening-blink {
  50% { opacity: 0; }
}

html.opening-whole .opening-brand {
  animation: opening-logo 320ms var(--ease) both;
}

@keyframes opening-logo {
  from { opacity: 0; transform: scale(0.96); }
}

/* The line: each part has a plain layer (grey) and its colours on top. */
.opening-line {
  position: relative;
  margin: 44px 0;
  font-family: var(--vscode-editor-font-family);
  font-size: 32px;
  line-height: 1.4;
  white-space: pre;
}

.opening-line .part {
  /* Its times, from its order (--k) and its role (--role: 0 an operator, 1 a command name, 2 the rest). */
  --lift-at: calc(150ms + var(--k) * 50ms);
  --ink-at: calc(650ms + var(--role) * 150ms);
  position: relative;
  display: inline-block;
}

.opening-line .plain {
  color: var(--opening-plain);
  opacity: 0;
}

.opening-line .ink {
  position: absolute;
  left: 0;
  top: 0;
  white-space: pre;
}

.opening .k-command { color: var(--vscode-charts-blue); }
.opening .k-option { color: var(--vscode-charts-orange); }
.opening .k-argument { color: var(--vscode-charts-green); }
.opening .k-operator { color: var(--vscode-charts-purple); }
.opening .k-variable { color: var(--vscode-charts-red); }

/* bash's reading: the tokens lift in turn and show their bounds… */
.opening-line .part::before {
  content: "";
  position: absolute;
  inset: -0.1em -0.12em;
  border: 1px solid var(--opening-plain);
  border-radius: 5px;
  opacity: 0;
}

html.opening-whole .opening-line {
  animation: opening-in 150ms both;
}

html.opening-whole .opening-line .part {
  animation: opening-lift 360ms var(--lift-at) var(--ease) both;
}

html.opening-whole .opening-line .part::before {
  animation: opening-box calc(var(--ink-at) - var(--lift-at) + 160ms) linear var(--lift-at) both;
}

/* …then each part takes its colour, by role. */
html.opening-whole .opening-line .plain {
  animation: opening-out 180ms var(--ink-at) both;
}

html.opening-whole .opening-line .ink {
  animation: opening-in 180ms var(--ink-at) both;
}

@keyframes opening-in {
  from { opacity: 0; }
}

@keyframes opening-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes opening-lift {
  40% { transform: translateY(-8px); }
}

@keyframes opening-box {
  0% { opacity: 0; }
  15% { opacity: 0.8; }
  80% { opacity: 0.8; }
  100% { opacity: 0; }
}

/* When the page is ready, each part is underlined and labelled with what the explanation says of it; web/opening.ts
   puts each label below its part, or above it where the one before is in the way. */
.opening-line .part::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: -3px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms calc(var(--k) * 45ms) var(--ease);
}

html.opening-still .opening-line .part::after,
.opening.ready .opening-line .part::after {
  transform: scaleX(1);
}

.opening-line .chip {
  position: absolute;
  left: 50%;
  top: calc(100% + 14px);
  padding: 2px 9px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: var(--vscode-editor-background);
  font: 13px/1.5 var(--vscode-font-family);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity 200ms calc(var(--k) * 45ms) var(--ease), transform 200ms calc(var(--k) * 45ms) var(--ease);
}

.opening-line .chip.above {
  top: auto;
  bottom: calc(100% + 14px);
  transform: translate(-50%, -6px);
}

.opening-line .chip::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 1px;
  height: 11px;
  background: currentColor;
  opacity: 0.6;
}

.opening-line .chip.above::before {
  bottom: auto;
  top: 100%;
}

.opening.ready .opening-line .chip {
  opacity: 1;
  transform: translate(-50%, 0);
}

html[data-opening-lang="ja"] .opening .l-en,
html:not([data-opening-lang="ja"]) .opening .l-ja {
  display: none;
}

/* Where the labels do not fit around the line (a phone), they are a list under it, as the panel lists the parts. */
.opening-list {
  display: none;
}

.opening.opening-as-list .opening-line .chip {
  visibility: hidden;
}

.opening.opening-as-list .opening-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.5;
}

.opening-list li {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 200ms calc(var(--k) * 45ms) var(--ease), transform 200ms calc(var(--k) * 45ms) var(--ease);
}

.opening.ready .opening-list li {
  opacity: 1;
  transform: none;
}

.opening-list code {
  display: inline-block;
  min-width: 5.5em;
  font-family: var(--vscode-editor-font-family);
  font-weight: 600;
}

@media (max-width: 560px) {
  .opening-line .chip { display: none; }
  .opening-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    line-height: 1.5;
  }
  .opening-stage { gap: 28px; }
  .opening-logo { width: 40px; height: 40px; }
  .opening-name { font-size: 28px; }
  .opening-line { font-size: 18px; margin: 0; }
  .opening-line .part::before { inset: -0.1em -0.05em; border-radius: 3px; }
}