/* ============================================================================
   Git page: the ONE structural stylesheet.

   The page is on the shared `suite` theme set (commons/themes/suite.css) and has
   the same layout in every theme. So this file carries structure only and names
   NO colour: every colour, typeface, radius and weight comes from a custom
   property of the set's one vocabulary: a contract token (--page, --ink, --border,
   --accent) or a set token (--suite-*), both defined once per theme in
   commons/themes/suite.css. The page has NO palette of its own.
   A rule that exists for one theme only lives in ./themes.css, never here.

   Layout: the shared top bar (commons/craftian-topbar.js, styled by the SUITE TOP BAR
   section of commons/craftian-ui.css), a slim page toolbar, then three columns (repo
   rail, stage, side). The shell is full
   width. Under 1200px the side column moves below the stage, under 860px the rail
   becomes a horizontal scroller, and it holds together down to 360px.
   ========================================================================== */

*{margin:0;padding:0;box-sizing:border-box}
/* commons/craftian-ui.css is loaded for the shared top bar, and it lays <body> out as
   a fixed-height app shell (height:100dvh; overflow:hidden; display:flex). This page
   is a normal scrolling document, so the three are undone here: without overflow-y the
   page could not scroll at all. Page class names that the shared stylesheet also owns
   are prefixed `git-` (hint, stat, badge, tab, tabs, toast) for the same reason. */
html{background:var(--page);height:auto}
body{
    font-family:var(--suite-font-ui);background:var(--page);color:var(--ink);
    height:auto;display:block;overflow-y:auto;
    min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;
    --gut:92px;
}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
code,pre,.mono{font-family:var(--suite-font-mono)}
[hidden]{display:none !important}
:focus{outline:none}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:var(--suite-radius-sm)}
::selection{background:color-mix(in srgb, var(--accent) 32%, transparent)}
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb, var(--accent) 30%, transparent) transparent}

/* ---------- atmosphere + panels ---------- */
.mesh{position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--suite-mesh)}
.panel{
    background:var(--suite-panel);
    backdrop-filter:blur(var(--suite-blur));-webkit-backdrop-filter:blur(var(--suite-blur));
    border:var(--suite-bw) solid var(--border);border-radius:var(--suite-radius);box-shadow:var(--suite-panel-shadow);
}

/* ---------- page toolbar (under the shared top bar) ---------- */
.git-pagebar{display:flex;align-items:center;gap:12px;margin:12px clamp(10px,2vw,28px) 0;min-height:36px}
.git-pagebar .note{color:var(--ink-faint);font-size:13px;font-weight:var(--suite-fw-item);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.spacer{flex:1}
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:7px;
    border:var(--suite-bw) solid var(--border);background:var(--suite-ctl);
    padding:8px 13px;border-radius:var(--suite-radius-sm);font-weight:var(--suite-fw-strong);font-size:13.5px;
    white-space:nowrap;text-decoration:none;
    transition:transform .35s var(--spring), background .2s, border-color .2s, box-shadow .2s;
}
.btn svg{width:15px;height:15px;flex-shrink:0}
.btn:hover{background:var(--suite-hover);border-color:var(--ring);transform:translateY(-1px)}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.55;cursor:progress;transform:none}
.btn.primary{border-color:transparent;background:var(--primary);color:var(--suite-on-accent);font-family:var(--suite-font-heading);box-shadow:var(--shadow-sm)}
.btn.primary:hover{box-shadow:var(--shadow)}
.btn.sm{padding:5px 9px;font-size:12.5px}
.btn.sm svg{width:13px;height:13px}
.btn.icon{padding:8px;width:36px;height:36px}
.btn.icon svg{width:17px;height:17px}
.btn.danger:hover{border-color:var(--suite-err);color:var(--suite-err)}
.btn.ok{border-color:var(--suite-ok);color:var(--suite-ok)}

