/*
 * QKiSS website.
 * Colors come from the app icon (an olive shirt) and the Tango palette.
 */

:root {
  --bg: #f7f7f2;
  --surface: #ffffff;
  --surface-sunken: #eef0e6;
  --text: #2e3436;
  --text-muted: #555753;
  --border: #d3d7cf;
  --border-strong: #babdb6;
  --accent: #5a6b1a;
  --accent-top: #66791f;        /* top of the primary button gradient */
  --accent-hover: #445016;
  --accent-soft: #e9eed3;
  --on-accent: #ffffff;
  --danger-top: #cc0000;        /* the red button (Tango's Scarlet Red), the same in both themes */
  --danger: #a40000;
  --danger-hover: #820000;
  --on-danger: #ffffff;
  --danger-soft: #f9e0e0;       /* the background of a warning (.musing-warning) */
  --error-text: #a40000;        /* an error message in a document (.terms-error) */
  --checker: #eef0e4;           /* the "transparent pixels" pattern behind the hero */
  --highlight: rgb(255 255 255 / 0.6);
  --shadow: 0 1px 2px rgb(46 52 54 / 0.08), 0 4px 16px rgb(46 52 54 / 0.06);
  --radius: 10px;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;
  --line-height: 1.7;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1d18;
    --surface: #24271f;
    --surface-sunken: #202319;
    --text: #eeeeec;
    --text-muted: #babdb6;
    --border: #3a3e33;
    --border-strong: #4d5245;
    --accent: #b1cb46;
    --accent-top: #bfd65a;
    --accent-hover: #c6d294;
    --accent-soft: #2e3421;
    --on-accent: #1b1d18;
    --danger-soft: #3b1814;
    --error-text: #ff8080;
    --checker: #20231b;
    --highlight: rgb(255 255 255 / 0.06);
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 4px 16px rgb(0 0 0 / 0.25);
  }
}

:root:lang(ja) {
  --font: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans CJK JP", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
  --line-height: 1.85;
}

:root:lang(zh-TW) {
  --font: system-ui, -apple-system, "PingFang TC", "Noto Sans CJK TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --line-height: 1.85;
}

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

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

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;     /* keep anchored headings below the sticky header */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Set by main.js until the chosen translation is applied (at most 2 seconds). */
html.i18n-loading body {
  visibility: hidden;
}

/* Keep the page still while a dialog is open: an enlarged screenshot, a checksum, or the dialogs of the Director's
   Cut. */
html:has(dialog[open]) {
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: var(--line-height);
  overflow-wrap: break-word;
}

img,
svg,
video {
  max-width: 100%;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--accent-hover);
  text-decoration-thickness: 2px;
}

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

h1,
h2,
h3 {
  line-height: 1.3;
}

code {
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--surface-sunken);
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.container {
  width: min(100% - 2rem, 68rem);
  margin-inline: auto;
}

