:root {
  /* https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/theme.css */
  color-scheme: light dark;
  --container-3xl: 48rem;
  --radius-xl: 0.75rem;

  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:
    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

  --text-xs: 0.75rem;
  --text-xs--line-height: calc(1 / 0.75);
  --text-sm: 0.875rem;
  --text-sm--line-height: calc(1.25 / 0.875);
  --text-base: 1rem;
  --text-base--line-height: calc(1.5 / 1);
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.75 / 1.25);
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2 / 1.5);
  --text-3xl: 1.875rem;
  --text-3xl--line-height: calc(2.25 / 1.875);
  --text-4xl: 2.25rem;
  --text-4xl--line-height: calc(2.5 / 2.25);

  --color-neutral-50: oklch(98.5% 0 none);
  --color-neutral-100: oklch(97% 0 none);
  --color-neutral-200: oklch(92.2% 0 none);
  --color-neutral-300: oklch(87% 0 none);
  --color-neutral-400: oklch(70.8% 0 none);
  --color-neutral-500: oklch(55.6% 0 none);
  --color-neutral-600: oklch(43.9% 0 none);
  --color-neutral-700: oklch(37.1% 0 none);
  --color-neutral-800: oklch(26.9% 0 none);
  --color-neutral-900: oklch(20.5% 0 none);
  --color-neutral-950: oklch(14.5% 0 none);
  --color-indigo-300: oklch(78.5% 0.115 274.713);
  --color-blue-400: oklch(70.7% 0.165 254.624);
  --color-blue-500: oklch(62.3% 0.214 259.815);
  --color-blue-600: oklch(54.6% 0.245 262.881);
  --color-blue-700: oklch(48.8% 0.243 264.376);
  --color-blue-800: oklch(42.4% 0.199 265.638);
  --color-blue-900: oklch(37.9% 0.146 265.522);
  --color-sky-100: oklch(95.1% 0.026 236.824);
  --color-sky-400: oklch(74.6% 0.16 232.661);
  --color-sky-700: oklch(50% 0.134 242.749);
  --color-sky-800: oklch(44.3% 0.11 240.79);
  --color-green-100: oklch(96.2% 0.044 156.743);
  --color-green-400: oklch(79.2% 0.209 151.711);
  --color-yellow-400: oklch(85.2% 0.199 91.936);
  --color-yellow-700: oklch(55.4% 0.135 66.442);
  --color-yellow-800: oklch(47.6% 0.114 61.907);
  --color-green-700: oklch(52.7% 0.154 150.069);
  --color-green-800: oklch(44.8% 0.119 151.328);
  --color-purple-300: oklch(82.7% 0.119 306.383);
  --color-purple-900: oklch(38.1% 0.176 304.987);
  --color-rose-300: oklch(81% 0.117 11.638);
  --color-red-100: oklch(93.6% 0.032 17.717);
  --color-red-400: oklch(70.4% 0.191 22.216);
  --color-red-500: oklch(63.7% 0.237 25.331);
  --color-red-600: oklch(57.7% 0.245 27.325);
  --color-red-700: oklch(50.5% 0.213 27.518);
  --color-red-800: oklch(44.4% 0.177 26.899);
  --color-red-900: oklch(39.6% 0.141 25.723);
  --color-orange-100: oklch(95.4% 0.038 75.164);

  --gutter: 1.1rem;
  --canvas-color: light-dark(white, var(--color-neutral-900));
  --text-color: light-dark(var(--color-neutral-900), var(--color-neutral-50));

  --muted-text-color: light-dark(
    var(--color-neutral-500),
    var(--color-neutral-400)
  );

  --panel-background: light-dark(
    var(--color-neutral-100),
    var(--color-neutral-800)
  );
  --divider-color: light-dark(rgb(0 0 0 / 9%), rgb(255 255 255 / 9%));
  --divider-color-strong: light-dark(rgb(0 0 0 / 30%), rgb(255 255 255 / 30%));

  --button-tint: light-dark(rgb(0 0 0 / 10%), rgb(255 255 255 / 10%));
  --button-tint-hover: light-dark(rgb(0 0 0 / 16%), rgb(255 255 255 / 16%));
  --button-tint-active: light-dark(rgb(0 0 0 / 22%), rgb(255 255 255 / 22%));

  --link-color: light-dark(var(--color-blue-700), var(--color-indigo-300));
  --link-active-color: light-dark(var(--color-red-600), var(--color-rose-300));
  --link-visited-color: light-dark(
    var(--color-purple-900),
    var(--color-purple-300)
  );
}

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

