index.html

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>GitCat — Main Graph Shell</title>
<style>
/* ============================================================
   GITCAT · MAIN GRAPH SHELL — "Lamplight / Cozy Terminal"
   A warm desk lamp at 1am. Sober pro Git client; the personality
   lives in temperature + one sleeping cat (Tama), never in chrome.
   Theme-aware: light base, dark via media + [data-theme] override.
   ============================================================ */
/* Palette is defined once as tokens per theme; the canvas reads --bg/--l0.. live
   via getComputedStyle so graph colours always match the CSS. Retuned for clarity:
   brighter text, stronger borders, and vivid saturated lane colours. */
:root{
  /* light — higher contrast on warm cream */
  --bg:#FFFFFF; --panel:#F6F7F9; --elevated:#FFFFFF; --border:#E3E6EB;
  --text:#191C22; --muted:#667085; --accent:#5B57D6; --accent2:#2E8B72;
  --danger:#D14343; --warning:#B9781C; --success:#3C9A5A;
  --l0:#0E9C86; --l1:#D6497A; --l2:#4E5FE0; --l3:#C07E12; --l4:#8B45C4; --l5:#1488BE; --l6:#579A1C;
  --fur:#E0A75C; --fur-shade:#C88A3E; --fur-line:#6A4E2D; --ear-in:#ED96A4;
  --skin:#F9E2CA; --skin-line:#BE8C63; --eye:#B0680E; --eye-dark:#7E4A0E; --eye-lite:#E7A63E;
  --sweater:#F3E6D0; --sweater-line:#C6B088; --mouth:#B85F58;
  --ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  --mono:ui-monospace,"SF Mono","Menlo","Cascadia Code","Consolas",monospace;
  --display:"SF Pro Rounded",ui-rounded,"Nunito","Segoe UI Variable",system-ui,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  --r-card:12px; --r-panel:10px; --r-control:8px; --r-pill:999px; --r-chip:4px;
  --topbar-h:46px; --sidebar-w:264px; --detail-w:344px; --ribbon-w:46px; --nook-h:132px; --row-h:26px; --term-h:280px;
  --shadow:0 6px 20px rgba(16,18,27,.10), 0 1px 3px rgba(16,18,27,.08);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0F1116; --panel:#171A21; --elevated:#20242D; --border:#2D323C;
  --text:#ECEEF3; --muted:#98A1AE; --accent:#8E88F2; --accent2:#5FD0B4;
  --danger:#F06A5B; --warning:#F0973E; --success:#5FC98A;
  --l0:#3FD3B6; --l1:#F98CAD; --l2:#8AA0FF; --l3:#F6BA50; --l4:#C79BF0; --l5:#5ED0EA; --l6:#A9DC5F;
  --fur:#E1A85C; --fur-shade:#C6883C; --fur-line:#3B2C1B; --ear-in:#DC8B99;
  --skin:#F2D4B4; --skin-line:#8C6C4C; --eye:#F5B843; --eye-dark:#A96C14; --eye-lite:#FFD888;
  --sweater:#EADCC0; --sweater-line:#B49D74; --mouth:#CB6F65; color-scheme:dark;
}}
:root[data-theme="light"]{
  --bg:#FFFFFF; --panel:#F6F7F9; --elevated:#FFFFFF; --border:#E3E6EB;
  --text:#191C22; --muted:#667085; --accent:#5B57D6; --accent2:#2E8B72;
  --danger:#D14343; --warning:#B9781C; --success:#3C9A5A;
  --l0:#0E9C86; --l1:#D6497A; --l2:#4E5FE0; --l3:#C07E12; --l4:#8B45C4; --l5:#1488BE; --l6:#579A1C;
  --fur:#E0A75C; --fur-shade:#C88A3E; --fur-line:#6A4E2D; --ear-in:#ED96A4;
  --skin:#F9E2CA; --skin-line:#BE8C63; --eye:#B0680E; --eye-dark:#7E4A0E; --eye-lite:#E7A63E;
  --sweater:#F3E6D0; --sweater-line:#C6B088; --mouth:#B85F58; color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0F1116; --panel:#171A21; --elevated:#20242D; --border:#2D323C;
  --text:#ECEEF3; --muted:#98A1AE; --accent:#8E88F2; --accent2:#5FD0B4;
  --danger:#F06A5B; --warning:#F0973E; --success:#5FC98A;
  --l0:#3FD3B6; --l1:#F98CAD; --l2:#8AA0FF; --l3:#F6BA50; --l4:#C79BF0; --l5:#5ED0EA; --l6:#A9DC5F;
  --fur:#E1A85C; --fur-shade:#C6883C; --fur-line:#3B2C1B; --ear-in:#DC8B99;
  --skin:#F2D4B4; --skin-line:#8C6C4C; --eye:#F5B843; --eye-dark:#A96C14; --eye-lite:#FFD888;
  --sweater:#EADCC0; --sweater-line:#B49D74; --mouth:#CB6F65; color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--ui);font-size:13px;line-height:1.45;
  -webkit-font-smoothing:antialiased;overflow:hidden}
button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:4px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}

/* ============================== APP GRID ============================== */
.app{height:100vh;display:grid;
  grid-template-columns:var(--sidebar-w) minmax(0,1fr) var(--detail-w);
  /* Row 2 (subnav) is `auto`: it collapses to 0 when the submodule-nav strip
     renders nothing (SubmoduleNav.svelte's own {#if visible}) — a plain repo
     with no submodules shows no strip and loses no vertical space. */
  grid-template-rows:var(--topbar-h) auto minmax(0,1fr);
  grid-template-areas:"topbar topbar topbar" "subnav subnav subnav" "sidebar graph detail"}
/* graceful degradation for narrower windows so the graph keeps room */
@media (max-width:1180px){:root{--sidebar-w:224px;--detail-w:300px}}
@media (max-width:980px){:root{--sidebar-w:200px;--detail-w:264px}}

/* ============================== TOP BAR ==============================
   Three zones, left to right: [brand + repo IDENTITY: repo-pick, branch
   pill] -> search -> [repo/global ACTIONS: sync actions, Undo, theme].
   Fetch/Pull/Push sit with Undo/theme (all actions), not with repo-pick/
   branch-pill (identity/context) — a deliberate split, not "everything
   about the repo in one place", per direct feedback that grouping by
   identity-vs-action reads clearer than grouping by subject-matter. Every
   chip-like control (.repo-pick/.branch-pill/.tb-btn) shares ONE padding
   rhythm (6px 10px) and ONE icon system (.tb-ic — see the HTML comment
   above the markup for why this replaced the old per-button Unicode
   glyphs) so the bar reads as one designed surface instead of several
   buttons that each happened to be built at a different time.
   Centering search: .tb-left and .tb-right share the SAME flex:1, with
   .cmd-hint itself flex:none (fixed width) between them — this puts it at
   the bar's TRUE horizontal center regardless of how wide either side's
   actual content is. Two earlier attempts both had real bugs: an
   absolutely-centered search box could overlap the sync actions whenever
   the left side's content was wide enough to cross the bar's true center;
   two INDEPENDENT flex:1 spacers (one on each side of search) center it in
   whatever space is left over after both sides' own content, which is only
   the bar's true center when both sides happen to be equally wide — they
   almost never are here, hence the "search feels a bit off-center" report
   this replaced. .tb-left/.tb-right's shared flex:1 is the one construction
   that's correct for both sides being unequal AND can't overlap (flex items
   never overlap). */
.topbar{grid-area:topbar;display:flex;align-items:center;gap:10px;padding:0 12px;
  background:var(--panel);border-bottom:1px solid var(--border);position:relative;z-index:40}
/* min-width DELIBERATELY left at its flex default (auto, i.e. "never shrink
   below my own content's natural size") — an earlier draft set this to 0 to
   let both sides shrink "evenly", which instead let .tb-left get crushed
   past what Fetch/Pull/Push actually need, silently clipping Push behind
   .sync-actions's own overflow:hidden (there for the segmented-control
   corner-rounding, not meant to hide whole buttons). Both sides refusing to
   shrink below content means centering degrades gracefully at extreme
   window widths (search's own min-width below gives up its space first)
   instead of ever silently hiding a real button. */
.tb-left{display:flex;align-items:center;gap:10px;flex:1}
.tb-right{display:flex;align-items:center;gap:10px;flex:1;justify-content:flex-end}
.brand{display:flex;align-items:center;gap:7px;font-family:var(--display);font-weight:700;letter-spacing:.2px;flex:none}
.brand .mark{width:24px;height:24px;flex:none}
.tb-ic{width:14px;height:14px;flex:none}
/* .ico is .tb-ic's sibling for every OTHER icon in the app (buttons/notes/
   status glyphs outside the topbar itself) — same reasoning, same visual
   language (see the topbar comment above), just a distinct class since these
   sit in a lot of contexts .tb-ic's own 14x14/flex:none isn't guaranteed to
   fit (e.g. inline within running text, where a small negative
   vertical-align keeps the icon from sitting high against the baseline). */
.ico{flex:none;vertical-align:-2px}
/* Repo identity cluster: which repo, which submodule chain, which branch —
   grouped with a tighter gap than the bar's own outer 10px so these three
   read as one unit, not three peers of Fetch/Pull/Push. */
.tb-cluster{display:flex;align-items:center;gap:6px}
.repo-pick{display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--elevated);
  border:1px solid var(--border);border-radius:var(--r-control);font-weight:600;min-width:0}
/* Truncates instead of wrapping at narrow window widths — with no rule at
   all, a hyphenated repo name (e.g. "viztracer-source") had a natural
   soft-wrap point the browser preferred over shrinking the toolbar, so it
   wrapped to two lines instead. overflow:hidden zeroes out this flex item's
   automatic min-width (and .repo-pick's own min-width:0 above lets that
   shrink propagate up to it), so it shrinks and ellipsizes like every other
   chip's text does instead. */
.repo-pick .chev{color:var(--muted)}
.repo-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.branch-pill{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--accent) 16%,transparent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  font-weight:600;font-size:12px}
.branch-pill .tb-ic{color:var(--accent)}
/* #pillBranch had no width bound at all — .tb-left/.tb-right deliberately
   never shrink below their own content's natural size (see .topbar's own
   comment above, added so Fetch/Pull/Push can't get crushed), so a long
   branch/feature name either wrapped onto a second line inside the pill or
   ballooned the whole topbar wider. Capping just this span (not the whole
   .branch-pill, so the ahead/behind .ab badge stays fully visible) keeps the
   topbar's own width stable regardless of branch-name length. */
.branch-pill #pillBranch{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.branch-pill .ab{font-family:var(--mono);font-size:11px;color:var(--muted)}
.branch-pill .ab b{color:var(--text)}
/* Bigger than before (320 vs. the old 260px basis) per direct feedback;
   flex:none (not flex-basis) so .tb-left/.tb-right's own flex:1 is what
   negotiates the actual leftover space, not this. min-width keeps it usable
   if the window is narrow enough that .tb-left/.tb-right can't both fit
   their content at full size. */
.cmd-hint{display:flex;align-items:center;gap:8px;width:320px;min-width:200px;
  padding:6px 10px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-control);color:var(--muted);cursor:text}
.cmd-hint kbd{margin-left:auto;font-family:var(--mono);font-size:11px;padding:1px 6px;border-radius:5px;
  background:var(--elevated);border:1px solid var(--border);color:var(--muted)}
/* Fetch/Pull/Push as ONE segmented control (shared frame, internal
   dividers) instead of three separate bordered boxes — same underlying
   .tb-btn markup/JS hooks (setSyncButtonsBusy/clearSyncButtonsBusy key off
   these same #fetchBtn/#pullBtn/#pushBtn ids unchanged), just a shared
   container doing the bordering instead of each button doing its own. */
.sync-actions{display:flex;align-items:stretch;background:var(--elevated);
  border:1px solid var(--border);border-radius:var(--r-control);overflow:hidden}
.sync-actions .tb-btn{border:none;border-radius:0;background:transparent}
.sync-actions .tb-btn:not(:last-child){border-right:1px solid var(--border)}
.sync-actions .tb-btn:hover{background:var(--panel)}
.tb-btn{display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--elevated);
  border:1px solid var(--border);border-radius:var(--r-control);font-weight:600;white-space:nowrap;
  transition:border-color .12s,background-color .12s}
.tb-btn:hover{border-color:var(--muted)}
.tb-btn:disabled{opacity:.45;cursor:default;pointer-events:none}
.tb-btn .badge{font-family:var(--mono);font-size:11px;background:var(--accent);color:#fff;
  border-radius:var(--r-pill);padding:0 6px;font-weight:700}
.tb-btn.undo{border-color:color-mix(in srgb,var(--accent2) 40%,var(--border))}
.tb-btn.undo span{display:flex;align-items:center;gap:6px}
.tb-btn.undo:disabled .badge{background:var(--muted)}
.tb-btn.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,transparent);
  background:color-mix(in srgb,var(--danger) 8%,var(--elevated))}
.tb-btn.danger:hover{background:color-mix(in srgb,var(--danger) 16%,var(--elevated))}
.icon-btn{width:32px;height:32px;display:grid;place-items:center;background:var(--elevated);
  border:1px solid var(--border);border-radius:var(--r-control);transition:border-color .12s,background-color .12s}
.icon-btn:hover{border-color:var(--muted)}

/* ======================= SUBMODULE NAV STRIP ========================
   A slim toolbar under the topbar (src/islands/submodulenav): a 🌳 tree button,
   a "root › child › current" breadcrumb, and the current level's sibling tabs.
   The grid row is `auto`, so when the island renders nothing this element has no
   children and takes zero height. */
.subnav{grid-area:subnav;position:relative}
.subnav-inner{display:flex;align-items:center;gap:8px;height:34px;padding:0 12px;
  background:var(--panel);border-bottom:1px solid var(--border);overflow-x:auto;overflow-y:hidden;white-space:nowrap}
