/* ============================================================
   TRAINING HUB v2 - workspace layout (Stage 1)
   Monochrome + belt colours, matching the site design system.
   ============================================================ */

.hub2 { display:grid; grid-template-columns:220px 1fr; min-height:78vh; border:1px solid var(--line); background:var(--ink); }

/* ---------- Sidebar ---------- */
.hub2-side { background:var(--black); border-right:1px solid var(--line); display:flex; flex-direction:column; padding:20px 0 0; }
.hub2-brand { font-family:var(--display); font-weight:800; font-style:italic; letter-spacing:1px; font-size:17px; padding:0 20px 18px; }
.hub2-nav { display:flex; flex-direction:column; }
.hub2-nav a {
  display:flex; align-items:center; gap:11px; padding:12px 20px;
  color:var(--grey-2); font-size:14px; border-left:3px solid transparent;
}
.hub2-nav a svg { width:18px; height:18px; flex:none; }
.hub2-nav a:hover { color:var(--white); background:var(--ink); }
.hub2-nav a.on { color:var(--white); background:var(--panel); border-left-color:var(--belt, var(--white)); font-weight:600; }
.hub2-ring-box { margin-top:auto; border-top:1px solid var(--line); padding:16px 20px; display:flex; gap:12px; align-items:center; }
.hub2-ring-box .rl { font-size:11px; color:var(--grey); }
.hub2-ring-box .rv { font-size:13px; color:var(--white); font-weight:600; }
.ring { transform:rotate(-90deg); }
.ring .bg { stroke:var(--line-2); }
.ring .fg { stroke:var(--belt, var(--white)); transition:stroke-dasharray .5s; }
.ring-txt { font-size:12px; font-weight:600; fill:#fff; }

/* ---------- Content ---------- */
.hub2-main { display:flex; flex-direction:column; min-width:0; }

.hub2-ctx { display:flex; align-items:center; gap:14px; padding:14px 22px; background:var(--black); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.hub2-ctx .swatch { width:34px; height:20px; border:1px solid var(--line-2); flex:none; position:relative; }
.hub2-ctx .swatch i { position:absolute; left:0; right:0; top:50%; height:5px; transform:translateY(-50%); }
.hub2-ctx .t { flex:1; min-width:200px; }
.hub2-ctx .t b { display:block; font-size:14px; }
.hub2-ctx .t span { color:var(--grey); font-size:12px; }
.hub2-continue {
  background:var(--white); color:var(--black); border:0; cursor:pointer;
  font-family:var(--body); font-weight:600; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; padding:11px 18px;
}
.hub2-continue:hover { background:var(--grey-2); }

.hub2-tools { padding:16px 22px 4px; }
.hub2-search { display:flex; align-items:center; gap:10px; background:var(--black); border:1px solid var(--line-2); padding:0 14px; }
.hub2-search svg { width:16px; height:16px; color:var(--grey); flex:none; }
.hub2-search input { flex:1; background:transparent; border:0; color:var(--white); font-family:var(--body); font-size:14px; padding:13px 0; min-width:0; }
.hub2-search input:focus { outline:none; }
.hub2-search:focus-within { border-color:var(--white); }
.hub2-search kbd { border:1px solid var(--line-2); color:var(--grey); font-size:10px; padding:2px 7px; font-family:var(--body); }

/* ---------- Belt timeline ---------- */
.hub2-tl-wrap { padding:14px 22px 6px; }
.hub2-tl-label { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--grey); margin-bottom:12px; }
.hub2-tl { position:relative; padding:6px 0 4px; }
.hub2-tl .rail { position:absolute; top:12px; left:6px; right:6px; height:5px; display:flex; }
.hub2-tl .rail i { flex:1; }
.hub2-tl .nodes { position:relative; display:flex; justify-content:space-between; }
.hub2-node { background:none; border:0; cursor:pointer; text-align:center; padding:0; width:34px; font-family:var(--body); }
.hub2-node .dot {
  width:14px; height:14px; border-radius:50%; margin:0 auto; position:relative;
  background:var(--c1, #888); border:2px solid var(--black); box-sizing:content-box; transition:transform .15s;
}
.hub2-node .dot::after { content:''; position:absolute; left:0; right:0; top:50%; height:4px; transform:translateY(-50%); background:var(--c2, transparent); border-radius:2px; }
.hub2-node .nl { display:block; font-size:9px; color:var(--grey); margin-top:7px; white-space:nowrap; }
.hub2-node:hover .dot { transform:scale(1.25); }
.hub2-node.sel .dot { outline:2px solid var(--white); outline-offset:2px; }
.hub2-node.me .dot { width:19px; height:19px; margin-top:-3px; }
.hub2-node.me .nl { color:var(--white); font-weight:600; }
.hub2-node:focus-visible { outline:2px solid var(--white); outline-offset:2px; }

/* ---------- Grade panel ---------- */
.hub2-panel { display:grid; grid-template-columns:1.25fr 1fr; gap:14px; padding:16px 22px 26px; align-items:start; }
.gp-req { background:var(--black); border:1px solid var(--line-2); border-top:3px solid var(--belt, var(--white)); }
.gp-head { padding:16px 18px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; }
.gp-head h2 { font-family:var(--display); font-weight:800; font-style:italic; text-transform:uppercase; font-size:1.25rem; letter-spacing:.5px; }
.gp-head .sub { display:block; color:var(--grey); font-size:12px; margin-top:3px; font-family:var(--body); font-style:normal; font-weight:400; text-transform:none; letter-spacing:0; }
.gp-count { color:var(--belt, var(--white)); font-size:13px; font-weight:600; white-space:nowrap; }
.gp-filters { display:flex; gap:14px; padding:10px 18px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.gp-filters label { display:flex; gap:7px; align-items:center; font-size:12px; color:var(--grey-2); cursor:pointer; }
.gp-body { padding:8px 18px 16px; }
.gp-coltag { display:inline-block; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--grey); border:1px solid var(--line-2); padding:3px 10px; margin:12px 0 4px; }
.gp-sec-h { display:flex; justify-content:space-between; align-items:baseline; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--grey); margin:14px 0 4px; }
.gp-sec-h .sc { font-size:11px; letter-spacing:0; }
.sc.full { color:#3F9C55; }
.sc.part { color:var(--belt, var(--grey-2)); }
.gp-item { display:flex; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--panel); }
.gp-item:last-child { border-bottom:0; }
.gp-item input { width:16px; height:16px; accent-color:#3F9C55; flex:none; cursor:pointer; }
.gp-item .en { font-size:14px; color:var(--white); }
.gp-item.done .en { color:var(--grey-2); text-decoration:line-through; text-decoration-color:var(--line-2); }
.gp-item .ko { margin-left:auto; font-size:12px; color:var(--grey); font-style:italic; white-space:nowrap; }
.gp-item .say { background:none; border:0; color:var(--grey); cursor:pointer; padding:2px; flex:none; }
.gp-item .say:hover, .gp-item .say.speaking { color:var(--white); }
.gp-item .say svg { width:15px; height:15px; display:block; }
.gp-note { border-left:3px solid var(--white); background:var(--ink); color:var(--grey-2); font-size:13px; padding:10px 14px; margin:8px 0; }
.gp-item.flash { animation:hub2flash 1.6s ease; }
@keyframes hub2flash { 0%,60% { background:rgba(255,255,255,.12); } 100% { background:transparent; } }
mark.hub2m { background:rgba(255,255,255,.3); color:var(--white); }

/* right column */
.gp-side { display:flex; flex-direction:column; gap:14px; min-width:0; }
.gp-video { background:var(--black); border:1px solid var(--line-2); }
.gp-video .vslot { position:relative; padding-top:56.25%; background:var(--panel); cursor:pointer; }
.gp-video .vslot .play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:52px; height:52px; border-radius:50%; background:var(--white); display:flex; align-items:center; justify-content:center; }
.gp-video .vslot .play svg { width:20px; height:20px; color:var(--black); margin-left:2px; }
.gp-video .vslot .vl { position:absolute; left:12px; bottom:10px; font-size:11px; color:var(--grey-2); }
.gp-video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.gp-acts { display:flex; gap:10px; padding:12px; }
.gp-acts a { flex:1; text-align:center; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; padding:11px 0; }
.gp-acts .line { border:1px solid var(--line-2); color:var(--white); }
.gp-acts .line:hover { border-color:var(--white); }
.gp-acts .solid { background:var(--white); color:var(--black); font-weight:600; }
.gp-acts .solid:hover { background:var(--grey-2); }
.gp-card { background:var(--black); border:1px solid var(--line-2); padding:16px 18px; }
.gp-card .lbl { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--grey); margin-bottom:8px; }
.gp-card p { color:var(--grey-2); font-size:13.5px; line-height:1.7; margin:0; }
.gp-streak { display:flex; gap:14px; align-items:center; }
.gp-streak svg { width:22px; height:22px; color:var(--belt, var(--white)); flex:none; }
.gp-streak b { display:block; font-size:14px; }
.gp-streak span { color:var(--grey); font-size:12px; }

