:root {
  --gutter: 2em;
  --default-font-family: system-ui;
  --text-grey: darkGrey;
  --text-grey-strong: grey;
  --border-grey: lightGray;
  --border-grey-lite: #ebebeb;
  --bg-lite: #efefef;
  --bg-x-lite: #f3f3f3;
  --bg-highlight: oklch(from Highlight calc(l + 0.05) calc(c - 0.06) h);

  @media (prefers-color-scheme: dark) {
    --text-grey: oklch(from Canvas calc(l + 0.26) c h);
    --text-grey-strong: oklch(from Canvas calc(l + 0.4) c h);
    --border-grey: oklch(from Canvas calc(l + 0.15) c h);
    --border-grey-lite: oklch(from Canvas calc(l + 0.08) c h);
    --bg-lite: oklch(from Canvas calc(l + 0.05) c h);
    --bg-x-lite: oklch(from Canvas calc(l + 0.03) c h);
    --bg-highlight: oklch(from Highlight calc(l - 0.1) calc(c - 0.015) h);
  }

  @media (max-width: 640px) {
    --gutter: 0.5em;
  }
}

@view-transition {
  navigation: auto;
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

@keyframes hide {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

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

[hidden] {
  display: none !important;
}

html {
  &[data-browser-name="Mobile Safari"] {
    input[type="text"],
    textarea {
      font-size: 16px !important;
    }
  }
  &[data-browser-name="Safari"] {
    /* Prevent Safari from inferring theme color from .flash */
    body:has(.flash:first-child) {
      &::before {
        content: "";
        display: block;
        height: 1px;
      }
    }
  }
}

body {
  font-size: 14px;
  line-height: 1.3;
  font-family: var(--default-font-family);
  margin: 0;
}

main {
  margin: 2.3em 0 3rem;
  padding-inline: var(--gutter);
}

footer {
  margin-block: 1rem;
}

img {
  max-width: 100%;
}

hr {
  margin: 1rem 0;
  height: 1px;
  border: none;
  background: var(--border-grey-lite);
}

button {
  white-space: nowrap;
  &.spinner::after {
    color: CanvasText;
  }
  [class^="ico-"] {
    margin-right: 0.4em;
    pointer-events: none;
  }
  &.nobtn {
    all: unset;
    cursor: pointer;
    [class^="ico-"] {
      margin: 0 !important;
    }
  }
}

button.danger {
  color: red;
}

input[type="checkbox"] {
  margin-inline: 2px;
}

textarea {
  font-family: system-ui;
}

dialog {
  text-align: initial;
  border-width: 3px;
  border-radius: 2px;
  h1 {
    font-size: 2em;
    margin-top: 0.6rem;
  }
  &:has(form.basic) {
    min-width: min(25rem, 100%);
  }
}

menu {
  margin: 0;
}

.wait-disabled[disabled] {
  cursor: wait;
}

form {
  > label {
    display: block;
    margin: 1.2rem 0;
  }
}

form.basic {
  > label {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    > input,
    > textarea {
      width: 100%;
    }
    > textarea {
      max-width: 100%;
    }
  }
  > footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 2rem;
    dialog & {
      margin-bottom: 0.3rem;
    }
  }
}

table.basic {
  border-collapse: collapse;
  thead {
    background: var(--bg-lite);
  }
  th {
    text-align: left;
  }
  th,
  td {
    padding: 0.5em 0.8em;
    border: 1px solid var(--border-grey);
  }
}

pre.basic {
  background: var(--bg-lite);
}

.alert,
[role="alert"] {
  padding: 0.25em 0.5em;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  font-family: var(--default-font-family);
  word-break: break-word;
  &.success {
    background: green;
    color: white;
    @media (prefers-color-scheme: dark) {
      background: darkgreen;
    }
  }
  &.warning {
    background: yellow;
    color: black;
    @media (prefers-color-scheme: dark) {
      background: gold;
    }
  }
  &.error {
    background: red;
    color: white;
    @media (prefers-color-scheme: dark) {
      background: darkred;
    }
  }
  &.info {
    background: royalblue;
    color: white;
    @media (prefers-color-scheme: dark) {
      background: darkslateblue;
    }
  }
  a {
    color: inherit;
    font-weight: bold;
  }
}

.flash {
  position: static;
  width: auto;
  padding: 0;
  border: none;
  border-radius: 0;
  + .flash {
    margin-top: 1px;
  }
  + * {
    overflow: hidden;
  }
  form {
    display: flex;
    padding: 0.5em var(--gutter);
    gap: 0.7em;
    align-items: center;
    i {
      font-size: 1.2em;
      align-self: start;
    }
  }
}

.spinner,
[class*="spinner-"] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  &.spinner-col {
    display: flex;
    gap: 0.7em;
    flex-direction: column;
  }
  &.spinner-block {
    display: flex;
  }
  &::before {
    width: 18px;
    aspect-ratio: 1;
    content: "";
    border: 1px solid currentColor;
    border-bottom-color: transparent !important;
    border-radius: 50%;
    animation: spin 0.5s linear infinite;
  }
  &.spinner-lg::before {
    width: 24px;
  }
  &.spinner-sm::before {
    width: 12px;
  }
  &.spinner-xs::before,
  button&::before {
    width: 8px;
  }
  button& {
    gap: 0.3rem;
    flex-direction: row-reverse;
  }
}

