/* loom.css · P35, Loom: the layout of the repository, the clone and the
   page against Git on the design system's tokens. The buttons, fields,
   tabs, segmented controls, tree, banners and tables are the design
   system's; this file places them and draws what a Git client has that the
   design system does not: the commit graph in lanes, the diff in one or two
   columns, blame and the phases of a clone. Every class it adds starts with
   lm-, so none can match a class of the page around it. */

.lm { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--paper); overflow: hidden; }
.lm-spacer { flex: 1; }
.lm-meta { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lm-id { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); }
.lm-h { margin: 0; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-550); color: var(--ink-2); }
.lm-note { margin: 0; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
.lm-acts { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.lm-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* the bar above the repository */
.lm-top { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding: 8px 16px; border-bottom: var(--px) solid var(--line-1); }
.lm-where { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink); }
.lm-where b { font-weight: var(--fw-550); }
.lm > [data-r="banner"] { margin: 8px 16px 0; }

/* three columns: branches, changes and files; the file and its diff; the history */
.lm-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 264px minmax(0, 1fr) minmax(300px, 380px); }
.lm-side { min-height: 0; overflow: auto; padding: 12px 12px 24px; display: flex; flex-direction: column; gap: 18px; border-right: var(--px) solid var(--line-1); }
.lm-sec { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lm-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.lm-branches { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.lm-branch { display: flex; align-items: center; gap: 4px; min-height: 28px; }
.lm-branch > [data-r="button"]:first-child { flex: 1; min-width: 0; justify-content: flex-start; }
.lm-branch > [data-r="button"]:first-child > span { overflow: hidden; text-overflow: ellipsis; }
.lm-newb { display: flex; gap: 6px; }
.lm-newb > [data-r="field"] { flex: 1; min-width: 0; }
.lm-changes { display: flex; flex-direction: column; gap: 2px; }
.lm-change-group { margin: 6px 0 2px; font-size: var(--fs-11); line-height: var(--lh-11); color: var(--ink-3); }
.lm-change { display: flex; align-items: center; gap: 6px; min-height: 26px; }
.lm-change > [data-r="button"]:first-of-type { flex: 1; min-width: 0; justify-content: flex-start; }
.lm-change > [data-r="button"]:first-of-type > span { overflow: hidden; text-overflow: ellipsis; }
.lm-msg textarea { min-height: 44px; }
.lm-commit-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lm-empty { margin: 2px 0; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }

/* the tree's marks of a file's state */
.lm-st { margin-left: auto; flex: none; font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-550); }
.lm-st-modified { color: var(--orange-700); }
.lm-st-added, .lm-st-untracked { color: var(--green-700); }
.lm-st-deleted, .lm-st-conflict { color: var(--red-700); }

/* the middle: a file, a diff, blame */
.lm-center { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.lm-tabs { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 8px 16px; border-bottom: var(--px) solid var(--line-1); }
.lm-diff-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.lm-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 16px; overflow: hidden; }
.lm-panel[hidden] { display: none; }
.lm-panel-head { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; min-height: 24px; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink); }
.lm-panel-head b { font-weight: var(--fw-550); overflow-wrap: anywhere; }
.lm-editor { flex: 1; min-height: 160px; display: flex; }
.lm-editor textarea { flex: 1; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--fs-12); line-height: var(--lh-12); tab-size: 4; white-space: pre; overflow: auto; resize: none; }
.lm-file, .lm-diff, .lm-blame { flex: 1; min-height: 0; overflow: auto; margin: 0; border-radius: var(--r-contain); box-shadow: inset 0 0 0 var(--px) var(--line-2); background: var(--ground); outline: none; }
.lm-file:focus-visible, .lm-diff:focus-visible, .lm-blame:focus-visible, .lm-graph:focus-visible { box-shadow: inset 0 0 0 var(--px) var(--line-2), 0 0 0 2px var(--paper), 0 0 0 4px var(--accent); }
.lm-file { padding: 8px 12px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink); white-space: pre; tab-size: 4; }