.subnav-inner::-webkit-scrollbar{height:0}
.sn-tree-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border:1px solid var(--border);border-radius:6px;background:var(--elevated);color:var(--muted)}
.sn-tree-btn svg{width:15px;height:15px}
.sn-tree-btn:hover{color:var(--text);border-color:var(--muted)}
.sn-tree-btn.on{color:var(--accent);border-color:var(--accent)}
.sn-crumbs{flex:none;display:flex;align-items:center;gap:3px}
.sn-sep{color:var(--muted);font-size:12px;opacity:.7}
.sn-crumb{display:inline-flex;align-items:center;gap:5px;padding:3px 7px;border:0;border-radius:6px;background:transparent;
  color:var(--muted);font-size:12px;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sn-crumb:hover:not([disabled]){background:var(--elevated);color:var(--text)}
.sn-crumb.current{color:var(--text);font-weight:600;cursor:default}
/* A faint divider between the breadcrumb (where you are) and the sibling tabs
   (where you can go sideways). */
.sn-tabs{flex:none;display:flex;align-items:center;gap:5px;padding-left:9px;margin-left:2px;border-left:1px solid var(--border)}
.sn-tab{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border:1px solid var(--border);border-radius:var(--r-pill);
  background:var(--elevated);color:var(--text);font-size:12px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sn-tab:hover:not([disabled]){border-color:var(--muted)}
.sn-tab.current{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);cursor:default}
.sn-tab[disabled]:not(.current){opacity:.55}
/* Status dot — same palette the sidebar's own submodule rows use. */
.sn-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--muted)}
.sn-dot[data-status="clean"]{background:var(--success)}
.sn-dot[data-status="dirty"]{background:var(--warn,#d8a657)}
.sn-dot[data-status="out-of-date"]{background:var(--accent)}
.sn-dot[data-status="conflicted"]{background:var(--danger)}
.sn-dot[data-status="not-initialized"],.sn-dot[data-status="removed"],.sn-dot[data-status="unreadable"]{background:var(--muted)}
/* Full-tree popover, anchored under the 🌳 button. */
.sn-tree-backdrop{position:fixed;inset:0;z-index:70}
.sn-tree-pop{position:absolute;z-index:71;left:8px;top:34px;min-width:230px;max-width:min(420px,90vw);max-height:60vh;overflow:auto;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--r-panel);box-shadow:0 12px 34px rgba(0,0,0,.4);padding:5px}
.sn-tree-head{padding:4px 8px 6px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.sn-tree-empty{display:flex;align-items:center;gap:8px;padding:8px;color:var(--muted);font-size:12px}
.sn-node{display:flex;align-items:center;gap:7px;width:100%;padding:5px 8px;border:0;border-radius:6px;background:transparent;
  color:var(--text);font-size:12.5px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sn-node:hover:not([disabled]){background:var(--elevated)}
.sn-node.current{background:color-mix(in srgb,var(--accent) 14%,transparent);cursor:default}
.sn-node.disabled{opacity:.5;cursor:default}
.sn-node-ic{flex:none;width:14px;height:14px;color:var(--muted)}
.sn-node-name{overflow:hidden;text-overflow:ellipsis}
.sn-here{margin-left:auto;padding-left:10px;font-size:10px;color:var(--accent);text-transform:uppercase;letter-spacing:.03em}

/* ============================== SIDEBAR ============================== */
.sidebar{grid-area:sidebar;display:flex;flex-direction:column;min-height:0;position:relative;
  background:var(--panel);border-right:1px solid var(--border)}
/* #sidebarRefs (the Sidebar Svelte island's mount point) is a plain wrapper
   div, not itself a flex item bounded by .sidebar's height — without this it
   grows to fit the full ref list, pushing the Tama nook below it down and
   off the fixed bottom-left spot instead of the list scrolling internally.
   flex:1 gives it the remaining height under the nook; display:flex column
   is what makes .ref-scroll's own flex:1/overflow:auto (below) apply at all. */
#sidebarRefs{display:flex;flex-direction:column;flex:1;min-height:0}
/* Dedicated "no repository open" state — replaces the filter+ref-groups
   entirely rather than showing 4-5 groups all reading "0", which read as
   broken rather than "nothing to show yet". flex:1 fills the same space
   .ref-scroll normally would, so this centers within the actual available
   height instead of collapsing to the top. */
.sidebar-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex:1;min-height:0;padding:28px 18px;text-align:center;gap:7px;color:var(--muted)}
.sidebar-empty .ic{font-size:30px;line-height:1;opacity:.75;margin-bottom:2px}
.sidebar-empty .t{font-size:13px;font-weight:700;color:var(--text)}
.sidebar-empty .sub{font-size:11.5px;line-height:1.6;max-width:190px}
.sidebar-empty .btn{margin-top:8px;font-size:12px;padding:7px 12px}
/* .ref-search wraps ONLY the input+icon, own position:relative context —
   .mag's top:50% used to resolve against .ref-filter itself, which was fine
   back when the input was its only child, but broke once "Show all
   branches" started conditionally sharing that box: the icon drifted below
   the input whenever the button pushed the container taller. */
.ref-filter{padding:10px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:6px}
.ref-search{position:relative}
.ref-search input{width:100%;padding:7px 10px 7px 30px;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-control);color:var(--text);font-size:12px}
.ref-search input:focus{outline:none;border-color:var(--accent)}
.ref-search .mag{position:absolute;left:20px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
/* "Auto" (persistent branch-visibility mode — always shown, the entry
   point to turn it on) + "Show all branches" (only while a filter, auto or
   manual, is active — sidebarCtrl.isFiltering) — same small ghost-button
   treatment, own row since they sit below .ref-search rather than any
   existing button context. */
.ref-filter-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ref-filter-actions .auto-toggle,.ref-filter-actions .show-all{border:1px solid var(--border);background:transparent;color:var(--muted);
  font-size:11px;padding:3px 8px;border-radius:var(--r-pill);cursor:pointer}
.ref-filter-actions .auto-toggle:hover,.ref-filter-actions .show-all:hover{background:var(--elevated);color:var(--text);border-color:var(--muted)}
.ref-filter-actions .auto-toggle.active{background:color-mix(in srgb,var(--accent) 16%,transparent);
  border-color:var(--accent);color:var(--accent);font-weight:600}
.ref-scroll{flex:1;min-height:0;overflow:auto;padding:6px}
.ref-group{margin-bottom:2px}
.ref-group>summary{list-style:none;display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:6px;
  cursor:pointer;user-select:none;color:var(--muted);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.5px}
.ref-group>summary::-webkit-details-marker{display:none}
.ref-group>summary:hover{background:var(--elevated)}
.ref-group>summary .tw{transition:transform .15s;color:var(--muted)}
.ref-group[open]>summary .tw{transform:rotate(90deg)}
.ref-group>summary .count{margin-left:auto;font-family:var(--mono);font-size:10px;background:var(--elevated);padding:0 6px;border-radius:var(--r-pill)}
/* "Manage remotes…" entry point in the Remote group's own header, next to
   its count badge — reuses .ref-item .ref-menu's exact look (same "⋮ opens a
   menu/dialog" glyph+size), just always visible (not hover-revealed) since
   it's a persistent header affordance, not a per-row action. */
.ref-group>summary .manage-btn{margin-left:4px;border:none;background:transparent;color:var(--muted);
  cursor:pointer;font-size:13px;line-height:1;padding:2px 4px;border-radius:4px;flex:none}
.ref-group>summary .manage-btn:hover{background:var(--panel);color:var(--text)}
/* Ref folder tree (buildRefRows in sidebar.svelte.ts). --depth is set inline
   per row; folder and leaf rows each indent by the same 12px per level from
   their own base, so nesting is legible at a glance. It defaults to 0, which is
   what keeps any .ref-item rendered OUTSIDE the tree (the "＋ New branch…" row,
   the submodule/snapshot sections) at its original flat inset. */
.ref-item,.ref-folder{--depth:0}
.ref-folder{display:flex;align-items:center;gap:6px;cursor:pointer;border-radius:6px;
  padding:4px 8px 4px calc(10px + var(--depth) * 12px);color:var(--muted);font-weight:600;font-size:11px;user-select:none}
.ref-folder:hover{background:var(--elevated);color:var(--text)}
.ref-folder .tw{transition:transform .15s;color:var(--muted);transform:rotate(90deg);flex:none}
.ref-folder.collapsed .tw{transform:none}
.ref-folder .rname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ref-folder .count{font-family:var(--mono);font-size:10px;background:var(--elevated);padding:0 6px;border-radius:var(--r-pill);flex:none}
.ref-folder:hover .count{background:var(--panel)}
/* Collapse-all/expand-all on a section summary. `margin-left:4px` to sit beside
   the count badge, NOT `auto`: .count above already claims the row's free space
   with an auto margin, and a second auto margin would split that space between
   them instead — pushing the badge away from the right edge it's aligned to.
   `display:flex` centres the lucide icon in the box. */
.ref-group>summary .fold-btn{margin-left:4px;display:flex;align-items:center}
.ref-item{display:flex;align-items:center;gap:8px;padding:5px 8px 5px calc(24px + var(--depth) * 12px);border-radius:6px;cursor:pointer;position:relative;user-select:none}
.ref-item:hover{background:var(--elevated)}
.ref-item.current{background:color-mix(in srgb,var(--accent) 14%,transparent)}
/* Tracks --depth with the row's own padding, so the "you are here" dot stays in
   the current branch's gutter instead of the outermost one when it's nested. */
.ref-item.current::before{content:"";position:absolute;left:calc(10px + var(--depth) * 12px);top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background:var(--accent)}
.ref-item .rname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Hover tooltip showing a truncated ref name in full (see Sidebar.svelte's
   onRefHover). position:fixed so it escapes .ref-scroll/.sidebar overflow and
   extends past the sidebar's right edge over the graph. max-width only caps a
   pathologically long name (still far wider than the sidebar). */
.rname-tip{position:fixed;z-index:9000;pointer-events:none;max-width:min(340px,80vw);
  background:var(--elevated);color:var(--text);border:1px solid var(--border);border-radius:6px;
  padding:6px 8px;font-size:12px;display:flex;flex-direction:column;gap:3px;
  box-shadow:0 6px 20px rgba(0,0,0,.4)}
.rname-tip .rt-row{display:flex;align-items:center;gap:7px;white-space:nowrap;overflow:hidden}
.rname-tip .rt-row.cur .rt-name{font-weight:700}
.rname-tip .rt-dot{width:8px;height:8px;border-radius:50%;flex:none}
.rname-tip .rt-name{overflow:hidden;text-overflow:ellipsis}
.rname-tip .rt-kind{margin-left:auto;padding-left:10px;font-size:10px;color:var(--muted);flex:none;text-transform:uppercase;letter-spacing:.03em}
.ref-item.current .rname{font-weight:700}
.ref-item .ab{flex:none;white-space:nowrap;font-family:var(--mono);font-size:10px;color:var(--muted)}
.ref-item .ab .up{color:var(--success)} .ref-item .ab .dn{color:var(--danger)}
.ref-item .dot{width:8px;height:8px;border-radius:50%;flex:none}
.ref-list{display:flex;flex-direction:column}
.ref-item .ref-menu{margin-left:auto;opacity:0;border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:15px;line-height:1;padding:0 4px;border-radius:4px;flex:none}
.ref-item:hover .ref-menu{opacity:1}
/* A row's own Enter/Space now jumps rather than opening this menu (see
   Sidebar.svelte's onkeydown), so the ⋮ button is the only keyboard route
   to Checkout/etc left on the row — a keyboard user tabbing onto it needs
   to actually SEE it light up, not just click-hover users. */
.ref-item:focus-within .ref-menu{opacity:1}
.ref-item .ref-menu:hover{background:var(--elevated);color:var(--text)}
.ref-item.current .ref-menu{opacity:.65}
.ref-item .rname.nb{color:var(--accent);font-weight:600}
.ref-item .rname.mut{color:var(--muted)}
/* Branch-visibility checkbox — sits before .rname in local/remote rows,
   toggling whether this branch feeds the commit graph's revwalk (see
   sidebarCtrl.toggleBranchVisible). Disabled+always-checked for the current
   branch (never hideable) — same flex:none sizing as the row's other small
   fixed-size children (.dot/.ab). */
.ref-item .rb-check{flex:none;margin:0;cursor:pointer}
.ref-item .rb-check:disabled{cursor:default;opacity:.6}
/* Copy-branch-name — sits right after .rname, hover-revealed like
   .ref-menu (same opacity:0/1 idiom), but its OWN click doesn't jump to the
   ref's tip like the row's own click does: copy needs a distinct, small
   target rather than stealing that gesture. */
.ref-item .copy-name{flex:none;opacity:0;border:none;background:transparent;color:var(--muted);cursor:pointer;
  font-size:11px;line-height:1;padding:2px 4px;border-radius:4px}
.ref-item:hover .copy-name{opacity:1}
/* Same keyboard-visibility reasoning as .ref-item:focus-within .ref-menu
   above: without this, tabbing onto the copy button leaves the focused
   control invisible while its sibling ⋮ lights up instead. */
.ref-item:focus-within .copy-name{opacity:1}
.ref-item .copy-name:hover{background:var(--elevated);color:var(--text)}
.ref-item.new-branch:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
/* Any row mid-checkout/delete dims and stops accepting clicks — the
   sidebar-wide `busy` flag covers every row (not just the one acted on)
   since checkout/delete/create-branch all share one in-flight slot. */
.ref-item.busy{opacity:.5;pointer-events:none}
.ref-item .spinner{margin-left:auto;flex:none}
/* The New Branch inline form — name input + "branch from" picker, stacked
   (the sidebar is too narrow for them side by side). Its own wrapper class
   (not .ref-item) since outside-click-to-cancel needs a stable container
   ref that includes BOTH controls — see Sidebar.svelte's onWindowPointerdown. */
.nb-form{display:flex;flex-direction:column;gap:5px;padding:6px 8px 8px 24px}
.nb-form .nb-input{background:transparent;border:none;border-bottom:1px solid var(--accent);
  color:var(--text);font:inherit;font-size:12px;padding:2px 0;outline:none}
.nb-form .nb-row{display:flex;align-items:center;gap:6px}
.nb-form .nb-from{font:inherit;font-size:11px;color:var(--muted);background:var(--bg);
  border:1px solid var(--border);border-radius:5px;padding:3px 5px;outline:none;max-width:100%;flex:1;min-width:0}
.nb-form .nb-from:focus{border-color:var(--accent);color:var(--text)}
.nb-form.busy .nb-input{opacity:.6}
/* Snapshots — 2-line rows (subject + sha/time) instead of sha+time alone, so
   you can actually tell WHAT state each snapshot captured without opening
   it. Its own class (not .ref-item) since it needs an internal flex-column
   for the two lines rather than .ref-item's single flex-row. */
.snap-item{display:flex;align-items:flex-start;gap:8px;padding:6px 8px 6px 24px;border-radius:6px}
.snap-item:hover{background:var(--elevated)}
.snap-clickable{cursor:pointer}
.snap-clickable:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.snap-item .dot{margin-top:5px;width:8px;height:8px;border-radius:50%;flex:none}
.snap-main{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.snap-subject{font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.snap-meta{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--muted)}
.snap-sha{font:inherit;font-family:var(--mono);color:var(--muted);background:transparent;border:none;padding:0;cursor:copy}
.snap-sha:hover{color:var(--accent)}
/* Submodules — read-only status rows (no checkout/menu affordance, unlike
   .ref-item, which implies "click to act on this ref"), so its own class
   mirrors .snap-item's shape (no cursor:pointer, same left-indent/padding)
   instead of reusing .ref-item. The status chip reuses .rr-badge's exact
   pill shape (color-mix(...16%,transparent) background + solid-color text)
   and the same --success/--warning/--danger severity language already used
   per-letter for git file statuses (.wd-file/.tree .st: "A"=success,
   "M"=warning, "D"=danger) — clean=success (nothing to do), dirty=warning
   (uncommitted edits in the submodule's own worktree, same meaning as a
   modified file), out-of-date=danger (checked-out commit no longer matches
   what the superproject's index tracks — needs `git submodule update`),
   not-initialized=muted (never cloned at all — an inactive/absent state,
   same muted language as e.g. bisect's culled cells, not an "error" color),
   conflicted=danger too — same severity color as out-of-date (both need
   direct user intervention before the submodule can be trusted again), but a
   distinct, more urgent case: the superproject's own index has an unresolved
   merge conflict AT this submodule's gitlink path (two branches pointed it at
   different commits), not just a stale-but-otherwise-fine checkout. */
.sub-item{display:flex;align-items:center;gap:8px;padding:5px 8px 5px 24px;border-radius:6px;cursor:pointer}
.sub-item:hover{background:var(--elevated)}
.sub-item.busy{opacity:.5;pointer-events:none}
.sub-item .rname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The row's own "⋮" popover trigger — .ref-menu is otherwise only scoped to
   `.ref-item .ref-menu` (branches/tags, which share that class); submodule
   rows use a different class, so this mirrors those rules verbatim
   (including the focus-within reveal — a submodule row is tabindex="0"
   with the same keyboard-only-route-to-the-menu problem as a ref row)
   rather than rendering with no fade/hover/focus styling at all. */
.sub-item .ref-menu{margin-left:auto;opacity:0;border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:15px;line-height:1;padding:0 4px;border-radius:4px;flex:none}
.sub-item:hover .ref-menu{opacity:1}
.sub-item:focus-within .ref-menu{opacity:1}
.sub-item .ref-menu:hover{background:var(--elevated);color:var(--text)}
.sub-status{font-size:10px;font-weight:600;padding:1px 7px;border-radius:var(--r-pill);flex:none;white-space:nowrap}
.sub-status[data-status="clean"]{background:color-mix(in srgb,var(--success) 16%,transparent);color:var(--success)}
.sub-status[data-status="dirty"]{background:color-mix(in srgb,var(--warning) 16%,transparent);color:var(--warning)}
.sub-status[data-status="out-of-date"]{background:color-mix(in srgb,var(--danger) 16%,transparent);color:var(--danger)}
.sub-status[data-status="conflicted"]{background:color-mix(in srgb,var(--danger) 16%,transparent);color:var(--danger)}
.sub-status[data-status="not-initialized"]{background:color-mix(in srgb,var(--muted) 16%,transparent);color:var(--muted)}
/* "removed": already staged for removal by submodule_remove (nothing
   committed yet) — muted like "not-initialized" (nothing actionable left),
   but a visually distinct row via the "removed (uncommitted)" label that
   replaces its action buttons entirely (see Sidebar.svelte). */
.sub-status[data-status="removed"]{background:color-mix(in srgb,var(--muted) 16%,transparent);color:var(--muted)}
/* "unreadable": CRASH FIX — this submodule's own resolved git directory, or
   something reachable in its nested-submodule subtree at any depth, was
   found cyclic (a malformed/maliciously crafted `.git` gitfile pointer) or
   unresolvable, so the backend refused to even call submodule_status for it
   (see check_submodule_safe_for_status in submodule.rs) rather than risk the
   stack-overflow crash that call is otherwise confirmed to produce.
   Deliberately warning-colored, NOT muted like "not-initialized"/"removed"
   above (this needs the user's attention — it may be a hostile/corrupted
   submodule, not merely an inactive/absent one) and NOT success/clean —
   its own action buttons are hidden entirely (see Sidebar.svelte), same as
   "removed". */
.sub-status[data-status="unreadable"]{background:color-mix(in srgb,var(--warning) 16%,transparent);color:var(--warning)}
.sub-item .spinner{flex:none}
/* Bulk submodule tools header — sits above the per-submodule rows (not
   crammed into the section's <summary>, which toggles open/closed on any
   click inside it) — same left-indent as .sub-item so it reads as part of
   the same list. Two stacked rows: the recursive checkbox applies to every
   bulk action below it (Sync all/Update all), so it gets a full-width row
   of its own with a real label, and Sync all/Update all get their own row
   underneath with room to breathe. */
.sub-head{display:flex;flex-direction:column;gap:6px;padding:2px 8px 6px 24px}
.sub-recursive{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
.sub-bulk-row{display:flex;align-items:center;gap:8px}
.sub-update-all{flex:1;font-size:11px;font-weight:600;color:var(--accent2);background:transparent;
  border:1px solid color-mix(in srgb,var(--accent2) 45%,var(--border));border-radius:var(--r-control);padding:4px 9px}
.sub-update-all:hover:not([disabled]){background:color-mix(in srgb,var(--accent2) 12%,transparent)}
.sub-update-all[disabled]{opacity:.5;cursor:default}
/* Sidebar hover tooltip that can NEVER escape its own row — native `title`
   attributes are unstyleable and unclipped, positioned by the browser near
   the cursor with no awareness of the app's own sidebar/graph boundary, so
   a wide one (a remote branch name, a full timestamp) can render past the
   narrow sidebar's edge and sit on top of unrelated text in the graph pane
   next to it (confirmed: "Check out origin/…" rendering over commit
   messages). left+right both set means this box's width is bounded by its
   own parent — never the viewport — so it truncates instead of escaping. */
[data-tip]{position:relative}
[data-tip]:hover::after{content:attr(data-tip);position:absolute;left:24px;right:6px;top:100%;margin-top:2px;
  background:var(--elevated);border:1px solid var(--border);border-radius:6px;padding:3px 7px;
  font-size:10.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  z-index:20;box-shadow:var(--shadow);pointer-events:none}
/* Branch pill's own detail tooltip (legacy/main.ts's branchPillTip()) —
   overrides the shared [data-tip] rule above rather than reusing it as-is:
   that one is single-line/nowrap and bounded by ITS OWN PARENT's width
   (built for the sidebar's narrow rows, which need to never escape past the
   sidebar edge into the graph pane — see that rule's own comment). The
   branch pill sits in the topbar with the whole app below it, so there's no
   equivalent edge to worry about, and the content here is deliberately
   TWO lines (branch name + what "ahead/behind" are relative to) joined by a
   real `\n`, which needs white-space:pre-line (not nowrap) to actually wrap. */
.branch-pill[data-tip]:hover::after{left:0;right:auto;top:calc(100% + 4px);white-space:pre-line;
  overflow:visible;text-overflow:clip;min-width:100%;width:max-content;max-width:240px;
  font-size:11px;font-weight:400;line-height:1.5;padding:6px 9px}
.ref-pop{position:fixed;z-index:300;min-width:150px;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-control);box-shadow:var(--shadow);padding:4px;display:flex;flex-direction:column;gap:2px}
.ref-pop button{font:inherit;text-align:left;background:transparent;border:none;color:var(--text);padding:6px 10px;border-radius:6px;cursor:pointer}
.ref-pop button:hover:not([disabled]){background:var(--elevated)}
.ref-pop button.danger{color:var(--danger)}
.ref-pop button[disabled]{opacity:.4;cursor:default}
.mono{font-family:var(--mono)} .mut{color:var(--muted)}
/* Commit-row context menu (src/islands/commitmenu) — a `.ref-pop`, just wider
   (the branch/tag/submodule popovers' own 150px min-width is too narrow for a
   sha+subject header) and with ONE new element `.ref-pop` itself doesn't
   cover: a small non-interactive header line naming which commit the actions
   below apply to. Everything else (buttons, disabled state, the branch/tag
   sub-form) reuses `.ref-pop`/`.nb-form`/`.nb-input`/`.nb-row`/`.mut` verbatim. */
.ref-pop.cm-pop{min-width:230px}
.cm-head{padding:4px 10px 7px;margin-bottom:2px;border-bottom:1px solid var(--border);font-size:11px;line-height:1.35}
.cm-head .sha{color:var(--text)}
.cm-head .subject{display:block;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* cherryPick/merge/revert's loading row — .nb-row's own flex/gap styling is
   scoped to `.nb-form .nb-row` (it always sits under an input in the New
   Branch/Tag forms); this one sits directly in the popover with no input
   above it, so it needs its own minimal layout rule rather than silently
   rendering unstyled. */
.cm-pending{display:flex;align-items:center;gap:8px;padding:6px 10px}

/* ---------- Tama's lamp-nook (pinned bottom of sidebar) ---------- */
.nook{height:var(--nook-h);flex:none;position:relative;overflow:hidden;border-top:1px solid var(--border);
  display:flex;align-items:center;gap:8px;padding:0 12px;transition:background .4s ease;--sa:var(--muted);
  background:radial-gradient(120px 96px at 26% 130%,color-mix(in srgb,var(--sa) 26%,transparent),transparent 70%),var(--panel)}
.tstage{--sa:var(--muted)}
.tstage[data-state="hint"],.tstage[data-state="thinking"],.tstage[data-state="curious"],.tstage[data-state="syncing"]{--sa:var(--accent)}
.tstage[data-state="warn"]{--sa:var(--warning)}
.tstage[data-state="danger"]{--sa:var(--danger)}
.tstage[data-state="celebrate"],.tstage[data-state="greeting"]{--sa:var(--success)}
.tstage[data-state="rescue"]{--sa:var(--accent2)}
.tstage[data-state="confused"]{--sa:var(--warning)}
/* Painted portrait (same TAMA_IMG poses the hero/modals/cheer popover use —
   see main.ts's TamaMascot.POSE) instead of the old hand-drawn vector cat
   this corner used to be stuck on from before Tama's cat-girl pivot.
   .sprite-wrap carries the cursor-parallax tilt (JS-set style.transform,
   see gaze()); .sprite itself carries the continuous idle breathe/nod
   animations — split across two elements because both would otherwise
   fight over the same `transform` property. Sized to match
   .tama-cheer .tama-pic's already-proven size, aspect-matched to the
   portraits' own ~0.746 native ratio so object-fit:contain barely
   letterboxes. No frame/ring around it — the portrait's own white
   background blends into .nook's panel color with nothing boxing it in. */
.sprite-wrap{position:relative;flex:none;transition:transform .12s ease;will-change:transform}
.sprite{width:78px;height:104px;display:block;object-fit:contain;object-position:top;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.18));
  animation:spriteBreathe 4.2s ease-in-out infinite}
/* Pose swap is a real "pop" (shrink+fade out, swap src, overshoot back in)
   rather than a flat crossfade — see TamaMascot.set()'s own comment for the
   timing this pairs with. Both classes override the base spriteBreathe
   animation for their brief duration (a more specific selector wins), same
   trick .nod already used. */
.sprite.swap{animation:spriteSwapOut .11s ease forwards}
.sprite.swap-in{animation:spriteSwapIn .24s cubic-bezier(.2,.8,.2,1)}
.sprite.nod{animation:spriteNod .42s ease}
@keyframes spriteBreathe{
  0%,100%{transform:translateY(0) rotate(0deg) scale(1)}
  30%{transform:translateY(-1.5px) rotate(-.6deg) scale(1.008)}
  60%{transform:translateY(-2.6px) rotate(.4deg) scale(1.012)}
  85%{transform:translateY(-.8px) rotate(-.2deg) scale(1.004)}}
@keyframes spriteSwapOut{to{opacity:0;transform:scale(.93) translateY(3px)}}
@keyframes spriteSwapIn{from{opacity:0;transform:scale(.93) translateY(3px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes spriteNod{0%,100%{transform:translateY(0) scale(1)}30%{transform:translateY(-4px) scale(1.04)}60%{transform:translateY(1px) scale(.98)}}
/* Autonomous idle "glance" (Tama.scheduleGlance) — a brief automatic tilt
   even when the cursor hasn't moved, so the corner still reads as alive
   during a still mouse, not just while actively tracking the cursor. */
.sprite-wrap.glance{animation:spriteGlance 1.1s ease}
@keyframes spriteGlance{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  30%{transform:translate(-3px,-1px) rotate(-2deg)}
  55%{transform:translate(2.5px,-.5px) rotate(1.6deg)}
  80%{transform:translate(-1px,0) rotate(-.5deg)}}
/* Mood flourishes that don't need new art — a soft pulsing glow for
   danger (layered as a second drop-shadow, not a hard ring — see the
   nook's own no-frame decision above), a few CSS-only sparkles for
   celebrate, drifting "Z"s for sleep. All absolutely positioned against
   .sprite-wrap's own relative box. */
.tstage[data-state="danger"] .sprite{animation:spriteBreathe 4.2s ease-in-out infinite,dangerPulse 1.3s ease-in-out infinite}
@keyframes dangerPulse{0%,100%{filter:drop-shadow(0 3px 8px rgba(0,0,0,.18)) drop-shadow(0 0 0 transparent)}
  50%{filter:drop-shadow(0 3px 8px rgba(0,0,0,.18)) drop-shadow(0 0 14px var(--sa))}}
.spark{position:absolute;width:6px;height:6px;opacity:0;pointer-events:none;background:var(--success);
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.tstage[data-state="celebrate"] .spark{animation:sparkPop 1s ease-in-out infinite}
.spark.s1{top:-4px;left:-6px;animation-delay:0s!important}
.spark.s2{top:8px;right:-8px;animation-delay:.3s!important}
.spark.s3{bottom:6px;left:-4px;animation-delay:.6s!important}
@keyframes sparkPop{0%,100%{opacity:0;transform:scale(.3) rotate(0deg)}50%{opacity:1;transform:scale(1) rotate(50deg)}}
.zz{position:absolute;top:-6px;right:-4px;font-family:var(--display);font-weight:700;color:var(--muted);opacity:0;pointer-events:none}
.tstage[data-state="sleep"] .zz{animation:zzDrift 3.6s ease-in-out infinite}
.zz.z1{font-size:11px;animation-delay:0s!important}
.zz.z2{font-size:14px;top:-14px;right:-10px;animation-delay:1.1s!important}
.zz.z3{font-size:17px;top:-24px;right:-16px;animation-delay:2.2s!important}
@keyframes zzDrift{0%{opacity:0;transform:translate(0,0) scale(.7)}20%{opacity:.6}100%{opacity:0;transform:translate(6px,-14px) scale(1.15)}}
.talk{flex:1;min-width:0}
.toast-line{font-family:var(--display);font-weight:600;font-size:12.5px;line-height:1.32;color:var(--sa);min-height:16px;
  opacity:0;transform:translateY(3px);transition:opacity .22s,transform .22s;overflow:hidden;
  /* Was clamped to 3 lines (49.5px) — shorter than the nook's own built-in
     "mutation.destructive" safety copy already needs (66px/4 lines), so the
     end of that warning ("...type the ref name to go on.") was silently cut
     off with no ellipsis. 5 lines (82.5px) covers every message this file
     sends today with margin, and still fits: .talk's telemetry row + margin
     is a fixed ~35px, leaving 132px(nook) - 35px = 97px of headroom. */
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical}
.toast-line.show{opacity:1;transform:none}
.telemetry{display:flex;align-items:center;gap:6px;margin-top:6px;font-family:var(--mono);font-size:10px;color:var(--muted)}
.telemetry .pip{width:6px;height:6px;border-radius:50%;background:var(--success);flex:none;animation:pip 2.6s ease-out infinite}
@keyframes pip{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--success) 55%,transparent)}70%,100%{box-shadow:0 0 0 5px transparent}}
.nook.is-interacting *{animation-play-state:paused!important}
/* hero catgirl in the empty state */
.tama-hero{display:flex;flex-direction:column;align-items:center;gap:13px;padding:22px 18px 8px;text-align:center}
.hero-bubble{position:relative;max-width:262px;background:var(--elevated);border:1px solid var(--border);border-radius:14px;
  padding:11px 14px;font-size:12.5px;line-height:1.55;box-shadow:var(--shadow);margin-top:2px}
.hero-bubble::after{content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:13px;height:13px;background:var(--elevated);border-left:1px solid var(--border);border-top:1px solid var(--border)}
.hero-bubble b{color:var(--accent);font-family:var(--display)}
.hero-bubble .jp{color:var(--accent2);font-weight:700}
/* Serious mode (.tama-off, see the sprite-wrap/tama-pic rule below): the
   rounded card + upward-pointing tail (::after) was designed as a speech
   bubble FROM Tama's portrait sitting just above it — with that portrait
   hidden, the exact same styling reads as a quote pointing at nobody.
   Flattens it to plain, unboxed text instead (matching .hero-hint's own
   plain style right below it in the DOM) rather than keeping a "bubble"
   shape that no longer has anyone to belong to. */
.tama-off .hero-bubble{background:none;border:none;box-shadow:none;padding:0;margin-top:8px}
.tama-off .hero-bubble::after{content:none}
.hero-stat{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:4px}
.hero-stat b{color:var(--success)} .hero-stat .n{color:var(--accent);font-weight:700}
.hero-hint{font-size:11.5px;color:var(--muted);line-height:1.75;max-width:270px}
/* painted catgirl art (hero, modals, undo cheer) */
.tama-pic{display:block;object-fit:contain;object-position:top}
.tama-hero-img{width:190px;height:auto;filter:drop-shadow(0 8px 16px rgba(0,0,0,.20))}
.modal-tama{flex:none;width:62px;height:80px;line-height:0}
.modal-tama .tama-pic{width:100%;height:100%}
/* Dev-mode indicator — top:52px sits just BELOW .topbar (46px tall) rather
   than at true top:0, deliberately: the topbar's own left corner already
   has the GitCat brand mark/repo-picker (see .brand above) right up
   against the window edge, and this needs to be tellable apart at a
   glance, not fought with for the same few pixels. position:fixed (not
   part of .app's own grid) so it overlays everything regardless of which
   panel is focused/collapsed. Shown only under `vite`/`tauri dev` — see the
   `if(!import.meta.env.DEV)` toggle beside it (legacy/main.ts, next to the
   existing #perf HUD's own identical dev-only gate) — never ships lit in a
   real `tauri build`/`vite build`, which is the whole point: the user runs
   a dev build and a packaged prod build side by side and needs an
   unmistakable way to tell which window is which. */
.dev-badge{position:fixed;top:52px;left:10px;z-index:500;display:flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:var(--r-pill);pointer-events:none;
  background:color-mix(in srgb,var(--warning) 20%,var(--bg));
  border:1px solid color-mix(in srgb,var(--warning) 55%,var(--border));
  color:var(--warning);font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.4px;
  box-shadow:0 4px 12px rgba(20,14,6,.22)}
.dev-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--warning);flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--warning) 25%,transparent)}
.tama-cheer{position:fixed;right:20px;bottom:20px;z-index:320;display:flex;align-items:flex-end;gap:8px;
  padding:10px 15px 10px 8px;background:var(--panel);border:1px solid color-mix(in srgb,var(--success) 50%,var(--border));
  border-radius:18px;box-shadow:0 10px 30px rgba(20,14,6,.28),0 0 0 1px color-mix(in srgb,var(--success) 22%,transparent);
  transform:translateY(24px) scale(.96);opacity:0;pointer-events:none;transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .3s}
