/* FRC Skill Trees — all styles */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap');
:root{
  --bg:#060810;--bg-panel:#0d1525;--bg-card:#141f30;
  --border:#1a2a40;--border-hi:#243a58;
  --locked:#131d2e;--locked-b:#263d58;--locked-t:#4a6a88;
  --avail:#0e1e30;--avail-b:#3358a0;--avail-t:#7ab4e0;--avail-g:rgba(80,150,240,0.12);
  --prog:#1e1608;--prog-b:#d08a20;--prog-t:#f0b840;--prog-g:rgba(210,150,30,0.22);
  --done:#081a10;--done-b:#2e9050;--done-t:#44d878;--done-g:rgba(50,190,100,0.22);
  --accent:#4a9aff;--td:#4a6880;--tm:#80a8c8;--tx:#c8e4f8;--tb:#eaf6ff;
  --nw:164px;--nh:72px;--cg:40px;--rg:60px;--pw:340px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Rajdhani',sans-serif;background:var(--bg);color:var(--tx);min-height:100vh;overflow-x:hidden;}
body::before{content:'';position:fixed;inset:0;background-image:linear-gradient(rgba(30,60,120,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(30,60,120,0.03) 1px,transparent 1px);background-size:40px 40px;pointer-events:none;z-index:0;}

/* HEADER */
header{position:sticky;top:0;z-index:100;background:rgba(6,8,16,0.97);border-bottom:1px solid var(--border);backdrop-filter:blur(12px);}
/* Mobile: two compact rows */
.hr1{display:flex;align-items:center;gap:8px;padding:7px 12px;flex-wrap:nowrap;min-width:0;}
.hr2{display:flex;align-items:center;gap:7px;padding:0 12px 7px;flex-wrap:nowrap;min-width:0;}
.logo{font-family:'Cinzel',serif;font-size:13px;font-weight:700;letter-spacing:0.07em;color:var(--tb);white-space:nowrap;flex-shrink:0;}
.logo span{color:var(--accent);}
.nav{display:flex;gap:2px;background:var(--bg-card);border:1px solid var(--border);border-radius:7px;padding:3px;flex-shrink:0;}
.nb{background:none;border:none;font-family:'Rajdhani',sans-serif;font-size:11px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;color:var(--td);padding:4px 9px;border-radius:4px;cursor:pointer;transition:all 0.15s;}
.nb:hover{color:var(--tx);}
.nb.act{background:var(--border-hi);color:var(--tb);}
.hsep{flex:1;min-width:0;}
/* Legend hidden on mobile, shown on wide */
.legend{display:none;gap:10px;align-items:center;}
.li{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--td);white-space:nowrap;}
.ld{width:6px;height:6px;border-radius:50%;}
.ld-lo{background:var(--locked-t);}
.ld-av{background:var(--avail-t);}
.ld-pr{background:var(--prog-t);}
.ld-dn{background:var(--done-t);}
.sw{display:flex;align-items:center;gap:6px;flex:1;min-width:0;}
.sw label{font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--td);font-weight:600;white-space:nowrap;flex-shrink:0;}
select{background:var(--bg-card);border:1px solid var(--border-hi);color:var(--tb);font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:600;padding:4px 26px 4px 10px;border-radius:6px;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234a6080' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;flex:1;min-width:0;transition:border-color 0.2s;}
select:focus{outline:none;border-color:var(--accent);}
/* Tree selector — visibility controlled by JS via .hidden class */
.tree-sel-wrap{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.tree-sel-wrap label{font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--td);font-weight:600;white-space:nowrap;}
.tree-sel-wrap.hidden{display:none;}
#treeSel{max-width:160px;flex:none;}

/* VIEWS */
.view{display:none;position:relative;z-index:1;}
.view.act{display:block;}

/* OVERVIEW */
.ov-wrap{padding:22px 18px 60px;}
.ov-title{font-family:'Cinzel',serif;font-size:17px;font-weight:700;color:var(--tb);letter-spacing:0.06em;margin-bottom:3px;}
.ov-sub{font-size:12px;color:var(--td);margin-bottom:20px;}
.ov-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-bottom:28px;}
.ov-card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:14px 16px;transition:border-color 0.2s;cursor:pointer;}
.ov-card:hover{border-color:var(--border-hi);}
.ov-head{display:flex;align-items:center;gap:9px;margin-bottom:10px;}
.ov-icon{width:28px;height:28px;border-radius:6px;background:var(--bg-panel);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:14px;}
.ov-name{font-family:'Cinzel',serif;font-size:11.5px;font-weight:600;color:var(--tb);}
.ov-count{font-size:9.5px;color:var(--td);margin-top:1px;}
.ov-bar-bg{height:4px;border-radius:2px;background:var(--border);overflow:hidden;margin-bottom:4px;}
.ov-bar-fill{height:100%;border-radius:2px;transition:width 0.5s ease;}
.ov-stats{display:flex;justify-content:space-between;font-family:'Share Tech Mono',monospace;font-size:9px;color:var(--td);margin-bottom:9px;}
.ov-stats .d{color:var(--done-t);}
.ov-rows{display:flex;flex-direction:column;gap:4px;}
.ov-row{display:flex;align-items:center;gap:7px;}
.ov-sn{font-size:10px;color:var(--tm);min-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ov-sb{flex:1;height:3px;border-radius:2px;background:var(--border);overflow:hidden;}
.ov-sf{height:100%;border-radius:2px;transition:width 0.4s;}
.ov-sp{font-family:'Share Tech Mono',monospace;font-size:9px;min-width:24px;text-align:right;color:var(--td);}
.sum-title{font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--td);font-weight:600;margin-bottom:10px;}
.sum-table{width:100%;border-collapse:collapse;font-size:11px;}
.sum-table th{font-family:'Cinzel',serif;font-size:9px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--td);padding:6px 10px;text-align:left;border-bottom:1px solid var(--border);}
.sum-table td{padding:6px 10px;border-bottom:1px solid rgba(26,42,64,0.4);color:var(--tx);}
.sum-table tr:last-child td{border-bottom:none;}
.td-nm{font-weight:600;color:var(--tb);}
.td-dn{color:var(--done-t);font-family:'Share Tech Mono',monospace;font-size:10px;}
.td-pr{color:var(--prog-t);font-family:'Share Tech Mono',monospace;font-size:10px;}
.td-br{display:flex;align-items:center;gap:6px;}
.td-bb{flex:1;height:3px;border-radius:2px;background:var(--border);overflow:hidden;min-width:50px;}
.td-bf{height:100%;border-radius:2px;}
.td-bp{font-family:'Share Tech Mono',monospace;font-size:9px;color:var(--td);min-width:24px;}