.dots {
  display: inline-flex;
  --size: 0.4em;
  --active-dot-bg: hsl(from currentColor h s calc(l - 50));
  @media (prefers-color-scheme: dark) {
    --active-dot-bg: hsl(from currentColor h s calc(l + 50));
  }
  * {
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    animation: dots ease-in-out 1s infinite;
    background: currentColor;
    &:nth-of-type(2) {
      margin: 0 calc(var(--size) * 0.9);
      animation-delay: 0.2s;
    }
    &:nth-of-type(3) {
      animation-delay: 0.3s;
    }
  }
}

@keyframes dots {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
    background: var(--active-dot-bg);
  }
  100% {
    transform: scale(1);
  }
}

.tooltip {
  display: inline-block;
  .anchor {
    cursor: default;
    &:hover {
      + .infobox {
        opacity: 1;
        z-index: unset;
        transition: opacity 200ms ease-out;
      }
    }
  }
  .infobox {
    position: absolute;
    opacity: 0;
    z-index: -1;
    @supports (position-area: top) {
      position-area: top right;
      position-try-fallbacks: flip-block, flip-inline;
      width: 22rem;
      max-width: fit-content;
    }
    @supports not (position-area: top) {
      max-width: 22rem;
      margin-top: 0.3em;
    }
    padding: 0.6em 0.75em;
    font-size: 13.5px;
    line-height: 1.3;
    background: black;
    color: white;
    border-radius: 5px;
  }
}

.logo-text {
  display: inline-flex;
  align-items: center;
  .logo {
    width: 1em;
    font-size: 18px;
    &:has(+ span) {
      margin-right: 10px;
    }
  }
}

.page-header {
  display: flex;
  min-height: 4rem;
  padding: 1em var(--gutter);
  align-items: center;
  gap: 2em 3rem;
  border-bottom: 1px solid var(--border-grey-lite);
  @media (max-width: 640px) {
    flex-wrap: wrap;
  }
  .secondary {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-left: auto;
  }
  .login-or-reg {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
}

.breadcrumb {
  ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    row-gap: 0.5em;
    list-style: none;
    li {
      display: flex;
      align-items: center;
      &:not(:last-child)::after {
        content: "\F285";
        margin-inline: 0.5em;
        font-family: bootstrap-icons;
        -webkit-font-smoothing: antialiased;
        color: var(--text-grey-strong);
      }
    }
  }
}

#reg-form {
  label {
    font-weight: bold;
  }
  label {
    display: block;
    margin: 2em 0 0.3em;
  }
  #reg-form-username {
    display: block;
    width: 18em;
    margin: 0 0 2em;
    padding: 0.5em;
    font: inherit;
  }
  small {
    margin-top: 0.2em;
    font-size: 0.9em;
    color: var(--text-grey-strong);
  }
  #reg-form-error {
    width: fit-content;
    margin-top: 1.5em;
  }
}

.menubar {
  display: flex;
  padding: 0;
  gap: 7px;
}

.pop-menu {
  > button {
    [class^="ico-"]:has(+ .ico-chevron-expand) {
      margin-right: 0;
    }
    .ico-chevron-expand {
      margin-left: 0.3em;
      margin-right: 0;
    }
  }
  menu {
    position: unset;
    position-try-fallbacks: flip-inline;
    inset: unset;
    top: anchor(bottom);
    left: anchor(left);
    margin-top: 4px;
    padding: 0.5rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    background: Canvas;
    border: 1px solid var(--border-grey);
    border-radius: 4px;
    &:popover-open {
      display: flex;
    }
    @media (prefers-color-scheme: light) {
      box-shadow: 0 1px 1px var(--text-grey-strong);
    }
    @media (prefers-color-scheme: dark) {
      box-shadow: 0 1px 10px #000;
    }
  }
}

