/* IOAI Guide — layout, sidebar and levels. Colors, type sizes, the top bar and the footer come
   from sota.css, shared with the SOTA site and the AI Checklist. Components live in components.css. */

:root {
  /* Syllabus categories */
  --cat-theory: #5F6070;
  --cat-practice: #1F48C7;
  --cat-both: #B31B1B;

  /* Levels, dark enough for white text on a filled button */
  --lvl-bronze: #9A5B2B;
  --lvl-silver: #5E6E80;
  --lvl-gold: #967000;
  --lvl-platinum: #5B3D81;

  --sidebar-w: 288px;
  --toc-w: 216px;
  --measure: 720px;
}

html { scroll-padding-top: calc(var(--topbar-h) + 24px); }

/* ---------- top bar: the guide's own parts (the bar itself is in sota.css) ---------- */

.menu-toggle {
  display: none;
  flex: none;
  align-items: center;
  height: var(--control-h);
  padding: 3px 12px 0; /* centres the letters by eye, like .box in sota.css */
  font: inherit;
  line-height: 1;
  color: var(--ink);
  background: none;
  border: 1px solid var(--hairline);
  cursor: pointer;
}
.menu-toggle[aria-expanded="true"] { border-color: var(--ink); }

.topbar-tools .search {
  flex: 0 1 440px;
  min-width: 0;
}

/* ---------- three-column layout ---------- */

.layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w);
  max-width: 1480px;
  margin-inline: auto;
}

.main {
  min-width: 0;
  padding: 48px clamp(20px, 5vw, 72px) 112px;
}

.article {
  max-width: var(--measure);
  margin-inline: auto;
}

/* ---------- sidebar ---------- */

.sidebar {
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 16px 48px 24px;
  border-right: 1px solid var(--hairline);
  background: var(--paper);
}

.side-version {
  font-size: 13.5px;
  color: var(--graphite);
  margin-bottom: 12px;
}

.side-part {
  border-top: 1px solid var(--hairline);
  padding-block: 8px 12px;
}

.side-part > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1.5em minmax(0, 1fr) 1em;
  align-items: baseline;
  gap: 4px;
  padding-block: 6px;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
}
.side-part > summary::-webkit-details-marker { display: none; }
.side-part > summary::after {
  content: "+";
  color: var(--graphite);
  font-weight: 400;
  text-align: right;
}
.side-part[open] > summary::after { content: "−"; }

.side-topic {
  display: flex;
  gap: .6em;
  margin: 14px 0 4px;
  font-size: 14px;
  font-variant-caps: all-small-caps;
  letter-spacing: .06em;
  color: var(--graphite);
}

.side-modules {
  list-style: none;
  padding: 0;
}

.side-modules a {
  display: grid;
  grid-template-columns: 8px 2.4em minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
  padding: 4px 6px 4px 6px;
  font-size: 14.5px;
  line-height: 1.3;
  color: var(--ink);
}
.side-modules a:hover {
  background: var(--plate);
  text-decoration: none;
}
.side-modules a[aria-current="page"] {
  background: var(--plate);
  box-shadow: inset 2px 0 0 var(--red);
}
.side-modules .num {
  font-size: 12.5px;
  color: var(--graphite);
}

/* Progress: an empty circle, half-filled while reading, filled when done */
.status-dot {
  align-self: start;
  margin-top: .38em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
}
.is-reading .status-dot {
  border-color: var(--ink);
  background: linear-gradient(90deg, var(--ink) 50%, transparent 50%);
}
.is-done .status-dot {
  border-color: var(--ink);
  background: var(--ink);
}

/* Category colors, for the chip on module pages */
.cat-theory { color: var(--cat-theory); }
.cat-practice { color: var(--cat-practice); }
.cat-both { color: var(--cat-both); }

/* Levels. Each level class sets --lvl, which tags, chips and filter buttons draw with. */
.lvl-bronze { --lvl: var(--lvl-bronze); }
.lvl-silver { --lvl: var(--lvl-silver); }
.lvl-gold { --lvl: var(--lvl-gold); }
.lvl-platinum { --lvl: var(--lvl-platinum); }
.lvl-all { --lvl: var(--ink); }

/* B / S / G / P letter next to each module */
.lvl {
  align-self: start;
  margin-top: 1px;
  min-width: 1.5em;
  padding: 0 3px;
  border: 1px solid currentColor;
  color: var(--lvl);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}

