/* Legal Research Navigator - Main Stylesheet
   Author: David Kemp
   Design: Navy/gold brand via shared design tokens
   ADA Compliant: WCAG 2.1 AA

   Design tokens are loaded from the shared CDN:
   https://assets.davidkemp.ai/tokens.css
   This file contains only component and layout styles.

   Cohesion target: visual alignment with the Clinical AI
   Policy site (shared.css) while preserving content-specific
   components unique to this guide.
*/

/* ========================================
   Local Overrides & Aliases
   ======================================== */
:root {
  /* Layout — project-specific widths */
  --nav-width: 260px;
  --note-width: 300px;

  /* Transition shorthands */
  --transition-fast: var(--duration-fast) var(--ease-default);
  --transition-base: var(--duration-normal) var(--ease-default);

  /* Focus ring using brand accent */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-focus-ring) 50%, transparent);

  /* A11y override: promote --color-text-faint to neutral-600
     for WCAG 2.1 AA compliance (4.68:1 on white vs 3.22:1). */
  --color-text-faint: var(--color-neutral-600);
}

/* ========================================
   Reset & Base Styles
   ======================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  background-color: var(--color-surface-alt);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Skip link for accessibility — hidden until focused */
.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: var(--space-sm) var(--space-md);
  z-index: var(--z-toast);
  transform: translateY(-100%);
  transition: transform var(--transition-fast);
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.skip-link:focus {
  transform: translateY(0);
}

/* ========================================
   Typography
   (Aligned with Policy shared.css patterns)
   ======================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-primary);
  margin-bottom: var(--space-md);
}

h1 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  text-align: center;
  margin-bottom: var(--space-2);
}

/* h2: gold bar ABOVE (matching Policy pattern) */
h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  margin: var(--space-xl) 0 var(--space-sm);
  padding-top: 0;
  border-bottom: none;
  padding-bottom: 0;
}
h2::before {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  background: var(--color-accent);
  margin-bottom: var(--space-3);
}
h2:first-child { margin-top: 0; }
h2:first-child::before { display: none; }

/* Page-header h2 and callout h2 should NOT get the gold bar */
.page-header__title::before,
.callout__title::before,
.footer__heading::before {
  display: none;
}

h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-primary-hover);
  margin: var(--space-lg) 0 var(--space-3);
}

h4 {
  font-size: var(--text-xl);
  margin-top: var(--space-xl);
}

h5 {
  font-size: var(--text-lg);
  margin-top: var(--space-lg);
}

h6 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  margin-top: var(--space-lg);
}

p { margin-bottom: var(--space-4); }

/* Links */
a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-link-hover); }
a:focus {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* Lists */
ul, ol {
  margin: var(--space-xs) 0 var(--space-4) 22px;
}
li { margin-bottom: var(--space-2); }
li::marker { color: var(--color-primary); }

/* Blockquotes */
blockquote {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-lg);
  margin: var(--space-xl) 0;
  font-style: italic;
  color: var(--color-text-muted);
}

/* Code */
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background-color: var(--color-neutral-100);
  padding: 0.125em 0.375em;
  border-radius: var(--radius-sm);
}
pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background-color: var(--color-neutral-100);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin-bottom: var(--space-lg);
}
pre code {
  background: none;
  padding: 0;
}

/* ========================================
   Layout — Three-panel (nav | main | note gutter)
   Matches Policy's flex layout pattern.
   ======================================== */

.page {
  display: flex;
  min-height: 100vh;
  max-width: 1400px;
  margin: 0 auto;
}

/* Content area: holds main (+ note gutter via margin) */
.content-area {
  display: flex;
  flex: 1;
  min-height: 100vh;
  align-items: flex-start;
}

/* ========================================
   Left Navigation Rail
   Dark navy with gold accents — matches Policy.
   ======================================== */
.sidebar {
  position: sticky;
  top: 0;
  width: var(--nav-width);
  min-width: var(--nav-width);
  height: 100vh;
  overflow-y: auto;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: 28px 0 40px;
  z-index: 100;
  flex-shrink: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.25) transparent;
}
.sidebar::-webkit-scrollbar { width: 5px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 3px; }

