/* go/codegolf benchmark: styles. */

:root,
html[data-theme="light"] {
  color-scheme: light;
  /* Warm paper: Solarized base3 page, base2 code and hover surfaces. */
  --bg: #fdf6e3;
  --fg: #1d1d1b;
  --muted: #68665f;
  --rule: #e0d9c5;
  --accent: #2b5d9b;
  --code-bg: #eee8d5;
  --esc-bg: #f9d3b3;
  --esc-fg: #8a3b00;
  --gold: #c99a1e;
  --kb: #87827d;
  /* Heat tiles: deep green for the best known size, through greens to pale straw near the page's hue. */
  --heat-11: #277a55; --heat-11-fg: #ffffff;
  --heat-10: #76be86; --heat-10-fg: #17251d;
  --heat-9: #86c387;  --heat-9-fg: #17251d;
  --heat-8: #95c888;  --heat-8-fg: #17251d;
  --heat-7: #a4cd8b;  --heat-7-fg: #17251d;
  --heat-6: #b2d28e;  --heat-6-fg: #17251d;
  --heat-5: #c3d995;  --heat-5-fg: #17251d;
  --heat-4: #d2e09d;  --heat-4-fg: #17251d;
  --heat-3: #e2e7a6;  --heat-3-fg: #17251d;
  --heat-2: #f1eeb0;  --heat-2-fg: #17251d;
  --heat-1: #fff5bb;  --heat-1-fg: #17251d;
  --heat-hover: rgba(24, 60, 44, 0.22);
  --backdrop: rgba(29, 29, 27, 0.45);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #181511;
  --fg: #e7e5df;
  --muted: #a19e96;
  --rule: #322e28;
  --accent: #8ab4f8;
  --code-bg: #231e1a;
  --esc-bg: #4a2f12;
  --esc-fg: #ffcf99;
  --gold: #e0b43a;
  --kb: #8f8b84;
  /* Same ramp, fading into the page: brightest green for the best known size, dark olive at the bottom. */
  --heat-11: #4b986f; --heat-11-fg: #0c1510;
  --heat-10: #2e6849; --heat-10-fg: #e7ece8;
  --heat-9: #32613f;  --heat-9-fg: #e7ece8;
  --heat-8: #355936;  --heat-8-fg: #e7ece8;
  --heat-7: #37512e;  --heat-7-fg: #e7ece8;
  --heat-6: #384a26;  --heat-6-fg: #e7ece8;
  --heat-5: #37421e;  --heat-5-fg: #e7e5df;
  --heat-4: #353917;  --heat-4-fg: #e7e5df;
  --heat-3: #323111;  --heat-3-fg: #e7e5df;
  --heat-2: #2e290c;  --heat-2-fg: #e7e5df;
  --heat-1: #2a2208;  --heat-1-fg: #e7e5df;
  --heat-hover: rgba(0, 0, 0, 0.5);
  --backdrop: rgba(0, 0, 0, 0.6);
}

:root {
  --font-prose: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-code: ui-monospace, SFMono-Regular, Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
  --gutter: 2rem;
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

/* One fluid root size scales every rem and em below: 13.5px on a 390px phone, growing with the window
   to 15px from 1280px on (with the browser's default 16px text; a larger default scales it all up).
   Keep text sizes in rem or em so they follow it. */
html {
  font-size: clamp(0.84375rem, 0.8025rem + 0.1685vw, 0.9375rem);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.5;
}

a {
  color: var(--accent);
  text-underline-offset: 0.15em;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

code,
pre,
kbd,
samp {
  font-family: var(--font-code);
  font-size: 0.875rem;
}

code {
  background: var(--code-bg);
  padding: 0.1em 0.3em;
  border-radius: 4px;
}

pre {
  background: var(--code-bg);
  padding: 0.75rem 1rem;
  border-radius: 6px;
  overflow-x: auto;
  white-space: pre;
  line-height: 1.45;
}

pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  white-space: pre;
}

.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Header ---------- */

.site-header {
  border-bottom: 1px solid var(--rule);
}

.header-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.75rem 2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem 1.75rem;
}

.site-title {
  color: var(--fg);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}

