:root {
  --color-red: hsl(0, 40%, 50%);
  --color-orange: hsl(20, 30%, 50%);
  --color-yellow: hsl(50, 30%, 50%);
  --color-green: hsl(120, 30%, 50%);
  --color-blue: hsl(210, 30%, 50%);
  --color-gray-1: hsl(0, 0%, 5%);
  --color-gray-2: hsl(0, 0%, 10%);
  --color-gray-3: hsl(0, 0%, 15%);
  --color-gray-4: hsl(0, 0%, 20%);
  --color-gray-5: hsl(0, 0%, 45%);
  --color-gray-6: hsl(0, 0%, 60%);
  --color-gray-7: hsl(0, 0%, 75%);
  --color-gray-8: hsl(0, 0%, 90%);

  --color-primary: var(--color-blue);

  --color-bg-1: var(--color-gray-1);
  --color-bg-2: var(--color-gray-2);
  --color-bg-3: var(--color-gray-3);
  --color-bg-4: var(--color-gray-4);

  --color-border-1: var(--color-gray-3);
  --color-border-2: var(--color-gray-4);

  --color-text-1: var(--color-gray-5);
  --color-text-2: var(--color-gray-6);
  --color-text-3: var(--color-gray-7);
  --color-text-4: var(--color-gray-8);

  --body-bg-color: var(--color-bg-1);
  --body-text-color: var(--color-text-3);
  --body-text-code-bg-color: var(--color-bg-3);
  --body-text-quote-color: var(--color-text-2);
  --body-text-quote-bg-color: var(--color-bg-3);
  --body-text-highlight-color: var(--color-bg-4);

  --link-normal-color: var(--color-primary);
  --link-visited-color: var(--color-text-2);
  --link-outline-color: var(--color-border-2);
  --link-hover-filter: brightness(115%);

  --notice-info-color: var(--color-text-2);
  --notice-ok-color: var(--color-green);
  --notice-error-color: var(--color-red);

  --dot: " · ";

  --title-color: var(--color-text-4);
  --title-accent: "❯ ";
  --title-accent-color: var(--color-primary);

  --post-index-color: var(--color-text-1);
  --post-url-host-color: var(--color-bg-4);
  --post-url-host-before-content: " [";
  --post-url-host-after-content: "] ";
  --post-url-host-link-color: var(--color-text-2);
  --post-poll-results-border-color: var(--color-border-1);
  --post-poll-bar-color: var(--color-bg-3);
  --post-poll-leading-color: var(--color-text-4);
  --post-poll-leading-bar-color: var(--color-bg-4);

  --me-color: var(--color-red);
  --op-color: var(--color-green);

  --comment-tree-border-color: var(--color-border-1);

  --tag-bg-color: var(--color-bg-2);
  --tag-border-color: var(--color-border-1);
  --tag-managed-text-color: var(--color-yellow);
  --tag-computed-text-color: var(--color-orange);
  --tag-community-text-color: var(--color-text-2);

  --nav-button-border-color: var(--color-border-1);
  --nav-current-border-color: var(--color-primary);

  --tab-bg-color: var(--color-bg-3);
  --tab-bg-active-color: var(--color-bg-4);

  --details-collapsed-filter: brightness(75%);
  --info-text-color: var(--color-text-1);

  --form-bg-color-1: var(--color-bg-2);
  --form-bg-color-2: var(--color-bg-3);
  --form-text-color: var(--color-text-3);
  --form-border-color: var(--color-border-1);
  --form-border-color-active: var(--color-border-2);

  --button-padding: var(--size-1) var(--size-2);
  --hr-border-color: var(--color-border-1);
  --table-bg-color-1: var(--color-bg-2);
  --table-bg-color-2: var(--color-bg-3);

  --size-unit: 0.25rem;
  --size-1: var(--size-unit);
  --size-2: calc(var(--size-unit) * 2);
  --size-3: calc(var(--size-unit) * 3);
  --size-4: calc(var(--size-unit) * 4);
  --size-5: calc(var(--size-unit) * 5);
  --size-6: calc(var(--size-unit) * 6);
  --size-7: calc(var(--size-unit) * 8);

  --font-size-small: var(--size-3); /* 8px */
  --font-size-normal: var(--size-4);
  --font-size-big: var(--size-5);
  --font-size-bigger: var(--size-6);
  --font-size-biggest: var(--size-7);

  --border-width-1: 1px;
  --border-radius-1: var(--size-1);
  --border-radius-2: var(--size-2);
}

/* body */
body {
  display: flex;
  justify-content: center;
  background-color: var(--body-bg-color);
  min-height: 100vh;
  color: var(--body-text-color);

  .body-margin {
    display: flex;
    flex-direction: column;
    gap: var(--size-4);
    margin: var(--size-1) var(--size-2) var(--size-7) var(--size-1);
    width: 800px;
  }
}

