:root {
  --bg: #111;        /* page background */
  --fg: #fff;        /* primary text */
  --ui: #222;        /* surfaces: cards/dialogs/inputs */
  --ui2: #333;       /* raised surfaces: buttons */
  --hover: #444;     /* hover surface / dividers */
  --line: #555;      /* borders / lines */
  --focus: #46c;     /* focus ring accent */
  --shadow: #888a;   /* shadow color */
  --backdrop: #1118; /* modal backdrop tint */
}

body {
  font-family: Arial, sans-serif;
  display: flex; flex-direction: column; align-items: center;
  margin: 1em;
  background-color: var(--bg); color: var(--fg);
  font-size: clamp(14px, 1.2vw + 0.4rem, 18px);
}

.centered { text-align: center; }

label { color: #aaa; }

input {
  background-color: var(--ui); color: var(--fg);
  border: 1px solid var(--line); border-radius: 5px;
  padding: 5px;
  &::placeholder { text-transform: capitalize; }
}

button {
  background-color: var(--ui2); color: var(--fg);
  border: 1px solid var(--line); border-radius: 5px;
  padding: 5px; min-height: 3em;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.3s;
  &:hover { background-color: var(--hover); }
  &:active { background-color: #444; border-color: #666; }
}

:where(button, input, select, textarea, a, [role="button"]):focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}

hr {
  height: 2px; border: none; background-color: var(--hover);
  position: relative; overflow: visible;
  &::after {
    content: attr(data-label);
    position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%);
    padding: 1px 4px; line-height: 1; font-size: 65%; background-color: var(--ui);
  }
}

code, .code, kbd, tt {
  font-size: 1em;
  font-family: Cascadia, Consolas, "Liberation Mono", monospace, monospace;
}

pre {
  max-width: 80vw; width: fit-content; min-width: 3em; min-height: 1em;
  background-color: var(--ui); color: #ff0;
  border: 1px solid var(--line); border-radius: 5px;
  margin-top: 15px; padding: 10px;
  overflow: auto;
  & div {
    &.header {
      margin-bottom: 5px;
      font-weight: bold; text-decoration: underline;
      font-size: clamp(1.1rem, 1.2vw + 0.3rem, 1.4rem);
    }
    &.ok  { color: #6f6; }
    &.bad { color: #f77; }
    &.err { color: #fb6; }
  }
}

/* Mobile output area */
@media (max-width: 480px) {
  pre#msg { max-width: 100vw; font-size: 0.95rem; }
}

#buttons {
  display: flex; align-items: center; justify-content: center;
  margin-top: 20px; width: 100%; max-width: 640px;
  gap: 0 10px; flex-wrap: wrap;
  & > button { flex: 1 1 auto; margin-bottom: 10px; }
  & > x-br { flex-basis: 100%; height: 0; margin: 0; }
}
@media (max-width: 320px) { #buttons > button { flex: 1 1 100%; } }
@media (min-width: 321px) and (max-width: 640px) { #buttons > button { flex: 1 1 calc(50% - 10px); } }

#buttons {
  & .unless-logged-in { display: block; }
  & #logout-show { display: none; }
}
body.logged-in #buttons {
  & #logout-show { display: block; }
  & .unless-logged-in { display: none; }
}

img.icon {
  display: inline-block; width: 2em; height: 2em;
  margin-right: .4em; vertical-align: middle;
}

#user-pic {
  display: none; position: fixed; top: 1em; right: 1em; pointer-events: none;
  border-radius: 33%; width: 5em; height: 5em; opacity: 0.75;
  border: 2px solid var(--line);
}
body.logged-in #user-pic[src] { display: inline-block; }

#login-form {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  gap: 10px;
  & > label { text-align: right; }
}

dialog {
  position: fixed; box-sizing: border-box; margin: 0;
  top: 12vh; left: 50%; transform: translateX(-50%);
  width: min(420px, calc(100vw - 24px)); max-height: 80vh; overflow: auto;
  padding: 20px;
  background-color: var(--ui); color: var(--fg);
  border: 1px solid var(--hover); border-radius: 5px;
  box-shadow: 0 0 10px var(--shadow);
  opacity: 0; transition: all 0.7s allow-discrete;
  &:open { opacity: 1; }
}

.right-buttons { float: right; margin-top: 20px; display: flex; gap: 10px; }

@starting-style { dialog:open { opacity: 0; } }
dialog::backdrop {
  background-color: transparent; backdrop-filter: none;
  transition: all 0.7s allow-discrete;
  pointer-events: none; /* identify outside clicks, to block propagation */
}
dialog:open::backdrop {
  background-color: var(--backdrop); backdrop-filter: blur(2px);
}
@starting-style {
  dialog:open::backdrop {
    background-color: transparent; backdrop-filter: none;
  }
}

/* used for a hack in index.js to block clicks outside an open dialog */
body.no-clicks * { pointer-events: none; }

/* Mobile adjustments */
@media (max-width: 480px) {
  /* User profile picture on bottom */
  #user-pic { top: auto; bottom: 1em; }
  /* Dialog becomes centered vertically too */
  dialog { top: 50%; transform: translate(-50%, -50%); }
  /* Stack the form to one column */
  #login-form { grid-template-columns: 1fr; }
  #login-form > label { text-align: left; }
  #login-form input { width: 100%; }
  #buttons > button { min-height: 52px; padding: 12px 16px; }
}