/* ---------- shell ---------- */
.shell{
    display:grid;
    grid-template-columns:clamp(248px,18vw,320px) minmax(0,1fr) clamp(300px,22vw,380px);
    gap:14px;padding:14px clamp(10px,2vw,28px) 40px;align-items:start;
}
.col{display:flex;flex-direction:column;gap:14px;min-width:0}
.eyebrow{
    font-family:var(--suite-font-heading);font-weight:700;font-size:11.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-faint);
}

/* ---------- rail ---------- */
.rail{position:sticky;top:12px;padding:14px 12px;display:flex;flex-direction:column;gap:10px;max-height:calc(100vh - var(--ctb-h, 64px) - 76px);min-width:0}
.rail-head{display:flex;align-items:center;justify-content:space-between;padding:0 4px}
.field{
    display:flex;align-items:center;gap:8px;
    background:var(--suite-ctl);border:var(--suite-bw) solid var(--border);border-radius:var(--suite-radius-sm);padding:8px 11px;
    transition:border-color .2s, box-shadow .2s;min-width:0;
}
.field:focus-within{border-color:var(--ring);box-shadow:var(--suite-focus)}
.field svg{width:15px;height:15px;color:var(--ink-faint);flex-shrink:0}
.field input{border:none;background:transparent;width:100%;min-width:0;font-size:16px;font-weight:var(--suite-fw-item)}
.field input:focus-visible{outline:none}
.field input::placeholder{color:var(--ink-faint)}
.field kbd{font-family:var(--suite-font-mono);font-size:11px;color:var(--ink-faint);border:1px solid var(--border);border-radius:5px;padding:0 5px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{
    border:var(--suite-bw) solid var(--border);background:transparent;border-radius:var(--suite-radius-pill);
    padding:4px 11px;font-size:12.5px;font-weight:var(--suite-fw-strong);color:var(--ink-soft);
    transition:all .25s;
}
.chip:hover{background:var(--suite-hover);color:var(--ink)}
.chip[aria-pressed="true"]{background:color-mix(in srgb, var(--accent) 16%, transparent);border-color:var(--ring);color:var(--ink)}
.sortrow{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--ink-faint);font-weight:var(--suite-fw-strong);padding:0 4px}
.sortrow select{
    background:var(--suite-ctl);border:var(--suite-bw) solid var(--border);border-radius:var(--suite-radius-sm);
    padding:4px 8px;font-size:12.5px;font-weight:var(--suite-fw-strong);color:var(--ink);
}
.sortrow select option{background:var(--surface);color:var(--ink)}
.tiles{display:flex;flex-direction:column;gap:8px;overflow-y:auto;padding:2px 2px 4px;min-height:120px;flex:1}
.tile{
    position:relative;text-align:left;width:100%;
    background:var(--suite-tile);border:var(--suite-bw) solid var(--line);border-radius:var(--suite-radius-sm);
    padding:10px 12px 10px 15px;display:flex;flex-direction:column;gap:5px;min-width:0;
    transition:transform .35s var(--spring), background .2s, border-color .2s, box-shadow .25s;
}
.tile::before{
    content:"";position:absolute;left:-1px;top:50%;width:3px;height:0;border-radius:3px;
    background:var(--primary);transform:translateY(-50%);transition:height .4s var(--spring);
}
.tile:hover{background:var(--suite-hover);border-color:var(--border);transform:translateX(2px)}
.tile.active{background:color-mix(in srgb, var(--accent) 13%, transparent);border-color:var(--ring)}
.tile.active::before{height:68%}
.t-top{display:flex;align-items:center;gap:7px;min-width:0}
.t-name{font-family:var(--suite-font-heading);font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--ink-faint)}
.dot.scratch{background:var(--suite-warn)}
.kind{
    margin-left:auto;font-size:10.5px;font-weight:var(--suite-fw-strong);letter-spacing:.06em;text-transform:uppercase;
    color:var(--ink-soft);border:1px solid var(--border);border-radius:6px;padding:1px 6px;flex-shrink:0;
}
.t-id{font-family:var(--suite-font-mono);font-size:11px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-msg{font-size:12.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-meta{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-faint);font-weight:var(--suite-fw-strong);min-width:0;flex-wrap:wrap}
.t-meta .exp{color:var(--suite-warn);display:inline-flex;align-items:center;gap:3px;font-family:var(--suite-font-mono);font-weight:500}
.t-meta .exp svg{width:11px;height:11px}
.meter{display:block;height:4px;border-radius:4px;background:var(--track);overflow:hidden}
.meter i{display:block;height:100%;border-radius:4px;background:var(--primary)}
.meter.hot i{background:var(--suite-warn)}
.none{padding:22px 10px;text-align:center;color:var(--ink-soft);font-size:13.5px;display:flex;flex-direction:column;gap:10px;align-items:center}
.none svg{width:26px;height:26px;color:var(--accent-ink)}
.attach{display:flex;flex-direction:column;gap:6px;border-top:var(--suite-bw) solid var(--line);padding-top:10px}
.attach form{display:flex;gap:6px;min-width:0}
.attach .field{flex:1;padding:5px 10px}
.attach .field input{font-size:13px}

/* ---------- repo header ---------- */
.head{padding:16px 18px;display:flex;flex-direction:column;gap:13px;position:relative;overflow:hidden;min-width:0}
.head::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--primary)}
.h-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.h-name{
    font-family:var(--suite-font-heading);font-weight:700;font-size:clamp(22px,3vw,30px);line-height:1.1;
    color:var(--brand-ink);overflow-wrap:anywhere;min-width:0;
}
.git-badge{
    display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:var(--suite-fw-strong);
    border-radius:var(--suite-radius-pill);padding:3px 9px;border:1px solid;white-space:nowrap;
}
.git-badge svg{width:12px;height:12px}
.git-badge.live{color:var(--suite-ok-ink);border-color:color-mix(in srgb, var(--suite-ok-ink) 45%, transparent);background:var(--suite-ok-wash)}
.git-badge.scratch{color:var(--suite-warn-ink);border-color:color-mix(in srgb, var(--suite-warn-ink) 45%, transparent);background:var(--suite-warn-wash)}
.git-badge.idle{color:var(--ink-soft);border-color:var(--border);background:var(--suite-ctl)}
.h-links{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.h-sub{display:flex;gap:6px 16px;flex-wrap:wrap;font-size:13px;color:var(--ink-soft);align-items:center;min-width:0}
.h-sub .mono{font-size:12.5px;overflow-wrap:anywhere;min-width:0}
.h-sub a{color:var(--suite-link);text-decoration:none;font-family:var(--suite-font-mono);font-size:12.5px;overflow-wrap:anywhere}
.h-sub a:hover{text-decoration:underline}
.scratchbar{
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    border:1px solid color-mix(in srgb, var(--suite-warn-ink) 45%, transparent);background:var(--suite-warn-wash);
    border-radius:var(--suite-radius-sm);padding:9px 12px;font-size:13px;color:var(--ink);
}
.scratchbar svg{width:16px;height:16px;color:var(--suite-warn-ink);flex-shrink:0}
.scratchbar .count{font-family:var(--suite-font-mono);font-weight:700;color:var(--suite-warn-ink)}
.scratchbar p{flex:1;min-width:180px}
.clone{
    display:flex;align-items:center;gap:8px;min-width:0;
    border:1px solid color-mix(in srgb, var(--suite-link) 40%, transparent);background:color-mix(in srgb, var(--suite-link) 7%, transparent);
    border-radius:var(--suite-radius-sm);padding:6px 6px 6px 12px;
}
.clone .lbl{font-size:10.5px;font-weight:var(--suite-fw-strong);letter-spacing:.1em;color:var(--suite-link);flex-shrink:0}
.clone code{flex:1;min-width:0;font-size:13px;white-space:nowrap;overflow-x:auto;color:var(--ink);padding:4px 0;scrollbar-width:none}
.git-tabs{display:flex;gap:4px;flex-wrap:wrap}
.git-tab{
    border:1px solid transparent;background:transparent;border-radius:var(--suite-radius-sm);
    padding:4px 10px;font-size:12.5px;font-weight:var(--suite-fw-strong);color:var(--ink-soft);
}
.git-tab:hover{background:var(--suite-hover);color:var(--ink)}
.git-tab[aria-selected="true"]{background:var(--suite-ctl);border-color:var(--border);color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.cmd{position:relative;border:1px solid var(--line);background:var(--suite-code-bg);border-radius:var(--suite-radius-sm);padding:11px 12px;margin-top:8px;min-width:0}
.cmd pre{font-size:12.5px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-all;color:var(--suite-code-ink);padding-right:74px}
.cmd pre .p{color:var(--accent-ink);user-select:none}
.cmd pre .tk{color:var(--suite-warn-ink)}
.cmd .btn{position:absolute;right:8px;top:8px}
.cmd-note{font-size:12.5px;color:var(--ink-soft);margin-top:8px;line-height:1.5}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.git-stat{border:1px solid var(--line);background:var(--suite-tile);border-radius:var(--suite-radius-sm);padding:8px 10px;display:flex;flex-direction:column;gap:4px;min-width:0}
.git-stat b{font-family:var(--suite-font-heading);font-size:16px;overflow-wrap:anywhere}
.git-stat b small{font-size:11.5px;color:var(--ink-faint);font-family:var(--suite-font-ui);font-weight:var(--suite-fw-strong)}
.git-stat span{font-size:11.5px;color:var(--ink-faint);font-weight:var(--suite-fw-strong)}
.pill{
    display:inline-flex;align-items:center;gap:4px;font-family:var(--suite-font-mono);font-size:11px;font-weight:500;
    padding:1px 7px;border-radius:var(--suite-radius-pill);border:1px solid;white-space:nowrap;line-height:1.5;
    max-width:100%;overflow:hidden;text-overflow:ellipsis;
}
.pill svg{width:10px;height:10px;flex-shrink:0}
.pill.l0{color:var(--suite-series-1);background:color-mix(in srgb, var(--suite-series-1) 12%, transparent);border-color:color-mix(in srgb, var(--suite-series-1) 42%, transparent)}
.pill.l1{color:var(--suite-series-2);background:color-mix(in srgb, var(--suite-series-2) 12%, transparent);border-color:color-mix(in srgb, var(--suite-series-2) 42%, transparent)}
.pill.l2{color:var(--suite-series-3);background:color-mix(in srgb, var(--suite-series-3) 12%, transparent);border-color:color-mix(in srgb, var(--suite-series-3) 42%, transparent)}
.pill.l3{color:var(--suite-series-4);background:color-mix(in srgb, var(--suite-series-4) 12%, transparent);border-color:color-mix(in srgb, var(--suite-series-4) 42%, transparent)}
.pill.tag{color:var(--suite-warn-ink);background:var(--suite-warn-wash);border-color:color-mix(in srgb, var(--suite-warn-ink) 42%, transparent)}
.pill.off{color:var(--ink-soft);background:var(--suite-ctl);border-color:var(--border)}
.branches{display:flex;gap:6px 8px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--ink-faint);min-width:0}
.branches > svg{width:13px;height:13px;flex-shrink:0}
.branches .st{font-size:11.5px;margin-right:6px}
.limits{font-size:12px;color:var(--ink-faint);line-height:1.5}

/* ---------- graph ---------- */
.gpanel{padding:14px 0 6px;min-width:0}
.g-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 16px 10px;border-bottom:1px solid var(--line)}
.g-head h2{font-family:var(--suite-font-heading);font-size:17px;font-weight:700}
.g-head .sub{font-size:12.5px;color:var(--ink-faint);font-weight:var(--suite-fw-item)}
.legend{display:flex;gap:10px;font-size:11.5px;color:var(--ink-soft);font-weight:var(--suite-fw-strong);flex-wrap:wrap}
.legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px}
.legend .k0{background:var(--suite-series-1)}
.legend .k1{background:var(--suite-series-2)}
.legend .k2{background:var(--suite-series-3)}
.legend .k3{background:var(--suite-series-4)}
.graph{position:relative}
.graph > svg{position:absolute;left:0;top:0;width:var(--gut);pointer-events:none;overflow:visible}
.rows{list-style:none}
.row{border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:none}
.row-btn{
    display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;
    background:transparent;border:none;padding:9px 14px 9px var(--gut);min-height:56px;justify-content:center;
    transition:background .2s;min-width:0;
}
.row-btn:hover{background:var(--suite-hover)}
.row-btn:focus-visible{outline-offset:-2px}
.row.open > .row-btn{background:color-mix(in srgb, var(--accent) 10%, transparent)}
.r1{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.msg{font-weight:var(--suite-fw-strong);font-size:14px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.r2{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-faint);font-weight:var(--suite-fw-item);flex-wrap:wrap;min-width:0}
.r2 .sha{font-family:var(--suite-font-mono);color:var(--suite-link);font-size:11.5px}
.r2 svg{width:12px;height:12px;vertical-align:-2px}
.av{
    width:18px;height:18px;border-radius:50%;display:inline-grid;place-items:center;
    font-size:8.5px;font-weight:800;color:var(--suite-on-accent);background:var(--primary);flex-shrink:0;
}
.detail{padding:4px 14px 14px var(--gut);animation:fadeUp .35s ease-out}
@keyframes fadeUp{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.d-card{border:1px solid var(--ring);background:var(--suite-code-bg);border-radius:var(--suite-radius-sm);padding:12px;display:flex;flex-direction:column;gap:10px;min-width:0}
.d-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.d-sha{font-family:var(--suite-font-mono);font-size:11.5px;color:var(--ink-soft);word-break:break-all;flex:1;min-width:140px}
.d-msg{font-size:12.5px;color:var(--suite-code-ink);white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--suite-font-mono);line-height:1.6}
.files{list-style:none;display:flex;flex-direction:column;gap:2px;min-width:0}
.files li{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:var(--suite-radius-sm);font-size:12.5px;min-width:0}
.files li:hover{background:var(--suite-hover)}
.files .path{font-family:var(--suite-font-mono);font-size:12px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--suite-code-ink)}
.mk{width:18px;height:18px;border-radius:5px;display:grid;place-items:center;font-family:var(--suite-font-mono);font-size:11px;font-weight:700;flex-shrink:0}
.mk.M{color:var(--suite-warn-ink);background:var(--suite-warn-wash)}
.mk.U{color:var(--suite-ok-ink);background:var(--suite-ok-wash)}
.mk.D{color:var(--suite-err-ink);background:var(--suite-err-wash)}
.d-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-soft)}
.d-foot .btn{margin-left:auto}
.g-empty{padding:34px 18px;text-align:center;color:var(--ink-soft);display:flex;flex-direction:column;gap:10px;align-items:center;font-size:14px;list-style:none}
.g-empty svg{width:34px;height:34px;color:var(--suite-series-1)}
.g-empty b{color:var(--ink)}
.g-foot{padding:10px 16px 8px var(--gut);font-size:12px;color:var(--ink-faint);font-weight:var(--suite-fw-item)}
/* svg marks */
.edge{fill:none;stroke-width:2.2;stroke-linecap:round;opacity:.9}
.c0{stroke:var(--suite-series-1);color:var(--suite-series-1)}
.c1{stroke:var(--suite-series-2);color:var(--suite-series-2)}
.c2{stroke:var(--suite-series-3);color:var(--suite-series-3)}
.c3{stroke:var(--suite-series-4);color:var(--suite-series-4)}
.edge.tail{stroke-dasharray:2 6;opacity:.55}
.stub{stroke-width:1.2;opacity:.45}
.cd{fill:var(--surface);stroke-width:2.6}
.cd.mg{fill:currentColor}
.cd.sel{fill:currentColor}
.ring{fill:none;stroke:var(--suite-series-1);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:ring 2.4s ease-out infinite}
@keyframes ring{0%{transform:scale(1);opacity:.8}100%{transform:scale(2.6);opacity:0}}

