/*
 * 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 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 {
  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,
.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 img {
  border-radius: 6px;
}

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

/* The file kind: a button drawn as a select, with the whole name (a short one on a phone), and its list. */
.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-short {
  display: none;
}

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

.pick select {
  max-width: 11rem;
  min-height: 30px;
  font-size: 12.5px;
}

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

/* The view switch (List or Tree): two words in one control, the view shown pressed, as the panel's own switch
   in VS Code. In the top bar it has the height of the bar's selects; on a phone it is in the menu. */
.views {
  display: inline-flex;
  flex: none;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--vscode-dropdown-border);
  border-radius: var(--radius-sm);
  background: var(--vscode-dropdown-background);
}

.views button {
  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;
  white-space: nowrap;
}

@media (hover: hover) {
  .views button:hover {
    border-color: transparent;
    color: var(--vscode-foreground);
  }
}

.views button[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--vscode-foreground);
  font-weight: 600;
}

/* In the menu: as wide as the selects, its halves 40px high to tap. */
.field .views button {
  flex: 1 1 0;
  height: 40px;
  font-size: inherit;
}

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

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

.source {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

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

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

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

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

#problems h2 {
  flex: none;
  margin: 0;
  background: var(--page-background);
  color: var(--vscode-descriptionForeground);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#problems-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-height: 28px;
  padding: 4px 12px 2px 8px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: start;
  cursor: pointer;
}

#problems-toggle:hover {
  color: var(--vscode-foreground);
}

#problems-toggle .chev {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s;
}

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

#problems .count {
  padding: 0 6px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--vscode-foreground);
}

#problem-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  list-style: none;
  margin: 0;
  padding: 0 6px 6px;
}

#problem-list li {
  display: flex;
  gap: 8px;
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

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

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

#problem-list .icon.warning {
  color: var(--vscode-charts-yellow);
}

#problem-list .icon.info {
  color: var(--vscode-charts-blue);
}

/* What an action did ("Link copied"): a toast at the bottom, for a few seconds. */
#status {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 20;
  width: max-content;
  max-width: min(32rem, calc(100vw - 32px));
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--vscode-panel-border);
  border-radius: var(--radius);
  background: var(--vscode-editor-background);
  color: var(--vscode-foreground);
  box-shadow: var(--shadow);
  transform: translateX(-50%);
  transition: opacity 0.2s, transform 0.2s var(--ease);
}

#status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-action {
  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) {
  .status-action {
    min-height: 40px;
  }
}

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

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

#status:empty {
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
  visibility: hidden;
}

/* The question after a change of the file kind (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 #kind-replace {
  border-color: var(--page-accent);
  background: var(--page-accent);
  color: var(--page-accent-foreground);
}

@media (hover: hover) {
  .ask-actions #kind-replace: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 sample 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);
}

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

.phone-only {
  display: none !important;
}

:where(html.narrow) .menu-item.phone-only {
  display: flex !important;
}

:where(html.narrow) .field.phone-only {
  display: grid !important;
}

.field[hidden],
.pick[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;
}

@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 is for touch screens (no soft keyboard elsewhere); the keyboard is crossed out while it is on. */
.touch-only {
  display: none;
}

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

#readmode {
  position: relative;
}

#readmode .slash {
  position: absolute;
  display: none;
}

#readmode[aria-pressed="true"] {
  background: var(--accent-soft);
}

#readmode[aria-pressed="true"] .slash {
  display: block;
}

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

/* The shell and yq are in the menu until there is room for them here; the fold, the quick reference
   and the copy are in the top bar at every width. */
@media (max-width: 1199px) {
  .desk-only {
    display: none !important;
  }
}

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

/* The phone's bar has no room for the view switch (measured from 320 to 430px: two 40px halves do not fit
   beside the four buttons): it is in the menu there. */
:where(html.narrow) .bar-only {
  display: none !important;
}

#ref[aria-pressed="true"] {
  background: var(--accent-soft);
}

@media (max-width: 900px) {
  .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;
}

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

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

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

:where(html.narrow) #problems-toggle {
  min-height: 40px;
}

:where(html.narrow) #settings-dialog {
  width: 100vw;
  border-radius: 0;
}

/* 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 img {
    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 ----------------------------------------------------------------------- */

#settings-dialog {
  width: min(36rem, 100vw);
}

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

.settings-group h3 {
  margin: 20px 0 4px;
  color: var(--vscode-descriptionForeground);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.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 {
  font-weight: 600;
}

.setting-key {
  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 {
  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 {
  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;
}