.tama-cheer.show{transform:none;opacity:1}
.tama-cheer .tama-pic{width:78px;height:104px;flex:none}
.tama-cheer .cheer-txt{font-family:var(--display);font-weight:600;font-size:13px;line-height:1.4;max-width:184px;padding-bottom:10px}
.tama-cheer .cheer-txt .jp{color:var(--accent2);font-weight:700}
/* "Serious work" mode (settings.svelte.ts's tamaEnabled, applied via
   legacy/main.ts's setTamaEnabled toggling this class on <body>) — hides
   every DECORATIVE Tama portrait: the nook's animated sprite (+ its spark/zz
   decorations, all children of .sprite-wrap), the Detail empty-state hero
   image, every modal header's small portrait, and the undo "cheer" popover's
   image. Deliberately does NOT touch .toast-line/.telemetry (the nook's
   .talk sibling, untouched here) — that's the app's ONLY inline status/
   error-message surface (there's no separate toast system), so this must
   never silently remove a message like "Open a repository first" along with
   the character. .nook's own flex row (.sprite-wrap + .talk, gap:8px) just
   collapses to .talk alone when .sprite-wrap is hidden — no layout fix
   needed, same reasoning .sprite-wrap being flex:none already relies on. */
.tama-off .sprite-wrap,.tama-off .tama-pic,.tama-off .tama-hero-img{display:none}
@media (prefers-reduced-motion:reduce){.sprite,.sprite-wrap{animation:none!important;transition:none!important}
  .spark,.zz{animation:none!important}
  .toast-line{transition:opacity .01s!important;transform:none!important}
  .scrim,.scrim.on,.modal,.scrim.on .modal,.cmdk,.cmdk.on,.cmdk-panel,.cmdk.on .cmdk-panel,
  .bisect-panel,.bisect-panel.on,.btn,.tb-btn,.icon-btn,.resize-handle,.cmdk-row{transition-duration:.01s!important}}

/* ============================== GRAPH ============================== */
.graph{grid-area:graph;position:relative;min-width:0;background:var(--bg);overflow:hidden;display:flex}
.ribbon{width:var(--ribbon-w);flex:none;border-right:1px solid var(--border);
  background:linear-gradient(var(--panel),var(--bg));position:relative;overflow:hidden}
.ribbon .rlabel{writing-mode:vertical-rl;transform:rotate(180deg);position:absolute;left:5px;bottom:10px;
  font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);pointer-events:none}
/* Snapshot ticks — sized as a comfortable click target (the ribbon is a plain
   evenly-spaced list now; positions come from ribbon.ts). 12px tall × ~28px
   wide, matched to RIBBON_TICK_GAP_PX/RIBBON_MIN_TICK_PX so they never overlap. */
.tick{position:absolute;left:9px;right:6px;height:12px;border-radius:3px;cursor:pointer;
  background:color-mix(in srgb,var(--accent) 55%,transparent);transition:transform .12s,background .12s}
.tick:hover{background:var(--accent);transform:scaleX(1.12)}
.tick.pulse{animation:tickpulse .6s ease}
@keyframes tickpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 70%,transparent)}100%{box-shadow:0 0 0 10px transparent}}
.canvas-wrap{position:relative;flex:1;min-width:0;overflow:hidden}
/* Shown for the full duration of openRepo() (legacy/main.ts) — the graph
   canvas keeps rendering whatever repo was open before (tick()'s own rAF
   loop never stops), so without this the pane looks fully interactive but
   is silently frozen on stale data for however long load_graph takes on a
   large repo. Sits on top (no pointer-events override, so it also blocks
   clicks on that stale, about-to-be-replaced graph) with the exact same
   show/hide lifecycle as the topbar .repo-pick button's own inline spinner. */
.graph-loading{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:color-mix(in srgb,var(--bg) 85%,transparent);color:var(--muted);font-size:13px}
.graph-loading .spinner{width:26px;height:26px;border-width:3px}
/* Top-right "still loading" pill (see #loadingPill). Absolute in the graph, above
   the perf HUD; only visible while a graph stream is in flight, so it never
   competes with the (dev-only) fps readout during normal use. */
.loading-pill{position:absolute;top:14px;right:16px;z-index:9;display:flex;align-items:center;gap:9px;
  padding:9px 16px 9px 14px;background:var(--elevated);border-radius:var(--r-pill);white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--accent) 60%,var(--border));
  font-size:13px;font-weight:600;color:var(--text);
  box-shadow:0 4px 18px color-mix(in srgb,var(--accent) 28%,transparent),var(--shadow);
  opacity:0;transform:translateY(-6px) scale(.96);transition:opacity .18s,transform .18s;pointer-events:none}
.loading-pill.show{opacity:1;transform:none;animation:loadingPulse 1.7s ease-in-out infinite}
@keyframes loadingPulse{0%,100%{box-shadow:0 4px 18px color-mix(in srgb,var(--accent) 26%,transparent),var(--shadow)}
  50%{box-shadow:0 6px 26px color-mix(in srgb,var(--accent) 55%,transparent),var(--shadow)}}
.loading-pill .spinner{width:15px;height:15px;border-width:2px;color:var(--accent);opacity:1}
@media (prefers-reduced-motion:reduce){.loading-pill.show{animation:none}}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
/* Panel-resize drag guide: a thin vertical rule that follows the cursor while a
   splitter is being dragged, so ONLY the line moves — the panels and the graph
   canvas don't reflow/re-render until the drag is released (see main.ts's
   wireResizeHandle). `will-collapse` recolors it when releasing would collapse
   the panel. No transition on `left` (it must track the cursor exactly). */
.resize-guide{position:fixed;top:0;bottom:0;width:2px;margin-left:-1px;z-index:9999;pointer-events:none;
  opacity:0;transition:opacity .1s ease;background:var(--accent);box-shadow:0 0 8px color-mix(in srgb,var(--accent) 55%,transparent)}
.resize-guide.on{opacity:.9}
.resize-guide.will-collapse{background:var(--warning);box-shadow:0 0 8px color-mix(in srgb,var(--warning) 55%,transparent)}
.perf{position:absolute;top:10px;right:14px;z-index:6;display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;color:var(--muted);
  background:var(--panel);border:1px solid var(--border);
  border-radius:var(--r-control);padding:4px 8px;box-shadow:var(--shadow)}
.perf b{color:var(--success);font-weight:700}
.perf select,.perf button{font:inherit;color:var(--text);background:var(--elevated);border:1px solid var(--border);
  border-radius:6px;padding:2px 6px;cursor:pointer}
.perf .sep{width:1px;height:14px;background:var(--border)}
.perf-dev{display:flex;align-items:center;gap:8px}
.delta-readout{position:absolute;top:44px;right:14px;z-index:6;font-family:var(--mono);font-size:11px;color:var(--text);
  background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid color-mix(in srgb,var(--accent) 45%,var(--border));
  border-radius:var(--r-control);padding:4px 9px;opacity:0;transition:opacity .18s;pointer-events:none}
.delta-readout.show{opacity:1}
.cp-ghost{position:fixed;z-index:200;pointer-events:none;padding:5px 10px;border-radius:var(--r-control);font-size:12px;font-weight:600;
  box-shadow:var(--shadow);display:flex;align-items:center;gap:7px;background:var(--elevated);border:1px solid var(--accent)}
.cp-ghost .g-dot{width:10px;height:10px;border-radius:50%;background:var(--accent)}
.cp-ghost.illegal{border-color:var(--danger);color:var(--danger)}
.cp-ghost.illegal .g-dot{background:var(--danger)}
.cp-ghost .reason{font-weight:500;color:var(--muted);font-size:11px}
/* Shift+drag = merge (instead of cherry-pick) — same ghost, accent2-tinted so
   the two gestures read as clearly distinct while dragging. */
.cp-ghost.merge{border-color:var(--accent2)}
.cp-ghost.merge .g-dot{background:var(--accent2)}
.cp-ghost.merge.illegal{border-color:var(--danger);color:var(--danger)}
.cp-ghost.merge.illegal .g-dot{background:var(--danger)}
.cp-ghost .spinner{display:none}
.cp-ghost.pending .g-dot{display:none}
.cp-ghost.pending .spinner{display:inline-block}

/* ============================== DETAIL PANEL ============================== */
.detail{grid-area:detail;min-height:0;overflow:auto;background:var(--panel);border-left:1px solid var(--border);position:relative}
/* Drag handles on the sidebar's right edge and the detail panel's left edge —
   live-resize the .app grid's --sidebar-w/--detail-w custom properties (see
   src/legacy/main.ts's wireResizeHandle); the existing canvas ResizeObserver
   already reacts to the resulting .canvas-wrap size change, no extra wiring
   needed there. */
.resize-handle{position:absolute;top:0;bottom:0;width:6px;z-index:5;cursor:col-resize;background:transparent;transition:background-color .12s}
.resize-handle:hover,.resize-handle.active{background:color-mix(in srgb,var(--accent2) 45%,transparent)}
.sidebar-handle{right:-3px}
.detail-handle{left:-3px}
.resizing,.resizing *{cursor:col-resize!important;user-select:none!important}
/* Collapse: dragging a resize handle PAST its own normal minimum (see
   wireResizeHandle's own doc comment in legacy/main.ts) now keeps shrinking
   the panel instead of just clamping flat at that floor — release past the
   halfway point to `--rail-w` and it snaps fully collapsed, leaving ONLY
   this handle visible, now stretched to fill the whole (rail-width) panel
   and showing a chevron — a discoverable, always-visible "click here to
   bring it back" affordance instead of the panel just vanishing with no
   way to reopen it short of blindly dragging the same 6px sliver again. */
/* Exempt .scrim: a modal overlay (e.g. the Detail island's expanded-diff popup)
   is a full-screen position:fixed child of the panel — collapsing the panel via
   Focus mode (⌘\) must not display:none it, or the modal never appears. It hides
   itself via its own visibility:hidden when not .on, so this is safe when closed. */
.sidebar.collapsed>*:not(.resize-handle):not(.scrim),.detail.collapsed>*:not(.resize-handle):not(.scrim){display:none}
.sidebar.collapsed .resize-handle,.detail.collapsed .resize-handle{
  left:0;right:0;width:auto;cursor:pointer;background:var(--elevated);
  display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px}
.sidebar.collapsed .resize-handle:hover,.detail.collapsed .resize-handle:hover{background:var(--panel);color:var(--text)}
.sidebar.collapsed .resize-handle::after{content:'\203A'}
.detail.collapsed .resize-handle::after{content:'\2039'}
.detail section{padding:12px 14px;border-bottom:1px solid var(--border)}
.detail .empty{color:var(--muted);text-align:center;padding:48px 20px;font-size:12.5px;line-height:1.7}
.d-subject{font-size:17px;font-weight:700;font-family:var(--display);line-height:1.35;color:var(--text);letter-spacing:.1px}
.d-body{color:var(--muted);white-space:pre-wrap;margin-top:6px;font-size:12px}
/* Long commit body: clamp to a handful of lines with a soft fade, revealed by
   the Show more/less toggle (see Detail.svelte). */