/* TREE VIEW */
.tree-area{overflow-x:auto;overflow-y:auto;padding:20px 18px 80px;min-height:calc(100vh - 100px);-webkit-overflow-scrolling:touch;}

.trees{display:flex;flex-direction:column;gap:48px;align-items:center;margin:0 auto;}
.tree-block{}
.t-hdr{display:flex;align-items:center;gap:10px;margin-bottom:16px;justify-content:center;}
.t-icon{width:32px;height:32px;border-radius:7px;background:var(--bg-card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:17px;}
.t-name{font-family:'Cinzel',serif;font-size:13px;font-weight:600;letter-spacing:0.05em;color:var(--tb);}
.t-sub{font-size:10px;color:var(--td);letter-spacing:0.06em;text-transform:uppercase;margin-top:1px;}
.t-pill{font-family:'Share Tech Mono',monospace;font-size:10px;padding:2px 8px;border-radius:20px;background:var(--bg-card);border:1px solid var(--border);color:var(--td);}
.t-pill .d{color:var(--done-t);}
.canvas-wrap{position:relative;overflow:visible;}
.tree-svg{position:absolute;top:0;left:0;pointer-events:none;overflow:visible;}
.nodes-layer{position:relative;}

/* NODE */
.node{position:absolute;border-radius:8px;border:1.5px solid;display:flex;flex-direction:column;justify-content:center;padding:8px 11px;cursor:pointer;user-select:none;touch-action:manipulation;transition:transform 0.14s ease,box-shadow 0.14s ease;}
.node.locked{background:var(--locked);border-color:var(--locked-b);cursor:default;opacity:0.85;}
.node.available{background:var(--avail);border-color:var(--avail-b);box-shadow:0 0 8px var(--avail-g);animation:pa 3.5s ease-in-out infinite;}
.node.in-progress{background:var(--prog);border-color:var(--prog-b);box-shadow:0 0 10px var(--prog-g);}
.node.complete{background:var(--done);border-color:var(--done-b);box-shadow:0 0 10px var(--done-g);}
.node.convergence{border-style:dashed;}
.node.sel{transform:scale(1.04);z-index:20;}
.node:not(.locked):hover{transform:translateY(-2px);}
.node.sel:hover{transform:scale(1.04) translateY(-2px);}
@keyframes pa{0%,100%{box-shadow:0 0 5px var(--avail-g);}50%{box-shadow:0 0 16px rgba(70,130,220,0.18);}}
.n-top{display:flex;align-items:flex-start;justify-content:space-between;gap:4px;}
.n-label{font-size:11px;font-weight:600;line-height:1.3;letter-spacing:0.02em;}
.node.locked .n-label{color:var(--locked-t);}
.node.available .n-label{color:var(--avail-t);}
.node.in-progress .n-label{color:var(--prog-t);}
.node.complete .n-label{color:var(--done-t);}
.n-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-top:3px;}
.node.locked .n-dot{background:var(--locked-t);}
.node.available .n-dot{background:var(--avail-t);}
.node.in-progress .n-dot{background:var(--prog-t);box-shadow:0 0 4px var(--prog-g);}
.node.complete .n-dot{background:var(--done-t);box-shadow:0 0 4px var(--done-g);}
.n-lock{font-size:8px;opacity:0.3;flex-shrink:0;margin-top:3px;}
.n-sub{font-size:9px;color:inherit;opacity:0.5;margin-top:3px;line-height:1.25;}

