/* ============================================================
   NZ ITF TRAINING HUB — v3 app shell
   Loads after v2.css and reshapes the hub into an app frame:
   topbar with global search, refined side rail, bottom tab bar
   on mobile, command palette, view transitions.
   ============================================================ */

/* ---------- app frame ---------- */
.hub2{
  border:1px solid #33332f; background:#0f0f0e; border-radius:14px;
  overflow:hidden; box-shadow:0 30px 80px -30px rgba(0,0,0,.7);
  min-height:640px;
}
.hub2-side{ background:#0b0b0b; border-right:1px solid #22221f; }
.hub2-main{ background:#0f0f0e; }

/* ---------- topbar ---------- */
.v3bar{
  display:flex; align-items:center; gap:14px;
  border:1px solid #33332f; border-bottom:0; border-radius:14px 14px 0 0;
  background:#0b0b0b; padding:12px 16px; position:relative; z-index:5;
}
.v3bar + .hub2{ border-radius:0 0 14px 14px; }
.v3brand{
  font-family:var(--display,'Archivo',sans-serif); font-style:italic; font-weight:800;
  text-transform:uppercase; letter-spacing:.6px; color:#fff; font-size:15px;
  display:flex; align-items:center; gap:9px; white-space:nowrap;
}
.v3dot{ width:10px; height:10px; border-radius:50%; background:#F0C93C; box-shadow:0 0 0 3px rgba(255,255,255,.08); }
.v3search{
  flex:1; max-width:520px; display:flex; align-items:center; gap:10px;
  background:#141413; border:1px solid #33332f; color:#888780;
  font:400 13.5px Inter,system-ui,sans-serif; padding:10px 14px; cursor:pointer;
  border-radius:9px; transition:border-color .15s,color .15s; text-align:left;
}
.v3search:hover{ border-color:#B4B2A9; color:#D3D1C7; }
.v3search span{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.v3search kbd, .v3in kbd, .v3ft kbd{
  border:1px solid #444441; border-bottom-width:2px; border-radius:4px;
  padding:1px 6px; font:600 10.5px Inter,monospace; color:#B4B2A9; background:#0b0b0b;
}
.v3chips{ margin-left:auto; display:flex; gap:8px; align-items:center; }
.v3chip{
  border:1px solid #33332f; color:#B4B2A9; font:600 11px Inter,sans-serif;
  letter-spacing:.6px; padding:6px 11px; border-radius:99px; white-space:nowrap;
}
.v3chip.v3grade{ color:#fff; border-color:#444441; cursor:pointer; text-transform:uppercase; }
.v3chip.v3grade:hover{ border-color:#D3D1C7; }

/* ---------- side rail ---------- */
.hub2-nav a{ border-radius:9px; margin:2px 8px; transition:background .12s,color .12s; position:relative; }
.hub2-nav a:hover{ background:#161615; }
.hub2-nav a.on{ background:#1b1b1a; }
.hub2-nav a.on::before{
  content:''; position:absolute; left:-8px; top:8px; bottom:8px; width:3px;
  background:var(--belt,#F0C93C); border-radius:3px;
}

/* ---------- view transitions + flash ---------- */
#viewHost .hub2-panel{ animation:v3in .24s ease both; }
@keyframes v3in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.v3flash{ animation:v3fl 1.6s ease both; }
@keyframes v3fl{
  0%{ box-shadow:0 0 0 3px var(--belt,#F0C93C); background:rgba(240,201,60,.14); }
  100%{ box-shadow:0 0 0 0 transparent; background:transparent; }
}

/* ---------- command palette ---------- */
body.v3lock{ overflow:hidden; }
.v3pal{ position:fixed; inset:0; z-index:100000; display:none; }
.v3pal.open{ display:block; }
.v3mask{ position:absolute; inset:0; background:rgba(5,5,5,.72); backdrop-filter:blur(3px); }
.v3box{
  position:relative; width:min(680px,94vw); margin:9vh auto 0;
  background:#141413; border:1px solid #444441; border-radius:14px; overflow:hidden;
  box-shadow:0 50px 140px -20px rgba(0,0,0,.9); animation:v3pop .18s ease both;
  display:flex; flex-direction:column; max-height:74vh;
}
@keyframes v3pop{ from{ opacity:0; transform:translateY(-8px) scale(.985); } to{ opacity:1; transform:none; } }
.v3in{ display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid #26261f; color:#B4B2A9; }
.v3in input{
  flex:1; background:none; border:0; outline:0; color:#fff;
  font:400 16px Inter,system-ui,sans-serif;
}
.v3in input::placeholder{ color:#6d6c66; }
.v3res{ overflow:auto; flex:1; padding:6px 8px 10px; }
.v3g{
  font:700 10.5px Inter,sans-serif; letter-spacing:1.6px; text-transform:uppercase;
  color:#6d6c66; padding:14px 12px 6px;
}
.v3r{
  display:block; width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding:10px 12px; border-radius:9px; color:#D3D1C7; font:400 14px Inter,sans-serif;
}
.v3r:hover, .v3r.on{ background:#1e1e1c; }
.v3r.on{ outline:1px solid #33332f; }
.v3r .v3t{ display:block; color:#fff; font-weight:600; }
.v3r .v3t em{ font-style:normal; font-weight:600; font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:#888780; margin-left:8px; }
.v3r .v3s{ display:block; color:#888780; font-size:12px; margin-top:2px; }
.v3r mark{ background:none; color:var(--belt,#F0C93C); font-weight:700; }
.v3none{ text-align:center; padding:40px 20px; color:#B4B2A9; font:400 14.5px Inter,sans-serif; }
.v3none span{ color:#6d6c66; font-size:12.5px; }
.v3ft{
  display:flex; gap:18px; align-items:center; padding:10px 18px;
  border-top:1px solid #26261f; color:#6d6c66; font:400 11.5px Inter,sans-serif;
}
.v3ft span:last-child{ margin-left:auto; }

/* ---------- mobile: bottom tab bar ---------- */
@media (max-width: 860px){
  .v3bar{ flex-wrap:wrap; gap:10px; }
  .v3search{ order:3; flex-basis:100%; max-width:none; }
  .hub2{ min-height:0; padding-bottom:64px; }
  .hub2-side{
    position:fixed; left:0; right:0; bottom:0; top:auto; z-index:9000;
    display:block; border-right:0; border-top:1px solid #33332f; background:#0b0b0b;
    padding:0;
  }
  .hub2-brand, .hub2-ring-box{ display:none; }
  .hub2-nav{ display:flex; justify-content:space-around; padding:6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .hub2-nav a{
    flex:1; margin:0 2px; flex-direction:column; gap:3px; padding:7px 2px;
    font-size:9.5px; letter-spacing:.3px; text-align:center; align-items:center;
  }
  .hub2-nav a.on::before{ left:20%; right:20%; top:auto; bottom:-6px; width:auto; height:3px; }
  .v3box{ margin-top:4vh; max-height:86vh; }
}