.d-body.clamped{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 68%,transparent);mask-image:linear-gradient(to bottom,#000 68%,transparent)}
.d-body-toggle{margin-top:4px;font-size:11px;font-weight:600;color:var(--accent);background:transparent;border:0;padding:2px 0;cursor:pointer}
.d-body-toggle:hover{text-decoration:underline}
.id-strip{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.hash{font-family:var(--mono);font-size:12px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-chip);padding:2px 7px;cursor:copy}
.hash:hover{border-color:var(--accent)}
.gpg{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:2px 8px;border-radius:var(--r-pill)}
.gpg.good{color:var(--success);background:color-mix(in srgb,var(--success) 15%,transparent)}
.gpg.none{color:var(--muted);background:var(--bg)}
.gpg.bad{color:var(--danger);background:color-mix(in srgb,var(--danger) 15%,transparent)}
.who-split{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border-radius:var(--r-panel);overflow:hidden;margin-top:4px}
.who{background:var(--panel);padding:9px 11px}
.who h4{margin:0 0 5px;font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.who .nm{font-weight:700;font-size:12.5px}
.who .em{font-family:var(--mono);font-size:10.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.who .dt{font-size:11px;color:var(--muted);margin-top:3px}
.who .dt-abs{font-size:10px;color:var(--muted);opacity:.7;margin-top:1px}
.who.differ{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warning) 45%,transparent)}
.refs-here{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.d-lab{margin:0 0 6px;font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
/* Section-label row with right-aligned tree controls (Collapse/Expand-all) —
   used by the commit Detail's "Changes" header. */
.d-lab-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.tree-ctl{display:flex;align-items:center;gap:4px;margin-left:auto}
.row-chip{font-size:10px;font-family:var(--mono);padding:1px 6px;border-radius:var(--r-chip);border:1px solid var(--border);background:var(--bg);white-space:nowrap}
.row-chip.head{border-color:var(--accent);color:var(--accent)}
.row-chip.tag{border-color:var(--accent2);color:var(--accent2)}
.row-chip.remote{color:var(--muted)}
/* --l5 is one of the commit-graph's own lane colors (a light blue/cyan in
   both themes) — reused here rather than a new one-off hardcoded hex so this
   chip stays theme-aware like every other .row-chip variant already is. */
.row-chip.wsl{color:var(--l5);border-color:color-mix(in srgb,var(--l5) 40%,transparent)}
.covered{border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border));border-radius:var(--r-panel);padding:9px 11px;
  background:color-mix(in srgb,var(--accent) 8%,var(--bg));font-size:11.5px;display:flex;gap:9px;align-items:flex-start;margin-top:10px}
.covered .ck{width:8px;height:8px;border-radius:2px;background:var(--accent);margin-top:3px;flex:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.covered b{color:var(--accent)}
.diffstat{display:flex;align-items:center;gap:10px;margin-top:2px}
.diffstat .nums{font-family:var(--mono);font-size:11px}
.diffstat .nums .add{color:var(--success)} .diffstat .nums .del{color:var(--danger)}
.stat-bar{flex:1;height:8px;border-radius:var(--r-pill);overflow:hidden;display:flex;background:var(--bg);border:1px solid var(--border)}
.stat-bar i{height:100%} .stat-bar .a{background:var(--success)} .stat-bar .d{background:var(--danger)}
.tree{font-size:12px;margin-top:10px}
.tree .dir>summary{list-style:none;display:flex;align-items:center;gap:5px;padding:3px 4px;border-radius:5px;cursor:pointer}
.tree .dir>summary::-webkit-details-marker{display:none}
.tree .dir>summary:hover{background:var(--elevated)}
.tree .dir>summary .tw{transition:transform .12s;color:var(--muted);font-size:10px}
.tree .dir[open]>summary .tw{transform:rotate(90deg)}
.tree .file{display:flex;align-items:center;gap:6px;padding:3px 4px 3px 6px;border-radius:5px;cursor:pointer}
.tree .file:hover{background:var(--elevated)}
.tree .file.active{background:color-mix(in srgb,var(--accent) 15%,transparent)}
.tree .indent{padding-left:16px}
/* .fname truncates instead of wrapping — without this, a long filename
   under deep tree indentation wraps to 2-3 lines, growing .file's own
   height; .file's align-items:center then centers the fixed-size .wd-act
   icon buttons against that taller row, so they (and their title tooltips)
   drift down into the NEXT sibling row instead of staying pinned to this
   row's text. flex:none on .st/.badge matches .wd-file's own equivalents
   (Workdir.svelte's parallel per-file row) so neither can shrink/wrap either. */
.tree .fname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree .badge{margin-left:auto;flex:none;white-space:nowrap;font-family:var(--mono);font-size:10px}
.tree .badge .add{color:var(--success)} .tree .badge .del{color:var(--danger)}
.tree .st{flex:none;width:14px;text-align:center;font-family:var(--mono);font-weight:700;font-size:11px}
.tree .st.M{color:var(--warning)} .tree .st.A{color:var(--success)} .tree .st.D{color:var(--danger)}
.diffview{font-family:var(--mono);font-size:11.5px;line-height:1.55;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-panel);overflow:auto;max-height:320px;margin-top:2px}
/* left:0 (not just top:0) — same reasoning as .diff-line .ln's own sticky
   fix below: without it, this header's OWN file-path text scrolls out of
   view horizontally just like the line numbers used to, losing "which
   file am I looking at" exactly when scrolled right to read a long line. */
.diff-file-h{position:sticky;top:0;left:0;background:var(--elevated);border-bottom:1px solid var(--border);padding:5px 10px;font-weight:600;font-size:11px;color:var(--muted);z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:8px}
.diff-file-h-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* .diff-rows wraps every .diff-line as ONE shrink-wrapped block (Detail.svelte/
   Workdir.svelte both add this wrapper around their {#each} of rows) —
   width:fit-content here grows ONE box to the width of its widest CHILD's
   content (the longest line in the whole diff); min-width:100% keeps it at
   least filling .diffview's own visible width for a short diff, exactly like
   the OLD approach below used to. The difference that actually matters:
   .diff-line itself is now width:100% — 100% of THIS wrapper, i.e. the
   SAME final width for every row, long or short, not each row computing
   its own independent fit-content size. That distinction is BUG FIX,
   not styling — see .diff-line .ln's own doc comment for why this
   discovery. */
.diff-rows{width:fit-content;min-width:100%}
.diff-line{display:flex;white-space:pre;padding-right:8px;width:100%}
/* position:sticky;left — BUG FIX: scrolling .diffview right to read a long
   line used to carry the line-number/+-marker columns away with it (they're
   the FIRST cells in the row's own flex layout, same as everything else) —
   past even a modest scroll offset, EVERY visible row (not just the long
   one) loses its line number/mark AND has its own text start mid-word,
   since one shared horizontal scroll position applies to every row
   regardless of that row's own length. Pinning these two columns to the
   left edge of the viewport (not the row) keeps them visible at any scroll
   position, matching how every other diff viewer (VS Code, GitHub, …)
   keeps line numbers pinned during horizontal scroll. `background` on each
   is required, not decorative: without an OPAQUE backing, the scrolled-
   under code text of whatever the sticky cell is now covering would show
   through it. Mixed against `--bg` (not `transparent`, unlike the row's own
   background below) specifically so the result is fully opaque while still
   matching each row TYPE's own visual color exactly.

   position:sticky alone was NOT enough, though — empirically found (via
   getBoundingClientRect() on a scrolled-right SHORT row's .ln/.sel/.mk)
   that they'd render squeezed/overlapping instead of tiled cleanly, but
   ONLY on a row shorter than the widest line in the diff. Root cause: each
   .diff-line used to independently compute its OWN `width:fit-content;
   min-width:100%` — a SHORT row (say 150px of real content) still ends up
   only ~313px wide (.diffview's own visible client width, from
   min-width:100%), while the LONGEST row in the same diff can be 591px
   wide. A sticky element's stuck position is bounded by its OWN row's
   right edge, not the scroll container's — so once scrolled past a short
   row's 313px-wide box, its sticky .ln/.sel/.mk have nowhere left to sit
   within that row and get compressed into whatever sliver remains. Fixed
   by giving EVERY row the SAME width instead: `.diff-rows` (wrapping the
   whole `{#each}` of rows) shrink-wraps to the widest row's content ONCE,
   and each `.diff-line` is `width:100%` of THAT shared wrapper — so every
   row, short or long, ends up exactly as wide as the longest one, and
   sticky positioning has full room on every row. */
.diff-line .ln{flex:none;width:34px;text-align:right;padding-right:8px;color:var(--muted);opacity:.6;user-select:none;
  position:sticky;left:0;background:var(--bg);z-index:1}
/* left:34px is Detail.svelte's own layout (.ln then .mk, nothing between) —
   Workdir.svelte's hunk-staging rows additionally have a `.sel` checkbox
   BETWEEN them (`.ln`/`.sel`/`.mk`, see the "Hunk/line-level staging"
   block below), so `.sel + .mk` there shifts to left:50px (34px + `.sel`'s
   own 16px) to sit right after `.sel`'s sticky position instead of
   overlapping it. */
.diff-line .mk{flex:none;width:14px;text-align:center;user-select:none;
  position:sticky;left:34px;background:var(--bg);z-index:1}
.diff-line .sel+.mk{left:50px}
.diff-line code{white-space:pre}
.diff-line.hunk{background:color-mix(in srgb,var(--accent2) 12%,transparent);color:var(--muted)}
.diff-line.hunk .ln,.diff-line.hunk .sel,.diff-line.hunk .mk{background:color-mix(in srgb,var(--accent2) 12%,var(--bg))}
.diff-line.add{background:color-mix(in srgb,var(--success) 12%,transparent)}
.diff-line.add .ln,.diff-line.add .sel,.diff-line.add .mk{background:color-mix(in srgb,var(--success) 12%,var(--bg))}
.diff-line.add .mk{color:var(--success)}
.diff-line.del{background:color-mix(in srgb,var(--danger) 12%,transparent)}
.diff-line.del .ln,.diff-line.del .sel,.diff-line.del .mk{background:color-mix(in srgb,var(--danger) 12%,var(--bg))}
.diff-line.del .mk{color:var(--danger)}
.tok-key{color:var(--accent);font-weight:600} .tok-str{color:var(--success)} .tok-num{color:var(--accent2)}
.tok-com{color:var(--muted);font-style:italic} .tok-fn{color:var(--l2)} .tok-punc{color:var(--muted)}

/* ============================== EXPANDED DIFF (full-page popup) ==============================
   Detail.svelte's embedded .diffview above is capped at max-height:320px —
   fine for a glance, cramped for a real changeset. The expand button in
   .diff-file-h opens this instead: same .modal.blame-style near-fullscreen
   sizing as the Blame/rebase-plan viewers, with the SAME detailCtrl.tree/
   diffHeader/diffRows the embedded view already renders (no separate
   controller or re-fetch) — a file list down the left (reuses .tree/dirNode
   verbatim) so switching files doesn't require closing it first. */
.modal.diffx{width:min(1200px,96vw);height:88vh;display:flex;flex-direction:column}
.diffx-head-main h3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modal.diffx .modal-body{flex:1;min-height:0;overflow:hidden;padding:0;display:flex}
/* File panel: a fixed header (Files label + Collapse/Expand-all) over a
   scrolling tree, so a changeset with many folders scrolls inside the 280px
   column instead of being cut off, and the controls stay pinned. */
.diffx-files{flex:none;width:280px;border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0}
.diffx-files-head{display:flex;align-items:center;gap:8px;padding:10px 10px 6px;flex:none}
.diffx-files-scroll{flex:1;min-height:0;overflow:auto;margin-top:0;padding:0 10px 10px}
.diffx-diff{flex:1;min-width:0;min-height:0;max-height:none;border:0;border-radius:0}
/* Drag handle between the file tree and the diff (Detail.svelte). 8px grab zone
   with negative margins so it overlaps the .diffx-files border-right instead of
   adding a gutter; the accent rule appears on hover/drag/keyboard-focus. */
.diffx-splitter{flex:none;width:8px;margin:0 -4px;cursor:col-resize;position:relative;z-index:5;align-self:stretch}
.diffx-splitter::after{content:"";position:absolute;top:0;bottom:0;left:3px;width:2px;border-radius:2px;background:transparent;transition:background .12s}
.diffx-splitter:hover::after,.diffx-splitter.active::after,.diffx-splitter:focus-visible::after{background:var(--accent)}
.diffx-splitter:focus-visible{outline:none}

/* ============================== WORKDIR (staging + commit + stash) ==============================
   Renders in the SAME #detail slot as the sections above, swapped in by
   Workdir.svelte whenever the pinned "Uncommitted changes" row is selected
   (see legacy/main.ts's selectWorkdir() / the -2 row sentinel). Deliberately
   reuses .detail section/.d-lab/.diffview/.diff-line/.hash/.gpg/.spinner/.btn
   verbatim (same visual language as the commit detail panel); only the
   staging-list rows, commit box, and stash list below are new. */
.wd-msg{width:100%;resize:vertical;min-height:52px;padding:8px 10px;background:var(--bg);
  border:1px solid var(--border);border-radius:var(--r-control);color:var(--text);font:inherit;font-size:12.5px}
.wd-msg:focus{outline:none;border-color:var(--accent)}
.wd-msg:disabled{opacity:.6}
.wd-commit-row{display:flex;align-items:center;gap:10px;margin-top:8px}
.wd-amend{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);flex:1;min-width:0}
.wd-commit-row .btn{margin-left:auto;flex:none}
.wd-sec-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
/* Right-aligned per-section controls (Collapse/Expand-all folder buttons, plus
   the unstaged "Stage all"): one flex group pinned right, so a single
   margin-left:auto here replaces .wd-stage-all's own (it would otherwise fight
   the collapse buttons for the free space and split them apart). */
.wd-sec-actions{display:flex;align-items:center;gap:4px;margin-left:auto}
.wd-sec-actions .wd-stage-all{margin-left:0}
.wd-stage-all{margin-left:auto;font-size:11px;font-weight:600;color:var(--accent2);background:transparent;
  border:1px solid color-mix(in srgb,var(--accent2) 45%,var(--border));border-radius:var(--r-control);padding:3px 9px}
.wd-stage-all:hover:not([disabled]){background:color-mix(in srgb,var(--accent2) 12%,transparent)}
.wd-stage-all[disabled]{opacity:.5;cursor:default}
/* Discard all — the danger-toned variant of a section action. */
.wd-discard-all{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,var(--border))}
.wd-discard-all:hover:not([disabled]){background:color-mix(in srgb,var(--danger) 12%,transparent)}
/* Per-file right-click menu (Workdir.svelte). Fixed-position popover + a
   full-screen transparent backdrop that catches the dismissing click. */
.wd-rowmenu-backdrop{position:fixed;inset:0;z-index:60}
.wd-rowmenu{position:fixed;z-index:61;min-width:150px;background:var(--panel);border:1px solid var(--border);
  border-radius:var(--r-panel);box-shadow:0 10px 30px rgba(0,0,0,.35);padding:4px;display:flex;flex-direction:column}
.wd-rowmenu-item{text-align:left;background:transparent;border:0;border-radius:6px;padding:7px 10px;font-size:12.5px;color:var(--text);cursor:pointer}
.wd-rowmenu-item:hover:not([disabled]){background:color-mix(in srgb,var(--text) 8%,transparent)}
.wd-rowmenu-item.danger{color:var(--danger)}
.wd-rowmenu-item.danger:hover:not([disabled]){background:color-mix(in srgb,var(--danger) 12%,transparent)}
.wd-rowmenu-item[disabled]{opacity:.5;cursor:default}
.wd-files{display:flex;flex-direction:column;gap:1px}
.wd-file{display:flex;align-items:center;gap:7px;padding:4px 5px;border-radius:6px;cursor:pointer;font-size:12px}
.wd-file:hover{background:var(--elevated)}
.wd-file.active{background:color-mix(in srgb,var(--accent) 15%,transparent)}
.wd-file .st{width:14px;text-align:center;font-family:var(--mono);font-weight:700;font-size:11px;flex:none}
.wd-file .st[data-status="M"]{color:var(--warning)}
.wd-file .st[data-status="A"]{color:var(--success)}
.wd-file .st[data-status="D"]{color:var(--danger)}
.wd-file .st[data-status="R"]{color:var(--l2)}
.wd-file .st[data-status="T"]{color:var(--accent2)}
.wd-file .st[data-status="?"]{color:var(--accent)}
.wd-path{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* "submodule" badge on a working-tree row whose path is a submodule — a
   distinct teal pill so a dirty submodule (which git reports as a plain "M")
   reads at a glance as a submodule, not an ordinary modified file. */
.wd-sub{flex:none;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:1px 6px;border-radius:999px;cursor:help;
  color:var(--accent2);background:color-mix(in srgb,var(--accent2) 15%,transparent);border:1px solid color-mix(in srgb,var(--accent2) 40%,transparent)}
/* padding:0 is load-bearing, not cosmetic — BUG FIX: `button` (line 62's
   reset) never touches padding/border, so Chrome's own default `<button>`
   padding (1px 6px) was still in effect here; combined with box-sizing:
   border-box (line 58) that ATE INTO this 22px square's own content-box
   (leaving less width than the 14px icon needs), the icon overflowed that
   shrunk content-box and grid's place-items:center ended up centering it 3px
   off from the button's actual visual center — empirically confirmed via
   getBoundingClientRect() on both the button and its icon: 7px inset on one
   side, 1px on the other before this fix; exactly 4px/4px (truly centered)
   after. Same fix applied below to `.bisect-panel-head .x`/`.term-x` — same
   "fixed-size grid-centered icon button" shape, same missing reset. */
.wd-act{flex:none;width:22px;height:22px;padding:0;display:grid;place-items:center;border-radius:5px;border:1px solid transparent;
  background:transparent;color:var(--muted);font-size:13px;line-height:1}
.wd-act:hover:not([disabled]){background:var(--panel);border-color:var(--border);color:var(--text)}
.wd-act.danger:hover:not([disabled]){color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,transparent)}
.wd-act[disabled]{opacity:.4;cursor:not-allowed}
.wd-file .spinner{flex:none}
.wd-stash-list{display:flex;flex-direction:column;gap:2px}
.wd-stash-item{display:flex;align-items:flex-start;gap:8px;padding:6px 5px;border-radius:6px}
.wd-stash-item:hover{background:var(--elevated)}
.wd-stash-item .dot{margin-top:5px;width:8px;height:8px;border-radius:50%;flex:none}
.wd-stash-main{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.wd-stash-msg{font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wd-stash-meta{font-size:10.5px}
.wd-stash-act{display:flex;gap:4px;flex:none}
.wd-stash-act button{font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;border:1px solid var(--border);
  background:var(--elevated);color:var(--text)}
.wd-stash-act button:hover:not([disabled]){border-color:var(--muted)}
.wd-stash-act button.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent)}
.wd-stash-act button[disabled]{opacity:.45;cursor:not-allowed}
.wd-stash-new{margin-top:6px;width:100%;text-align:left;padding:6px 8px;border-radius:6px;border:1px dashed var(--border);
  background:transparent;color:var(--accent);font-weight:600;font-size:12px}
.wd-stash-new:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.wd-stash-form{display:flex;flex-direction:column;gap:6px;margin-top:6px;padding:8px;border:1px solid var(--border);border-radius:var(--r-panel)}
.wd-stash-form input[type="text"],.wd-stash-form input:not([type]){width:100%;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-control);color:var(--text);font:inherit;font-size:12px;padding:6px 8px;outline:none}
.wd-stash-form input:focus{border-color:var(--accent)}
.wd-stash-form .nb-row{display:flex;align-items:center;gap:8px}
.wd-stash-form .wd-amend{flex:1}
.wd-stash-form.busy input{opacity:.6}

/* Hunk/line-level staging (git add -p equivalent) — extends .diffview/
   .diff-line above with a per-line checkbox gutter and per-hunk/selected-
   lines mini toolbars. `.sel` sits between `.ln` and `.mk`, same sticky-
   left-column treatment as those two (see the "BUG FIX" comment on `.ln`
   above) — without it, scrolling right to read a long line would ALSO
   scroll a checked line's checkbox out of reach, undoing the whole point of
   letting you stage/discard individual lines while reading them. */