/* EDGES */
.edge{fill:none;stroke-width:1.5;}
.el{stroke:#1e2e44;}.ea{stroke:#2e4070;}.ep{stroke:#d08020;}.ec{stroke:#2e9050;}.eac{stroke:#3a6aaa;}
.edash{stroke-dasharray:5,4;}

/* GATE BANNER */
.gate{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:6px;font-size:11px;margin-bottom:20px;background:rgba(120,40,40,0.14);border:1px solid rgba(200,70,70,0.22);color:#c07070;}
.gate.ok{background:rgba(30,100,50,0.11);border-color:rgba(50,160,90,0.2);color:#50b070;}

/* PANEL */
.panel-overlay{position:fixed;inset:0;z-index:199;display:none;}
.panel.open~.panel-overlay,.panel-overlay.open{display:block;}
.panel{position:fixed;top:0;right:0;width:var(--pw);height:100vh;padding-top:100px;background:rgba(8,14,26,0.98);border-left:1px solid var(--border);backdrop-filter:blur(16px);display:flex;flex-direction:column;transform:translateX(100%);transition:transform 0.3s cubic-bezier(0.25,0.8,0.25,1);z-index:200;overflow:hidden;}
.panel.open{transform:translateX(0);}
.p-head{padding:15px 15px 12px;border-bottom:1px solid var(--border);position:relative;}
.p-tag{font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--td);font-weight:600;margin-bottom:5px;}
.p-title{font-family:'Cinzel',serif;font-size:13px;font-weight:600;color:var(--tb);line-height:1.35;padding-right:24px;}
.p-x{position:absolute;top:13px;right:12px;background:none;border:none;color:var(--td);font-size:15px;cursor:pointer;line-height:1;transition:color 0.15s;}
.p-x:hover{color:var(--tb);}
.p-body{flex:1;overflow-y:auto;padding:15px;display:flex;flex-direction:column;gap:14px;}
.sbadge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:10px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;border:1px solid;}
.sbadge.locked{background:var(--locked);border-color:var(--locked-b);color:var(--locked-t);}
.sbadge.available{background:var(--avail);border-color:var(--avail-b);color:var(--avail-t);}
.sbadge.in-progress{background:var(--prog);border-color:var(--prog-b);color:var(--prog-t);}
.sbadge.complete{background:var(--done);border-color:var(--done-b);color:var(--done-t);}
.sb-dot{width:5px;height:5px;border-radius:50%;background:currentColor;}
.sec{font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--td);font-weight:600;margin-bottom:6px;}
.p-desc{font-size:12px;color:var(--tm);line-height:1.65;}
.pr-list{display:flex;flex-direction:column;gap:4px;}
.pr-item{display:flex;align-items:center;gap:6px;font-size:11px;padding:4px 8px;border-radius:5px;background:var(--bg-card);border:1px solid var(--border);}
.pr-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;}
.pr-item.done{color:var(--done-t);}.pr-item.done .pr-dot{background:var(--done-t);}
.pr-item.prog{color:var(--prog-t);}.pr-item.prog .pr-dot{background:var(--prog-t);}
.pr-item.none{color:var(--td);}.pr-item.none .pr-dot{background:var(--locked-t);}
.st-btns{display:flex;flex-direction:column;gap:6px;}
.st-btn{display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:6px;border:1.5px solid;background:transparent;font-family:'Rajdhani',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:0.05em;cursor:pointer;transition:all 0.15s;text-align:left;}
.st-btn:disabled{opacity:0.3;cursor:default;}
.st-btn .ck{margin-left:auto;opacity:0;font-size:11px;}
.st-btn.act .ck{opacity:1;}
.sba{border-color:var(--avail-b);color:var(--avail-t);}.sba:hover:not(:disabled){background:var(--avail);}
.sbp{border-color:var(--prog-b);color:var(--prog-t);}.sbp:hover:not(:disabled){background:var(--prog);}
.sbc{border-color:var(--done-b);color:var(--done-t);}.sbc:hover:not(:disabled){background:var(--done);}
.p-foot{padding:10px 15px;border-top:1px solid var(--border);font-size:10px;color:var(--td);font-style:italic;}

