/* part52.dev
   System fonts only. No external dependencies. */

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

:root {
  /* ── Fonts — system only, no external loading ── */
  --font-serif: Georgia, 'Sitka Text', Cambria, serif;
  --font-sans: system-ui, -apple-system, 'Segoe UI', 'Liberation Sans', Helvetica, Arial, sans-serif;
  --font-mono: Consolas, 'Liberation Mono', Menlo, 'DejaVu Sans Mono', monospace;

  /* ── Layout ── */
  --max-width: 1120px;

  /* ── Page colors ── */
  --page-bg: #FAFAF8;
  --text-primary: #1A1A18;
  --text-secondary: #374151;
  --text-muted: #6B7280;
  --text-dimmed: #9CA3AF;
  --border-light: #E5E7EB;
  --border-medium: #D1D5DB;
  --card-bg: #FFFFFF;
  --surface-subtle: #F9FAFB;

  /* ── Header ── */
  --header-dark: #0A1628;
  --header-border: #1E3A5F;
  --hero-start: #0F1D32;
  --hero-end: #162844;
  --hero-start-archived: #1A1A2E;
  --hero-end-archived: #2D2D3F;
  --header-text: #F8FAFC;
  --header-text-secondary: #CBD5E1;
  --header-text-muted: #94A3B8;
  --header-text-dim: #64748B;

  /* ── Blue accent ── */
  --blue-primary: #3B82F6;
  --blue-dark: #1E40AF;
  --blue-darker: #3730A3;
  --blue-bg: #EFF6FF;
  --blue-bg-medium: #DBEAFE;
  --blue-bg-deep: #E0E7FF;
  --blue-bg-callout: #F0F4FF;
  --blue-border: #BFDBFE;
  --blue-border-dark: #93C5FD;

  /* ── Change-type badges ── */
  --badge-reserved-bg: #FEF3C7;
  --badge-reserved-text: #92400E;
  --badge-reserved-border: #FCD34D;
  --badge-modified-bg: #DBEAFE;
  --badge-modified-text: #1E40AF;
  --badge-modified-border: #93C5FD;
  --badge-replaced-bg: #E0E7FF;
  --badge-replaced-text: #3730A3;
  --badge-replaced-border: #A5B4FC;
  --badge-removed-bg: #FEE2E2;
  --badge-removed-text: #991B1B;
  --badge-removed-border: #FCA5A5;

  /* ── Deviation status badges ── */
  --badge-active-bg: rgba(34, 197, 94, 0.15);
  --badge-active-text: #4ADE80;
  --badge-active-border: rgba(34, 197, 94, 0.3);
  --badge-archived-bg: #F1F5F9;
  --badge-archived-text: #64748B;
  --badge-archived-border: #CBD5E1;
  --badge-rescinded-bg: #FEF2F2;
  --badge-rescinded-text: #991B1B;
  --badge-rescinded-border: #FCA5A5;
  --badge-superseded-bg: #FFF7ED;
  --badge-superseded-text: #92400E;
  --badge-superseded-border: #FDE68A;

  /* ── Category-type badges ── */
  --badge-provision-bg: #F1F5F9;
  --badge-provision-text: #475569;
  --badge-provision-border: #CBD5E1;
  --badge-clause-bg: #F5F5F4;
  --badge-clause-text: #57534E;
  --badge-clause-border: #D6D3D1;

  /* ── Diff ── */
  --diff-removed-header-bg: #FFF5F5;
  --diff-removed-header-text: #991B1B;
  --diff-removed-bg: #FEF2F2;
  --diff-removed-text: #7F1D1D;
  --diff-removed-bar: #EF4444;
  --diff-removed-strike: #FECACA;
  --diff-added-header-bg: #F0FDF4;
  --diff-added-header-text: #166534;
  --diff-added-bg: #F0FDF4;
  --diff-added-text: #14532D;
  --diff-added-bar: #22C55E;
  --diff-unchanged-bg: #FAFAFA;
  --diff-unchanged-text: #4B5563;

  /* ── Callout ── */
  --callout-info-bg: #F0F4FF;
  --callout-info-border: #3B82F6;
  --callout-info-label: #1E40AF;
  --callout-info-text: #1E3A5F;
  --callout-warning-bg: #FFF7ED;
  --callout-warning-border: #F59E0B;
  --callout-warning-label: #92400E;
  --callout-warning-text: #78350F;
  --callout-sam-bg: #FFFBEB;
  --callout-sam-label: #92400E;
  --callout-sam-text: #78350F;
  --callout-archive-bg: #F8FAFC;
  --callout-archive-border: #94A3B8;
  --callout-archive-label: #475569;
  --callout-archive-text: #64748B;
}