.prose {
  width: min(100% - 2rem, 44rem);
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

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

.skip-link {
  position: absolute;
  top: -10rem;
  left: 1rem;
  z-index: 100;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  background: var(--accent);
  color: var(--on-accent);
}

.skip-link:focus {
  top: 1rem;
}

.notice {
  margin: 1.25rem 0 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* ---- Buttons (a little GTK+ 2: gradient, 1px border, inner highlight) ---- */

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.55rem 1.15rem;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: linear-gradient(var(--surface), var(--surface-sunken));
  box-shadow: inset 0 1px 0 var(--highlight), 0 1px 2px rgb(0 0 0 / 0.08);
  color: var(--text);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.button:hover {
  border-color: var(--accent);
  color: var(--text);
}

.button-primary {
  border-color: var(--accent-hover);
  background: linear-gradient(var(--accent-top), var(--accent));
  color: var(--on-accent);
}

.button-primary:hover {
  background: var(--accent-hover);
  color: var(--on-accent);
}

/* A red button, for an action to think twice about (agreeing to the Director's Cut). */
.button-danger {
  border-color: var(--danger-hover);
  background: linear-gradient(var(--danger-top), var(--danger));
  color: var(--on-danger);
}

.button-danger:hover {
  border-color: var(--danger-hover);
  background: var(--danger-hover);
  color: var(--on-danger);
}

/* A Tango or Nome icon, shown at 22 px in a button (see images/icons/README.md). */
.button-icon {
  flex: none;
}

/* A brand mark in a button (see images/marks/README.md). It is painted in the text color through a mask, so it
   follows the colors of the button, in both themes. */
.button-mark {
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  mask: center / contain no-repeat;
  -webkit-mask: center / contain no-repeat;
}

.button-mark.github {
  mask-image: url(images/marks/github.svg);
  -webkit-mask-image: url(images/marks/github.svg);
}

.button-mark.gitlab {
  mask-image: url(images/marks/gitlab.svg);
  -webkit-mask-image: url(images/marks/gitlab.svg);
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.header-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  min-height: 3.75rem;
  padding-block: 0.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: none;
}

.brand:hover {
  color: var(--text);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-inline-start: auto;
}

.site-nav a {
  position: relative;
  color: var(--text-muted);
  font-weight: 500;
  text-decoration: none;
}

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

/* The section being read, which main.js marks with aria-current: green text, and a green underline growing in. */
.site-nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -0.3rem;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.site-nav a[aria-current="true"] {
  color: var(--accent);
}

.site-nav a[aria-current="true"]::after {
  transform: scaleX(1);
}

.language-picker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-muted);
}

/*
 * The picker is @llselect/core. Its classes are styled here from the tokens
 * above (light and dark), instead of loading one of its themes.
 */
.llselect-root {
  position: relative;
  display: inline-block;
  font-size: 0.95rem;
}

.llselect-trigger {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.5rem 0.3rem 0.6rem;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
}

.llselect-trigger:hover,
.llselect-trigger[data-state='open'] {
  border-color: var(--accent);
}