.site-nav a {
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover {
  color: var(--accent);
}

.site-nav a[aria-current="page"] {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.4em;
}

.theme-toggle {
  margin-left: auto;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  line-height: 1;
}

.theme-toggle:hover {
  border-color: var(--muted);
}

/* ---------- Page layout ---------- */

main {
  padding: var(--gutter);
}

/* Every page reads in one 44rem column, centered under the header. */
.page {
  max-width: 44rem;
  margin: 0 auto;
}

/* A table that outgrows the column stays centered on the column's axis and may use the viewport
   between the gutters; anything wider scrolls sideways, left part first. */
.bleed {
  margin-inline: calc(50% - 50vw + var(--gutter));
}

h1 {
  font-family: var(--font-prose);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.25;
  margin: 0.5rem 0 1.25rem;
}

/* The leaderboard's heading and stats center over its wider table rather than sharing the reading
   column's left edge, which the table no longer has; the column width remains their line length.
   Aligning with the table's edge would wait for data.json and make the headline jump. */
h1.tagline {
  font-size: 2.25rem;
  line-height: 1.2;
  margin-bottom: 0.5rem;
  text-align: center;
  text-wrap: balance;
}

.stats {
  color: var(--muted);
  margin: 0 0 1.75rem;
  text-align: center;
}

.loading,
.load-error {
  color: var(--muted);
}

@media (max-width: 719.98px) {
  .header-inner {
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
  }
  .site-nav {
    order: 3;
    flex-basis: 100%;
  }
  :root {
    --gutter: 1rem;
  }
  h1 {
    font-size: 1.75rem;
  }
  h1.tagline {
    font-size: 1.75rem;
  }
}

/* ---------- Prose ---------- */

.prose {
  font-family: var(--font-prose);
  font-size: 1.0625rem;
  line-height: 1.65;
  max-width: 44rem;
}

.prose h2 {
  font-size: 1.35rem;
  line-height: 1.3;
  margin: 2.25rem 0 0.75rem;
  scroll-margin-top: 1rem;
}

/* Each heading links to its own section route (#about/SLUG, #why/SLUG). */
.prose h2 > a {
  color: inherit;
  text-decoration: none;
}

.prose h2 > a:hover {
  color: var(--accent);
}

.prose h3 {
  font-size: 1.1rem;
  margin: 1.75rem 0 0.5rem;
}

.prose p,
.prose ul,
.prose ol {
  margin: 0 0 1rem;
}

.prose li {
  margin: 0.25rem 0;
}

.prose li > ul,
.prose li > ol {
  margin: 0.25rem 0;
}

.prose blockquote {
  margin: 1rem 0;
  padding: 0 1rem;
  border-left: 3px solid var(--rule);
}

#page-about blockquote,
#page-why blockquote,
.page-toc {
  background: var(--code-bg);
  border-left: 3px solid var(--accent);
  font-style: normal;
  margin: 1.5rem 0;
  padding: 0.75rem 1.25rem;
  border-radius: 0 6px 6px 0;
}

.prose blockquote > :first-child {
  margin-top: 0;
}

.prose blockquote > :last-child {
  margin-bottom: 0;
}

.page-toc {
  border-left-color: var(--rule);
  font-size: 1rem;
  line-height: 1.45;
}

.page-toc .toc-title {
  margin: 0 0 0.5rem;
  font-weight: 700;
}

.page-toc ol {
  margin: 0;
  padding-left: 1.5em;
  columns: 2 16rem;
  column-gap: 2rem;
}

.page-toc li {
  break-inside: avoid;
  margin: 0;
  padding-left: 0.25rem;
}

.page-toc li::marker {
  color: var(--muted);
}

.page-toc a {
  display: block;
  padding: 0.2rem 0;
  text-decoration: none;
}

.page-toc a:hover,
.page-toc a:focus-visible {
  text-decoration: underline;
}

.prose pre {
  margin: 0 0 1rem;
}

/* Short golfed expressions such as ~-c**31 must not break at their own hyphens. */
#page-why :not(pre) > code {
  white-space: nowrap;
}

.prose table,
.io-table {
  display: block;
  overflow-x: auto;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.45;
  border-collapse: collapse;
  margin: 0 0 1.25rem;
  font-variant-numeric: tabular-nums;
}