/* ══════════════════════════════════════════════
   COMMUNITY DISCLAIMER BANNER
   Warm gray, distinct from .gov blue banners.
   ══════════════════════════════════════════════ */

.community-banner {
  background-color: #F5F5F0;
  border-bottom: 1px solid #D4D4C8;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
  color: #5C5C52;
}

.community-banner-bar {
  padding: 6px 0;
}

.community-banner-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.community-banner-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.community-banner-icon {
  color: #7C7C6F;
  flex-shrink: 0;
}

.community-banner-text {
  color: #5C5C52;
}

.community-banner-separator {
  margin: 0 2px;
  color: #9C9C8E;
}

.community-banner-text strong {
  color: #3D3D35;
  font-weight: 600;
}

.community-banner-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: #5C5C52;
  padding: 2px 4px;
  border-radius: 3px;
  transition: color 0.15s;
}

.community-banner-toggle:hover {
  color: #3D3D35;
}

.community-banner-chevron {
  transition: transform 0.2s;
}

.community-banner-toggle[aria-expanded="true"] .community-banner-chevron {
  transform: rotate(180deg);
}

.community-banner-details {
  border-top: 1px solid #D4D4C8;
  padding: 16px 0;
  background-color: #EDEDEA;
}

.community-banner-details[hidden] {
  display: none;
}

.community-banner-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.community-banner-column strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: #3D3D35;
  margin-bottom: 4px;
}

.community-banner-column p {
  font-family: var(--font-sans);
  font-size: 12px;
  color: #5C5C52;
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 600px) {
  .community-banner-columns {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .community-banner-separator {
    display: none;
  }

  .community-banner-text strong {
    display: block;
    margin-top: 2px;
  }
}


/* ══════════════════════════════════════════════
   BASE TYPOGRAPHY
   ══════════════════════════════════════════════ */

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

body {
  font-family: var(--font-serif);
  color: var(--text-primary);
  background: var(--page-bg);
  margin: 0;
  padding: 0;
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  margin: 0;
}

a {
  color: var(--blue-primary);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}


/* ══════════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════════ */

.page-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}


/* ══════════════════════════════════════════════
   TOP BAR
   ══════════════════════════════════════════════ */

.top-bar {
  background: var(--header-dark);
  border-bottom: 3px solid var(--header-border);
  padding: 10px 0;
}

.top-bar-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top-bar-brand {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--header-text);
  text-decoration: none;
}
.top-bar-brand:hover {
  text-decoration: none;
  opacity: 0.9;
}

.top-bar-secondary {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: normal;
  color: var(--header-text-muted);
}

.top-bar-nav {
  display: flex;
  gap: 16px;
  align-items: center;
}

.top-bar-nav a {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--header-text-muted);
  text-decoration: none;
}
.top-bar-nav a:hover {
  color: var(--header-text);
  text-decoration: none;
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown > a {
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 160px;
  background: #0F1D32;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 14px 0 6px;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

/* Invisible bridge between nav link and dropdown to maintain hover */
.nav-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 8px;
  display: none;
}

.nav-dropdown:hover::after {
  display: block;
}

.nav-dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content a {
  display: block;
  padding: 6px 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--header-text-muted);
  text-decoration: none;
  white-space: nowrap;
}

.dropdown-content a:hover {
  color: var(--header-text);
  background: rgba(255,255,255,0.05);
}


/* ══════════════════════════════════════════════
   HERO SECTION
   ══════════════════════════════════════════════ */

