/* mesh-lab on nobutwhy.com — light lavender theme matching the site.
   Loaded after ../css/app.css; terminal pane stays monospace, everything
   else inherits the site's sans-serif. */
:root{
  --peri:#454585;          /* dark periwinkle: headings, accents, borders */
  --peri-soft:#6a6ab0;
  --ink:#23233f;           /* body text */
  --muted:#6b6b8f;
  --card:#ffffff;
  --line:#b9b9e0;
  --green:#1e7e34; --red:#c0392b; --amber:#b7791f;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
html,body{height:auto;min-height:100vh}
body{background:#fff;color:var(--ink);font-family:sans-serif;font-size:15px}

/* site header bits are styled by app.css (.logo_link, .page_title,
   .page_description); make sure the title uses periwinkle */
.page_title{color:var(--peri)}

#lab-wrap{max-width:1280px;margin:0 auto;padding:0 16px 24px}
#lab-head{display:flex;align-items:center;gap:16px;margin:6px 0 12px}
#stage-title{flex:1;font-weight:bold;color:var(--peri);font-size:1.1em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conn{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.conn .dot{width:9px;height:9px;border-radius:50%;background:var(--red)}
.conn.on .dot{background:var(--green)}

#lab-layout{display:grid;grid-template-columns:230px minmax(0,1fr) 300px;gap:14px;align-items:start}
aside{background:var(--card);border:2px solid var(--peri);border-radius:8px;
  padding:12px;min-width:0}
aside h2{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;
  color:var(--peri);margin:14px 0 8px}
aside h2:first-child{margin-top:0}
.muted{color:var(--muted);font-size:13px;line-height:1.5}

.stage-btn{display:block;width:100%;text-align:left;background:#f2f2ff;
  border:1px solid var(--line);color:var(--ink);padding:9px 10px;margin-bottom:6px;
  border-radius:6px;cursor:pointer;font-family:sans-serif;font-size:14px}
.stage-btn:hover{border-color:var(--peri)}
.stage-btn.active{border-color:var(--peri);background:#e2e2ff;font-weight:bold}
.stage-btn .sid{color:var(--muted);font-size:11px;display:block}

main{min-width:0}
#devtabs{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.devtab{background:var(--card);border:2px solid var(--line);border-bottom:none;
  color:var(--ink);padding:6px 12px;border-radius:8px 8px 0 0;cursor:pointer;
  font-family:var(--mono);font-size:13px}
.devtab:hover{border-color:var(--peri)}
.devtab.active{border-color:var(--peri);background:#fff;font-weight:bold;color:var(--peri)}
.devtab .dialect{font-size:10px;color:var(--muted);margin-left:6px;text-transform:uppercase}

/* the embedded terminal pane: light xterm theme, fixed height, page scrolls */
#terminal{height:540px;background:#fbfbff;border:2px solid var(--peri);
  border-radius:0 8px 8px 8px;padding:8px;overflow:hidden}
#terminal .xterm{height:100%}
/* xterm's DOM renderer gives every row an inline overflow:hidden at
   exactly the cell height; in fonts whose underscore ink sits at or
   below the row box's bottom edge (several common monospace fonts on
   desktop), the underscore is clipped away whole and flag strings
   read as if the underscores were spaces. Un-clip the rows so
   below-baseline ink always paints into the inter-row gap. The
   !important is required: the clip is an inline style. */
#terminal .xterm-rows > div{overflow:visible !important}
#hint{margin-top:8px;color:var(--muted);font-size:13px}
#hint b{color:var(--peri)}

#brief{font-size:13px;line-height:1.55;margin-bottom:4px}
#objectives{list-style:none;margin:0 0 4px;padding:0}
#objectives li{font-size:13px;line-height:1.5;padding:6px 8px;background:#f2f2ff;
  border:1px solid var(--line);border-radius:6px;margin-bottom:6px}
.flag{font-size:13px;padding:8px;border:1px solid var(--line);border-radius:6px;
  margin-bottom:6px;background:#f7f7ff}
.flag .fname{font-weight:bold;font-family:var(--mono);font-size:12px}
.flag .fdesc{color:var(--muted);margin:4px 0}
.flag .fstate{font-size:11px;text-transform:uppercase;letter-spacing:1px}
.flag.pending .fstate{color:var(--amber)}
.flag.done{border-color:var(--green)}
.flag.done .fstate{color:var(--green)}
.flag .fval{color:var(--green);word-break:break-all;margin-top:4px;font-family:var(--mono);font-size:12px}
#submit-row{display:flex;gap:6px}
#flag-input{flex:1;background:#fff;border:1px solid var(--line);color:var(--ink);
  padding:8px;border-radius:6px;font-family:var(--mono);font-size:13px;min-width:0}
#flag-btn{background:var(--peri);border:none;color:#fff;font-weight:bold;
  padding:8px 14px;border-radius:6px;cursor:pointer;font-family:sans-serif;font-size:14px}
#flag-btn:hover{background:#DFDFFF;color:var(--peri)}
#submit-msg{margin-top:8px;font-size:13px;min-height:18px}
#submit-msg.ok{color:var(--green)}
#submit-msg.bad{color:var(--red)}

.footer_content a{color:var(--peri)}

/* keep the site's responsive behavior: stack on narrow screens */
@media (max-width:1000px){
  #lab-layout{grid-template-columns:1fr}
  #sidebar{order:2} main{order:1} #panel{order:3}
  #terminal{height:420px}
}
#reconnect{margin-left:8px;padding:2px 10px;border:1px solid var(--peri);border-radius:4px;background:#fff;color:var(--peri);font-weight:bold;cursor:pointer;font-size:13px}
#reconnect:hover{background:#DFDFFF}