/* links */
a {
  color: var(--link-normal-color);
  text-decoration-line: none;
}

a:hover,
a:focus {
  filter: var(--link-hover-filter);
}

a:focus-visible {
  outline: var(--border-width-1) solid var(--link-outline-color);
}

a:visited {
  color: var(--link-visited-color);
}

/* images */
.icon {
  display: inline-block;
  vertical-align: middle;
  width: 1em;
  height: 1em;
}

.avatar {
  border-radius: 50%;
}

.icon-text {
  display: inline-flex;
  align-items: center;
  gap: var(--size-1);
  white-space: nowrap;
}

/* header, main, and footer */
.main-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  line-height: var(--size-7);

  a:has(.logo) {
    color: inherit;
  }

  .logo {
    vertical-align: text-top;
    width: 70.33px; /* FIXME: wtf? */
    height: var(--size-5);
    fill: currentColor;
  }

  .avatar {
    vertical-align: text-top;
    width: var(--size-5);
    height: var(--size-5);
  }
}

main {
  .title:first-child {
    margin-top: 0;
    padding-top: 0;
  }
}

.main-footer {
  font-size: var(--font-size-small);
  text-align: center;
}

/* nav */
.nav-links {
  a,
  a:visited {
    padding: var(--size-1) 0;
    color: inherit;
  }

  a.current {
    border-bottom: var(--border-width-1) solid var(--nav-current-border-color);
  }
}

.nav-buttons {
  a,
  a:visited {
    border: var(--border-width-1) solid var(--nav-button-border-color);
    border-radius: var(--border-radius-1);
    padding: var(--button-padding);
    color: inherit;
  }

  a.current {
    border: var(--border-width-1) solid var(--nav-current-border-color);
  }
}

.nav-tabs {
  margin: var(--size-1) 0;
  border-bottom: var(--border-width-1) solid var(--tab-bg-active-color);

  a,
  a:visited {
    display: inline-block;
    border-radius: var(--border-radius-1) var(--border-radius-1) 0 0;
    background-color: var(--tab-bg-color);
    padding: var(--button-padding);
    color: inherit;
  }

  a.current {
    background-color: var(--tab-bg-active-color);
  }
}

/* menus and info */
details:not([open]) {
  filter: var(--details-collapsed-filter);
}

.menu,
.info {
  color: var(--info-text-color);
  font-size: var(--font-size-small);
  a {
    color: var(--info-text-color);
  }
}

/* pagination */
.pagination {
  text-align: center;

  a {
    margin: 0 var(--size-2);
  }
}

/* notices */
.notice {
  margin-bottom: var(--size-3);
  border: var(--border-width-1) solid var(--notice-info-color);
  border-radius: var(--border-radius-1);
  padding: var(--size-1);
  color: var(--notice-info-color);
}

.notice:has(+ .notice) {
  margin-bottom: var(--size-1);
}

.notice.ok {
  border: var(--border-width-1) solid var(--notice-ok-color);
  color: var(--notice-ok-color);
}

.notice.error {
  border: var(--border-width-1) solid var(--notice-error-color);
  color: var(--notice-error-color);
}

/* headings */
.title {
  color: var(--title-color);
  font-size: var(--font-size-bigger);
}

.title::before {
  content: var(--title-accent);
  color: var(--title-accent-color);
}

.subtitle {
  font-size: var(--font-size-big);
}

/* layouts */
.row-gap-2 {
  display: flex;
  column-gap: var(--size-2);
}

.row-gap-3 {
  display: flex;
  column-gap: var(--size-4);
}

.column-gap-1 {
  display: flex;
  flex-direction: column;
  gap: var(--size-1);
}

.column-gap-2 {
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
}

.column-gap-3 {
  display: flex;
  flex-direction: column;
  gap: var(--size-4);
}

.label-left {
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-auto-rows: minmax(var(--size-5), auto);
  gap: var(--size-1);

  .only-label {
    display: flex;
    grid-column: span 2;
  }

  .no-label {
    display: flex;
    grid-column-start: 2;
  }
}

/* forms */
input,
select,
textarea {
  border: var(--border-width-1) solid var(--form-border-color);
  border-radius: var(--border-radius-1);
  background-color: var(--form-bg-color-1);
  resize: vertical;
  scrollbar-color: var(--form-bg-color-2) var(--form-bg-color-1);
  scrollbar-width: thin;
  color: var(--form-text-color);
}
input[type="submit"] {
  padding: var(--button-padding);
}
textarea {
  height: calc(var(--font-size-normal) * 16);
}