.hero {
  background: linear-gradient(to bottom, var(--hero-start), var(--hero-end));
  padding: 32px 0 0;
}

.hero.hero-archived {
  background: linear-gradient(to bottom, var(--hero-start-archived), var(--hero-end-archived));
}

.hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.hero-category {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.hero-category-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--header-text-muted);
}

.hero h1 {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--header-text);
  margin: 0 0 4px;
}

.hero-subtitle {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: normal;
  color: var(--header-text-secondary);
  margin: 0 0 24px;
}

/* Metadata grid */
.hero-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  margin-bottom: 24px;
}

.hero-meta-item {
  background: rgba(255, 255, 255, 0.05);
  padding: 12px 16px;
}

.hero-meta-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--header-text-dim);
  margin-bottom: 4px;
}

.hero-meta-value {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--header-text);
}

/* Tab bar */
.hero-tabs {
  display: flex;
  gap: 0;
  margin-top: 8px;
}

.hero-tab {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--header-text-dim);
  padding: 10px 20px;
  cursor: pointer;
  border: none;
  background: transparent;
  border-radius: 8px 8px 0 0;
  transition: color 0.15s;
}
.hero-tab:hover {
  color: var(--header-text-muted);
}
.hero-tab.active {
  font-weight: 600;
  color: var(--text-primary);
  background: var(--page-bg);
}


/* ══════════════════════════════════════════════
   CONTENT AREA
   ══════════════════════════════════════════════ */

.content {
  background: var(--page-bg);
  padding: 32px 0 64px;
}

.content-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Tab panels */
.tab-panel {
  display: none;
}
.tab-panel.active {
  display: block;
}

/* Section headings */
.content h2 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 16px;
}

.content h3 {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 12px;
}

/* Body prose */
.prose {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: normal;
  line-height: 1.7;
  color: var(--text-secondary);
}


/* ══════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════ */

.site-footer {
  border-top: 1px solid var(--border-light);
  background: var(--surface-subtle);
  padding: 20px 0;
}

.site-footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-muted);
}

.site-footer-inner a {
  color: var(--text-muted);
  text-decoration: underline;
}

.site-footer-inner p {
  margin: 4px 0;
}


/* ══════════════════════════════════════════════
   BADGES — Change Type
   (indicate WHAT HAPPENED to a provision/clause)
   ══════════════════════════════════════════════ */