::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border-hi);border-radius:3px;}

/* LOGIN SCREEN */
.login-screen{position:fixed;inset:0;z-index:900;background:var(--bg);display:flex;align-items:center;justify-content:center;}
.login-screen.hidden{display:none;}
.login-card{background:var(--bg-panel);border:1px solid var(--border-hi);border-radius:12px;padding:32px 28px;width:320px;display:flex;flex-direction:column;gap:12px;}
.login-logo{font-family:'Cinzel',serif;font-size:18px;font-weight:700;color:var(--tb);text-align:center;letter-spacing:0.06em;}
.login-logo span{color:var(--accent);}
.login-sub{font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--td);text-align:center;margin-bottom:4px;}
.login-error{font-size:11px;color:#e05858;min-height:16px;text-align:center;}
#loginBtn{background:var(--accent);border:none;color:#000;font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:700;letter-spacing:0.06em;padding:9px 16px;border-radius:6px;cursor:pointer;margin-top:4px;transition:opacity 0.15s;}
#loginBtn:hover{opacity:0.85;}
#loginBtn:disabled{opacity:0.45;cursor:default;}

/* LOGOUT BUTTON */
.logout-btn{background:none;border:1px solid var(--border-hi);color:var(--td);font-family:'Rajdhani',sans-serif;font-size:10px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;padding:3px 8px;border-radius:5px;cursor:pointer;flex-shrink:0;transition:all 0.15s;}
.logout-btn:hover{border-color:var(--accent);color:var(--accent);}

/* ── DESKTOP OVERRIDES (must come last to win the cascade) ── */
@media(min-width:700px){
  /* Header */
  header{display:flex;flex-direction:row;align-items:center;padding:0 24px;height:64px;gap:16px;}
  .hr1{padding:0;flex:none;gap:16px;}
  .hr2{padding:0;flex:1;gap:14px;}
  .logo{font-size:20px;}
  .nb{font-size:14px;padding:5px 13px;}
  .legend{display:flex;}
  .li{font-size:13px;gap:6px;}
  .ld{width:8px;height:8px;}
  select{max-width:200px;font-size:15px;}
  .sw label{font-size:13px;}
  /* Tree selector hidden on desktop — all trees render together */
  .tree-sel-wrap{display:none;}

  /* Overview */
  .ov-wrap{padding:36px 32px 80px;}
  .ov-title{font-size:28px;}
  .ov-sub{font-size:16px;margin-bottom:28px;}
  .ov-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-bottom:40px;}
  .ov-card{padding:20px 22px;}
  .ov-icon{width:38px;height:38px;border-radius:9px;font-size:20px;}
  .ov-name{font-size:17px;}
  .ov-count{font-size:13px;}
  .ov-stats{font-size:13px;}
  .ov-sn{font-size:14px;min-width:110px;}
  .ov-sb{height:4px;}
  .ov-sp{font-size:13px;}
  .sum-title{font-size:15px;margin-bottom:12px;}
  .sum-table{font-size:16px;}
  .sum-table th{font-size:14px;padding:8px 12px;}
  .sum-table td{padding:8px 12px;}
  .td-dn,.td-pr{font-size:15px;}
  .td-bp{font-size:13px;}
  .td-bb{height:4px;}

  /* Tree view: safety horizontal at top, 8 trees in a non-wrapping scrollable row below */
  .trees{display:flex;flex-direction:column;align-items:flex-start;gap:32px;width:auto;margin:0;}
  .gate{font-size:18px;padding:14px 22px;margin-bottom:0;}
  .trees-row{display:flex;flex-wrap:nowrap;gap:56px;align-items:flex-start;}

  /* Tree header (matches 1.5× JS layout constants) */
  .t-hdr{gap:16px;margin-bottom:28px;}
  .t-icon{width:52px;height:52px;font-size:28px;border-radius:12px;}
  .t-name{font-size:26px;}
  .t-sub{font-size:17px;}
  .t-pill{font-size:17px;padding:4px 14px;}

  /* Cards */
  .node{padding:12px 17px;border-radius:12px;}
  .n-label{font-size:18px;}
  .n-sub{font-size:14px;}
  .n-dot{width:9px;height:9px;margin-top:5px;}
  .n-lock{font-size:12px;margin-top:5px;}
  .edge{stroke-width:2;}

  /* Panel */
  :root{--pw:440px;}
  .p-head{padding:22px 22px 18px;}
  .p-tag{font-size:13px;letter-spacing:0.14em;}
  .p-title{font-size:22px;}
  .p-x{font-size:20px;top:18px;right:16px;}
  .p-body{padding:20px;gap:20px;}
  .sec{font-size:13px;}
  .sbadge{font-size:14px;padding:5px 14px;}
  .p-desc{font-size:16px;line-height:1.7;}
  .pr-item{font-size:15px;padding:6px 10px;}
  .pr-dot{width:7px;height:7px;}
  .st-btn{font-size:16px;padding:11px 14px;}
  .p-foot{padding:14px 20px;font-size:13px;}
}

