/* 
 * CSS reset from https://www.joshwcomeau.com/css/custom-css-reset/ 
 */

/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

/* Typographic tweaks!
  3. Add accessible line-height
  4. Improve text rendering */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* 5. Improve media defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* 6. Remove built-in form typography styles */
input,
button,
textarea,
select {
  font: inherit;
}

/* 7. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/*
 * Global styles & variable
 */

:root {
  /* System Fonts*/
  --system-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

  --color-background: white;
  --color-text: hsl(0 0% 10%);
  --color-theme: oklch(0.4 0.25 var(--hue-theme));
  --color-danger: hsl(0 85% 60%);

  --color-gray: hsl(0 0% 40%);

  --color-theme-medium: oklch(from var(--color-theme) 0.6 C H / alpha);
  --color-theme-light: oklch(from var(--color-theme) L C H / 8%);

  --width-body: min(45rem, calc(100vw - 2rem));
  --corner-radius-default: 0.5rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: hsl(0 0% 10%);
    --color-text: white;
    --color-theme: oklch(0.65 0.15 var(--hue-theme));

    --color-gray: hsl(0 0% 60%);

    --color-theme-medium: oklch(from var(--color-theme) L 0.2 H / alpha);
    --color-theme-light: oklch(from var(--color-theme) L C H / 20%);
  }
}

/*
 * Element default styles
 */

a,
a:visited {
  color: var(--color-theme);
}

a:hover {
  text-decoration: none;
}

button,
.button,
a.button,
input[type="submit"],
input[type="reset"],
input[type="button"],
label[type="button"] {
  appearance: none;
  border: none;
  background-color: var(--color-theme-medium);
  color: white;
  padding: 0.5rem 0.9rem;
  text-decoration: none;
  line-height: normal;
  border-radius: var(--corner-radius-default);
  cursor: pointer;
  font-weight: bold;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:is(
    button,
    .button,
    a.button,
    input[type="submit"],
    input[type="reset"],
    input[type="button"],
    label[type="button"]
  ).danger {
  background-color: var(--color-danger);
}

textarea,
input:not(:checkbox) {
  appearance: none;
  border: none;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  border-radius: var(--corner-radius-default);
  box-shadow: none;
  max-width: 100%;
  display: inline-block;
  border: 1px solid var(--color-theme-medium);
}

/* 
 * Layout 
 */

html {
  font-family: var(--system-ui);
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-background);
  color: var(--color-text);
  display: grid;
  grid-template-columns: 1fr var(--width-body) 1fr;
}
body > * {
  grid-column: 2;
}

header {
  background: var(--color-theme-light);
  border-block-end: 1px solid var(--color-theme-medium);
  grid-column: 1 / -1;
  text-align: center;

  a,
  a:link,
  a:visited {
    display: block;
    width: 100%;
    padding-inline: calc((100vw - var(--width-body)) / 2);
    padding-block: 1rem;

    color: var(--color-text);
    text-decoration: none;
  }

  .description {
    border-block-start: 1px solid var(--color-theme-medium);
    width: var(--width-body);
    margin-inline: auto;
    padding-block: 1rem;

    > * + * {
      margin-top: 0.5rem;
    }
  }
}

main {
  margin-block: 2rem;
}

main > * + * {
  margin-top: 1rem;
}

footer {
  border-block-start: 1px solid var(--color-theme-medium);
  padding-block: 1rem;

  > * + * {
    margin-top: 1rem;
  }
  ul {
    display: flex;
    list-style: none;
    padding: 0;
    align-items: center;
    justify-content: center;

    > * + *::before {
      content: "|";
      padding-inline: 0.5rem;
    }
  }

  .admin-footer {
    text-align: center;
    font-size: 0.8rem;
  }
}

/*
 * Components 
 */

/* Article */
article {
  border: 1px solid var(--color-theme-medium);
  padding: 1rem;
  border-radius: var(--corner-radius-default);
}

article > * + *,
article > del > * + * {
  margin-block-start: 1rem;
}

article.no-spoiler-info {
  background: var(--color-theme-light);
  margin-bottom: 4rem;
}

/* Details */
details {
  background: var(--color-theme-light);
  border: 1px solid var(--color-theme-medium);
  padding: 1rem;
  border-radius: var(--corner-radius-default);
}

details summary {
  font-weight: bold;
  cursor: pointer;
}

details > * + * {
  margin-block-start: 1rem;
}

/* Form */
form.inline {
  display: inline;
}

/* Edit wish form */
.edit-wish-form {
  > * + * {
    margin-top: 1rem;
  }

  @media (width > 25rem) {
    .edit-line {
      display: flex;
      gap: 0.75rem;

      > .input-label,
      > .checkbox-wrapper {
        width: 10rem;
        text-align: end;
        flex-shrink: 0;
      }

      > .input-label {
        padding-block-start: 0.3rem;
        cursor: pointer;
      }

      input[type="text"],
      input[type="url"],
      input[type="number"] {
        width: 1rem;
        flex-shrink: 1;
        flex-grow: 1;
      }

      .autosize-textarea {
        flex-shrink: 1;
        flex-grow: 1;
      }
    }

    details .edit-line {
      margin-left: -1rem;
    }
  }

  @media (width < 25rem) {
    .edit-line {
      display: block;

      > .input-label {
        display: block;
        margin-bottom: 0.2rem;
      }
      input[type="text"],
      input[type="url"],
      input[type="number"],
      textarea {
        width: 100%;
      }
    }
  }
}

/* fulfill form */
.fulfill-form {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;

  input[type="text"] {
    width: 10rem;
    flex-grow: 1;
    flex-shrink: 1;
  }

  input[type="submit"] {
    flex-grow: 0;
    flex-shrink: 1;
  }
}

/* message card */
.message-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;

  background: var(--color-theme-light);
  border: 1px solid var(--color-theme-medium);
  padding: 1rem;
  border-radius: var(--corner-radius-default);

  .message {
    flex-grow: 1;
  }
}

/* button-row */
.button-row {
  display: flex;
  gap: 0.2rem;
  flex-wrap: wrap;
}

/* autosize-textarea */

.autosize-textarea {
  display: grid;
}
.autosize-textarea::after {
  /* Note the weird space! Needed to preventy jumpy behavior */
  content: attr(data-replicated-value) " ";

  /* Hidden from view, clicks, and screen readers */
  visibility: hidden;
}
.autosize-textarea > textarea {
  resize: none;
  /* Firefox shows scrollbar on growth, you can hide like this. */
  overflow: hidden;
}
.autosize-textarea > textarea,
.autosize-textarea::after {
  border: 1px solid black;
  padding: 0.5rem;
  font: inherit;
  white-space: pre-wrap;
  grid-area: 1 / 1 / 2 / 2;
}

/* prio-heading */
.prio-heading {
  display: flex;
  font-size: 1rem;
  font-weight: normal;
  color: var(--color-gray);
  background-color: var(--color-background);
  gap: 0.3rem;
}
.prio-heading::before,
.prio-heading::after {
  content: " ";
  display: block;
  border-bottom: 1px solid var(--color-gray);
  margin-bottom: 0.7rem;
}
.prio-heading::before {
  width: 1.5rem;
}
.prio-heading::after {
  flex-grow: 1;
}