/* Brand block at top of nav rail */
.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0 var(--space-md) var(--space-5);
  text-decoration: none;
  color: var(--color-text-inverse);
  border-bottom: 1px solid rgba(255,255,255,.12);
  margin-bottom: var(--space-3);
}
.nav-brand:hover { color: var(--color-text-inverse); }
.nav-brand:focus {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: -2px;
}

.nav-brand__logo {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  object-fit: contain;
}

.nav-brand__title {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent);
  line-height: var(--leading-tight);
}

.nav-brand__subtitle {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: rgba(255,255,255,.65);
  letter-spacing: var(--tracking-wide);
}

/* Nav section headings */
.nav__heading {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: rgba(255,255,255,.70);
  padding: var(--space-3) var(--space-md) var(--space-1);
  margin-bottom: 0;
  border-bottom: none;
}
/* Suppress the gold bar on nav headings */
.nav__heading::before { display: none; }

.nav__section {
  margin-bottom: var(--space-2);
}

.nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav__item { margin: 0; }

/* Nav links — matching Policy's gold-border pattern */
.nav__link {
  font-family: var(--font-ui);
  display: block;
  padding: 7px var(--space-md);
  color: rgba(255,255,255,.72);
  text-decoration: none;
  font-size: 13.5px;
  transition: all .15s;
  border-left: 3px solid transparent;
  border-radius: 0;
}
.nav__link:hover {
  color: var(--color-text-inverse);
  background: rgba(255,255,255,.07);
  border-left-color: var(--color-accent);
  box-shadow: none;
}
.nav__link:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: -2px;
  box-shadow: none;
}
.nav__link--active,
.nav__link[aria-current="page"] {
  color: var(--color-text-inverse);
  background: rgba(255,255,255,.07);
  border-left-color: var(--color-accent);
  font-weight: var(--weight-medium);
}

.nav__link--sub {
  padding-left: 38px;
  font-size: 12.5px;
}

/* Close button (mobile only) */
.sidebar__close { display: none; }

/* ========================================
   Hamburger Button
   Matches Policy's hamburger.
   ======================================== */
.hamburger {
  display: none !important;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-md);
  padding: 8px 10px;
  cursor: pointer;
  color: var(--color-text-inverse);
  align-items: center;
  justify-content: center;
}
.hamburger svg { width: 22px; height: 22px; }
.hamburger:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Nav overlay (mobile dim background) */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 99;
  transition: opacity .25s;
}
.nav-overlay.visible { display: block; }

/* ========================================
   Legacy header — hidden
   (Brand is now in the nav rail)
   ======================================== */
.header {
  display: none;
}

/* ========================================
   Main Content
   Card treatment — white surface on gray page
   with gold top border. Matches Policy.
   ======================================== */
.main {
  flex: 1;
  padding: var(--space-10) 56px var(--space-20);
  max-width: var(--width-content);
  position: relative;
  overflow-wrap: break-word;
  word-wrap: break-word;
  /* Card treatment */
  background: var(--color-surface);
  border-radius: 0 0 var(--card-radius) var(--card-radius);
  border-top: 3px solid var(--color-accent);
  box-shadow: var(--card-shadow);
}

.content {
  max-width: var(--width-content);
}

/* Page header */
.page-header {
  margin-bottom: var(--space-2xl);
}

.page-header__breadcrumb {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  margin-bottom: var(--space-sm);
}
.page-header__breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
}
.page-header__breadcrumb li { margin: 0; }
.page-header__breadcrumb li + li::before {
  content: "/";
  margin: 0 var(--space-2);
  color: var(--color-text-faint);
}
.page-header__breadcrumb a { color: var(--color-text-faint); }
.page-header__breadcrumb a:hover { color: var(--color-primary); }

.page-header__title {
  margin-top: 0;
  margin-bottom: var(--space-md);
  border-bottom: none;
  padding-bottom: 0;
}

.page-header__description {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* ========================================
   Cards & Boxes
   ======================================== */
.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.card--highlight {
  border-color: var(--color-primary);
  border-width: 2px;
}
.card__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-md);
  margin-top: 0;
}

/* ========================================
   Callout Boxes
   Info and Tip types become margin notes
   on wide screens. Warning and Error remain
   inline at all widths.
   ======================================== */