.llselect-trigger-content {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.llselect-trigger-arrow {
  display: inline-flex;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}

.llselect-trigger[data-state='open'] .llselect-trigger-arrow {
  transform: rotate(180deg);
}

/* Shown in the top layer (as a popover) where supported, so its padding, colors and border must be explicit. */
.llselect-popup {
  z-index: 100;
  padding: 0.25rem 0;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
  font-size: 0.95rem;
}

.llselect-item {
  padding: 0.35rem 0.75rem;
  line-height: 1.4;
  cursor: pointer;
}

.llselect-item:hover,
.llselect-item-focused {
  background: var(--accent-soft);
}

.llselect-item[aria-selected='true'] {
  color: var(--accent);
  font-weight: 600;
}

.language-option {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* The flags are 4:3; the thin ring outlines the white ones. */
.language-flag {
  width: 1.4em;
  height: 1.05em;
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--border);
}

/* The cut picker and the language picker, side by side, as high as each other. */
.llselect-trigger {
  height: 2.25rem;
}

.header-tools {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

/* The cut picker is an llselect too, styled above. A cut is shown by its icon and its name (.cut-option). */
.cut-option {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.cut-option img {
  flex: none;
}

/* On narrow screens: logo and pickers on the first row, the sections below. */
@media (max-width: 44rem) {
  .header-tools {
    margin-inline-start: auto;
  }

  .site-nav {
    order: 1;
    width: 100%;
    margin-inline-start: 0;
    padding-bottom: 0.25rem;
  }
}

/* On a phone, the cut picker shows only the icon of the cut when closed, so that the logo and both pickers fit on one
   row. Screen readers still read the name (as with .visually-hidden). */
@media (max-width: 32rem) {
  .cut-picker .llselect-trigger .cut-name {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ---- Hero ---------------------------------------------------------------- */

.hero {
  border-bottom: 1px solid var(--border);
  background-color: var(--bg);
  background-image: conic-gradient(var(--checker) 25%, transparent 0 50%, var(--checker) 0 75%, transparent 0);
  background-size: 28px 28px;
}

.hero-body {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2rem 3rem;
  padding-block: clamp(3rem, 8vw, 6rem);
}

.hero-logo {
  width: clamp(7rem, 18vw, 11rem);
  height: auto;
  filter: drop-shadow(0 6px 12px rgb(46 52 54 / 0.2));
}

.hero h1 {
  margin: 0;
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  line-height: 1.1;
}

.hero-tagline {
  margin: 0.4rem 0 1rem;
  color: var(--accent);
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  font-weight: 600;
}

.hero-lead {
  max-width: 36rem;
  margin: 0 0 1.5rem;
  font-size: 1.125rem;
}

.hero-note {
  margin: 1rem 0 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

@media (max-width: 40rem) {
  .hero-body {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .hero .button-row {
    justify-content: center;
  }
}

/* ---- Sections ------------------------------------------------------------ */

.section {
  padding-block: clamp(3rem, 7vw, 5rem);
}

.section-alt {
  border-block: 1px solid var(--border);
  background: var(--surface);
}

.section h2 {
  margin: 0 0 1.5rem;
  font-size: clamp(1.6rem, 3.2vw, 2rem);
}

/* A small square, like one pixel of the pixel art in KiSS cels. */
.section h2::before {
  content: "";
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  margin-inline-end: 0.5em;
  background: var(--accent);
  vertical-align: 0.12em;
}

.prose p {
  margin: 0 0 1.1rem;
}

.prose h3 {
  margin: 2.25rem 0 0.75rem;
  font-size: 1.3rem;
}

.musing {
  display: flex;
  align-items: flex-start;
  gap: 1rem 1.25rem;
  margin: 1.5rem 0 0;
  padding: 1rem 1.25rem;
  border-inline-start: 4px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--accent-soft);
}

/* A musing that warns: red instead of green. */
.musing-warning {
  border-inline-start-color: var(--danger-top);
  background: var(--danger-soft);
}

/* A Tango emote, shown at 48 px as the face of the author, dialog-warning.svg in a warning, or a certificate in the
   legal basis of the additional articles (see images/icons/README.md). */
.musing-icon {
  flex: none;
}

.musing p {
  margin: 0;
}

.musing p + p {
  margin-top: 1.1rem;
}

.musing rt {
  font-size: 70%;   /* the largest size that does not make its line taller */
}

/* On a phone, the icon goes above the text. The text then gets the whole width. */
@media (max-width: 40rem) {
  .musing {
    flex-direction: column;
  }
}

/* ---- Features ------------------------------------------------------------ */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature {
  padding: 1.25rem 1.25rem 1.1rem;
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg);
}

.feature h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
}

/* A Tango or Nome icon, shown at 32 px before the title (see images/icons/README.md). */
.feature-icon {
  flex: none;
}

.feature p,
.feature ul {
  margin: 0 0 0.6rem;
  color: var(--text-muted);
  font-size: 0.98rem;
}

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

.feature ul {
  padding-inline-start: 1.25rem;
  list-style: square;
}

.feature li::marker {
  color: var(--accent);
}

/* ---- Footnotes ----------------------------------------------------------- */

sup {
  line-height: 0;   /* a superscript must not make its line taller */
}

/* `*1` in the text and in the footnote: a small tag, inverted on hover. Inline, so it never makes its line taller. */
.footnote-ref a,
.footnote-back {
  padding: 0.05em 0.35em;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.footnote-ref a:hover,
.footnote-back:hover,
:target > .footnote-back,
:target .footnote-ref a {
  background: var(--accent);
  color: var(--on-accent);
}

.footnotes {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.9rem;
}

.footnotes p {
  margin: 0 -0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
}

.footnote-back {
  margin-inline-end: 0.4em;
}

/* Where a footnote link (or its back link) has just jumped to. */
.footnotes p:target,
.prose > p:target,
.feature li:target,
.faq-answer p:target,
.promo span:target {
  background: var(--accent-soft);
}

/* The advertisement for Tango Remixer, in its own section at the end of the page. It is a card like the features. Its
   top border uses the orange of the Tango palette instead of the accent color, as the logo of Tango Remixer does. Its
   icon is on the left. */
.promo {
  display: flex;
  align-items: flex-start;
  gap: 1rem 1.25rem;
  padding: 1.25rem 1.25rem 1.1rem;
  border: 1px solid var(--border);
  border-top: 3px solid #f57900;
  border-radius: var(--radius);
  background: var(--bg);
}

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

.promo p {
  margin: 0 0 1rem;
}

.promo-icon {
  flex: none;
}

/* On a phone, the icon goes above the text. The text then gets the whole width. */
@media (max-width: 40rem) {
  .promo {
    flex-direction: column;
  }
}

/* ---- Screenshots --------------------------------------------------------- */

/* A button showing a screenshot: the main one, and the thumbnails of the others. */
.screenshot-button {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-sunken);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.screenshot-button:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.screenshot-button :is(img, video) {
  display: block;
  width: 100%;
}

/* A play badge on a screenshot that is a video: a white triangle in a dark circle. */
.screenshot-button.is-video::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%23fff'/%3E%3C/svg%3E") center / 60% no-repeat;
  translate: -50% -50%;
  pointer-events: none;
}

/* The main screenshot, above "What is KiSS?". Until main.js fills it, it reserves the space of a 4:3 picture,
   so that the text under it does not move when the picture appears. */
.main-screenshot {
  width: min(100% - 2rem, 56rem);
  margin: 0 auto clamp(2.5rem, 6vw, 4rem);
}

.main-screenshot:empty {
  aspect-ratio: 4 / 3;
}

.main-screenshot .screenshot-button {
  cursor: zoom-in;
}

.main-screenshot .screenshot-button :is(img, video) {
  aspect-ratio: auto 4 / 3;
}

/* The showcase: the picked screenshot, large. Its box keeps the same size for every screenshot, so that
   the page does not jump when another one is picked. */
.showcase {
  width: min(100%, 56rem);
  margin: 0 auto 1.25rem;
}

.showcase-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-sunken);
  box-shadow: var(--shadow);
}

.showcase-media :is(img, video) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.showcase-media img {
  cursor: zoom-in;
}

.showcase-enlarge {
  display: grid;
  place-items: center;
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: 50%;
  background: rgb(0 0 0 / 0.55);
  color: #ffffff;
  cursor: zoom-in;
}

.showcase-enlarge:hover {
  background: rgb(0 0 0 / 0.75);
}

.showcase figcaption {
  margin-top: 0.75rem;
  color: var(--text-muted);
  font-size: 0.95rem;
  text-align: center;
}

/* The gallery: thumbnails under the showcase. A click on one shows that screenshot in the showcase.
   They wrap into centered rows. Each thumbnail is between 6.5rem and 9.5rem wide, so that a phone still
   gets two of them per row. */
.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gallery li {
  flex: 1 1 6.5rem;
  max-width: 9.5rem;
}

.gallery .screenshot-button :is(img, video) {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* The thumbnail of the screenshot shown in the showcase gets an accent ring. The other thumbnails are dimmed,
   so that the shown one stands out by more than its color. */
.gallery .screenshot-button[aria-current="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}

.gallery .screenshot-button:not([aria-current="true"]) {
  opacity: 0.7;
}

.gallery .screenshot-button:hover {
  opacity: 1;
}

.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgb(15 17 13 / 0.92);
  color: #eeeeec;
}

.lightbox[open] {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) 4rem;
  align-items: center;
}

.lightbox::backdrop {
  background: transparent;
}

.lightbox-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}

.lightbox-figure :is(img, video) {
  max-height: calc(100vh - 8rem);
  max-height: calc(100dvh - 8rem);
  border-radius: 4px;
  box-shadow: 0 8px 32px rgb(0 0 0 / 0.5);
  object-fit: contain;
}

.lightbox-figure figcaption {
  text-align: center;
}

.lightbox-counter {
  margin-inline-start: 0.5rem;
  color: #babdb6;
  font-size: 0.9em;
  white-space: nowrap;
}

.lightbox-button {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.1);
  color: #ffffff;
  cursor: pointer;
}

