/* SPDX-License-Identifier: MIT
   SPDX-FileCopyrightText: Copyright (c) 2022-2025 zichy
   SPDX-FileCopyrightText: Copyright (c) 2026- Siddharth Singh and Thursday contributors
*/

/* Custom properties
========================================
*/

:root {
  color-scheme: light dark;

  --f-sans: ui-sans-serif, sans-serif;
  --f-body: "Inter", sans-serif;
  --f-heading: var(--f-sans);
  --f-form: var(--f-sans);
  --f-code: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --f-size: clamp(1.6rem, 1.75vw, 2rem);
  --f-size-small: 0.85em;
  --f-size-large: 1.25em;
  --f-line: 1.5;

  --c-gray: #666;
  --c-red: #b30;
  --c-yellow: #fe9;
  --c-fg: #202020;
  --c-bg: #fcfcfc;
  --c-tag-bg: #dbdbdb;
  --c-accent: #0b57d0;
  --c-on-accent: #ffffff;
  --c-surface: #efefef;
  --c-mark-fg: #202020;

  --i-triangle: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"%3E%3Cpolygon fill="black" points="5 10 10 0 0 0"/%3E%3C/svg%3E');

  --w-body: 80ch;
}

/* Dark theme */

@media (prefers-color-scheme: dark) {
  :root {
    --c-gray: #999;
    --c-red: #f99;
    --c-yellow: #ff9;
    --c-fg: #f5f4f0;
    --c-bg: #101010;
    --c-tag-bg: #323232;
    --c-accent: #8ab4f8;
    --c-on-accent: #101010;
    --c-surface: #1e1e1e;
    --c-mark-fg: #101010;

    --i-triangle: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"%3E%3Cpolygon fill="white" points="5 10 10 0 0 0"/%3E%3C/svg%3E');
  }
}

/* Globals
========================================
*/

/* Box sizing */

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

/* Text rendering */

* {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Interaction */

::selection {
  background: var(--c-accent);
  color: var(--c-on-accent);
  text-shadow: none;
}

*:focus {
  outline: 2px solid var(--c-accent);
  outline-offset: 0.25rem;
}

/* Font size & Scrolling */

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  scroll-padding-top: 2rem;
}

/* Backdrop */

::backdrop {
  background-color: rgba(255, 255, 255, 0.6);
}

@media (prefers-color-scheme: dark) {
  ::backdrop {
    background-color: rgba(0, 0, 0, 0.6);
  }
}

/* Hidden elements */

[hidden] {
  display: none;
}

/* Print spacing */

@page {
  margin: 15mm 20mm;
}

/* Body
========================================
*/

/* Colors & Typography */

body {
  background-color: var(--c-bg);
  color: var(--c-fg);
  font-size: var(--f-size);
  font-family: var(--f-body);
  line-height: var(--f-line);
}

/* Body sizing */

@media screen {
  body {
    max-width: var(--w-body, 100%);
    min-width: 320px;
    padding: 2rem;
    margin: 0 auto;
    overflow-x: hidden;
    overflow-y: scroll;
  }
}

/* Print colors */

@media print {
  body {
    background-color: white;
    color: black;
  }
}

/* Links
========================================
*/

a:any-link {
  color: var(--c-accent);
  text-decoration: underline;
  text-decoration-thickness: 0.125em;
}

a:any-link:hover {
  background-color: var(--c-accent);
  color: var(--c-on-accent);
  text-decoration-line: none;
}

@media print {
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: var(--f-size-small);
    word-break: break-all;
  }
}

/* Media
========================================
*/

/* Reset */

:where(iframe, img, svg, canvas, audio, video) {
  display: block;
  max-width: 100%;
}

@media print {
  :where(audio, video) {
    display: none;
  }
}

figure {
  margin-inline: 0;
  break-inside: avoid;
}

figure img {
  margin-inline: auto;
}

@media (min-aspect-ratio: 1/1) {
  figure img {
    max-height: 80vh;
    width: auto;
  }
}

