/* typography.css — grid + type system */

:root {
  font-size: 100%;
  --nav-w: 240px;
  --pad-top: 28px;
  --pad-left: 44px;
  --pad-left-mobile: 20px;
  --ink: #182429;
  --quiet: #59666a;
  --line: #dce1de;
  --bg: #fafaf7;
  --navbg: #f6f7f4;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

body.has-nav {
  display: grid !important;
  grid-template-columns: var(--nav-w) minmax(0, 1fr) !important;
  grid-template-rows: 100dvh !important;
  height: 100dvh !important;
  overflow: hidden !important;
}

#nav-root {
  grid-column: 1 !important;
  grid-row: 1 !important;
  height: 100dvh !important;
  overflow-y: auto !important;
  background: var(--navbg) !important;
  border-right: 1px solid var(--line) !important;
  box-sizing: border-box !important;
  width: var(--nav-w) !important;
  min-width: var(--nav-w) !important;
  max-width: var(--nav-w) !important;
}

#nav-root aside {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100dvh !important;
  padding: var(--pad-top) 16px 24px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

#nav-root .navbrand {
  display: block !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
  padding: 0 8px 22px !important;
  margin: 0 !important;
  text-decoration: none !important;
}

#nav-root .navlink {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--ink) !important;
  font: 600 14px/1.35 'IBM Plex Sans', system-ui !important;
  text-align: left !important;
  text-decoration: none !important;
  padding: 9px 12px !important;
  margin: 1px 0 !important;
  border-radius: 7px !important;
  cursor: pointer !important;
}
#nav-root .navlink:hover { background: #eaeeea !important; }
#nav-root .navlink.active { background: #e0ebe7 !important; color: #143d3b !important; }

#nav-root .navspacer { flex: 1 !important; min-height: 20px !important; }
#nav-root .navfooter {
  border-top: 1px solid var(--line) !important;
  padding-top: 12px !important;
  margin-top: 10px !important;
}

body.has-nav > .shell,
body.has-nav > .app-shell {
  display: contents !important;
}

body.has-nav main,
body.has-nav > main {
  grid-column: 2 !important;
  grid-row: 1 !important;
  height: 100dvh !important;
  overflow-y: auto !important;
  padding: var(--pad-top) var(--pad-left) 80px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: var(--bg) !important;
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
  display: block !important;
}

/* Page header */
.page-head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 20px !important;
  margin: 0 0 24px !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid var(--line) !important;
  min-height: 30px !important;
}
.page-head h1 {
  font: 600 22px/1.35 'IBM Plex Sans', system-ui !important;
  letter-spacing: -0.015em !important;
  color: var(--ink) !important;
  margin: 0 !important;
  padding: 0 !important;
}
.page-meta {
  font: 500 13px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace !important;
  color: var(--quiet) !important;
  white-space: nowrap !important;
}

/* Kill breadcrumbs and legacy subtitle */
.breadcrumbs,
.mono,
#subtitle,
.homehead { display: none !important; }

/* Body copy */
h2 { font-size: 20px; line-height: 1.3; margin: 0 0 12px; font-weight: 600; }
h3 { font-size: 17px; line-height: 1.35; margin: 0 0 10px; font-weight: 600; }
h4 { font-size: 15px; line-height: 1.4; margin: 0 0 10px; font-weight: 600; }
p { margin: 8px 0 14px; }

.notes-body,
.qcontent,
.solution,
.checkerprompt {
  font-size: 18px !important;
  line-height: 1.65 !important;
}
.notes-body { max-width: 68ch; }
.checkerprompt { max-width: 62ch; }

.topiccard strong { font-size: 17px !important; line-height: 1.35 !important; }
.topiccard p { font-size: 13px !important; }
.tab { font-size: 13px !important; }
.btn { font-size: 13.5px !important; }
.small, .muted, small { font-size: 13px !important; }
.caps, .sectiontag, .micro { font-size: 11px !important; }
input, select, textarea { font-size: 16px !important; }
.stat strong, .v { font-size: 24px !important; }
.stat span { font-size: 12px !important; }

/* Mobile */
@media (max-width: 860px) {
  body.has-nav {
    grid-template-columns: 1fr !important;
  }
  #nav-root {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 200 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.2s ease !important;
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    height: 100dvh !important;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.12) !important;
  }
  body.navopen #nav-root { transform: translateX(0) !important; }
  body.has-nav main,
  body.has-nav > main {
    grid-column: 1 !important;
    padding: 20px var(--pad-left-mobile) 60px !important;
  }
  .page-head h1 { font-size: 19px !important; }
  .notes-body,
  .qcontent,
  .solution,
  .checkerprompt {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
}