/* NC Zoning Academy, dashboard view: hero, orientation card, course grid,
 * transmission relays.
 * Geometry and colour are measured from the 0.1.0 monolith
 * (docs/monolith-parity-spec.md). Type comes from the --fs-* roles, re-bound
 * for this view on .dash-scroll below.
 *
 * The app header and the fixed satellites (glossary FAB, SYSTEM_STATUS
 * readout) render on EVERY view; they live in style.css, not here.
 */

/* ---- dashboard content ---- */
/* the view's scroll container (also the keyboard-scroll target <main>) */
.dash-scroll {
  /* A browsing surface, not a lesson: prose is scanned, not read for 20
     minutes, so body sits at 16px rather than the player's 18px. The hero
     runs larger than the base title to carry the empty space above the grid. */
  --fs-title:     38px; /* OPERATOR DASHBOARD */
  --fs-heading:   20px; /* course-card titles */
  --fs-body:      16px; /* lead + orientation copy */
  --fs-secondary: 15px; /* course subtitle */
  --fs-ui:        12px; /* CTA, relay links */
  --fs-code:      12px; /* the > ACCESS GRANTED terminal line */
  --fs-label:     11px; /* section headers, orientation title */
  --fs-micro:     10px; /* chips, tags, progress counts */

  flex: 1;
  overflow-y: auto;
  padding: 48px var(--frame-gutter) 60px;
}
.dash { max-width: 1100px; margin: 0 auto; }

.dash-terminal {
  font-family: var(--font-mono);
  font-size: var(--fs-code);
  letter-spacing: var(--tracking-mid);
  color: var(--primary);
  margin-bottom: var(--space-sm);
}
.dash-h1 {
  font-family: var(--font-identity);
  font-weight: 400; /* Night Corp Display has no 700; bold renders faux */
  font-size: var(--fs-title);
  letter-spacing: var(--tracking-label);
  color: var(--text);
  margin: 0 0 var(--space-xs);
}
.dash-lead {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  letter-spacing: var(--tracking-tight);
  color: var(--muted);
  margin: 0 0 38px;
}

/* section headers: AVAILABLE COURSES [ n ] / TRANSMISSION RELAYS // ... */
.dash-section-hdr {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-caps);
  color: var(--muted);
  border-bottom: 1px solid rgb(from var(--muted) r g b / 0.25);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-6xl);
}
.dash-section-hdr b { color: var(--primary); font-weight: 400; }
.dash-relays-hdr { margin-bottom: var(--space-4xl); }
.dash-relays { margin-top: 48px; }

/* ---- orientation card (session-dismissible) ---- */
.orient-card {
  position: relative;
  border: 1px solid rgb(from var(--primary) r g b / 0.3);
  background: rgb(from var(--primary) r g b / 0.04);
  padding: var(--space-3xl) var(--space-4xl) var(--space-3xl) var(--space-3xl);
  margin-bottom: var(--section-gap);
  display: flex;
  gap: var(--space-xl);
  align-items: flex-start;
}
.orient-icon {
  width: 26px;
  height: 12.3px;
  flex: none;
  margin-top: 3px;
  background: var(--primary);
  -webkit-mask: url(../shard-icon.svg) center / contain no-repeat;
  mask: url(../shard-icon.svg) center / contain no-repeat;
  display: inline-block;
}
.orient-content { flex: 1; min-width: 0; }
.orient-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-caps);
  color: var(--primary);
  margin-bottom: var(--space-xs);
}
.orient-body {
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  line-height: 1.75;
  letter-spacing: var(--tracking-tight);
  color: var(--text-soft);
}
.orient-body b { color: var(--primary); font-weight: 400; }
.orient-dismiss {
  flex: none;
  background: transparent;
  border: 1px solid rgb(from var(--muted) r g b / 0.4);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  line-height: 1;
  padding: var(--space-2xs) var(--space-sm);
  cursor: pointer;

  &:hover { color: var(--primary); border-color: var(--primary); }
}