@media (max-aspect-ratio: 1/1) {
  figure img {
    max-width: 90%;
    height: auto;
  }
}

/* Image */

img {
  height: auto;
  position: relative;
}

img::before {
  content: "";
  background-color: var(--c-surface);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

@media screen {
  picture img {
    width: 100%;
  }
}

/* Video */

video {
  width: 100%;
  height: auto;
}

/* Iframe */

iframe {
  border-style: none;
}

/* Headings
========================================
*/

:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--f-heading);
  line-height: calc(var(--f-line) / 1.25);
  hyphens: auto;
}

:where(h3, h5) {
  color: var(--c-gray);
}

:where(h4, h5, h6) {
  text-transform: uppercase;
}

:where(h2, h3, h4, h5, h6):target {
  background-color: var(--c-yellow);
  color: var(--c-mark-fg);
}

/* Lists
========================================
*/

:where(ul, ol) {
  padding-inline-start: 1em;
}

ul {
  list-style-type: disc;
}

li::marker {
  color: var(--c-gray);
}

li p {
  margin: 0;
}

/* Description */

dt {
  font-style: italic;
}

/* Navigation */

nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  list-style-type: none;
  padding: 0;
}

@media print {
  nav {
    display: none;
  }
}

/* Inline elements
========================================
*/

/* Bold text */

:where(b, strong) {
  font-weight: bolder;
}

/* Small text */

small {
  font-size: var(--f-size-small);
}

/* Mark */

mark {
  background-color: var(--c-yellow);
  color: var(--c-mark-fg);
}

/* Abbreviation */

abbr[title] {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  cursor: help;
}

a abbr[title] {
  text-decoration: none;
}

/* Subscript & Superscript */

:where(sub, sup) {
  line-height: 0;
}

/* Quote */

q {
  font-style: italic;
  quotes: none;
}

/* Keyboard input */

kbd {
  background-color: var(--c-surface);
  font-size: var(--f-size-small);
  font-family: var(--f-sans);
  font-weight: bold;
  padding: 0.2em 0.4em;
  border: 1px solid var(--c-gray);
  border-radius: 0.5rem;
}

/* Ruby annotation
========================================
*/

rt {
  color: var(--c-gray);
  font-family: var(--f-sans);
  letter-spacing: -0.05em;
  padding: 0 0.25em;
}

/* Horizontal rule
========================================
*/

hr {
  height: 0;
  margin: 1rem 0;
  border: 0;
  border-top: 2px solid var(--c-gray);
}

/* Blockquote
========================================
*/

blockquote {
  font-size: inherit;
  font-style: italic;
  line-height: inherit;
  margin: 0;
  border-inline-start: 4px solid var(--c-gray);
  background-color: var(--c-tag-bg);
  padding: 1rem 1.5rem;
}

blockquote > *:first-child {
  margin-block-start: 0;
}

blockquote > *:last-child {
  margin-block-end: 0;
}

/* Captions
========================================
*/

:where(caption, figcaption) {
  color: var(--c-gray);
  font-family: var(--f-heading);
  font-size: var(--f-size-small);
  font-style: italic;
  margin-block-start: 0.5rem;
}

figcaption {
  font-size: 1.6rem;
  text-align: center;
}

caption {
  text-align: left;
  caption-side: bottom;
}

[dir="rtl" i] caption {
  text-align: right;
}

/* Code
========================================
*/

:where(pre, code, samp, var) {
  background-color: var(--c-surface);
}

:where(code, samp, var) {
  font-size: var(--f-size-small);
  font-family: var(--f-code);
  padding: 0.2em 0.4em;
}

pre {
  font-size: var(--f-size-small);
  font-family: var(--f-code);
  padding: 2rem;
}

@media screen {
  pre {
    overflow-x: scroll;
  }
}

pre code {
  background-color: transparent;
  display: block;
  white-space: pre-wrap;
  padding: 0;
}

/* Details
========================================
*/