.badge-change {
  display: inline-block;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 4px;
  border: 1px solid;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge-reserved {
  background: var(--badge-reserved-bg);
  color: var(--badge-reserved-text);
  border-color: var(--badge-reserved-border);
}

.badge-modified {
  background: var(--badge-modified-bg);
  color: var(--badge-modified-text);
  border-color: var(--badge-modified-border);
}

.badge-replaced {
  background: var(--badge-replaced-bg);
  color: var(--badge-replaced-text);
  border-color: var(--badge-replaced-border);
}

.badge-removed {
  background: var(--badge-removed-bg);
  color: var(--badge-removed-text);
  border-color: var(--badge-removed-border);
}


/* ══════════════════════════════════════════════
   BADGES — Deviation Status
   ══════════════════════════════════════════════ */

.badge-status {
  display: inline-block;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 4px;
  border: 1px solid;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge-status-active {
  background: var(--badge-active-bg);
  color: var(--badge-active-text);
  border-color: var(--badge-active-border);
}

.badge-status-archived {
  background: var(--badge-archived-bg);
  color: var(--badge-archived-text);
  border-color: var(--badge-archived-border);
}

.badge-status-rescinded {
  background: var(--badge-rescinded-bg);
  color: var(--badge-rescinded-text);
  border-color: var(--badge-rescinded-border);
}

.badge-status-superseded {
  background: var(--badge-superseded-bg);
  color: var(--badge-superseded-text);
  border-color: var(--badge-superseded-border);
}


/* ══════════════════════════════════════════════
   BADGES — Category Type
   (indicate WHAT SOMETHING IS: Provision or Clause)
   ══════════════════════════════════════════════ */

.badge-category {
  display: inline-block;
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  border-radius: 3px;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge-provision {
  background: var(--badge-provision-bg);
  color: var(--badge-provision-text);
  border: 1px solid var(--badge-provision-border);
}

.badge-clause {
  background: var(--badge-clause-bg);
  color: var(--badge-clause-text);
  border: 1px solid var(--badge-clause-border);
}


/* ══════════════════════════════════════════════
   CALLOUT BOXES
   ══════════════════════════════════════════════ */

.callout {
  border-left: 4px solid;
  border-radius: 0 6px 6px 0;
  padding: 16px 20px;
  margin: 16px 0;
}

.callout-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.callout-body {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.6;
}

/* Authority / Info callout */
.callout-info {
  background: var(--callout-info-bg);
  border-left-color: var(--callout-info-border);
}
.callout-info .callout-label {
  color: var(--callout-info-label);
}
.callout-info .callout-body {
  color: var(--callout-info-text);
}

/* Warning / Revoked callout */
.callout-warning {
  background: var(--callout-warning-bg);
  border-left-color: var(--callout-warning-border);
}
.callout-warning .callout-label {
  color: var(--callout-warning-label);
}
.callout-warning .callout-body {
  color: var(--callout-warning-text);
}

/* SAM Note callout */
.callout-sam {
  background: var(--callout-sam-bg);
  border-left: none;
  border: 1px solid #FDE68A;
  border-radius: 6px;
}
.callout-sam .callout-label {
  color: var(--callout-sam-label);
}
.callout-sam .callout-body {
  color: var(--callout-sam-text);
}

/* Archive Notice callout */
.callout-archive {
  background: var(--callout-archive-bg);
  border-left-color: var(--callout-archive-border);
}
.callout-archive .callout-label {
  color: var(--callout-archive-label);
}
.callout-archive .callout-body {
  color: var(--callout-archive-text);
}


/* ══════════════════════════════════════════════
   CLAUSE LIST ROW
   ══════════════════════════════════════════════ */

.clause-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.clause-row {
  display: grid;
  grid-template-columns: 140px 1fr 180px auto;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-top: none;
}

.clause-row:first-child {
  border-top: 1px solid var(--border-light);
  border-radius: 8px 8px 0 0;
}

.clause-row:last-child {
  border-radius: 0 0 8px 8px;
}

.clause-row:only-child {
  border-top: 1px solid var(--border-light);
  border-radius: 8px;
}

.clause-row-id {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--blue-dark);
}
.clause-row-id a {
  color: var(--blue-dark);
}

.clause-row-title {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--text-secondary);
}

.clause-row-action {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--text-muted);
}


/* ══════════════════════════════════════════════
   NUMBERED ACTION ITEMS
   ══════════════════════════════════════════════ */

.action-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 12px 0;
}

.action-number {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--blue-bg-deep);
  color: var(--blue-darker);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-text {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
}


/* ══════════════════════════════════════════════
   SIDEBAR CARD
   ══════════════════════════════════════════════ */

.sidebar-card {
  background: var(--card-bg);
  border-radius: 8px;
  border: 1px solid var(--border-light);
  overflow: hidden;
  margin-bottom: 16px;
}

.sidebar-card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
  background: var(--surface-subtle);
}

.sidebar-card-header h3 {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.sidebar-card-body {
  padding: 16px 20px;
}


/* ══════════════════════════════════════════════
   DOCUMENT LINK BUTTON (in sidebar)
   ══════════════════════════════════════════════ */

.doc-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface-subtle);
  border-radius: 6px;
  border: 1px solid var(--border-light);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--blue-dark);
  text-decoration: none;
  margin-bottom: 8px;
}
.doc-link:hover {
  background: var(--blue-bg);
  border-color: var(--blue-border);
  text-decoration: none;
}
.doc-link:last-child {
  margin-bottom: 0;
}

.doc-link svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.doc-link-archive {
  color: var(--text-muted);
}


/* ══════════════════════════════════════════════
   DIFF VIEW
   ══════════════════════════════════════════════ */

