@layer components {
  /* tables in a card, with a row cursor (j/k) */
  .list {
    width: 100%; table-layout: fixed;
    background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r);
    border-collapse: separate; overflow: hidden;
    & th {
      height: 40px; padding: 0 var(--s3); white-space: nowrap;
      font: 600 var(--fs-xs) / 1 var(--font); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-mute);
      background: var(--bg-raised); border-bottom: 1px solid var(--border);
    }
    & th a { text-decoration: none; }
    & th a:hover { color: var(--ink-hi); }
    & th[aria-sort="ascending"], & th[aria-sort="descending"] { color: var(--ink-hi); }
    & td { height: 40px; padding: 0 var(--s3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-top: 1px solid var(--border); }
    & tbody tr:first-child td { border-top: 0; }
    & tbody tr:hover { background: var(--bg-raised); }
    /* the cursor: the row raised, framed by one even line. The frame is drawn
       on the cells (a row takes no radius), so it can follow the card's
       curve when the row sits at a corner. */
    & tbody tr[data-cursor] > td {
      background: var(--bg-raised); border-top-color: transparent;
      box-shadow: inset 0 1px var(--accent), inset 0 -1px var(--accent);
    }
    & tbody tr[data-cursor] > td:first-child { box-shadow: inset 1px 0 var(--accent), inset 0 1px var(--accent), inset 0 -1px var(--accent); }
    & tbody tr[data-cursor] > td:last-child { box-shadow: inset -1px 0 var(--accent), inset 0 1px var(--accent), inset 0 -1px var(--accent); }
    & > tbody:first-child > tr[data-cursor]:first-child > td:first-child { border-top-left-radius: calc(var(--r) - 1px); }
    & > tbody:first-child > tr[data-cursor]:first-child > td:last-child { border-top-right-radius: calc(var(--r) - 1px); }
    & > tbody:last-child > tr[data-cursor]:last-child > td:first-child { border-bottom-left-radius: calc(var(--r) - 1px); }
    & > tbody:last-child > tr[data-cursor]:last-child > td:last-child { border-bottom-right-radius: calc(var(--r) - 1px); }
    & tbody tr[hidden] { display: none; }
    & td > a { text-decoration: none; }
    & td > a:first-child { color: var(--ink-hi); }
    & tr:hover td > a:first-child, & tr[data-cursor] td > a:first-child { text-decoration: underline; }
    & .c-sha, & .c-ref, & .c-kind, & .c-size, & .c-n { font-family: var(--mono); font-size: var(--fs-s); }
    & .c-sha a { color: var(--ink-dim); }
    & .c-when, & .c-who { font-size: var(--fs-s); }
    & .c-sub { color: var(--ink-dim); }
  }

  /* home: the repositories as rows in a vertical list; the page is a stack of
     sections, so others can sit beside or below */
  .home {
    display: flex; flex-direction: column; gap: var(--s5);
    & .home-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s4); margin-bottom: var(--s4); }
    & .home-bar .filter { flex: 1 1 260px; }
    & .sort { display: flex; align-items: center; gap: var(--s1); font-size: var(--fs-s); }
    & .sort > .mute { margin-right: var(--s1); }
    & .sort a {
      display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 var(--s2);
      color: var(--ink-dim); text-decoration: none; border: 1px solid transparent; border-radius: var(--r-s);
    }
    & .sort a:hover { color: var(--ink-hi); background: var(--bg-raised); }
    & .sort a[aria-current="true"] { color: var(--ink-hi); background: var(--bg-raised); border-color: var(--border-strong); }
  }
  /* a row: name, description and facts on the left; the state of the latest
     run at the top right, the newest commits under it. Stacked on a phone. */
  .repos {
    display: flex; flex-direction: column; gap: var(--s3);
    margin: 0; padding: 0; list-style: none;
    & .repo {
      display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "main head" "main recent";
      grid-template-rows: auto 1fr; column-gap: var(--s6); row-gap: var(--s3); min-width: 0;
      padding: var(--s4); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r);
    }
    & .repo:hover { background: var(--bg-raised); border-color: var(--border-strong); }
    & .repo[data-cursor] { background: var(--bg-raised); border-color: var(--accent); }
    & .repo[hidden] { display: none; }
    & .repo-main { grid-area: main; display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
    & .repo-name { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s1) var(--s2); font-family: var(--mono); font-size: 17px; line-height: 26px; overflow-wrap: anywhere; }
    & .repo-name a { color: var(--ink-hi); text-decoration: none; }
    & .repo:hover .repo-name a, & .repo[data-cursor] .repo-name a { text-decoration: underline; }
    & .repo-name .pill { margin-left: 0; }
    /* Every card has the same height: two lines of description, one of topics
       (reserved when there are none), five of commits. */
    & .repo-desc {
      color: var(--ink-dim); min-height: calc(2 * var(--lh));
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
    }
    & .repo-desc.mute { color: var(--ink-mute); font-style: italic; }
    /* topics: small quiet chips, as on GitHub, on one line. The chips that do
       not fit wrap out of sight; ermite.fit (ermite.js) puts a … chip after
       the last one shown, the hidden topics in its title. */
    & .repo-topics {
      display: flex; flex-wrap: wrap; gap: 6px; height: 22px; overflow: hidden;
      margin: 0; padding: 0; list-style: none;
    }
    & .repo-topics li {
      flex: none; padding: 1px 9px; border: 1px solid var(--border-strong); border-radius: 999px;
      font-family: var(--mono); font-size: 12px; line-height: 18px; color: var(--teal); background: var(--bg-raised);
    }
    & .repo-topics li[hidden] { display: none; }
    & .repo-topics li.more { padding: 0; }
    & .repo-topics li.more button {
      padding: 1px 7px; border: 0; border-radius: 999px; background: none; cursor: pointer;
      font: inherit; line-height: 18px; color: var(--ink-mute);
    }
    & .repo-topics li.more button:hover { color: var(--accent); }
    & .repo-topics[data-open] { height: auto; }
    /* the pulse: the commits per day over 90 days, smoothed, under the text */
    & .repo-pulse { margin: auto 0 0; padding-top: var(--s2); }
    /* as tall as a drawn pulse: the padding comes on top of the ratio */
    & div.repo-pulse { aspect-ratio: 600 / 64; box-sizing: content-box; }
    & .repo-pulse svg { display: block; width: 100%; height: auto; overflow: visible; }
    & .pulse-grid { fill: none; stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 4; }
    & .pulse-stop-top { stop-color: var(--teal); stop-opacity: .32; }
    & .pulse-stop-bottom { stop-color: var(--teal); stop-opacity: 0; }
    & .pulse-line { fill: none; stroke: var(--teal); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
    & .pulse-dot { fill: var(--teal); stroke: var(--bg-surface); stroke-width: 1.5; }
    & .repo:hover .pulse-dot, & .repo[data-cursor] .pulse-dot { stroke: var(--bg-raised); }
    & .repo-pulse:not([data-live]) .pulse-line { stroke: var(--ink-mute); }
    & .repo-pulse:not([data-live]) .pulse-dot { fill: var(--ink-mute); }
    & .repo-pulse:not([data-live]) .pulse-stop-top { stop-color: var(--ink-mute); stop-opacity: .18; }
    /* the right column: figures, then the CI state, over the commits */
    & .repo-head { grid-area: head; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3) var(--s5); min-width: 0; }
    /* the figures: a small label over a mono value, side by side */
    & .repo-stats { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin: 0; min-width: 0; }
    & .repo-stats div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    & .repo-stats dt { font-size: 11px; line-height: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; }
    & .repo-stats dd { margin: 0; font-family: var(--mono); font-size: 15px; line-height: 20px; color: var(--ink-hi); font-variant-numeric: tabular-nums; white-space: nowrap; }
    & .repo-stats .rs-tag dd { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; }
    & .repo-stats dd.mute { color: var(--ink-mute); }
    & .repo-stats dd a { color: inherit; text-decoration: none; }
    & .repo-stats dd a:hover { text-decoration: underline; }
    & .repo-ci {
      flex: none; display: inline-flex; align-items: center; gap: var(--s1); padding-top: 2px;
      font-size: var(--fs-s); color: var(--ink-dim); text-decoration: none; white-space: nowrap;
    }
    & .repo-ci:hover { color: var(--ink-hi); text-decoration: underline; }
    & .repo-ci .ck { margin: 0; }
    & .repo-commits {
      grid-area: recent; min-width: 0; margin: 0; padding: 0; list-style: none; font-size: var(--fs-s);
      min-height: calc(5 * (var(--lh) + 4px)); /* five rows, full or not */
    }
    & p.repo-commits { font-style: italic; }
    & .repo-commits li { display: flex; align-items: baseline; gap: var(--s2); min-width: 0; padding: 2px 0; }
    & .rc-sha { flex: none; font-family: var(--mono); color: var(--ink-dim); text-decoration: none; }
    & .rc-sha:hover { color: var(--ink-hi); text-decoration: underline; }
    & .rc-subject { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-hi); }
    & .repo-commits time { flex: none; white-space: nowrap; }
    /* a full list goes on: its last commit fades */
    & .repo-commits[data-full] li:last-child { opacity: .65; }
    @media (max-width: 720px) {
      & .repo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "head" "recent"; grid-template-rows: none; }
      & .repo-head { flex-wrap: wrap; }
      & .repo-commits { min-height: 0; }
    }
  }
  /* Home layouts. The server renders "cards" (the rules above); a script
     sets .home[data-layout] from the stored choice. The rows carry no markup
     of their own for a layout, so a row swapped in by a live update fits. */
  .home .layout-switch { display: flex; align-items: center; gap: 2px; }
  .home .layout-switch .btn {
    width: 28px; height: 28px; color: var(--ink-dim); background: none; border-color: transparent; border-radius: var(--r-s);
    &:hover { color: var(--ink-hi); background: var(--bg-raised); }
    &[aria-pressed="true"] { color: var(--ink-hi); background: var(--bg-raised); border-color: var(--border-strong); }
  }
  .home .home-bar .sort { margin-left: auto; }

  /* split: two denser cards side by side. Name and CI state on top, the
     description, the pulse as a band from edge to edge, the figures in one
     row and the two newest commits. One column on a narrow screen. */
  .home[data-layout="split"] {
    & .repos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
    & .repo {
      grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s3); row-gap: 0;
      grid-template-areas: "name ci" "desc desc" "topics topics" "pulse pulse" "stats stats" "recent recent";
      grid-template-rows: auto 1fr auto auto auto auto;
      overflow: hidden;
    }
    & .repo-main, & .repo-head { display: contents; }
    & .repo-name { grid-area: name; align-self: center; font-size: 16px; }
    & .repo-ci { grid-area: ci; align-self: center; padding-top: 0; }
    & .repo-desc { grid-area: desc; margin-top: var(--s2); }
    & .repo-topics { grid-area: topics; margin-top: var(--s2); }
    & .repo-topics:empty { display: none; }
    & .repo-pulse { grid-area: pulse; margin: var(--s3) calc(-1 * var(--s4)) 0; padding: 0; border-block: 1px solid var(--border); }
    /* one row while it fits; a narrow card wraps the figures instead of
       letting them overlap */
    & .repo-stats { grid-area: stats; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s3); margin-top: var(--s3); }
    & .repo-stats div { flex: none; }
    & .repo-stats dd { font-size: var(--fs); }
    & .repo-stats .rs-tag dd { max-width: 12ch; }
    & .repo-commits { grid-area: recent; min-height: calc(2 * (var(--lh) + 4px)); margin-top: var(--s2); }
    & .repo-commits li:nth-child(n+3) { display: none; }
    & .repo-commits[data-full] li:last-child { opacity: 1; }
    & .repo-commits[data-full] li:nth-child(2) { opacity: .65; }
  }
  @media (max-width: 900px) {
    .home[data-layout="split"] .repos { grid-template-columns: minmax(0, 1fr); }
  }

  /* compact: a line per repository. Name, description, figures, CI mark and
     a small pulse sit in one grid row; the commits and topics are left out.
     The rows share the columns of the list (subgrid): the name column is as
     wide as the longest name, the figures line up, and the description takes
     what is left. */
  .home[data-layout="compact"] {
    & .repos {
      display: grid; grid-template-columns: fit-content(18rem) minmax(0, 1fr) auto auto 140px;
      gap: var(--s2) var(--s4);
    }
    & .repo {
      grid-column: 1 / -1; grid-template-columns: subgrid;
      grid-template-areas: "name desc stats ci pulse";
      /* normal: the row takes the gaps of the list */
      grid-template-rows: none; column-gap: normal; row-gap: 0; align-items: center;
      padding: var(--s2) var(--s4);
    }
    & .repo-main, & .repo-head { display: contents; }
    & .repo-topics, & .repo-commits { display: none; }
    /* min-width 0: a long name is cut, it does not widen the column past its cap */
    & .repo-name { grid-area: name; min-width: 0; flex-wrap: nowrap; gap: var(--s2); font-size: var(--fs); line-height: 24px; overflow-wrap: normal; }
    & .repo-name a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    & .repo-name .pill { flex: none; }
    & .repo-desc {
      grid-area: desc; display: block; min-height: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      font-size: var(--fs-s); color: var(--ink-mute);
    }
    /* figures inline, the value before its label; the label of the date and
       of the tag is left to screen readers */
    & .repo-stats { grid-area: stats; flex-wrap: nowrap; gap: var(--s3); overflow: hidden; }
    & .repo-stats div { flex-direction: row; align-items: baseline; gap: 4px; flex: none; }
    & .repo-stats dt { order: 1; font-size: var(--fs-xs); line-height: 16px; letter-spacing: 0; text-transform: none; }
    & .repo-stats dd { font-size: var(--fs-xs); line-height: 16px; color: var(--ink-dim); }
    & .repo-stats .rs-active dt, & .repo-stats .rs-tag dt {
      position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
    }
    & .repo-stats .rs-tag dd { max-width: 10ch; }
    & .repo-stats .rs-tag dd::before {
      content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 3px; vertical-align: -2px;
      background: currentColor; mask: url(icons/tag.svg) center / contain no-repeat;
    }
    /* the CI state is its mark; the word is in the tooltip and for screen readers */
    & .repo-ci { grid-area: ci; justify-self: center; padding-top: 0; }
    & .repo-ci .ci-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    /* the pulse: the same curve, small, with a bigger dot to stay seen */
    & .repo-pulse { grid-area: pulse; width: 100%; height: 100%; min-height: 18px; margin: 0; padding: 0; }
    & div.repo-pulse { aspect-ratio: auto; box-sizing: border-box; }
    & .repo-pulse svg { position: relative; top: 50%; transform: translateY(-50%); }
    & .pulse-grid { display: none; }
    & .pulse-dot { r: 9px; stroke: none; }
  }
  @media (max-width: 1100px) {
    .home[data-layout="compact"] .repos { grid-template-columns: fit-content(14rem) minmax(0, 1fr) auto auto 96px; column-gap: var(--s3); }
    .home[data-layout="compact"] .repo-stats .rs-tag { display: none; }
  }
  /* on a phone: name and CI state on a line, the description and the figures
     under it; the pulse is dropped */
  @media (max-width: 720px) {
    .home[data-layout="compact"] .repo {
      grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name ci" "desc desc" "stats stats"; column-gap: var(--s3); row-gap: 2px;
    }
    .home[data-layout="compact"] .repo-pulse { display: none; }
    .home[data-layout="compact"] .repo-stats .rs-tag { display: flex; }
  }
  .list.passkeys {
    & .c-name { width: auto; font-weight: 600; }
    & .c-when { width: 120px; font-size: var(--fs-s); }
    & .c-sync { width: 80px; font-size: var(--fs-s); }
    & .c-act { width: 110px; text-align: right; }
  }
  .passkey-add {
    display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-top: var(--s4);
    & input {
      flex: 1; min-width: 12ch; max-width: 320px; height: 32px; padding: 0 var(--s3);
      background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--r-s);
    }
    & input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
    & input::placeholder { color: var(--ink-mute); opacity: 1; }
  }
  .list.commits, .list.refs {
    & .c-sha { width: 96px; }
    & .c-who { width: 140px; }
    & .c-when { width: 100px; }
  }

  /* filter: a search field above a list */
  .filter {
    position: relative; display: flex; max-width: 420px;
    &::before {
      content: ""; position: absolute; left: 11px; top: 10px; width: 16px; height: 16px; pointer-events: none;
      background: var(--ink-mute); mask: url(icons/search.svg) center / contain no-repeat;
    }
    &::after {
      content: "/"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
      font: 600 var(--fs-xs) / 18px var(--mono); color: var(--ink-mute); padding: 0 6px;
      border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px; pointer-events: none;
    }
    & input {
      flex: 1; min-width: 0; height: 36px; padding: 0 36px 0 34px;
      background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--r-s);
    }
    & input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
    & input::placeholder { color: var(--ink-mute); opacity: 1; }
    &:focus-within::after { display: none; }
  }

  /* file finder: the results replace the tree while the field has a query */
  #finder {
    & #finder-status { padding: var(--s3) var(--s4) var(--s2); font-size: var(--fs-s); }
    & #finder-list { padding: 0 var(--s2) var(--s2); }
  }

  /* the Files view: the finder on top, the tree in a card under it */
  .tree-find {
    display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s3);
    & .filter { flex: 1; max-width: none; }
    & .filter::before { top: 14px; left: 14px; }
    & .filter::after { right: 12px; }
    & .filter input { height: 44px; padding-left: 42px; font-size: var(--fs); background: var(--bg-surface); }
  }
  .tree-keys { flex: none; color: var(--ink-mute); font-size: var(--fs-xs); white-space: nowrap; }
  .tree-card {
    background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden;
  }
  .tree-head {
    display: flex; align-items: center; gap: var(--s3); min-height: 40px; padding: 0 var(--s4);
    background: var(--bg-raised); border-bottom: 1px solid var(--border); font-size: var(--fs-s);
    & .tree-path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 var(--fs-s) / 1 var(--mono); color: var(--ink-hi); }
    & .tree-up { flex: none; font: 600 var(--fs-s) / 1 var(--mono); color: var(--ink-dim); text-decoration: none; }
    & .tree-up:hover { color: var(--ink-hi); text-decoration: underline; }
    & .tree-count { flex: none; color: var(--ink-mute); }
  }
  .tree-card > :is(.lede, .note) { margin: var(--s3) var(--s4); }

  /* The tree: one flat list, a row per entry, each as deep as --depth says
     (files.js sets it on the rows it opens in place). A row draws, from the
     left: a vertical guide per level above it, the branch tick to its node,
     the node, its name; then size, last commit and date, which are secondary. */
  ul.tree {
    --indent: 22px; --rowh: 32px; --guide: var(--border-strong);
    & > li {
      display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1.2fr) 96px; align-items: center;
      min-height: var(--rowh); padding-right: var(--s4); font-size: var(--fs-s);
    }
    & > li:hover, & > li[data-cursor] { background: var(--bg-raised); }
    & > li[data-cursor] { outline: 1px solid var(--accent); outline-offset: -1px; }
    & > li:focus-visible { outline-offset: -2px; border-radius: 0; }
    & .t-main { display: flex; align-items: stretch; min-width: 0; min-height: var(--rowh); padding-left: var(--s3); }
    & .t-twig {
      flex: none; width: calc(var(--depth, 0) * var(--indent));
      background: repeating-linear-gradient(90deg,
        transparent 0 calc(var(--indent) / 2), var(--guide) calc(var(--indent) / 2) calc(var(--indent) / 2 + 1px),
        transparent calc(var(--indent) / 2 + 1px) var(--indent));
    }
    & .t-node { position: relative; flex: none; width: var(--indent); }
    & .t-node::before, & .t-node::after { content: ""; position: absolute; }
    /* the branch tick, from the guide of the directory to this node */
    & .t-node::before { top: 50%; left: calc(var(--indent) / -2); right: calc(50% + 6px); height: 1px; background: var(--guide); }
    & > li[data-depth="0"] .t-node::before { display: none; }
    /* an open directory continues its guide down, to its first entry */
    & > li[aria-expanded="true"] .t-node {
      background: linear-gradient(var(--guide), var(--guide)) center bottom / 1px calc(50% - 8px) no-repeat;
    }
    /* the node: a ring for a file, a chevron for a directory (it turns down
       once open), a diamond for a link, a square for a submodule */
    & .t-node::after {
      top: 50%; left: 50%; width: 7px; height: 7px; margin: -4px 0 0 -4px;
      background: var(--bg-surface); border: 1px solid var(--ink-mute); border-radius: 50%;
    }
    & > li:hover .t-node::after, & > li[data-cursor] .t-node::after { background: var(--bg-raised); border-color: var(--ink-hi); }
    & > li[data-kind="dir"] .t-node::after {
      width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 0; border-radius: 0; background: var(--ink-dim);
      mask: url(icons/chevron.svg) center / contain no-repeat; transform: rotate(-90deg);
    }
    & > li[data-kind="dir"][aria-expanded="true"] .t-node::after { transform: none; background: var(--accent); }
    & > li[data-kind="link"] .t-node::after { border-radius: 1px; transform: rotate(45deg); }
    & > li[data-kind="module"] .t-node::after { border-radius: 1px; }
    & > li[aria-busy="true"] .t-node { opacity: .4; }
    & .t-name {
      align-self: center; min-width: 0; padding: 4px var(--s1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      font-family: var(--mono); font-size: var(--fs); color: var(--ink); text-decoration: none; cursor: pointer;
    }
    & > li[data-kind="dir"] .t-name { font-weight: 700; color: var(--ink-hi); }
    & > li[data-kind="link"] .t-name, & > li[data-kind="module"] .t-name { color: var(--ink-dim); cursor: default; }
    & > li:hover .t-name, & > li[data-cursor] .t-name { text-decoration: underline; }
    & .t-size { padding-right: var(--s4); text-align: right; font: var(--fs-xs) / 1 var(--mono); color: var(--ink-mute); font-variant-numeric: tabular-nums; }
    & .t-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-dim); }
    & .t-sub a { color: inherit; text-decoration: none; }
    & .t-sub a:hover { color: var(--ink-hi); text-decoration: underline; }
    & .t-when { text-align: right; white-space: nowrap; color: var(--ink-mute); font-size: var(--fs-xs); }
    & > li.tree-more { grid-template-columns: minmax(0, 1fr); }
    & > li.tree-more .t-name { font-size: var(--fs-s); font-weight: 400; color: var(--ink-dim); text-decoration: underline; }
    & > li.tree-more .t-node::after { display: none; }
  }
  @media (max-width: 900px) {
    ul.tree > li { grid-template-columns: minmax(0, 1fr) 64px 80px; }
    ul.tree .t-sub { display: none; }
  }
  @media (max-width: 720px) {
    .tree-keys { display: none; }
    ul.tree { --indent: 18px; }
    ul.tree > li { grid-template-columns: minmax(0, 1fr) 72px; }
    ul.tree .t-size { display: none; }
  }

  /* section headings inside a page */
  .rule-h {
    display: flex; align-items: center; gap: var(--s2); margin-top: var(--s5);
    font-size: var(--fs);
    & > :first-child { color: var(--ink-hi); }
  }
  main > .rule-h:first-child { margin-top: 0; }

  /* empty / 404 / error / sign in: one card in the middle */
  .state {
    max-width: 560px; margin: var(--s7) auto 0 !important; padding: var(--s6);
    background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r);
    & .eyebrow { font: 700 var(--fs-s) / 1 var(--mono); color: var(--ink-mute); text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--s2); }
    & h1 { margin-bottom: var(--s3); }
    & p.dim { color: var(--ink-dim); }
    & .state-act { margin-top: var(--s5); }
    & .state-back { margin-top: var(--s5); display: flex; gap: var(--s4); font-size: var(--fs-s); }
    & .clone { margin-top: var(--s4); }
  }

  /* copyable shell lines */
  .clone {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); min-width: 0;
    & .clone-line {
      min-width: 0;
      display: flex; gap: var(--s2); align-items: center; padding: var(--s1) var(--s1) var(--s1) var(--s3);
      background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--r-s);
      font-size: var(--fs-code);
    }
    & .clone-line > .mute { user-select: none; font-family: var(--mono); }
    & code { flex: 1; min-width: 0; overflow-x: auto; white-space: pre; scrollbar-width: none; }
    & .copy { height: 26px; padding: 0 var(--s2); font-size: var(--fs-xs); }
  }
}