.diff-line .sel{flex:none;width:16px;display:flex;align-items:center;justify-content:center;
  position:sticky;left:34px;background:var(--bg);z-index:1}
.diff-line .sel input[type="checkbox"]{width:11px;height:11px;margin:0;cursor:pointer}
/* Targets `.ln` (sticky, pinned to the viewport's left edge), not the whole
   row: `.diff-line` itself is `width:fit-content`, so a selected LONG line's
   own box extends far past the viewport — a box-shadow on the row draws at
   THAT far-off left edge, not the visible one, so it'd disappear the moment
   you scroll right to read the very line it's marking as selected. */
.diff-line.selected .ln{box-shadow:inset 2px 0 0 var(--accent)}
.wd-hunk-act{margin-left:auto;display:flex;gap:4px;flex:none}
.wd-hunk-act button{font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:5px;border:1px solid var(--border);
  background:var(--elevated);color:var(--text)}
.wd-hunk-act button:hover:not([disabled]){border-color:var(--muted)}
.wd-hunk-act button.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent)}
.wd-hunk-act button[disabled]{opacity:.45;cursor:not-allowed}
.wd-hunk-act .spinner{flex:none}
.wd-lines-bar{margin-left:auto;display:flex;align-items:center;gap:6px}
.wd-lines-bar button{font-size:11px;font-weight:600;padding:3px 9px;border-radius:6px;border:1px solid var(--border);
  background:var(--elevated);color:var(--text)}
.wd-lines-bar button:hover:not([disabled]){border-color:var(--muted)}
.wd-lines-bar button.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent)}
.wd-lines-bar button[disabled]{opacity:.45;cursor:not-allowed}
/* Select all / Deselect all — a subtler utility button than the solid
   Stage/Discard actions beside it (transparent until hovered). */
.wd-lines-bar .wd-sel-toggle{background:transparent;border-color:transparent;color:var(--muted)}
.wd-lines-bar .wd-sel-toggle:hover:not([disabled]){color:var(--text);border-color:var(--border)}

/* ============================== BISECT / REFLOG / RERERE / PLUMBING content
   ============================================================================
   These used to render inside a persistent bottom drawer (4 tabs, always
   taking up a grid row) — removed in favor of the Tools menu + ⌘K (see
   menu.rs / cmdk.svelte.ts): Reflog/Rerere/Plumbing are now on-demand modals
   (.scrim/.modal, exactly like every other one-shot dialog in this file —
   see e.g. RebasePlan's own doc comment), and Bisect's pre-start "arm good/
   bad by clicking the canvas" step is now a floating, non-blocking panel
   (.bisect-panel below) instead — a real modal scrim would block exactly the
   canvas clicks that step needs. Only the CHASSIS (the tab bar, the
   show/hide-by-class-toggle pane wrapper) is gone; every rule below this
   point still styles the same content, just inside a different container. */
.bisect-ctl{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.bx{padding:6px 12px;border-radius:var(--r-control);border:1px solid var(--border);background:var(--elevated);font-weight:600}
.bx.good{color:var(--success);border-color:color-mix(in srgb,var(--success) 45%,transparent)}
.bx.bad{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,transparent)}
.bx.skip{color:var(--muted)} .bx.reset{margin-left:auto}
.bx small{font-weight:500;color:var(--muted)}
.bisect-range{display:flex;gap:3px;margin:10px 0;flex-wrap:wrap}
.bcell{width:15px;height:15px;border-radius:3px;background:var(--border);position:relative}
.bcell.good{background:var(--success)} .bcell.bad{background:var(--danger)}
.bcell.cand{background:var(--warning)} .bcell.culled{background:var(--border);opacity:.4}
.bcell.pick{outline:2px solid var(--accent);outline-offset:1px}
.bisect-prog{display:flex;align-items:center;gap:10px;margin-top:8px}
.bisect-prog .track{flex:1;height:8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-pill);overflow:hidden}
.bisect-prog .track i{display:block;height:100%;background:var(--accent);transition:width .3s}
.bisect-prog .steps{font-family:var(--mono);font-size:11px;color:var(--muted)}
.bisect-cur{font-family:var(--mono);font-size:12px;margin-top:10px;padding:8px 10px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-control)}
.bisect-cur b{color:var(--accent)}
.log-row{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:6px;font-size:12px}
.log-row:hover{background:var(--elevated)}
.log-row .ic{width:18px;text-align:center}
.log-row .sel{font-family:var(--mono);color:var(--accent);min-width:66px}
.log-row .msg{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.log-row .go{opacity:0;padding:3px 9px;border-radius:6px;border:1px solid var(--accent2);color:var(--accent2);background:transparent;font-weight:600}
.log-row:hover .go{opacity:1}
.rr-row{display:flex;gap:10px;align-items:center;padding:6px 8px;border-radius:6px;font-size:12px}
.rr-row .h{font-family:var(--mono);color:var(--muted)}
.rr-badge{font-size:10px;padding:1px 7px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--success) 16%,transparent);color:var(--success)}

/* ============================== PLUMBING (M5b) ============================== */
.pl-bar{display:flex;gap:8px;margin-bottom:12px}
.pl-input{flex:1;min-width:0;padding:7px 10px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-control);color:var(--text);font-size:12.5px}
.pl-input:focus{outline:none;border-color:var(--accent)}
.pl-err{color:var(--danger);font-size:12px;background:color-mix(in srgb,var(--danger) 10%,transparent);border:1px solid color-mix(in srgb,var(--danger) 35%,transparent);border-radius:var(--r-control);padding:7px 10px;margin-bottom:10px}
.pl-empty{padding:20px 4px;font-size:12.5px;line-height:1.6}
.pl-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.pl-kv{font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:4px;margin:10px 0}
.pl-kv .mono{color:var(--text)}
/* Keyboard-shortcuts reference (the ? overlay): a wider, two-column modal so
   the whole cheat sheet fits at a glance; collapses to one column when narrow. */
.modal.kbd-help{width:min(680px,94vw)}
.kbd-cols{display:grid;grid-template-columns:1fr 1fr;gap:2px 28px}
.kbd-cols .pl-kv{margin:8px 0 0}
.kbd-cols .d-lab:first-child{margin-top:0}
@media (max-width:560px){.kbd-cols{grid-template-columns:1fr}}
.pl-parent{margin-right:8px;display:inline-block}
.pl-msg{font-family:var(--mono);font-size:12px;line-height:1.55;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-panel);padding:10px 12px;white-space:pre-wrap;word-break:break-word;margin-top:4px;max-height:280px;overflow:auto}
.pl-tree{max-height:320px;overflow:auto;border:1px solid var(--border);border-radius:var(--r-panel);background:var(--bg);padding:4px}
.who-split.single{grid-template-columns:1fr}

/* ============================== REFLOG / RERERE / PLUMBING modals ==============================
   Each just wraps that island's existing content (unchanged from its old
   drawer-pane markup) in the shared .scrim/.modal chrome — a plain list or
   form, same "open it, do a thing, close it" shape as e.g. RebasePlan, so
   none of them need a wider-than-default modal. */
.modal.reflog .modal-body,.modal.rerere .modal-body{max-height:60vh;overflow:auto}
.modal.plumbing{width:min(640px,96vw)}

/* Fetch/Pull live-progress modal — a scrollable monospace log of git's own
   --progress output (see the syncprogress island). */
.modal.syncprogress{width:min(600px,96vw)}
.sync-log{font-family:var(--mono);font-size:12px;line-height:1.5;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-panel);padding:10px 12px;white-space:pre-wrap;word-break:break-word;min-height:120px;max-height:46vh;overflow:auto;margin:0}
.sync-empty{display:flex;align-items:center;gap:8px;padding:16px 4px}
.sync-status{margin-top:10px}

/* Mainline-parent chooser for cherry-picking a merge commit. */
.modal.mainline{width:min(520px,96vw)}

/* Tama-styled in-app confirm dialog (see the tamaconfirm island). */
.modal.tamaconfirm{width:min(460px,94vw)}
.modal.tamaconfirm .tc-msg{margin:0;font-size:13px;line-height:1.6;color:var(--text);white-space:pre-line}
.ml-list{display:flex;flex-direction:column;gap:8px}
.ml-parent{display:flex;align-items:flex-start;gap:12px;text-align:left;padding:10px 12px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-panel);cursor:pointer}
.ml-parent:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--bg))}
.ml-num{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--accent);padding-top:1px;white-space:nowrap}
.ml-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.ml-sha{font-size:12px;color:var(--text)}
.ml-summary{font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ml-role{font-size:11.5px}

/* ============================== TAMA GALLERY (hidden Easter egg) ==============================
   Click the nook portrait 7x within ~2.5s (see legacy/main.ts's own click
   counter) — every painted pose in one grid, click a card to "play" it
   live in the real nook via the same TamaMascot state machine every other
   Tama surface already drives. Same .scrim/.modal/.modal-head/.modal-body/
   .modal-foot chrome as every other one-shot dialog; only the card grid
   itself (.tg-*) is new. */
.modal.tama-gallery{width:min(560px,94vw)}
.tg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.tg-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;
  border-radius:var(--r-panel);border:1px solid var(--border);background:var(--elevated);
  cursor:pointer;font:inherit;color:inherit;transition:border-color .12s,transform .12s}
.tg-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.tg-card.active{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)}
.tg-card img{width:64px;height:85px;object-fit:contain;object-position:top;pointer-events:none}
.tg-card .tg-label{font-size:11px;color:var(--muted);text-align:center}

/* ============================== MANAGE REMOTES modal ==============================
   Same .scrim/.modal/.modal-head/.modal-body/.modal-foot/.btn/.btn.ghost/
   .btn.danger/.nb-row/.mono/.mut/.spinner/.row-chip chrome as every other
   one-shot dialog above — only the list-row layout itself (name + URL + a
   small button cluster, or an inline form/confirm replacing the row) is new,
   and even that shape isn't: it's the exact same one Workdir's stash list
   already uses (.wd-stash-item/-main/-act/-form). New `.rm-` prefix rather
   than reusing `.wd-*` verbatim only because this codebase scopes small
   per-list CSS by owning island (.wd-*/.pl-*/.rr-*/.cf-*/.sub-* each keep
   their own near-identical copy rather than sharing one generic name — the
   same per-module-copy convention git_remote_manage.rs's own doc comment
   describes on the Rust side). */
.modal.remotes{width:min(640px,96vw)}
.rm-list{display:flex;flex-direction:column;gap:2px}
.rm-item{display:flex;align-items:center;gap:8px;padding:6px 5px;border-radius:6px}
.rm-item:hover{background:var(--elevated)}
.rm-main{min-width:0;flex:1;display:flex;align-items:baseline;gap:8px;overflow:hidden}
.rm-name{font-weight:700;flex:none}
.rm-url{font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rm-act{display:flex;gap:4px;flex:none}
.rm-act button{font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;border:1px solid var(--border);
  background:var(--elevated);color:var(--text)}
.rm-act button:hover:not([disabled]){border-color:var(--muted)}
.rm-act button.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent)}
.rm-act button[disabled]{opacity:.45;cursor:not-allowed}
.rm-form{display:flex;flex-direction:column;gap:6px;padding:6px 5px}
/* :not([type="checkbox"]) — this rule is meant for the text/select inputs
   that fill the form's own width; without the exclusion it ALSO matched a
   `.cp-x` checkbox nested inside (Pickaxe's "treat as regex"/"search all
   branches", Search Code's "case sensitive"), stretching it to width:100%
   with 6px/8px padding and squeezing its label text into a garbled multi-line
   wrap — reproduced and confirmed the fix at the modal's own full width, not
   a narrow-viewport-only issue. */
.rm-form input:not([type="checkbox"]),.rm-form select{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-control);
  color:var(--text);font:inherit;font-size:12px;padding:6px 8px;outline:none}
.rm-form input:focus,.rm-form select:focus{border-color:var(--accent)}
.rm-form.busy input,.rm-form.busy select{opacity:.6}
.rm-form .nb-row{display:flex;align-items:center;gap:8px}
.rm-add{border-top:1px solid var(--border);margin-top:8px;padding-top:10px}
.rm-confirm .msg{color:var(--danger)}

/* ============================== REPOSITORIES (multi-repo dashboard, backlog #11) modal ==============================
   Dashboard.svelte — reached from the Tools menu / ⌘K ("Repositories…", see
   menu.rs / cmdk.svelte.ts) AND the empty-hero card's own button (see
   Detail.svelte) — deliberately reachable with or without a repo open (see
   dashboard.svelte.ts's own header doc). Widened past the default .modal,
   same reasoning as .modal.pickaxe above (a row needs room for name + path +
   branch/ahead-behind/dirty chips + last-commit line on one card). Row shape
   reuses .rm-item's own two-line-main-plus-button-cluster layout (own `.db-`
   prefix per this codebase's per-owning-island CSS-copy convention — see
   .rm-* 's own doc comment just above) plus .row-chip/.log-row/.mono/.mut/
   .spinner/.btn chrome like every other one-shot dialog in this file. */
.modal.dashboard{width:min(760px,96vw)}
.modal.dashboard .modal-body{max-height:65vh;overflow:auto}
.modal.dashboard .modal-foot{justify-content:space-between}
.db-add{margin-right:auto}
/* In-app Help page (#helpScrim). */
.modal.help{width:min(720px,92vw);max-height:82vh;display:flex;flex-direction:column}
.help-body{overflow:auto;padding:2px 20px 10px}
.help-body section{margin:15px 0}
.help-body h4{margin:0 0 5px;font-size:13px;color:var(--accent);font-weight:700}
.help-body p{margin:0;font-size:13px;line-height:1.6;color:var(--muted)}
.help-body p b{color:var(--text);font-weight:600}
.help-body kbd{font-family:var(--mono);font-size:11px;background:var(--elevated);border:1px solid var(--border);border-radius:4px;padding:0 5px;color:var(--text);white-space:nowrap}
.db-search{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-control);
  color:var(--text);font:inherit;font-size:12px;padding:7px 9px;outline:none;margin-bottom:8px}
.db-search:focus{border-color:var(--accent)}
.db-list{display:flex;flex-direction:column;gap:2px}
.db-item{display:flex;align-items:flex-start;gap:10px;padding:8px 6px;border-radius:6px}
.db-item:hover{background:var(--elevated)}
.db-item.broken{opacity:.75}
.db-main{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.db-name-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.db-name{font-weight:700}
.db-ab{font-size:11px;color:var(--muted)}
.db-path{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-sub{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:6px}
.db-broken{color:var(--danger)}
.db-act{display:flex;gap:4px;flex:none;align-items:center}
.db-act button{font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;border:1px solid var(--border);
  background:var(--elevated);color:var(--text)}
.db-act button:hover:not([disabled]){border-color:var(--muted)}
.db-act button[disabled]{opacity:.45;cursor:not-allowed}
.row-chip.dirty{color:var(--warning);border-color:color-mix(in srgb,var(--warning) 40%,transparent)}

/* ============================== BISECT floating panel ==============================
   The pre-start "arm good/bad by clicking a commit on the canvas" step —
   opened via the Tools menu / ⌘K (bisectDrawerCtrl.show()), closed once a
   real bisect starts (bisectCtrl's own full .scrim modal takes over) or via
   the × below. Deliberately NOT a .scrim modal: that would block the very
   canvas clicks this step exists to collect. Floats over the canvas exactly
   like .hint/.delta-readout already do (position:absolute inside
   .canvas-wrap, not position:fixed) — bottom-right, the one corner neither
   of those two already occupies. 92% opaque background, NOT the 70% this
   file used to use for .hint before a real commit row scrolling underneath
   it turned out to bleed through — see that fix's own commit for why 92% is
   this app's established floor for a fixed-position chip over arbitrary
   canvas content. */
.bisect-panel{position:absolute;right:14px;bottom:10px;z-index:7;width:min(320px,calc(100% - 28px));
  background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid var(--border);
  border-radius:var(--r-panel);box-shadow:var(--shadow);padding:12px 14px;display:block;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
.bisect-panel.on{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease,transform .18s ease}
.bisect-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-weight:600}
.bisect-panel-head .x{width:22px;height:22px;padding:0;display:grid;place-items:center;border-radius:6px;
  border:1px solid var(--border);background:var(--elevated);color:var(--muted)}
.bisect-panel-head .x:hover{border-color:var(--muted);color:var(--text)}

/* ============================== BUILT-IN TERMINAL drawer ==============================
   A real PTY-backed shell (see src-tauri/src/terminal.rs), toggled via the
   Tools menu/⌘K/CmdOrCtrl+` (src/islands/terminal). Deliberately NOT a
   .scrim modal — a terminal you can't glance at the graph/detail panes
   alongside would defeat half the point of it living inside the app at
   all. Slides up from the bottom instead, same show/hide idiom as
   .bisect-panel/.scrim (opacity+transform, visibility delayed until the
   transition finishes so a hidden drawer doesn't eat clicks or show up in
   the a11y tree) but full-width and resizable (.term-drag), since an
   80-column shell needs real room, not a small floating chip. */
.term-drawer{position:fixed;left:0;right:0;bottom:0;height:var(--term-h);z-index:250;
  background:var(--bg);border-top:1px solid var(--border);box-shadow:0 -8px 24px rgba(0,0,0,.35);
  display:flex;flex-direction:column;transform:translateY(100%);
  visibility:hidden;transition:transform .18s ease,visibility 0s linear .18s}
.term-drawer.on{transform:none;visibility:visible;transition:transform .18s ease}
.term-drag{height:6px;flex:none;cursor:row-resize}
.term-drag:hover{background:color-mix(in srgb,var(--accent) 30%,transparent)}
.term-head{display:flex;align-items:center;gap:10px;flex:none;padding:6px 10px;
  background:var(--panel);border-bottom:1px solid var(--border);font-size:12px}
.term-title{font-weight:600}
.term-ic{font-family:var(--mono);font-weight:700;color:var(--accent)}
.term-exited{color:var(--muted)}
.term-btn{font-size:11px;font-weight:600;padding:3px 9px;border-radius:6px;border:1px solid var(--border);
  background:var(--elevated);color:var(--text)}
.term-btn:hover{border-color:var(--muted)}
.term-x{margin-left:auto;width:22px;height:22px;padding:0;flex:none;display:grid;place-items:center;border-radius:6px;
  border:1px solid var(--border);background:var(--elevated);color:var(--muted)}
.term-x:hover{border-color:var(--muted);color:var(--text)}
.term-body{flex:1;position:relative;min-height:0}
.term-xterm{position:absolute;inset:0;padding:4px 8px}
.term-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:12.5px;background:var(--bg);text-align:center;padding:0 20px}

/* ============================== MODALS ============================== */
/* Tama message toast — pinned top-right ABOVE every modal (z-index beats the
   .scrim at 300 and the cmdk/dev-badge at 500), so an error or result Tama
   surfaces while a full-screen scrim covers her nook (bottom of the sidebar)
   is still visible. Shown only while a scrim is actually up (see _topToast).
   aria-hidden: the nook itself is an aria-live region, so this visual mirror
   must not double-announce to screen readers. */
.top-toast{position:fixed;top:14px;right:16px;z-index:600;max-width:340px;
  padding:10px 14px;border-radius:10px;background:var(--panel);border:1px solid var(--border);
  border-left:3px solid var(--muted);box-shadow:var(--shadow);color:var(--text);
  font-family:var(--display);font-weight:600;font-size:12.5px;line-height:1.36;
  opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease}
.top-toast.show{opacity:1;transform:none}
.top-toast.k-warn{border-left-color:var(--danger)}
.top-toast.k-caution{border-left-color:var(--warning,#c98a2e)}
.top-toast.k-good{border-left-color:var(--success)}
.scrim{position:fixed;inset:0;z-index:300;background:rgba(18,20,28,.62);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;visibility:hidden;transition:opacity .16s ease,visibility 0s linear .16s}
.scrim.on{opacity:1;visibility:visible;transition:opacity .16s ease}
.modal{width:min(560px,96vw);background:var(--panel);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow);overflow:hidden;
  transform:translateY(10px) scale(.98);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.scrim.on .modal{transform:none}
.modal.danger{border-color:color-mix(in srgb,var(--danger) 55%,var(--border));box-shadow:0 0 0 1px color-mix(in srgb,var(--danger) 30%,transparent),var(--shadow)}
.modal-head{display:flex;align-items:center;gap:12px;padding:16px 18px;background:color-mix(in srgb,var(--danger) 10%,var(--panel));border-bottom:1px solid var(--border)}
.modal-head .tama{width:46px;height:46px;flex:none;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--danger) 55%,transparent))}
.modal-head h3{margin:0;font-family:var(--display);font-size:16px}
.modal-head p{margin:2px 0 0;color:var(--muted);font-size:12px}
.msteps{display:flex;gap:6px;padding:12px 18px 0}
.msteps .s{flex:1;height:4px;border-radius:var(--r-pill);background:var(--border)}
.msteps .s.done{background:var(--danger)} .msteps .s.now{background:var(--warning)}
.modal-body{padding:14px 18px}
.will-lose{background:var(--bg);border:1px solid color-mix(in srgb,var(--danger) 30%,var(--border));border-radius:var(--r-panel);padding:10px 12px;font-size:12px}
.will-lose h5{margin:0 0 6px;color:var(--danger);font-size:11px;text-transform:uppercase;letter-spacing:.5px}
.will-lose ul{margin:0;padding-left:18px;color:var(--text)}
.will-lose code{font-family:var(--mono)}
.backup-note{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12px;color:var(--muted);
  background:color-mix(in srgb,var(--accent2) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent2) 30%,transparent);border-radius:var(--r-control);padding:8px 10px}
