/* The browser edition: style.css is shared with the local lab; this adds what the
 * static site needs (links for navigation, the simulation pane, Spark UI notes). */

.brand { color: inherit; text-decoration: none; }
.edition { font-size: 11px; font-weight: 600; color: var(--top-muted); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 1px 8px; }
.views a { color: var(--top-muted); padding: 6px 11px; border-radius: 7px; text-decoration: none; }
.views a:hover { color: var(--top-text); background: rgba(255,255,255,.06); }
.views a.on { color: #fff; background: rgba(255,255,255,.12); }
a.topbtn { text-decoration: none; }
a.mod { text-decoration: none; }

/* Simulation pane */
.simpane-h { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; border-bottom: 1px solid var(--line); background: var(--panel-2); flex: none; }
.simpane-t { font-size: 12.5px; font-weight: 650; color: var(--accent); }
#sim-close { display: none; }
.simhost { flex: 1; overflow: auto; min-height: 0; position: relative; }
.sim-empty { display: grid; place-items: center; height: 100%; padding: 24px; text-align: center; color: var(--muted); }
.sim-empty h2 { color: var(--text); font-size: 18px; margin: 0 0 6px; }
.sim-empty p { max-width: 420px; margin: 0 auto 14px; }

/* "In the Spark UI" notes: where a lesson step points at the real Spark UI */
.sparkui { margin: 8px 16px 4px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); font-size: 12.5px; color: var(--text-2); }
.sparkui-h { font-weight: 650; color: var(--text); margin-bottom: 4px; }
.sparkui-h span { font-weight: 400; color: var(--muted); }
.sparkui ul { margin: 0; padding-left: 18px; }
.sparkui li { margin: 3px 0; }
.sparkui .look { color: var(--muted); }
.sparkui .look b { color: var(--text-2); font-weight: 650; }

/* Home page */
.modcards { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 12px 0 18px; }
.modcard { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; text-decoration: none; color: inherit; }
.modcard:hover { border-color: var(--accent); }
.modcard .mnum { margin-top: 2px; }
.modcard h3 { margin: 0; font-size: 14px; color: var(--text); }
.modcard p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.modcard.complete .mnum { background: var(--fix-soft); border-color: var(--fix); color: var(--fix); }
.home-note { font-size: 12.5px; color: var(--muted); border-left: 3px solid var(--line-2); padding: 2px 0 2px 10px; margin: 14px 0; }
.foot { margin-top: 28px; font-size: 12px; color: var(--muted); }

.sim-var { white-space: nowrap; }
.sim-variants { flex-wrap: wrap; }

/* Laptop widths: the module list shrinks to its numbers, so the simulation keeps its room. */
@media (max-width: 1200px) and (min-width: 901px) {
  .sidebar { width: 54px; }
  .sidebar .mtitle, .sidebar .mprog, .sidebar .side-h span, #btn-collapse { display: none; }
  .left { width: 420px; }
}

/* Phones and narrow windows: lessons take the screen, the simulation opens over them. */
@media (max-width: 900px) {
  .sidebar { display: none; }
  .left { width: 100% !important; min-width: 0; border-right: 0; }
  .resizer { display: none; }
  .spark.simpane { display: none; position: fixed; inset: 0; z-index: 40; }
  .spark.simpane.show { display: flex; }
  #sim-close { display: inline-block; }
  .topbar { gap: 8px; padding: 0 10px; }
  .edition { display: none; }
}