/* ============================================================================
   Tech Skills — "pro" skin. Brings the index.html design language to the Tech
   Skills + People-Skills pages: multi-colour cards (12-gradient cycle on hubs),
   gradient icon tiles, soft colour glows, glass surfaces, per-page colour theme.
   Additive — loaded AFTER tech-skills.css, overrides look only (not structure/JS).

   Each page sets its own accent via two vars (injected inline in <head>):
       :root{ --ts-c:#7c3aed; --ts-grad:linear-gradient(135deg,#7c3aed,#a78bfa) }
   Everything in tech-skills.css already reads --ts-c / --ts-grad, so setting
   those two re-themes the whole page. Hub cards colour themselves via nth-child.
   ========================================================================== */

/* ---- the 12 card colours, straight from index.html's module themes -------- */
.ts-grid .ts-card:nth-child(12n+1){--cc:#7c3aed;--cc2:#a78bfa}
.ts-grid .ts-card:nth-child(12n+2){--cc:#3b82f6;--cc2:#0ea5e9}
.ts-grid .ts-card:nth-child(12n+3){--cc:#f97316;--cc2:#fb923c}
.ts-grid .ts-card:nth-child(12n+4){--cc:#ec4899;--cc2:#f472b6}
.ts-grid .ts-card:nth-child(12n+5){--cc:#10b981;--cc2:#34d399}
.ts-grid .ts-card:nth-child(12n+6){--cc:#d97706;--cc2:#f59e0b}
.ts-grid .ts-card:nth-child(12n+7){--cc:#0d9488;--cc2:#14b8a6}
.ts-grid .ts-card:nth-child(12n+8){--cc:#7c3aed;--cc2:#ec4899}
.ts-grid .ts-card:nth-child(12n+9){--cc:#3b82f6;--cc2:#7c3aed}
.ts-grid .ts-card:nth-child(12n+10){--cc:#f97316;--cc2:#ec4899}
.ts-grid .ts-card:nth-child(12n+11){--cc:#10b981;--cc2:#0ea5e9}
.ts-grid .ts-card:nth-child(12n+12){--cc:#e11d48;--cc2:#fb7185}
.ts-grid .ts-card{--cc:#7c3aed;--cc2:#a78bfa} /* fallback */

/* ---- hero: kicker + stat chips follow the page accent --------------------- */
.ts-hero{padding:34px 0 16px}
.ts-kicker{background:color-mix(in srgb,var(--ts-c) 12%,transparent);
           color:var(--ts-c);border:1px solid color-mix(in srgb,var(--ts-c) 24%,transparent)}

/* ---- the multi-colour cards (hubs) --------------------------------------- */
.ts-grid{gap:18px}
.ts-grid .ts-card{
  position:relative;overflow:hidden;gap:7px;
  padding:1.45rem 1.4rem 1.25rem;border-radius:22px;
  border:1px solid var(--line);border-top:1px solid var(--line);
  background:color-mix(in srgb,var(--card) 88%,transparent);
  -webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
  box-shadow:0 12px 30px -24px rgba(20,16,50,.55);
}
.ts-grid .ts-card::before{ /* soft colour glow, index-style */
  content:"";position:absolute;width:150px;height:150px;border-radius:50%;
  top:-52px;right:-52px;background:linear-gradient(135deg,var(--cc),var(--cc2));
  filter:blur(44px);opacity:.24;pointer-events:none;
  transition:opacity .35s ease,transform .35s ease;
}
.ts-grid .ts-card:hover{
  transform:translateY(-8px) scale(1.008);
  box-shadow:0 28px 52px -28px color-mix(in srgb,var(--cc) 60%,transparent);
}
.ts-grid .ts-card:hover::before{opacity:.42;transform:scale(1.15)}

/* icon tile on top, number as a corner badge (index layout) */
.ts-grid .ts-cardtop{position:relative;display:block;margin-bottom:10px}
.ts-grid .ts-ico{
  display:grid;place-items:center;width:54px;height:54px;border-radius:16px;
  font-size:1.6rem;line-height:1;margin-bottom:14px;color:#fff;
  background:linear-gradient(135deg,var(--cc),var(--cc2));
  box-shadow:0 12px 22px -10px color-mix(in srgb,var(--cc) 72%,transparent);
}
.ts-grid .ts-num{
  position:absolute;top:0;right:0;width:30px;height:30px;border-radius:9px;
  color:var(--cc);background:color-mix(in srgb,var(--cc) 13%,transparent)
}
.ts-grid .ts-name{display:block;font-size:1.15rem;line-height:1.25}
.ts-grid .ts-learn{color:var(--muted)}
.ts-grid .ts-counts{color:color-mix(in srgb,var(--cc) 72%,var(--muted))}
.ts-grid .ts-progbar span{background:linear-gradient(90deg,var(--cc),var(--cc2))}
.ts-grid .ts-progtx{color:var(--cc)}

/* card footer becomes a coloured "Explore →" text link, like index */
.ts-grid .ts-cardfoot{margin-top:8px}
.ts-grid .ts-cardfoot .ts-btn{
  background:none;color:var(--cc);padding:0;min-height:auto;font-weight:700;
}
.ts-grid .ts-cardfoot .ts-btn:hover{filter:none;transform:none}
.ts-grid .ts-card:hover .ts-cardfoot .ts-btn{gap:9px}

/* ---- learning method: cycle colours on the step cards (hubs) ------------- */
.ts-method{gap:12px}
.ts-method .ts-step{border-radius:16px;border-left:4px solid var(--cc)}
.ts-method .ts-step b{color:var(--cc)}
.ts-method .ts-step:nth-child(5n+1){--cc:#7c3aed}
.ts-method .ts-step:nth-child(5n+2){--cc:#3b82f6}
.ts-method .ts-step:nth-child(5n+3){--cc:#f97316}
.ts-method .ts-step:nth-child(5n+4){--cc:#10b981}
.ts-method .ts-step:nth-child(5n+5){--cc:#ec4899}
.ts-method .ts-step{--cc:#7c3aed}

/* ---- section headings a touch larger ------------------------------------- */
.ts-sec h2{font-size:1.35rem;letter-spacing:-.015em}

/* ======================================================= module pages ===== */
/* big gradient icon tile in the hero, themed to the page accent */
.ts-modhead{align-items:center}
.ts-modhead .ts-ico{
  display:grid;place-items:center;width:56px;height:56px;border-radius:16px;
  font-size:1.7rem;line-height:1;color:#fff;background:var(--ts-grad);
  box-shadow:0 12px 24px -10px color-mix(in srgb,var(--ts-c) 70%,transparent);
}
.ts-modhead .ts-num{width:38px;height:38px;border-radius:12px;font-size:.9rem}
/* topic accordion + flashcards + pager: glassier, rounder to match index */
.ts-topic,.ts-fface,.ts-pager a,.ts-goal{border-radius:16px}
.ts-topic.is-open{box-shadow:0 16px 34px -24px color-mix(in srgb,var(--ts-c) 65%,transparent)}

@media (prefers-reduced-motion: reduce){
  .ts-grid .ts-card, .ts-grid .ts-card::before{transition:none !important}
}