/* Build Your Own AI Team (BYU-Idaho) — design system (light theme)
   Built from DESIGN.md Section 7 tokens + v2 sidebar layout. No frameworks. */

:root {
  /* Color */
  --bg: #FFFFFF;
  --surface: #F4F6F8;
  --text: #1A1F26;
  --muted: #54606E;
  --accent: #0B5FB0;
  --accent-hover: #084A8A;
  --border: #D5DBE1;
  --success: #1E7A46;
  --code-bg: #F1F3F6;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
               "Liberation Mono", monospace;

  --fs-h1: 2rem;       /* 32px; 2.5rem @ >=768px */
  --fs-h2: 1.5rem;     /* 24px; 1.75rem @ >=768px */
  --fs-h3: 1.25rem;    /* 20px */
  --fs-body: 1.0625rem;/* 17px */
  --fs-small: 0.875rem;/* 14px */

  --lh-tight: 1.2;
  --lh-heading: 1.25;
  --lh-body: 1.6;

  --measure: 68ch;     /* prose line length */

  /* Spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Layout */
  --maxw: 72rem;       /* 1152px */
  --sidebar-w: 17rem;  /* 272px desktop sidebar */
  --topbar-h: 61px;    /* mobile top bar height: 44px toggle + 2*8px padding + 1px border */

  /* Radii */
  --radius: 8px;
  --radius-sm: 4px;

  /* v2 — Group A: The Basics (primary, deep blue) */
  --g-basics-base:   #0B5FB0;
  --g-basics-strong: #084A8A;
  --g-basics-tint:   #E3EEF9;
  --g-basics-text:   #0B3D73;

  /* v2 — Group B: Going Further (optional, warm amber) */
  --g-beyond-base:   #B45309;
  --g-beyond-strong: #8F4107;
  --g-beyond-tint:   #FCF1DF;
  --g-beyond-text:   #7A3D00;

  /* v2 — Group C: Reference (quiet, slate gray) */
  --g-ref-base:      #475569;
  --g-ref-strong:    #334155;
  --g-ref-tint:      #EEF1F5;
  --g-ref-text:      #334155;
}

@media (min-width: 768px) {
  :root { --fs-h1: 2.5rem; --fs-h2: 1.75rem; }
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

img { max-width: 100%; height: auto; }

/* ---------- Focus visibility ---------- */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* ---------- Skip link ---------- */
.skip-link {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 1000;
  background: var(--accent);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform 0.15s ease;
}
.skip-link:focus {
  transform: translateY(0);
}

/* ---------- Visually hidden ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Mobile top bar (toggle + title) ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--topbar-h);
  padding: var(--space-2) var(--space-4);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100; /* above the open drawer so its Close button stays tappable */
}
.topbar .site-title {
  display: inline-flex;
  flex-direction: column;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  line-height: 1.2;
}
.topbar .site-title__org {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.topbar .site-title:hover,
.topbar .site-title:focus-visible { color: var(--accent); }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  min-width: 44px;
  padding: var(--space-2) var(--space-3);
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--accent); }
.nav-toggle .icon { font-size: 1.1em; line-height: 1; }

/* ---------- Layout (sidebar + content) ---------- */
.layout {
  display: block;
}

