/**
 * Applied Realities - Components
 * workspace.hadsed.com/assets/components.css
 * 
 * Scholarly components with warm, paper-like aesthetics.
 * Requires: base.css
 */

/* ============================================
   Cards / Panels
   Inspired by doodad.dev's warm outlined panels
   ============================================ */
.card {
  background: var(--bg-panel);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

.card-outlined {
  background: transparent;
  border: 2px solid var(--border-dark);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

.card-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.card-subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

/* ============================================
   Nodes (for org charts, flowcharts)
   Muted pastels, paper-like
   ============================================ */
.node {
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md);
  text-align: center;
  min-width: 160px;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  border-width: 1px;
  border-style: solid;
}

.node:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.node-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-base);
  margin-bottom: var(--space-1);
}

.node-detail {
  font-size: var(--text-sm);
  opacity: 0.8;
}

/* Node colors */
.node-blue {
  background: var(--node-blue);
  border-color: var(--node-blue-border);
  color: var(--node-blue-text);
}

.node-teal {
  background: var(--node-teal);
  border-color: var(--node-teal-border);
  color: var(--node-teal-text);
}

.node-purple {
  background: var(--node-purple);
  border-color: var(--node-purple-border);
  color: var(--node-purple-text);
}

.node-amber {
  background: var(--node-amber);
  border-color: var(--node-amber-border);
  color: var(--node-amber-text);
}

.node-green {
  background: var(--node-green);
  border-color: var(--node-green-border);
  color: var(--node-green-text);
}

.node-red {
  background: var(--node-red);
  border-color: var(--node-red-border);
  color: var(--node-red-text);
}

.node-gray {
  background: var(--node-gray);
  border-color: var(--node-gray-border);
  color: var(--node-gray-text);
}

.node-cyan {
  background: var(--node-cyan);
  border-color: var(--node-cyan-border);
  color: var(--node-cyan-text);
}

.node-dashed {
  border-style: dashed;
}

/* ============================================
   Connectors & Dividers
   ============================================ */
.connector {
  width: 1px;
  height: 20px;
  background: var(--border-medium);
  margin: 0 auto;
}

.connector-thick {
  width: 2px;
}

.divider {
  width: 100%;
  height: 1px;
  background: var(--border-light);
  margin: var(--space-4) 0;
}

.divider-fade {
  background: linear-gradient(90deg, 
    transparent 0%, 
    var(--border-medium) 20%,
    var(--border-medium) 80%,
    transparent 100%
  );
}

/* ============================================
   Legend
   ============================================ */
.legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-5);
  padding: var(--space-5);
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.legend-color {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-sm);
  border-width: 1px;
  border-style: solid;
}

/* ============================================
   Notes / Callout Box
   Scholarly sidenote style
   ============================================ */
.notes {
  padding: var(--space-6);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--accent-violet);
}

.notes-title {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--accent-violet);
  margin-bottom: var(--space-4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--text-base);
}

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

.notes li {
  padding: var(--space-2) 0;
  padding-left: var(--space-5);
  position: relative;
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.notes li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--text-muted);
}

/* Note variants */
.notes-blue { border-left-color: var(--accent-blue); }
.notes-blue .notes-title { color: var(--accent-blue); }

.notes-teal { border-left-color: var(--accent-cyan); }
.notes-teal .notes-title { color: var(--accent-cyan); }

.notes-amber { border-left-color: var(--accent-yellow); }
.notes-amber .notes-title { color: var(--accent-yellow); }

.notes-red { border-left-color: var(--accent-red); }
.notes-red .notes-title { color: var(--accent-red); }

/* ============================================
   Tables
   Clean scholarly tables
   ============================================ */
.table-wrapper {
  overflow-x: auto;
  margin: var(--space-6) 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

th, td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--border-light);
}

th {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--text-primary);
  border-bottom: 2px solid var(--border-medium);
}

tr:hover td {
  background: var(--bg-hover);
}

/* ============================================
   Badges / Tags
   ============================================ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.badge-blue { background: var(--node-blue); color: var(--node-blue-text); }
.badge-green { background: var(--node-green); color: var(--node-green-text); }
.badge-amber { background: var(--node-amber); color: var(--node-amber-text); }
.badge-red { background: var(--node-red); color: var(--node-red-text); }

/* ============================================
   Buttons
   Understated, paper-like
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-dark);
  background: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.btn:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  text-decoration: none;
}

.btn-primary {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--bg-page);
}

.btn-primary:hover {
  background: var(--text-secondary);
  border-color: var(--text-secondary);
  color: var(--bg-page);
}

/* ============================================
   Flex & Grid Helpers
   ============================================ */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 768px) {
  .grid-cols-2, .grid-cols-3 { grid-template-columns: 1fr; }
}

/* ============================================
   Org Chart Layout
   ============================================ */
.org-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
}

.org-level {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  width: 100%;
}

.org-divider {
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    var(--border-medium) 30%,
    var(--border-medium) 70%,
    transparent 100%
  );
  margin: var(--space-2) auto;
}

/* ============================================
   Metadata Block (gwern-style)
   ============================================ */
.metadata {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  padding: var(--space-4);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-8);
}

.metadata-row {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.metadata-item {
  display: flex;
  gap: var(--space-2);
}

.metadata-label {
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.metadata-value {
  color: var(--text-secondary);
}

/* ============================================
   Figure / Caption
   ============================================ */
figure {
  margin: var(--space-8) 0;
}

figcaption {
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: center;
  margin-top: var(--space-3);
  font-style: italic;
}

/* ============================================
   Footnotes / Sidenotes
   ============================================ */
.footnote {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  border-top: 1px solid var(--border-light);
  padding-top: var(--space-4);
  margin-top: var(--space-8);
}

.footnote-ref {
  font-size: var(--text-xs);
  vertical-align: super;
  color: var(--link-color);
}