/* ============================================================
   network.mikeshelby.com — Component Styles
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap");

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* faint NOC grid backdrop */
  background-image:
    linear-gradient(rgba(46,230,200,0.020) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,230,200,0.020) 1px, transparent 1px);
  background-size: 48px 48px;
  background-attachment: fixed;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-3);
}
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }

a { color: var(--signal); text-decoration: none; }
a:hover { text-decoration: underline; }

code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* ---- Layout shell ---- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-5); }

/* ---- Header ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: rgba(12, 17, 24, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  height: 100%;
  display: flex; align-items: center; gap: var(--sp-6);
}
.brand {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-md);
  color: var(--ink);
  letter-spacing: -0.02em;
}
.brand:hover { text-decoration: none; }
.brand .node {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 12px var(--signal-glow), 0 0 0 4px var(--signal-glow);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.brand .dim { color: var(--ink-faint); font-weight: 400; }

.nav { display: flex; gap: var(--sp-5); margin-left: auto; }
.nav a {
  color: var(--ink-dim);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: var(--sp-2) 0;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.nav a:hover, .nav a.active {
  color: var(--ink); text-decoration: none;
  border-bottom-color: var(--signal);
}

/* ---- Hero (dashboard) ---- */
.hero { padding: var(--sp-8) 0 var(--sp-6); }
.hero .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: var(--sp-4);
}
.hero h1 { font-size: var(--t-3xl); max-width: 16ch; }
.hero p.lede {
  color: var(--ink-dim);
  font-size: var(--t-md);
  max-width: 54ch;
  margin-top: var(--sp-4);
}

/* ---- Progress meter ---- */
.meter {
  margin-top: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}
.meter-top {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--sp-3);
}
.meter-top .label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint);
}
.meter-top .pct {
  font-family: var(--font-mono);
  font-size: var(--t-xl);
  font-weight: 700;
  color: var(--signal);
}
.bar {
  height: 8px; border-radius: 99px;
  background: var(--surface-3);
  overflow: hidden;
}
.bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--signal-dim), var(--signal));
  border-radius: 99px;
  transition: width .6s cubic-bezier(.2,.8,.2,1);
}

/* ---- Section headings ---- */
.section { padding: var(--sp-7) 0; }
.section-head {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.section-head h2 { margin: 0; }
.section-head .rule { flex: 1; height: 1px; background: var(--line); }
.section-head .count {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--ink-faint);
}

/* ---- Domain tiles: the signature element ---- */
.domain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-4);
}
.domain-card {
  position: relative;
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  overflow: hidden;
  transition: transform .18s, border-color .18s, background .18s;
}
.domain-card:hover {
  text-decoration: none;
  transform: translateY(-3px);
  border-color: var(--line-bright);
  background: var(--surface-2);
}
/* signal line running along the top, colored per-domain */
.domain-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--dh, var(--signal));
  opacity: 0.9;
}
.domain-card .dnum {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}
.domain-card .dweight {
  float: right;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--dh, var(--signal));
  background: color-mix(in srgb, var(--dh, var(--signal)) 14%, transparent);
  padding: 2px var(--sp-2);
  border-radius: 99px;
}
.domain-card h3 {
  margin: var(--sp-3) 0 var(--sp-2);
  font-size: var(--t-lg);
  color: var(--ink);
}
.domain-card:hover h3 { color: var(--dh, var(--signal)); }
.domain-card p {
  color: var(--ink-dim);
  font-size: var(--t-sm);
  margin: 0 0 var(--sp-4);
  min-height: 2.6em;
}
.domain-card .dmeta {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--ink-faint);
}
.domain-card .dbar {
  flex: 1; height: 4px; border-radius: 99px;
  background: var(--surface-3); overflow: hidden;
}
.domain-card .dbar > span {
  display: block; height: 100%; width: 0;
  background: var(--dh, var(--signal));
  border-radius: 99px;
  transition: width .6s ease;
}

/* ---- Quick-action cards ---- */
.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
}
.action-card {
  display: flex; flex-direction: column; gap: var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-5);
  transition: border-color .18s, background .18s;
}
.action-card:hover {
  text-decoration: none;
  border-color: var(--signal-dim);
  background: var(--surface-2);
}
.action-card .ico {
  font-family: var(--font-mono);
  font-size: var(--t-lg);
  color: var(--signal);
}
.action-card .title { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.action-card .desc { font-size: var(--t-sm); color: var(--ink-dim); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-sm);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .12s, background .15s, border-color .15s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary {
  background: var(--signal); color: #06231f;
}
.btn-primary:hover { background: #4ff0d6; }
.btn-ghost {
  background: transparent; color: var(--ink);
  border-color: var(--line-bright);
}
.btn-ghost:hover { border-color: var(--signal); color: var(--signal); }

/* ---- Footer ---- */
.site-footer {
  border-top: 1px solid var(--line);
  margin-top: var(--sp-8);
  padding: var(--sp-6) 0;
  color: var(--ink-faint);
  font-size: var(--t-sm);
}
.site-footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-4); }
.site-footer .mono { color: var(--ink-faint); }

/* ---- Reading layout (lessons) ---- */
.reader { max-width: var(--maxw-read); margin: 0 auto; padding: var(--sp-7) var(--sp-5); }
.reader p, .reader li { color: var(--ink-dim); }
.reader p { margin: 0 0 var(--sp-4); }

/* ---- Status pill ---- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  padding: 2px var(--sp-3);
  border-radius: 99px;
  border: 1px solid var(--line);
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; }
.pill.locked .dot { background: var(--status-locked); }
.pill.learn  .dot { background: var(--status-learn); }
.pill.strong .dot { background: var(--status-strong); }
.pill.weak   .dot { background: var(--status-weak); }

/* ---- Responsive ---- */
@media (max-width: 720px) {
  .nav { gap: var(--sp-4); }
  .nav a { font-size: var(--t-xs); }
  .hero h1 { font-size: var(--t-2xl); }
  .brand .dim { display: none; }
}

/* ---- Focus visibility (a11y floor) ---- */
:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}