@layer components {
  /* The check page: photo, checking and result (checks/new). */
  .checker__step {
    display: flex;
    flex-direction: column;
    gap: 24px;

    @media (min-width: 761px) {
      gap: 36px;
    }
  }

  /* A problem with the check itself, not a verdict on the photo: the warm neutral. */
  .checker__problem {
    background: var(--color-warm);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font: var(--text-small);
    padding: 12px 14px;

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

  /* Where the photo comes in. On a phone: the camera and the library. On a
   * desktop: a drop area with a file button, and the QR code beside it. */
  .drop {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 10px;

    @media (pointer: fine) {
      align-items: center;
      background: var(--color-surface);
      border: 1.5px dashed var(--color-muted);
      border-radius: 14px;
      padding: 36px 24px;
      text-align: center;
    }
  }

  .drop--over {
    border-color: var(--color-ink);
    border-style: solid;
  }

  .drop__icon,
  .drop__title {
    @media (pointer: coarse) {
      display: none;
    }
  }

  .drop__icon {
    --icon-size: 36px;
  }

  .drop__title {
    font: var(--text-h3);
  }

  .drop__camera {
    @media (pointer: fine) {
      display: none;
    }
  }

  .flow__button.drop__library {
    @media (pointer: coarse) {
      --btn-background: transparent;
      --btn-border: 1px solid var(--color-ink);
      --btn-color: var(--color-ink);
      --btn-hover-background: var(--color-surface);
    }

    @media (pointer: fine) {
      inline-size: auto;
      min-inline-size: 0;
    }
  }

  .drop__touch-label {
    @media (pointer: fine) { display: none; }
  }

  .drop__fine-label {
    @media (pointer: coarse) { display: none; }
  }

  .qr {
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-hairline);
    border-radius: 14px;
    display: grid;
    gap: 16px;
    grid-template-columns: 104px minmax(0, 1fr);
    padding: 14px 16px;

    @media (pointer: coarse) {
      display: none;
    }
  }

  .qr__code {
    block-size: 104px;
    color: var(--color-ink);
    inline-size: 104px;
  }

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

  .qr__title {
    font-size: 17px;
    font-weight: 600;
    line-height: 24px;
  }

  .flow-card.tips {
    gap: 10px;
    padding: 14px 16px;
  }

  .tips__title {
    font: 600 17px/24px var(--font-text);
  }

  .tips__list {
    display: flex;
    flex-direction: column;
    gap: 12px;

    li {
      display: grid;
      font-size: 16px;
      gap: 10px;
      grid-template-columns: 26px minmax(0, 1fr);
      line-height: 24px;
    }
  }

  .tips__number {
    color: var(--color-muted);
    font: 500 13px/24px var(--font-mono);
  }

  /* The stages of the check, ticking off as the worker reports them. */
  .stages {
    display: flex;
    flex-direction: column;
  }

  .stages__item {
    align-items: center;
    display: grid;
    gap: 2px 14px;
    grid-template-columns: 28px minmax(0, 1fr);
    padding: 12px 0;
    position: relative;

    &::before {
      background: var(--color-hairline);
      content: "";
      inset-block: 0;
      inset-inline-start: 13px;
      inline-size: 2px;
      position: absolute;
    }

    &:first-child::before { inset-block-start: 50%; }
    &:last-child::before { inset-block-end: 50%; }
  }

  .stages__dot {
    --icon-size: 14px;

    background: var(--color-ground);
    block-size: 28px;
    border: 2px solid var(--color-hairline);
    border-radius: 50%;
    color: transparent;
    display: grid;
    inline-size: 28px;
    place-items: center;
    position: relative;

    [data-state="done"] > & {
      background: var(--color-ink);
      border-color: var(--color-ink);
      color: var(--color-surface);
    }

    [data-state="now"] > & {
      background: var(--color-surface);
      border-color: var(--color-ink);
      border-style: dashed;
    }
  }

  .stages__title {
    color: var(--color-muted);
    font-size: 17px;
    font-weight: 600;
    line-height: 22px;

    [data-state="done"] > &,
    [data-state="now"] > & {
      color: var(--color-ink);
    }
  }

  .stages__detail {
    color: var(--color-muted);
    font: 500 13px/18px var(--font-mono);
    grid-column: 2;
  }

  .scan {
    aspect-ratio: 1;
    background: var(--color-placeholder);
    border: 1px solid var(--color-hairline);
    border-radius: 12px;
    inline-size: 100%;
    margin-inline: auto;
    max-inline-size: 420px;
    overflow: hidden;
    position: relative;
  }

  .scan__photo {
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
  }

  .scan__line {
    background: var(--color-ink);
    block-size: 2px;
    inset-inline: 0;
    opacity: 0.8;
    position: absolute;
    animation: scan 2.4s ease-in-out infinite alternate;
  }

  @keyframes scan {
    from { inset-block-start: 12%; }
    to { inset-block-start: 88%; }
  }

  /* The result: on a phone the heading, the photo, the checks, the buttons; on
   * a desktop the photo has its own column. */
  .result {
    display: grid;
    gap: 22px;
    grid-template-areas: "heading" "photo" "rows" "actions";

    @media (min-width: 900px) {
      align-items: start;
      column-gap: 72px;
      grid-template-areas: "heading photo" "rows photo" "actions photo";
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
      grid-template-rows: auto auto 1fr;
    }
  }

  .result__heading { grid-area: heading; }
  .result__photo { grid-area: photo; }
  .result__rows { grid-area: rows; }
  .result__actions { grid-area: actions; }

  .result__heading h1:focus {
    outline: none;
  }

  .result__form {
    display: contents;
  }

  .result__reasons {
    display: contents;
  }

  .preview {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    max-inline-size: 440px;
    position: relative;
  }

  .preview__canvas {
    aspect-ratio: 1;
    background: var(--color-placeholder);
    border: 1px solid var(--color-hairline);
    border-radius: 12px;
    display: block;
    inline-size: 100%;
  }

  .preview__marks {
    aspect-ratio: 1;
    inline-size: 100%;
    inset-block-start: 0;
    inset-inline-start: 0;
    pointer-events: none;
    position: absolute;
  }

  .preview__line {
    fill: none;
    stroke: var(--color-ink);
    stroke-width: 3;
  }

  .preview__line--dashed {
    stroke-dasharray: 14 10;
  }

  .preview__line--flag {
    stroke: var(--color-fail);
    stroke-width: 4;
  }

  .preview__label {
    fill: var(--color-ground);
    stroke: var(--color-ink);
    stroke-width: 2;
  }

  .preview__label--flag {
    fill: var(--color-fail);
    stroke: none;
  }

  .preview__text {
    fill: var(--color-ink);
    font: 500 19px var(--font-mono);
    letter-spacing: 0.04em;
  }

  .preview__text--flag {
    fill: var(--color-surface);
  }

  /* The checks: name, measurement, verdict. */
  .check-rows {
    background: var(--color-surface);
    border: 1px solid var(--color-hairline);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    padding: 4px 16px;
  }

  .check-row {
    align-items: center;
    border-block-start: 1px solid var(--color-hairline);
    display: grid;
    gap: 2px 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 10px 0;

    &:first-child { border-block-start: 0; }

    &:has(.chip--fail:not([hidden])) .check-row__name {
      color: var(--color-fail);
    }
  }

  .check-row__name {
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
  }

  .check-row__value {
    color: var(--color-muted);
    font: 500 13px/18px var(--font-mono);
    grid-column: 1;
  }

  .check-row__verdict {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  /* On the check page in retake mode: the expert's verdict, so its chip, and what to change. */
  .retake-notice {
    align-items: flex-start;
    background: var(--color-fail-tint);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    font: var(--text-small);
    gap: 6px;
    padding: 12px 14px;
  }
}