.lightbox-button:hover {
  background: rgb(255 255 255 / 0.2);
}

.lightbox-prev {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
}

.lightbox-next {
  grid-column: 3;
  grid-row: 1;
  justify-self: center;
}

.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1;
}

@media (max-width: 40rem) {
  .lightbox[open] {
    grid-template-columns: 3rem minmax(0, 1fr) 3rem;
  }

  .lightbox-button {
    width: 2.5rem;
    height: 2.5rem;
  }
}

/* ---- Download ------------------------------------------------------------ */

/* At most two cards per row (24rem is too wide for three), so that the buttons of a card can sit side by side. */
.download-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: 1.25rem;
}

/* The source code card: under Linux and Windows, across the whole row. */
.download-source {
  grid-column: 1 / -1;
}

.download-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}

.download-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.download-card h3 {
  margin: 0;
  font-size: 1.35rem;
}

.download-card p {
  flex: 1;
  margin: 0;
  color: var(--text-muted);
}

/* A download button joined to the toggle of its menu, as one split button (made by main.js from
   #download-menu-template). The menu opens under it. */
.split-button {
  position: relative;
  display: inline-flex;
}

/* Square inner corners, once the toggle is shown. */
.split-button:has(> .download-menu-toggle:not([hidden])) > a.button {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.download-menu-toggle {
  margin-inline-start: -1px;   /* one border between the two halves */
  padding-inline: 0.55rem;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  cursor: pointer;   /* a <button>: unlike the links of the other buttons, it has no pointer by default */
}

.download-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 10;
  min-width: 100%;
  padding: 0.25rem 0;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.download-menu-item {
  display: block;
  width: 100%;
  padding: 0.45rem 1rem;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
}

.download-menu-item:hover,
.download-menu-item:focus-visible {
  background: var(--accent-soft);
}

/* The SHA-256 of a file, opened from the menu of its download button. The dialog that asks before switching to the
   Director's Cut (.cut-dialog, at the end) looks the same. */
.checksum-dialog,
.cut-dialog {
  width: min(100% - 2rem, 36rem);
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}

.checksum-dialog::backdrop,
.cut-dialog::backdrop {
  background: rgb(0 0 0 / 0.45);
}

.checksum-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 1.25rem 1.5rem;
}