input:active,
input:focus,
select:active,
select:focus,
textarea:active,
textarea:focus {
  outline: none;
  border: var(--border-width-1) solid var(--form-border-color-active);
}
input[type="checkbox"]:has(+ *),
input[type="radio"]:has(+ *) {
  margin-right: var(--size-1);
}
input[type="checkbox"]:active,
input[type="checkbox"]:focus {
  outline: var(--border-width-1) solid var(--form-border-color-active);
}
input[type="submit"]:active {
  background-color: var(--form-bg-color-2);
}
option:checked {
  background-color: var(--form-bg-color-2);
  color: var(--form-text-color);
}

/* tags */
.tag,
.tag:visited {
  display: inline-block;
  border: var(--border-width-1) solid var(--tag-border-color);
  border-radius: var(--border-radius-2);
  background-color: var(--tag-bg-color);
  padding: 0 var(--size-1);
  color: var(--tag-community-text-color);
  font-size: var(--font-size-small);
}

span.tag:hover {
  cursor: default;
}

.tag.managed {
  color: var(--tag-managed-text-color);
}

.tag.computed {
  color: var(--tag-computed-text-color);
}

.tag:has(+ .tag) {
  margin-right: var(--size-1);
}

/* users */
.me,
a.me {
  color: var(--me-color);
}

.op,
a.op {
  color: var(--op-color);
}

.user-whois .avatar {
  float: right;
  width: 80px;
  height: 80px;
}

/* posts */
.post-list {
  display: grid;
  grid-template-columns: min-content 1fr;
  gap: var(--size-2);

  .index {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--post-index-color);
    font-weight: bold;
    font-size: var(--font-size-big);
    white-space: nowrap;
  }
}

.post-header {
  .post-headline {
    .post-title {
      vertical-align: middle;
    }

    .post-url-host {
      color: var(--post-url-host-color);
      font-size: var(--font-size-small);

      a,
      a:visited {
        color: var(--post-url-host-link-color);
      }
    }

    .post-url-host::before {
      content: var(--post-url-host-before-content);
    }

    .post-url-host::after {
      content: var(--post-url-host-after-content);
    }
  }

  .post-byline {
    flex-wrap: wrap;
    margin-top: var(--size-1);
  }
}

.poll-results {
  display: grid;
  grid-template-columns: 1fr min-content;
  gap: var(--size-1);
  border: var(--border-width-1) solid var(--post-poll-results-border-color);
  border-radius: var(--border-radius-1);
  padding: var(--size-1);

  .choice {
    position: relative;
    padding: var(--size-1);
  }

  .bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    border-radius: var(--border-radius-1);
    background: var(--post-poll-bar-color);
    height: 100%;
  }

  .value {
    place-content: center;
    padding: var(--size-1);
    text-align: right;
    white-space: nowrap;
  }

  .leading {
    color: var(--post-poll-leading-color);
    font-weight: bold;

    .bar {
      background: var(--post-poll-leading-bar-color);
    }
  }

  .info {
    margin: var(--size-2) 0 0 var(--size-1);
  }
}

/* comments */
.comment {
  .user-input-multi {
    margin: var(--size-1) 0;
  }
}

.comment:not(:first-child) {
  margin-top: var(--size-4);
}

.comment-tree {
  .margin {
    margin-left: var(--size-1);
    border-left: dashed var(--border-width-1) var(--comment-tree-border-color);
    padding-left: var(--size-2);
  }

  .user-input-multi:target {
    animation: highlight 2s ease-out;
  }
}

@keyframes highlight {
  0% {
    background-color: var(--body-text-highlight-color);
  }
  100% {
    background-color: transparent;
  }
}

/* misc */
.dot-separate > :not(:first-child)::before {
  content: var(--dot);
}

.comma-separate > :not(:first-child):before {
  content: ", ";
}

.user-input-single {
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-input-multi {
  :first-child {
    margin-top: 0;
    padding-top: 0;
  }

  :last-child {
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

.user-input-multi,
.user-input-multi * {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.table {
  border-collapse: separate;
  border-spacing: 0 var(--border-width-1);
  width: 100%;

  th {
    background-color: var(--table-bg-color-2);
    text-align: left;
  }

  tr:nth-child(even) {
    background-color: var(--table-bg-color-1);
  }

  .blank-row {
    background-color: var(--body-bg-color);
    height: 1em;
  }
}

blockquote {
  margin: 0;
  border-left: var(--size-1) solid var(--body-text-quote-bg-color);
  padding: var(--size-1);
  color: var(--body-text-quote-color);
}

code {
  background-color: var(--body-text-code-bg-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: var(--font-size-big);
}

hr {
  border: var(--border-width-1) solid var(--hr-border-color);
}

img {
  max-width: 100%;
}

ul.no-bullets {
  padding-left: 0;
  list-style-type: none;
}