/* 
 * 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 {
  --hue-theme: 180;

  /* 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-danger-background: hsl(0, 60%, 80%);

  --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-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;
  margin: 0.3rem 0.2rem;
}

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

button[hidden] {
  display: none !important;
}

.secondary-button {
  background-color: var(--color-theme-light);
  border: 2px solid var(--color-theme-medium);
  color: inherit;
  padding: calc(0.5rem - 2px) calc(0.9rem - 2px);
}

h2 {
  text-align: center;
}

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;
  }
}

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;
    }
  }
}

/*
 * Components 
 */

/* Fieldset */
fieldset {
  border: 1px solid var(--color-theme-medium);
  padding: 1rem;
  border-radius: var(--corner-radius-default);
  margin-block: 1rem;
  legend {
    border: 1px solid var(--color-theme-medium);
    padding: 0.5rem 0.9rem;
    border-radius: var(--corner-radius-default);
    background-color: var(--color-theme-light);
  }
  ul {
    list-style-type: none;
    padding-inline-start: 0.5rem;
  }
}

fieldset:disabled button {
  background-color: color-mix(
    in srgb,
    var(--color-theme-medium) 30%,
    #9494947d 70%
  );
  cursor: default;
  /* opacity: 0.5; */
}

fieldset:disabled .secondary-button {
  background-color: var(--color-theme-light);
  border: 2px solid
    color-mix(in srgb, var(--color-theme-medium) 20%, #9494947d 80%);
  color: gray;
  padding: calc(0.5rem - 2px) calc(0.9rem - 2px);
}

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

/* Strong */
strong {
  background: var(--color-theme-light);
  border-radius: var(--corner-radius-default);
  padding: 0.4rem;
  margin: -0.4rem;
}

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

details summary {
  /* font-weight: regular; */
  cursor: pointer;
  text-decoration: underline;
  color: var(--color-theme);
}

details summary:hover {
  text-decoration: none;
}

details p {
  margin-block-start: 0.7rem;
}

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

/* Dialog */
dialog::backdrop {
  backdrop-filter: blur(5px);
}
dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  border-radius: var(--corner-radius-default);
  color: inherit;
  background-color: var(--color-background);
}

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

/* 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;
  }
}

/* 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;
}

#constraint-list li {
  margin-block: 1rem;
}

#participant-list li {
  margin-block: 0.5rem;
}

.result-participants {
  padding-inline-start: 0;
  margin-inline: 3rem;
  list-style-type: none;
  a {
    display: block;
    border: 1px solid var(--color-theme-medium);
    padding: 0.5rem 0.9rem;
    border-radius: var(--corner-radius-default);
    background-color: var(--color-theme-light);
    margin-block: 1rem;
    text-align: center;
  }
}

#participant-form {
  margin-inline: max(-6rem, calc((-100vw + var(--width-body) + 2rem) / 2));

  #submit-buttons {
    float: right;
  }
}

#result-content {
  border: 1px solid var(--color-theme-medium);
  padding: 1rem;
  margin-block-end: 3rem;
  border-radius: var(--corner-radius-default);
  background-color: var(--color-theme-light);
}

#spoiler-cover {
  border: none;
  border-radius: var(--corner-radius-default);
  background-color: var(--color-theme);
  color: var(--color-background);
  padding: 0.2rem;
  margin: -0.2rem;
}

.exchange-creation-error {
  border: 1px solid var(--color-danger);
  padding: 1rem;
  border-radius: var(--corner-radius-default);
  background-color: var(--color-danger-background);
}

.arrow-right:not([hidden]),
.arrow-both:not([hidden]) {
  display: inline-block;
  width: 1.2em;
  text-align: center;
  font-weight: bold;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}