/* ---------------------------------------------------------------------------
   lab-page.css - makes the lab pages themselves look like the rest of the site.

   It only restyles. It never changes where your input lands, what filters it,
   or how it is echoed back, because that is the lab. Bootstrap 4 classes are
   overridden where the labs use them so a page keeps its layout and loses the
   white background.
   --------------------------------------------------------------------------- */
:root{
  --bg:#070b12; --bg2:#0c131e; --card:#111a27; --card2:#162132;
  --line:#1f2e42; --line2:#2b3f59;
  --ink:#e8f0fb; --mute:#90a4bf; --dim:#64788f;
  --accent:#36c3ff; --accent2:#7b5cff; --gold:#ffc53d; --green:#3ddc84; --pink:#ff4d8d;
  --radius:12px;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg) !important;
  color:var(--ink);
  font-family:var(--font);
  font-size:15.5px;
  line-height:1.6;
  margin:0;
  padding:0 0 60px;
  background-image:radial-gradient(1100px 520px at 12% -10%,rgba(54,195,255,.08),transparent 60%),
                   radial-gradient(900px 480px at 88% 0%,rgba(123,92,255,.08),transparent 55%);
}

a{color:var(--accent)}
a:hover{color:#7ad7ff}
hr{border:0;border-top:1px solid var(--line);margin:18px 0}
h1,h2,h3,h4{color:var(--ink);letter-spacing:-.015em;line-height:1.2}
h1{font-size:28px;margin:18px 0 10px}
h2{font-size:22px;margin:16px 0 10px}
h3{font-size:18px;margin:14px 0 8px}
p,li,label,td,th{color:var(--ink)}
small,.text-muted{color:var(--mute) !important}
code,kbd,samp{font-family:var(--mono);background:var(--bg2);border:1px solid var(--line);
  border-radius:6px;padding:1px 5px;font-size:.92em;color:#cfe6ff}
pre{font-family:var(--mono);background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  padding:14px;overflow:auto;color:#cfe6ff}

/* layout containers, Bootstrap or hand rolled */
.container,.container-fluid,.wrapper,.content,.main{
  max-width:860px;margin:0 auto;padding:22px 18px;
}
.container.mt-5,.mt-5{margin-top:18px !important}

/* anything that looks like a panel */
.card,.panel,.jumbotron,.well,.box,.news-box{
  background:var(--card) !important;border:1px solid var(--line) !important;border-radius:var(--radius) !important;
  color:var(--ink) !important;padding:16px 18px;box-shadow:none !important;
}

/* forms */
form{margin:16px 0}
.form-group{margin-bottom:14px}
label{display:block;margin-bottom:6px;color:var(--mute);font-size:14px}
input,select,textarea,.form-control{
  background:var(--bg2) !important;border:1px solid var(--line2) !important;border-radius:10px !important;
  color:var(--ink) !important;font:inherit;padding:10px 12px !important;width:100%;max-width:100%;
  box-shadow:none !important;
}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--accent)}
input::placeholder,textarea::placeholder{color:var(--dim)}
input:focus,select:focus,textarea:focus,.form-control:focus{
  outline:none;border-color:var(--accent) !important;box-shadow:0 0 0 3px rgba(54,195,255,.14) !important;
}
button,input[type=submit],input[type=button],.btn{
  background:var(--card2);border:1px solid var(--line2);border-radius:10px;color:var(--ink);
  font:inherit;font-weight:600;padding:10px 16px;cursor:pointer;width:auto;
}
button:hover,input[type=submit]:hover,.btn:hover{border-color:var(--accent);color:#fff}
.btn-primary,.btn-success{background:rgba(54,195,255,.14) !important;border-color:rgba(54,195,255,.5) !important;color:#d6f1ff !important}
.btn-danger{background:rgba(255,77,141,.14) !important;border-color:rgba(255,77,141,.5) !important;color:#ffd6e6 !important}
.btn-block{width:100%}

/* tables */
table{border-collapse:collapse;width:100%;margin:14px 0;font-size:14.5px}
th,td{border:1px solid var(--line);padding:9px 11px;text-align:left}
th{background:var(--bg2);color:var(--mute);font-weight:650}
tr:nth-child(even) td{background:rgba(255,255,255,.015)}

/* alerts the labs print */
.alert,.alert-info{background:var(--card2) !important;border:1px solid var(--line2) !important;
  border-radius:10px !important;color:var(--ink) !important}
.alert-success{border-color:rgba(61,220,132,.5) !important;color:#c4f5d9 !important}
.alert-danger{border-color:rgba(255,77,141,.5) !important;color:#ffd0e0 !important}

/* the bar lab-chrome.js injects */
.hx-labbar{
  position:sticky;top:0;z-index:9999;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:9px 16px;background:rgba(7,11,18,.92);border-bottom:1px solid var(--line);
  font-family:var(--font);font-size:13.5px;backdrop-filter:blur(10px);
}
.hx-labbar a{color:var(--mute);text-decoration:none}
.hx-labbar a:hover{color:var(--ink)}
.hx-labbar .brand{color:var(--ink);font-weight:700;display:flex;align-items:center;gap:8px}
.hx-labbar .brand i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);display:inline-block}
.hx-labbar .path{margin-left:auto;color:var(--dim);font-family:var(--mono);font-size:12px}

@media (max-width:640px){
  .container,.container-fluid{padding:16px 14px}
  .hx-labbar .path{display:none}
}

/* ---- w3.css, which the blog labs use ---- */
.w3-container,.w3-content,.w3-main{max-width:980px;margin:0 auto;padding:14px 18px}
.w3-card,.w3-card-2,.w3-card-4,.w3-panel{
  background:var(--card) !important;border:1px solid var(--line) !important;border-radius:var(--radius) !important;
  color:var(--ink) !important;box-shadow:none !important;padding:14px 16px;
}
.w3-white,.w3-light-grey,.w3-grey,.w3-pale-blue,.w3-pale-green{
  background:var(--card) !important;color:var(--ink) !important;
}
.w3-teal,.w3-blue,.w3-indigo,.w3-dark-grey,.w3-black{
  background:var(--card2) !important;color:var(--ink) !important;border:1px solid var(--line2) !important;
}
.w3-border,.w3-border-top,.w3-border-bottom{border-color:var(--line) !important}
.w3-button,.w3-btn{
  background:var(--card2) !important;color:var(--ink) !important;border:1px solid var(--line2) !important;
  border-radius:10px !important;font-weight:600;
}
.w3-button:hover,.w3-btn:hover{border-color:var(--accent) !important;color:#fff !important}
.w3-input,.w3-select{background:var(--bg2) !important;color:var(--ink) !important;
  border:1px solid var(--line2) !important;border-radius:10px !important;padding:10px 12px !important}
.w3-bar{background:var(--bg2) !important;border:1px solid var(--line) !important;border-radius:10px}
.w3-bar-item{color:var(--ink) !important}
.w3-text-teal,.w3-text-blue{color:var(--accent) !important}

/* ---------------------------------------------------------------------------
   Several labs pull Bootstrap in from a CDN *inside the body* (instructions.php
   does), which lands after this file in the cascade and wins. These rules say
   !important for that reason and no other: colour and typography only, never
   layout, never anything a lab depends on.
   --------------------------------------------------------------------------- */
body{color:var(--ink) !important;font-family:var(--font) !important}
h1,h2,h3,h4,h5,h6{color:var(--ink) !important}
p,li,label,dt,dd,th,td,span,div,strong,em,b,i{color:inherit}
body,.container,.container-fluid{color:var(--ink) !important}
a{color:var(--accent) !important}
a.btn,a.w3-button,.hx-labbar a{color:inherit !important}
.hx-labbar a{color:var(--mute) !important}
.hx-labbar a:hover,.hx-labbar .brand{color:var(--ink) !important}

/* Bootstrap chrome the labs inherit */
.navbar,.navbar-light,.navbar-default,.bg-light,.bg-white,.navbar-inverse{
  background:var(--bg2) !important;border:1px solid var(--line) !important;border-radius:12px;
  margin:14px 0;padding:10px 14px;
}
.navbar-brand,.navbar-brand:hover{color:var(--ink) !important;font-weight:700}
.nav-link,.navbar-nav .nav-link,.navbar-nav>li>a{color:var(--mute) !important;padding:6px 10px !important}
.nav-link:hover,.navbar-nav>li>a:hover{color:var(--ink) !important}
.navbar-nav{display:flex;gap:4px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.navbar-toggler{display:none !important}
.collapse.navbar-collapse{display:block !important}

.list-group-item{background:var(--card) !important;border-color:var(--line) !important;color:var(--ink) !important}
.table,.table td,.table th{color:var(--ink) !important;border-color:var(--line) !important}
.table-striped tbody tr:nth-of-type(odd){background:rgba(255,255,255,.02) !important}
.text-dark,.text-body{color:var(--ink) !important}
.text-center{text-align:center}
.w3-pale-red,.w3-pale-yellow,.w3-pale-blue,.w3-pale-green,.w3-light-green,.w3-khaki{
  background:var(--card2) !important;color:var(--ink) !important;border:1px solid var(--line2) !important;
}
.w3-bar-item.w3-button{border-radius:10px !important}
.w3-row,.w3-col,.w3-third,.w3-twothird,.w3-half{float:none !important;width:auto !important}