.prose th,
.prose td,
.io-table th,
.io-table td {
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

.prose thead th,
.io-table thead th {
  font-weight: 600;
  border-bottom-color: var(--muted);
}

.io-table tbody th {
  font-weight: normal;
  white-space: nowrap;
}

.io-table td:nth-child(2) {
  white-space: nowrap;
}

/* ---------- Data tables (leaderboard, level-3 matrix) ---------- */

.table-scroll {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  overflow-x: auto;
}

.data-table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9375rem;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.data-table > * > tr > th,
.data-table > * > tr > td {
  padding: 0.55rem 0.5rem;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

/* Labels at three-quarter size: a language name is no wider than an XX.YYY% score, so the scores
   alone set the column widths. */
.data-table > thead > tr > th {
  vertical-align: bottom;
  border-bottom-color: var(--muted);
  font-size: 0.75em;
  font-weight: 600;
}

.data-table > tbody > tr > th {
  font-weight: normal;
}

.data-table > * > tr > .num {
  text-align: right;
}

.sticky-col {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--bg);
}

.data-table > thead > tr > .sticky-col {
  z-index: 2;
}

.sort-btn {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg);
  font-weight: 600;
  text-align: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.sort-arrow {
  display: inline-block;
  width: 0.8em;
  font-size: 0.8em;
  color: var(--muted);
  text-align: center;
}

/* Right-aligned columns: the arrow hangs left of the label and takes no width. */
.num > .sort-btn {
  position: relative;
}

.num > .sort-btn > .sort-arrow {
  position: absolute;
  top: 0;
  right: 100%;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.2em;
}

.lb-row {
  cursor: pointer;
}

.lb-row:hover > * {
  background: var(--code-bg);
}

.comp-cell {
  white-space: normal !important;
}

.comp-line1 {
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
}

.disclosure {
  flex: none;
  width: 1.4em;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  text-align: center;
}

.comp-name {
  font-weight: 600;
  white-space: nowrap;
}

.comp-status,
.comp-note {
  margin-left: 1.6em;
  font-size: 0.8125rem;
  color: var(--muted);
}

.comp-note {
  font-style: italic;
}

.pill {
  display: inline-block;
  font-size: 0.75rem;
  line-height: 1.35;
  padding: 0 0.5em;
  border: 1px solid var(--rule);
  border-radius: 999px;
  white-space: nowrap;
}

/* Narrow screens: sticky name columns wrap only names longer than today's (widths are border-box). */
@media (max-width: 719.98px) {
  .comp-cell {
    min-width: 11rem;
  }
  .comp-name {
    white-space: normal;
  }
  .matrix > tbody > tr > .sticky-col {
    white-space: normal;
    min-width: 8.5rem;
  }
}

.footnotes {
  margin: 1.25rem 0 0;
  padding-left: 1.5rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.footnotes li {
  margin: 0.2rem 0;
}

/* ---------- Leaderboard: an open competitor's cells ---------- */

/* Offsets follow the competitor cell: 0.5rem padding, then the disclosure arrow (1.4em of the table's
   0.9375rem, i.e. 1.3125rem) and a 0.2rem gap before the name. */
.lb-table {
  --tile-h: 1.625rem;
  --rail-x: calc(0.5rem + 1.3125rem / 2);
  --cells-indent: calc(0.5rem + 1.3125rem + 0.2rem);
}

/* While the table fits nothing scrolls sideways, so the scroller stops clipping and the header row
   sticks to the top of the window through a long block of cells. */
.lb-scroll.fits {
  overflow: visible;
}

.lb-table > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg);
}

.lb-table > thead > tr > .sticky-col {
  z-index: 3;
}

/* The stuck header's reminder of whose cells are showing; clicking it closes them. */
.head-context {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.head-context-arrow {
  color: var(--muted);
}

.lb-group:not(.is-open) > .cells-key-row,
.lb-group:not(.is-open) > .cells-row {
  display: none;
}

.lb-group.is-entering > .cells-key-row,
.lb-group.is-entering > .cells-row {
  animation: cells-in 0.18s ease-out;
}

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

.lb-group.is-open > .lb-row > * {
  border-bottom-color: transparent;
}

.data-table > tbody > .cells-row > * {
  padding: 0.125rem;
  border-bottom: 0;
}

/* The block ends with the table's usual rule, a little below its last cells. */
.data-table > tbody > .cells-row:last-child > * {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--rule);
}