/* placeholder view */
.hub2-soon { padding:60px 22px; text-align:center; }
.hub2-soon h2 { font-family:var(--display); font-weight:800; font-style:italic; text-transform:uppercase; font-size:1.4rem; margin-bottom:10px; }
.hub2-soon p { color:var(--grey-2); max-width:46ch; margin:0 auto 22px; }

/* ---------- Responsive: bottom tab bar ---------- */
@media (max-width: 900px) {
  .hub2 { grid-template-columns:1fr; border-left:0; border-right:0; }
  .hub2-side { flex-direction:row; align-items:center; border-right:0; border-top:1px solid var(--line);
    position:fixed; left:0; right:0; bottom:0; z-index:90; padding:0; background:var(--black); order:2; }
  .hub2-brand, .hub2-ring-box { display:none; }
  .hub2-nav { flex-direction:row; flex:1; }
  .hub2-nav a { flex-direction:column; gap:4px; flex:1; padding:10px 2px; font-size:9px; border-left:0; border-top:3px solid transparent; text-align:center; }
  .hub2-nav a.on { border-top-color:var(--belt, var(--white)); background:var(--ink); }
  .hub2-main { padding-bottom:76px; }
  .hub2-panel { grid-template-columns:1fr; }
  .hub2-node .nl { display:none; }
  .hub2-node.me .nl { display:block; }
}