.callout {
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  margin: var(--space-xl) 0;
  border-left: 4px solid;
  box-shadow: var(--shadow-sm);
}
.callout--info {
  background-color: var(--color-info-100);
  border-color: var(--color-info-700);
}
.callout--warning {
  background-color: var(--color-warning-100);
  border-color: var(--color-warning-600);
}
.callout--success {
  background-color: var(--color-success-100);
  border-color: var(--color-success-600);
}
.callout--error {
  background-color: var(--color-error-100);
  border-color: var(--color-error-600);
}
.callout--tip {
  background-color: var(--color-accent-100);
  border-color: var(--color-accent);
}
.callout--example {
  background-color: var(--color-surface);
  border-color: var(--color-primary-300);
}
.callout__title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-sm);
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.callout__content p:last-child {
  margin-bottom: 0;
}

/* Wide screen: pull info/tip callouts into the right margin
   as "margin notes," creating a right-rail effect without
   needing a separate HTML aside. */
@media (min-width: 1300px) {
  .callout--info,
  .callout--tip {
    float: right;
    clear: right;
    width: var(--note-width);
    margin: 0 calc(-1 * var(--note-width) - var(--space-lg)) var(--space-md) var(--space-lg);
    padding: var(--space-sm);
    font-size: var(--text-sm);
    border-radius: var(--radius-md);
    box-shadow: none;
    border-left-width: 3px;
    background-color: var(--color-surface);
    opacity: 0.92;
  }
  .callout--info .callout__title,
  .callout--tip .callout__title {
    font-size: var(--text-xs);
    margin-bottom: var(--space-xs);
  }
  .callout--info .callout__content,
  .callout--tip .callout__content {
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
  }
}

/* ========================================
   Tables
   ======================================== */
.table-wrapper {
  overflow-x: auto;
  margin: var(--space-xl) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
thead {
  background-color: var(--color-primary);
}
th {
  font-family: var(--font-ui);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-weight: var(--weight-semibold);
  color: var(--color-text-inverse);
  font-size: var(--text-xs);
}
td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
tr:last-child td { border-bottom: none; }
tr:nth-child(even) td { background: var(--color-surface-alt); }

/* Comparison table: highlight first column in body rows only */
.comparison-table td:first-child {
  font-weight: var(--weight-semibold);
  background-color: var(--color-neutral-100);
}

/* ========================================
   Badges & Tags
   ======================================== */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125em 0.5em;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.badge--westlaw  { background-color: var(--color-error-100);   color: var(--color-error-700); }
.badge--lexis    { background-color: var(--color-primary-100); color: var(--color-primary); }
.badge--bloomberg { background-color: var(--color-success-100); color: var(--color-success-600); }
.badge--free     { background-color: var(--color-success-100); color: var(--color-success-600); }
.badge--ai       { background-color: rgba(147, 51, 234, 0.1); color: #7c3aed; }
.badge--new      { background-color: var(--color-accent-100, rgba(217, 164, 6, 0.15)); color: var(--color-accent-700, #92650a); }

/* ========================================
   Buttons
   ======================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-family: var(--font-ui);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-weight);
  text-decoration: none;
  border-radius: var(--btn-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.btn:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}
.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}
.btn--primary:hover {
  background-color: var(--color-primary-hover);
  color: var(--color-text-inverse);
}
.btn--secondary {
  background-color: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn--secondary:hover {
  background-color: var(--color-neutral-100);
  border-color: var(--color-border-strong);
}

/* ========================================
   Process Steps
   ======================================== */
.process { margin: var(--space-2xl) 0; }
.process__phase { margin-bottom: var(--space-2xl); }
.process__phase-title {
  font-size: var(--text-xl);
  color: var(--color-primary);
  margin-bottom: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.process__phase-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.process__steps { display: grid; gap: var(--space-lg); }
.process__step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--space-md);
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.process__step-number {
  width: 32px;
  height: 32px;
  background-color: var(--color-surface);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
}
.process__step-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-sm);
}
.process__step-content p:last-child { margin-bottom: 0; }

/* ========================================
   Accordion (Progressive Enhancement)
   ======================================== */
.accordion {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin: var(--space-xl) 0;
  box-shadow: var(--shadow-sm);
}
.accordion__item { border-bottom: 1px solid var(--color-border); }
.accordion__item:last-child { border-bottom: none; }
.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg);
  background: none;
  border: none;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}