/* A hairline from the open competitor's arrow down through its cells marks them as its own. */
.cells-key-row > td,
.cells-head {
  background: linear-gradient(var(--rule), var(--rule)) no-repeat var(--rail-x) 0 / 1px 100%, var(--bg);
}

.cells-row:hover > * {
  background-color: var(--code-bg);
}

.data-table > tbody > .cells-key-row > td {
  padding: 0.3rem 0 0.6rem;
  border-bottom: 0;
}

/* Sized to the visible width by script: it stays in view and wraps when the table scrolls sideways. */
.cells-key {
  position: sticky;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.1rem;
  padding: 0 0.5rem 0 var(--cells-indent);
  font-size: 0.75rem;
  color: var(--muted);
  white-space: normal;
}

.key-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

/* A miniature 100% tile with its dot, as in the cells. */
.key-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 0.95rem;
  border-radius: 4px;
}

.key-swatch > .heat-dot {
  width: 0.35rem;
  height: 0.35rem;
}

.key-scale {
  display: inline-flex;
  border-radius: 999px;
  overflow: hidden;
}

.key-scale > span {
  width: 0.9rem;
  height: 0.55rem;
}

.data-table > tbody > .cells-row > .cells-head {
  padding-right: 0.5rem;
  padding-left: var(--cells-indent);
}