/* ---------- Stage 2: patterns + theory ---------- */
.hub2-panel.pats { grid-template-columns:280px 1fr; }
.pat-list { display:flex; flex-direction:column; gap:6px; max-height:640px; overflow-y:auto; padding-right:4px; }
.pat-item { background:var(--black); border:1px solid var(--line-2); color:var(--grey-2); text-align:left; padding:11px 14px; cursor:pointer; font-family:var(--body); }
.pat-item b { display:block; color:var(--white); font-size:13px; }
.pat-item span { font-size:11px; color:var(--grey); }
.pat-item:hover { border-color:var(--grey); }
.pat-item.on { border-color:var(--belt, var(--white)); border-left-width:3px; }
.mv-box { padding:18px; }
.mv-n { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--grey); margin-bottom:10px; }
.mv-tech { font-family:var(--display); font-weight:800; font-style:italic; text-transform:uppercase; font-size:1.3rem; line-height:1.2; }
.mv-kor { color:var(--grey-2); font-style:italic; font-size:14px; margin-top:6px; display:flex; gap:8px; align-items:center; }
.mv-meta { color:var(--belt, var(--grey)); font-size:12px; letter-spacing:1px; text-transform:uppercase; margin-top:10px; }
.mv-how { color:var(--grey-2); font-size:14px; line-height:1.7; margin:12px 0 0; }
.mv-nav { display:flex; align-items:center; gap:14px; margin-top:18px; }
.mv-nav .mini { margin-top:0; }
.mv-nav .mini:disabled { opacity:.3; cursor:default; }
.mv-bar { flex:1; height:4px; background:var(--line); }
.mv-bar i { display:block; height:100%; background:var(--belt, var(--white)); transition:width .2s; }
.q-opts { display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.q-opt { background:var(--black); border:1px solid var(--line-2); color:var(--white); text-align:left; padding:13px 16px; font-family:var(--body); font-size:14px; cursor:pointer; }
.q-opt:hover:not(:disabled) { border-color:var(--white); }
.q-opt.right { border-color:#3F9C55; color:#3F9C55; font-weight:600; }
.q-opt.wrong { border-color:#C43B34; color:#C43B34; }
@media (max-width:900px){ .hub2-panel.pats { grid-template-columns:1fr; } .pat-list { flex-direction:row; overflow-x:auto; max-height:none; } .pat-item { min-width:170px; } }

/* ---------- Stage 3: terminology + encyclopaedia ---------- */
.flash-card { width:100%; min-height:170px; background:var(--black); border:1px solid var(--belt, var(--line-2)); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:24px; font-family:var(--body); margin-top:8px; }
.fc-main { font-family:var(--display); font-weight:800; font-style:italic; font-size:1.6rem; color:var(--white); text-align:center; }
.fc-sub { font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--grey); }
.fc-lv { flex:none; width:22px; height:22px; border:1px solid var(--line-2); color:var(--grey); font-size:11px; display:inline-flex; align-items:center; justify-content:center; }
.fc-lv.hi { border-color:#3F9C55; color:#3F9C55; }