/* the diff: a file's head, then its lines with the numbers of both sides */
.lm-code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink); tab-size: 4; }
.lm-fd { border-bottom: var(--px) solid var(--line-2); }
.lm-fd:last-child { border-bottom: 0; }
.lm-fd-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 12px; background: var(--raised); border-bottom: var(--px) solid var(--line-1); font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink); }
.lm-fd-head b { font-weight: var(--fw-550); overflow-wrap: anywhere; }
.lm-fd-note { padding: 8px 12px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
.lm-dl { display: grid; grid-template-columns: 44px 44px 16px minmax(0, 1fr); min-width: max-content; }
.lm-dl > span { padding: 0 6px; white-space: pre; }
.lm-dl > .lm-no { text-align: right; color: var(--ink-3); user-select: none; }
.lm-dl > .lm-sign { padding: 0; text-align: center; color: var(--ink-3); user-select: none; }
.lm-dl.lm-add > span { background: var(--success-tint); }
.lm-dl.lm-del > span { background: var(--danger-tint); }
.lm-dl.lm-hh > span { background: var(--info-tint); color: var(--ink-2); }
.lm-dl.lm-nl > span { color: var(--ink-3); }
.lm-split { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px minmax(0, 1fr); }
.lm-split > span { padding: 0 6px; white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.lm-split > .lm-no { text-align: right; color: var(--ink-3); user-select: none; white-space: pre; }
.lm-split > .lm-add { background: var(--success-tint); }
.lm-split > .lm-del { background: var(--danger-tint); }
.lm-split > .lm-hh { grid-column: 1 / -1; background: var(--info-tint); color: var(--ink-2); white-space: pre; }
.lm-split > .lm-gap { background: var(--plane-hover); }

/* blame: a run of lines with its commit, then each line */
.lm-bl { display: grid; grid-template-columns: 270px 40px minmax(0, 1fr); min-width: max-content; }
.lm-bl > span { padding: 0 8px; white-space: pre; }
.lm-bl > .lm-bw { font-family: "Inter Variable", system-ui, sans-serif; font-size: var(--fs-11); line-height: var(--lh-12); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; border-right: var(--px) solid var(--line-1); }
.lm-bl > .lm-no { text-align: right; color: var(--ink-3); user-select: none; }
.lm-bl.lm-first > span { border-top: var(--px) solid var(--line-1); }
.lm-bl.lm-tone1 > .lm-bw { background: var(--plane-hover); }

/* the history: the lanes in one drawing at the left, a row per commit beside them */
.lm-hist { min-width: 0; min-height: 0; display: flex; flex-direction: column; border-left: var(--px) solid var(--line-1); }
.lm-hist > .lm-sec-head { padding: 8px 12px; border-bottom: var(--px) solid var(--line-1); }
.lm-graph { position: relative; flex: 1 1 55%; min-height: 160px; overflow: auto; outline: none; }
.lm-rows { position: relative; min-width: 0; }
.lm-graph-svg { position: absolute; left: 0; top: 0; pointer-events: none; }
.lm-edge { fill: none; stroke-width: 1.5; }
.lm-node { stroke: var(--paper); stroke-width: 1.5; }
.lm-c0 { stroke: var(--blue-500); } .lm-c1 { stroke: var(--orange-500); } .lm-c2 { stroke: var(--green-600); }
.lm-c3 { stroke: var(--magenta-500); } .lm-c4 { stroke: var(--aqua-600); } .lm-c5 { stroke: var(--violet-500); }
.lm-node.lm-c0 { fill: var(--blue-500); } .lm-node.lm-c1 { fill: var(--orange-500); } .lm-node.lm-c2 { fill: var(--green-600); }
.lm-node.lm-c3 { fill: var(--magenta-500); } .lm-node.lm-c4 { fill: var(--aqua-600); } .lm-node.lm-c5 { fill: var(--violet-500); }
.lm-node.lm-head { stroke: var(--ink); stroke-width: 2; }
.lm-commit { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px 0 var(--gw); font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); white-space: nowrap; }
.lm-commit:hover { background: var(--plane-hover); }
.lm-commit[aria-selected="true"] { background: var(--plane-selected); color: var(--ink); }
/* the message gives way first, with an ellipsis; the author then; the short id and the branch names always show whole */
.lm-commit > .lm-subject { flex: 0 10 auto; min-width: 48px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.lm-commit > .lm-who { flex: 0 1 auto; min-width: 24px; max-width: 40%; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }
.lm-commit > .lm-id, .lm-commit > .lm-ref { flex: none; }
.lm-commit > .lm-id { margin-left: auto; }
.lm-ref { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--r-mark); font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-550); color: var(--ink); background: var(--plane-selected); }
.lm-ref.lm-ref-head { background: var(--accent-tint); color: var(--accent-ink); box-shadow: inset 0 0 0 var(--px) var(--accent-line); }
.lm-ref.lm-ref-tag { background: var(--warning-tint); }
.lm-detail { flex: 0 1 auto; max-height: 45%; overflow: auto; padding: 10px 12px 16px; border-top: var(--px) solid var(--line-1); font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); }
.lm-detail:empty { display: none; }
.lm-detail h3 { margin: 0 0 4px; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); white-space: pre-wrap; }
.lm-detail dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 10px; margin: 8px 0; }
.lm-detail dt { color: var(--ink-3); }
.lm-detail dd { margin: 0; overflow-wrap: anywhere; }
.lm-detail pre { margin: 6px 0; font-family: inherit; white-space: pre-wrap; }
.lm-detail .lm-acts { margin-top: 8px; }
.lm-files-list { margin: 6px 0 0; padding: 0; list-style: none; }