details {
  background-color: var(--c-surface);
  padding: 2rem;
  margin: 1em 0;
  border-radius: 0.5rem;
}

details > *:nth-child(2) {
  margin-block-start: 0;
}

details > *:last-child {
  margin-block-end: 0;
}

summary {
  color: var(--c-accent);
  font-family: var(--f-heading);
  font-weight: bold;
  cursor: pointer;
}

summary:hover {
  text-decoration: underline;
}

details[open] summary {
  margin-block-end: 2rem;
}

/* Aside
========================================
*/

aside {
  color: var(--c-gray);
}

@media (min-width: 769px) {
  aside {
    font-size: var(--f-size-small);
    float: right;
    width: calc(var(--w-body) / 2.5);
    padding-block-end: 2rem;
    padding-inline-start: 4rem;
  }

  aside > *:first-child {
    margin-block-start: 0;
  }

  aside > *:last-child {
    margin-block-end: 0;
  }
}

/* Table
========================================
*/

table {
  width: 100%;
  margin: 1em 0;
  border-collapse: collapse;
  border-spacing: 0;
  break-inside: avoid;
}

@media screen and (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
  }
}

thead {
  border-bottom: 2px solid var(--c-gray);
}

tbody tr:nth-child(odd) {
  background-color: var(--c-surface);
}

tfoot {
  border-top: 2px solid var(--c-gray);
}

:where(th, td) {
  padding: 0.5rem 1rem;
}

@media (max-width: 768px) {
  :where(th, td) {
    min-width: 10rem;
  }
}

th {
  font-family: var(--f-heading);
  text-align: left;
  vertical-align: bottom;
}

[dir="rtl" i] th {
  text-align: right;
}

/* Forms & Inputs
========================================
*/

/* Reset */

:where(input, textarea, select, button, progress) {
  -webkit-appearance: none;
  background-color: transparent;
  break-inside: avoid;
}

:where(input, textarea, select, button) {
  font-family: var(--f-form);
  font-size: 1em;
  border-radius: 0.5rem;
}

:where(
  input:not([type="button" i]):not([type="submit" i]):not([type="reset" i]):not(
      [type="checkbox" i]
    ):not([type="radio" i]):not([type="image" i]),
  textarea,
  select
) {
  color: var(--c-fg);
  font-size: var(--f-size-small);
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid var(--c-gray);
}

/* Placeholder */

::placeholder {
  color: var(--c-gray);
}

/* Fieldset */

fieldset {
  padding: 2rem;
  border: 2px solid var(--c-gray);
  border-radius: 0.5rem;
  break-inside: avoid;
}

/* Label & Legend */

:where(legend, label) {
  font-family: var(--f-form);
  font-weight: bold;
  display: block;
}

legend {
  padding: 0 1rem;
}

:where(legend, label) small {
  color: var(--c-gray);
  font-weight: normal;
}

/* Textarea */

textarea {
  resize: vertical;
}

/* Checkbox & Radio input */

label:has([type="checkbox" i], [type="radio" i]) {
  font-family: var(--f-form);
  font-size: var(--f-size-small);
  font-weight: normal;
  display: grid;
  grid-template-columns: 1.25em 1fr;
  column-gap: 0.5em;
  padding-block-end: 0;
}

label:has([type="checkbox" i][disabled], [type="radio" i][disabled]) {
  color: var(--c-gray);
}

:where([type="checkbox" i], [type="radio" i]) {
  width: 1.25em;
  height: 1.25em;
  position: relative;
  margin: 0.2rem 0 0;
  border: 2px solid var(--c-accent);
  cursor: pointer;
}

[type="radio" i] {
  border-radius: 50%;
}

:where([type="checkbox" i], [type="radio" i]):checked {
  background-color: var(--c-accent);
}