.accordion__trigger:hover { background-color: var(--color-neutral-100); }
.accordion__trigger:focus { outline: none; box-shadow: var(--focus-ring); }
.accordion__icon {
  width: 20px;
  height: 20px;
  transition: transform var(--transition-fast);
}
.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(180deg); }
.accordion__content { padding: 0 var(--space-lg) var(--space-lg); }
.no-js .accordion__content { display: block !important; }
.no-js .accordion__trigger { pointer-events: none; }
.no-js .accordion__icon { display: none; }

/* ========================================
   Search (Progressive Enhancement)
   ======================================== */
.search { margin-bottom: var(--space-lg); }
.search__input {
  width: 100%;
  padding: var(--input-padding);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  background-color: var(--input-bg);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.search__input:focus {
  outline: none;
  border-color: var(--input-focus);
  box-shadow: var(--focus-ring);
}
.search__input::placeholder { color: var(--color-text-faint); }
.no-js .search { display: none; }

/* ========================================
   Table of Contents (On-page)
   ======================================== */
.toc {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin: var(--space-xl) 0;
  box-shadow: var(--shadow-sm);
}
.toc__title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-md);
  margin-top: 0;
}
.toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.toc__item { margin-bottom: var(--space-sm); }
.toc__link {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.toc__link:hover { color: var(--color-primary); }

/* ========================================
   Section wrapper (for copy buttons)
   ======================================== */
.section {
  position: relative;
  padding: var(--space-1) 0;
}
.section + .section { margin-top: var(--space-xs); }

/* Copy button */
.copy-btn {
  position: absolute; top: 0; right: -36px;
  background: none; border: none; cursor: pointer;
  opacity: 0; transition: opacity .15s;
  padding: 4px; color: var(--color-text-faint);
}
.section:hover .copy-btn { opacity: .55; }
.copy-btn:hover { opacity: 1 !important; color: var(--color-primary-hover); }
.copy-btn svg { width: 18px; height: 18px; }
.copy-btn.copied { color: var(--color-accent); }
.copy-btn:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Toast */
.toast {
  font-family: var(--font-ui);
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--color-primary); color: var(--color-text-inverse);
  padding: var(--space-3) var(--space-md); border-radius: var(--radius-md);
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  opacity: 0; transition: all .25s; z-index: var(--z-toast);
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Cross-reference links (matching Policy) */
a.xref {
  color: var(--color-primary-hover);
  text-decoration: none;
  border-bottom: 1px dashed var(--color-primary-hover);
  transition: color .15s;
}
a.xref:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}
a.xref:focus-visible {
  outline: 2px solid var(--color-primary-hover);
  outline-offset: 1px;
}

/* ========================================
   Footer
   ======================================== */
.footer {
  background-color: var(--color-primary-900);
  color: rgba(255, 255, 255, 0.85);
  border-top: 3px solid var(--color-accent);
  padding: var(--space-2xl) var(--space-lg);
  margin-top: var(--space-3xl);
}
.footer__inner {
  max-width: var(--width-container);
  margin: 0 auto;
  display: grid;
  gap: var(--space-xl);
}
@media (min-width: 768px) {
  .footer__inner { grid-template-columns: 2fr 1fr 1fr; }
}
.footer__brand {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-inverse);
  margin-bottom: var(--space-sm);
}
.footer__description {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.7);
}
.footer__heading {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}
.footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer__list li { margin-bottom: var(--space-sm); }
.footer__list a {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.7);
}
.footer__list a:hover { color: var(--color-accent); }
.footer__bottom {
  max-width: var(--width-container);
  margin: var(--space-xl) auto 0;
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.65);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-md);
}

/* ========================================
   Responsive — Mobile
   Matches Policy's mobile nav overlay.
   ======================================== */
@media (max-width: 860px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 0;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    transition: width .25s ease, padding .25s ease;
  }
  .sidebar.is-open {
    width: 260px;
    padding: 28px 0 40px;
  }

  .hamburger { display: flex !important; }

  .page { max-width: 100%; }
  .content-area { max-width: 100%; }

  .main {
    padding: var(--space-md) var(--space-sm) var(--space-16);
    max-width: 100%;
    overflow-x: hidden;
    border-radius: 0;
    box-shadow: none;
    border-top: 3px solid var(--color-accent);
  }

  .copy-btn { display: none; }
}