/* Width 0, min-width 100%: a label never widens a column, and long ones end in an ellipsis. */
.cells-label {
  display: block;
  width: 0;
  min-width: 100%;
  overflow: hidden;
  color: var(--fg);
  font-size: 0.875rem;
  line-height: var(--tile-h);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cells-label:hover {
  color: var(--accent);
  text-decoration: underline;
}

.cells-id {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Scrolling table: the label sits in the pinned column and wraps there. */
.lb-scroll:not(.fits) .cells-label {
  padding-block: 0.25rem;
  line-height: 1.3;
  white-space: normal;
}

/* Width 0, min-width 100%: the averages above alone set the column widths. The left padding is the
   sole-best dot's slot, so sizes stay aligned down the column whether or not a tile has one. */
.tile {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: center;
  width: 0;
  min-width: 100%;
  height: var(--tile-h);
  padding: 0 0.1875rem 0 0.6875rem;
  border-radius: 5px;
  font-size: 0.8125rem;
  line-height: var(--tile-h);
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.tile > strong,
.tile > .tile-best {
  display: inline-block;
  text-align: right;
}

.tile > strong {
  font-weight: 700;
}

.tile-sep,
.tile-best {
  font-size: 0.71875rem;
  opacity: 0.72;
}

.tile-sep {
  margin: 0 0.3em;
}

a.tile:hover {
  z-index: 1;
  transform: translateY(-1px) scale(1.06);
  box-shadow: 0 4px 12px -3px var(--heat-hover);
}

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

.heat-dot {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
}

.tile > .heat-dot {
  position: absolute;
  top: 50%;
  left: 0.25rem;
  width: 0.34375rem;
  height: 0.34375rem;
  margin-top: -0.171875rem;
}

.tile-cell > .dash {
  display: block;
  line-height: var(--tile-h);
  text-align: center;
}

/* The key's sample tile, sized to its words. */
.key-tile {
  width: auto;
  min-width: 0;
  height: 1.3rem;
  padding: 0 0.5rem;
  font-size: 0.75rem;
  line-height: 1.3rem;
}

.key-tile > .tile-sep,
.key-tile > .tile-best {
  font-size: 0.6875rem;
}

.heat-11 { background: var(--heat-11); color: var(--heat-11-fg); }
.heat-10 { background: var(--heat-10); color: var(--heat-10-fg); }
.heat-9 { background: var(--heat-9); color: var(--heat-9-fg); }
.heat-8 { background: var(--heat-8); color: var(--heat-8-fg); }
.heat-7 { background: var(--heat-7); color: var(--heat-7-fg); }
.heat-6 { background: var(--heat-6); color: var(--heat-6-fg); }
.heat-5 { background: var(--heat-5); color: var(--heat-5-fg); }
.heat-4 { background: var(--heat-4); color: var(--heat-4-fg); }
.heat-3 { background: var(--heat-3); color: var(--heat-3-fg); }
.heat-2 { background: var(--heat-2); color: var(--heat-2-fg); }
.heat-1 { background: var(--heat-1); color: var(--heat-1-fg); }

@media (prefers-reduced-motion: reduce) {
  a.tile {
    transition: none;
  }
  a.tile:hover {
    transform: none;
  }
  .lb-group.is-entering > .cells-key-row,
  .lb-group.is-entering > .cells-row {
    animation: none;
  }
}

/* ---------- Markers ---------- */

.marker {
  position: relative;
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  margin-right: 0.35em;
  border-radius: 50%;
  background: var(--gold);
  vertical-align: 0.02em;
}

.marker-tied {
  background: transparent;
  border: 0.12em solid var(--gold);
}

.kb-size {
  font-style: italic;
  color: var(--kb);
}

/* ---------- Problems ---------- */

.problem-list {
  border-top: 1px solid var(--rule);
}

.problem {
  border-bottom: 1px solid var(--rule);
}

.problem-h {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.problem-head {
  display: block;
  width: 100%;
  padding: 0.75rem 0.5rem;
  border: 0;
  background: none;
  color: var(--fg);
  text-align: left;
  cursor: pointer;
}

.problem-head:hover {
  background: var(--code-bg);
}

.p-line1 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.6rem;
}

.p-num {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.p-name {
  font-weight: 600;
}

.p-author {
  color: var(--muted);
}

.p-blurb {
  display: block;
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

.problem-body {
  padding: 0.5rem 0.5rem 1.75rem;
}

.statement {
  margin-top: 0.5rem;
}

.small-heading {
  margin: 1.75rem 0 0.6rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.best-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.best-list li {
  margin: 0.2rem 0;
}

.best-lang {
  font-weight: 600;
}

.btn,
.scoreboard-toggle,
.tests-download {
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
  font-size: 0.875rem;
  cursor: pointer;
}

.btn:hover,
.scoreboard-toggle:hover,
.tests-download:hover {
  border-color: var(--muted);
}

/* A link dressed as the scoreboard toggle, on its own line just above it. */
.tests-download {
  display: block;
  width: fit-content;
  margin-top: 1.5rem;
  text-decoration: none;
}

.scoreboard-toggle {
  margin-top: 0.5rem;
  scroll-margin-top: 1rem;
}

.scoreboard {
  margin-top: 1rem;
}

.matrix .num {
  min-width: 3rem;
}

/* The cell a #problems/NN/scoreboard/OWNER-LANG link points to, or whose code was opened last. A link
   scrolls it to a quarter of the window height, so it stays in view above the (centered) code popup. */
.matrix > tbody > tr > td.is-target {
  box-shadow: inset 0 0 0 2px var(--accent);
  scroll-margin-top: 25vh;
}

.solution-btn {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.dash {
  color: var(--muted);
}

/* ---------- Modal ---------- */

html.modal-open,
html.modal-open body {
  overflow: hidden;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: var(--backdrop);
}

.modal {
  display: flex;
  flex-direction: column;
  width: min(60rem, 100%);
  max-height: calc(100vh - 2rem);
  padding: 1rem 1.25rem 1.25rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--bg);
  color: var(--fg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.modal-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.modal-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
}

.modal-sub {
  margin: 0.2rem 0 0;
  font-size: 0.875rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.modal-close {
  flex: none;
  margin-left: auto;
  padding: 0 0.45rem;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  font-size: 1.6rem;
  line-height: 1.1;
  cursor: pointer;
}

.modal-close:hover {
  color: var(--fg);
}

.modal-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.9rem 0 0.75rem;
}

.seg {
  display: inline-flex;
}

.seg .btn {
  border-radius: 0;
}

.seg .btn:first-child {
  border-radius: 6px 0 0 6px;
}

.seg .btn:last-child {
  border-radius: 0 6px 6px 0;
  margin-left: -1px;
}

.btn[aria-pressed="true"] {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
}

.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.copy-note {
  font-size: 0.8125rem;
  color: var(--muted);
}

.modal-pre {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 70vh;
  margin: 0;
  overflow: auto;
  white-space: pre;
  tab-size: 4;
}

.esc {
  background: var(--esc-bg);
  color: var(--esc-fg);
  border-radius: 3px;
}