[type="checkbox" i]:checked::after {
  content: "\2713";
  color: var(--c-on-accent);
  font-family: var(--f-form);
  font-weight: bold;
  line-height: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Color input */

:where(
  input:not(
    [type="checkbox" i],
    [type="radio" i],
    [type="range" i],
    [type="color" i],
    [type="file" i],
    [type="image" i],
    [type="button" i],
    [type="submit" i],
    [type="reset" i]
  ),
  textarea,
  select
):focus {
  border-color: var(--c-accent);
  outline: none;
}

[type="color" i] {
  height: 4rem;
  padding: 0.5rem;
  cursor: pointer;
}

::-webkit-color-swatch-wrapper {
  padding: 0;
}

::-webkit-color-swatch {
  border: 0;
}

::-moz-color-swatch {
  border: 0;
}

/* Range input */

[type="range" i] {
  margin: 1.25rem 0 0;
  padding: 0;
  border: 0;
}

[type="range" i]:focus {
  outline: none;
}

::-webkit-slider-runnable-track {
  background-color: var(--c-accent);
  height: 4px;
  border-radius: 0.5rem;
}

[disabled]::-webkit-slider-runnable-track {
  background-color: var(--c-gray);
}

::-moz-range-track {
  background-color: var(--c-accent);
  height: 4px;
  border-radius: 0.5rem;
}

[disabled]::-moz-range-track {
  background-color: var(--c-gray);
}

::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--c-bg);
  height: 2rem;
  width: 2rem;
  margin-block-start: calc(-1rem + 2px);
  border: 2px solid var(--c-accent);
  border-radius: 50%;
  cursor: ew-resize;
}

[disabled]::-webkit-slider-thumb {
  border-color: var(--c-gray);
}

[type="range" i]:focus::-webkit-slider-thumb {
  outline: 2px solid var(--c-accent);
  outline-offset: 0.25rem;
}

::-moz-range-thumb {
  appearance: none;
  background-color: var(--c-bg);
  height: 2rem;
  width: 2rem;
  margin-block-start: calc(-1rem + 2px);
  border: 2px solid var(--c-accent);
  border-radius: 50%;
  cursor: ew-resize;
}

[disabled]::-moz-range-thumb {
  border-color: var(--c-gray);
}

[type="range" i]:focus::-moz-range-thumb {
  outline: 2px solid var(--c-accent);
  outline-offset: 0.25rem;
}

/* Select */

select {
  background: var(--c-bg) var(--i-triangle) no-repeat calc(100% - 1rem) center /
    1.5rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-inline-end: 3.5rem;
  overflow: hidden;
  cursor: pointer;
}

[dir="rtl" i] select {
  background-position: 1rem center;
  padding-inline: 3.5rem 1rem;
}

select[multiple] {
  background-image: none;
  padding-inline-end: 1rem;
}

/* Buttons */

:where(button, [type="button" i], [type="submit" i], [type="reset" i]) {
  font-size: var(--f-size-small);
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  line-height: 1;
  display: inline-block;
  min-width: 5rem;
  padding: 0.2em 0.4em;
  border: 2px solid var(--c-accent);
  -webkit-user-select: text;
  user-select: text;
  cursor: pointer;
  touch-action: manipulation;
}

:where(
  button:not([disabled]),
  [type="button" i]:not([disabled]),
  [type="submit" i]:not([disabled]),
  [type="reset" i]:not([disabled])
):hover {
  text-decoration: underline;
}

@media screen {
  :where(button, [type="button" i], [type="submit" i], [type="reset" i]) {
    background-color: var(--c-accent);
    color: var(--c-on-accent);
  }

  :where(
    button[disabled],
    [type="button" i][disabled],
    [type="submit" i][disabled],
    [type="reset" i][disabled]
  ) {
    background-color: var(--c-gray);
    color: currentColor;
  }
}

form :where(button, [type="button" i], [type="submit" i], [type="reset" i]) {
  padding: 1rem 1.5rem;
}

/* Meter & Progress */

:where(meter, progress) {
  width: 100%;
  height: 3rem;
  border: 2px solid var(--c-gray);
}

label + :where(meter, progress) {
  margin-block-start: 0.5rem;
}

