/* Companion site for "A Systematic Approach to Parallel Algorithms" */

:root {
  --fg: #222;
  --muted: #666;
  --link: #0a4d8f;
  --link-hover: #06335f;
  --bg: #fdfdfa;
  --panel: #ffffff;
  --border: #d8d3c3;
  --yellow-bg: #fffacd;     /* matches the book's mstexamplestyle */
  --yellow-border: #be961e;
  --code-bg: #f5f3ed;
  --forbidden: #ffe0a3;
  --fixed: #c8e6c9;
}

* { box-sizing: border-box; }

html { font-size: 17px; }
body {
  margin: 0;
  font-family: "Crimson Text", Georgia, "Times New Roman", serif;
  color: var(--fg);
  background: var(--bg);
  line-height: 1.55;
}

header.site {
  background: #1a2b3c;
  color: #ffffff;
  padding: 1.2rem 2rem;
  position: relative;
}
header.site a { color: #ffffff; text-decoration: none; }
header.site h1 { font-size: 1.4rem; margin: 0; font-weight: 600; }
header.site p { margin: 0.3rem 0 0; opacity: 0.85; font-size: 0.95rem; }
header.site p.byline { font-style: italic; opacity: 0.85; }

/* Search box in the site header.  Floats to the right of the title. */
.site-search {
  position: absolute;
  top: 1.2rem;
  right: 2rem;
  display: flex;
  align-items: center;
}
.site-search input {
  width: 16rem;
  padding: 0.45rem 0.7rem;
  font-size: 0.95rem;
  border: 1px solid #3a516a;
  background: #243a52;
  color: #ffffff;
  border-radius: 4px 0 0 4px;
  outline: none;
}
.site-search input::placeholder { color: rgba(255,255,255,0.55); }
.site-search input:focus { border-color: #6aa8d8; background: #2c4663; }
.site-search-shortcut {
  display: inline-block;
  padding: 0.45rem 0.55rem;
  font-size: 0.78rem;
  background: #3a516a;
  color: rgba(255,255,255,0.75);
  border: 1px solid #3a516a;
  border-left: none;
  border-radius: 0 4px 4px 0;
  font-family: var(--mono, monospace);
}
.site-search-results {
  position: absolute;
  top: calc(100% + 0.3rem);
  right: 0;
  width: 30rem;
  max-width: calc(100vw - 4rem);
  max-height: 28rem;
  overflow-y: auto;
  background: #ffffff;
  color: var(--ink, #2a3a4f);
  border: 1px solid var(--border, #d8d3c5);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  z-index: 100;
  padding: 0.25rem 0;
}
.site-search-results .r {
  display: block;
  padding: 0.55rem 0.85rem;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid #efece2;
}
.site-search-results .r:last-child { border-bottom: none; }
.site-search-results .r:hover,
.site-search-results .r.active {
  background: #f5f3ed;
  color: inherit;
}
.site-search-results .r-name {
  font-weight: 600;
  font-size: 0.96rem;
  color: #1a2b3c;
}
.site-search-results .r-where {
  font-size: 0.82rem;
  color: #6a7a8a;
  margin-top: 0.1rem;
}
.site-search-results .r-where em { font-style: italic; }
.site-search-results .r-snip {
  font-size: 0.85rem;
  color: #5a6a7a;
  margin-top: 0.25rem;
  line-height: 1.35;
}
.site-search-results mark {
  background: #fff3a0;
  color: inherit;
  padding: 0 1px;
}
.site-search-empty {
  padding: 1rem;
  text-align: center;
  color: #6a7a8a;
  font-size: 0.9rem;
}

@media (max-width: 700px) {
  .site-search { position: static; margin-top: 0.6rem; }
  .site-search input { width: 100%; }
}

nav.crumbs {
  background: #efece2;
  padding: 0.5rem 2rem;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--border);
}
nav.crumbs a { color: var(--link); text-decoration: none; }
nav.crumbs a:hover { text-decoration: underline; }

main {
  max-width: 760px;
  margin: 2rem auto;
  padding: 0 1.5rem;
}

/* Two-column layout: left side (chapter list + per-page TOC) | main. */
.page {
  max-width: 1180px;
  margin: 2rem auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}
.page main {
  margin: 0;
  padding: 0;
  max-width: none;
  min-width: 0;
}
/* Wrapper for the two left-side asides; sticky so both nav and TOC scroll
   together as a single unit and never overlap. */
.page-side {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  border-right: 2px solid var(--border);
  padding-right: 0.9rem;
}
aside.page-nav,
aside.toc {
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--fg);
}
aside.toc {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
}
aside.page-nav h3,
aside.toc h3 {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.6rem;
}
aside.page-nav h4,
aside.toc h4 {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0.9rem 0 0.3rem;
  color: #14304b;
}
aside.page-nav h4:first-of-type,
aside.toc h4:first-of-type { margin-top: 0; }
aside.page-nav ul,
aside.toc ul {
  list-style: none;
  padding: 0;
  margin: 0 0 0.6rem;
}
aside.page-nav li,
aside.toc li { margin: 0.2rem 0; }
aside.page-nav a,
aside.toc a {
  display: block;
  padding: 1px 0;
  color: var(--link);
  text-decoration: none;
}
aside.page-nav a:hover,
aside.toc a:hover { text-decoration: underline; }
aside.page-nav a[aria-current="page"] {
  color: var(--fg);
  font-weight: 600;
  background: var(--code-bg);
  border-left: 3px solid var(--yellow-border);
  padding: 1px 6px;
  margin-left: -9px;
  border-radius: 0 3px 3px 0;
}

aside.toc p.companion-link {
  margin-top: 1rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--muted);
}
aside.toc p.companion-link a { display: inline; padding: 0; }

aside.page-nav .ch-name {
  display: block;
  padding: 1px 0;
  color: var(--fg);
}
aside.page-nav ul.sub {
  list-style: none;
  margin: 0.05rem 0 0.25rem 0.9rem;
  padding-left: 0.5rem;
  border-left: 1px solid var(--border);
  font-size: 0.92rem;
}
aside.page-nav ul.sub li { margin: 0.1rem 0; }
aside.page-nav ul.sub a {
  color: var(--muted);
  padding: 0;
}
aside.page-nav ul.sub a:hover { color: var(--link); }
aside.page-nav ul.sub a[aria-current="page"] {
  color: var(--fg);
  font-weight: 600;
  background: var(--code-bg);
  border-left: 3px solid var(--yellow-border);
  padding: 1px 6px;
  margin-left: -9px;
  border-radius: 0 3px 3px 0;
}

p.page-toggle {
  margin: 0 0 1.2rem 0;
  padding: 0.5rem 0.8rem;
  background: var(--code-bg);
  border-left: 3px solid var(--yellow-border);
  border-radius: 0 3px 3px 0;
  font-size: 0.95rem;
}
p.page-toggle strong { margin-right: 0.4rem; }

/* Per-algorithm complexity badge.  Sits between the algorithm
   description and its demo / listing as a small framed note. */
p.complexity {
  margin: 0.4rem 0 0.9rem 0;
  padding: 0.45rem 0.75rem;
  background: var(--code-bg);
  border-left: 3px solid #4a90c2;
  border-radius: 0 3px 3px 0;
  font-size: 0.92rem;
  color: #2b3a4a;
}
p.complexity strong { margin-right: 0.3rem; }

/* On narrow screens, stack everything in a single column. */
@media (max-width: 900px) {
  .page {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
  .page-side {
    position: static;
    max-height: none;
    overflow-y: visible;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding-right: 0;
    padding-bottom: 0.6rem;
  }
  aside.toc {
    margin-top: 0.8rem;
    padding-top: 0.6rem;
  }
}

/* Smooth scrolling so anchor jumps don't slam to the top edge. */
html { scroll-behavior: smooth; scroll-padding-top: 0.6rem; }

h1.chapter { font-size: 2rem; margin: 0 0 0.3rem; font-weight: 600; color: #14304b; }
h1.chapter + p.subtitle { color: var(--muted); margin: 0 0 2rem; font-style: italic; }

h2 {
  font-size: 1.4rem;
  margin: 2.2rem 0 0.8rem;
  font-weight: 600;
  color: #14304b;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.3rem;
}
h3 { font-size: 1.1rem; margin: 1.5rem 0 0.5rem; font-weight: 600; }

p { margin: 0.7rem 0; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

code, pre, .mono { font-family: "JetBrains Mono", "Source Code Pro", Consolas, monospace; }
code { background: var(--code-bg); padding: 1px 5px; border-radius: 3px; font-size: 0.9em; }
pre {
  background: var(--code-bg);
  padding: 0.8rem 1rem;
  overflow-x: auto;
  border-left: 3px solid var(--border);
  font-size: 0.9rem;
  line-height: 1.5;
}

ul.chapter-list { list-style: none; padding: 0; }
ul.chapter-list li {
  margin: 0.8rem 0;
  padding: 1rem 1.2rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
}
ul.chapter-list li a.title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--link);
}
ul.chapter-list li p { color: var(--muted); margin: 0.4rem 0 0; font-size: 0.95rem; }
ul.chapter-list li p.sub-links { font-size: 0.88rem; margin-top: 0.4rem; }
ul.chapter-list li p.sub-links a { color: var(--link); text-decoration: none; }
ul.chapter-list li p.sub-links a:hover { text-decoration: underline; }

/* Yellow example box, matches the book */
.example {
  background: var(--yellow-bg);
  border: 1px solid var(--yellow-border);
  border-radius: 4px;
  padding: 0.9rem 1.2rem;
  margin: 1.4rem 0;
}
.example .label {
  font-weight: 600;
  color: #5a4612;
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Demo widget */
.demo {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.2rem 1.4rem;
  margin: 1.5rem 0;
  font-family: "JetBrains Mono", monospace;
}
.demo h4 {
  margin: 0 0 0.7rem;
  font-family: "Crimson Text", Georgia, serif;
  font-size: 1.05rem;
  color: #14304b;
}
.demo .inputs {
  background: #f6efd6;
  border: 1px dashed var(--yellow-border);
  border-radius: 3px;
  padding: 0.7rem 0.9rem;
  margin: 0.4rem 0 0.8rem;
}
.demo .input-row { display: flex; align-items: flex-start; gap: 0.7rem; margin: 0.25rem 0; }
.demo .input-row label {
  flex: 0 0 auto;
  font-family: "Crimson Text", Georgia, serif;
  font-size: 0.95rem;
  padding-top: 4px;
  min-width: 9em;
}
.demo .input-row input,
.demo .input-row textarea {
  flex: 1 1 auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.85rem;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 3px;
}
.demo .input-row textarea { resize: vertical; min-height: 4.5em; }
.demo .inputs button.primary { margin-top: 0.4rem; background: #b8941e; }
.demo .inputs button.primary:hover { background: #8a6f12; }

.demo .controls { margin: 0.6rem 0; }
.demo button {
  background: var(--link);
  color: white;
  border: 0;
  padding: 0.4rem 0.9rem;
  border-radius: 3px;
  font-size: 0.9rem;
  cursor: pointer;
  margin-right: 0.4rem;
}
.demo button:hover { background: var(--link-hover); }
.demo button:disabled { background: #bbb; cursor: not-allowed; }

.demo pre.program {
  background: #1f2632;
  color: #e7eaf0;
  border-left: 3px solid #6ea8d8;
  padding: 0.7rem 0.95rem;
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 0.4rem 0 0.8rem;
  border-radius: 3px;
  overflow-x: auto;
}

/* "Plain text: LL · Java" pointers under each program panel. */
.demo .src-links {
  margin: 0.2rem 0 0;
  font-family: "Crimson Text", Georgia, serif;
  font-size: 0.85rem;
  color: var(--muted);
}
.demo .src-links a {
  color: var(--link);
  text-decoration: none;
}
.demo .src-links a:hover { text-decoration: underline; }

.demo .state {
  background: var(--code-bg);
  padding: 0.6rem 0.8rem;
  border-radius: 3px;
  font-size: 0.9rem;
  margin: 0.4rem 0;
}

.demo .vec { display: inline-flex; gap: 0.25rem; flex-wrap: wrap; align-items: flex-start; }
.demo .vec .col { display: inline-flex; flex-direction: column; align-items: stretch; }
.demo .vec .cell {
  display: block;
  padding: 4px 9px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 3px;
  min-width: 1.5em;
  text-align: center;
  font-weight: 600;
  transition: background 0.25s, border-color 0.25s;
}
.demo .vec .cell.forbidden { background: var(--forbidden); border-color: #d49a3a; }
.demo .vec .cell.fixed     { background: var(--fixed);     border-color: #69a36f; }
.demo .vec .cell.active    { outline: 2px solid var(--link); outline-offset: 1px; }

.demo .vec .idx { font-size: 0.7rem; color: var(--muted); margin-top: 2px; text-align: center; }

.demo .log {
  background: #1f2632;
  color: #e7eaf0;
  font-size: 0.82rem;
  padding: 0.7rem 0.9rem;
  border-radius: 3px;
  margin-top: 0.6rem;
  max-height: 12em;
  overflow-y: auto;
}
.demo .log:empty { display: none; }
.demo .log .line { white-space: pre-wrap; }

/* Graph visualisation for chapter 5 demos. */
.demo .graph-pane {
  margin: 0.7rem 0 0.2rem;
  display: flex;
  justify-content: center;
}
.demo .graph-svg {
  max-width: 100%;
  height: auto;
  font-family: "Crimson Text", Georgia, serif;
}
.demo .graph-svg .v-circle {
  fill: #f5f3ed;
  stroke: #888;
  stroke-width: 1.5;
  transition: fill 0.2s, stroke 0.2s;
}
.demo .graph-svg .v-circle.source     { fill: #cfe5ff; stroke: #4c8bd1; }
.demo .graph-svg .v-circle.reached    { fill: #c8e6c9; stroke: #5fa066; }
.demo .graph-svg .v-circle.fixed      { fill: #c8e6c9; stroke: #5fa066; }
.demo .graph-svg .v-circle.unreached  { fill: #f0eee6; stroke: #b8b3a3; }
.demo .graph-svg .v-circle.unfixed    { fill: #f0eee6; stroke: #b8b3a3; }
.demo .graph-svg .v-circle.forbidden  { fill: #ffe0a3; stroke: #d49a3a; }
.demo .graph-svg .v-circle.active     { stroke: #0a4d8f; stroke-width: 3; }
.demo .graph-svg .v-label {
  font-size: 13px;
  fill: #14304b;
  text-anchor: middle;
  dominant-baseline: middle;
  font-weight: 600;
}
.demo .graph-svg .v-name {
  font-size: 11px;
  fill: var(--muted);
  text-anchor: middle;
}
.demo .graph-svg .edge {
  fill: none;
  stroke: #999;
  stroke-width: 1.5;
}
.demo .graph-svg .edge.parent { stroke: #4c8bd1; stroke-width: 2.2; }

/* Tables for stable marriage preferences */
.pref-tables {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin: 0.5rem 0;
}
table.pref {
  border-collapse: collapse;
  font-size: 0.9rem;
}
table.pref th, table.pref td {
  border: 1px solid var(--border);
  padding: 0.3rem 0.7rem;
  text-align: center;
}
table.pref th { font-weight: 600; }
table.pref-men th { background: #dce7f5; color: #1a3a5c; }
table.pref-men td.label { background: #eaf1fa; font-weight: 600; color: #1a3a5c; }
table.pref-women th { background: #f5e0e8; color: #5c1a2e; }
table.pref-women td.label { background: #faeaef; font-weight: 600; color: #5c1a2e; }

/* "LLP predicates for this chapter" summary table at the bottom of each
   LLP chapter page. Three columns: problem, what G[i] represents, predicate. */
table.predicates {
  border-collapse: collapse;
  font-size: 0.94rem;
  margin: 0.6rem 0 1.2rem;
  width: 100%;
}
table.predicates th,
table.predicates td {
  border: 1px solid var(--border);
  padding: 0.4rem 0.7rem;
  vertical-align: top;
  text-align: left;
}
table.predicates thead th {
  background: #efece2;
  font-weight: 600;
  color: #14304b;
}
table.predicates td:first-child {
  font-weight: 600;
  white-space: nowrap;
  color: #14304b;
}

footer {
  margin: 4rem 0 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Locked-chapter styling for public site (Ch 9-25) */
.page-nav li.locked { color: #888; list-style: none; }
.page-nav li.locked::after { content: " \1F512"; font-size: 0.85em; opacity: 0.6; }
.chapter-list li.locked .title { color: #888; text-decoration: none; cursor: default; }
.chapter-list li.locked .title::after { content: " \1F512"; font-size: 0.85em; opacity: 0.6; }
.chapter-list li.locked p { color: #777; }
.access-note {
  margin: 1em 0 1.5em 0; padding: 0.8em 1em;
  border-left: 4px solid #b58900; background: #fdf6e3;
  color: #444; font-size: 0.95em; border-radius: 4px;
}
.access-note strong { color: #b58900; }