/* ========================================
   Utility Classes
   ======================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.text-center { text-align: center; }
.text-muted { color: var(--color-text-faint); }
.mb-0 { margin-bottom: 0; }
.mt-0 { margin-top: 0; }
.hidden { display: none; }

/* Mobile page title — shown near hamburger on small screens */
.mobile-page-title {
  display: none;
  position: fixed;
  top: 14px;
  left: 56px;
  z-index: 200;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100vw - 80px);
}
@media (max-width: 860px) {
  .mobile-page-title { display: block; }
}

/* Learning objectives callout */
.callout--objectives {
  background-color: var(--color-primary-50);
  border-color: var(--color-primary);
}
.callout--objectives .callout__content ol {
  margin-bottom: 0;
}
.callout--objectives .callout__content ol li:last-child {
  margin-bottom: 0;
}

/* Self-assessment section */
.self-check {
  background-color: var(--color-accent-50);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin: var(--space-xl) 0;
}
.self-check__title {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.self-check__list {
  list-style: decimal;
  margin: 0 0 0 22px;
  padding: 0;
}
.self-check__list li {
  margin-bottom: var(--space-sm);
}
.self-check__list li:last-child {
  margin-bottom: 0;
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
  .sidebar,
  .header,
  .footer,
  .search,
  .hamburger,
  .nav-overlay,
  .menu-toggle { display: none !important; }

  .main { padding: 0; }

  body {
    font-size: 12pt;
    color: var(--color-neutral-900);
    background: var(--color-neutral-0);
  }
  h1, h2, h3, h4, h5, h6 { color: var(--color-neutral-900); }
  a {
    color: var(--color-neutral-900);
    text-decoration: underline;
  }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }

  /* Print margin notes inline */
  .callout--info,
  .callout--tip {
    float: none !important;
    width: auto !important;
    margin: var(--space-sm) 0 !important;
  }
}

/* ========================================
   Reduced Motion
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========================================
   High Contrast Mode Support
   ======================================== */
@media (prefers-contrast: more) {
  :root {
    --color-text: var(--color-neutral-900);
    --color-text-muted: var(--color-neutral-800);
    --color-border: var(--color-neutral-900);
  }
  .callout,
  .card,
  .accordion { border-width: 2px; }
}

/* ========================================
   Research Cycle Diagram
   ======================================== */
.research-cycle {
  margin: var(--space-2xl) 0;
  padding: var(--space-xl);
  background-color: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.research-cycle__diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}
@media (min-width: 768px) {
  .research-cycle__diagram {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: var(--space-md);
  }
}
.research-cycle__phase {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-border);
  width: 240px;
  flex: 1 1 240px;
  max-width: 280px;
  min-height: 160px;
  position: relative;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.research-cycle__phase:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}
.research-cycle__phase--active {
  border-color: var(--color-primary);
  background-color: var(--color-primary-50);
}
.research-cycle__phase-number {
  width: 40px;
  height: 40px;
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  margin-bottom: var(--space-xs);
  flex-shrink: 0;
}
.research-cycle__phase-title {
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  margin-bottom: var(--space-xs);
  color: var(--color-text);
  line-height: var(--leading-tight);
}
.research-cycle__phase-steps {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  line-height: var(--leading-snug);
}
.research-cycle__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  position: relative;
  align-self: center;
}
.research-cycle__arrow::before {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background-color: var(--color-primary);
}
.research-cycle__arrow::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--color-primary);
  border-right: 2px solid var(--color-primary);
  transform: rotate(45deg);
  position: absolute;
  right: 8px;
}
@media (max-width: 767px) {
  .research-cycle__arrow {
    width: 100%;
    height: 30px;
  }
  .research-cycle__arrow::before {
    width: 2px;
    height: 16px;
  }
  .research-cycle__arrow::after {
    transform: rotate(135deg);
    right: auto;
    bottom: 4px;
  }
}
.research-cycle__return-wrapper {
  display: none;
  width: 100%;
  padding: 0 var(--space-lg);
  margin-top: var(--space-md);
}
@media (min-width: 768px) {
  .research-cycle__return-wrapper { display: block; }
}
.research-cycle__return-line {
  width: 100%;
  height: 24px;
  border-bottom: 2px dashed var(--color-text-faint);
  border-left: 2px dashed var(--color-text-faint);
  border-right: 2px dashed var(--color-text-faint);
  border-radius: 0 0 12px 12px;
  position: relative;
}
.research-cycle__return-arrowhead {
  position: absolute;
  left: -4px;
  top: -14px;
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  color: var(--color-text-faint);
}
.research-cycle__return-arrowhead::before {
  content: '^';
  display: block;
}
.research-cycle__caption {
  text-align: center;
  margin-top: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  font-style: italic;
}