/* Level filter at the top of the sidebar: outlined buttons, the chosen one filled */
.level-filter {
  position: sticky;
  top: -24px; /* the sidebar's top padding, so the bar sits flush against the top bar */
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -24px -16px 12px -24px;
  padding: 16px 16px 12px 24px;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}
.level-filter-label {
  margin-right: 6px;
  font-size: 14px;
  font-variant-caps: all-small-caps;
  letter-spacing: .06em;
  color: var(--graphite);
}
.lvl-btn {
  width: 30px;
  height: 26px;
  padding: 0;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
  color: var(--lvl);
  background: var(--paper);
  border: 1.5px solid var(--lvl);
  cursor: pointer;
}
.lvl-btn:hover { background: color-mix(in srgb, var(--lvl) 10%, var(--paper)); }
:root:not([data-level]) .lvl-btn.lvl-all,
:root[data-level="bronze"] .lvl-btn.lvl-bronze,
:root[data-level="silver"] .lvl-btn.lvl-silver,
:root[data-level="gold"] .lvl-btn.lvl-gold,
:root[data-level="platinum"] .lvl-btn.lvl-platinum {
  color: var(--paper);
  background: var(--lvl);
}

/* With a level chosen, keep the unlevelled introduction and hide other nonmatching modules. */
:root[data-level="bronze"] .side-modules > li:not([data-level="bronze"]):not([data-always-visible]),
:root[data-level="bronze"] :is(.side-group, .side-part):not(:has(li[data-level="bronze"], li[data-always-visible])),
:root[data-level="silver"] .side-modules > li:not([data-level="silver"]):not([data-always-visible]),
:root[data-level="silver"] :is(.side-group, .side-part):not(:has(li[data-level="silver"], li[data-always-visible])),
:root[data-level="gold"] .side-modules > li:not([data-level="gold"]):not([data-always-visible]),
:root[data-level="gold"] :is(.side-group, .side-part):not(:has(li[data-level="gold"], li[data-always-visible])),
:root[data-level="platinum"] .side-modules > li:not([data-level="platinum"]):not([data-always-visible]),
:root[data-level="platinum"] :is(.side-group, .side-part):not(:has(li[data-level="platinum"], li[data-always-visible])) {
  display: none;
}

.side-links {
  list-style: none;
  display: grid;
  gap: 6px;
  margin-top: 8px;
  padding: 16px 0 0 6px;
  border-top: 1px solid var(--hairline);
  font-size: 15px;
}

/* ---------- "On this page" rail ---------- */

.toc {
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  padding: 48px 20px 40px 0;
}
.toc:has(.toc-list:empty) { visibility: hidden; }

.toc-title {
  margin: 0 0 8px 13px;
  font-size: 14px;
  font-variant-caps: all-small-caps;
  letter-spacing: .08em;
  color: var(--graphite);
}

.toc-list {
  list-style: none;
  padding: 0;
  border-left: 1px solid var(--hairline);
  font-size: 13.5px;
  line-height: 1.35;
}
.toc-list a {
  display: block;
  margin-left: -1px;
  padding: 4px 0 4px 12px;
  border-left: 2px solid transparent;
  color: var(--graphite);
}
.toc-list .toc-sub a {
  padding-left: 24px;
  font-size: 12.5px;
}
.toc-list a:hover { color: var(--ink); text-decoration: none; }
.toc-list a.is-active {
  color: var(--ink);
  border-left-color: var(--red);
}

.scrim {
  position: fixed;
  inset: var(--topbar-h) 0 0 0;
  z-index: 20;
  background: rgb(22 22 29 / .28);
}

/* ---------- narrower screens ---------- */

@media (max-width: 1200px) {
  .layout { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .toc { display: none; }
}

@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .menu-toggle { display: inline-flex; }
  .sidebar {
    position: fixed;
    top: var(--topbar-h);
    bottom: 0;
    left: 0;
    z-index: 30;
    width: min(88vw, 340px);
    height: auto;
    transform: translateX(-100%);
    transition: transform .2s ease;
  }
  body.menu-open { overflow: hidden; }
  body.menu-open .sidebar {
    transform: none;
    box-shadow: 16px 0 40px rgb(22 22 29 / .14);
  }
  .main { padding-top: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}