/* Context header bar */
.diff-context-header {
  padding: 12px 16px;
  background: var(--blue-bg-callout);
  border-radius: 8px 8px 0 0;
  border: 1px solid var(--blue-border);
  border-bottom: none;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--blue-dark);
}

/* Column headers */
.diff-columns-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.diff-column-original {
  background: var(--diff-removed-header-bg);
  padding: 10px 16px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--diff-removed-header-text);
  border: 1px solid var(--border-medium);
  border-top: none;
}

.diff-column-deviation {
  background: var(--diff-added-header-bg);
  padding: 10px 16px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--diff-added-header-text);
  border: 1px solid var(--border-medium);
  border-top: none;
  border-left: none;
}

/* Diff grid */
.diff-grid {
  border: 1px solid var(--border-medium);
  border-top: none;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

/* Diff row — paragraph level */
.diff-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.diff-row + .diff-row {
  border-top: 1px solid var(--border-medium);
}

.diff-cell {
  padding: 12px 16px;
}

.diff-cell-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--text-dimmed);
  margin-bottom: 4px;
}

.diff-cell-text {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.65;
}

/* Changed rows */
.diff-row-changed .diff-cell-original {
  background: var(--diff-removed-bg);
  border-left: 3px solid var(--diff-removed-bar);
}
.diff-row-changed .diff-cell-original .diff-cell-text {
  color: var(--diff-removed-text);
  text-decoration: line-through;
  text-decoration-color: var(--diff-removed-strike);
}

.diff-row-changed .diff-cell-deviation {
  background: var(--diff-added-bg);
  border-left: 3px solid var(--diff-added-bar);
}
.diff-row-changed .diff-cell-deviation .diff-cell-text {
  color: var(--diff-added-text);
  font-weight: bold;
}

/* Unchanged rows */
.diff-row-unchanged .diff-cell {
  background: var(--diff-unchanged-bg);
}
.diff-row-unchanged .diff-cell-text {
  color: var(--diff-unchanged-text);
}

/* Divider between left and right cells */
.diff-cell-original {
  border-right: 1px solid var(--border-medium);
}

/* Legend */
.diff-legend {
  display: flex;
  gap: 20px;
  padding: 12px 0;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-muted);
}

.diff-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.diff-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.diff-legend-swatch-removed {
  background: var(--diff-removed-bg);
  border: 1px solid var(--diff-removed-bar);
}

.diff-legend-swatch-added {
  background: var(--diff-added-bg);
  border: 1px solid var(--diff-added-bar);
}

.diff-legend-swatch-unchanged {
  background: var(--diff-unchanged-bg);
  border: 1px solid var(--border-medium);
}

/* Change explanation card */
.diff-explanation {
  margin-top: 16px;
  padding: 16px 20px;
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: 8px;
}

.diff-explanation h4 {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.diff-explanation p {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

/* Context toggle */
.diff-context-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-muted);
}

.diff-context-toggle input[type="checkbox"] {
  margin: 0;
}


/* ══════════════════════════════════════════════
   TWO-COLUMN LAYOUT (content + sidebar)
   ══════════════════════════════════════════════ */

.content-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  align-items: start;
}

.content-main {
  min-width: 0;
}

.content-sidebar {
  min-width: 0;
}


/* ══════════════════════════════════════════════
   CLAUSE ID REFERENCES
   ══════════════════════════════════════════════ */

.clause-ref {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--blue-dark);
}


/* ══════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--blue-border);
  background: var(--blue-bg);
  color: var(--blue-dark);
  cursor: pointer;
  text-decoration: none;
}
.btn:hover {
  background: var(--blue-bg-medium);
  text-decoration: none;
}


/* ══════════════════════════════════════════════
   METADATA LABELS (uppercase sans)
   ══════════════════════════════════════════════ */

.meta-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dimmed);
}

.meta-value {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}


/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */

@media (max-width: 860px) {
  .content-layout {
    grid-template-columns: 1fr;
  }

  .clause-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .hero h1 {
    font-size: 28px;
  }

  .hero-meta {
    grid-template-columns: 1fr;
  }

  .diff-row {
    grid-template-columns: 1fr;
  }

  .diff-columns-header {
    grid-template-columns: 1fr;
  }

  .diff-column-deviation {
    border-left: 1px solid var(--border-medium);
  }
}

