:root {
  --padding: 0.6rem;
  --padding-small: calc(var(--padding) / 2);
  --padding-content: 1rem;
  --optimum-content-width: calc(100dvw - 1em);
  --width: clamp(240px, var(--optimum-content-width), 800px);
  --gutter: calc(-1 * (100vw - var(--width) + var(--padding-content) * 2) / 2);
  --border-radius: 0.4rem;

  /* Typografia */
  --theme-font-family: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif;
  --theme-font-size: 1rem;
  --theme-font-size-m: max(15px, 0.9rem);
  --theme-font-size-s: max(14px, 0.8rem);
  --theme-font-size-xs: max(13px, 0.6rem);

  /* Värit */
  --theme-color-hue: 51deg;
  --theme-color: hsl(var(--theme-color-hue) 100% 50%);
  --theme-color-foreground: black;
  --theme-color-light: hsl(var(--theme-color-hue) 100% 95%);
  --theme-color-link: midnightblue;
  --theme-color-link-hover: royalblue;
  --theme-color-alternative-background: #eee;
  --theme-color-hairline: #ddd;

  /* Statusvärit */
  --theme-color-success: green;
  --theme-color-inprogress: khaki;
  --theme-color-warning: crimson;
  --theme-color-help: royalblue;
  --theme-color-chat: #652eb8;
  --theme-color-chat-light: #e6d6ff;

  @media screen (width >= 600px) {
    --optimum-content-width: 90dvw;
  }
}

body {
  background: #f8f8f8;
  font-family: var(--theme-font-family);
  font-size: 18px;
  line-height: 1.35em;
  margin: 0;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: max-content auto max-content;

  @media screen and (width < 800px) {
    font-size: 16px;
  }

  @media screen and (width < 600px) {
    font-size: 14px;
  }
}

/*
 *  Elementit
 *
 */

a {
  &:is(:link,:visited) {
    color: var(--theme-color-link);
  }
  &:is(:hover,:active,:focus) {
    color: var(--theme-color-link-hover);
  }
}

h1 {
    line-height: 1.5em;
}

h2 {
  margin: 1em 0;
  line-height: 1.2em;

  @media screen and (width > 800px) {
    &:has(.buttons) {
      position: relative;

      .buttons {
        position: absolute;
        right: 0;
        top: -.3em;
        margin: 0;

        form {
          display: inline-block;
        }
      }
        button {
          margin-left: var(--padding-small);
        }
    }
  }

  button.help {
    height: 2.6em;
    width: 2.6em;
    background-color: var(--theme-color-help);
    color: #fff;
    font-weight: bold;
    border-radius: 999px;
  }
}

th {
  text-align: left;
}

button,
input {
  font-family: var(--theme-font-family);
  border-radius: var(--border-radius);
  padding: var(--padding);
  margin-bottom: var(--padding);
}

  input[type="text"] {
    background-color: #fff;
    border: 1px solid var(--theme-color-hairline);
  }

  button,
  input[type="submit"] {
    font-size: var(--theme-font-size-s);
    background: var(--theme-color);
    color: var(--theme-color-foreground);
    margin-top: 10px;
    margin-bottom: 15px;
    border: none;
    cursor: pointer;
  }

button.link-style {
  display: inline;
  background-color: transparent;
  margin: 0;
  padding: 0;
  text-decoration: underline;
  color: var(--theme-color-link);

  &:is(:hover,:active,:focus) {
    color: var(--theme-color-link-hover);
  }
}

textarea {
  width: 100%;
}

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

/*
 *  Sivun asettelu
 *
 */

.container {
  width: calc(var(--width) - var(--padding-content) * 2);
  margin: 0 auto;
  padding: 0 var(--padding-content);
}

.container :has(main) {
  display: flex;
  gap: 20px;
}

