/* ============================================================
   Dogwood Boots & Workwear — Hub / portal styling.
   Shared "skin" for the central interface. Olive/cream brand
   palette, carried over from Dogwood University.
   ============================================================ */
:root{
  --bg:        #e7e4d6;   /* warm sage page */
  --bg-2:      #d9d6c6;   /* deeper sage */
  --cream:     #f4f2ea;   /* card cream */
  --olive:     #41502b;   /* primary dark olive */
  --olive-2:   #5c6e3a;   /* lighter olive */
  --olive-3:   #6f7d4a;
  --ink:       #1c1c19;
  --ink-2:     #232a1a;   /* near-black olive (login panel) */
  --muted:     #76776a;
  --line:      #cfccba;
  --gold:      #b08d3f;
  --leather:   #6f5436;
  --radius:    16px;
  --shadow:    0 1px 3px rgba(40,44,28,.08), 0 18px 44px rgba(40,44,28,.14);
  --font:      system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:var(--font);color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}

/* ---- Splash layout ------------------------------------------------------ */
.splash{
  display:flex;min-height:100vh;width:100%;overflow:hidden;
}

/* LEFT — login */
.splash-login{
  flex:0 0 40%;max-width:520px;min-width:360px;
  background:linear-gradient(165deg,#2b3320 0%,#1c2215 60%,#171c12 100%);
  color:var(--cream);
  display:flex;flex-direction:column;justify-content:center;
  padding:54px 56px;position:relative;z-index:2;
  box-shadow:0 0 60px rgba(0,0,0,.25);
}
.splash-login .brandmark{
  width:320px;max-width:78%;margin-bottom:10px;
  filter:brightness(0) invert(1) sepia(.12) saturate(1.1);  /* dark wordmark -> cream */
  opacity:.96;
}
.login-kicker{
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:#a9b496;margin:22px 0 6px;font-weight:700;
}
.login-title{font-size:27px;font-weight:800;line-height:1.15;margin:0 0 6px}
.login-sub{font-size:13.5px;color:#b9bfa9;margin:0 0 30px;line-height:1.5}

.field{margin-bottom:16px}
.field label{display:block;font-size:11.5px;letter-spacing:.05em;
  text-transform:uppercase;color:#9da78a;font-weight:700;margin-bottom:7px}
.field input{
  width:100%;padding:13px 15px;border-radius:11px;border:1px solid #3a432c;
  background:#222a18;color:var(--cream);font-size:14.5px;font-family:inherit;
  transition:border-color .15s,box-shadow .15s;
}
.field input::placeholder{color:#6e775d}
.field input:focus{outline:none;border-color:var(--olive-3);
  box-shadow:0 0 0 3px rgba(111,125,74,.25)}

.role-toggle{display:flex;gap:8px;margin:4px 0 24px}
.role-toggle button{
  flex:1;padding:11px;border-radius:10px;border:1px solid #3a432c;
  background:#1f2615;color:#b9bfa9;font-weight:700;font-size:13px;
  cursor:pointer;font-family:inherit;transition:all .15s;
}
.role-toggle button .r-sub{display:block;font-size:10.5px;font-weight:500;
  color:#8b9476;margin-top:2px;letter-spacing:.02em}
.role-toggle button.active{
  background:var(--olive-2);border-color:var(--olive-3);color:#fff;
}
.role-toggle button.active .r-sub{color:#e3e9d3}

.btn-signin{
  width:100%;padding:14px;border:none;border-radius:11px;cursor:pointer;
  background:var(--cream);color:var(--ink-2);font-size:15px;font-weight:800;
  font-family:inherit;letter-spacing:.01em;transition:transform .12s,box-shadow .15s;
}
.btn-signin:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.3)}
.login-foot{margin-top:26px;font-size:12px;color:#8b9476;line-height:1.6}
.login-foot a{color:#c3cbb1;text-decoration:none;border-bottom:1px solid #4a5436}
.demo-note{margin-top:18px;font-size:11px;color:#727b5e;
  border-top:1px solid #2f3823;padding-top:14px}
.auth-msg{font-size:13px;border-radius:9px;padding:10px 12px;margin-bottom:14px;line-height:1.45}
.auth-msg.err{background:rgba(180,80,60,.16);color:#f0cabf;border:1px solid rgba(180,80,60,.38)}
.auth-msg.ok{background:rgba(111,125,74,.22);color:#dce6c8;border:1px solid rgba(111,125,74,.42)}

/* RIGHT — WebGL stage */
.splash-stage{
  flex:1 1 auto;position:relative;
  background:
    radial-gradient(120% 100% at 70% 18%, #f1eee2 0%, #e7e4d6 42%, #d6d3c2 100%);
  overflow:hidden;
}
#stage-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage-overlay{
  position:absolute;left:0;right:0;bottom:0;top:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:46px 52px;pointer-events:none;z-index:2;
}
.stage-wordmark{width:min(440px,52%);opacity:.96;margin-bottom:16px}
.stage-tag{
  font-size:13px;color:#5b6147;max-width:430px;line-height:1.55;
  letter-spacing:.01em;margin:0;
}
.stage-badge{
  position:absolute;top:30px;right:34px;z-index:2;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:#7d8366;background:rgba(255,255,255,.5);
  border:1px solid rgba(0,0,0,.06);padding:7px 14px;border-radius:99px;
  backdrop-filter:blur(4px);
}
.stage-loading{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#8a8f76;font-size:13px;letter-spacing:.04em;z-index:1;
}

/* Responsive: stack on narrow screens */
@media (max-width:880px){
  .splash{flex-direction:column}
  .splash-login{flex:none;max-width:none;width:100%;min-width:0;padding:40px 30px}
  .splash-stage{min-height:42vh}
  .stage-overlay{padding:28px 30px}
}

/* ============================================================
   Hub lobby (home.html) — post-login landing
   ============================================================ */
.topbar{
  display:flex;align-items:center;gap:18px;
  padding:16px 30px;background:#222a18;color:var(--cream);
  position:sticky;top:0;z-index:10;box-shadow:0 1px 0 rgba(0,0,0,.15);
}
.topbar .tb-logo{height:26px;filter:brightness(0) invert(1) sepia(.12) saturate(1.1);opacity:.95}
.topbar .spacer{flex:1}
.role-pill{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  padding:5px 11px;border-radius:99px;background:var(--olive-2);color:#fff}
.role-pill.admin{background:var(--gold);color:#2a2206}
.tb-user{font-size:13px;color:#cdd2bd}
.tb-signout{font-size:12.5px;color:#aeb79a;text-decoration:none;border-bottom:1px solid #4a5436;cursor:pointer}

.lobby{max-width:1080px;margin:0 auto;padding:40px 30px 70px}
.lobby-hero h1{font-size:30px;font-weight:800;margin:0 0 6px}
.lobby-hero p{color:var(--muted);font-size:14.5px;margin:0 0 6px}

.section-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--olive-2);margin:38px 0 16px}

.app-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:820px){.app-grid{grid-template-columns:1fr}}
.app-card{
  background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow);display:flex;flex-direction:column;
  min-height:210px;transition:transform .14s,box-shadow .14s;text-decoration:none;color:inherit;
}
.app-card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(40,44,28,.18)}
.app-card.disabled{opacity:.72;pointer-events:none}
.app-ic{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:#eef0e3;margin-bottom:16px}
.app-ic svg{width:24px;height:24px;stroke:var(--olive);fill:none;stroke-width:1.7}
.app-card h3{font-size:17px;font-weight:800;margin:0 0 6px}
.app-card .desc{font-size:13px;color:var(--muted);line-height:1.5;flex:1}
.app-foot{display:flex;align-items:center;justify-content:space-between;margin-top:16px}
.status{font-size:11px;font-weight:700;letter-spacing:.04em;padding:3px 9px;border-radius:99px}
.status.live{background:#e3ecd6;color:#3c5022}
.status.beta{background:#f1e7cf;color:#7a5e1e}
.app-open{font-size:13px;font-weight:700;color:var(--olive)}
.admin-only{display:none}
body[data-role="admin"] .admin-only{display:block}