@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");

:root {
  --background: rgb(250, 250, 250);
  --background-emphasis: #fff;
  --ink: #383838;
  --accent: #e8cf96;

  --muted: color-mix(in srgb, var(--ink) 65%, transparent);
  --line: color-mix(in srgb, var(--ink) 15%, transparent);
  --background_muted: color-mix(in srgb, var(--ink) 5%, transparent);
  --hover: color-mix(in srgb, var(--accent) 8%, transparent);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--ink);
  font:
    400 14px/1.5 Inter,
    sans-serif;
}

#app {
  width: min(100% - 32px, 880px);
  margin: 0 auto;
  padding: 15px 0 56px;

  .site-header {
    position: relative;
    padding: 15px 0;

    h1 {
      margin: 0;
      padding-left: 48px;
      font:
        500 16px/1.5 Inter,
        sans-serif;
      text-align: left;
    }

    .brand-mark {
      position: absolute;
      top: 47%;
      left: 14px;
      width: 15px;
      height: 15px;
      overflow: hidden;
      transform: translateY(-50%);
      border-radius: 100%;
      background:
        radial-gradient(
          ellipse at 72% 42%,
          rgb(255 205 24 / 90%) 0 13%,
          transparent 48%
        ),
        radial-gradient(
          ellipse at 16% 20%,
          rgb(239 95 91 / 88%) 0 20%,
          transparent 63%
        ),
        linear-gradient(
          115deg,
          #ef776f 0%,
          #f2a15c 38%,
          #f1c842 56%,
          #d7a0ca 100%
        );
    }
  }

  .step {
    padding: 12px 0;
    .prompt {
      display: inline-grid;
      grid-template-columns: 40px minmax(0, 1fr);
      border: 1px solid var(--line);
      border-radius: 8px;

      .label {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        padding: 5px 4px;
        background: var(--background_muted);
        color: var(--muted);
        border-right: 1px solid var(--line);
      }

      .unidad-dropdown {
        grid-column: 2;
        position: relative;

        .unidad-trigger {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          max-width: min(620px, 65vw);
          padding: 5px;
          border: 0;
          border-radius: 0 7px 7px 0;
          background: var(--background-emphasis);
          color: var(--ink);
          font: inherit;
          text-align: left;
          cursor: pointer;

          .unidad-caret {
            flex: 0 0 auto;
            width: 14px;
            height: 14px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.5;
            transition: transform 120ms ease;
          }

          &.open .unidad-caret {
            transform: rotate(180deg);
          }
        }

        .unidad-menu {
          position: absolute;
          z-index: 5;
          top: calc(100% + 6px);
          left: -8px;
          display: flex;
          flex-direction: column;
          width: max-content;
          min-width: 260px;
          max-width: min(620px, 80vw);
          /* max-height: 320px; */
          padding: 5px;
          overflow-y: auto;
          border: 1px solid var(--line);
          border-radius: 6px;
          background: var(--background);
          box-shadow: 0 8px 30px color-mix(in srgb, var(--ink) 16%, transparent);

          &[hidden] {
            display: none;
          }

          .unidad-option {
            padding: 7px 9px;
            border: 0;
            border-radius: 4px;
            background: transparent;
            color: var(--ink);
            font: inherit;
            text-align: left;
            cursor: pointer;

            &:hover,
            &.selected {
              background: var(--background_muted);
            }
          }
        }
      }
    }

    .step-heading {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 16px;

      .count {
        color: color-mix(in srgb, var(--ink) 54%, transparent);
        font-size: 12px;
      }
    }

    .criteria-list {
      display: flex;
      flex-direction: column;
      gap: 0;
      border: 1px solid var(--line);
      border-radius: 8px;
      max-height: 500px;
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-width: none;
      -ms-overflow-style: none;

      &::-webkit-scrollbar {
        display: none;
      }

      .criterion {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        align-items: flex-start;
        min-width: 0;
        background: var(--background_muted);

        &:has(input:checked) .criterion-content {
          background: var(--background-emphasis);
        }

        &.open .criterion-content {
          background: var(--background-emphasis);
        }

        input {
          grid-column: 1;
          width: 16px;
          height: 16px;
          margin: 8px 0 0 13px;
          appearance: none;
          border: 1px solid var(--line);
          border-radius: 50%;
          background: var(--background-emphasis);
          accent-color: var(--accent);
          cursor: pointer;

          &:checked {
            border-color: var(--line);
            background: var(--accent);
          }
        }

        .criterion-content {
          grid-column: 2;
          min-width: 0;
          border-left: 1px solid var(--line);
          background: var(--background);

          .criterion-name {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            gap: 8px;
            padding: 6px 7px;
            border: 0;
            background: transparent;
            color: inherit;
            font: inherit;
            text-align: left;
            cursor: pointer;

            > span {
              min-width: 0;
            }

            .criterion-caret {
              flex: 0 0 auto;
              width: 14px;
              height: 14px;
              fill: none;
              stroke: currentColor;
              stroke-width: 1.5;
              transition: transform 120ms ease;
            }
          }

          .criterion-detail-shell {
            display: grid;
            grid-template-rows: 0fr;
            min-height: 0;
            overflow: hidden;
            transition: grid-template-rows 200ms ease;

            .criterion-detail-clip {
              min-height: 0;
              overflow: hidden;
            }

            .criterion-detail {
              border: 1px solid var(--line);
              margin: 0 10px 10px;
              border-radius: 7px;

              .criterion-detail-content {
                min-height: 0;
                overflow: hidden;
                padding: 10px 12px;
              }
            }
          }

          .criterion-detail-row,
          .criterion-rule,
          .criterion-sources {
            min-width: 0;
          }

          .criterion-detail-row:first-child {
            margin-bottom: 15px;
          }

          .criterion-detail-label {
            color: var(--muted);
            font-size: 12px;
          }

          .source-name,
          .source-time {
            min-width: 0;
          }
        }

        &.open {
          .criterion-caret {
            transform: rotate(180deg);
          }

          .criterion-detail-shell {
            grid-template-rows: 1fr;
          }
        }
      }

      .criterion:not(:last-child) {
        border-bottom: 1px solid var(--line);
      }
    }

    &.results-step {
      #results {
        width: 100%;
      }

      .count {
        display: block;
        text-align: left;
        font-size: 12px;
        color: var(--muted);
      }

      .table-wrap {
        margin-top: 20px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        border: 1px solid var(--line);
        border-radius: 6px;

        &::-webkit-scrollbar {
          display: none;
        }

        .table-header,
        .table-body-wrap {
          width: max(100%, calc(var(--column-count) * 220px));
          min-width: 0;
        }

        .table-body-wrap {
          max-height: 440px;
          overflow-y: auto;
          overflow-x: clip;
          scrollbar-width: none;
          -ms-overflow-style: none;

          &::-webkit-scrollbar {
            display: none;
          }
        }

        table {
          width: 100%;
          min-width: 0;
          table-layout: fixed;
          border-collapse: separate;
          border-spacing: 0;
          font-size: 12px;
          white-space: nowrap;

          th,
          td {
            width: 220px;
            min-width: 220px;
            max-width: 260px;
            padding: 8px;
            overflow: hidden;
            border-right: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
            text-align: left;
            text-overflow: ellipsis;
          }

          th:last-child,
          td:last-child {
            border-right: 0;
          }

          th {
            background: var(--background_muted);
            font-weight: 500;
            text-transform: capitalize;
            cursor: help;
          }

          .table-sentinel td {
            height: 1px;
            padding: 0;
            border: 0;
          }

          tbody tr:nth-last-child(2) td {
            border-bottom: 0;
          }

          tbody {
            transition: opacity 140ms ease;

            &.updating {
              opacity: 0.35;
            }

            .empty-cell {
              color: var(--muted);
            }
          }
        }
      }

      .error {
        color: var(--accent);
      }
    }
  }
}

@media (max-width: 640px) {
  #app {
    width: min(100% - 24px, 880px);
    padding-top: 24px;

    .step .step-heading {
      align-items: flex-start;
      flex-direction: column;
      gap: 4px;
    }
  }
}