/* githugr kit — shared shell tokens + chrome (Linear Noir).
   Source of truth: ../githugr/design/* mockups; tokens lifted verbatim from
   landing.html. Screens carry their OWN screen-specific styles; only the
   shared shell (topbar / cmdk / tabbar / footer / ⌘K overlay) lives here. */

:root{
  --bg:#101013; --rail:#0c0c0f; --col:#0e0e12; --card:#16161a; --card-2:#1c1c22; --panel:#16161a; --panel-2:#1c1c22;
  --line:rgba(255,255,255,.06); --line-2:rgba(255,255,255,.09); --line-3:rgba(255,255,255,.14);
  --text:#f3f4f5; --text-2:#d0d2d6; --muted:#8a8f98; --faint:#626572; --dim:#44464f;
  --accent:#ededf0; --accent-soft:rgba(255,255,255,.07); --green:#5a9e78; --green-soft:rgba(90,158,120,.1); --red:#cf7070;
  --c-auth:#7d8aa0; --c-perf:#b89a5a; --c-fabric:#5a9aa8; --c-obs:#b07a86; --c-infra:#7f8694;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --mono:'JetBrains Mono',ui-monospace,Menlo,monospace; --r:8px;
}
*{box-sizing:border-box;margin:0;padding:0}
::selection{background:rgba(255,255,255,.17)}
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:13.5px;line-height:1.5;-webkit-font-smoothing:antialiased;letter-spacing:-.005em}
kbd{font-family:var(--mono);font-size:10.5px;color:var(--muted);background:rgba(255,255,255,.035);border:1px solid var(--line-2);border-radius:5px;padding:1px 5px}
.mono{font-family:var(--mono)} a{color:inherit;text-decoration:none}