@media (max-width: 480px) {
  .top-bar-nav {
    display: none;
  }

  .hero h1 {
    font-size: 24px;
  }

  .hero-tabs {
    overflow-x: auto;
  }
}


/* ══════════════════════════════════════════════
   TABLES (general purpose)
   ══════════════════════════════════════════════ */

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-family: var(--font-serif);
  font-size: 14px;
}

.data-table th,
.data-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light);
}

.data-table th {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border-medium);
}

.data-table tbody tr:hover {
  background: var(--surface-subtle);
}

.data-table a {
  color: var(--blue-dark);
}

/* Stats table variant */
.stats-table td:last-child {
  font-family: var(--font-mono);
  font-weight: 600;
  text-align: right;
}


/* ══════════════════════════════════════════════
   FORMS (clause checker, inputs)
   ══════════════════════════════════════════════ */

.form-group {
  margin: 16px 0;
}

.form-group label {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.form-group textarea,
.form-group input[type="text"] {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border-medium);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text-primary);
  resize: vertical;
}

.form-group textarea:focus,
.form-group input[type="text"]:focus {
  outline: none;
  border-color: var(--blue-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-actions {
  display: flex;
  gap: 8px;
  margin: 12px 0;
}

.btn-secondary {
  background: var(--surface-subtle);
  color: var(--text-secondary);
  border-color: var(--border-medium);
}
.btn-secondary:hover {
  background: var(--border-light);
}

.status-message {
  padding: 10px 14px;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 13px;
  margin: 12px 0;
}

.status-info {
  background: var(--blue-bg-callout);
  color: var(--blue-dark);
  border: 1px solid var(--blue-border);
}

.status-error {
  background: var(--badge-removed-bg);
  color: var(--badge-removed-text);
  border: 1px solid var(--badge-removed-border);
}

.status-success {
  background: var(--diff-added-bg);
  color: var(--diff-added-text);
  border: 1px solid var(--diff-added-bar);
}


/* ══════════════════════════════════════════════
   PAGE HEADER (non-hero pages)
   ══════════════════════════════════════════════ */

.page-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
}

.page-header h1 {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.page-header p {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--text-muted);
  margin: 0;
}


/* ══════════════════════════════════════════════
   TIMELINE / CHANGE ENTRIES
   ══════════════════════════════════════════════ */

.timeline {
  list-style: none;
  padding: 0;
  margin: 16px 0;
}

.timeline li {
  padding: 10px 0 10px 16px;
  border-left: 2px solid var(--border-light);
  margin-left: 8px;
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--text-secondary);
}

.timeline li strong {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}

.change-icon {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}


/* ══════════════════════════════════════════════
   DETAILS / EXPANDABLE SECTIONS
   ══════════════════════════════════════════════ */

details {
  margin: 12px 0;
}

summary {
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--blue-dark);
}
summary:hover {
  text-decoration: underline;
}

pre.clause-text {
  background: var(--surface-subtle);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-x: auto;
  color: var(--text-secondary);
}

/* ── Prescription tab ── */

.prescription-section {
  margin-bottom: 20px;
}

.prescription-ref {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--blue-primary);
  margin-bottom: 8px;
}

.prescription-text {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
  padding-left: 16px;
  border-left: 2px solid var(--border-light);
  white-space: pre-wrap;
}

.dfars-supplement {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}

.applicability-summary {
  margin-top: 24px;
}

.applicability-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 13px;
}

.applicability-table td {
  padding: 6px 12px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: top;
}

.applicability-table td:first-child {
  font-weight: 600;
  color: var(--text-primary);
  width: 40%;
}

.applicability-table td:last-child {
  color: var(--text-secondary);
}

.prescription-notice {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-dimmed);
  margin-top: 16px;
  padding: 8px 12px;
  background: var(--surface-subtle);
  border-radius: 4px;
}

pre.diff-text {
  background: var(--surface-subtle);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-x: auto;
}


