/* The review pages (/review): a ship's evidence on the left and its decision panel on the right, sticky, so it's in
   reach however far down you've read; on a phone, the panel follows the evidence. The rest is the admin pages' look
   (project/admin.css). */
@layer sections {
  .admin.review {
    max-inline-size: 1280px;
  }

  .review__columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 28px;
    align-items: start;

    @media (width < 900px) {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .review__evidence {
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-inline-size: 0;
  }

  .review__panel {
    position: sticky;
    inset-block-start: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--border-header);
    background: var(--surface-grid);

    @media (width < 900px) {
      position: static;
    }
  }

  /* Who's on it: you (with Skip), or someone else (the page is theirs to decide). */
  .review__claim {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;

    p {
      flex: 1;
      margin: 0;
    }

    &[data-claimed="other"] {
      padding: 8px 10px;
      background: var(--yellow-100);
      color: var(--amber-900);
    }
  }

  /* An admin changing an approved ship's hours: folded away until it's wanted. */
  .review__change-hours {
    font: 13px var(--font-cell);

    summary {
      cursor: pointer;
      text-decoration: underline;
    }

    .review__form {
      margin-top: 8px;
    }
  }

  .review__form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font: 13px var(--font-cell);
  }

  /* Only the picked verdict's fields and words. */
  .review__form:has([name$="[decision]"][value="approved"]:checked) [data-when]:not([data-when~="approved"]),
  .review__form:has([name$="[decision]"][value="changes_requested"]:checked) [data-when]:not([data-when~="changes_requested"]),
  .review__form:has([name$="[decision]"][value="rejected"]:checked) [data-when]:not([data-when~="rejected"]),
  .review__form:has([name$="[decision]"][value="hold"]:checked) [data-when]:not([data-when~="hold"]) {
    display: none;
  }

  .review__verdicts {
    display: flex;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-control);
    border-radius: 4px;
    overflow: hidden;
  }

  .review__verdict {
    flex: 1;
    position: relative;
    text-align: center;
    cursor: pointer;

    & + & {
      border-inline-start: 1px solid var(--border-control);
    }

    input {
      position: absolute;
      opacity: 0;
    }

    span {
      display: block;
      padding: 7px 4px;
      font-weight: 500;
    }

    &:has(input:checked) span {
      background: var(--blue-100);
      color: var(--blue-700);
    }

    &:has(input:focus-visible) span {
      outline: 2px solid var(--selection);
      outline-offset: -2px;
    }
  }

  /* Sending it on: where to, a line each. */
  .review__holds {
    margin: 0;
    padding: 0;
    border: 0;

    legend {
      padding: 0;
      font-weight: 500;
    }

    label {
      display: flex;
      gap: 6px;
      align-items: baseline;
    }
  }

  /* The fraud check's 1 to 10, a cell each: red where it rejects. */
  .review__scores {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    margin: 0;
    padding: 0;
    border: 0;

    legend {
      margin-block-end: 6px;
      padding: 0;
      font-weight: 500;
    }
  }

  .review__score {
    position: relative;
    text-align: center;
    cursor: pointer;
    border: 1px solid var(--border-control);

    & + & {
      border-inline-start: 0;
    }

    input {
      position: absolute;
      opacity: 0;
    }

    span {
      display: block;
      padding: 6px 0;
      font: 500 13px var(--font-mono);
    }

    &[data-passes="false"] span {
      color: var(--red);
    }

    &:has(input:checked) span {
      background: var(--blue-100);
      color: var(--blue-700);
    }

    &[data-passes="false"]:has(input:checked) span {
      background: #fdecee;
      color: var(--red);
    }

    &:has(input:focus-visible) span {
      outline: 2px solid var(--selection);
      outline-offset: -2px;
    }
  }

  .review__check {
    display: flex;
    gap: 6px;
    align-items: center;
  }

  .review__hold {
    margin: 0;
    padding: 8px 10px;
    border-inline-start: 3px solid var(--amber-900);
    background: var(--yellow-100);
    font: 13px var(--font-cell);
    white-space: pre-line;
  }

  .admin tr[data-hold="admin"],
  .admin tr[data-hold="fraud"] {
    background: var(--yellow-100);
  }

  .review__hint {
    margin: 0;
    color: var(--text-secondary);
  }

  .review__field {
    display: flex;
    flex-direction: column;
    gap: 4px;

    label {
      font-weight: 500;
      color: var(--text-primary);
    }

    textarea,
    input[type="url"] {
      padding: 6px 8px;
      border: 1px solid var(--border-header);
      font: 13px var(--font-cell);
      resize: vertical;
    }
  }

  .review__submit {
    align-self: flex-start;
  }

  .review__errors {
    margin: 0;
    padding: 8px 8px 8px 24px;
    border: 1px solid var(--red);
    color: var(--red);
  }

  .review__history {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    font: 13px var(--font-cell);
  }

  .admin .review__call[data-decision] {
    padding: 8px 10px;
    color: var(--text-primary);
    border-inline-start: 3px solid var(--border-header);
    background: var(--surface-header);

    &[data-decision="approved"] {
      border-color: var(--green);
    }

    &[data-decision="rejected"] {
      border-color: var(--red);
    }
  }

  .review__call-head,
  .review__call-text {
    margin: 0;
  }

  .review__call-text {
    margin-block-start: 4px;
    white-space: pre-line;
    overflow-wrap: anywhere;

    a {
      color: var(--blue-700);
    }
  }

  /* What we found: Hackatime a day as a strip of cells (darker, more time), sessions and commits as tables. */
  .review__evidence-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .review__evidence-head {
    display: flex;
    align-items: baseline;
    gap: 10px;

    .admin__heading {
      margin: 0;
    }

    form {
      margin-inline-start: auto;
    }
  }

  .review__subheading {
    margin: 8px 0 0;
    font: 600 13px var(--font-cell);
    color: var(--text-primary);
  }

  .review__days {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .review__day {
    inline-size: 16px;
    block-size: 16px;
    border: 1px solid var(--border-grid);
    background: var(--surface-grid);

    &[data-level="1"] { background: #c6e8d2; }
    &[data-level="2"] { background: #8fd0a8; }
    &[data-level="3"] { background: #3e9d63; }
    &[data-level="4"] { background: var(--green-dark); }
  }

  .review__table {
    font-size: 13px;

    td a {
      color: var(--blue-700);
    }
  }

  .review__commits {
    max-block-size: 360px;
    overflow: auto;
  }

  /* What Hackatime makes of their hours: red is it saying they've logged time they didn't build. */
  .review__trust {
    margin: 0;
    padding: 6px 8px;
    border-inline-start: 3px solid var(--border-grid);
    font: 13px var(--font-cell);
    color: var(--text-primary);

    &[data-trust="red"] { border-inline-start-color: var(--red); }
    &[data-trust="yellow"] { border-inline-start-color: var(--amber-900); }
    &[data-trust="green"] { border-inline-start-color: var(--green-dark); }
  }

  /* Lapse recordings of the ship's Hackatime projects, each with its page on Lapse and the video itself. */
  .review__timelapses {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;

    p {
      margin: 0;
    }

    a {
      color: var(--blue-700);
    }

    video {
      inline-size: 100%;
      max-inline-size: 420px;
      margin-block-start: 4px;
      border: 1px solid var(--border-grid);
      background: var(--surface-grid);
    }
  }

  .review__duplicates {
    margin: 0;
    padding-inline-start: 18px;
    font: 13px var(--font-cell);

    a {
      color: var(--blue-700);
    }
  }

  /* Flags: red ones open, with the box to dismiss them; warnings folded; dismissed ones last. */
  .review__flags {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font: 13px var(--font-cell);

    p {
      margin: 0;
    }
  }

  .review__flag {
    padding: 6px 8px;
    border-inline-start: 3px solid var(--border-header);
    background: var(--surface-header);

    &[data-severity="danger"] {
      border-color: var(--red);
      background: #fdecee;
    }

    &[data-severity="warn"] {
      border-color: var(--amber-900);
      background: var(--yellow-100);
    }

    summary {
      cursor: pointer;
    }

    ul {
      margin: 6px 0 0;
      padding-inline-start: 18px;
    }
  }

  .review__dismiss {
    display: flex;
    gap: 6px;
    margin-block-start: 6px;

    input {
      flex: 1;
      min-inline-size: 0;
      padding: 4px 6px;
      border: 1px solid var(--border-header);
      font: 12px var(--font-cell);
    }
  }

  .admin [data-decision="changes_requested"] {
    color: var(--amber-900);
  }

  .admin [data-decision="rejected"] {
    color: var(--red);
  }
}