/* The tab bar, the sandbox lock, and the level and goal strip under the
   top bar. */

#topnav{display:flex;
  border-bottom:1px solid var(--line);
  background:var(--panel);}
.nav-btn{flex:1;padding:9px 0 7px;background:none;border:none;cursor:pointer;font-size:10px;
  font-weight:600;color:var(--ink-soft);font-family:'IBM Plex Sans',sans-serif;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  border-bottom:2.5px solid transparent;}
.nav-btn.active{color:var(--blue-deep);border-bottom-color:var(--blue);}
.nav-btn svg{width:17px;height:17px;}
#sandbox-screen{padding:18px 16px 40px;display:none;} #sandbox-screen.show{display:block;}
.lock-panel{text-align:center;padding:44px 22px;background:var(--surface-2);border-radius:14px;margin-top:8px;}
.lock-panel svg{width:34px;height:34px;color:var(--locked);margin-bottom:11px;}
.lock-panel p{font-size:13.5px;color:var(--ink-soft);margin:0 0 15px;line-height:1.5;}
.empty-energy{text-align:center;padding:38px 24px;}
.empty-energy svg{width:50px;height:50px;color:var(--coral);margin-bottom:13px;}
.resume-card{margin:0 20px 14px;padding:13px 15px;border-radius:12px;background:var(--tint);
 border:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px;}
.resume-card div{font-size:12.5px;color:var(--ink);font-weight:600;line-height:1.4;}
.resume-card small{display:block;font-weight:400;color:var(--ink-soft);font-size:11.5px;margin-top:2px;}
.resume-card button{background:var(--blue);color:var(--on-accent);border:none;border-radius:9px;padding:9px 13px;
 font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;font-family:'IBM Plex Sans',sans-serif;}
#level-strip{padding:10px 16px 2px;}
.lv-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px;}
.lv-name{font-family:'Space Grotesk',sans-serif;font-size:12.5px;font-weight:700;color:var(--ink);}
.lv-count{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-soft);}
.lv-track{height:7px;background:var(--locked-bg);border-radius:6px;overflow:hidden;}
#goal-row{display:flex;align-items:center;gap:8px;margin-top:8px;}
.goal-label{font-size:10.5px;color:var(--ink-soft);font-weight:600;white-space:nowrap;}
.goal-bar{flex:1;height:5px;background:var(--locked-bg);border-radius:4px;overflow:hidden;}
.goal-bar i{display:block;height:100%;border-radius:4px;transition:width .4s ease;}
.goal-num{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ink-soft);white-space:nowrap;}
#energy-line{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--coral-text);
 margin-top:5px;display:none;align-items:center;gap:5px;}
#energy-line svg{width:11px;height:11px;}
.lv-fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--amber));
 border-radius:6px;transition:width .45s ease;}
.xp-tag{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:20px;
 background:var(--amber);color:var(--on-amber);font-family:'IBM Plex Mono',monospace;
 font-size:11.5px;font-weight:700;vertical-align:middle;}
.q-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;
 font-size:11px;color:var(--ink-soft);font-weight:600;}
.q-worth{font-family:'IBM Plex Mono',monospace;color:var(--amber2);}
/* The energy left, beside what the question is worth. Amber like the top
   bar's, coral when there is almost none — the same two colours the bar uses,
   so it reads as the same meter rather than a second one. */
.q-right{display:flex;align-items:center;gap:10px;}
.q-energy{display:flex;align-items:center;gap:3px;
  font-family:'IBM Plex Mono',monospace;color:var(--amber2);}
.q-energy svg{width:11px;height:11px;}
.q-energy.low{color:var(--coral-text);}
.here-tag{margin-top:6px;background:var(--blue);color:var(--on-accent);font-size:9px;font-weight:700;
 letter-spacing:.5px;padding:3px 9px;border-radius:10px;white-space:nowrap;}
.node-xp{margin-bottom:5px;background:var(--amber);color:var(--on-amber);
 font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:700;
 padding:2px 8px;border-radius:9px;white-space:nowrap;}
.devbar{padding:14px 20px 0;text-align:center;display:flex;gap:14px;justify-content:center;}
.devbar button{background:none;border:none;color:var(--ink-soft);font-size:11px;text-decoration:underline;
 cursor:pointer;font-family:'IBM Plex Sans',sans-serif;}