/* The name of the file, and the button that closes the dialog. */
.checksum-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  align-self: stretch;
}

.checksum-file {
  flex: 1;
  margin: 0;
  font-size: 1.1rem;
  overflow-wrap: anywhere;
}

.checksum-close {
  display: inline-flex;
  padding: 0.25rem;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.checksum-close:hover {
  background: var(--surface-sunken);
  color: var(--text);
}

.checksum-label {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* One click selects the whole hash, ready to copy. */
.checksum-value {
  max-width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  background: var(--surface-sunken);
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
  user-select: all;
}


/* The latest version, followed by the button to every release. */
.download-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin: -0.75rem 0 1.5rem;
}

.download-version {
  margin: 0;
  color: var(--text-muted);
}

/* The time of the commit of the latest release, after its version. */
.download-version time::before {
  content: "·";
  margin-inline: 0.4em;
}

/* The supported Linux distributions, each with a logo and a name, in aligned columns. */
.distro-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.6rem 1rem;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.distro-list li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
}

/* The logos keep their brand colors. Some of them, like the dark red of Debian, need a light
   background, also in the dark theme. The padding is inside the 32 px, so a logo is drawn at
   24 px, the size of the Simple Icons grid. */
.distro-list img {
  padding: 4px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 0 0 1px var(--border);
}