main {
  flex: 2;
  padding-bottom: 2em;

  section {
    &::before {
      display: block;
      content: "";
      border-top: 1px solid rgba(0,0,0,15%);
      margin: 2em var(--gutter);
    }

    &.bringers,
    &.games,
    &.chat {
      position: relative;
      margin-bottom: 2em;

      &::after {
        display: block;
        content: "";
        position: absolute;
        z-index: -2;
        top: 0;
        bottom: -2em;
        left: var(--gutter);
        right: var(--gutter);
        border-bottom: 1px solid rgba(0,0,0,15%);
      }

      + section::before {
        border-top-color: transparent;
      }
    }

    &.bringers::after, &.chat::after {
      background-color: #fff;
    }
    &.games::after {
      background-color: var(--theme-color-light);
    }
  }
}

/*
 *  Ylä- ja alaviitteet
 *
 */

header, footer {
  background-color: var(--theme-color);
  padding: var(--padding-content) 0;

  a:is(:link,:visited,:hover,:active,:focus), button {
    margin-block: 0;
    color: black;
  }
}

header {
  overflow: hidden;

  .container {
    display: grid;
    grid-template-columns: max-content auto;
    align-items: center;
  }

  h1 {
    margin: 0;
    display: inline;
    font-size: var(--theme-font-size);
    font-weight: bold;

    .pelitin-logo {
      position: relative;

      :where(svg) {
        height: 2em;
        width: auto;
        margin-bottom: -5px;
        position: relative;
        z-index: 2;
      }

      &::before {
        position: absolute;
        top: calc(-2 * var(--padding-content));
        right: calc(-2 * var(--padding-content));
        bottom: calc(-2 * var(--padding-content));
        left: calc(-10 * var(--padding-content));
        content: " ";
        transition: mask-position 900ms;
        background: linear-gradient(
          100deg,
          transparent 0%,
          transparent var(--padding-content),
          rgba(255,255,255,60%) calc(var(--padding-content) + 1px),
          rgba(255,255,255,60%) calc(100% - var(--padding-content) - 1px),
          transparent calc(100% - var(--padding-content)),
          transparent 100%);
        z-index: 0;
        mask-image: linear-gradient(white, rgba(0,0,0,40%), white);
        mask-size: 100% 200%;
        mask-position: 0 0;

        @media screen and (width > 850px) {
           left: calc(-2 * var(--padding-content));
        }
      }
      &:hover::before {
        mask-position: 0 100%;
      }
    }
    span {
      vertical-align: center;
    }

    :where(a:has(&)) {
      text-decoration: none;
    }
  }
  nav {
    display: inline-block;
    justify-self: end;

    :where(a, button) {
      color: black;
      margin-left: 10px;
      background-color: rgba(255,255,255,80%);
      padding: var(--padding-small) var(--padding);
      border-radius: var(--border-radius);
      font-size: var(--theme-font-size);
      text-decoration: none;
    }
  }
}

footer {
   overflow: hidden;

  .container {
    padding: var(--padding-content) 0;
    display: grid;
    grid-gap: 1em calc(5 * var(--padding-content));
    grid-template:
      "logo content" auto
      "logo footnote" max-content
      / max-content auto;
  }
  .pelitin-icon {
    grid-area: logo;
    position: relative;

    :where(svg) {
      position: relative;
      width: 100px;
      height: auto;
      z-index: 2;
    }

    &::before {
      position: absolute;
      top: calc(-3 * var(--padding-content));
      right: calc(-3 * var(--padding-content));
      bottom: calc(-3 * var(--padding-content) + 5px);
      left: calc(-10 * var(--padding-content));
      content: " ";
      transition: mask-position 900ms;
      border-radius: 0 1000px 1000px 0;
      background: rgba(255,255,255,60%);
      mask-image: linear-gradient(white, rgba(0,0,0,40%), white);
      mask-size: 100% 200%;
      mask-position: 0 100%;
      z-index: 0;

      @media screen and (width > 900px) {
         left: calc(-3 * var(--padding-content));
         border-top-left-radius: 1000px;
         border-bottom-left-radius: 1000px;
      }
    }
    &:hover::before {
      mask-position: 0 0;
    }
  }
  .content, .footnote {
    > :first-child { margin-top: 0; }
    > :last-child { margin-bottom: 0; }
  }
  .content {
    grid-area: content;
  }
  .footnote {
    grid-area: footnote;
    font-size: var(--theme-font-size-s);
    line-height: 1.4em;
    align-content: end;
  }
}

