/* A page's Screenshot on the Site page (resource_concerns/_appearance_screenshot),
   one root: .appearance-screenshot. Its one-picture form and its "no picture"
   line are modifiers of the root, not roots of their own. Folded in from the
   visual-drift-surfaces prototype (round 7, variant j).

   NOTHING IS DRAWN ON A STORED SCREENSHOT (visual-differences spec §2): the
   changed tiles are boxes positioned over an unmodified image, in percent of
   it, so they scale with whatever width the card or drawer gives it.

   The tabs are CSS-only radios: two pictures of one page share the page (the
   card and its row's drawer), so state lives in each picture's own inputs,
   keyed on class rather than id. The open tab shares the frame's fill and
   erases its top edge. */
.appearance-screenshot {
  margin: 1rem 0 0;

  & img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--color-border);
    border-radius: 3px;
  }

  & > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  & .appearance-screenshot-tabs {
    display: flex;
    position: relative;
    z-index: 1;
  }

  & .appearance-screenshot-tabs label {
    margin-right: -1px;
    margin-bottom: -1px;
    padding: 0.4rem 1rem;
    cursor: pointer;
    font-size: 0.85rem;
    white-space: nowrap;
    border: 1px solid var(--color-border);
    border-radius: 6px 6px 0 0;
    background: var(--color-bg);
    color: var(--color-text-muted);
  }

  & .appearance-screenshot-in-approved:checked ~ .appearance-screenshot-tabs .appearance-screenshot-tab-approved,
  & .appearance-screenshot-in-latest:checked ~ .appearance-screenshot-tabs .appearance-screenshot-tab-latest,
  & .appearance-screenshot-in-difference:checked ~ .appearance-screenshot-tabs .appearance-screenshot-tab-difference,
  & .appearance-screenshot-in-slider:checked ~ .appearance-screenshot-tabs .appearance-screenshot-tab-slider {
    background: var(--color-surface);
    color: var(--color-text);
    font-weight: 600;
    border-color: var(--color-text);
    border-bottom-color: var(--color-surface);
  }

  & .appearance-screenshot-frames {
    padding: 0.6rem;
    border: 1px solid var(--color-text);
    border-radius: 0 6px 6px 6px;
    background: var(--color-surface);
  }

  /* Outranks `& img` above, which would otherwise show every tab at once. */
  & .appearance-screenshot-frames > * {
    display: none;
    width: 100%;
  }

  & .appearance-screenshot-in-approved:checked ~ .appearance-screenshot-frames .appearance-screenshot-approved,
  & .appearance-screenshot-in-latest:checked ~ .appearance-screenshot-frames .appearance-screenshot-latest,
  & .appearance-screenshot-in-difference:checked ~ .appearance-screenshot-frames .appearance-screenshot-difference,
  & .appearance-screenshot-in-slider:checked ~ .appearance-screenshot-frames .appearance-screenshot-slider {
    display: block;
  }

  /* Difference: the page greyed, and each changed tile lit in full colour. */
  & .appearance-screenshot-difference {
    position: relative;
  }

  & .appearance-screenshot-difference > img {
    filter: grayscale(1) opacity(0.3);
  }

  & .appearance-screenshot-lit {
    position: absolute;
    outline: 2px solid var(--color-fail);
    background: rgb(180 35 24 / 0.12);
  }

  /* Slider: the approved picture over the latest, clipped at --pos. */
  & .appearance-screenshot-slider {
    --pos: 50%;
  }

  & .appearance-screenshot-stage {
    position: relative;
    overflow: hidden;
  }

  & .appearance-screenshot-stage img {
    border: 0;
  }

  & .appearance-screenshot-over {
    position: absolute;
    inset: 0;
    clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  }

  & .appearance-screenshot-mark {
    position: absolute;
    box-sizing: border-box;
    border: 2px solid var(--color-fail);
  }

  & .appearance-screenshot-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pos);
    width: 2px;
    margin-left: -1px;
    background: #fff;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.4);
    pointer-events: none;
  }

  & .appearance-screenshot-range {
    display: block;
    width: 100%;
    margin: 0.5rem 0 0;
  }

  & .appearance-screenshot-ends {
    display: flex;
    justify-content: space-between;
    margin: 0.3rem 0 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
  }

  & .appearance-screenshot-caption,
  & figcaption {
    margin: 0.4rem 0 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
  }

  /* What a page that turned us away showed instead: evidence, not the page. */
  &.appearance-screenshot--evidence img {
    border: 2px dashed var(--color-degraded);
  }

  &.appearance-screenshot--gone {
    color: var(--color-text-muted);
  }

  @media (max-width: 40rem) {
    & .appearance-screenshot-tabs label {
      padding: 0.4rem 0.6rem;
    }
  }
}