@layer components {
  /* page title for a file: name, then its actions as plain words */
  .file-h {
    display: flex; gap: var(--s4); align-items: center; flex-wrap: wrap; font-size: 18px;
    & > span:first-child { overflow-wrap: anywhere; }
    & .acts { margin-left: auto; display: flex; gap: var(--s2); }
  }
  .notice {
    padding: var(--s3) var(--s4); max-width: var(--measure); font-size: var(--fs-s);
    background: var(--bg-surface); border: 1px solid var(--border-strong); border-left: 3px solid var(--ink-hi); border-radius: var(--r-s);
  }
  .note { color: var(--ink-dim); font-size: var(--fs-s); }
  .pad { padding: var(--s3) var(--s4); }

  /* source view: gutter numbers are links (selectable lines), lines span the full width */
  .code {
    overflow-x: auto; padding: var(--s3) 0; font-family: var(--mono);
    background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r);
    font-size: var(--fs-code); line-height: var(--lh-code);
    & code { display: grid; min-width: max-content; }
    & .line { padding-right: var(--pad); border-left: 2px solid transparent; }
    & .line:hover { background: var(--row); }
    & .line.sel { background: var(--sel); border-left-color: var(--focus); }
    & .ln {
      display: inline-block; width: 8ch; padding-right: 2ch; text-align: right; /* 8ch: a multiple of tab-size, so tabs after the gutter keep their width */
      color: var(--ink-mute); text-decoration: none; user-select: none;
    }
    & .ln:hover, & .sel .ln { color: var(--ink-hi); }
  }
  .source > summary { color: var(--ink-dim); font-size: var(--fs-s); }
  .source[open] > summary { margin-bottom: var(--s3); }
  .img-view { padding: var(--s4); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r); }

  /* commit header, like `git show` */
  .show {
    padding: var(--s5); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r);
    & h1 { max-width: var(--measure); overflow-wrap: anywhere; }
    & .msg { margin-top: var(--s3); white-space: pre-wrap; max-width: var(--measure); color: var(--ink-dim); font-size: var(--fs-s); }
    & .show-kv { margin-top: var(--s4); }
    & .show-kv dd { white-space: normal; overflow-wrap: anywhere; }
  }
  .diff-tools {
    display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap;
    position: sticky; top: var(--hdr-h, 0px); z-index: 5; padding: var(--s2) 0; background: var(--bg-canvas);
    & .grow { flex: 1; }
  }

  /* one file of a diff */
  .dfile { --lnw: 4ch; }
  .lnw-2 { --lnw: 2ch; } .lnw-3 { --lnw: 3ch; } .lnw-4 { --lnw: 4ch; } .lnw-5 { --lnw: 5ch; } .lnw-6 { --lnw: 6ch; } .lnw-7 { --lnw: 7ch; }
  .dfile {
    margin-top: var(--s3); scroll-margin-top: calc(var(--hdr-h, 0px) + var(--bar-h, 48px) + 8px);
    /* a file far from the screen is neither laid out nor painted: a diff of
       hundreds of files scrolls and switches layout like a short one. The
       browser remembers the last size it rendered (auto). */
    content-visibility: auto; contain-intrinsic-size: auto 480px;
    & > summary {
      /* under the diff tools, whose height --bar-h is (two lines when they
         wrap: the merge request bar on a narrow screen) */
      position: sticky; top: calc(var(--hdr-h, 0px) + var(--bar-h, 48px)); z-index: 4;
      background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r) var(--r) 0 0; padding: var(--s2) var(--s3);
      font-family: var(--mono); font-size: var(--fs-s);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; list-style: none;
    }
    &:not([open]) > summary { border-radius: var(--r); }
    & > summary::-webkit-details-marker { display: none; }
    & > summary::before { content: "▸ "; }
    &[open] > summary::before { content: "▾ "; }
    & .st { font-weight: bold; }
    & .p { font-weight: bold; }
    & > .note { border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--r) var(--r); background: var(--bg-surface); }
  }
  .dt {
    width: max-content; min-width: 100%; font-family: var(--mono);
    font-size: var(--fs-code); line-height: var(--lh-code);
    & td { padding: 0; vertical-align: top; }
    /* the gutter is as wide as the largest line number of the file (lnw-N on
       .dfile), plus 1ch on each side */
    & .ln { width: calc(var(--lnw) + 2ch); min-width: calc(var(--lnw) + 2ch); padding: 0 1ch; text-align: right; color: var(--ink-mute); user-select: none; }
    & .m { width: 2ch; text-align: center; user-select: none; color: var(--ink-dim); }
    & .tx { white-space: pre; }
    & .hunk td { color: var(--ink-mute); background: var(--paper-alt); padding: 0 1ch; }
    /* a run of hidden lines: the whole row loads them */
    & .gap td { padding: 0; background: var(--paper-alt); }
    & .gap button {
      display: block; width: 100%; padding: 2px 1ch; text-align: left; cursor: pointer;
      font: inherit; color: var(--ink-dim); background: none; border: 0;
      border-block: 1px dashed var(--border);
    }
    & .gap button:hover, & .gap button:focus-visible { color: var(--ink-hi); background: var(--bg-strong); }
    & .gap button:disabled { cursor: progress; opacity: .6; }
    & .add, & tr.add td { background: var(--add); }
    & .del, & tr.del td { background: var(--del); }
    & .add.m, & tr.add .m { color: var(--teal); font-weight: bold; }
    & .del.m, & tr.del .m { color: var(--red); font-weight: bold; }
    & tr.add .ln, & .ln.add { color: var(--teal); }
    & tr.del .ln, & .ln.del { color: var(--red); }
    & .none { background: var(--paper-alt); }
  }
  .dscroll { overflow-x: auto; background: var(--bg-surface); border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--r) var(--r); }
  /* split: a fixed layout takes its widths from the colgroup (the first row is
     the hunk header, which spans all columns); long lines wrap in their half */
  .spl {
    width: 100%; table-layout: fixed;
    & .c-ln { width: calc(var(--lnw) + 2ch); } & .c-m { width: 2.5ch; }
    & .tx, & .hunk td { white-space: pre-wrap; overflow-wrap: anywhere; }
    & td.ln:nth-child(4) { border-left: 1px solid var(--border); }
  }
  #diffs[data-diff="unified"] .spl, #diffs[data-diff="split"] .uni { display: none; }

  /* diff table of contents in the rail: one line a file, the name first and
     its directory dimmed after it (cut from its start when long), the
     comments, the counts */
  .files {
    font-size: var(--fs-s); position: relative; /* the offsets of its links count from it (ermite.js) */
    & li[hidden] { display: none; }
    & a {
      /* centred, not on the baseline: the smaller counts on a baseline sit
         a pixel below the row, enough to give the list a scroll bar */
      display: grid; grid-template-columns: 1.5ch minmax(0, 1fr) auto auto; column-gap: var(--s2); align-items: center;
      height: 26px; line-height: 26px; padding: 0 var(--s2); margin: 0 calc(-1 * var(--s2));
      border-radius: 4px; border: 1px solid transparent; text-decoration: none; font-family: var(--mono); color: var(--ink);
    }
    & a:hover { background: var(--bg-raised); }
    & a:hover .p { text-decoration: underline; }
    & a[aria-current="true"] { background: var(--row); border-color: var(--ink-mute); }
    & a[aria-current="true"] .p { font-weight: bold; color: var(--ink-hi); }
    & .st { color: var(--ink-mute); font-weight: bold; }
    & .st[data-st="A"] { color: var(--teal); }
    & .st[data-st="D"] { color: var(--red); }
    & .nm { overflow: hidden; white-space: nowrap; display: flex; min-width: 0; }
    /* the name gives way last: the directory shrinks first, down to its
       ellipsis, before the name is cut */
    & .nm .p { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    /* cut from the start (rtl), the path itself kept in its order (bdi) */
    & .nm .d { flex: 0 1000 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; direction: rtl; text-align: left; color: var(--ink-mute); padding-left: 1ch; }
    & .nm .d bdi { direction: ltr; }
    & .cn { font: 600 var(--fs-xs) / 16px var(--font); padding: 0 6px; border-radius: 999px; background: var(--ink-hi); color: var(--on-ink); align-self: center; }
    & .cn.done { background: var(--bg-strong); color: var(--ink-dim); }
    & .n { color: var(--ink-dim); font-size: var(--fs-xs); white-space: nowrap; }
  }

  @media (max-width: 700px) {
    .diff-tools .grow { flex-basis: 100%; height: 0; }
    .file-h .acts { margin-left: 0; }
  }
  .pager { display: flex; gap: var(--s3); justify-content: center; }
  .days section[hidden] { display: none; }
  .list.refs {
    & .c-kind { width: 80px; color: var(--ink-mute); }
    & .c-name { width: 32%; font-family: var(--mono); font-size: var(--fs-s); }
    & .c-sha { width: 96px; }
    & .c-sub { width: auto; }
  }
  /* the commit table inside a rail block: no frame of its own. The id, the
     checks and the date take the width of their text (an empty checks cell
     next to nothing); the subject takes the rest, cut at its end only. */
  .rail .list.commits {
    border: 0; border-radius: 0; background: none; table-layout: auto;
    & td { height: 34px; padding: 0 var(--s2); width: 1%; white-space: nowrap; }
    & td:first-child { padding-left: var(--s3); }
    & td:last-child { padding-right: var(--s4); }
    & .c-who { display: none; }
    & .c-subject { width: auto; max-width: 0; font-size: var(--fs-s); }
    /* the pills are hidden here, the signature one too: the rail is narrow and
       the subject is what the row is for; the commit page shows the badge. */
    & .c-subject .pill { display: none; }
    & .c-ck:empty { padding: 0; }
    & .c-when { text-align: right; }
  }
  .rail section > p { overflow-wrap: anywhere; }
  @media (max-width: 700px) {
    /* the name takes what the fixed columns leave */
    .list.refs .c-name { width: auto; }
  }
}

@layer components {
  .gallery section { margin-top: var(--s6); }
  .gallery .rule-h > :last-child { font-weight: normal; color: var(--ink-mute); order: 2; }
  .gallery .rule-h::after { order: 1; }
  .gallery .files { max-width: var(--rail); }
  .linkish { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
  .linkish:hover { text-decoration-color: currentColor; }
}

@layer components {
  /* counts and bars: + in teal, - in red, everywhere a change is summarised */
  .plus { color: var(--teal); }
  .minus { color: var(--red); }
}