@keyframes flash-in {
  from {
    opacity: 0;
    transform: translateY(-0.5em);
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
  color: var(--text-color);
  background: var(--canvas-color);
  line-height: var(--text-base--line-height);
}

h1,
h2 {
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 {
  margin: 0 0 0.6em;
  font-size: var(--text-4xl);
  line-height: var(--text-4xl--line-height);
}

h2 {
  margin-top: 1.7em;
  margin-bottom: 0.6em;
  font-size: var(--text-3xl);
  line-height: var(--text-3xl--line-height);
}

p {
  text-wrap: pretty;
}

input:not([type="checkbox"], [type="radio"], [type="hidden"]),
select {
  appearance: none;
  border: 1px solid var(--divider-color-strong);
  border-radius: var(--radius-xl);
  padding: 0.4em 1.1em;
  font: inherit;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: inherit;
  background-color: var(--canvas-color);
  &::placeholder {
    color: var(--muted-text-color);
    opacity: 1;
  }
  &:focus-visible {
    outline: 2px solid var(--color-blue-500);
    outline-offset: 1px;
  }
  &:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    -webkit-text-fill-color: currentColor;
  }
  &:invalid {
    box-shadow: none;
  }
  &:user-invalid {
    border-color: var(--color-red-600);
  }
  &:autofill {
    box-shadow: 0 0 0 1000px var(--canvas-color) inset;
    -webkit-text-fill-color: var(--text-color);
  }
}

select {
  padding-right: 2.2em;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 1.25em) center,
    calc(100% - 0.9em) center;
  background-size: 0.35em 0.35em;
  background-repeat: no-repeat;
}

textarea {
  font: inherit;
  color: inherit;
}

input#username {
  width: 15em;
}

a {
  color: var(--link-color);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in oklab, currentColor 50%, transparent);
  &:visited {
    color: var(--link-visited-color);
  }
  &:active {
    color: var(--link-active-color);
  }
}

noscript {
  color: var(--color-red-700);
}

body.page {
  margin: 0 var(--gutter);
  main {
    max-width: var(--container-3xl);
  }
}

form.basic {
  display: flex;
  flex-direction: column;
  align-items: start;
  label {
    margin-bottom: 0.5em;
  }
  button {
    margin-top: 1.5em;
  }
}

.panel {
  width: fit-content;
  border-radius: var(--radius-xl);
  padding: 1.4em;
  background: var(--panel-background);
}

.alert {
  display: flex;
  width: fit-content;
  border-radius: var(--radius-xl);
  color: light-dark(white, var(--color-neutral-100));
  padding: 0.9em 1.1em;
  gap: 0.9em;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  &::before {
    flex-shrink: 0;
    display: inline-flex;
    width: 1.5em;
    height: 1.5em;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.2);
    font-size: 0.9em;
    font-weight: 700;
  }
  &.success {
    background: light-dark(var(--color-green-700), var(--color-green-800));
    &::before {
      content: "✓";
    }
  }

  &.info {
    background: light-dark(var(--color-sky-700), var(--color-sky-800));
    &::before {
      content: "i";
      font-style: italic;
    }
  }

  &.warning {
    background: light-dark(var(--color-yellow-700), var(--color-yellow-800));
    &::before {
      content: "!";
    }
  }

  &.error {
    background: light-dark(var(--color-red-700), var(--color-red-800));
    &::before {
      content: "✕";
    }
  }
}

table.basic {
  margin-top: 2em;
  border-collapse: collapse;
  font-size: var(--text-sm);
  tbody {
    color: var(--muted-text-color);
  }
  th {
    font-weight: 500;
    vertical-align: top;
    text-align: initial;
    width: 1%;
    min-width: 100%;
  }
  th,
  td {
    padding: 0.8em;
    &:has(form:only-child) {
      padding-block: 0;
      vertical-align: middle;
    }
    &:is(thead &) {
      padding-top: 0;
      border-bottom: 1px solid var(--divider-color-strong);
      line-height: var(--text-sm--line-height);
    }
    &:is(tbody tr:not(:last-child) &) {
      border-bottom: 1px solid var(--divider-color);
    }
  }
}