/* topbar */
.topbar{display:flex;align-items:center;gap:14px;padding:0 14px;height:46px;border-bottom:1px solid var(--line);background:var(--rail)}
.brand{display:flex;align-items:center;gap:8px;font-weight:600}
.brand .logo{width:17px;height:17px;border-radius:5px;background:#ededf0}
.brand .nm{font-weight:700}
.brand .sep{color:var(--dim)} .brand .repo{color:var(--muted);font-weight:500} .brand .repo b{color:var(--text)}
.cmdk{flex:1;max-width:440px;margin:0 auto;display:flex;align-items:center;gap:8px;height:30px;padding:0 11px;border:1px solid var(--line-2);border-radius:7px;color:var(--faint);background:rgba(255,255,255,.02);cursor:pointer}
.cmdk .sp{flex:1}
.fixture-badge{font-family:var(--mono);font-size:10px;color:var(--faint);border:1px solid var(--line-2);border-radius:5px;padding:1px 6px}
/* account chrome: attention bell + avatar (dashboard.html topbar) */
.topbar .bell{position:relative;display:inline-flex;align-items:center;color:var(--muted);font-size:15px;padding:2px 5px;border-radius:6px;cursor:pointer}
.topbar .bell:hover{color:var(--text);background:rgba(255,255,255,.05)}
.topbar .bell i{font-style:normal;font-family:var(--mono);font-size:9.5px;font-weight:600;color:var(--text);background:var(--red);border-radius:14px;padding:0 4px;position:absolute;top:-3px;right:-5px;line-height:1.5}
.topbar .av{width:24px;height:24px;border-radius:50%;background:#2a2a31;border:1px solid var(--line-2);flex:0 0 auto;cursor:pointer}

/* tabbar */
.tabbar{display:flex;align-items:center;gap:2px;padding:0 14px;border-bottom:1px solid var(--line);background:var(--rail)}
.rtab{display:inline-flex;align-items:center;gap:7px;padding:0 11px;height:43px;color:var(--muted);font-size:13px;cursor:pointer;border-bottom:2px solid transparent}
.rtab.on{color:var(--text);border-bottom-color:var(--accent);font-weight:500}
.rtab .ic{color:var(--faint)} .rtab.on .ic{color:var(--text)}
.rtab .ct{font-size:11px;color:var(--muted);background:rgba(255,255,255,.06);border-radius:20px;padding:0 6px;font-weight:600}
.rtab.dis{color:var(--dim);cursor:default}
.ext{color:var(--dim);font-size:11px}

/* footer */
.foot{display:flex;align-items:center;gap:16px;padding:8px 14px;border-top:1px solid var(--line);background:var(--rail);color:var(--faint);font-size:11.5px}
.foot .sp{flex:1}

/* ⌘K overlay */
.kov{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:flex-start;justify-content:center;padding-top:14vh;z-index:90}
.kov.open{display:flex}
.pal{width:520px;background:var(--panel);border:1px solid var(--line-3);border-radius:10px;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.5)}
.pal input{width:100%;background:transparent;border:0;outline:0;color:var(--text);font:inherit;padding:13px 15px;border-bottom:1px solid var(--line)}
.pitem{display:flex;align-items:center;gap:10px;padding:9px 15px;color:var(--text-2);cursor:pointer}
.pitem:hover{background:var(--accent-soft)}
.pitem .ic{color:var(--faint)} .pitem .sp{flex:1} .pitem kbd{font-size:10px}

/* ── primitivas-base (portadas de design/kit.css — o kit servido era um toco
   sem elas, e as telas compõem em cima destas: botões viravam caixa cinza do
   SO, kv/pill/card sem estilo. Restauradas verbatim do mock, source of truth) ── */
:root{--hover:rgba(255,255,255,.035);--amber:#b89a5a;--panel:#16161a;--panel-2:#1c1c22}
/* generic page body — the scrolling centered column (design/kit.css:54). Sem
   esta regra o conteúdo `.wrap` ia full-bleed colado à esquerda, sem padding. */
.body{overflow-y:auto} .wrap{max-width:1000px;margin:0 auto;padding:22px 24px 50px}
.subhead{display:flex;align-items:center;gap:12px;padding:11px 18px;border-bottom:1px solid var(--line)}
.subhead h1{font-size:15px;font-weight:600} .subhead .ex{color:var(--faint);font-size:12.5px} .subhead .ex b{color:var(--muted)} .subhead .sp{flex:1}
.filters{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fpill{font-size:12px;color:var(--muted);border:1px solid var(--line-2);border-radius:7px;padding:4px 10px;cursor:pointer} .fpill:hover{border-color:var(--line-3);color:var(--text)} .fpill.on{color:var(--text);background:rgba(255,255,255,.05);border-color:var(--line-3);font-weight:500} .fpill b{color:var(--faint);font-weight:600;margin-left:4px}
.fsearch{font-size:12px;color:var(--faint);border:1px solid var(--line-2);border-radius:7px;padding:4px 10px;min-width:150px}
.crumb{color:var(--faint);font-size:12.5px;margin-bottom:8px} .crumb a{color:var(--muted)} .crumb a:hover{color:var(--text)} .crumb .mono{color:var(--text-2)}
.sec{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);font-weight:600;margin:22px 0 10px;display:flex;align-items:center;gap:9px} .sec .g{text-transform:none;letter-spacing:0;font-weight:400;color:var(--dim)} .sec .sp{flex:1}
h1.title{font-size:20px;font-weight:600;letter-spacing:-.02em} .lead{color:var(--muted);font-size:13.5px;margin:6px 0 18px;max-width:80ch} .lead b{color:var(--text-2)}
.card{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:14px 16px}
.card .h{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);font-weight:600;margin-bottom:11px;display:flex;align-items:center;gap:7px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:780px){.grid2,.grid3,.grid4{grid-template-columns:1fr}}
.list{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer} .row:last-child{border-bottom:0} .row:hover{background:var(--hover)} .row.on{background:rgba(255,255,255,.045)}
.row .t{color:var(--text);font-weight:500} .row .mt{color:var(--faint);font-size:12px} .row .id{font-family:var(--mono);font-size:11px;color:var(--muted)} .row .sp{flex:1}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;padding:2px 10px;border-radius:20px;color:var(--muted);background:rgba(255,255,255,.05);border:1px solid var(--line-2)}
.pill.green{color:var(--green);background:var(--green-soft);border-color:rgba(76,183,130,.28)}
.pill.accent{color:var(--text);background:var(--accent-soft);border-color:var(--line-3)}
.dot{width:6px;height:6px;border-radius:50%;flex:0 0 auto} .dot.g{background:var(--green)} .dot.r{background:var(--red)} .dot.a{background:var(--accent)} .dot.m{background:var(--dim)}
.kv{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted);padding:4px 0} .kv .v{margin-left:auto;color:var(--text-2);font-weight:500} .kv .v.g{color:var(--green)} .kv .k{color:var(--faint)}
.code{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#0d0d10;font-family:var(--mono);font-size:12.5px}
.code .fn{padding:7px 14px;border-bottom:1px solid var(--line);background:var(--rail);color:var(--muted);font-size:11.5px}
.cl{display:grid;grid-template-columns:44px 1fr} .cl .ln{color:var(--dim);text-align:right;padding:2px 10px 2px 0;user-select:none} .cl .ct{padding:2px 14px;white-space:pre;color:var(--text-2)}
.cl.add{background:rgba(76,183,130,.08)} .cl.add .ct{color:#bfe6cf} .cl.del{background:rgba(217,108,108,.08)} .cl.del .ct{color:#e9b6b6}
.cl.hl{background:var(--accent-soft);border-left:2px solid var(--accent)} .cl.hl .ln{padding-left:0} .cm{color:var(--faint)}
.btn{display:inline-flex;align-items:center;gap:7px;background:transparent;color:var(--text);border:1px solid var(--line-2);border-radius:7px;padding:6px 12px;font-size:12.5px;font-weight:500;cursor:pointer;font-family:var(--font)} .btn:hover{border-color:var(--line-3)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#15151a;font-weight:600} .btn.primary:hover{filter:brightness(.94)}
.btn.sm{padding:4px 10px;font-size:11.5px} .btn[disabled],.btn:disabled{opacity:.5;cursor:not-allowed}
.bar{height:5px;border-radius:5px;background:rgba(255,255,255,.07);overflow:hidden} .bar i{display:block;height:100%;background:var(--accent)}
.pct{font-family:var(--mono);font-size:11px;color:var(--accent);font-weight:600}