.backup-note code{font-family:var(--mono);color:var(--accent2)}
/* Inline "stashing didn't actually fix it" notice inside the dirty-tree
   chooser (see resolver.svelte.ts's `dirtyBlockStuck` doc comment for why
   this can't just be a bridge.tama.warn toast — the chooser's own `.scrim`
   sits on top of the sidebar's Tama nook the whole time it's open). Same
   shape as .backup-note, --warning instead of --accent2 to match Tama's own
   "confused" state's accent color for this class of message. */
.dirty-stuck-note,.cf-stuck-note{margin-top:12px;font-size:12px;color:var(--text);line-height:1.5;
  background:color-mix(in srgb,var(--warning) 12%,transparent);border:1px solid color-mix(in srgb,var(--warning) 35%,transparent);border-radius:var(--r-control);padding:9px 11px}
/* Prominent "nothing chosen yet" prompt for a modal step whose body would
   otherwise render empty (e.g. the setup wizard's "pick a folder" step before
   a folder is chosen) — a dashed accent-colored call-to-action box instead of
   blank space, so the step still has visual weight while waiting on the user. */
.modal-cta{border:1.5px dashed color-mix(in srgb,var(--accent) 45%,var(--border));border-radius:var(--r-panel);padding:26px 18px;text-align:center}
.modal-cta .ic{font-size:30px;line-height:1;margin-bottom:10px}
.modal-cta .t{font-size:13.5px;font-weight:600;color:var(--text);margin-bottom:5px}
.modal-cta .t.mono{font-size:12px;word-break:break-all}
.modal-cta .sub{font-size:12px;color:var(--muted);line-height:1.6;max-width:320px;margin:0 auto}
.modal-cta .sub b{color:var(--accent)}
/* .modal-drop: the modal-cta box also acts as a click-to-browse / drop-a-
   folder-here target (setup wizard's pick step) — cursor+hover say "this is
   interactive", .dragover highlights solid while a native OS drag hovers the
   window (see setupwizard.svelte.ts's armDropZone), .busy dims it mid-validate. */
.modal-drop{cursor:pointer;transition:border-color .12s,background-color .12s}
.modal-drop:hover{border-color:color-mix(in srgb,var(--accent2) 55%,var(--border));background:color-mix(in srgb,var(--accent2) 5%,transparent)}
.modal-drop:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.modal-drop.dragover{border-style:solid;border-color:var(--accent2);background:color-mix(in srgb,var(--accent2) 10%,transparent)}
.modal-drop.busy{cursor:default;opacity:.65;pointer-events:none}
/* Scannable numbered step preview (setup wizard's welcome screen) — replaces
   a single dense sentence with real visual weight per step. */
.modal-steplist{display:flex;flex-direction:column;gap:12px}
.modal-steplist .row{display:flex;align-items:flex-start;gap:12px}
.modal-steplist .n{flex:none;width:24px;height:24px;border-radius:50%;margin-top:1px;
  background:color-mix(in srgb,var(--accent2) 16%,var(--panel));border:1px solid color-mix(in srgb,var(--accent2) 40%,var(--border));
  color:var(--accent2);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.modal-steplist .txt{font-size:13px;color:var(--text);line-height:1.4}
.modal-steplist .txt .mut{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.confirm-type{margin-top:14px}
.confirm-type label{font-size:12px;color:var(--muted)}
.confirm-type input{width:100%;margin-top:5px;padding:8px 10px;font-family:var(--mono);background:var(--bg);border:1px solid var(--border);border-radius:var(--r-control);color:var(--text)}
.confirm-type input:focus{outline:none;border-color:var(--danger)}
.modal-foot{display:flex;gap:10px;justify-content:flex-end;padding:14px 18px;border-top:1px solid var(--border)}
.btn{padding:8px 16px;border-radius:var(--r-control);border:1px solid var(--border);background:var(--elevated);font-weight:600;
  transition:border-color .12s,background-color .12s}
.btn.ghost{background:transparent}
.btn:not(.danger):not([disabled]):hover{border-color:var(--muted)}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.danger[disabled]{opacity:.4;cursor:not-allowed}
.btn.danger:not([disabled]){box-shadow:0 0 0 1px color-mix(in srgb,var(--danger) 40%,transparent),0 0 16px color-mix(in srgb,var(--danger) 30%,transparent)}
.btn.danger:not([disabled]):hover{background:color-mix(in srgb,var(--danger) 85%,#000)}
.resolver .modal-head{background:color-mix(in srgb,var(--warning) 10%,var(--panel))}
.resolver .modal-head .tama{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--warning) 55%,transparent))}
/* Ours/Theirs — the top, read-only reference row of the redesigned conflict
   view (see .cf-content's own comment below for the full 2-row shape). Used
   to be a 3-column ours/base/theirs grid taking the WHOLE content area;
   base was dropped from the always-visible row (still readable via each
   hunk's own context lines in .cf-result below) so ours/theirs — the two
   sides actually being chosen between — each get real width instead of a
   cramped third of it. */
.cf-compare{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-panel);overflow:hidden;font-family:var(--mono);font-size:11px;flex:0 0 200px;min-height:0}
.tw-col{background:var(--bg);overflow:auto} .tw-col h6{margin:0;padding:5px 8px;background:var(--elevated);font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-family:var(--ui)}
.tw-col .ln{padding:2px 8px}
.tw-col.ours .ln{background:color-mix(in srgb,var(--accent2) 10%,transparent)}
.tw-col.theirs .ln{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.modal.resolver{width:min(880px,96vw);max-height:calc(100vh - 48px);display:flex;flex-direction:column}
/* ADVERSARIALLY-FOUND FIX: #cfThree/.cf-files below used to be capped at a
   fixed max-height:360px regardless of actual window size, wasting most of
   this modal's own available height (up to calc(100vh - 48px), i.e. nearly
   the full screen) on a cramped, separately-scrolling box — "the merge
   window is small, can't see the full content" even on a tall display. This
   modal-body now stretches its own content (.cf-layout) to fill whatever
   height is actually available, so the three-way diff/file list grow with
   the window instead of being stuck at a small constant; overflow:auto here
   stays purely as the fallback for edit mode's own content shape, since
   #cfThree/.cf-files now scroll internally on their own (see their own
   updated rules) well before this outer one would ever need to. */
.modal.resolver .modal-body{overflow:auto;flex:1;display:flex;flex-direction:column;min-height:0}
.btn[disabled]{opacity:.42;cursor:not-allowed;box-shadow:none}
/* Shared loading-state building block, applied consistently across every
   async operation in the app — most previously signaled "in progress" only
   via Tama's easy-to-miss corner mascot state, or nothing at all. CSS-only
   (no image asset), inherits color via currentColor so it matches whatever
   button/text/badge it sits inside. */
@keyframes gc-spin{to{transform:rotate(360deg)}}
.spinner{display:inline-block;width:12px;height:12px;flex:none;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:gc-spin .6s linear infinite;opacity:.75;vertical-align:-2px}
.btn .spinner,.tb-btn .spinner{margin-right:1px}
.resolver .modal-foot #conflictAbort{margin-right:auto}
/* flex:1/min-height:0 (a flex item of the now-flex-column .modal-body above)
   is what lets this actually grow to fill the modal's real available height
   instead of just sizing to content — grid's own default
   align-content/align-items (both compute to "stretch" for a grid container/
   its items) then carries that full height down into the single implicit
   row, and from there into .cf-files/.cf-main below, matching #cfThree's own
   updated rule. */
.cf-layout{display:grid;grid-template-columns:190px 1fr;gap:12px;flex:1;min-height:0}
/* No conflicted files (e.g. resuming an in-progress op with nothing to merge,
   or all resolved and the list emptied): the left file-list box is hidden, so
   drop its column and let .cf-main take the full width instead of leaving a
   bordered empty box. */
.cf-layout.no-files{grid-template-columns:1fr}
.cf-files{display:flex;flex-direction:column;gap:2px;min-height:0;overflow:auto;border:1px solid var(--border);border-radius:var(--r-panel);padding:4px;background:var(--bg)}
.cf-file{display:flex;align-items:center;gap:7px;padding:5px 7px;border-radius:6px;cursor:pointer;font-size:12px}
.cf-file:hover{background:var(--elevated)}
.cf-file.sel{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.cf-file .cf-mk{color:var(--warning);flex:none}
.cf-file.done .cf-mk{color:var(--accent2)}
.cf-file.done .cf-name{color:var(--muted);text-decoration:line-through}
/* filter-repo's backup list, while a restore of one of them is in flight —
   blocks picking a DIFFERENT backup mid-restore. */
.cf-files.busy{opacity:.55;pointer-events:none}
.cf-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-main{min-width:0;min-height:0;display:flex;flex-direction:column;gap:8px}
.cf-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none}
.cf-cur{font-family:var(--mono);font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-take{display:flex;gap:6px;flex:none}
.cf-take .btn{padding:4px 11px;font-size:12px}
.cf-remain{font-size:12px}
/* #cfThree/.cf-content — the redesigned conflict-file view: a fixed-ish
   .cf-compare row up top (Ours/Theirs, read-only reference) and .cf-result
   below it taking whatever's left, instead of one flat 3-column grid. Own
   scroll delegated to the two children (.cf-compare's .tw-col panels,
   .cf-result itself) rather than this wrapper, so the action bar above and
   Result's own header stay pinned while only the panel CONTENTS scroll. */
#cfThree{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.tw-col .ln code{white-space:pre-wrap;word-break:break-word}
/* Always-visible hunk-level resolution editor (resolver.svelte.ts's
   loadHunks() — auto-fetched per file, no separate "Edit resolution" toggle
   anymore) — the bottom row of #cfThree, taking whatever height .cf-compare
   above it doesn't use. */
.cf-result{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px;border:1px solid var(--border);border-radius:var(--r-panel);padding:8px;background:var(--bg)}
.cf-result-head{display:flex;align-items:center;justify-content:space-between;flex:none}
.cf-result-head h6{margin:0;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-family:var(--ui)}
.cf-result-head .btn{padding:4px 11px;font-size:12px}
.cf-edit-loading{display:flex;align-items:center;gap:6px;padding:14px;color:var(--muted);font-size:12px}
.cf-all-resolved{padding:14px;font-size:12px}
.cf-edit{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:2px}
.cf-edit-context{margin:0;padding:2px 6px;font-family:var(--mono);font-size:11px;color:var(--muted);white-space:pre-wrap;word-break:break-word}
.cf-edit-conflict{border:1px solid color-mix(in srgb,var(--warning) 45%,var(--border));border-radius:var(--r-control);
  background:color-mix(in srgb,var(--warning) 6%,transparent);padding:6px;margin:4px 0}
.cf-edit-conflict-actions{display:flex;gap:6px;margin-bottom:6px}
.cf-edit-conflict-actions .btn{padding:3px 9px;font-size:11px}
.cf-edit-textarea{width:100%;min-height:64px;resize:vertical;font-family:var(--mono);font-size:11px;line-height:1.5;
  padding:6px 8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-control);color:var(--text)}
.cf-edit-textarea:focus{outline:none;border-color:var(--accent)}
/* font-family explicit (not inherited from .perf's monospace, which fits
   the fps/ms debug readout next to it but reads as leftover code/debug
   chrome for an ordinary user-facing setting label like this one). */
.cp-x{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-family:var(--ui);font-size:11px;cursor:pointer}
/* Interactive-rebase "editing" pause (see Resolver.svelte's doc comment) —
   reuses the resolver modal shell but swaps the file-list/three-way-diff body
   for a plain call-to-action banner while paused at an `edit` todo line. */
.rb-edit-banner{border:1.5px dashed color-mix(in srgb,var(--warning) 45%,var(--border));border-radius:var(--r-panel);padding:26px 18px;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center}
.rb-edit-banner p{margin:0;font-size:13px;color:var(--text);max-width:420px;line-height:1.5}
/* Persistent pill — stays on-screen whenever the resolver modal is
   backgrounded (`.editing && !.open`, via openWorkdirToAmend) so Continue/
   Abort remain reachable while the user amends via the Workdir panel. */
.rb-pause-pill{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:301;
  display:flex;align-items:center;gap:10px;padding:8px 12px;
  background:var(--panel);border:1px solid color-mix(in srgb,var(--warning) 45%,var(--border));
  border-radius:var(--r-pill);box-shadow:var(--shadow);font-size:12px}
.rb-pause-ic{color:var(--warning)}
.rb-pause-txt{color:var(--text);white-space:nowrap}
/* ---------- M3 bisect modal (mirrors the .resolver template) ---------- */
.modal.bisecter{width:min(560px,96vw)}
.bisecter .modal-head{background:color-mix(in srgb,var(--accent) 10%,var(--panel))}
.bisecter .modal-head .tama{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 55%,transparent))}
/* ---------- Setup wizard: welcoming, not alarming — .modal-head/.msteps'
   base styling is tuned for the (genuinely dangerous) filter-repo wizard, so
   every other modal overrides it with its own semantic color; this one was
   missing that override and inherited the danger-red tint by mistake. ---------- */
.setupwizard .modal-head{background:color-mix(in srgb,var(--accent2) 10%,var(--panel))}
.setupwizard .modal-head .tama{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent2) 55%,transparent))}
.setupwizard .msteps .s.done{background:var(--accent2)}
.setupwizard .msteps .s.now{background:var(--accent)}
/* ---------- Settings modal: same "don't inherit the danger-red tint by
   mistake" rule as bisect/setupwizard above — a neutral utility screen gets
   the same accent tint as bisect (indigo), not a new color. ---------- */
.settings .modal-head{background:color-mix(in srgb,var(--accent) 10%,var(--panel))}
/* Settings grew a lot of sections (Appearance/Graph/Cherry-pick/Updates/
   Tama/Git identity/Git config, the last with its own curated fields +
   Advanced editor) — same fixed-height-then-scroll treatment every other
   content-heavy modal already uses (dashboard/pickaxe/codesearch/
   reposummary's own ".modal.X .modal-body{max-height:...vh;overflow:auto}"
   rules) rather than letting the modal grow past the viewport. */
.modal.settings .modal-body{max-height:70vh;overflow:auto}
/* Reusable "small labeled checkbox row" for Settings' instant-apply toggles
   — deliberately NOT reusing .cp-x (that class is named for the cherry-pick
   -x flag specifically; reusing it here under an unrelated name would read
   wrong to a future maintainer), same visual treatment otherwise. */
.set-toggle{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text);cursor:pointer}
/* Sound effects volume row — a `Test` button right next to the slider is
   the one control most worth having here: several of these sounds
   (celebrate especially) are rare by design, so without a way to preview
   on demand there's no way to discover what turning this on/off or up/down
   even sounds like. accent-color recolors the native range thumb/track to
   match the app's own palette with no custom ::-webkit-slider-thumb/
   ::-moz-range-thumb rules needed. */
.set-volume{display:flex;align-items:center;gap:10px}
.set-volume input[type="range"]{flex:1;accent-color:var(--accent)}
.set-volume input[type="range"]:disabled{opacity:.45}
.set-volume .btn{flex:none;padding:5px 12px;font-size:11.5px}
.bz-prog{display:flex;align-items:center;gap:10px}
.bz-track{flex:1;height:8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-pill);overflow:hidden}
.bz-track i{display:block;height:100%;width:0;background:var(--accent);transition:width .3s}
.bz-stat{font-family:var(--mono);font-size:11px;color:var(--muted);flex:none;white-space:nowrap}
.bz-cur{margin-top:14px;padding:12px 14px;background:var(--bg);border:1px solid color-mix(in srgb,var(--accent) 45%,var(--border));border-radius:var(--r-panel)}
.bz-cur-h,.bz-result-h{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.bz-sha{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--accent);margin-top:4px}
.bz-sha.bad{color:var(--danger)}
.bz-subj{font-size:12.5px;margin-top:2px;color:var(--text)}
.bz-result{margin-top:14px;padding:12px 14px;border-radius:var(--r-panel);
  background:color-mix(in srgb,var(--success) 12%,var(--bg));border:1px solid color-mix(in srgb,var(--success) 45%,var(--border))}
.bz-result-h{color:var(--success);font-weight:700}
.bz-run{margin-top:14px}
.bz-run-h{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:6px}
.bz-run-row{display:flex;align-items:center;gap:8px}
.bz-run-input{flex:1;min-width:0;padding:7px 10px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-control);color:var(--text);font-size:12.5px}
.bz-run-input:focus{outline:none;border-color:var(--accent)}
.bz-run-status{flex:1;display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.btn.bz-cancel{color:var(--warning);border-color:color-mix(in srgb,var(--warning) 50%,var(--border))}
.btn.bz-cancel:not([disabled]){background:color-mix(in srgb,var(--warning) 12%,var(--elevated))}
.bisecter .modal-foot{align-items:center}
.bisecter .modal-foot #bzQuit{margin-right:auto}
.bz-mark-group{display:flex;gap:8px}
.btn.bz-good{color:var(--success);border-color:color-mix(in srgb,var(--success) 50%,var(--border))}
.btn.bz-good:not([disabled]){background:color-mix(in srgb,var(--success) 12%,var(--elevated))}
.btn.bz-bad{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 50%,var(--border))}
.btn.bz-bad:not([disabled]){background:color-mix(in srgb,var(--danger) 12%,var(--elevated))}
.btn.bz-skip{color:var(--muted)}
/* ============================== ⌘K COMMAND PALETTE ============================== */
.cmdk{position:fixed;inset:0;z-index:500;display:block;
  opacity:0;visibility:hidden;transition:opacity .14s ease,visibility 0s linear .14s}
.cmdk.on{opacity:1;visibility:visible;transition:opacity .14s ease}
.cmdk-scrim{position:absolute;inset:0;background:rgba(18,20,28,.5);backdrop-filter:blur(2px)}
.cmdk-panel{position:relative;width:min(620px,94vw);margin:11vh auto 0;max-height:70vh;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow);overflow:hidden;
  transform:translateY(-8px);transition:transform .14s ease}