/* the clone page */
.lm-clone { overflow: auto; }
.lm-clone-head { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border-bottom: var(--px) solid var(--line-1); }
.lm-clone-form { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.lm-presets { display: flex; gap: 4px; flex-wrap: wrap; }
.lm-repo-form { display: flex; gap: 6px; }
.lm-repo-form > [data-r="field"] { width: 240px; max-width: 100%; }
.lm-clone-head > .lm-note { max-width: 860px; }
.lm-phases { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 10px 16px; list-style: none; border-bottom: var(--px) solid var(--line-1); }
.lm-phases li { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 6px 10px 6px 22px; position: relative; border-radius: var(--r-press); background: var(--ground); box-shadow: inset 0 0 0 var(--px) var(--line-2); font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
.lm-phases li::before { content: ""; position: absolute; left: 9px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--line-3); }
.lm-phases li b { font-weight: var(--fw-550); color: var(--ink-2); }
.lm-phases li span { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.lm-phases li[data-state="done"] { color: var(--ink-2); }
.lm-phases li[data-state="done"]::before { background: var(--green-500); }
.lm-phases li[data-state="active"] { box-shadow: inset 0 0 0 var(--px) var(--accent-line); background: var(--accent-tint); color: var(--ink); }
.lm-phases li[data-state="active"]::before { background: var(--accent); }
.lm-phases li[data-state="failed"]::before { background: var(--red-500); }
.lm-clone > [data-r="banner"] { margin: 10px 16px 0; }
.lm-server { padding: 8px 16px 0; overflow-wrap: anywhere; }
.lm-grid-clone { min-height: 560px; }
.lm-clone .lm-branches { max-height: 232px; overflow: auto; }

/* the page against Git */
.lm-judge { flex: 1; min-height: 0; overflow: auto; background: var(--paper); }
.lm-judge-in { padding: 24px 24px 48px; max-width: 1280px; }
.lm-judge-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 12px; }
.lm-judge-head h1 { margin: 0 0 6px; font-size: var(--fs-20); line-height: var(--lh-20); font-weight: var(--fw-550); color: var(--ink); }
.lm-judge-head p { margin: 0; max-width: 820px; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); }
.lm-sum { margin: 12px 0 8px; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink); font-variant-numeric: tabular-nums; }
.lm-progress { height: 4px; border-radius: var(--r-round); background: var(--line-1); overflow: hidden; margin-bottom: 12px; }
.lm-progress i { display: block; height: 100%; width: 0; background: var(--accent); }
.lm-groups { display: flex; gap: 4px 16px; flex-wrap: wrap; margin: 0 0 8px; font-size: var(--fs-13); line-height: var(--lh-13); }
.lm-groups a { color: var(--ink-2); text-decoration: none; }
.lm-groups a:hover { color: var(--ink); text-decoration: underline; }
.lm-groups a span { margin-left: 6px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lm-group { margin-top: 24px; }
.lm-group h2 { margin: 0 0 4px; font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-550); color: var(--ink); }
.lm-group-note { margin: 0 0 8px; max-width: 820px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
.lm-group td { vertical-align: top; }
.lm-why { display: block; max-width: 520px; overflow-wrap: anywhere; color: var(--ink-2); }

/* a narrower screen: the history goes under the file */
@media (max-width: 1180px) {
  .lm-grid { grid-template-columns: 248px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 300px); }
  .lm-hist { grid-column: 1 / -1; border-left: 0; border-top: var(--px) solid var(--line-1); }
  .lm-side { grid-row: 1; }
}
/* a phone: one column that scrolls as a page */
@media (max-width: 760px) {
  .lm { overflow: auto; }
  .lm-grid { display: flex; flex-direction: column; flex: none; }
  .lm-side { border-right: 0; border-bottom: var(--px) solid var(--line-1); overflow: visible; }
  .lm-center { min-height: 0; }
  .lm-panel { flex: none; overflow: visible; }
  .lm-file, .lm-diff, .lm-blame { max-height: 60vh; }
  .lm-editor { min-height: 280px; }
  .lm-hist { border-top: var(--px) solid var(--line-1); }
  .lm-graph { flex: none; max-height: 420px; }
  .lm-detail { max-height: none; }
  .lm-phases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lm-judge-in { padding: 16px 16px 32px; }
  .lm-repo-form > [data-r="field"] { width: auto; flex: 1; }
  .lm-repo-form { flex: 1 1 100%; }
}