/*
 *  Toimintolinkit
 *
 */

a.remove {
  position: relative;
  display: inline-block;
  padding-right: 1rem;

  &::after {
    display: inline;
    opacity: 0.5;
    position: absolute;
    right: 0;
    top: 0;
    font-size: clamp(11px, 50%, 1rem);
    content: "❌";
    vertical-align: center;
  }
  &:hover {
    color: var(--theme-color-warning);

    &::after {
      opacity: 1;
    }
  }
}

a:is(.add, .action) {
  display: inline-block;
  background-color: var(--theme-color-alternative-background);
  margin-inline: var(--padding-small);
  padding: var(--padding-small) var(--padding);
  border-radius: var(--border-radius);
  color: black;
  text-decoration: none;
  font-size: var(--theme-font-size-s);

  &:hover {
    background-color: var(--theme-color);
  }

  &::before {
    margin-right: var(--padding-small);
  }

  &.bring {
    &::before {
      content: "✅";
    }
  }
  &.session-participation {
    &::before {
      content: "✋";
    }
  }
  &.wish {
    &::before {
      content: "🙏";
    }
  }
  &.pin {
    &::before {
      content: "📌";
    }
  }
}

/*
 *  Tilasymbolit ja -värit
 *
 */

.status {
  background-color: var(--theme-color-alternative-background);

  &::before {
    content: " ";
  }

  /* Tuotavat pelit */
  &.coming {
    background-color: var(--theme-color-success);

    &.bringing::before {
      content: "✅";
    }
  }
  &.wishing::before {
    content: "🙏";
  }

  /* Sovittavat pelit */
  &.in-it {
    &.players-under-min {
      background-color: var(--theme-color-inprogress);
    }
    &.players-appropriate, &.players-full {
      background-color: var(--theme-color-success);
    }
    &::before {
      content: "✋";
    }
  }

  &:not(.in-it) {
    &.players-full {
      background-color: var(--theme-color-warning);
    }
  }

  /* Ketjut */
  &.chatting {
    background-color: var(--theme-color-chat-light);
    &::before {
      content: "✏️";
    }
  }
  &.pinned {
    &::before {
      content: "📌";
    }
  }
}

/*
 *  Listat ja rivien otsikot
 *
 */

.row-heading {
  display: none; /* TODO */

  @container (width >= 800px) {
    display: grid;
    padding: var(--padding);
    font-weight: bold;

    :first-child {
      margin-left: 2.3rem;
    }
    :last-child {
      justify-self: end;
    }
  }
}

.list {
  display: flex;
  flex-direction: column;
}


/*
 *  Korttityyli
 *
 */