/* ---------- Sidebar ---------- */
.sidebar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: var(--space-4);
}
.sidebar__title {
  display: none; /* shown on desktop */
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 var(--space-4);
}
.sidebar__title a {
  display: flex;
  flex-direction: column;
  color: var(--text);
  text-decoration: none;
}
.sidebar__title-org {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.sidebar__title a:hover,
.sidebar__title a:focus-visible { color: var(--accent); }

.navgroup { margin: 0; padding: 0; border: 0; }
.navgroup + .navgroup { margin-top: var(--space-5); }

.navgroup__title {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 0 var(--space-2);
  line-height: 1.3;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.navgroup--basics .navgroup__title {
  color: var(--g-basics-text);
  font-size: 1rem; /* Basics heading slightly larger */
}
.navgroup--beyond .navgroup__title { color: var(--g-beyond-text); }
.navgroup--ref    .navgroup__title { color: var(--g-ref-text); }

.navgroup__note {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.05em 0.55em;
  letter-spacing: 0;
}

.navgroup ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.navgroup a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  text-decoration: none;
  line-height: 1.3;
  border-left: 2px solid transparent;
}
/* Decorative square nav icons removed per design — hidden site-wide so all
   pages update at once. Meaningful "Soon" pills (.soon) are unaffected. */
.navgroup a .nav-icon { display: none; }
.navgroup a .soon {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.05em 0.5em;
  white-space: nowrap;
}

/* Group A — The Basics: strongest weight, filled accent bar */
.navgroup--basics a {
  color: var(--g-basics-text);
  background: var(--g-basics-tint);
  font-weight: 600;
  border-left: 2px solid transparent;
}
.navgroup--basics a:hover {
  background: #D2E4F6;
  border-left-color: var(--g-basics-base);
}
.navgroup--basics a[aria-current="page"] {
  background: var(--g-basics-base);
  color: #fff;
  font-weight: 700;
  border-left: 4px solid #fff;
}

/* Group B — Going Further: lighter, amber */
.navgroup--beyond a {
  color: var(--g-beyond-text);
  background: var(--g-beyond-tint);
  font-weight: 500;
  border-left: 2px solid transparent;
}
.navgroup--beyond a:hover {
  background: #F8E6C9;
  border-left-color: var(--g-beyond-base);
}
.navgroup--beyond a[aria-current="page"] {
  /* Unified active style: solid fill in group color (amber-strong for AA contrast) */
  background: var(--g-beyond-strong);
  color: #fff;
  font-weight: 700;
  border-left: 4px solid #fff;
}

/* Group C — Reference: quiet slate */
.navgroup--ref a {
  color: var(--g-ref-text);
  background: var(--g-ref-tint);
  font-weight: 500;
  border-left: 2px solid transparent;
}
.navgroup--ref a:hover {
  background: #E1E6EC;
  border-left-color: var(--g-ref-base);
}
.navgroup--ref a[aria-current="page"] {
  /* Unified active style: solid fill in group color */
  background: var(--g-ref-base);
  color: #fff;
  font-weight: 700;
  border-left: 4px solid #fff;
}

/* ---------- Mobile drawer behavior ---------- */
@media (max-width: 767.98px) {
  .sidebar {
    display: none;
  }
  /* Open drawer is anchored to the viewport (not document flow) so it appears
     wherever the user is currently scrolled. It fills the area below the
     sticky top bar and scrolls internally if the menu is long. */
  .sidebar.is-open {
    display: block;
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95; /* above page content, below the top bar (z-index 100) */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--surface);
    border-bottom: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  }
  /* Lock background scroll while the drawer is open. */
  body.drawer-open {
    overflow: hidden;
  }
}

/* ---------- Desktop sidebar (sticky) ---------- */
@media (min-width: 768px) {
  .topbar { display: none; }

  .layout {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    max-width: var(--maxw);
    margin-inline: auto;
  }
  .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    border-bottom: 0;
    border-right: 1px solid var(--border);
    display: block;
  }
  .sidebar__title { display: block; }
}

/* ---------- Content pane ---------- */
.content {
  display: block;
  padding: var(--space-4);
}
@media (min-width: 768px) {
  .content { padding: var(--space-6); }
}

.page-header {
  margin-top: var(--space-7);
  margin-bottom: var(--space-6);
}
.page-header h1 { margin: 0 0 var(--space-2); }
.page-header .deck {
  margin: 0;
  color: var(--muted);
  max-width: var(--measure);
}

.prose { max-width: var(--measure); }

h1 { font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-tight); }
h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-heading);
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
}
h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.3;
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

.prose p, .prose ul, .prose ol { max-width: var(--measure); }
.prose p { margin: 0 0 var(--space-4); }
.prose ul, .prose ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.prose li { margin-bottom: var(--space-2); }
.prose li > ul, .prose li > ol { margin-top: var(--space-2); margin-bottom: 0; }

/* Links in prose */
.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prose a:hover, .prose a:focus-visible {
  color: var(--accent-hover);
  text-decoration-thickness: 2px;
}

strong { font-weight: 700; }
em { font-style: italic; }

/* Headings with anchor IDs get scroll margin so sticky bar doesn't cover them */
[id] { scroll-margin-top: 4rem; }

/* ---------- Blockquote ---------- */
blockquote {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-sm);
  max-width: var(--measure);
}
blockquote p:last-child { margin-bottom: 0; }

/* ---------- Tables ---------- */
.prose table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 var(--space-5);
  font-size: var(--fs-small);
}
.prose th, .prose td {
  border: 1px solid var(--border);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  vertical-align: top;
}
.prose th { background: var(--surface); font-weight: 700; }