/* ══════════════════════════════════════════════
   SOURCE BADGES (change digest)
   ══════════════════════════════════════════════ */

.source-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid;
  white-space: nowrap;
}

.source-far { background: #E0E7FF; color: #3730A3; border-color: #A5B4FC; }
.source-dfars { background: #DBEAFE; color: #1E40AF; border-color: #93C5FD; }
.source-daffars { background: #F0FDF4; color: #166534; border-color: #BBF7D0; }
.source-pgi { background: #FFF7ED; color: #9A3412; border-color: #FED7AA; }
.source-deviation { background: #FEF3C7; color: #92400E; border-color: #FCD34D; }
.source-rfo { background: #FEF3C7; color: #92400E; border-color: #FCD34D; }
.source-companion { background: #F5F3FF; color: #5B21B6; border-color: #C4B5FD; }

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 12px;
}

.filter-chip input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
}


/* ══════════════════════════════════════════════
   SECTION CARDS (companion, PGI, RFO)
   ══════════════════════════════════════════════ */

.section-card {
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 12px 0;
}

.section-card h3 {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px;
}

.section-card h3 a {
  color: var(--blue-dark);
}

.section-card p {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--text-muted);
  margin: 4px 0;
}

.section-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.section-list .section-card {
  border-radius: 0;
  border-top: none;
  margin: 0;
}

.section-list .section-card:first-child {
  border-top: 1px solid var(--border-light);
  border-radius: 8px 8px 0 0;
}

.section-list .section-card:last-child {
  border-radius: 0 0 8px 8px;
}

.section-list .section-card:only-child {
  border-top: 1px solid var(--border-light);
  border-radius: 8px;
}


/* ══════════════════════════════════════════════
   COPY FEEDBACK / RESULTS SUMMARY
   ══════════════════════════════════════════════ */

.copy-feedback {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--diff-added-text);
}

.results-summary {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 8px;
}


/* ══════════════════════════════════════════════
   VERSION HISTORY TIMELINE
   ══════════════════════════════════════════════ */

.history-timeline {
  position: relative;
  padding-left: 24px;
  margin: 16px 0;
}

.history-timeline::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--border-light);
}

.history-entry {
  position: relative;
  padding: 8px 0 16px;
}

.history-entry::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border-medium);
  border: 2px solid var(--page-bg);
}

.history-entry.substantive::before {
  background: var(--blue-primary);
}

.history-entry-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.history-date-label {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--blue-dark);
}

.history-amendment-date {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-muted);
}

.badge-substantive {
  display: inline-block;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 4px;
  background: var(--blue-bg);
  color: var(--blue-dark);
  border: 1px solid var(--blue-border);
}

.badge-current {
  display: inline-block;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 4px;
  background: rgba(34, 197, 94, 0.15);
  color: #4ADE80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.history-view-btn {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--blue-primary);
  background: var(--blue-bg);
  border: 1px solid var(--blue-border);
  border-radius: 6px;
  padding: 4px 12px;
  cursor: pointer;
}
.history-view-btn:hover {
  background: var(--blue-bg-medium);
}

.history-earliest-note {
  font-family: var(--font-serif);
  font-size: 13px;
  font-style: italic;
  color: var(--text-dimmed);
  margin-top: 4px;
}

.history-diff-panel {
  display: none;
  margin: 16px 0 24px 0;
  border-left: 3px solid var(--blue-primary);
  padding-left: 20px;
}


/* ══════════════════════════════════════════════
   AI ASSIST (copy-to-clipboard for LLM context)
   ══════════════════════════════════════════════ */

.ai-assist {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}

.ai-assist-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dimmed);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.ai-assist-description {
  font-family: var(--font-serif);
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 8px;
}

.ai-assist-item {
  margin-bottom: 6px;
}

.ai-assist-copy {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  transition: all 0.15s;
  width: 100%;
  text-align: left;
}

.ai-assist-copy:hover {
  color: var(--blue-dark);
  border-color: var(--blue-border);
  background: var(--blue-bg);
}