.card {
  position: relative;
  background-color: #fff;
  border-radius: var(--border-radius);
  border: 1px solid var(--theme-color-hairline);
  padding: var(--padding);
  margin-bottom: 0.5em;

  .title {
    font-weight: 500;
  }

  details& {
    container-type: inline-size;

    summary {
      display: grid;
      grid-gap: var(--padding-content);
      grid-template-columns: 1.3rem auto;
      padding: var(--padding);
      margin: calc(-1 * var(--padding));
      cursor: pointer;

      @container (width < 600px) {
         &:has(.key) { grid-template-columns: 1.3rem auto 5rem; }

         .key {
            justify-self: end;

            [open] & { justify-self: start; }
         }
         .information:not(.key), .actions {
            display: none;

            [open] & { display: block; }
         }
      }

      @container (width >= 600px) {
        .title, .key, .actions { grid-row: 1; }
        .key:last-child { justify-self: end; }
        .key:not(:last-child) { grid-column: 2; }
        &:has(.key) { grid-template-columns: 1.3rem 5rem auto; }
        &:has(.actions) { grid-template-columns: 1.3rem auto max-content; }
        &:has(.key):has(.actions) { grid-template-columns: 1.3rem auto max-content 5rem; }
        &:has(.information):not(:has(.key)) { grid-template-columns: 1.3rem auto repeat(var(--information-columns), max-content); }
        &:has(.key):has(.information:not(.key)) { grid-template-columns: 1.3em 5rem auto repeat(var(--information-columns), max-content); }
        &:has(.actions):has(.information):not(:has(.key)) { grid-template-columns: 1.3rem auto max-content repeat(var(--information-columns), max-content); }
        &:has(.key):has(.actions):has(.information:not(.key)) { grid-template-columns: 1.3rem 5rem auto max-content repeat(var(--information-columns), max-content); }
      }

      .status {
        grid-row: 1;
        grid-column: 1;
        margin: calc(-1 * var(--padding));
        border-top-left-radius: var(--border-radius);
        border-bottom-left-radius: var(--border-radius);
        padding: var(--padding);

        [open] & {
          border-bottom-left-radius: 0;
          border-bottom-right-radius: var(--border-radius);
        }
      }

      .title {
         overflow: hidden;
         text-overflow: ellipsis;
         text-wrap: nowrap;
      }

      .actions {
        margin: calc(-1 * var(--padding)) 0;
        padding: var(--padding-small) 0;
        order: 3;

        @container (width < 600px) {
          [open] & {
             margin: var(--padding-small) 0;
             grid-column: 2 / 3;
          }
        }

        @container (width >= 600px) {
          justify-self: end;
        }
      }

      .information {
        position: relative;
        font-size: var(--theme-font-size-m);
        order: 4;
        align-content: start;
        padding-left: calc(16px + var(--padding));

        &::before {
          /* TODO Slightly off */
          position: absolute;
          top: 0;
          left: 0;
          content: ' ';
          display: inline-block;
          background-repeat: no-repeat;
          background-position: 50% 50%;
          background-size: 16px 16px;
          width: 16px;
          height: calc(var(--theme-font-size) + var(--padding));
          margin-right: var(--padding);
          opacity: 0.65;
        }

        details:not(:hover,:active,:focus) &::before {
          filter: saturate(0%);
        }

        &.time::before { background-image: url("images/clock.svg"); }
        &.chat::before { background-image: url("images/message.svg"); }
        &.length::before { background-image: url("images/length.svg"); }
        &.players-wish::before { background-image: url("images/players.svg"); }
        &.players::before { background-image: url("images/check.svg"); }
        &.bringers::before { background-image: url("images/check.svg"); }
        &.wishers::before { content: "🙏"; }

        @container (width < 600px) {
          .key {
            grid-row: 1;
            grid-column: 3;
          }

          &:not(.key) {
            display: none;
          }

          [open] & {
            display: block;
          }

          [open] &:nth-child(odd) { grid-column: 2; }
          [open] &:nth-child(even) { grid-column: 3; }
          [open]:has(.actions) &:nth-child(odd) { grid-column: 3; }
          [open]:has(.actions) &:nth-child(even) { grid-column: 2; }
        }

        @container (width >= 600px) {
          &:not(.key) {
            justify-self: end;
          }
          [open] &:not(.key) {
            display: block;
          }
        }
      }

      @container (width < 600px) {
        [open] & {
          grid-gap: var(--padding-small) var(--padding-content);
          grid-template-columns: 1.3rem 1fr 1fr !important;
        }
      }
    }

    .content {
      margin-top: 0.5rem;
      margin-left: 2.3rem;
      font-size: var(--theme-font-size-m);

      p {
        margin: 0 0 var(--padding-small) 0;
      }

      .chat-messages {
        container-type: inline-size;
        background-color: var(--theme-color-alternative-background);
        margin: var(--padding) calc(-1 * var(--padding)) var(--padding) calc(-1 * (2.3rem + var(--padding)));
        padding: var(--padding);
        padding-left: calc(2.3rem + var(--padding));

        &:is(:last-child) {
          margin-bottom: calc(-1 * var(--padding));
          border-bottom-left-radius: var(--border-radius);
          border-bottom-right-radius: var(--border-radius);
        }

        .chat-row {
          font-size: var(--theme-font-size-s);
          margin-bottom: 0.3em;

          &:has(.from.system) {
            line-height: 1rem;
          }

          :has(.from.system) + &:not(:has(.from.system)) {
            margin-top: var(--padding);
          }

          .main {
            display: inline-block;

            &:not(:has(.from.system)) {
              background-color: white;
              border-radius: var(--border-radius);
              padding: var(--padding-small) var(--padding);
            }

            .from {
              opacity: 0.75;
              font-weight: bold;

              &::after {
                content: ": ";
              }
            }

            &:has(.from.me) {
              background-color: var(--theme-color-chat-light) !important;

              .from { display: none; }
            }

            &:has(.from.system) {
              font-size: var(--theme-font-size-xs);
              padding: 0 var(--padding);
              opacity: 0.8;

              .from { display: none; }
              .old { opacity: 0.5; }
              .new { font-weight: bold; }
            }
          }

          .meta {
            display: block;
            padding: 0 var(--padding);
            font-size: var(--theme-font-size-xs);
            color: rgba(0,0,0,60%);

            :has(.from.system) ~ & {
              display: inline-block;
              opacity: 0.8;
            }

            .tools {
              display: none;

              .meta:hover & {
                display: inline-block;
                margin-left: var(--padding);
                opacity: 1;
              }
            }
          }

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

      .chat-form {
        display: grid;
        grid-gap: var(--padding);
        margin: var(--padding) 0 0 0;

        input, button {
          margin: 0;
          font-size: var(--theme-font-size-s);
          padding: var(--padding-small) var(--padding);
        }

        input[type="submit"] {
          background-color: var(--theme-color-chat);
          color: #fff;
        }

        @media screen and (width > 400px) {
          grid-template-columns: auto max-content;
        }
      }
    }
  }


  /*  Tapahtuma  */
  &.event {
    padding: var(--padding);

    .title a:first-child {
      display: block;
    }
  }
}

/*
 *  Ponnahdusikkunat
 *
 */

dialog {
  width: clamp(400px, 600px, 600px);
  border-radius: var(--border-radius);
  border: none;
  padding: var(--padding-content);

  > :first-child {
    margin-top: 0;
  }
  > :last-child,
  form > :last-child {
    margin-bottom: 0;
  }
  dl {
    display: grid;
    grid-template-columns: max-content auto;
    grid-gap: 0 var(--padding-content);
  }
  dt, dd {
    align-self: start;
  }
  dt {
    label {
      display: block;
      margin-top: var(--padding-small);
    }
  }
  dd {
    input:not([type="checkbox"]), select {
      padding: var(--padding);
      width: 100%;
    }
      input:not([type="checkbox"]) {
        width: calc(100% - var(--padding) * 2);
      }
      select {
        margin-bottom: var(--padding);
      }
      label:has([type="checkbox"]) {
        display: block;
        margin-top: var(--padding-small);
        font-size: var(--theme-font-size-s);
      }
  }
  input[type="submit"] {
    width: 100%;
    height: 3em;
    margin: 0;

    + input[type="submit"] {
      margin-top: var(--padding);

      .columns & {
        margin: 0;
      }
    }
  }
  input[disabled] {
    border: none;
    color: var(--theme-color-foreground);
    font-size: var(--theme-font-size-s);
  }
  p.form-info {
    font-size: var(--theme-font-size-s);
    color: rgba(0,0,0,75%);
    padding: 0;
    margin: 0 0 var(--padding-content);
    grid-column: 1 / -1;

    dd:last-child & {
      margin-bottom: 0;
    }
  }
  div.footer-actions {
    width: calc(100% + var(--padding-content) * 2);
    margin: var(--padding-content) calc(-1 * var(--padding-content)) calc(-1 * var(--padding-content)) calc(-1 * var(--padding-content));
    border-top: 1px solid var(--theme-color-hairline);
    display: flex;

    * {
      flex: 1;
      font-size: var(--theme-font-size-s);
      display: block;
      background-color: transparent;
      text-align: center;
      margin: 0;
      border-radius: 0;
      cursor: pointer;
      border-right: 1px solid var(--theme-color-hairline);
    }
      a.close-dialog {
        padding: var(--padding);
      }
      button {
        width: 100%;

        &:hover {
          color: var(--theme-color-link-hover);
        }
        &::before {
          margin-right: var(--padding);
        }

        &.logout {
          &::before {
            content: "➜]";
          }
        }
        &.remove {
          &:hover {
            color: var(--theme-color-warning);
          }
          &::before {
            content: "🗑️";
          }
        }
      }
      > :last-child {
        border-right: none;
      }
  }
  ul:has(.status-blob) li {
    display: grid;
    grid-template-columns: max-content auto;
    grid-gap: var(--padding-small);
    align-items: center;
    margin-bottom: var(--padding-small);
    font-size: var(--theme-font-size-s);
  }
  .status-blob {
    display: inline-block;
    width: 1.2rem;
    height: 1.6rem;
    margin-right: var(--padding-small);
    padding: var(--padding-small);
    border-radius: var(--border-radius);
  }
}

/*
 *  Mobiilituki
 *
 */

@media screen and (width >= 800px) {
  .columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: var(--padding);
  }
  .card.game .people {
    grid-template-columns: repeat(2,1fr);
    grid-template-areas: "wish bring";

    .bring, .wish {
      align-self: end;
    }
    .bring {
      grid-area: bring;
      text-align: right;
    }
    .wish {
      grid-area: wish;
    }
  }
}

/*
 *  Ilmoitukset
 *
 */

.response {
  border-radius: var(--border-radius);
  background-color: var(--theme-color-help);
  color: #fff;
  margin-bottom: 0.5em;
  padding: var(--padding);
  font-size: var(--theme-font-size-xs);

  &.warning { background-color: var(--theme-color-warning); }
  &.success { background-color: var(--theme-color-success); }
}

/*
 *  Toivotut/tuotavat pelit
 *
 */

section.games {
  .row-heading {
    grid-template-columns: 4rem auto max-content;
  }
  details {
    order: 5;

    &:has(.status.bringing) { order: 1; }
    &:has(.status.wishing:not(.coming,.bringing)) { order: 3; }
    &:has(.status.coming:not(.wishing,.bringing)) { order: 4; }
    &:has(.status.wishing.coming:not(.bringing)) { order: 2; }
  }
}

/*
 *  Sovitut pelit
 *
 */

section.sessions {
  .row-heading {
    grid-template-columns: 7rem auto max-content;
  }

  details {
    order: 4;

    &:has(.status.in-it) { order: 3; }
    &:has(.status:not(.in-it).players-full) {
      order: 5;

      .title { opacity: 0.5; }
    }
    &:has(.status.in-it.players-appropriate) { order: 1; }
  }
}

/*
 *  Ketjut
 *
 */

section.chat {
  .row-heading {
    grid-template-columns: 4rem auto max-content;
  }

  details {
    order: 4;

    &:has(.status.chatting) { order: 3; }
    &:has(.status.pinned) { order: 1; }

    summary {
      [open] & .status {
        border-bottom-right-radius: 0 !important;
      }
    }
  }
}

/*
 *  Logonoppa
 *
 */

:is(.pelitin-logo, .pelitin-icon) {
  svg {
    .logotype, .die {
      fill: var(--logo-color-main, #3d248f);
    }
    .icon {
      fill: var(--logo-color-highlight, #ff931e);
    }
    .die {
       transform-origin: 50% 50%;
       transform-box: fill-box;
    }
    .pip, .icon {
       pointer-events: none;
       transition: 500ms opacity;
    }
    .pip {
       fill: var(--logo-color-pip, white);
       display: block;
       opacity: 0;

       &.visible { opacity: 1; }
    }
    &.rolling {
      .die {
        animation-name: roll;
        animation-duration: 500ms;
        animation-delay: 0;
        animation-iteration-count: 1;
      }
      .icon {
        opacity: 0;
      }
    }
  }
}

@keyframes roll {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}