/* AGN LMS — the Learning Management and Security Recovery shell.
   Built to the supplied mockup: fixed left navigation, fluid centre, right rail.
   Shares the Troubleshooter's palette from site.css so the two halves of the site
   feel like one product rather than two that happen to share a domain. */

:root {
  --lms-sidebar: 232px;
  --lms-rail: 288px;
  --lms-gap: 18px;
}

.lms-shell {
  display: grid;
  grid-template-columns: var(--lms-sidebar) minmax(0, 1fr) var(--lms-rail);
  gap: var(--lms-gap);
  width: min(1560px, 100% - 28px);
  margin-inline: auto;
  align-items: start;
  padding-block: 16px 48px;
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.lms-top {
  border-bottom: 1px solid var(--line);
  background: rgba(7, 11, 20, 0.86);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 30;
}
.lms-top-inner {
  width: min(1560px, 100% - 28px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 10px;
}
.lms-brand { display: flex; align-items: center; gap: 11px; flex: none; }
.lms-brand img { height: 42px; width: auto; display: block; }
.lms-brand-text { line-height: 1.1; }
.lms-brand-name { font-weight: 800; letter-spacing: 0.5px; font-size: 1.12rem; }
.lms-brand-name em { font-style: normal; color: var(--blue-400); }
.lms-brand-sub {
  font-size: 0.62rem; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 2.1px;
}
.lms-search { flex: 1 1 auto; max-width: 520px; }
.lms-search input {
  width: 100%; border-radius: 999px; padding: 9px 16px;
  background: var(--navy-900); border: 1px solid var(--line); color: var(--text);
}
.lms-top-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.lms-nav {
  position: sticky; top: 74px;
  background: linear-gradient(180deg, var(--navy-700), var(--navy-800));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
}
.lms-nav a, .lms-nav .lms-nav-soon {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: var(--radius-sm);
  color: var(--text-dim); font-size: 0.93rem;
}
.lms-nav a:hover { background: var(--navy-600); color: var(--text); text-decoration: none; }
.lms-nav a.active {
  background: var(--blue-600); color: #fff; font-weight: 640;
  box-shadow: 0 6px 18px -10px var(--blue-glow);
}
/* Sections that are designed but not built yet are shown, not hidden, and are
   visibly not links. Pretending they work would be worse than admitting the
   roadmap. */
.lms-nav .lms-nav-soon { color: var(--text-faint); cursor: default; }
.lms-nav .lms-nav-soon::after {
  content: 'soon'; margin-left: auto; font-size: 0.62rem;
  text-transform: uppercase; letter-spacing: 1px;
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 6px;
}
.lms-nav-group {
  margin: 12px 0 5px; padding: 0 11px;
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--text-faint);
}
.lms-nav-icon { width: 17px; text-align: center; opacity: 0.85; flex: none; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.lms-hero {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 32px;
  background:
    radial-gradient(760px 300px at 82% 18%, rgba(30, 155, 255, 0.24), transparent 66%),
    linear-gradient(120deg, #0b1524 0%, #122238 48%, #1b2f4d 100%);
  margin-bottom: 16px;
}
.lms-hero-kicker {
  font-size: 0.7rem; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--blue-400); margin-bottom: 10px;
}
.lms-hero h1 { font-size: clamp(1.8rem, 3.2vw, 2.7rem); line-height: 1.08; margin: 0 0 10px; }
.lms-hero h1 span { color: var(--blue-400); display: block; }
.lms-hero p { color: var(--text-dim); max-width: 60ch; margin-bottom: 18px; }
.lms-hero-tags {
  display: flex; gap: 22px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.78rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1.2px;
}

/* ── Quick actions ───────────────────────────────────────────────────────── */
.lms-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 22px; }
.lms-action {
  display: block; border-radius: var(--radius); padding: 15px 16px;
  border: 1px solid var(--line); background: var(--navy-700); color: var(--text);
  transition: transform 0.14s, border-color 0.14s, box-shadow 0.14s;
}
.lms-action:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 12px 26px -18px #000; }
.lms-action strong { display: block; margin-bottom: 3px; }
.lms-action span { color: var(--text-dim); font-size: 0.85rem; }
/* The emergency route is red and first, because somebody arriving mid-incident
   should not have to read the page to find it. */
.lms-action.danger { border-color: var(--fail); background: linear-gradient(180deg, rgba(255, 95, 109, 0.16), var(--navy-700)); }
.lms-action.danger:hover { border-color: #ff8a94; }
.lms-action.blue { border-color: var(--blue-600); background: linear-gradient(180deg, rgba(30, 155, 255, 0.15), var(--navy-700)); }
.lms-action.green { border-color: var(--pass); background: linear-gradient(180deg, rgba(63, 208, 138, 0.13), var(--navy-700)); }
.lms-action.purple { border-color: #8b6cf0; background: linear-gradient(180deg, rgba(139, 108, 240, 0.15), var(--navy-700)); }

/* ── Section heads ───────────────────────────────────────────────────────── */
.lms-section-head { display: flex; align-items: baseline; gap: 12px; margin: 26px 0 4px; }
.lms-section-head h2 { margin: 0; font-size: 1.24rem; }
.lms-section-head a { margin-left: auto; font-size: 0.86rem; }
.lms-section-sub { color: var(--text-dim); font-size: 0.9rem; margin-bottom: 14px; }

/* ── Path and lab cards ──────────────────────────────────────────────────── */
.lms-paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(182px, 1fr)); gap: 12px; }
.lms-path {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--navy-700); padding: 16px; color: var(--text); display: flex; flex-direction: column;
}
.lms-path:hover { text-decoration: none; border-color: var(--blue-600); }
.lms-path-icon { font-size: 1.5rem; margin-bottom: 9px; }
.lms-path h3 { margin: 0 0 6px; font-size: 1rem; }
.lms-path p { color: var(--text-dim); font-size: 0.84rem; margin: 0 0 14px; }
.lms-path-foot { margin-top: auto; }

