/* skill-tracks.css — Topic > Stage > Skill layout for the skills pages.
   Load AFTER class1-math.css. Uses only new class names, so it does not
   collide with the old .skill-category rules. */

/* ---------- Topic jump chips ---------- */
.topic-nav{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.topic-nav a{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px 8px 8px; border-radius:999px;
  background:var(--white); border:2px solid color-mix(in srgb,var(--topic) 35%,white);
  font-weight:700; font-size:14px; color:var(--text-dark);
  transition:background .15s ease, transform .15s ease;
}
.topic-nav a .n{
  width:26px; height:26px; border-radius:50%; background:var(--topic); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:800;
}
.topic-nav a:hover{ background:color-mix(in srgb,var(--topic) 10%,white); transform:translateY(-1px); }

/* ---------- "How to follow" hint ---------- */
.path-hint{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px;
  background:var(--bg-light); border-radius:14px; padding:12px 16px; margin-bottom:26px;
  font-size:14px; font-weight:600; color:var(--text-dark);
}
.path-hint i{ color:var(--sun); }
.path-hint .step{ display:inline-flex; align-items:center; gap:6px; }
.path-hint .step b{
  width:22px; height:22px; border-radius:50%; background:var(--secondary); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-size:12px;
}
.path-hint .arrow{ color:var(--text); opacity:.6; }

/* ---------- Topic (top level) ---------- */
.topic-stack{ display:flex; flex-direction:column; gap:26px; }
.topic{
  border:1px solid var(--line); border-radius:20px; background:var(--white);
  box-shadow:var(--shadow); overflow:hidden;
}
.topic-head{
  display:flex; align-items:center; gap:16px; cursor:pointer; list-style:none;
  padding:18px 22px;
  background:color-mix(in srgb,var(--topic) 10%,white);
  border-left:8px solid var(--topic);
}
.topic-head::-webkit-details-marker{ display:none; }
.topic-num{
  flex-shrink:0; width:46px; height:46px; border-radius:14px; background:var(--topic); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1;
}
.topic-num small{ font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.85; }
.topic-num b{ font-size:20px; font-weight:800; font-family:'Nunito',sans-serif; }
.topic-title{ flex:1; min-width:0; }
.topic-title h2{ font-size:22px; font-weight:800; color:var(--topic); line-height:1.2; }
.topic-title p{ margin-top:3px; font-size:13.5px; font-weight:500; color:var(--text); line-height:1.5; }
.topic-count{
  flex-shrink:0; font-size:12.5px; font-weight:700; color:var(--topic);
  background:var(--white); padding:5px 12px; border-radius:999px; white-space:nowrap;
}
.topic-head .chev{ color:var(--topic); transition:transform .2s ease; }
.topic[open] .topic-head .chev{ transform:rotate(180deg); }

/* ---------- Stage timeline (second level) ---------- */
.stage-list{ list-style:none; padding:24px 22px 8px; }
.stage{
  position:relative; display:grid; grid-template-columns:44px 1fr; gap:16px;
  padding-bottom:20px;
}
.stage::before{               /* connector to the next stage */
  content:""; position:absolute; left:21px; top:44px; bottom:0; width:3px; border-radius:3px;
  background:color-mix(in srgb,var(--topic) 28%,white);
}
.stage:last-child::before{ display:none; }
.stage-marker{
  width:44px; height:44px; border-radius:50%; background:var(--topic); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Nunito',sans-serif; font-weight:800; font-size:18px;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--topic) 16%,white);
}
.stage-card{
  border:1px solid var(--line); border-radius:16px; padding:14px 16px 12px; background:var(--white);
}
.stage-head{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-bottom:10px; }
.stage-kicker{
  font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--topic);
}
.stage-head h3{ flex-basis:100%; font-size:17px; font-weight:800; color:var(--text-dark); line-height:1.25; }
.stage-tag{
  font-size:11px; font-weight:800; padding:2px 9px; border-radius:999px;
  background:var(--topic); color:#fff; letter-spacing:.04em;
}
.stage-meta{ margin-left:auto; font-size:12px; font-weight:600; color:var(--text); }

/* ---------- Skills (third level): numbered steps ---------- */
.skill-steps{ list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 10px; }
.skill-steps li a{
  display:flex; align-items:center; gap:10px; height:100%;
  padding:8px 10px; border-radius:10px; background:var(--bg-light);
  font-size:14px; font-weight:600; color:var(--text-dark); line-height:1.35;
  transition:background .12s ease, transform .12s ease;
}
.skill-steps li a:hover{
  background:color-mix(in srgb,var(--topic) 12%,white); color:var(--topic); transform:translateX(3px);
}
.skill-steps .code{
  flex-shrink:0; min-width:34px; text-align:center; padding:3px 6px; border-radius:7px;
  font-size:12px; font-weight:800; color:var(--topic);
  background:color-mix(in srgb,var(--topic) 16%,white);
}
.skill-steps .name{ flex:1; min-width:0; }
.skill-steps .fa-eye{ font-size:11px; color:var(--topic); opacity:.45; }
.skill-steps li a:hover .fa-eye{ opacity:1; }

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .skill-steps{ grid-template-columns:1fr; }
}
/* No "lift and slide" hover effects on touch screens */
@media (hover:none){
  .skill-steps li a:hover, .topic-nav a:hover{ transform:none; }
}