/* ---------- Inline code ---------- */
code {
  font-family: var(--font-mono);
  font-size: 0.95em;
}
:not(pre) > code {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
}

/* ---------- Code block + copy button ---------- */
.codeblock {
  position: relative;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  padding-top: calc(44px + var(--space-3)); /* room for button */
  margin: 0 0 var(--space-5);
  max-width: var(--measure);
}
.codeblock pre {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-x: auto; /* safety net for genuinely wide, unbreakable code */
}
.codeblock pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
}
.copy-btn {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  font-size: var(--fs-small);
  cursor: pointer;
}
.copy-btn:hover {
  background: #E7EBEF;
  border-color: var(--accent);
}
.copy-btn.is-copied {
  background: var(--success);
  color: #fff;
  border-color: var(--success);
}
.copy-btn .check { font-weight: 700; }

/* ---------- Callout / note box ---------- */
.callout {
  background: var(--surface);
  border-radius: var(--radius);
  border-left: 4px solid var(--accent);
  padding: var(--space-4);
  margin: 0 0 var(--space-4);
  max-width: var(--measure);
}
.callout p:first-child { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }
.callout--note { border-left-color: var(--accent); }
.callout--tip { border-left-color: var(--success); }
.callout--coming-soon {
  border-left-color: var(--muted);
  color: var(--muted);
}
.callout--coming-soon strong { color: var(--text); }

/* ---------- Coming-soon badge ---------- */
.badge {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.5em;
  margin-left: var(--space-2);
  white-space: nowrap;
}

/* ---------- Checklist ---------- */
.checklist {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  max-width: var(--measure);
}
.checklist li { margin: 0; }
.checklist label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-3) 0;
  cursor: pointer;
}
.checklist input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  accent-color: var(--accent);
  cursor: pointer;
}
.checklist input[type="checkbox"]:checked + .checklist-text {
  text-decoration: line-through;
  color: var(--muted);
}

/* ---------- Buttons / CTA ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn--primary {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
}
.btn--primary:hover, .btn--primary:focus-visible {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
}

/* Buttons used inside .prose must not inherit prose-link styling
   (the `.prose a` rule would otherwise tint the label and underline it). */
.prose a.btn { text-decoration: none; }
.prose a.btn--primary,
.prose a.btn--primary:hover,
.prose a.btn--primary:focus-visible {
  color: #fff;
}

/* ---------- FAQ accordion ---------- */
.faq {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: var(--space-3);
  background: var(--bg);
  max-width: var(--measure);
}
.faq > summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-4);
  min-height: 44px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-radius: var(--radius);
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::before {
  content: "\25B8"; /* ▸ */
  display: inline-block;
  flex: 0 0 auto;
  color: var(--accent);
  transition: transform 0.15s ease;
}
.faq[open] > summary::before { transform: rotate(90deg); }
.faq[open] > summary { border-bottom: 1px solid var(--border); }
.faq-body {
  padding: var(--space-4);
  color: var(--text);
}
.faq-body > :first-child { margin-top: 0; }
.faq-body > :last-child { margin-bottom: 0; }

/* ---------- Glossary terms ---------- */
.glossary-term {
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: var(--space-6) var(--space-4);
  margin-top: var(--space-8);
  color: var(--muted);
}
.site-footer .footer-inner {
  max-width: var(--measure);
  margin-inline: auto;
  margin-left: 0;
}
.site-footer a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-footer a:hover, .site-footer a:focus-visible { color: var(--accent-hover); }
.site-footer p { margin: 0 0 var(--space-2); }
.site-footer p:last-child { margin-bottom: 0; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Print ---------- */
@media print {
  .skip-link,
  .nav-toggle,
  .topbar,
  .copy-btn { display: none !important; }

  .sidebar { display: none !important; } /* nav is screen wayfinding; omit in print */

  .layout { display: block; }
  .content { padding: 0; }

  body { color: #000; background: #fff; font-size: 12pt; }
  a { color: #000; }

  /* Expand FAQ answers so printouts are complete regardless of open state */
  details.faq > .faq-body { display: block !important; }
  details.faq > summary::before { content: ""; }

  .codeblock {
    padding-top: var(--space-4);
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  .codeblock pre { white-space: pre-wrap; }
}