/* "All Apps" reuses the logout-btn style as a link */
a.logout-btn{text-decoration:none;display:inline-flex;align-items:center;}

/* ── Mentor management ── */
.mn-add{display:flex;gap:8px;margin-bottom:18px;max-width:420px;}
.mn-add select{flex:1;background:var(--bg-card);border:1px solid var(--border-hi);color:var(--tx);font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:600;padding:7px 10px;border-radius:6px;cursor:pointer;}
.mn-add-btn{background:var(--accent);border:none;color:#06101e;font-family:'Rajdhani',sans-serif;font-size:12px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;padding:7px 16px;border-radius:6px;cursor:pointer;transition:all 0.15s;}
.mn-add-btn:hover{filter:brightness(1.12);}
.mn-list{display:flex;flex-direction:column;gap:6px;max-width:420px;}
.mn-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--bg-card);border:1px solid var(--border);border-radius:7px;padding:9px 14px;}
.mn-name{font-size:14px;font-weight:600;color:var(--tx);}
.mn-rm{background:none;border:1px solid var(--border-hi);color:var(--td);font-family:'Rajdhani',sans-serif;font-size:10px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:3px 9px;border-radius:5px;cursor:pointer;transition:all 0.15s;}
.mn-rm:hover{border-color:var(--accent);color:var(--accent);}
.mn-empty{font-size:13px;color:var(--td);padding:6px 0;}