@layer components {
  /* merge requests: the review page. Hue only where it carries a verdict. */
  .mr-h .show-kv { margin-top: 0; }

  .mr-state[data-state="open"]::before { content: "● "; color: var(--teal); }
  .mr-state[data-state="merged"]::before { content: "✓ "; color: var(--teal); }
  .mr-state[data-state="closed"]::before { content: "✗ "; color: var(--red); }
  .mr-state[data-state="draft"]::before { content: "◌ "; color: var(--ink-dim); }
  /* the description: Markdown as a README, as wide as the header card above;
     the text inside keeps the reading measure */
  .mr-desc.prose { max-width: none; padding: var(--s4) var(--s5); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r); }
  .mr-desc.prose > * { max-width: var(--measure); }
  .mr-desc.prose > pre, .mr-desc.prose > table { max-width: 100%; }
  .c-text a { text-decoration: underline; }

  .since {
    display: inline-flex; flex-wrap: wrap; gap: var(--s1); padding: var(--s1);
    background: var(--bg-raised); border-radius: var(--r-s);
    & a { padding: var(--s1) var(--s3); border-radius: 4px; text-decoration: none; color: var(--ink-dim); font-size: var(--fs-s); }
    & a:hover { color: var(--ink-hi); }
    & a[aria-current] { color: var(--ink-hi); font-weight: 700; background: var(--bg-surface); box-shadow: 0 0 0 1px var(--border-strong); }
    & .mute { font-weight: 400; font-family: var(--mono); }
  }

  /* the bar above the diff of a merge request: the diff tools, the checks and
     the menus of the owner, on one line that follows the review */
  /* on a narrow screen the bar takes two lines: the diff tools, then the
     checks and the menus; the file headers stick under both */
  @media (max-width: 860px) {
    body:has(.mr-bar) { --bar-h: 96px; }
    .mr-bar .grow { flex-basis: 100%; height: 0; }
  }
  .mr-bar {
    gap: var(--s2);
    & .mr-ck { margin-left: 0; height: 32px; padding: 0 var(--s2); border-radius: var(--r-s); text-decoration: none; color: var(--ink-dim); font-size: var(--fs-s); }
    & .mr-ck:hover { background: var(--bg-raised); color: var(--ink-hi); }
  }

  /* a menu of the bar: a <details> whose panel opens under its button */
  .menu {
    position: relative;
    & > summary { list-style: none; }
    & > summary::-webkit-details-marker { display: none; }
    & > summary.primary::after { content: ""; width: 0; height: 0; margin-left: 2px; border: 4px solid transparent; border-top-color: currentColor; transform: translateY(2px); }
    & .menu-pop {
      position: absolute; right: 0; top: calc(100% + var(--s1)); z-index: 6; width: 320px; max-width: calc(100vw - 2 * var(--pad));
      display: grid; gap: var(--s3); padding: var(--s3) var(--s4);
      background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--r); box-shadow: 0 8px 24px rgb(0 0 0 / .18);
      font-size: var(--fs-s);
    }
    & .kv { margin: 0; }
  }
  .mmenu {
    & .d-modes { display: grid; gap: var(--s1); border: 0; padding: 0; margin: 0; }
    & .d-modes label, & .d-check {
      display: flex; gap: var(--s2); align-items: center; padding: 4px var(--s2); margin: 0 calc(-1 * var(--s2));
      border-radius: var(--r-s); color: var(--ink); cursor: pointer;
    }
    & .d-modes label:hover, & .d-check:hover { background: var(--bg-raised); }
    & .d-modes label:has(:checked) { background: var(--bg-raised); color: var(--ink-hi); font-weight: 600; }
    & .d-modes kbd, & .d-check kbd { margin-left: auto; }
    & input { accent-color: var(--ink-hi); margin: 0; }
    & .d-check { color: var(--ink-dim); }
    & .d-btns { display: flex; margin-top: var(--s1); }
    & .d-btns .btn { flex: 1; justify-content: center; }
    & .d-draft { color: var(--ink-dim); }
  }
  .omenu {
    & > summary { font-size: 18px; line-height: 1; }
    & .menu-pop { width: 280px; }
    & form .btn { width: 100%; justify-content: flex-start; }
    & .btn kbd { margin-left: auto; }
    & .d-or > summary { cursor: pointer; list-style: none; color: var(--ink-mute); }
    & .d-or > summary::-webkit-details-marker { display: none; }
    & .d-or > summary::before { content: "▸ "; }
    & .d-or[open] > summary::before { content: "▾ "; }
    & .d-or > summary:hover { color: var(--ink-hi); }
    & .d-or[open] > .clone { margin-top: var(--s2); }
    & .clone code { white-space: pre-wrap; overflow-wrap: anywhere; }
  }

  /* the rail of a merge request follows the review: it sticks under the
     header, one screen high, and scrolls on its own to its checks, commits
     and settings. The list of files keeps its own scroll, under a height, so
     that the blocks below it stay in reach. Only on a two-column layout. */
  @media (min-width: 1081px) {
    .rail:has(.r-files) {
      position: sticky; top: calc(var(--hdr-h, 0px) + var(--s4));
      max-height: calc(100dvh - var(--hdr-h, 0px) - var(--s4) * 2);
      overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    }
    /* the blocks keep their height: the rail scrolls, it does not squeeze them */
    .rail:has(.r-files) > * { flex: none; }
    .rail .r-files > .files { max-height: 55dvh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  }
  /* on one column the rail goes under the diff: the list of files keeps its
     own scroll, under a height */
  @media (max-width: 1080px) {
    .rail .r-files > .files { max-height: 50dvh; overflow-y: auto; overscroll-behavior: contain; }
  }
  .r-files {
    & > h2 kbd { margin-left: auto; }
    & > h2 .fold { width: 24px; height: 24px; margin: -2px -6px -2px 0; background: none; border-color: transparent; color: var(--ink-dim); }
    & > h2 .fold:hover { color: var(--ink-hi); border-color: var(--border-strong); }
    & > h2 .fold .ico { transition: transform .15s; }
    &[data-folded] > h2 { border-bottom: 0; }
    &[data-folded] > h2 .fold .ico { transform: rotate(-90deg); }
    &[data-folded] > :not(h2) { display: none; }
    & > .ffilter { margin: var(--s2) var(--s3) 0; }
    & > .ffilter input {
      width: 100%; height: 30px; padding: 0 var(--s2); font: inherit; font-size: var(--fs-s); color: inherit;
      background: var(--bg-inset); border: 1px solid var(--border-strong); border-radius: var(--r-s);
    }
    & > .files { margin: var(--s2) 0 !important; padding: 0 var(--s2); }
  }

  /* a file of the diff whose window is not loaded yet: about its room */
  .dlazy {
    display: flex; align-items: center; justify-content: center;
    background: repeating-linear-gradient(var(--bg-surface) 0 var(--lh-code), var(--paper-alt) var(--lh-code) calc(var(--lh-code) * 2));
    border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--r) var(--r);
    font-size: var(--fs-s);
    & a { color: var(--ink-mute); }
    &.dlazy-1 { height: 120px; } &.dlazy-2 { height: 360px; } &.dlazy-3 { height: 900px; } &.dlazy-4 { height: 1600px; }
    /* with scripts the window comes by itself: the link of the page without
       scripts would only flash */
    html.js & > a { visibility: hidden; }
    & .notice { margin: 0; }
  }
  .dloose {
    padding: var(--s2) var(--s3) var(--s3); background: var(--bg-surface);
    border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--r) var(--r);
  }

  .pcommits { font-size: var(--fs-s); display: grid; gap: var(--s1); }
  .pcommits li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px var(--s2); margin: 0 calc(-1 * var(--s2)); border-radius: 4px; }
  .pcommits li a { font-family: var(--mono); }
  .pcommits li[data-new] { background: var(--bg-raised); }
  .pcommits .s { color: var(--ink); }


  /* a note: a ruled block, under its line in the diff and in the list of comments */
  .cmt {
    padding: var(--s3) var(--s4); margin-top: var(--s3); max-width: var(--measure);
    background: var(--bg-surface); border: 1px solid var(--border); border-left: 3px solid var(--ink-hi); border-radius: var(--r-s);
    white-space: normal; font-family: var(--font); font-size: var(--fs-s); line-height: 22px;
    & p { white-space: normal; }
    & .c-who { font-weight: bold; }
    & .c-state { color: var(--ink-dim); }
    & .c-text { white-space: pre-wrap; overflow-wrap: anywhere; }
    & .c-where { font-size: var(--fs-s); overflow-wrap: anywhere; }
    & .c-act { margin-top: var(--s2); }
    & .c-act button { height: 26px; font-size: var(--fs-xs); }
    &[data-resolved="true"] { border-left-color: var(--border-strong); }
    &[data-resolved="true"] .c-text { color: var(--ink-dim); }
  }
  .dt .fnote td { background: var(--bg-canvas); padding: var(--s2) var(--s3); white-space: normal; }
  .dt .fnote .cmt, .dt .fnote .cform { margin: 0; }
  .dt .fnote .cmt + .cmt, .dt .fnote .cmt + .cform { margin-top: var(--s2); }
  .ln a { color: inherit; text-decoration: none; }
  .ln a:hover, .ln a:focus-visible { text-decoration: underline; color: var(--ink-hi); }

  /* the forms: a comment, a new merge request */
  .cform {
    display: grid; gap: var(--s2); margin-top: var(--s3); max-width: var(--measure);
    font-family: var(--font); font-size: var(--fs-s);
    & label { color: var(--ink-dim); font-weight: 600; }
    & textarea, & input[type="text"] {
      display: block; width: 100%; font: inherit; font-size: var(--fs); color: inherit; resize: vertical;
      background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--r-s); padding: var(--s2) var(--s3);
    }
    & textarea::placeholder { color: var(--ink-mute); opacity: 1; }
    & .f-btns { display: flex; gap: var(--s2); align-items: center; margin-top: var(--s1); }
  }

  .list.mrs {
    & .c-n { width: 64px; }
    & .c-state { width: 110px; }
    & .c-subject { overflow: hidden; text-overflow: ellipsis; }
    & .c-who { width: 140px; }
    & .c-when { width: 100px; }
    & tr[data-state="open"] .c-state { font-weight: bold; }
    & tr[data-state="open"] .c-state::before { content: "● "; color: var(--teal); }
    & tr[data-state="merged"] .c-state::before { content: "✓ "; color: var(--teal); }
    & tr[data-state="closed"] .c-state::before { content: "✗ "; color: var(--red); }
  }
  #mr-notice:empty { display: none; }

  @media (max-width: 700px) {
    .list.mrs .c-who { display: none; }
  }
}