/* Headers / chrome */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/space-mono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/space-mono-700.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Body / explanations */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/hanken-grotesk-400.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/hanken-grotesk-500.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/hanken-grotesk-700.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/hanken-grotesk-400i.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Code */
@font-face {
  font-family: 'Ubuntu Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ubuntu-mono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Ubuntu Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/ubuntu-mono-700.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0a0a0a;--surface:#111;--surface2:#181818;
  --primary:#37F712;--secondary:#00A6F4;--warning:#FE9900;--danger:#FF2157;
  --text:#d0d0d0;--muted:#78716B;--border:#222;
  --font-ui:'Space Mono',monospace;--font-body:'Hanken Grotesk',sans-serif;--font-code:'Ubuntu Mono',monospace;
}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font-ui);font-size:13px;line-height:1.5;overflow:hidden}
a{color:var(--secondary);text-decoration:none}
a:hover{text-decoration:underline}
button{background:none;border:1px solid var(--border);color:var(--text);font-family:var(--font-ui);font-size:12px;padding:3px 8px;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
button:hover{border-color:var(--primary);color:var(--primary)}
button.active{border-color:var(--primary);color:var(--primary)}
input,textarea{background:var(--surface2);border:1px solid var(--border);color:var(--text);font-family:var(--font-ui);font-size:12px;padding:4px 8px;outline:none;width:100%}
input:focus,textarea:focus{border-color:var(--primary)}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#2a2a2a}
::-webkit-scrollbar-thumb:hover{background:var(--primary)}
svg{flex-shrink:0}

/* ── Layout ─────────────────────────────────────────────────── */
#app{height:100%;display:flex;flex-direction:column}
#topbar{display:flex;align-items:center;gap:12px;padding:6px 12px;border-bottom:1px solid var(--border);flex-shrink:0}
#topbar .logo{color:var(--primary);font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap}
#topbar .spacer{flex:1}
#topbar .actions{display:flex;align-items:center;gap:6px}

/* ── Main page ─────────────────────────────────────────────── */
#main-page{flex:1;overflow:auto;padding:24px}
.repo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;max-width:900px}
.repo-card{border:1px solid var(--border);padding:12px;cursor:pointer;position:relative}
.repo-card:hover{border-color:var(--primary);background:#0d1a0a}
.repo-card .name{font-size:13px;color:var(--text);overflow-wrap:break-word}
/* List view = single column of full-width cards (reuses .repo-card) */
.repo-list-view{display:flex;flex-direction:column;gap:8px;max-width:600px}
#view-toggle{display:flex;gap:4px}

/* ── Explorer ─────────────────────────────────────────────── */
#explorer{flex:1;display:flex;overflow:hidden}
#left-panel{width:300px;min-width:180px;border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0}
#left-panel .panel-tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0}
#left-panel .panel-tabs button{border:none;border-bottom:2px solid transparent;padding:6px 12px;font-size:12px}
#left-panel .panel-tabs button.active{border-bottom-color:var(--primary);color:var(--primary)}
#left-panel .panel-tabs button:hover{border:none;border-bottom:2px solid var(--border)}
#search-bar{padding:6px;border-bottom:1px solid var(--border);flex-shrink:0}
#file-list-pane,#tree-pane{flex:1;overflow:auto;display:none}
#file-list-pane.active,#tree-pane.active{display:block}

/* ── Panel breadcrumb ─────────────────────────────────────── */
#panel-breadcrumb{padding:5px 8px;border-bottom:1px solid var(--border);font-size:11px;color:var(--muted);display:none;align-items:center;flex-wrap:wrap;row-gap:1px;column-gap:0;flex-shrink:0;min-height:27px;overflow:hidden;user-select:none}
#panel-breadcrumb.visible{display:flex}
#panel-breadcrumb .bc-link{color:var(--text);cursor:pointer;white-space:nowrap}
#panel-breadcrumb .bc-link:hover{color:var(--primary)}
#panel-breadcrumb .bc-repo{display:inline-flex;align-items:center;gap:4px}
#panel-breadcrumb .bc-repo:hover{text-decoration:underline}
#panel-breadcrumb .bc-sep{color:var(--muted);padding:0 2px;flex-shrink:0}
#panel-breadcrumb .bc-current{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px;display:inline-block}
#panel-breadcrumb .bc-copy{color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;margin-left:6px;flex-shrink:0}
#panel-breadcrumb .bc-copy:hover{color:var(--primary)}

.flist-header{display:grid;grid-template-columns:1fr 80px 28px;padding:4px 8px;color:var(--muted);font-size:11px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface)}
.flist-header span{cursor:pointer}
.flist-header span:hover{color:var(--primary)}
.flist-row{display:grid;grid-template-columns:1fr 80px 28px;padding:4px 8px;cursor:pointer;align-items:center}
.flist-row:hover{background:#0d1a0a;border-left:2px solid var(--primary)}
.flist-row.active{background:#0d1f0a;border-left:2px solid var(--primary)}
.flist-row .fname{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.flist-row .fdesc{font-family:var(--font-body);font-size:11px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flist-row .copy-btn{color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0}
.flist-row:hover .copy-btn{opacity:1}
.flist-row .copy-btn:hover{color:var(--primary)}

.tree-node{display:flex;align-items:center;gap:4px;padding:2px 4px;cursor:pointer;white-space:nowrap;user-select:none}
.tree-node:hover{background:#0d1a0a;border-left:2px solid var(--primary)}
.tree-node.active{background:#0d1f0a;border-left:2px solid var(--primary)}
.tree-node .indent{color:var(--muted);font-size:11px;font-family:var(--font-code)}
.tree-node .node-name{font-size:12px;color:var(--text);flex:1;overflow:hidden;text-overflow:ellipsis}
.tree-node .node-desc{font-family:var(--font-body);font-size:10px;color:var(--text);display:block;padding-left:16px;padding-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree-node .copy-btn{color:var(--muted);display:flex;align-items:center;opacity:0}
.tree-node:hover .copy-btn{opacity:1}
.tree-node .copy-btn:hover{color:var(--primary)}
.tree-node .badge{font-size:10px;color:var(--muted);background:var(--surface2);padding:0 4px}

/* ── Right panel ──────────────────────────────────────────── */
#right-panel{flex:1;display:flex;flex-direction:column;overflow:hidden}
#right-tabs-bar{display:flex;border-bottom:1px solid var(--border);flex-shrink:0;align-items:center}
#right-tabs-bar button{border:none;border-bottom:2px solid transparent;padding:6px 12px;font-size:12px}
#right-tabs-bar button.active{border-bottom-color:var(--primary);color:var(--primary)}
#right-tabs-bar button:hover{border:none;border-bottom:2px solid var(--border)}
.toolbar{display:flex;align-items:center;gap:4px;padding:0 8px;margin-left:auto}
.toolbar button{border:1px solid var(--border);font-size:11px;padding:2px 6px}
#file-header{padding:6px 12px;border-bottom:1px solid var(--border);display:none;align-items:center;gap:8px;flex-shrink:0;font-size:12px;font-family:var(--font-code);overflow:hidden}
#file-header .fpath{color:var(--muted);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

#code-pane,#regions-pane,#info-pane{flex:1;overflow:auto;display:none}
#code-pane.active,#regions-pane.active,#info-pane.active{display:block}
#code-search-bar{position:sticky;top:0;background:var(--surface);border-bottom:1px solid var(--border);padding:4px 8px;display:none;align-items:center;gap:6px;z-index:10}
#code-search-bar.visible{display:flex}
#code-search-bar input{max-width:200px}
#code-search-bar .match-count{color:var(--muted);font-size:11px;white-space:nowrap}
#code-container{font-family:var(--font-code);font-size:12px;line-height:1.6;overflow-x:auto}
#code-container table{border-collapse:collapse;width:100%;min-width:max-content}
#code-container .ln{position:relative;text-align:right;padding:0 12px 0 24px;color:var(--muted);user-select:none;width:1%;white-space:nowrap;border-right:2px solid transparent}
#code-container .ln-copy{position:absolute;left:4px;top:0;bottom:0;display:none;align-items:center;color:var(--muted);cursor:pointer}
#code-container tr:hover .ln-copy{display:flex}
#code-container .ln-copy:hover{color:var(--primary)}
#code-container .ln:hover{color:var(--primary)}
#code-container .ln.has-region{border-right-color:var(--primary)}
#code-container .code-cell{padding:0 12px;white-space:pre;color:var(--text)}
#code-container tr:hover .ln{color:var(--primary)}
#code-container tr.search-match .code-cell{background:#1a2a00}
#code-container tr.search-match-active .code-cell{background:#2a3f00}
#code-container tr.region-highlight .code-cell{background:#0a1a00}
.region-tooltip{position:fixed;background:var(--surface2);border:1px solid var(--primary);padding:4px 8px;font-size:11px;color:var(--primary);pointer-events:none;z-index:100;max-width:280px}

.region-row{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--border);cursor:pointer}
.region-row:hover{background:#0d1a0a}
.region-row .rref{font-family:var(--font-code);font-size:11px;color:var(--primary);white-space:nowrap}
.region-row .rlabel{font-family:var(--font-body);font-size:12px;color:var(--text)}
.region-row .rcopy{color:var(--muted);margin-left:auto;cursor:pointer;display:inline-flex;align-items:center}
.region-row .rcopy:hover{color:var(--primary)}

#info-pane{padding:16px}
.info-row{display:flex;gap:16px;margin-bottom:8px;font-size:12px}
.info-row .ikey{color:var(--muted);width:120px;flex-shrink:0}
.info-row .ival{color:var(--text);font-family:var(--font-code)}
.annotation-card{font-family:var(--font-body);background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:20px 24px;margin:16px 0;font-size:15px;line-height:1.5;color:var(--text)}
.annotation-card .ann-label{font-weight:500}
.annotation-card .ann-date{font-size:11px;color:var(--muted);margin-top:8px}
.no-annotation-card{font-family:var(--font-body);background:var(--surface2);border:1px dashed var(--border);border-radius:8px;padding:20px 24px;margin:16px 0;text-align:center;color:var(--muted);font-size:13px}
.no-annotation-card button{margin-top:12px}

#statusbar{padding:4px 12px;border-top:1px solid var(--border);flex-shrink:0;font-size:11px;color:var(--muted);display:flex;align-items:center;gap:12px}
#statusbar .stat-item{display:flex;align-items:center;gap:4px}
.progress-wrap{flex:1;max-width:200px;height:2px;background:var(--surface2)}
.progress-bar{height:100%;background:var(--primary);transition:width .3s}

/* ── Drawer ───────────────────────────────────────────────── */
#drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:300;display:none}
#drawer-overlay.open{display:block}
#repo-drawer{position:fixed;top:0;right:0;height:100%;width:640px;max-width:100vw;background:var(--surface);border-left:1px solid var(--border);z-index:301;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .2s ease;overflow:hidden}
#repo-drawer.open{transform:translateX(0)}
#drawer-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);flex-shrink:0;gap:8px}
#drawer-header .dr-title{flex:1;min-width:0;display:flex;align-items:center;gap:6px}
#drawer-header .dr-name{font-size:13px;font-weight:700;color:var(--primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#drawer-header .dr-copy{color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;flex-shrink:0}
#drawer-header .dr-copy:hover{color:var(--primary)}
#drawer-header .dr-close{color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;flex-shrink:0;font-size:18px;line-height:1;padding:0 2px}
#drawer-header .dr-close:hover{color:var(--text)}
#drawer-meta{padding:10px 16px;border-bottom:1px solid var(--border);flex-shrink:0;font-size:11px;display:flex;flex-direction:column;gap:6px;position:relative}
.dr-links{display:flex;gap:12px;flex-wrap:wrap}
.dr-link{color:var(--secondary);display:inline-flex;align-items:center;gap:4px}
.dr-link:hover{text-decoration:underline}
.dr-stats{color:var(--muted);display:flex;gap:10px;flex-wrap:wrap}
.dr-edit-btn{position:absolute;top:10px;right:16px;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center}
.dr-edit-btn:hover{color:var(--primary)}
#drawer-actions{padding:8px 16px;border-bottom:1px solid var(--border);display:flex;gap:8px;flex-shrink:0}
#drawer-actions .dr-delete:hover{border-color:var(--danger);color:var(--danger)}
#drawer-table-wrap{flex:1;overflow:auto}
#map-mode-toggle{display:flex;gap:4px;padding:8px 16px;border-bottom:1px solid var(--border);flex-shrink:0}
.map-mode-btn{padding:4px 10px;font-size:11px;border:1px solid var(--border);border-radius:4px;background:transparent;color:var(--muted);cursor:pointer}
.map-mode-btn.active{background:var(--primary);color:var(--bg);border-color:var(--primary)}
#map-search-bar{padding:8px 16px;border-bottom:1px solid var(--border);flex-shrink:0}
#map-search-bar input{font-family:var(--font-code);font-size:11px}
.dt-section{padding:8px 16px 6px;font-size:10px;color:var(--primary);text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface);z-index:1}
.dt-section-desc{font-family:var(--font-body);padding:4px 16px 8px;font-size:11px;color:var(--muted);line-height:1.4;border-bottom:1px solid var(--border)}
.dt-row{display:grid;grid-template-columns:1fr 1.5fr;gap:10px;padding:6px 16px;border-bottom:1px solid #161616;cursor:pointer;align-items:start}
.dt-row:hover{background:#0d1a0a}
.dt-file{min-width:0}
.dt-name{color:var(--text);font-family:var(--font-ui);font-size:11px}
.dt-path{color:var(--muted);font-size:10px;margin-top:1px;font-family:var(--font-code);word-break:break-all}
.dt-purpose{font-family:var(--font-body);color:var(--text);font-size:11px;line-height:1.4}
.ic{font-family:var(--font-code);font-size:.92em;background:#1d1d1d;color:#e6e6e6;border:1px solid #2e2e2e;border-radius:4px;padding:1px 5px;white-space:nowrap}
.dt-empty{padding:20px 16px;color:var(--muted);font-size:12px;text-align:center}
#drawer-footer{padding:10px 16px;border-top:1px solid var(--border);flex-shrink:0}
#drawer-open-btn{width:100%;justify-content:center;border-color:var(--primary);color:var(--primary);padding:7px;font-size:12px}
#drawer-open-btn:hover{background:#0d1a0a}

/* ── Modals ───────────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:400;display:none;align-items:center;justify-content:center}
.modal-overlay.open{display:flex}
.modal{background:var(--surface);border:1px solid var(--border);padding:16px;width:400px;max-width:90vw}
.modal h3{font-size:13px;margin-bottom:12px;color:var(--primary)}
.modal label{font-size:11px;color:var(--muted);display:block;margin-bottom:2px}
.modal .field{margin-bottom:10px}
.modal .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}

.empty{padding:24px;color:var(--muted);font-size:12px;text-align:center}
.spinner{display:inline-block;width:10px;height:10px;border:2px solid var(--muted);border-top-color:var(--primary);border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Toasts ───────────────────────────────────────────────────── */
.toast{position:fixed;z-index:1100;pointer-events:none;background:var(--surface2);border:1px solid var(--primary);color:var(--text);font-size:12px;padding:6px 12px;border-radius:6px;white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.45);opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s}
.toast.show{opacity:1;transform:none}

/* ── Auth gate ────────────────────────────────────────────────── */
#auth-gate{position:fixed;inset:0;background:var(--bg);display:none;align-items:center;justify-content:center;z-index:1000;padding:20px}
#auth-gate.open{display:flex}
#auth-gate .auth-box{width:300px;max-width:100%;display:flex;flex-direction:column;gap:10px}
#auth-gate .auth-logo{color:var(--primary);font-weight:700;font-size:16px;text-align:center}
#auth-gate .auth-title{color:var(--muted);font-size:12px;text-align:center}
#auth-gate button{justify-content:center;border-color:var(--primary);color:var(--primary);padding:7px}
#auth-gate button:hover{background:#0d1a0a}
#auth-gate .auth-msg{color:var(--danger);font-size:11px;min-height:14px;text-align:center}

/* ── Mobile ──────────────────────────────────────────────────── */
#btn-back-files{display:none}
@media (max-width:640px){
  #main-page{padding:10px}
  .repo-grid{grid-template-columns:repeat(2,1fr)}
  .repo-card{padding:14px 12px;min-height:48px}

  #topbar{padding:5px 10px;gap:6px}
  #topbar .logo{font-size:13px}

  #statusbar{display:none}

  #explorer{flex-direction:column}
  #left-panel{width:100%;min-width:0;border-right:none;border-bottom:1px solid var(--border);flex-shrink:0;max-height:55vh}
  #right-panel{flex:1;min-height:0}

  #explorer.show-code #left-panel{display:none}
  #explorer.show-files #right-panel{display:none}

  #btn-back-files{display:flex}

  #right-tabs-bar{overflow-x:auto;overflow-y:hidden;white-space:nowrap;flex-shrink:0}
  #right-tabs-bar button{flex-shrink:0}
  .toolbar{flex-shrink:0}

  .flist-header{grid-template-columns:1fr 32px}
  .flist-header span:nth-child(2){display:none}
  .flist-row{grid-template-columns:1fr 32px;min-height:42px;padding:6px 10px}
  .flist-row>div:nth-child(2){display:none}

  .flist-row .copy-btn{opacity:1}
  .tree-node .copy-btn{opacity:1}

  .tree-node{padding:5px 4px;min-height:36px}

  #code-container{font-size:11px}

  #code-search-bar input{max-width:none;flex:1}

  .modal{width:95vw;padding:12px}

  #left-panel .panel-tabs button{padding:8px 14px}
  #search-bar{padding:5px}

  /* Drawer covers most of viewport on mobile */
  #repo-drawer{width:92vw}
  .dt-row{grid-template-columns:1fr;gap:3px}
  .dt-purpose{}
}