/* ---- Q&A ----------------------------------------------------------------- */

.faq {
  display: grid;
  gap: 0.75rem;
}

/* A question: a card whose summary is the question. A click on it shows the answer. */
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

/* Where a link (like the one of the footnote *2) has just jumped to. */
.faq-item:target {
  border-color: var(--accent);
}

.faq-item > summary {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius);
  font-weight: 600;
  line-height: 1.5;
  list-style: none;
  cursor: pointer;
}

.faq-item > summary::-webkit-details-marker {
  display: none;
}

.faq-item > summary:hover {
  color: var(--accent);
}

/* "Q" before the question, a small tag like the footnote marks. Screen readers skip it. */
.faq-item > summary::before {
  content: "Q";
  content: "Q" / "";
  flex: none;
  padding: 0.05em 0.45em;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}

/* A chevron at the end, pointing down. It turns up when the answer is shown. */
.faq-item > summary::after {
  content: "";
  flex: none;
  align-self: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-inline-start: auto;
  background: var(--text-muted);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s ease;
}

.faq-item[open] > summary::after {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 1.25rem 1.25rem;
}

/* No room under the last element of an answer. The elements after it that the current cut hides do not count. */
.faq-answer > :not([hidden]):not(:has(~ :not([hidden]))) {
  margin-bottom: 0;
}

/* Bullet lists, as in the features. :where() lets the lists of the LLM usage below drop the bullets. */
:where(.faq-answer ul) {
  margin: 0 0 1.1rem;
  padding-inline-start: 1.25rem;
  list-style: square;
}

:where(.faq-answer li)::marker {
  color: var(--accent);
}

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

/*
 * How much LLMs directly generated in each area of the project: one row per area. The bars start at the same place
 * in every row, so that they can be compared. Each bar is the share directly generated by LLMs, over a track of the
 * whole area. A range like 60–70% adds a lighter part, up to its maximum. The number is written after the bar, so
 * the bar itself is hidden from screen readers.
 */
.llm-usage {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.llm-area {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) minmax(5rem, 10rem) 4.5rem;
  grid-template-areas:
    "icon name  bar   share"
    "icon names names names"
    "icon note  note  note";
  align-items: center;
  column-gap: 0.75rem;
  padding-block: 0.9rem;
  border-top: 1px solid var(--border);
}

/* The logos keep their brand colors, so like the logos of the distributions, they are on a white tile, also in the
   dark theme. The Tango and Nome icons get the same tile, so that all the rows look alike. */
.llm-icon {
  grid-area: icon;
  align-self: start;
  padding: 7px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 0 0 1px var(--border);
}

.llm-icon img {
  display: block;
}

.llm-name {
  grid-area: name;
}

.llm-bar {
  grid-area: bar;
  position: relative;
  height: 0.625rem;
  border-radius: 0 4px 4px 0;
  background: color-mix(in srgb, var(--accent) 15%, var(--surface));
}

.llm-bar::before,
.llm-bar::after {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  border-radius: 0 4px 4px 0;
}

/* The lighter part of a range, up to its maximum. */
.llm-bar::before {
  width: var(--share-max, 0%);
  background: color-mix(in srgb, var(--accent) 45%, var(--surface));
}

/* The share. Its 2px shadow, in the color of the card, keeps a gap before the rest of the bar. */
.llm-bar::after {
  width: var(--share);
  background: var(--accent);
  box-shadow: 2px 0 0 var(--surface);
}

.llm-share {
  grid-area: share;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: end;
  white-space: nowrap;
}

/* An area without a share: a note in place of the bar and the number. */
.llm-share-text {
  grid-column: bar-start / share-end;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 400;
}

