/* Deliberately close to browser defaults: default serif, default buttons/links. */
body { margin: 0; background: #fff; color: #000; }

#layout { display: flex; align-items: flex-start; }

#sidebar {
  width: 21rem;
  flex: none;
  box-sizing: border-box;
  border-right: 1px solid #ccc;
  padding: 0.75rem 1rem 2rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  font-size: 0.92em;
}
#apptitle { font-weight: bold; margin: 0.25rem 0 0.5rem; }
#apptitle a { color: inherit; text-decoration: none; }
#progress-total { color: #555; margin: 0.25rem 0; }
#search { width: 100%; box-sizing: border-box; }
#nav-summary { display: none; }

#toc details { margin: 0.35rem 0; }
#toc summary { cursor: pointer; }
#toc .chapter > summary { font-weight: bold; }
#toc .seccount { color: #777; font-weight: normal; font-size: 0.9em; }
#toc ol { margin: 0.25rem 0 0.5rem; padding-left: 2.2rem; }
#toc li { margin: 0.1rem 0; }
#toc li.done::after { content: " \2713"; color: #2a7a2a; }
#toc li.current > a { font-weight: bold; }
#toc .secnotes { font-style: italic; }
#toc ol.results { list-style: none; padding-left: 0.25rem; }

#content {
  box-sizing: border-box;
  max-width: 50rem;
  min-width: 0;
  padding: 1.25rem 2rem 5rem;
  line-height: 1.45;
}

.pagenum { color: #888; font-size: 0.65em; font-weight: normal; margin-left: 0.9rem; white-space: nowrap; }
h2.ptitle { margin-bottom: 0.25rem; }
.crumb { color: #777; font-size: 0.85em; margin: 0 0 1rem; }

textarea.notes {
  width: 100%;
  box-sizing: border-box;
  min-height: 9rem;
  margin-top: 0.25rem;
}
.notes-label { color: #555; font-size: 0.9em; }
.controls { margin: 0.75rem 0 1rem; }
.controls label { margin-left: 1rem; }

.hintbox, .solution { border-top: 1px solid #ccc; padding-top: 0.5rem; margin-top: 1rem; }
.hintbox > p:first-child strong, .solution > p.solhead { margin-top: 0; }
aside.commentary {
  border-left: 3px solid #999;
  padding: 0.1rem 0 0.1rem 0.9rem;
  margin: 1.25rem 0 0;
  color: #222;
}
aside.commentary .cohead { color: #666; font-size: 0.85em; }

.prevnext { border-top: 1px solid #ccc; margin-top: 2.5rem; padding-top: 0.75rem; display: flex; justify-content: space-between; gap: 1rem; }

/* roadmap (homepage) */
.countdown { font-weight: bold; }
.day { border-top: 1px solid #ddd; padding: 0.3rem 0 0.55rem; }
.day h3 { margin: 0.35rem 0 0.1rem; font-size: 1em; }
.day.today { background: #fdfae4; }
.day.interview h3 { color: #a04000; }
.day.dragover { outline: 2px dashed #999; }
.card { display: flex; align-items: baseline; gap: 0.45rem; border: 1px solid #ccc; padding: 0.3rem 0.5rem; margin: 0.3rem 0; background: #fff; }
.card .cardtext { flex: 1; cursor: text; }
.card.done .cardtext { text-decoration: line-through; color: #888; }
.card.dragging { opacity: 0.5; }
.card button { font-size: 0.75em; }
.card input.cardedit { flex: 1; font: inherit; }
.day > input[type="text"] { width: 100%; box-sizing: border-box; font: inherit; margin: 0.3rem 0; }
.addbtn { font-size: 0.8em; }

table { border-collapse: collapse; margin: 0.75rem 0; }
td, th { border: 1px solid #999; padding: 0.25rem 0.6rem; }

.katex-display { overflow-x: auto; overflow-y: hidden; padding: 0.1rem 0; }
svg { max-width: 100%; height: auto; }

@media (max-width: 700px) {
  #layout { display: block; }
  #sidebar {
    width: auto;
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid #ccc;
  }
  #nav-summary { display: list-item; cursor: pointer; }
  #content { padding: 1rem 1rem 4rem; }
}