.lms-bar { height: 5px; border-radius: 999px; background: var(--navy-500); overflow: hidden; margin-bottom: 6px; }
.lms-bar i { display: block; height: 100%; border-radius: 999px; background: var(--blue-500); }
.lms-bar.green i { background: var(--pass); }
.lms-bar.amber i { background: var(--warn); }

.lms-labs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.lms-lab { border: 1px solid var(--line); border-radius: var(--radius); background: var(--navy-700); overflow: hidden; display: flex; flex-direction: column; }
.lms-lab-art {
  height: 96px;
  background: radial-gradient(420px 150px at 30% 20%, rgba(30, 155, 255, 0.4), transparent 70%), var(--navy-600);
  display: grid; place-items: center; font-size: 1.9rem;
}
.lms-lab-body { padding: 14px 15px; display: flex; flex-direction: column; flex: 1; }
.lms-lab-body h3 { margin: 0 0 5px; font-size: 0.98rem; }
.lms-lab-body p { color: var(--text-dim); font-size: 0.84rem; margin: 0 0 12px; }
.lms-lab-meta { display: flex; gap: 8px; align-items: center; margin-top: auto; flex-wrap: wrap; }
.lms-level { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 1px; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; }
.lms-level.beginner { color: var(--pass); }
.lms-level.intermediate { color: var(--warn); }
.lms-level.advanced { color: var(--fail); }

/* ── Right rail ──────────────────────────────────────────────────────────── */
.lms-rail { position: sticky; top: 74px; display: flex; flex-direction: column; gap: 12px; }
.lms-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--navy-700); padding: 15px 16px; }
.lms-card h3 { margin: 0 0 10px; font-size: 0.94rem; display: flex; align-items: baseline; }
.lms-card h3 a { margin-left: auto; font-size: 0.78rem; font-weight: 400; }
.lms-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.lms-stat { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 10px; text-align: center; }
.lms-stat b { display: block; font-size: 1.32rem; line-height: 1; }
.lms-stat span { color: var(--text-faint); font-size: 0.72rem; }
.lms-list { list-style: none; margin: 0; padding: 0; }
.lms-list li { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 0.88rem; }
.lms-list li:last-child { border-bottom: none; }
.lms-list .state { margin-left: auto; font-size: 0.74rem; color: var(--text-faint); }
.lms-list .state.done { color: var(--pass); }

/* Honest empty state for the signed-out rail: the mockup shows a member profile,
   and member accounts do not exist yet. Saying so beats inventing a level 14. */
.lms-signedout { text-align: center; padding: 6px 2px 2px; }
.lms-signedout p { color: var(--text-dim); font-size: 0.86rem; }

@media (max-width: 1280px) {
  .lms-shell { grid-template-columns: var(--lms-sidebar) minmax(0, 1fr); }
  .lms-rail { display: none; }
}
@media (max-width: 900px) {
  .lms-shell { grid-template-columns: minmax(0, 1fr); }
  .lms-nav { position: static; display: flex; flex-wrap: wrap; gap: 4px; }
  .lms-nav a, .lms-nav .lms-nav-soon { flex: 1 1 auto; }
  .lms-nav-group { width: 100%; }
}