/* A share written as a formula (see main.js): no bar, and the formula gets a line of its own, under the name. */
.llm-area-formula {
  grid-template-areas:
    "icon name    name    name"
    "icon formula formula formula"
    "icon names   names   names"
    "icon note    note    note";
}

.llm-formula {
  grid-area: formula;
  min-width: 0;
  padding-block: 0.3rem;
  overflow-x: auto;
  overflow-y: hidden;
}

/* Until KaTeX has typeset the formula: its letters are in italic serif, as in math books. */
.llm-formula var {
  font-family: serif;
}

/* The LLMs used: small tags. */
.llm-names {
  grid-area: names;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.4rem;
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
}

.llm-names li {
  padding: 0 0.55rem;
  border-radius: 999px;
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.7;
}

.llm-area .llm-note {
  grid-area: note;
  margin: 0.5rem 0 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* On a phone, the bar goes under the name, and the LLMs and the note get the whole width. */
@media (max-width: 36rem) {
  .llm-area {
    grid-template-columns: 2.25rem minmax(0, 1fr) 4.5rem;
    grid-template-areas:
      "icon  name  name"
      "icon  bar   share"
      "names names names"
      "note  note  note";
  }

  .llm-area-formula {
    grid-template-areas:
      "icon    name    name"
      "formula formula formula"
      "names   names   names"
      "note    note    note";
  }
}

/* ---- Footer -------------------------------------------------------------- */

.site-footer {
  padding-block: 3rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2rem;
}

@media (max-width: 48rem) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

.site-footer p {
  margin: 0 0 0.5rem;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
  font-weight: 700;
}

.footer-heading {
  margin: 0 0 0.6rem;
  color: var(--text);
  font-size: 1rem;
}

.footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links li + li {
  margin-top: 0.35rem;
}

/* The sources and licenses of the icons, and the disclaimer at the very end of the page, span all the columns of the
   footer, each under a line. */
.footer-credits,
.footer-disclaimer {
  grid-column: 1 / -1;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

/* ---- The dialog before the Director's Cut ------------------------------- */

/* Its frame is the one of .checksum-dialog. The text is long: on a small screen, the dialog scrolls. */
.cut-dialog {
  width: min(100% - 2rem, 40rem);
}

.cut-dialog-body {
  padding: 1.25rem 1.5rem;
}

/* The browser focuses the title when the dialog opens (autofocus), so that the dialog shows its top, instead of
   scrolling down to a button. The title is not a control: no focus ring. */
.cut-dialog-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
}

.cut-dialog-title:focus {
  outline: none;
}

.cut-dialog-body > p,
.cut-dialog-body > .musing {
  margin: 0 0 0.75rem;
}

.cut-dialog-body > .cut-dialog-waiver {
  font-weight: 600;
}

/* The labels of the buttons are long: one button per row, each as wide as the dialog, the icon then the text. */
.cut-dialog-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

/* <button>s: unlike the links of the other buttons, they need the font of the page and a pointer. */
.cut-dialog-buttons .button {
  justify-content: flex-start;
  font-family: inherit;
  font-size: inherit;
  text-align: start;
  cursor: pointer;
}

/* The button that continues (.terms-continue), until the document is read to its end. */
.cut-dialog-buttons .button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* After a recommended choice: an arrow that keeps pointing at it, `--per-second` times each second. */
.pointing-arrow {
  display: inline-block;
  animation: point-left calc(1s / var(--per-second)) ease-in-out infinite;
}

@keyframes point-left {
  50% {
    transform: translateX(-0.5em);
  }
}

/* ---- The terms of the Director's Cut ------------------------------------ */

/* The title and the buttons stay in place; the terms scroll between them. On a short screen, where they would leave
   the terms too little room, the whole dialog scrolls instead (see .terms-text). Its scrolling never goes on into the
   page behind. */
.terms-dialog {
  height: min(100% - 2rem, 64rem);
}

.terms-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.terms-body > .terms-reminder {
  font-weight: 600;
}

/* The legal basis of the additional articles: a musing with a certificate, in small print like the reference line
   under the title of a law. Only the request to read them carefully stands out, as in contracts. */
.terms-body > .terms-basis {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.terms-basis strong {
  color: var(--text);
}

.terms-text {
  flex: 1;
  min-height: 15rem;   /* the room the terms keep on a short screen */
  overflow-y: auto;
  padding: 0 1rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface-sunken);
  font-size: 0.95rem;
}

/* The title and the date at the top of a document, as a contract has them: centered, over a double rule. */
.terms-head {
  margin: 0.75rem 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 3px double var(--border-strong);
  text-align: center;
}

.terms-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
}