/* ---------- side ---------- */
.card{padding:14px;min-width:0}
.card-h{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.card-h h2{font-family:var(--suite-font-heading);font-size:16px;font-weight:700;flex:1}
.card-h svg{width:16px;height:16px;color:var(--accent-ink)}
.git-hint{font-size:12.5px;color:var(--ink-soft);line-height:1.5}
.git-hint.line{padding:10px 0;border-top:1px solid var(--line);margin-top:10px}
.tok{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--line);margin-top:10px}
.tok + .tok{margin-top:0}
.tok.revoked .tok-main b{text-decoration:line-through;color:var(--ink-faint)}
.tok-main{flex:1;min-width:0}
.tok-main b{font-size:13.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:var(--suite-fw-strong)}
.tok-main span{font-size:11.5px;color:var(--ink-faint);font-family:var(--suite-font-mono);display:block;overflow-wrap:anywhere}
.tok-new{display:flex;gap:6px;margin-top:10px;min-width:0}
.tok-new .field{flex:1;padding:5px 10px}
.tok-new .field input{font-size:14px}
.reveal{
    margin-top:10px;border:1px solid color-mix(in srgb, var(--suite-warn-ink) 50%, transparent);background:var(--suite-warn-wash);
    border-radius:var(--suite-radius-sm);padding:10px;display:flex;flex-direction:column;gap:8px;animation:fadeUp .35s ease-out;min-width:0;
}
.reveal .eyebrow{color:var(--suite-warn-ink)}
.reveal code{font-size:12px;word-break:break-all;color:var(--ink)}
.reveal p{font-size:12px;color:var(--ink-soft);line-height:1.45}
.reveal .acts{display:flex;gap:6px;flex-wrap:wrap}
.feed{list-style:none;display:flex;flex-direction:column;max-height:420px;overflow-y:auto}
.ev{display:flex;gap:9px;padding:9px 0;border-top:1px solid var(--line);font-size:12.5px;line-height:1.4;min-width:0}
.ev-ic{width:26px;height:26px;border-radius:var(--suite-radius-sm);display:grid;place-items:center;flex-shrink:0;background:color-mix(in srgb, var(--accent) 15%, transparent);color:var(--accent-ink)}
.ev-ic svg{width:13px;height:13px}
.ev-ic.ok{background:var(--suite-ok-wash);color:var(--suite-ok-ink)}
.ev-ic.bad{background:var(--suite-err-wash);color:var(--suite-err-ink)}
.ev-ic.cy{background:color-mix(in srgb, var(--suite-series-1) 13%, transparent);color:var(--suite-series-1)}
.ev-b{flex:1;min-width:0;color:var(--ink-soft);overflow-wrap:anywhere}
.ev-b button{background:none;border:none;font-family:var(--suite-font-mono);font-size:11.5px;color:var(--suite-link);font-weight:500;text-align:left;padding:0}
.ev-b button:hover{text-decoration:underline}
.ev-b .st{display:block;font-size:11.5px;color:var(--ink-faint);margin-top:1px}