.blank-slate {
  text-align: center;
  .title {
    display: block;
    margin-bottom: 1.5em;
    color: var(--text-grey-strong);
  }
  .sub {
    margin: -0.5em 0 1.5em;
    color: var(--text-grey);
  }
}

.sectioned {
  section {
    margin: 3em 0;
    &:not(:first-of-type) {
      padding-top: 1em;
      border-top: 1px solid var(--border-grey-lite);
    }
  }
}

.prose {
  margin: 0 auto;
  max-width: 40em;
  font-size: 16px;
  line-height: 1.5;
  text-wrap: pretty;
  h2 {
    margin-top: 1.5em;
    font-weight: 600;
  }
  ul li {
    margin: 0.15em 0;
  }
  @media (max-width: 640px) {
    margin-block: 1em;
  }
}

.card {
  width: fit-content;
  padding: 2em;
  text-align: initial;
  background: var(--bg-lite);
  border-radius: 5px;
  *:first-child {
    margin-top: 0;
  }
  h1 {
    margin-block: 0.83em;
    font-size: 1.5em;
    font-weight: 500;
  }
  ul {
    margin-bottom: 0;
    margin-left: 0;
    padding-left: 0;
    list-style: inside;
    line-height: 1.6;
    li {
      margin: 0.5em 0;
      &:first-child,
      &:last-child {
        margin: 0;
      }
    }
  }
}

.about-site {
  margin-top: 4em;
  text-align: center;
  line-height: inherit;
  .logo {
    &::before {
      display: block;
      margin: 0 auto;
      font-size: 69px;
    }
  }
  .subline {
    font-size: 1.2em;
    font-weight: 500;
  }
  .title {
    margin-block: 1em;
    font-size: 2em;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.01em;
  }
  .card {
    margin: 0 auto;
    li {
      list-style: none;
      &::before {
        content: "\F633";
        position: relative;
        top: 2px;
        display: inline-block;
        margin-right: 0.8em;
        width: 1em;
        line-height: 1;
        color: darkgreen;
        font-family: bootstrap-icons;
        -webkit-font-smoothing: antialiased;
        @media (prefers-color-scheme: dark) {
          color: greenyellow;
        }
      }
    }
  }
  footer {
    margin: 2em 0;
    ul {
      padding: 0;
      list-style: none;
      li {
        display: inline;
        &:not(:last-child):after {
          content: "|";
          margin: 0 0.5em;
        }
      }
    }
  }
}

#buy-traffic-dialog {
  max-width: 25em;
  #buy-traffic-loader {
    margin-top: 2em;
  }
  #buy-traffic-summary {
    margin-bottom: 1.5em;
    p {
      display: flex;
      align-items: center;
      gap: 0.5em;
    }
  }
}

/* =====================
  Icons
===================== */

[class*="ico-"] {
  &::before {
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
    font-family: bootstrap-icons;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    vertical-align: -0.15em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

.ico-question-circle::before {
  content: "\F505";
}
.ico-question-circle-fill::before {
  content: "\F504";
}
.ico-download::before {
  content: "\F30A";
}
.ico-gear::before {
  content: "\F3E5";
}
.ico-chevron-expand::before {
  content: "\F283";
}
.ico-upload::before {
  content: "\F603";
}
.ico-chat-dots::before {
  content: "\F24A";
}
.ico-plus-lg::before {
  content: "\F64D";
}
.ico-trash::before {
  content: "\F5DE";
}
.ico-folder-plus::before {
  content: "\F3D3";
}
.ico-box::before {
  content: "\F1C8";
}
.ico-box-fill::before {
  content: "\F7D2";
}
.ico-check-circle::before {
  content: "\F26B";
}
.ico-info-circle::before {
  content: "\F431";
}
.ico-x-circle::before {
  content: "\F623";
}
.ico-stop-circle::before {
  content: "\F591";
}
.ico-exclamation-triangle::before {
  content: "\F33B";
}
.ico-play-fill::before {
  content: "\F4F4";
}
.ico-play-lock::before {
  content: "\F47B";
}
.ico-lock::before {
  content: "\F47B";
}
.ico-unlock::before {
  content: "\F600";
}
.ico-lock::before {
  content: "\F47B";
}