/* =====================================================================
   PHONE  (Material / Android-style)
   - system font (Roboto on Android), 48dp+ touch targets
   - edge-to-edge elevated cards, list rows with dividers + chevrons
   - ripple-style pressed state, horizontally scrolling chip row
   ===================================================================== */
@media (max-width:600px){
  .skills-page .topic-nav, .skills-page .path-hint, .skills-page .topic-stack{
    font-family:Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
  }
  .skills-page a, .skills-page summary{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; }

  /* --- Chip row (scrolls sideways, snaps, no scrollbar) --- */
  .topic-nav{
    flex-wrap:nowrap; overflow-x:auto; gap:8px; margin:0 -10px 10px; padding:2px 10px 6px;
    scroll-snap-type:x proximity; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .topic-nav::-webkit-scrollbar{ display:none; }
  .topic-nav a{
    flex:0 0 auto; scroll-snap-align:start; min-height:40px; padding:0 14px 0 6px;
    font-size:13.5px; font-weight:500; border-width:1px; box-shadow:0 1px 2px rgba(0,0,0,.08);
  }
  .topic-nav a .n{ width:28px; height:28px; font-size:13px; }
  .topic-nav a:active{ background:color-mix(in srgb,var(--topic) 18%,white); }

  /* --- Hint: compact tonal banner --- */
  .path-hint{
    gap:2px 10px; padding:10px 14px; margin-bottom:14px; border-radius:12px;
    font-size:12.5px; font-weight:500; background:color-mix(in srgb,var(--sun) 14%,white);
  }
  .path-hint .arrow{ display:none; }
  .path-hint .step b{ width:18px; height:18px; font-size:11px; }

  /* --- Topic card: elevated surface, no outline --- */
  .topic-stack{ gap:14px; padding-bottom:calc(16px + env(safe-area-inset-bottom,0px)); }
  .topic{
    border:none; border-radius:16px; scroll-margin-top:12px;
    box-shadow:0 1px 3px rgba(0,0,0,.14), 0 1px 2px rgba(0,0,0,.08);
  }
  .topic-head{
    border-left:none; flex-wrap:wrap; align-items:center; gap:4px 12px;
    min-height:64px; padding:14px 14px 12px;
    background:color-mix(in srgb,var(--topic) 12%,white);
  }
  .topic-head:active{ background:color-mix(in srgb,var(--topic) 22%,white); }
  .topic-num{ width:40px; height:40px; border-radius:12px; }
  .topic-num small{ display:none; }
  .topic-num b{ font-size:19px; }
  .topic-title h2{ font-size:18px; font-weight:700; }
  .topic-title p{ font-size:12.5px; margin-top:2px; }
  .topic-head .chev{ font-size:14px; width:24px; text-align:center; }
  .topic-count{
    order:4; flex-basis:100%; padding:2px 0 0 52px; background:none;
    font-size:12px; font-weight:500; color:color-mix(in srgb,var(--topic) 80%,black);
  }

  /* --- Stages: number badge sits inside the card, no side gutter --- */
  .stage-list{ padding:12px 10px 4px; }
  .stage{ display:block; padding-bottom:12px; }
  .stage::before{ display:none; }
  .stage-marker{
    position:absolute; z-index:1; top:12px; left:12px; width:30px; height:30px;
    font-size:15px; box-shadow:none;
  }
  .stage-card{
    padding:0; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  }
  .stage-head{
    position:relative; gap:0 8px; margin:0; padding:10px 12px 10px 52px; min-height:52px;
    align-content:center; background:var(--bg-light); border-bottom:1px solid var(--line);
  }
  .stage-kicker{ font-size:10.5px; }
  .stage-meta{ font-size:11.5px; }
  .stage-head h3{ order:3; font-size:15.5px; font-weight:700; margin-top:1px; }

  /* --- Skills: Material list rows --- */
  .skill-steps{ display:block; }
  .skill-steps li + li{ border-top:1px solid var(--line); }
  .skill-steps li a{
    position:relative; overflow:hidden; min-height:52px; padding:8px 12px; gap:12px;
    border-radius:0; background:var(--white); font-size:14.5px; font-weight:500; line-height:1.35;
    transition:background .3s ease;
  }
  /* ripple-style press */
  .skill-steps li a:active{ background:color-mix(in srgb,var(--topic) 16%,white); transition:none; }
  .skill-steps .code{ min-width:38px; padding:4px 6px; font-size:12px; border-radius:8px; }
  .skill-steps .name{ font-size:14.5px; }
  /* swap the "eye" for a native-style chevron (no HTML change) */
  .skill-steps .fa-eye{ opacity:.5; font-size:12px; }
  .skill-steps .fa-eye::before{ content:"\f054"; }
}

@media (max-width:380px){
  .stage-list{ padding:10px 8px 2px; }
  .topic-title h2{ font-size:16.5px; }
  .skill-steps li a{ padding:8px 10px; gap:10px; }
  .skill-steps .name, .skill-steps li a{ font-size:14px; }
}