@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 {
    margin-top: var(--s3); scroll-margin-top: calc(var(--hdr-h, 0px) + 56px);
    & > summary {
      position: sticky; top: calc(var(--hdr-h, 0px) + 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; }
    & .ln { width: 6ch; min-width: 6ch; padding-right: 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; }
    & .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: 7ch; } & .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 */
  .files {
    font-size: var(--fs-s);
    & a { display: grid; grid-template-columns: 2ch minmax(0, 1fr) auto; column-gap: var(--s2); padding: 2px var(--s2); margin: 0 calc(-1 * var(--s2)); border-radius: 4px; text-decoration: none; font-family: var(--mono); }
    & a:hover { background: var(--bg-raised); }
    & a:hover .p { text-decoration: underline; }
    & a[aria-current="true"] { background: var(--row); font-weight: bold; }
    & .p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; }
    & .n { color: var(--ink-dim); font-size: var(--fs-s); }
    & .b { grid-column: 2 / -1; color: var(--ink-mute); font-size: var(--fs-s); letter-spacing: .1ch; line-height: 1; padding-bottom: 4px; }
  }

  @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 */
  .rail .list.commits {
    border: 0; border-radius: 0; background: none;
    & td { height: 34px; padding: 0 var(--s2); }
    & td.cur { width: 3px; padding: 0; }
    & td:nth-child(2) { padding-left: var(--s3); }
    & td:last-child { padding-right: var(--s4); }
    & .c-who { display: none; }
    & .c-sha { width: 72px; }
    & .c-subject { font-size: var(--fs-s); }
    & .c-subject .pill { display: none; }
    & .c-when { width: 70px; text-align: right; }
  }
  .rail section > p { overflow-wrap: anywhere; }
  @media (max-width: 700px) {
    /* the name takes what the fixed columns leave */
    .list.tree .c-name, .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); }
}