.cmdk.on .cmdk-panel{transform:none}
.cmdk-inp{display:flex;align-items:center;gap:9px;padding:11px 14px;background:var(--elevated);border-bottom:1px solid var(--border)}
.cmdk-inp .mag{color:var(--muted);font-size:15px;flex:none}
.cmdk-inp input{flex:1;min-width:0;border:0;background:transparent;color:var(--text);font-size:15px;font-family:var(--ui)}
.cmdk-inp input:focus{outline:none}
.cmdk-inp input::placeholder{color:var(--muted)}
.cmdk-inp kbd{flex:none;font-family:var(--mono);font-size:10px;padding:2px 6px;border-radius:5px;background:var(--bg);border:1px solid var(--border);color:var(--muted)}
.cmdk-list{flex:1;min-height:0;overflow:auto;padding:6px}
.cmdk-row{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--r-control);cursor:pointer;scroll-margin:6px;transition:background-color .1s}
.cmdk-row.on{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.cmdk-row .kind{flex:none;width:54px;text-align:center;font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.4px;
  color:var(--muted);border:1px solid var(--border);border-radius:var(--r-chip);padding:2px 0}
.cmdk-row .kind.head{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 50%,var(--border))}
.cmdk-row .kind.tag{color:var(--accent2);border-color:color-mix(in srgb,var(--accent2) 50%,var(--border))}
.cmdk-row .kind.action{color:var(--warning);border-color:color-mix(in srgb,var(--warning) 50%,var(--border))}
.cmdk-row .main{flex:1;min-width:0}
.cmdk-row .ttl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdk-row .sub{margin-top:1px;font-size:11px;color:var(--muted);font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdk-row .sha{flex:none;font-family:var(--mono);font-size:11px;color:var(--muted)}
.cmdk-row mark{background:color-mix(in srgb,var(--accent) 32%,transparent);color:inherit;border-radius:2px;padding:0 1px}
.cmdk-empty{padding:28px 14px;text-align:center;color:var(--muted);font-size:12px}
.cmdk-foot{display:flex;align-items:center;gap:14px;padding:8px 14px;background:var(--elevated);border-top:1px solid var(--border);color:var(--muted);font-size:11px}
.cmdk-foot kbd{font-family:var(--mono);font-size:10px;padding:1px 5px;border-radius:4px;background:var(--bg);border:1px solid var(--border);margin-right:2px}
.cmdk-foot .sp{margin-left:auto}

/* ============================== INTERACTIVE REBASE PLANNER (M6) ==============================
   RebasePlan.svelte's drag-to-reorder todo-list editor for `git rebase -i`.
   Reuses the shared .scrim/.modal/.modal-head/.modal-body/.modal-foot/.btn/
   .spinner/.mono/.mut chrome verbatim (see index.html's MODALS section above);
   only the row list below is new. Not tinted like the resolver (active
   conflict) or the destructive-default danger modal head — this is a
   plan-before-you-commit surface, same "nothing has happened yet" family as
   the bisect modal, so it borrows that one's --accent tint instead of
   reading as alarming (cf. the .setupwizard override right above, fixing the
   same class of mistake for a different modal). */
.modal.rebaseplan{width:min(640px,96vw)}
.rebaseplan .modal-head{background:color-mix(in srgb,var(--accent) 10%,var(--panel))}
/* The scrollable well of draggable rows — var(--bg) recessed against the
   var(--panel) modal, the same elevation step as .cf-files/.pl-tree above;
   each row then sits one step back up on var(--elevated), matching this
   app's usual panel -> well -> card layering. */
.rbp-list{display:flex;flex-direction:column;gap:4px;max-height:400px;overflow:auto;
  padding:5px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-panel)}
.rbp-list.busy{opacity:.6;pointer-events:none}
.rbp-empty{padding:24px 14px;text-align:center;font-size:12.5px;line-height:1.6}
.rbp-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;cursor:grab;
  background:var(--elevated);border:1px solid var(--border);font-size:12px;
  transition:border-color .12s,background-color .12s,opacity .12s}
.rbp-row:hover{border-color:var(--muted)}
/* Row currently picked up — fades in place like a native drag ghost; the row
   under the cursor gets the same accent2 "active drop target" highlight this
   app already uses for a real OS file drag (see .modal-drop.dragover). */
.rbp-row.dragging{opacity:.4;cursor:grabbing}
.rbp-row.drop-target{border-color:var(--accent2);background:color-mix(in srgb,var(--accent2) 14%,var(--elevated))}
/* A "drop" row is leaving history — read it struck-through and muted, the
   same treatment as an already-handled entry in the filter-repo backup list
   (.cf-file.done .cf-name) rather than inventing a new pattern. */
.rbp-row.dropped{opacity:.6}
.rbp-row.dropped .rbp-subject{color:var(--muted);text-decoration:line-through}
.rbp-handle{flex:none;width:14px;text-align:center;color:var(--muted);font-size:12px;line-height:1;user-select:none}
/* Per-action glyph colour, so the plan reads at a glance without opening
   every row's select: pick=kept (success); edit=pauses the rebase (warning,
   matching .rb-edit-banner's tint for that same paused state); squash/fixup
   fold into the previous commit (this app's "combine" colour — see
   .cp-ghost.merge — for accent2), but fixup also discards its own message so
   it's dialled back to muted rather than sharing squash's full accent2;
   drop=danger, same red as every other destructive action in the app. */
.rbp-mk{flex:none;width:16px;text-align:center;font-size:12px;line-height:1;color:var(--muted)}
.rbp-mk[data-action="pick"]{color:var(--success)}
.rbp-mk[data-action="edit"]{color:var(--warning)}
.rbp-mk[data-action="squash"]{color:var(--accent2)}
.rbp-mk[data-action="fixup"]{color:var(--muted)}
.rbp-mk[data-action="drop"]{color:var(--danger)}

/* ============================== BLAME (line-annotation) modal ==============================
   Blame.svelte — opened from a per-row "Blame" icon button in Detail.svelte's
   file tree / Workdir.svelte's staged+unstaged rows (see those files' own
   `.wd-act`/`.file` markup), never from the Tools menu or ⌘K (see
   blame.svelte.ts's own header doc). Widened well past the default .modal —
   this is a two-column per-line viewer, not a plain list/form like
   Reflog/Rerere/Plumbing. Reuses .diff-line/.mono/.mut/.spinner/.btn/.modal-*
   chrome verbatim for every non-grid bit (loading/error/empty states). */
.modal.blame{width:min(1100px,96vw);height:88vh;display:flex;flex-direction:column}
.modal.blame .modal-head{align-items:flex-start;gap:16px}
.blame-head-main{min-width:0;flex:1}
.blame-head-main h3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.blame-iw{flex:none;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);white-space:nowrap;margin-top:2px}
.modal.blame .modal-body{flex:1;min-height:0;overflow:auto;padding:0}
.blame-grid{font-family:var(--mono);font-size:11.5px;line-height:1.55}
/* width:fit-content;min-width:100% — same fix, same reason, as .diff-line
   above: without it, a row's alternating tint-a/tint-b background stopped
   at .modal-body's own visible width instead of the full scrollable width
   long (white-space:pre, non-wrapping) blame lines create. */
.blame-row{display:flex;align-items:stretch;width:fit-content;min-width:100%}
.blame-row.tint-a{background:var(--bg)}
.blame-row.tint-b{background:color-mix(in srgb,var(--accent2) 4%,var(--bg))}
.blame-gutter{flex:none;width:200px;border-right:1px solid var(--border);padding:2px 8px;display:flex;align-items:center}
.blame-code{flex:1;min-width:0;white-space:pre;padding:2px 10px 2px 12px}
.blame-chip{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  background:transparent;border:0;padding:2px 4px;border-radius:5px;cursor:pointer;text-align:left;font:inherit;color:inherit}
.blame-chip:hover{background:var(--elevated)}
.blame-chip-sha{color:var(--accent);font-size:11px}
.blame-chip-author{font-size:11px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.blame-chip-time{font-size:10px}
.blame-chip-orig{font-size:10px;font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.rbp-sha{flex:none;min-width:58px;font-size:11px;color:var(--muted)}
.rbp-subject{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--text)}
.rbp-action{flex:none;font:inherit;font-size:11.5px;font-weight:600;color:var(--text);cursor:pointer;
  background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:3px 6px}
.rbp-action:focus{outline:none;border-color:var(--accent)}
.rbp-action:disabled{opacity:.5;cursor:not-allowed}

/* ============================== MULTI-BRANCH MERGE ==============================
   MultiMerge.svelte's branch picker (octopus or sequential — see
   multimerge.svelte.ts's own header doc). Reuses the shared .scrim/.modal/
   .modal-head/.modal-body/.modal-foot/.btn/.btn.ghost/.spinner/.mono/.mut
   chrome verbatim, plus `.rbp-list`'s own recessed-well/card-row layering
   (see that block's own comment) for the checkbox list — only the row
   content (a checkbox + name, not a drag handle + action select) and the
   mode/strategy controls below are new. */
.modal.multimerge{width:min(560px,96vw)}
.multimerge .modal-head{background:color-mix(in srgb,var(--accent) 10%,var(--panel))}
.mm-list{display:flex;flex-direction:column;gap:4px;max-height:320px;overflow:auto;margin-bottom:12px;
  padding:5px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-panel)}
.mm-list.busy{opacity:.6;pointer-events:none}
.mm-empty{padding:24px 14px;text-align:center;font-size:12.5px;line-height:1.6}
.mm-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;cursor:pointer;
  background:var(--elevated);border:1px solid var(--border);font-size:12px;
  transition:border-color .12s,background-color .12s}
.mm-row:hover{border-color:var(--muted)}
.mm-row.checked{border-color:var(--accent2);background:color-mix(in srgb,var(--accent2) 14%,var(--elevated))}
/* Resume view's own read-only rows (no checkbox) — done=success tint, current=the
   in-flight step (warning tint, mirrors .rbp-mk[data-action="edit"]'s own pause
   colour), plain/remaining rows read muted. */