.ai-assist-copy.copied {
  color: #166534;
  border-color: #86EFAC;
  background: #F0FDF4;
}


/* ══════════════════════════════════════════════
   PRINT
   ══════════════════════════════════════════════ */

@media print {
  .top-bar, .hero-tabs, .site-footer { display: none; }
  .hero { background: #fff; }
  .hero h1, .hero-subtitle { color: #000; }
  .content { padding: 0; }
  .content-layout { grid-template-columns: 1fr; }
  a { color: var(--text-primary); }
  .badge-change, .badge-status, .badge-category { border: 1px solid #999; }
}


/* ══════════════════════════════════════════════
   FAR PARTS GRID AND RFO BADGES
   ══════════════════════════════════════════════ */

.parts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}

.part-tile {
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
  border-radius: 6px;
  text-decoration: none;
  transition: transform 0.1s;
}

.part-tile:hover {
  transform: translateY(-1px);
}

.part-tile.rfo-overhauled {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
}

.part-tile.rfo-pending {
  background: var(--surface-subtle);
  border: 1px solid var(--border-light);
}

.part-number {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
}

.part-tile.rfo-overhauled .part-number { color: #166534; }
.part-tile.rfo-pending .part-number { color: var(--text-dimmed); }

.part-title {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.3;
}

.part-date {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #15803D;
  margin-top: 4px;
}

/* ── Regulatory Stack ── */

.stack-layer {
  border: 1px solid var(--border-light);
  border-radius: 6px;
  margin-bottom: 8px;
  overflow: hidden;
}

.stack-layer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  background: var(--surface-subtle);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  list-style: none;
}

.stack-layer-header::-webkit-details-marker {
  display: none;
}

.stack-layer-body {
  padding: 16px;
  border-top: 1px solid var(--border-light);
}


.badge-rfo-implemented {
  background-color: #DCFCE7;
  color: #166534;
  border: 1px solid #BBF7D0;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 4px;
}

.badge-rfo-pending {
  background-color: var(--surface-subtle);
  color: var(--text-dimmed);
  border: 1px solid var(--border-light);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 4px;
}

/* ── RFO and DAFFARS callouts on clause pages ── */

.rfo-clause-callout {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 6px;
  padding: 14px 18px;
  margin-bottom: 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: #166534;
}

.rfo-clause-callout strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
}

.rfo-clause-callout p {
  margin: 0 0 6px;
  line-height: 1.5;
  color: #15803D;
}

.rfo-clause-callout a {
  font-weight: 600;
  font-size: 12px;
}

.daffars-transition-callout {
  background: #FFF7ED;
  border: 1px solid #FED7AA;
  border-radius: 6px;
  padding: 14px 18px;
  margin-bottom: 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: #9A3412;
}

.daffars-transition-callout strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #7C2D12;
  margin-bottom: 4px;
}

.daffars-transition-callout p {
  margin: 0 0 6px;
  line-height: 1.5;
}

/* ── Related clause chips ── */

.related-clause-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--blue-dark);
  background: var(--blue-bg);
  border: 1px solid var(--blue-border);
  border-radius: 4px;
  padding: 2px 8px;
  text-decoration: none;
  transition: background 0.15s;
}

.related-clause-chip:hover {
  background: #DBEAFE;
  text-decoration: none;
}


/* ══════════════════════════════════════════════
   ACQUISITION WIZARD
   ══════════════════════════════════════════════ */

.wizard-form {
  max-width: 720px;
}

.wizard-group {
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 16px 20px;
  margin-bottom: 16px;
}

.wizard-group legend {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  padding: 0 8px;
}

.wizard-group label {
  display: block;
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--text-secondary);
  padding: 4px 0;
  cursor: pointer;
}

.wizard-group input[type="number"] {
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 8px 12px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  width: 200px;
}

.wizard-hint {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-dimmed);
  margin-top: 4px;
}

.wizard-generate {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF;
  background: var(--blue-primary);
  border: none;
  border-radius: 6px;
  padding: 12px 24px;
  cursor: pointer;
  margin-top: 8px;
}

.wizard-generate:hover {
  background: var(--blue-dark);
}