/* ---- course grid + card ---- */
.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: var(--space-5xl);
}

/* the whole card is clickable (opens the course) */
.course-card {
  border: 1px solid rgb(from var(--primary) r g b / 0.25);
  background: rgb(from var(--surface) r g b / 0.5);
  backdrop-filter: blur(6px);
  cursor: pointer;
  text-align: left;
  padding: 0;
  color: inherit;
  font: inherit;
}

/* blueprint hero: gradient + grid overlay + tag + watermark module count */
.course-hero {
  height: 132px;
  background: linear-gradient(135deg, var(--hero-a), var(--hero-b));
  border-bottom: 1px solid rgb(from var(--primary) r g b / 0.25);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: var(--space-xl);
}
.course-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(from var(--primary) r g b / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgb(from var(--primary) r g b / 0.06) 1px, transparent 1px);
  background-size: 22px 22px;
}
.course-tag {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--primary);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-mid);
  padding: var(--space-2xs) var(--space-md);
}
.course-watermark {
  position: relative;
  font-family: var(--font-display);
  font-weight: 900;
  /* a translucent decorative numeral behind the card, not text; no type role */
  font-size: 26px;
  letter-spacing: var(--tracking-mid);
  color: rgb(from var(--primary) r g b / 0.18);
}

.course-body { padding: var(--space-3xl) var(--space-3xl) var(--space-4xl); }
.course-title {
  font-family: var(--font-identity);
  font-weight: 400;
  font-size: var(--fs-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}
.course-title-bar {
  width: 44px;
  height: 2px;
  background: var(--primary);
  margin: var(--space-sm) 0 var(--space-md);
}
.course-sub {
  font-family: var(--font-body);
  color: var(--muted);
  font-size: var(--fs-secondary);
  margin-bottom: var(--space-2xl);
}

.course-chips { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-2xl); }
.course-chip {
  border: 1px solid rgb(from var(--muted) r g b / 0.4);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  padding: var(--space-2xs) var(--space-sm);
}

.course-progress-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mid);
  color: var(--muted);
  margin-bottom: var(--space-xs);
}
.course-progress-count { color: var(--primary); }
.course-bar {
  height: 5px;
  background: var(--bg);
  border: 1px solid rgb(from var(--primary) r g b / 0.2);
}
.course-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--success));
}

.course-cta {
  margin-top: var(--space-3xl);
  width: 100%;
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-ui);
  letter-spacing: var(--tracking-caps);
  padding: var(--space-lg);
  cursor: pointer;

  &:hover { background: var(--primary); color: var(--bg); }
}

/* ---- transmission relays (external links) ---- */
.dash-links { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.dash-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--fs-ui);
  letter-spacing: var(--tracking-mid);
  padding: var(--space-md) var(--space-2xl);

  /* colour variants; hover inverts to the solid colour */
  &.cyan {
    border: 1px solid rgb(from var(--primary) r g b / 0.4);
    color: var(--primary);
    background: rgb(from var(--primary) r g b / 0.04);
    &:hover { background: var(--primary); color: var(--bg); border-color: var(--primary); }
  }
  &.gold {
    border: 1px solid rgb(from var(--tertiary) r g b / 0.4);
    color: var(--tertiary);
    background: rgb(from var(--tertiary) r g b / 0.04);
    &:hover { background: var(--tertiary); color: var(--bg); border-color: var(--tertiary); }
  }
  &.gray {
    border: 1px solid rgb(from var(--muted) r g b / 0.4);
    color: var(--muted);
    background: rgb(from var(--muted) r g b / 0.04);
    &:hover { background: var(--muted); color: var(--bg); border-color: var(--muted); }
  }
}
.dash-link-icon { display: inline-flex; line-height: 0; }
.dash-link-kofi { width: 19px; height: 19px; display: block; object-fit: contain; }