/* ---------- whole-page states ---------- */
.gate{
    margin:8vh auto 40px;width:min(480px,calc(100vw - 24px));padding:28px 24px;
    display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;
}
.gate > svg{width:34px;height:34px;color:var(--accent-ink)}
.gate h1{font-family:var(--suite-font-heading);font-size:24px;font-weight:700;color:var(--brand-ink)}
.gate p{font-size:14px;color:var(--ink-soft);line-height:1.55}
.blank{padding:34px 18px;text-align:center;color:var(--ink-soft);display:flex;flex-direction:column;gap:10px;align-items:center;font-size:14px}
.blank > svg{width:30px;height:30px;color:var(--accent-ink)}
.blank b{color:var(--ink);font-family:var(--suite-font-heading);font-size:17px}

/* ---------- dialogs + toast ---------- */
dialog{
    margin:auto;width:min(480px,calc(100vw - 24px));color:var(--ink);
    background:var(--suite-menu);border:var(--suite-bw) solid var(--border);border-radius:var(--suite-radius);padding:20px;
    box-shadow:var(--shadow);
}
dialog::backdrop{background:var(--suite-scrim);backdrop-filter:blur(4px)}
dialog[open]{animation:pop .35s var(--spring)}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(10px)}}
dialog h2{font-family:var(--suite-font-heading);font-size:20px;margin-bottom:6px}
dialog p{font-size:13.5px;color:var(--ink-soft);line-height:1.55}
dialog label{display:block;font-size:12px;font-weight:var(--suite-fw-strong);color:var(--ink-soft);margin:14px 0 6px}
.mint{margin-top:14px;border:1px solid var(--line);background:var(--suite-code-bg);border-radius:var(--suite-radius-sm);padding:10px 12px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 12px;font-size:12px}
.mint dt{color:var(--ink-faint);font-weight:var(--suite-fw-strong)}
.mint dd{font-family:var(--suite-font-mono);word-break:break-all;color:var(--suite-code-ink)}
.mint dd.tk{color:var(--suite-warn-ink)}
.d-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;flex-wrap:wrap}
.git-toast{
    position:fixed;left:50%;bottom:22px;transform:translate(-50%,30px);opacity:0;pointer-events:none;z-index:90;
    background:var(--suite-menu);color:var(--ink);border:1px solid var(--suite-ok);border-radius:var(--suite-radius-pill);
    padding:9px 16px;font-size:13.5px;font-weight:var(--suite-fw-strong);display:flex;align-items:center;gap:8px;
    box-shadow:var(--shadow);transition:all .4s var(--spring);max-width:calc(100vw - 24px);
}
.git-toast.on{opacity:1;transform:translate(-50%,0)}
.git-toast svg{width:15px;height:15px;color:var(--suite-ok);flex-shrink:0}
.git-toast.err{border-color:var(--suite-err)}
.git-toast.err svg{color:var(--suite-err)}

/* ---------- responsive ---------- */
@media (max-width:1200px){
    .shell{grid-template-columns:260px minmax(0,1fr)}
    .side{grid-column:2}
}
@media (max-width:860px){
    .shell{grid-template-columns:minmax(0,1fr)}
    .side{grid-column:1}
    .rail{position:static;max-height:none}
    .tiles{flex-direction:row;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;padding-bottom:8px}
    .tile{flex:0 0 228px;scroll-snap-align:start}
    .tile:hover{transform:none}
    .tile::before{left:50%;top:auto;bottom:-1px;width:0;height:3px;transform:translateX(-50%);transition:width .4s var(--spring)}
    .tile.active::before{width:60%;height:3px}
    .tiles .none{flex:1}
    .git-pagebar .note{display:none}
}
@media (max-width:560px){
    body{--gut:62px}
    .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
    .h-links{margin-left:0;width:100%}
    .h-links .btn{flex:1}
    .head{padding:14px 12px}
    .g-head{padding:0 12px 10px}
    .row-btn{padding-right:10px}
    .detail{padding-right:10px;padding-left:12px}
    .legend{display:none}
    .btn.primary .lbl{display:none}
    .cmd pre{padding-right:0;padding-top:30px}
}
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none !important;transition:none !important}
}