/* styles/sections/exhibit-check.css
 * Two exhibits checked against each other, and the answer (Code Review frames u6eJ8g 1440, DWV0p 390,
 * SC6Wj 1920). Exhibit A is a Brief document, Exhibit B a GitHub commit, both transcribed into
 * .artifact-window shells; the connector is Pencil's (assets/figures/code-review/connector-*.svg);
 * Brief's answer is a third window. Pencil sets text on whole-pixel lines (1.2em for "normal") and
 * draws strokes inside the box, so rules here are inset box-shadows (borders in forced colors).
 * The panels switch between the frames' arrangements by their own width: the D layout from 560px
 * (container "exhibit"), the answer's three columns from 1000px (container "answer"). */
@layer sections {
  /* ---------- Walkthrough settings: section-lg above, section-3xl below; the intro lede sits on the
     heading's last line (34 down on D, 50 on W) ---------- */
  .workflow-walkthrough--exhibits {
    padding-block: var(--section-lg) var(--section-3xl);
  }

  .workflow-walkthrough--exhibits .section-intro {
    --intro-heading-lh: round(nearest, 1.05em, 1px);
    --intro-lede-measure: 608px;
    --intro-lede-pad: 0px;
    --intro-lede-lh: round(nearest, 1.55em, 1px);
    --intro-lede-color: var(--ink-muted);
  }

  /* Line breaks the frames draw: the heading's from D (u6eJ8g, SC6Wj), the lede's from W (SC6Wj) */
  .exhibit-break,
  .exhibit-break--w { display: none; }

  @media (min-width: 900px) {
    .exhibit-break { display: initial; }
  }

  @media (min-width: 1680px) {
    .exhibit-break--w { display: initial; }
  }

  /* Balanced like every heading: pretty kept the frames' greedy breaks, but WebKit's pretty
     adds a third line here (BRI-7805 J57) */
  .workflow-walkthrough--exhibits .section-intro__heading { text-wrap: balance; }

  /* DWV0p draws the bottom edge 4px above the section's end; it meets the band instead, so no
     light strip shows between the dither and the closing (BRI-7805 J54) */

  /* The walk is a size container, so the intro heading can follow its column below */
  .exhibit-walk { container-type: inline-size; }

  @media (min-width: 900px) {
    /* From D the heading takes the frame's two lines (the break, then "with an audit behind it",
       9.06em). Its column is the row less the lede (47.5%) and the 48 gap, so below 1440 the size
       follows that column (9.2em of it) and the two lines hold; at 1440 it is the h1 role's 56. */
    .workflow-walkthrough--exhibits .section-intro {
      --intro-heading-size: min(var(--t-h1-size), (0.525 * 100cqi - 48px) / 9.2);
      --intro-lede-measure: min(608px, 47.5%);
      --intro-lede-pad: 34px;
    }
  }

  @media (min-width: 1680px) {
    .workflow-walkthrough--exhibits .section-intro {
      --intro-heading-size: var(--t-h1-size);
      --intro-lede-pad: 50px;
    }
  }

  /* ---------- Exhibit pair ---------- */
  .exhibit-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-40);
    align-items: start;
    margin-top: var(--space-64);
  }

  .exhibit {
    display: flex;
    flex-direction: column;
    gap: var(--space-28);
  }

  .exhibit--freeze { --exhibit-tone: var(--fern-app); --exhibit-kicker: var(--fern-app); }
  .exhibit--commit { --exhibit-tone: var(--orange); --exhibit-kicker: var(--orange-ink); }

  .exhibit__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-14);
  }

  .exhibit__kicker {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    line-height: 14px;
    letter-spacing: 1.2px;
    white-space: pre-wrap;
    color: var(--exhibit-kicker);
  }

  .exhibit__token {
    margin: 0;
    padding-bottom: var(--space-6);
    font-family: var(--font-mono);
    font-size: 23px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0;
    color: var(--ink);
    overflow-wrap: anywhere;
    box-shadow: inset 0 -3px 0 var(--exhibit-tone);
  }

  .exhibit__body {
    margin: 0;
    font-size: 17px;
    line-height: 26px;
    color: var(--ink-2);
  }

  @media (min-width: 900px) {
    .exhibit-pair {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-64);
      margin-top: 88px;
    }

    .exhibit__token { font-size: 32px; line-height: 38px; }
    .exhibit__body { font-size: 18px; line-height: 28px; }
  }

  /* ---------- Panels: the shared window (radius 12, 1px --line-2 edge) around transcribed UI ---------- */
  .exhibit__panel,
  .answer-panel {
    margin: 0;
    container-type: inline-size;
  }

  .exhibit__panel { container-name: exhibit; }
  .answer-panel {
    --answer-pad: var(--space-20);
    --answer-label: var(--ink-55);
    container-name: answer;
  }

  .exhibit__panel :is(p, dl, dd, blockquote),
  .answer-panel :is(p, dl, dd) { margin: 0; }

  .exhibit__panel dd { text-wrap: wrap; }

  /* Brief document (Exhibit A): the app's palette */
  .doc-panel__bar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-10);
    padding: var(--space-14) var(--space-20);
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    color: var(--app-ink-2);
    box-shadow: inset 0 -1px 0 var(--app-line);
  }

  /* Pencil lays each text node in a whole-pixel box, rounded up (Documents 70, User Research 87);
     the text boxes here carry the mean of that rounding so the crumbs land where the frame sets them */
  .doc-panel__bar > :not(.doc-panel__sep),
  .commit-panel__bar > :not(.commit-panel__icon) { padding-inline-end: 0.75px; }

  .doc-panel__bar > strong {
    font-weight: 600;
    color: var(--app-ink);
  }

  .doc-panel__sep {
    flex: none;
    width: 12px;
    height: 12px;
    background: var(--app-placeholder);
    mask: url("/assets/figures/code-review/icon-chevron-right.svg") center / contain no-repeat;
  }

  .doc-panel__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-14);
    padding: var(--space-32) var(--space-20);
    font-size: 14px;
    line-height: 17px;
    color: var(--app-ink);
  }

  .doc-panel__title {
    font-size: 21px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: -0.3px;
  }

  .doc-panel__meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-bottom: var(--space-10);
    color: var(--app-ink-2);
  }

  /* Owner and decision: four parts 4px apart, as the frame lays them out */
  .doc-panel__owner {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-4);
  }

  .doc-panel__meta strong {
    font-weight: 600;
    color: var(--app-ink);
  }

  .doc-panel__quote {
    padding: var(--space-4) 0 var(--space-4) var(--space-20);
    font-size: 15px;
    line-height: 23px;
    box-shadow: inset 3px 0 0 var(--app-line-strong);
  }

  /* The table edge is an inset outline: it paints over the rows' fills, as Pencil's stroke does */
  .doc-table {
    overflow: hidden;
    border-radius: 6px;
    outline: 1px solid var(--app-line);
    outline-offset: -1px;
  }

  .doc-table__rows { display: contents; }

  .doc-table__row {
    display: flex;
    flex-direction: column;
    background: var(--white);
    box-shadow: inset 0 -1px 0 var(--app-line);
  }

  .doc-table__row--head {
    font-weight: 600;
    background: var(--app-panel);
  }

  .doc-table__row > :first-child {
    flex: none;
    padding: var(--space-12) var(--space-16);
  }

  .doc-table__row > :last-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 5px;
    padding: var(--space-12) var(--space-14);
    box-shadow: inset 1px 0 0 var(--app-line);
  }

  .doc-table__row:last-child > :last-child { line-height: 20px; }

  .doc-chip {
    flex: none;
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    background: var(--app-fern-soft);
    color: var(--fern-app);
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 16px;
    box-shadow: inset 0 -2px 0 var(--fern-app);
  }

  .doc-chip--pending {
    background: var(--app-amber-soft);
    color: var(--app-amber-ink);
    box-shadow: inset 0 -2px 0 var(--orange);
  }

  .doc-panel__prose {
    font-size: 15px;
    line-height: 24px;
    color: var(--app-prose);
  }

  @container exhibit (min-width: 560px) {
    /* u6eJ8g's crumbs (546) run 2px into the bar's 32 end padding; 24 at the end keeps them on one
       line where the frame does */
    .doc-panel__bar {
      flex-flow: row wrap;
      align-items: center;
      padding-inline: var(--space-32) var(--space-24);
    }

    .doc-panel__body { padding-inline: var(--space-32); }

    .doc-panel__title {
      font-size: 28px;
      line-height: 29px;
      letter-spacing: -0.4px;
    }

    .doc-table__row { flex-direction: row; }
    .doc-table__row > :first-child { width: 228px; }
    .doc-table__row > :last-child { flex: 1 1 0; min-width: 0; }
  }

  /* GitHub commit (Exhibit B) */
  .commit-panel {
    font-size: 13px;
    line-height: 16px;
    color: var(--gh-ink);
  }

  .commit-panel__icon {
    flex: none;
    width: 14px;
    height: 14px;
    background: var(--gh-ink-muted);
    mask: var(--icon) center / contain no-repeat;
  }

  .commit-panel__icon--repo { --icon: url("/assets/figures/code-review/icon-repo.svg"); }
  .commit-panel__icon--copy { --icon: url("/assets/figures/code-review/icon-copy.svg"); }

  .commit-panel__icon--chevron {
    --icon: url("/assets/figures/code-review/icon-chevron-down.svg");
    width: 16px;
    height: 16px;
  }

  .commit-panel__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-14) var(--space-20);
    font-weight: 500;
    color: var(--gh-ink-muted);
    box-shadow: inset 0 -1px 0 var(--brief-rule);
  }

  .commit-panel__bar > span { white-space: pre; }

  .commit-panel__bar > strong {
    font-weight: 600;
    color: var(--gh-ink);
  }

  .commit-panel__title {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    padding: var(--space-24) var(--space-20) var(--space-8);
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
  }

  .commit-panel__sha {
    padding: 2px var(--space-8);
    border-radius: 6px;
    background: var(--gh-sha);
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
  }

  .commit-panel__message {
    padding: 0 var(--space-20) var(--space-24);
    font-family: var(--font-mono);
    font-size: 15px;
    line-height: 18px;
    box-shadow: inset 0 -1px 0 var(--gh-line);
  }

  .commit-panel__file {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    padding: var(--space-12) var(--space-16);
    background: var(--gh-subtle);
    box-shadow: inset 0 -1px 0 var(--gh-line);
  }

  .commit-panel__path {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 17px;
  }

  .commit-panel__name { flex: 1 1 0; min-width: 0; }

  .commit-panel__adds {
    font-family: var(--font-mono);
    color: var(--fern-app);
  }

  /* The added line: a 3px fern rule at the start edge, under the gutter where the gutter covers it */
  .commit-panel__line {
    display: flex;
    align-items: flex-start;
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 17px;
    box-shadow: inset 3px 0 0 var(--fern-app);
  }

  .commit-panel__num {
    flex: none;
    width: 36px;
    padding: var(--space-10) 0;
    background: var(--gh-subtle);
    font-size: 13px;
    line-height: 16px;
    text-align: center;
    color: var(--gh-ink-muted);
  }

  .commit-panel__code {
    display: block;
    min-width: 0;
    padding: var(--space-8) var(--space-10);
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 17px;
  }

  /* Two lines on M, as DWV0p wraps the statement; one inline run in the D layout. A run, not a flex
     row: a flex row drops the space between "benchmarks" and "RENAME". */
  /* pre-wrap: the statement keeps its spaces and, at 320, breaks "RENAME TO" from the new name
     instead of running past the panel edge */
  .commit-panel__wrap {
    display: block;
    line-height: 18px;
    white-space: pre-wrap;
  }

  .commit-panel__wrap + .commit-panel__wrap {
    margin-top: 2px;
    padding-left: var(--space-14);
  }

  .commit-panel__plus { color: var(--fern-app); }
  .commit-panel__keyword { color: var(--diff-keyword); }

  .commit-panel__mark {
    padding-bottom: 1px;
    box-shadow: inset 0 -2px 0 var(--fern-app);
  }

  .commit-panel__mark--new { box-shadow: inset 0 -2px 0 var(--orange); }

  .commit-panel__facts {
    display: flex;
    flex-direction: column;
    padding: 46px var(--space-20) var(--space-24);
  }

  .commit-panel__facts > div {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    padding-block: 17px;
    box-shadow: inset 0 1px 0 var(--brief-rule);
  }

  .commit-panel__facts dt {
    font-size: 16px;
    line-height: 19px;
    color: var(--ink-2);
  }

  .commit-panel__facts dd {
    font-family: var(--font-mono);
    font-size: 15px;
    line-height: 18px;
    white-space: pre;
    color: var(--ink);
  }

  .commit-panel__facts > .commit-panel__fact--key {
    box-shadow: inset 0 1px 0 var(--ink), inset 0 -1px 0 var(--ink);
  }

  .commit-panel__fact--key :is(dt, dd) {
    font-weight: 600;
    color: var(--ink);
  }

  @container exhibit (min-width: 560px) {
    .commit-panel__bar { padding-inline: var(--space-32); }

    .commit-panel__title {
      padding-inline: var(--space-32);
      font-size: 26px;
      line-height: 31px;
    }

    .commit-panel__sha { font-size: 24px; line-height: 29px; }
    .commit-panel__message { padding: 0 var(--space-32) var(--space-24); }

    .commit-panel__file {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }

    .commit-panel__name { flex: 0 1 auto; }
    .commit-panel__line { align-items: stretch; }

    .commit-panel__num {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 72px;
      min-height: 34px;
      padding: 0;
    }

    .commit-panel__code { padding: var(--space-8) var(--space-16); }
    .commit-panel__wrap { display: inline; }

    .commit-panel__wrap + .commit-panel__wrap {
      margin-top: 0;
      padding-left: 0;
    }

    .commit-panel__facts { padding-inline: var(--space-32); }

    .commit-panel__facts > div {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }

  /* ---------- Connector: Pencil's two thread lines and stem, stretched to the row as the frames
     stretch them (1280 x 124 drawn at 1280 and 1680), the 12px node at the centre. On M the node and
     stems (connector-m.svg, 12 x 120 from 24 above the box) come in two pieces around the label, which
     sits in flow: 24 above it, 14 + 44 of lower stem below it, so a label that wraps (320) pushes the
     stem down instead of running into it. ---------- */
  .exhibit-check {
    position: relative;
    padding: 24px 0 58px;
  }

  .exhibit-check::before,
  .exhibit-check::after {
    content: "";
    position: absolute;
    left: calc(50% - 6px);
    width: 12px;
    background: url("/assets/figures/code-review/connector-m.svg") 0 0 / 12px 120px no-repeat;
  }

  .exhibit-check::before {
    top: -24px;
    height: 36px;
  }

  .exhibit-check::after {
    bottom: 0;
    height: 44px;
    background-position: 0 100%;
  }

  .exhibit-check > .exhibit-check__label {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    line-height: 14px;
    letter-spacing: 1.2px;
    text-align: center;
    text-wrap: balance;
    color: var(--ink);
  }

  @media (min-width: 900px) {
    .exhibit-check {
      height: 124px;
      padding: 0;
    }

    .exhibit-check::before {
      top: 0;
      left: 0;
      width: 100%;
      height: 124px;
      background: url("/assets/figures/code-review/connector-lines.svg") 0 0 / 100% 124px no-repeat;
    }

    .exhibit-check::after {
      top: 46px;
      bottom: auto;
      height: 12px;
      background: url("/assets/figures/code-review/connector-node.svg") 0 0 / 12px 12px no-repeat;
    }

    .exhibit-check > .exhibit-check__label {
      position: absolute;
      top: 66px;
      left: 0;
      right: 0;
    }
  }

  /* The W frame keeps the label at x 652 of its 1680 row: 188px left of the centre */
  @media (min-width: 1680px) {
    .exhibit-check > .exhibit-check__label {
      right: auto;
      left: calc(50% - 188px);
      text-align: left;
    }
  }

  /* ---------- Brief's answer ---------- */
  .answer-panel__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    padding: 18px var(--answer-pad);
    box-shadow: inset 0 -1px 0 var(--brief-rule);
  }

  .answer-panel__who {
    display: flex;
    align-items: center;
    gap: var(--space-12);
  }

  .answer-panel__who > span:last-child,
  .answer-panel__sources-label,
  .answer-panel__row > dt {
    font-size: 12px;
    font-weight: 600;
    line-height: 14px;
    letter-spacing: 1.2px;
    color: var(--answer-label);
  }

  .answer-panel__rows {
    padding: var(--space-8) var(--answer-pad) var(--space-16);
  }

  .answer-panel__row {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
    padding-block: var(--space-28);
  }

  .answer-panel__row + .answer-panel__row { box-shadow: inset 0 1px 0 var(--brief-rule); }

  .answer-panel__row > dd {
    font-size: 17px;
    line-height: 27px;
    color: var(--ink);
  }

  /* The frame keeps the empty sources slot (1px) under the next step */
  .answer-panel__row--next { padding-bottom: 61px; }

  .answer-panel__row--next > dd {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 600;
    line-height: 26px;
    letter-spacing: -0.3px;
  }

  .answer-panel__row > .answer-panel__sources {
    padding-top: 2px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 16px;
    text-align: right;
    white-space: pre-wrap;
    color: var(--fern-app);
  }

  .answer-panel__footer {
    padding: 18px var(--answer-pad);
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 16px;
    white-space: pre-wrap;
    color: var(--ink);
    box-shadow: inset 0 1px 0 var(--brief-rule);
  }

  /* A container query styles the container's children, not the container: the padding is set on them */
  @container answer (min-width: 1000px) {
    .answer-panel > * { --answer-pad: var(--space-40); }

    .answer-panel__header {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }

    .answer-panel__row {
      flex-direction: row;
      align-items: baseline;
      gap: var(--space-40);
    }

    .answer-panel__row > dt { flex: none; width: 140px; }
    .answer-panel__row > dd:nth-child(2) { flex: 0 1 640px; min-width: 0; }
    .answer-panel__row > .answer-panel__sources { flex: 1 1 0; min-width: 0; }
    .answer-panel__row--next { padding-bottom: var(--space-28); }

    .answer-panel__row--next > dd {
      font-size: 28px;
      line-height: 35px;
      letter-spacing: -0.4px;
    }
  }

  @media (forced-colors: active) {
    .exhibit__token { border-bottom: 3px solid CanvasText; }

    .doc-panel__bar,
    .doc-table__row,
    .commit-panel__bar,
    .commit-panel__message,
    .commit-panel__file,
    .answer-panel__header { border-bottom: 1px solid CanvasText; }

    .doc-table { border: 1px solid CanvasText; }

    .commit-panel__facts > div,
    .answer-panel__row + .answer-panel__row,
    .answer-panel__footer { border-top: 1px solid CanvasText; }

    .doc-panel__sep,
    .commit-panel__icon { background: CanvasText; }
  }
}