@charset "UTF-8";

:root {
  --primary: 256deg;
  --background: oklch(100% 0% 0deg);
  --text: oklch(0% 0% 0deg);
  --card: oklch(96.875% 3.125% var(--primary));
  --card-hover: oklch(95.375% 3.125% var(--primary));
  --card-shadow: oklch(60% 0% 0deg);
  --status-online: oklch(60% 50% 142deg);
  --status-unknown: oklch(60% 50% 256deg);
  --status-offline: oklch(60% 50% 20deg);
  --tag: oklch(90.625% 9.375% var(--primary));
  --tag-text: oklch(25% 25% var(--primary));
  --tag-hover: oklch(87.625% 9.375% var(--primary));
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --background: oklch(18.75% 3.125% var(--primary));
    --text: oklch(100% 0% 0deg);
    --card: oklch(28.125% 6.25% var(--primary));
    --card-hover: oklch(29.675% 6.25% var(--primary));
    --card-shadow: oklch(0% 0% 0deg / 0%);
    --tag: oklch(25% 25% var(--primary));
    --tag-text: oklch(75% 9.375% var(--primary));
    --tag-hover: oklch(28% 25% var(--primary));
  }
}

:root {
  --size-xs: 4px;
  --size-s: 8px;
  --size-m: 16px;
  --size-l: 32px;
}

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

:root {
  height: 100%;
  font-family: system-ui, ui-sans-serif, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background-color: var(--background);
  color-scheme: light dark;
}

body {
  display: grid;
  gap: var(--size-l);
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr auto;
  min-height: 100%;
  padding: var(--size-l);
}

body > header {
  display: flex;
  gap: var(--size-s);
}

body > header > img {
  align-self: center;
  height: 2rem;
  aspect-ratio: 1/1;
}

body > main {
  display: grid;
  gap: var(--size-m);
  grid-template-columns: 1fr;
}

@media (min-width: 840px) {
  body > main {
    grid-template-columns: repeat(auto-fill, minmax(372px, 1fr));
  }
}

body > main > section {
  display: flex;
  gap: var(--size-s);
  flex-direction: column;
}

body > main > section > div {
  display: flex;
  gap: var(--size-s);
  flex-direction: column;
}

body > footer {
  font-size: 0.875em;
  line-height: 1.25;
  display: grid;
  gap: var(--size-m);
  grid-template-columns: 1fr;
}

@media (min-width: 840px) {
  body > footer {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "meta legend version";
    align-items: center;
  }

  body > footer > .meta {
    grid-area: meta;
    justify-self: start;
  }

  body > footer > .legend {
    grid-area: legend;
    justify-self: center;
  }

  body > footer > .version {
    grid-area: version;
    justify-self: end;
  }
}

a,
h1,
h2,
h3,
small {
  text-decoration: none;
  color: inherit;
}

h1,
h2,
h3,
strong {
  font-weight: 700;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.25rem;
}

small {
  font-size: 0.8rem;
  opacity: 0.8;
}

article {
  --color-bg: var(--card);
  padding: var(--size-s);
  border-radius: var(--size-m);
  background-color: var(--color-bg);
  overflow: hidden;
  box-shadow: 0 0 var(--size-s) calc(var(--size-s) / -2) var(--card-shadow);
  line-height: 1.25;
  display: grid;
  gap: var(--size-s);
  grid-template-columns: 112px 1fr;
  grid-template-rows: min-content 1fr;
  grid-template-areas: "image header" "image tags";
}

article > header {
  grid-area: header;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

article > img,
article > span {
  grid-area: image;
  border-radius: max(var(--size-m) - var(--size-s), var(--size-xs));
  width: 100%;
  aspect-ratio: 1/1;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

article > span {
  background-color: var(--background);
  opacity: 0.5;
}

article > ul {
  grid-area: tags;
}

a:hover > article {
  --color-bg: var(--card-hover);
}

a:has(> article) {
  display: block;
  border-radius: var(--size-m);
}

ol,
ul {
  list-style: none;
  display: flex;
  gap: var(--size-xs);
  flex-direction: column;
  justify-content: flex-start;
  align-items: baseline;
  align-content: flex-start;
}

nav > ul {
  --color: var(--text);
  gap: var(--size-s);
}

nav > ul label {
  cursor: pointer;
  user-select: none;
  color: var(--color);
}

nav > ul label > input[type="checkbox"] {
  appearance: none;
  height: 0.875em;
  aspect-ratio: 1/1;
  margin-inline-end: 0.5em;
  border: 2px solid var(--color);
  border-radius: 30%;
  vertical-align: baseline;
}

nav > ul label > input[type="checkbox"]:checked {
  background-color: var(--color);
}

.tags {
  --color: var(--tag-text);
  --color-bg: var(--tag);
  flex-direction: row;
  flex-wrap: wrap;
}

.tags > li:not(:has(> label)),
.tags > li > label {
  display: inline-block;
  font-weight: 700;
  padding: 0.125em 0.5em;
  color: var(--color);
  background-color: var(--color-bg);
  border-radius: 0.875em;
}

.tags > li > label:hover {
  --color-bg: var(--tag-hover);
}

.tags > li:not(:has(> label)) {
  font-size: 0.875em;
}

.status::before,
.status.unknown::before {
  content: "";
  font-size: inherit;
  box-sizing: inherit;
  display: inline-block;
  height: 0.8em;
  aspect-ratio: 1/1;
  margin-inline-end: 0.5em;
  border-radius: 30%;
  background-color: var(--status-unknown);
}

.status.offline::before {
  border-radius: 0;
  background-color: var(--status-offline);
}

.status.online::before {
  border-radius: 50%;
  background-color: var(--status-online);
}