meter {
  -webkit-appearance: none;
  appearance: none;
  background: var(--c-surface);
  display: block;
  margin-block-end: 1em;
  border: 2px solid var(--c-gray);
}

::-webkit-meter-bar {
  background: var(--c-surface);
  height: 100%;
  border: 0;
  border-radius: 0;
}

::-webkit-meter-optimum-value {
  background: var(--c-accent);
}

::-webkit-meter-suboptimum-value {
  background: var(--c-yellow);
}

::-webkit-meter-even-less-good-value {
  background: var(--c-red);
}

::-moz-meter-bar {
  background: var(--c-accent);
}

::-webkit-progress-bar {
  background-color: var(--c-bg);
}

::-moz-progress-bar {
  background-color: var(--c-gray);
}

::-webkit-progress-value {
  background-color: var(--c-gray);
}

/* Form spacing */

form label:not(:first-of-type) {
  margin-block-start: 3rem;
}

form label + :where(input, textarea, select) {
  margin-block-start: 0.5rem;
}

form fieldset {
  margin: 3rem 0;
}

fieldset label:not(:first-of-type) {
  margin-block-start: 2rem;
}

form p[id]:has(+ input) {
  margin-block: 0 0.5rem;
}

/* Disabled state */

[disabled] {
  border-color: var(--c-gray);
  cursor: not-allowed;
}

/* Error state */

[aria-invalid] {
  border-color: var(--c-red) !important;
}

[aria-invalid]:focus {
  outline-color: var(--c-red);
}

p[id]:has(+ [aria-invalid]) {
  color: var(--c-red);
}

/* Dialog
========================================
*/

dialog[open] {
  background-color: var(--c-bg);
  color: currentColor;
  display: block;
  max-width: var(--w-body, 100%);
  min-width: calc(var(--w-body) / 2);
  padding: 2rem;
  border: 2px solid var(--c-gray);
  border-radius: 0.5rem;
}

body:has(dialog[open]) {
  overflow: hidden;
}

dialog:not([open]) {
  display: none;
}

dialog > *:first-child {
  margin-block-start: 0;
}

dialog > *:last-child {
  margin-block-end: 0;
}

dialog > footer {
  text-align: end;
}

/* Opinionated layout
========================================
*/

@media screen {
  body > header {
    margin-block-end: 2em;
  }

  main > :where(section, article),
  body > footer {
    margin-block-start: 4rem;
    clear: both;
  }

  body > footer {
    margin-block-start: 4rem;
    font-size: var(--f-size);
  }

  footer p {
    text-align: center;
  }
}


/* Utilities
========================================
*/

.muted {
  font-size: 1.4rem;
  color: var(--c-gray);
  font-weight: bold;
}

a.muted {
  color: var(--c-gray);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: 100%;
}

.tag {
  flex: none;
  background-color: var(--c-tag-bg);
  border-radius: 0.4rem;
  padding: 0.2rem;
}

.tag::before {
  content: "#";
}

a.tag {
  text-decoration: none;
}

a.tag:focus:not(:focus-visible) {
  outline: none;
}

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

.surface {
  background-color: var(--c-surface);
  border-radius: 0.5rem;
  padding: 2rem;
}

.surface > :first-child,
.content > :first-child {
  margin-block-start: 0;
}

.surface > :last-child,
.content > :last-child {
  margin-block-end: 0;
}

.table-wrapper {
  overflow-x: auto;
  max-width: 100%;
}

.table-wrapper table {
  display: table;
  table-layout: fixed;
  width: auto;
  margin-inline: auto;
}

.table-wrapper :where(th, td) {
  width: 20ch;
  overflow-wrap: anywhere;
}

.outlined {
  background: none;
  color: inherit;
  border: 2px solid currentColor;
}

.field-row {
  display: grid;
  grid-template-columns: 10ch 1fr;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  text-align: left;
}

.error {
  color: var(--c-red);
}

.spinner {
  width: 2rem;
  height: 2rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}