.mm-row.done{cursor:default;border-color:var(--success)}
.mm-row.current{cursor:default;border-color:var(--warning);background:color-mix(in srgb,var(--warning) 10%,var(--elevated))}
.mm-mk{flex:none;width:14px;text-align:center;font-size:11px;line-height:1;color:var(--muted)}
.mm-row.done .mm-mk{color:var(--success)}
.mm-row.current .mm-mk{color:var(--warning)}
.mm-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--text)}
.mm-meta{flex:none;font-size:11px}
.mm-mode{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.mm-mode-btn{font:inherit;font-size:12px;font-weight:600;color:var(--text);cursor:pointer;
  background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:5px 10px}
.mm-mode-btn:hover{border-color:var(--muted)}
.mm-mode-btn.on{border-color:var(--accent2);background:color-mix(in srgb,var(--accent2) 16%,var(--bg));color:var(--text)}
.mm-mode-btn:disabled{opacity:.5;cursor:not-allowed}
.mm-strategy{margin-left:auto;font:inherit;font-size:11.5px;color:var(--text);cursor:pointer;
  background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:4px 6px}
.mm-strategy:focus{outline:none;border-color:var(--accent)}
.mm-caveat{font-size:12px;line-height:1.55}

/* ============================== FILE HISTORY (rename-following) modal ==============================
   FileHistory.svelte — opened from a per-row "History" icon button in
   Detail.svelte's file tree / Workdir.svelte's staged+unstaged rows, as a
   SIBLING of the existing "Blame" button (see those files' own `.wd-act`
   markup) — same "never wired through Tools menu/⌘K" reasoning as Blame's own
   header doc. Just a plain scrollable list (one row per touching commit,
   newest first), so — like Reflog/Rerere/Plumbing/Manage-Remotes above, not
   Blame's own wide two-column grid — it needs no wider-than-default modal,
   only a capped-height scrolling body. `.fh-*` is its own small near-identical
   list-row copy rather than reusing `.rbp-*`/`.wd-stash-item` verbatim —
   same per-owning-island CSS-copy convention the Manage Remotes block above
   already documents (and git_remote_manage.rs's own doc comment describes on
   the Rust side). */
.modal.filehistory .modal-body{max-height:60vh;overflow:auto}
.fh-head-main{min-width:0;flex:1}
.fh-head-main h3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fh-list{display:flex;flex-direction:column;gap:1px}
.fh-row{width:100%;display:flex;align-items:flex-start;gap:10px;padding:6px 8px;border-radius:6px;
  background:transparent;border:0;cursor:pointer;text-align:left;font:inherit;color:inherit}
.fh-row:hover{background:var(--elevated)}
.fh-sha{flex:none;min-width:58px;color:var(--accent);font-size:11px;padding-top:1px}
.fh-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.fh-subject{font-size:12px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fh-meta{font-size:10.5px}
.fh-rename{font-size:10px;font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fh-caveat{font-size:10px;cursor:help}

/* ============================== PICKAXE / DIFF-CONTENT SEARCH modal ==============================
   PickaxeSearch.svelte — reached from the Tools menu / ⌘K ("Search Commit
   Content…", see menu.rs / cmdk.svelte.ts), NOT from a file-tree row: unlike
   Blame/FileHistory above, a pickaxe search is repo-wide by default (the
   optional file-scope is a plain text FIELD inside this same form, not a
   second per-row button — see pickaxesearch.svelte.ts's own header doc).
   The form itself reuses `.rm-form`/`.nb-row`/`.log-row`/`.cp-x`/`.mono`/
   `.mut`/`.spinner`/`.btn` verbatim (same as ExportPatches' own form above) —
   only the RESULT LIST below it is new markup, and even that is `.pk-*`, its
   own small near-identical copy of `.fh-list`/`.fh-row` (minus the
   path/rename bits pickaxe has no use for) rather than reusing those
   verbatim — same per-owning-island CSS-copy convention `.fh-*` itself
   documents just above. */
.modal.pickaxe{width:min(640px,96vw)}
.modal.pickaxe .modal-body{max-height:65vh;overflow:auto;display:flex;flex-direction:column;gap:10px}
.pk-list{display:flex;flex-direction:column;gap:1px}
.pk-row{width:100%;display:flex;align-items:flex-start;gap:10px;padding:6px 8px;border-radius:6px;
  background:transparent;border:0;cursor:pointer;text-align:left;font:inherit;color:inherit}
.pk-row:hover{background:var(--elevated)}
.pk-sha{flex:none;min-width:58px;color:var(--accent);font-size:11px;padding-top:1px}
.pk-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pk-subject{font-size:12px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-meta{font-size:10.5px}

/* ============================== SEARCH CODE modal ==============================
   CodeSearch.svelte — reached from the Tools menu / ⌘K ("Search Code…", see
   menu.rs / cmdk.svelte.ts). Complements Pickaxe just above (which searches
   historical diffs and returns commits): this searches current file CONTENT
   and returns file+line+text, so its row shape is closer to a grep result
   than a commit row — path+line (`.cs-loc`), a snippet of the matched line
   (`.cs-snippet`), and two per-row actions reusing `.wd-act`'s own icon-
   button treatment (Workdir.svelte's 👁/🕐 buttons) VERBATIM rather than
   `.pk-row`'s own whole-row-is-a-button shape, since here the row itself
   isn't clickable — only its two explicit actions are. Hover-reveal on the
   action pair mirrors `.dr-act`'s own treatment just below. */
.modal.codesearch{width:min(720px,96vw)}
.modal.codesearch .modal-body{max-height:65vh;overflow:auto;display:flex;flex-direction:column;gap:10px}
.cs-list{display:flex;flex-direction:column;gap:1px}
.cs-row{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:6px}
.cs-row:hover{background:var(--elevated)}
.cs-loc{flex:none;max-width:40%;color:var(--accent);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-snippet{flex:1;min-width:0;font-size:12px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-act{flex:none;display:flex;gap:2px;opacity:0}
.cs-row:hover .cs-act{opacity:1}
.cs-act .wd-act{width:22px;height:22px}

/* ============================== DANGLING-COMMIT RECOVERY modal (backlog #13) ==============================
   DanglingRecovery.svelte — reached from the Tools menu / ⌘K ("Dangling
   Commits…", see menu.rs / cmdk.svelte.ts), repo-scoped like Reflog/Rerere
   above, not repo-independent like Repositories/External Tools. Plain
   scrollable list (one row per `git fsck --dangling` commit) exactly like
   FileHistory's own `.fh-*` above, so `.dr-*` is its own small near-identical
   copy per that same block's documented per-owning-island CSS-copy
   convention — only the per-row action button (`.dr-act`, shown on hover like
   `.log-row .go` above) and its "Recover as new branch…" inline form (which
   reuses `.rm-form`/`.nb-row` VERBATIM, same as Pickaxe's own form just above)
   are new. */
.modal.danglingrecovery .modal-body{max-height:60vh;overflow:auto}
.dr-list{display:flex;flex-direction:column;gap:1px}
.dr-row{display:flex;align-items:flex-start;gap:10px;padding:6px 8px;border-radius:6px}
.dr-row:hover{background:var(--elevated)}
.dr-sha{flex:none;min-width:58px;color:var(--accent);font-size:11px;padding-top:2px}
.dr-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.dr-subject{font-size:12px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-meta{font-size:10.5px}
.dr-act{flex:none;opacity:0;padding:3px 9px;border-radius:6px;border:1px solid var(--accent2);color:var(--accent2);
  background:transparent;font-weight:600;font-size:11.5px;cursor:pointer}
.dr-row:hover .dr-act{opacity:1}
.dr-act:disabled{opacity:.45;cursor:not-allowed}

/* ============================== REPO FILES modal (backlog #14, the FINAL
   backlog item) ==============================
   RepoFiles.svelte — reached from the Tools menu / ⌘K ("Repo Files…", see
   menu.rs / cmdk.svelte.ts). ONE modal with an internal file toggle
   (.gitignore / .mailmap) rather than two near-duplicate modals — both are
   "load this repo-root text file verbatim, edit it, save it back" in the
   exact same shape. `.rf-tabs`/`.rf-tab` is the one bit of new chrome: a
   small persistent segmented toggle (unlike `.dr-act` above, which only
   appears on hover) — closest existing precedent is `.cf-file.sel`'s own
   accent-tinted selected state, reused here rather than inventing a new
   "selected" treatment. The textarea itself is FilterRepo.svelte's own
   mono-textarea shape (rows/font-family:var(--mono)/spellcheck=false)
   inlined per-element rather than a new class, same as that island does. */
.modal.repofiles .modal-body{display:flex;flex-direction:column;gap:10px}
.rf-tabs{display:flex;gap:6px}
.rf-tab{padding:5px 14px;border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--muted);font-size:12px;font-weight:600;cursor:pointer}
.rf-tab:hover{background:var(--elevated)}
.rf-tab.sel{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--text);border-color:var(--accent)}
.rf-tab:disabled{opacity:.55;cursor:not-allowed}
.rf-textarea{min-height:340px;font-size:12.5px;resize:vertical}

/* ============================== REPOSITORY SUMMARY modal ==============================
   RepoSummary.svelte — reached from the Tools menu / ⌘K ("Repository
   Summary…", see menu.rs / cmdk.svelte.ts), and shown automatically once,
   the very first time a given repo is opened in GitCat (see
   reposummary.svelte.ts's maybeAutoShow / repo_registry.rs's
   claim_repo_summary_first_open). Four read-only sections stacked in one
   scrollable pane — not tabs, since these are complementary facts meant to
   be skimmed together, unlike RepoFiles.svelte's genuinely-two-different-
   files .gitignore/.mailmap toggle. Reuses Detail.svelte's own
   `.stat-bar`/`.stat-bar .a`/`.stat-bar .d` mini-bar VERBATIM (a single `<i>`
   child, no sibling, renders as one proportional fill) repurposed here for
   "share of the top value" rather than "share of additions vs deletions".
   `.fh-caveat` (FileHistory's own heuristic-disclaimer treatment) is reused
   verbatim for the Problem Areas section's own caveat line. */
.modal.reposummary{width:min(820px,96vw)}
.modal.reposummary .modal-body{max-height:70vh;overflow:auto;display:flex;flex-direction:column;gap:18px}
.rs-section h4{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.rs-chip{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.rs-list{display:flex;flex-direction:column;gap:6px}
.rs-row{display:flex;align-items:center;gap:10px}
.rs-path{flex:1;min-width:0;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-row .stat-bar{flex:0 0 120px}
.rs-count{flex:none;min-width:40px;text-align:right;font-size:11px}
.rs-months{display:flex;align-items:flex-end;gap:6px;height:90px;padding-top:10px}
.rs-month{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%}
.rs-month-bar{width:100%;max-width:28px;border-radius:3px 3px 0 0;background:var(--accent);min-height:2px}
.rs-month-label{font-size:9.5px;white-space:nowrap}
</style>

<!-- Dev-mode indicator — see .dev-badge's own CSS comment for why this sits
     just below the topbar rather than at the literal top-left corner, and
     why it's hidden by default here (JS reveals it only under
     `vite`/`tauri dev` — see legacy/main.ts, beside the existing #perf
     HUD's identical import.meta.env.DEV gate). display:none by default so
     a build that somehow skips that JS (or runs with scripts disabled)
     fails SAFE — never shows a dev badge it can't prove is warranted. -->
<div class="dev-badge" id="devBadge" style="display:none" aria-hidden="true"><span class="dot"></span>DEV</div>

<div class="app" id="app">

  <!-- ============================ TOP BAR ============================ -->
  <header class="topbar">
    <!-- .tb-left/.tb-right share the SAME flex:1 so the search bar between
         them (flex:none, fixed width) sits at the bar's TRUE horizontal
         center no matter how wide either side's actual content is — brand
         is INSIDE .tb-left (not a separate sibling) specifically so its
         width counts toward that balance too. A previous attempt centered
         search with position:absolute instead, which could overlap the sync
         actions whenever the left side was wide enough to cross center; a
         later attempt used two independent flex:1 spacers around search,
         which centers it in the LEFTOVER space rather than the bar's own
         center — visually off-center whenever the two sides' content widths
         differ (they almost always do here). This is the one that's actually
         correct for both cases. -->
    <div class="tb-left">
    <!-- Same mark as the app icon (design/assets/app-icon.svg -> src-tauri/icons/)
         inlined here instead of an <img>, so it stays crisp at any DPI and needs
         no separate asset request — mirrors how .mark was already inline SVG. -->
    <div class="brand"><svg class="mark" viewBox="0 0 1024 1024" aria-hidden="true">
      <defs><linearGradient id="appIconBg" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="#E7B36A"/><stop offset="100%" stop-color="#C88A3E"/>
      </linearGradient></defs>
      <rect x="0" y="0" width="1024" height="1024" rx="220" ry="220" fill="url(#appIconBg)"/>
      <g fill="#F5E9D3" stroke="#6A4E2D" stroke-width="14" stroke-linejoin="round">
        <ellipse cx="512" cy="640" rx="205" ry="172"/>
        <ellipse cx="291" cy="447" rx="98" ry="119" transform="rotate(-18 291 447)"/>
        <ellipse cx="435" cy="330" rx="103" ry="128"/>
        <ellipse cx="589" cy="330" rx="103" ry="128"/>
        <ellipse cx="733" cy="447" rx="98" ry="119" transform="rotate(18 733 447)"/>
      </g>
    </svg>GitCat</div>
    <!-- Icons below are ONE small hand-drawn-consistent set (16x16, 1.6
         stroke, round caps/joins — same family the .mark/Tama SVGs already
         use) replacing the topbar's old mix of font-rendered Unicode glyphs
         (↻ ↓ ↑ ⌢ ▾ ↰ ◐), which varied wildly in visual weight from glyph to
         glyph AND render inconsistently across platforms/fonts — a real
         cross-platform risk for a Tauri app, not just a look-and-feel
         nitpick. `fill`/`stroke`/`stroke-width` set once on each <svg> and
         inherited by its child <path>/<circle>s (standard SVG/CSS
         inheritance) rather than repeated per-element. -->
    <!-- .repo-name is load-bearing, not decorative: openRepo()'s loading
         spinner (legacy/main.ts) gets inserted as this button's FIRST child
         while a repo is loading, so a bare "span" selector for the name text
         would grab the spinner instead — see openRepo()'s own comment on
         that exact line for the bug this class fixes. -->
    <div class="tb-cluster">
      <!-- The old "← Back to <parent>" affordance lived here; removed once the
           submodule-nav strip's breadcrumb (root › child › …) made going up to
           any ancestor a click away, not just one level back. -->
      <button class="repo-pick">
        <span class="repo-name">gitcat</span>
        <!-- Mirrors the Dashboard's own per-row WSL chip (Dashboard.svelte) —
             same .row-chip.wsl class/color, toggled by openRepo()/bootEmpty()
             in legacy/main.ts based on isWslPath(path) so the CURRENTLY OPEN
             repo shows the same indicator, not just tracked-but-not-open ones. -->
        <span class="row-chip wsl" id="repoWslTag" style="display:none" data-i18n-title="topbar.wsl_tip" title="This repository lives inside WSL — network commands route through wsl.exe for credential resolution">WSL</span>
        <svg class="tb-ic chev" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4.5 6.5 8 10l3.5-3.5"/></svg>
      </button>
      <div class="branch-pill">
        <svg class="tb-ic" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <circle cx="4.6" cy="3.6" r="1.6"/><circle cx="4.6" cy="12.4" r="1.6"/><circle cx="11.4" cy="8.4" r="1.6"/>
          <path d="M4.6 5.2v5.6"/><path d="M4.6 6.8c0 2.6 2.2 2.6 5.3 1.9"/>
        </svg>
        <span id="pillBranch">main</span><span class="ab" id="pillAb"><b>&#8593;2</b>&#183;<b>&#8595;0</b></span>
      </div>
      <button class="tb-btn" id="gotoHeadBtn" data-i18n-title="topbar.goto_head" data-i18n-aria="topbar.goto_head_aria" title="Jump to the current commit (HEAD)  &#8984;&#8679;H" aria-label="Jump to current commit (HEAD)">
        <svg class="tb-ic" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="8" cy="8" r="3"/><path d="M8 1.6v2.4M8 12v2.4M1.6 8h2.4M12 8h2.4"/></svg>
      </button>
    </div>
    </div>
    <div class="cmd-hint" data-i18n-title="topbar.cmd_palette" title="Command palette"><span data-i18n="topbar.search_hint">Search commits, refs, actions&#8230;</span><kbd>&#8984;K</kbd></div>
    <div class="tb-right">
      <!-- Fetch/Pull/Push live here (repo ACTIONS), not next to the repo-pick/
           branch-pill cluster on the left (repo IDENTITY) — grouped with
           Undo/theme (also actions) per direct feedback that this is the
           clearer split, not "everything about the current repo together". -->
      <div class="sync-actions">
        <button class="tb-btn" id="fetchBtn" data-i18n-title="topbar.fetch_tip" title="Fetch — update remote-tracking refs (⌘⇧D)">
          <svg class="tb-ic" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 8a5 5 0 1 1-1.5-3.6"/><path d="M13 2.6v3h-3"/></svg>
          <span data-i18n="topbar.fetch">Fetch</span>
        </button>
        <button class="tb-btn" id="pullBtn" data-i18n-title="topbar.pull_tip" title="Pull (fast-forward only) (⌘⇧L)">
          <svg class="tb-ic" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 2.2v7.3"/><path d="M4.8 7.2 8 10.4l3.2-3.2"/><path d="M3.2 13h9.6"/></svg>
          <span data-i18n="topbar.pull">Pull</span>
        </button>
        <button class="tb-btn" id="pushBtn" data-i18n-title="topbar.push_tip" title="Push (⌘⇧P)">
          <svg class="tb-ic" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 12.8V5.5"/><path d="M4.8 7.8 8 4.6l3.2 3.2"/><path d="M3.2 13h9.6"/></svg>
          <span data-i18n="topbar.push">Push</span>
        </button>
      </div>
      <!-- Manual refresh: forces the same full resync the live file-watcher
           triggers on an external change (see src/main.ts's
           refreshFromExternalChange) — an explicit escape hatch for whenever
           the graph looks out of sync with the repo on disk. Icon-only, like
           themeBtn, since it needs no verb-label swap of its own (the
           refresh it runs is near-instant and silently coalesces with any
           auto-refresh already in flight). -->
      <button class="icon-btn" id="refreshBtn" data-i18n-title="topbar.refresh_tip" title="Refresh — resync with the repo on disk">
        <svg class="tb-ic" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <path d="M2.5 8a5.5 5.5 0 0 1 9.6-3.7"/>
          <path d="M13.5 8a5.5 5.5 0 0 1-9.6 3.7"/>
          <path d="M12.6 2.6v3.2h-3.2"/>
          <path d="M3.4 13.4v-3.2h3.2"/>
        </svg>
      </button>
      <button class="tb-btn undo" id="undoBtn" data-i18n-title="topbar.undo_tip" title="Global Undo — Safety Manager (⌘Z)">
        <span>
          <svg class="tb-ic" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6h6.5a3.5 3.5 0 0 1 0 7H7.2"/><path d="M6.5 3.3 4 6l2.5 2.7"/></svg>
          <span data-i18n="topbar.undo">Undo</span>
        </span>
        <span class="badge" id="undoCount">214</span>
      </button>
      <button class="icon-btn" id="themeBtn" data-i18n-title="topbar.theme_tip" title="Toggle theme">
        <svg class="tb-ic" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="8" r="5.4" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M8 2.6a5.4 5.4 0 0 1 0 10.8z" fill="currentColor"/></svg>
      </button>
    </div>
  </header>

  <!-- Submodule navigator strip — filled by the SubmoduleNav Svelte island
       (src/islands/submodulenav). A grid row under the topbar spanning all
       three columns; empty (and zero-height) unless the current repo is part
       of a submodule hierarchy. -->
  <nav class="subnav" id="submoduleNavMount"></nav>

  <!-- ============================ SIDEBAR ============================ -->
  <aside class="sidebar">
    <div id="sidebarRefs"><!-- filled by the Sidebar Svelte island (src/islands/sidebar) --></div>

    <!-- Tama's lamp-nook -->
    <div class="nook tstage" id="nook" data-state="idle" role="status" aria-live="polite">
      <div class="sprite-wrap" id="spriteWrap">
        <img class="sprite" id="sprite" alt="Tama">
        <span class="spark s1"></span><span class="spark s2"></span><span class="spark s3"></span>
        <span class="zz z1">z</span><span class="zz z2">z</span><span class="zz z3">z</span>
      </div>
      <div class="talk">
        <div class="toast-line" id="toastLine"></div>
        <div class="telemetry"><span class="pip"></span><span id="telemetry">snapshots 214 &#183; last 2m</span></div>
      </div>
    </div>
    <div class="resize-handle sidebar-handle" id="resizeSidebar" role="button" tabindex="0" aria-label="Resize sidebar" title="Drag to resize — drag past the edge to collapse"></div>
  </aside>

  <!-- ============================ GRAPH ============================ -->
  <main class="graph">
    <div class="ribbon" id="ribbon"><span class="rlabel">snapshots</span></div>
    <div class="canvas-wrap" id="canvasWrap">
      <canvas id="cv" tabindex="0"></canvas>
      <div class="graph-loading" id="graphLoading" style="display:none">
        <span class="spinner"></span>
        <span data-i18n="topbar.loading_repo">Loading repository&#8230;</span>
      </div>
      <!-- Persistent top-right loading indicator: the centered overlay above
           hides on the FIRST streamed batch, but the graph keeps streaming in
           after that (onGraphBatch), so this stays up — spinner + live count —
           until the stream's `done`, as the "still loading" cue. -->
      <div class="loading-pill" id="loadingPill" aria-hidden="true">
        <span class="spinner"></span>
        <span id="loadingPillLabel" data-i18n="topbar.loading">Loading&#8230;</span>
      </div>
      <div class="perf" id="perf">
        <span class="perf-dev" id="perfDevTools">
          <span id="hud"><b>—</b> fps</span><span class="sep"></span>
          <label style="color:var(--muted)">rows</label>
          <select id="rowsSel"><option value="1000">1k</option><option value="10000" selected>10k</option><option value="50000">50k</option></select>
          <button id="stressBtn" title="Auto-scroll stress test">&#9654; stress</button>
        </span>
        <!-- Zoom in/out buttons, and the "Record origin" (cherry-pick -x)
             checkbox, used to live here too — both removed outright, not
             relocated. Zoom: ⌘/ctrl+wheel AND the +/- keys already zoom (see
             zoomAt()'s own call sites in legacy/main.ts), so the buttons
             were a third, fully redundant way to do the same thing. Record
             origin: now a single Settings
             preference (see src/islands/settings) rather than a live
             per-cherry-pick toggle sitting in front of the commit graph —
             cherryPick() below reads loadSettings().cherryPickRecordOriginDefault
             directly instead of a DOM checkbox's .checked. Both, sharing
             this monospace/dense debug-panel-styled box with the dev-only
             fps HUD above, read as leftover developer chrome even though
             they always worked for every user. -->
      </div>
      <div class="delta-readout" id="deltaReadout"></div>
      <!-- filled by the BisectDrawer Svelte island (src/islands/bisectdrawer) —
           a floating panel, MUST be a child of #canvasWrap (not document.body):
           its position:absolute is relative to this element, same as
           #deltaReadout just above. -->
      <div id="bisectPanelMount"></div>
    </div>
  </main>

  <!-- ============================ DETAIL PANEL ============================ -->
  <section class="detail" id="detail"><div class="resize-handle detail-handle" id="resizeDetail" role="button" tabindex="0" aria-label="Resize detail panel" title="Drag to resize — drag past the edge to collapse"></div><!-- filled by the Detail Svelte island (src/islands/detail) --></section>

</div>

<!-- In-app Help page (⌘K ▸ Help). A self-contained how-to; shown/hidden from
     legacy/main.ts's openHelpPage()/closeHelpPage(). -->
<div class="scrim" id="helpScrim">
  <div class="modal help" role="dialog" aria-modal="true" aria-label="GitCat help" data-i18n-aria="help.dialog_aria">
    <div class="modal-head"><h3 data-i18n="help.title">GitCat — Help</h3></div>
    <div class="modal-body help-body">
      <section>
        <h4 data-i18n="help.graph_h">The graph</h4>
        <p data-i18n-html="help.graph_p">Each row is one commit, newest at the top. The left <b>BRANCH / TAG</b> column shows the branch or tag that points at a commit; lane colours track branches. Your current commit (<b>HEAD</b>) has a bright ring and a bar down its left edge &#8212; that&#8217;s &#8220;you are here.&#8221; Commits already in your current branch are <b>dimmed</b>, so work you haven&#8217;t merged yet stands out.</p>
      </section>
      <section>
        <h4 data-i18n="help.navigate_h">Navigate</h4>
        <p data-i18n-html="help.navigate_p">Scroll or drag to move; <kbd>&#8984;</kbd>+scroll (or <kbd>+</kbd>/<kbd>-</kbd>) to zoom. <kbd>&#8984;K</kbd> opens the command palette. <kbd>&#8984;F</kbd> searches commit content, <kbd>&#8984;&#8679;F</kbd> filters refs. <kbd>&#8984;&#8679;H</kbd> jumps to HEAD, <kbd>&#8984;&#8679;U</kbd> to Uncommitted changes. <kbd>&#8984;\</kbd> toggles focus mode. Press <kbd>?</kbd> for every shortcut.</p>
      </section>
      <section>
        <h4 data-i18n="help.commits_h">Commits</h4>
        <p data-i18n-html="help.commits_p">Click a commit to see its files and diff on the right. <b>Drag</b> a commit onto another to cherry-pick it there &#8212; hold <kbd>&#8679;</kbd> while dragging to merge instead. <b>Right-click</b> a commit for cherry-pick / merge / revert / reset / create branch or tag / copy.</p>
      </section>
      <section>
        <h4 data-i18n="help.branches_h">Branches &amp; tags</h4>
        <p data-i18n-html="help.branches_p"><b>Right-click a branch label</b> in the graph for branch management (checkout, push, merge, rebase, reset, delete). <b>Right-click a remote</b> label (origin/&#8230;) to check it out as a local branch. Hover a label to see its full name. The left <b>sidebar</b> lists every branch and tag &#8212; click one to jump the graph to its tip commit; for a branch, double-click (or right-click, or its &#8942; button) checks it out instead; the checkboxes show or hide branches in the graph.</p>
      </section>
      <section>
        <h4 data-i18n="help.uncommitted_h">Uncommitted changes</h4>
        <p data-i18n="help.uncommitted_p">The pinned top row. Stage or unstage whole files, single hunks, or single lines, then commit. You can point GitCat at your own command to generate the commit message (Tools &#9656; External Tools) &#8212; GitCat never talks to an AI itself; the command does.</p>
      </section>
      <section>
        <h4 data-i18n="help.snapshots_h">Snapshots (Safety Manager)</h4>
        <p data-i18n="help.snapshots_p">GitCat quietly snapshots your repo before risky operations. The ribbon down the left lists recent snapshots &#8212; click one to preview it, so you can always find your way back.</p>
      </section>
    </div>
    <div class="modal-foot"><button class="btn ghost" id="helpCloseBtn" data-i18n="common.close">Close</button></div>
  </div>
</div>
<!-- Tama's top-of-everything message toast — surfaces errors/results when a
     modal is covering her nook (see .top-toast CSS + main.ts's _topToast). -->
<div class="top-toast" id="topToast" aria-hidden="true"></div>
<!-- Full branch/tag name shown when hovering a (possibly truncated) ref label in
     the graph — the left column's cell in column layout, a chip or its "+N"
     pill inline — driven from legacy/main.ts's pointermove. -->
<div class="rname-tip" id="graphLabelTip" style="display:none" aria-hidden="true"></div>

<!-- ============================ DANGER MODAL (filter-repo) ============================ -->
<div class="scrim" id="dangerScrim">
  <div class="modal danger">
    <div class="modal-head">
      <div class="modal-tama"><img class="tama-pic" id="dangerTamaImg" alt="Tama, alarmed"></div>
      <div><h3 id="dangerTitle" data-i18n="filterrepo.title">Rewrite history &#8212; filter-repo</h3><p id="dangerDesc" data-i18n="filterrepo.danger_desc">This rewrites every commit on the selected refs. It cannot be undone with a normal Undo.</p></div>
    </div>
    <div class="msteps" id="dangerSteps"><span class="s done"></span><span class="s done"></span><span class="s now"></span></div>
    <div class="modal-body">
      <div class="will-lose" id="dangerLose" data-i18n-html="filterrepo.danger_lose"><h5>What this will rewrite / lose</h5><ul>
        <li>Rewrites <code>42</code> commits on <code>main</code> and <code>feat/inline-diff</code></li>
        <li>Original SHAs become unreachable: <code>a1b2c3d</code> &#8230; <code>90ff210</code></li>
        <li>GPG signatures on rewritten commits are dropped</li></ul></div>
      <div class="backup-note" id="dangerNote" data-i18n-html="filterrepo.danger_note"><svg class="ico" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg> Pre-op backup pinned first &#8594; full pre-rewrite state stays recoverable.</div>
      <div class="confirm-type"><label id="dangerTypeLabel" data-i18n-html="filterrepo.danger_type_label">Type the branch name <b class="mono" id="dangerTypeName">main</b> to arm the rewrite:</label>
        <input id="confirmInput" placeholder="main" spellcheck="false" autocomplete="off"></div>
    </div>
    <div class="modal-foot"><button class="btn ghost" id="dangerCancel" data-i18n="common.cancel">Cancel</button><button class="btn danger" id="dangerGo" disabled data-i18n="filterrepo.rewrite_history">Rewrite history</button></div>
  </div>
</div>





<!-- undo / rescue celebration popover -->
<div class="tama-cheer" id="tamaCheer"><img class="tama-pic" id="tamaCheerImg" alt="Tama, delighted"><div class="cheer-txt" id="tamaCheerTxt"></div></div>

<script type="module" src="/src/main.ts"></script>