.terms-revised {
  margin: 0.25rem 0 0;
  color: var(--text-muted);
}

.terms-unavailable {
  margin: 0.75rem 0 0;
}

/* An error message in a document, red as a compiler prints it. */
.terms-error {
  color: var(--error-text);
}

/* The titles of chapters and of sections, centered as in a law. An article has an <h4>, or an <h5> in a section. */
.terms-chapter > h3,
.terms-section > h4 {
  margin: 1.5rem 0 0.25rem;
  font-size: 1.05rem;
  text-align: center;
}

.terms-section > h4 {
  margin-top: 1.25rem;
  font-size: 1rem;
}

.terms-article > :is(h4, h5) {
  margin: 1rem 0 0.25rem;
  font-size: 1rem;
}

/* The additional articles are not written like a law: numbered clauses (1-2, 4-1-3), with the number in a column of
   its own, and left-aligned titles. */
.terms-outline > h3,
.terms-outline .terms-section > h4 {
  text-align: start;
}

.terms-number {
  margin-inline-end: 0.6em;
  font-weight: 700;
}

.terms-clauses {
  margin: 0.25rem 0 0.5rem;
  padding: 0;
  list-style: none;
}

.terms-clauses > li {
  display: grid;
  grid-template-columns: 4em minmax(0, 1fr);
  margin: 0.35rem 0;
}

/* The clauses of a clause, under its text. */
.terms-clauses .terms-clauses {
  margin-bottom: 0;
}

.terms-article p,
.terms-items {
  margin: 0 0 0.35rem;
}

/* Paragraphs are not numbered. In Taiwan Traditional they start two characters in, as Article 8 of the Central Regulation Standard
   Act of Taiwan says; in Japanese, one character in. */
:lang(zh-TW) .terms-article p {
  text-indent: 2em;
}

:lang(ja) .terms-article p {
  text-indent: 1em;
}

/* Subparagraphs are numbered as in a law, lined up with the start of the paragraphs: 1. in English, and CJK numerals in
   Taiwan Traditional (followed by an ideographic comma) and in Japanese (followed by an ideographic space, U+3000). */
@counter-style terms-ja {
  system: extends japanese-informal;
  suffix: "\3000";
}

.terms-items {
  padding-inline-start: 2em;
}

:lang(zh-TW) .terms-items {
  padding-inline-start: 4em;
  list-style: cjk-ideographic;
}

:lang(ja) .terms-items {
  padding-inline-start: 3em;
  list-style: terms-ja;
}

.terms-closing {
  margin: 1.5rem 0 0;
  font-weight: 600;
}

/* The end of the terms: once it is visible, the button that continues can be pressed (see main.js). */
.terms-end {
  height: 1px;
}

.terms-body > .terms-hint {
  margin: 0.75rem 0 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ---- Motion -------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .screenshot-button,
  .site-nav a::after,
  .llselect-trigger-arrow,
  .faq-item > summary::after {
    transition: none;
  }

  .screenshot-button:hover {
    transform: none;
  }

  .pointing-arrow {
    animation: none;
  }
}