dialog.basic {
  width: fit-content;
  min-width: min(20em, calc(100% - 2 * var(--gutter)));
  max-width: min(30em, calc(100% - 2 * var(--gutter)));
  border: 1px solid light-dark(transparent, var(--color-neutral-700));
  padding: 1.4em;
  gap: 1em;
  box-shadow: var(--shadow-2xl);
  border-radius: var(--radius-xl);
  color: var(--text-color);
  background: var(--canvas-color);
  &::backdrop {
    background: rgb(0 0 0 / 0.5);
  }
  h2 {
    margin: 0 0 1em;
    font-size: calc(1em + 1px);
    font-weight: 700;
  }
  .actions {
    &,
    & > * {
      display: flex;
      flex-direction: column;
    }
    margin-top: 2em;
    gap: 0.7em;

    > form {
      display: contents;
    }

    &.primary {
      flex-direction: row;
      justify-content: space-between;

      &:has(> :only-child) {
        justify-content: flex-start;
      }

      &.balanced {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        &:has(> :only-child) {
          grid-auto-columns: max-content;
        }
      }
    }

    &.secondary {
      flex-direction: row;
      justify-content: flex-end;
    }
  }
}

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  min-width: 5em;
  border-radius: 999px;
  padding: 0.4em 1.1em;
  font: inherit;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  cursor: pointer;
  border: 1px solid transparent;
  color: var(--button-color, var(--text-color));
  background: var(--button-background, var(--button-tint));
  &:hover {
    background: var(--button-background-hover, var(--button-tint-hover));
  }
  &:active {
    background: var(--button-background-active, var(--button-tint-active));
  }
  &:focus-visible {
    outline: 2px solid var(--color-blue-500);
    outline-offset: 1px;
  }

  &:disabled {
    cursor: not-allowed;
    opacity: 0.4;
    -webkit-text-fill-color: currentColor;
    &:hover,
    &:active {
      background: var(--button-background, var(--button-tint));
    }
  }

  &.big {
    padding: 0.5em 1.1em;
    font-size: 1em;
  }

  &.small {
    padding: 0.32em 1.1em;
    font-size: var(--text-xs);
  }

  &[type="submit"],
  &.primary {
    --button-color: white;
    --button-background: light-dark(
      var(--color-blue-700),
      var(--color-blue-600)
    );
    --button-background-hover: light-dark(
      var(--color-blue-800),
      var(--color-blue-500)
    );
    --button-background-active: light-dark(
      var(--color-blue-900),
      var(--color-blue-400)
    );
  }

  &.danger {
    --button-color: light-dark(var(--color-red-700), var(--color-red-400));
    --button-background: initial;
    --button-background-hover: initial;
    --button-background-active: initial;
  }

  &.danger-solid {
    --button-color: light-dark(var(--color-red-700), var(--color-rose-300));
    --button-background: light-dark(
      var(--color-red-100),
      color-mix(in oklab, var(--color-red-900) 55%, transparent)
    );
    --button-background-hover: light-dark(
      color-mix(in oklab, var(--color-red-100) 65%, var(--color-red-400)),
      color-mix(in oklab, var(--color-red-900) 80%, transparent)
    );
    --button-background-active: light-dark(
      color-mix(in oklab, var(--color-red-100) 40%, var(--color-red-400)),
      color-mix(in oklab, var(--color-red-900) 100%, transparent)
    );
  }

  &.secondary {
    --button-color: initial;
    --button-background: initial;
    --button-background-hover: initial;
    --button-background-active: initial;
  }

  &.close {
    all: unset;
    position: relative;
    top: -1px;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.15s;
    &:hover {
      opacity: 1;
    }
    font-size: 1.4rem;
    cursor: pointer;
  }

  &.loading {
    gap: 0.55em;
    &::after {
      content: "";
      display: inline-block;
      width: 0.7em;
      height: 0.7em;
      border: 2px solid color-mix(in srgb, currentColor 20%, transparent);
      border-top-color: color-mix(in srgb, currentColor 90%, transparent);
      border-radius: 50%;
      animation: spin 0.6s linear infinite;
    }
  }
}

#flash {
  max-width: min(50em, calc(100% - 2 * var(--gutter)));
  margin: var(--gutter) auto;
  border: none;
  box-shadow: var(--shadow-md);
  animation: flash-in 0.2s ease-out;
  &:not(:open) {
    display: none;
  }
}

#session-expiry-warning {
  width: auto;
  margin: 0 calc(var(--gutter) * -1) 1rem;
  padding: 0.9em var(--gutter);
  justify-content: center;
}

#header {
  display: flex;
  min-height: 4em;
  margin: 0 calc(var(--gutter) * -1) 2.4em;
  padding: 0 var(--gutter);
  align-items: center;
  border-bottom: 1px solid
    light-dark(var(--color-neutral-200), var(--color-neutral-700));
  font-weight: 500;
  .title {
    display: flex;
    align-items: center;
    margin: 0;
    gap: 0.55em;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    img {
      display: none;
    }
  }
  .actions {
    display: flex;
    margin-left: auto;
    align-items: center;
    gap: 1.1em;
  }
}