/* ========================================
   AI Tool Comparison Visual
   ======================================== */
.ai-comparison {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin: var(--space-2xl) 0;
}
@media (min-width: 768px) {
  .ai-comparison { grid-template-columns: 1fr 1fr; }
}
.ai-comparison__card {
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 2px solid;
}
.ai-comparison__card--danger {
  border-color: var(--color-error-600);
  background-color: var(--color-error-100);
}
.ai-comparison__card--caution {
  border-color: var(--color-warning-600);
  background-color: var(--color-warning-100);
}
.ai-comparison__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}
.ai-comparison__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ai-comparison__card--danger .ai-comparison__icon { background-color: var(--color-error-600); color: var(--color-text-inverse); }
.ai-comparison__card--caution .ai-comparison__icon { background-color: var(--color-warning-600); color: var(--color-text-inverse); }
.ai-comparison__title {
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  color: var(--color-text);
  margin: 0;
}
.ai-comparison__subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  margin: 0;
}
.ai-comparison__examples {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
  font-style: italic;
}
.ai-comparison__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ai-comparison__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  font-size: var(--text-sm);
}
.ai-comparison__list li:last-child { margin-bottom: 0; }
.ai-comparison__indicator {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-bold);
}
.ai-comparison__card--danger .ai-comparison__indicator { color: var(--color-error-600); }
.ai-comparison__card--caution .ai-comparison__indicator { color: var(--color-warning-600); }
.ai-comparison__verdict {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
}
.ai-comparison__card--danger .ai-comparison__verdict { color: var(--color-error-600); }
.ai-comparison__card--caution .ai-comparison__verdict { color: var(--color-warning-600); }

/* ========================================
   Court Hierarchy Visualization
   ======================================== */
.court-hierarchy {
  margin: var(--space-2xl) 0;
  background-color: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}
.court-hierarchy__headers { display: none; }
@media (min-width: 700px) {
  .court-hierarchy__headers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    margin-bottom: var(--space-md);
  }
}
.court-hierarchy__system-title {
  text-align: center;
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  margin: 0;
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-primary);
}
.court-hierarchy__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}
.court-hierarchy__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  width: 100%;
  justify-items: center;
}
@media (min-width: 700px) {
  .court-hierarchy__row {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }
}
.court-hierarchy__court {
  background-color: var(--color-surface);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
  width: 100%;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media (min-width: 700px) {
  .court-hierarchy__row { align-items: stretch; }
  .court-hierarchy__court { max-width: none; }
}
.court-hierarchy__court:hover {
  background-color: var(--color-primary-50);
  box-shadow: var(--shadow-md);
}
.court-hierarchy__court-name {
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}
.court-hierarchy__court-desc {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin: 0;
}
.court-hierarchy__arrow-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  width: 100%;
  justify-items: center;
}
@media (min-width: 700px) {
  .court-hierarchy__arrow-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }
}
.court-hierarchy__arrow {
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs) 0;
}
.court-hierarchy__arrow svg { width: 24px; height: 24px; }
.court-hierarchy__binding-label {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-align: center;
  margin-top: var(--space-md);
}
.court-hierarchy__legend {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background-color: var(--color-neutral-100);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
.court-hierarchy__legend-title {
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-sm);
}
.court-hierarchy__legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}
.court-hierarchy__legend-item:last-child { margin-bottom: 0; }
.court-hierarchy__legend-arrow {
  color: var(--color-primary);
  flex-shrink: 0;
}