/* Basic page setup and typography */
body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-main);
}

/* Main container for centering content */
.container {
  width: min(800px, calc(100% - var(--grid-unit) * 4));
  margin: calc(var(--grid-unit) * 4) auto; /* Center by default; overridden on desktop */
  display: grid;
  gap: var(--grid-unit);
  border: var(--border-width) solid var(--color-border); /* Add back the main container border */
  padding: 0; /* Sections handle their own padding */
}

/* Architectural Section Styling - applies to header, main-view, tree-section, etc. */
.architectural-section {
  border-bottom: var(--border-width) solid var(--color-border); /* Separator for sections */
  background: var(--color-bg);
  padding: calc(var(--grid-unit) * 2); /* Default padding for sections */
}

.architectural-section:last-of-type {
  border-bottom: none; /* No border on the last section */
}

header.architectural-section {
  padding-bottom: var(--grid-unit); /* Adjust padding for header */
}

.brand-row {
  display: flex;
  align-items: center;
  gap: calc(var(--grid-unit) * 1.5);
}

.brand-icon {
  width: 24px;
  height: 24px;
  filter: grayscale(1) contrast(1.2);
}

.lookup-form {
  margin-top: var(--grid-unit);
}

.input-row {
  display: flex;
}

.input-row input {
  flex: 1;
  border: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
  padding: 12px;
  font-size: 1rem;
  font-family: inherit;
  border-radius: 0;
}

.input-row button {
  border: 0;
  background: var(--color-primary);
  color: var(--color-bg);
  font-weight: 700;
  padding: 0 18px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 0;
}

.input-row #refresh {
  background: var(--color-surface);
  color: var(--color-text);
  border-left: var(--border-width) solid var(--color-border);
}

.input-row #refresh:hover {
  background: var(--color-primary);
  color: var(--color-bg);
}

.input-row button:disabled {
  background: #8aaee8;
  cursor: wait;
}

.actions {
  display: flex;
  border-bottom: var(--border-width) solid var(--color-border);
}

.actions button {
  flex: 1;
  border: none;
  border-right: var(--border-width) solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  padding: var(--grid-unit);
  border-radius: 0;
  cursor: pointer;
}

.actions button:last-child {
  border-right: none;
}

.actions button:hover {
  background: var(--color-surface);
}

h2.section-title {
  margin: 0;
  font-size: 0.8rem;
  padding: var(--grid-unit) calc(var(--grid-unit) * 2);
  background: var(--color-surface);
  border-bottom: var(--border-width) solid var(--color-border);
}

.tree-section .section-title {
  background: var(--color-secondary);
  color: var(--color-bg);
}

/* Ownership Summary Boxes */
.ownership {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.ownership .surface-box {
  padding: var(--grid-unit);
  border: none;
  border-right: var(--border-width) solid var(--color-border);
  border-bottom: var(--border-width) solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ownership .surface-box:nth-child(even) {
  border-right: none;
}

.ownership span {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary);
  font-weight: 700;
}

.ownership strong {
  font-size: 0.85rem;
}

/* Ownership Tree (Centered Vertical Layout) */
.ownership-tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}

.tree-group-above {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}

.tree-group-below {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}

.tree-connector {
  width: 2px;
  height: 24px;
  background-color: var(--color-border);
  align-self: center;
  margin: -1px 0;
  flex-shrink: 0;
  z-index: 1;
}

.tree-node {
  position: relative;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-none);
  background: var(--color-bg);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 2px 2px 0px var(--color-border);
  width: 100%;
  max-width: 450px;
  box-sizing: border-box;
}

.tree-node-center {
  max-width: 500px;
  border: 3px solid var(--color-primary);
  box-shadow: 3px 3px 0px var(--color-border);
  background: var(--color-surface);
}

.tree-node-interactive {
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tree-node-interactive:hover {
  border-color: var(--color-primary);
  box-shadow: 2px 2px 0px var(--color-primary);
}

.tree-node-active-path {
  border-left: 4px solid var(--color-primary);
}

.tree-label,
.tree-description,
.tree-relationship {
  color: var(--color-text);
  opacity: 0.8;
  font-size: 0.72rem;
}

.tree-node strong,
.tree-name-link {
  color: var(--color-text);
  font-size: 0.84rem;
  overflow-wrap: anywhere;
}

.tree-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 3px;
}

.tree-badge {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  max-width: 100%;
  border: var(--border-width) solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  padding: 2px 7px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
}

.is-defunct {
  opacity: 0.6 !important;
  filter: grayscale(0.8) !important;
}

.is-defunct strong, .is-defunct .tree-name-link {
  text-decoration: line-through !important;
}

.tree-name-link {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-underline-offset: 2px;
}

.tree-name-link:hover {
  color: var(--color-primary);
}

.tree-external-link {
  color: var(--color-primary);
  margin-left: 6px;
  font-size: 0.78rem;
  text-decoration: none;
  display: inline-block;
  opacity: 0.7;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.tree-external-link:hover {
  opacity: 1;
  transform: translate(1px, -1px);
}

.tree-description {
  overflow-wrap: anywhere;
}

.tree-relationship {
  justify-self: start;
  max-width: 100%;
  border: var(--border-width) solid var(--color-border);
  background: var(--color-bg);
  padding: 2px 7px;
  text-transform: uppercase;
  font-size: 0.65rem;
  font-weight: 700;
}

/* Shareholders Bar */
.shareholders-bar-container {
  margin-top: 12px;
  width: 100%;
  border-top: var(--border-width) dashed var(--color-border);
  padding-top: 10px;
  box-sizing: border-box;
}

.shareholders-bar-title {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary);
  font-weight: 700;
  margin-bottom: 8px;
}

.shareholders-toggle-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.shareholders-toggle-btn {
  background: transparent;
  color: var(--color-text);
  border: var(--border-width) solid var(--color-border);
  padding: 3px 6px;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.15s, color 0.15s;
}

.shareholders-toggle-btn:hover {
  background: var(--color-surface);
}

.shareholders-toggle-btn.active {
  background: var(--color-primary);
  color: var(--color-bg);
}

.shareholders-bar {
  display: flex;
  height: 24px;
  width: 100%;
  border: var(--border-width) solid var(--color-border);
  box-shadow: 2px 2px 0px var(--color-border);
  background-color: #eee;
  overflow: hidden;
  box-sizing: border-box;
  margin-bottom: 8px;
}

.shareholder-segment {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-sizing: border-box;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  transition: filter 0.15s ease, opacity 0.15s ease;
}

.shareholder-segment:last-child {
  border-right: none;
}

.shareholder-segment.clickable {
  cursor: pointer;
}

.shareholder-segment.clickable:hover {
  filter: brightness(1.15) contrast(1.1);
  text-decoration: underline;
}

.shareholder-segment .segment-name {
  padding: 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shareholder-segment .segment-percent {
  font-size: 0.62rem;
  opacity: 0.9;
  margin-left: 2px;
}

.shareholders-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.65rem;
}

.shareholders-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.shareholders-legend-color {
  width: 10px;
  height: 10px;
  border: 1px solid var(--color-border);
  display: inline-block;
  flex-shrink: 0;
}

/* Header Navigation Buttons */
.navigation-controls {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.nav-button {
  background: transparent;
  color: var(--color-text);
  border: var(--border-width) solid var(--color-border);
  padding: 4px 8px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  border-radius: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-button:hover:not(:disabled) {
  background: var(--color-surface);
}

.nav-button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Sources and Warnings */
.sources {
  margin: 0;
  padding: var(--grid-unit) calc(var(--grid-unit) * 2);
  list-style: none;
}

.sources li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  border-bottom: var(--border-width) solid var(--color-border);
  font-size: 0.84rem;
}

.sources li:last-child {
  border-bottom: none;
}

.sources a {
  color: var(--color-primary);
  overflow-wrap: anywhere;
}

#warnings-list li {
  color: var(--accent-orange);
}

/* Status and Hidden Utility */
#status {
  min-height: 1.2em;
  font-size: 0.75rem;
  background: var(--color-surface);
  padding: var(--grid-unit) calc(var(--grid-unit) * 2);
}

.hidden {
  display: none !important;
}

.hidden-until-loaded {
  display: none;
}

.small {
  display: block;
  margin-bottom: 8px;
}

button.ghost {
  background: var(--color-surface);
  color: var(--color-text);
  border: var(--border-width) solid var(--color-border);
}

button.ghost:hover {
  background: var(--color-primary);
  color: var(--color-bg);
  border-color: var(--color-primary);
}

.subsidiary-toggle {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.tree-identifiers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  position: relative;
  z-index: 1;
}

.tree-identifier {
  display: inline-flex;
  align-items: center;
  font-size: 0.62rem;
  font-family: var(--font-mono, monospace);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  padding: 1px 5px;
  border-radius: 2px;
}

.tree-identifier-label {
  color: var(--color-primary);
  font-weight: 700;
  margin-right: 4px;
  border-right: var(--border-width) solid var(--color-border);
  padding-right: 4px;
}

.tree-identifier-value {
  color: var(--color-text);
}

/* Stained-glass Voting Control & Equity Ownership popovers/tabs */
.tree-node-body {
  position: relative;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-none);
  background: var(--color-bg);
  padding: 10px 12px;
  display: grid;
  gap: 4px;
  box-shadow: 2px 2px 0px var(--color-border);
  box-sizing: border-box;
  width: 100%;
}

.tree-node-tabs {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  margin-top: 0;
  position: relative;
  z-index: 3;
  box-shadow: 2px 2px 0px var(--color-border);
}

.tree-node.breakdown-open .tree-node-tabs {
  box-shadow: 2px 0px 0px var(--color-border);
}

.tab-button {
  flex: 1 1 50%;
  text-align: center;
  padding: 8px 4px;
  font-family: var(--font-main);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  border: 2px solid var(--color-border);
  border-top: none;
  margin: 0;
  position: relative;
  box-sizing: border-box;
  transition: background 0.15s, color 0.15s;
  outline: none;
}

.tab-button.voting-trigger {
  border-right-width: 1px;
}

.tab-button.equity-trigger {
  border-left-width: 1px;
}

.tab-button:hover {
  background: var(--color-surface);
}

.tab-button.active {
  background: var(--color-surface);
  border-bottom-color: var(--color-surface) !important;
  z-index: 4;
}

.tab-button.active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-surface);
  z-index: 5;
}

/* Inline breakdown (open tab content) */
.inline-breakdown {
  margin-top: -2px;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  z-index: 2;
  box-shadow: 2px 2px 0px var(--color-border);
}

.stained-glass-square {
  width: 100% !important;
  height: 180px;
  align-self: center;
  border: none;
  border-bottom: 2px solid var(--color-border);
  display: flex;
  flex-direction: column;
  background: #FFF;
  overflow: hidden;
  box-sizing: border-box;
}

.glass-slice {
  width: 100%;
  border-bottom: 2px solid #2A2A2A;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-sizing: border-box;
  transition: opacity 0.15s ease, filter 0.15s ease;
  position: relative;
}

.glass-slice:last-child {
  border-bottom: none;
}

.glass-slice:hover {
  filter: brightness(1.15) contrast(1.1);
  opacity: 0.95;
}

.slice-label {
  font-family: var(--font-main);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
  color: inherit;
  text-align: center;
  padding: 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

/* FLW / Bauhaus Palette Colors */
.slice-founder_insider, .type-founder_insider {
  background-color: #AE4432 !important; /* Cherokee Red */
  color: #FFFFFF !important;
}

.slice-institutional_passive, .type-institutional_passive {
  background-color: #4B5320 !important; /* Olive Moss Green */
  color: #FFFFFF !important;
}

.slice-institutional_active, .type-institutional_active {
  background-color: #D49B35 !important; /* Stained Glass Amber */
  color: #2A2A2A !important;
}

.slice-public_float, .type-public_float {
  background-color: #4A6B82 !important; /* Steel Blue/Slate */
  color: #FFFFFF !important;
}

.inline-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 0.68rem;
  padding: 12px;
  background: var(--color-surface);
  box-sizing: border-box;
}

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

.legend-color {
  width: 8px;
  height: 8px;
  border: 1px solid #2A2A2A;
  display: inline-block;
  flex-shrink: 0;
}

.legend-text {
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text);
  white-space: nowrap;
}

/* Floating Bauhaus Tooltip styles */
.slice-tooltip {
  position: absolute;
  z-index: 20000;
  background: #FFF8E7; /* Light Bauhaus Cream */
  border: 2px solid #2A2A2A;
  padding: 8px 12px;
  box-shadow: 2px 2px 0px #2A2A2A;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 140px;
  max-width: 280px;
  box-sizing: border-box;
}

.tooltip-name {
  font-weight: 700;
  font-size: 0.8rem;
  color: #2A2A2A;
  text-transform: uppercase;
  font-family: var(--font-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tooltip-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.tooltip-percent {
  font-weight: 700;
  color: #AE4432; /* Cherokee Red */
  font-size: 0.78rem;
}

.tooltip-type {
  font-size: 0.58rem;
  text-transform: uppercase;
  font-weight: 700;
  padding: 1px 4px;
  border: 1px solid #2A2A2A;
  background: #FFFFFF;
  color: #2A2A2A;
}

/* Labelled Tree Connectors */
.tree-connector--labelled {
  position: relative;
  width: 2px;
  height: 48px;
  background-color: var(--color-border);
  align-self: center;
  margin: -1px 0;
  flex-shrink: 0;
  z-index: 1;
}

.tree-connector-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  color: var(--color-text);
  font-size: 0.62rem;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 2px 6px;
  box-shadow: 1px 1px 0px var(--color-border);
  z-index: 2;
}

/* Shareholders Header Row & Expand Button */
.shareholders-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.shareholders-expand-btn {
  background: transparent;
  color: var(--color-primary);
  border: none;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  padding: 2px 4px;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-mono, monospace);
}

.shareholders-expand-btn:hover {
  text-decoration: underline;
}

/* Shareholders Expandable Details Grid */
.shareholders-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  border: var(--border-width) solid var(--color-border);
  background: var(--color-bg);
  padding: 6px;
  box-shadow: 2px 2px 0px var(--color-border);
  box-sizing: border-box;
}

.shareholders-details-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.68rem;
  padding: 4px;
  border-bottom: 1px dashed var(--color-border);
}

.shareholders-details-row:last-child {
  border-bottom: none;
}

.shareholders-details-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
}

.shareholders-details-name.clickable {
  cursor: pointer;
  color: var(--color-text);
  text-decoration: underline;
}

.shareholders-details-name.clickable:hover {
  color: var(--color-primary);
}

.shareholders-details-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.shareholders-details-percent {
  font-family: var(--font-mono, monospace);
  font-weight: 700;
}

.shareholders-details-type {
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 1px 4px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.shareholders-details-type.type-founder_insider {
  background: #bad8c4;
  color: #1a3322;
}
.shareholders-details-type.type-institutional_passive {
  background: #bed3ee;
  color: #1a2a3e;
}
.shareholders-details-type.type-institutional_active {
  background: #d7caee;
  color: #281a3e;
}
.shareholders-details-type.type-public_float {
  background: #ead18d;
  color: #3e2e1a;
}

/* View Transitions Support */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: 180ms cubic-bezier(0.4, 0, 0.2, 1) both vt-fade-out;
  }
  ::view-transition-new(root) {
    animation: 180ms cubic-bezier(0.4, 0, 0.2, 1) 60ms both vt-fade-in;
  }
}

@keyframes vt-fade-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-6px); }
}

@keyframes vt-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Named view-transition for the ownership tree to crossfade smoothly */
.ownership-tree {
  view-transition-name: ownership-tree;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* Loading state dimming for ownership tree */
body.is-loading .ownership-tree {
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* Horizontal Subsidiary Carousel Layout */
.tree-carousel-container {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
}

.tree-carousel-viewport {
  display: flex;
  width: 100%;
  max-width: 500px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  margin: 0;
  padding: 0;
  position: relative;
}

.tree-carousel-viewport::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.tree-carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: center;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 4px 8px;
  margin: 0;
}

.tree-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-surface);
  color: var(--color-text);
  border: var(--border-width) solid var(--color-border);
  box-shadow: 2px 2px 0px var(--color-border);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  user-select: none;
  font-weight: bold;
  font-size: 1.1rem;
}

.tree-carousel-btn:hover {
  background: var(--color-primary);
  color: var(--color-bg);
  border-color: var(--color-primary);
}

.tree-carousel-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

.tree-carousel-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.tree-carousel-btn--left {
  left: calc(50% - 250px - 48px);
}

.tree-carousel-btn--right {
  right: calc(50% - 250px - 48px);
}

@media (max-width: 600px) {
  .tree-carousel-btn--left {
    left: 8px;
  }
  .tree-carousel-btn--right {
    right: 8px;
  }
}

.tree-carousel-indicator {
  margin-top: 10px;
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text);
  opacity: 0.8;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  padding: 4px 12px;
  box-shadow: 1px 1px 0px var(--color-border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.tree-carousel-dots {
  display: flex;
  gap: 4px;
  align-items: center;
}

.tree-carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-border);
  transition: background 0.2s ease, transform 0.2s ease;
}

.tree-carousel-dot--active {
  background: var(--color-primary);
  transform: scale(1.3);
}

.tree-carousel-name {
  font-weight: 700;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Page Layout Wrapper */
.page-layout {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
  gap: calc(var(--grid-unit) * 3); /* 24px gap */
  width: 100%;
  box-sizing: border-box;
  padding: 0 var(--grid-unit);
}

/* Sidebar skyscraper units */
.side-ad {
  width: 160px;
  flex-shrink: 0;
  position: sticky;
  top: calc(var(--grid-unit) * 4);
  margin-top: calc(var(--grid-unit) * 4);
}

.side-ad .ad-wrapper {
  max-width: 160px;
}

/* Ad Space & Fallback styling */
#ad-space {
  padding: calc(var(--grid-unit) * 1.5);
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-surface);
  border-bottom: var(--border-width) solid var(--color-border);
}

.ad-wrapper {
  width: 100%;
  max-width: 728px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#ethical-ad {
  width: 100%;
  display: flex;
  justify-content: center;
}

.fallback-ad {
  width: 100%;
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  padding: calc(var(--grid-unit) * 1) calc(var(--grid-unit) * 2);
  box-shadow: 2px 2px 0px var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--grid-unit);
  box-sizing: border-box;
}

/* Vertical Skyscraper Ad Fallback */
.vertical-fallback-ad {
  flex-direction: column;
  height: 600px;
  justify-content: space-between;
  padding: calc(var(--grid-unit) * 3) calc(var(--grid-unit) * 2);
  text-align: center;
}

.vertical-fallback-ad .fallback-ad-content {
  flex-direction: column;
  gap: calc(var(--grid-unit) * 2);
}

.vertical-fallback-ad .fallback-ad-text {
  font-size: 0.85rem;
  line-height: 1.4;
}

.vertical-fallback-ad .fallback-ad-btn {
  width: 100%;
}

.fallback-ad-content {
  display: flex;
  align-items: center;
  gap: var(--grid-unit);
}

.fallback-ad-tag {
  font-size: 0.6rem;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  background: var(--color-primary);
  color: var(--color-bg);
  padding: 2px 6px;
  text-transform: uppercase;
}

.fallback-ad-text {
  font-size: 0.8rem;
  margin: 0;
  color: var(--color-text);
  font-weight: 700;
}

.fallback-ad-btn {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-bg);
  background: var(--color-text);
  padding: 6px 12px;
  text-decoration: none;
  border: var(--border-width) solid var(--color-border);
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.fallback-ad-btn:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

#ethical-ad:not(:empty) ~ #fallback-ad {
  display: none !important;
}

#ethical-ad-left:not(:empty) ~ .vertical-fallback-ad {
  display: none !important;
}

#ethical-ad-right:not(:empty) ~ .vertical-fallback-ad {
  display: none !important;
}

/* Responsive side ads swaps */
@media (min-width: 1160px) {
  #ad-space {
    display: none !important;
  }
  .container {
    margin: calc(var(--grid-unit) * 4) 0; /* Remove auto margins on desktop */
  }
}

@media (max-width: 1159px) {
  .side-ad {
    display: none !important;
  }
  .container {
    margin: calc(var(--grid-unit) * 4) auto; /* Restore center auto margins on smaller viewports */
    width: min(800px, calc(100% - var(--grid-unit) * 4));
  }
}

/* Explore Directory View Styling */
.explore-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--grid-unit) * 2);
  margin-top: calc(var(--grid-unit) * 1);
}

@media (max-width: 600px) {
  .explore-grid {
    grid-template-columns: 1fr;
    gap: calc(var(--grid-unit) * 1.5);
  }
}

.explore-column h3 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary);
  font-weight: 700;
  border-bottom: var(--border-width) solid var(--color-border);
  padding-bottom: 6px;
  margin-top: 0;
  margin-bottom: 12px;
}

.explore-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.explore-list li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.explore-list a {
  color: var(--color-text);
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-primary);
  font-weight: 700;
  transition: color 0.15s;
}

.explore-list a:hover {
  color: var(--color-primary);
}

.explore-badge {
  font-size: 0.6rem;
  font-family: var(--font-mono, monospace);
  border: var(--border-width) solid var(--color-border);
  padding: 1px 4px;
  opacity: 0.8;
}

/* Explore Link in Header */
#explore-link {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text);
  text-decoration: none;
  border: var(--border-width) solid var(--color-border);
  padding: 4px 8px;
  transition: background 0.15s;
  display: inline-flex;
  align-items: center;
}

#explore-link:hover {
  background: var(--color-surface);
}

@media (max-width: 600px) {
  .fallback-ad {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
  .fallback-ad-content {
    flex-direction: column;
    gap: 4px;
  }
}

/* Disambiguation counterpart banner */
#disambiguation-banner {
  background: #FFF8E7; /* Light cream */
  border-bottom: var(--border-width) solid var(--color-border);
  padding: calc(var(--grid-unit) * 1.5) calc(var(--grid-unit) * 2);
}

.disambiguation-content {
  display: flex;
  align-items: center;
  gap: var(--grid-unit);
  flex-wrap: wrap;
}

.disambiguation-alert-tag {
  font-size: 0.65rem;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  background: var(--color-primary); /* Cherokee Red */
  color: var(--color-bg);
  padding: 2px 6px;
  text-transform: uppercase;
}

#disambiguation-links {
  font-size: 0.8rem;
  font-weight: 700;
}

#disambiguation-links a {
  color: var(--color-primary);
  text-decoration: underline;
  margin-right: calc(var(--grid-unit) * 1.5);
}

#disambiguation-links a:hover {
  color: var(--color-secondary);
}

/* Flagging button styling */
#flag-btn:hover {
  background: #AE4432 !important; /* Cherokee Red for flag action */
  color: #FFF !important;
  border-color: #AE4432 !important;
}


/* Modal overlay with glassmorphism */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100000;
  opacity: 1;
  transition: opacity 0.25s ease;
}

/* Glass modal container */
.modal-content.glass-modal {
  background: rgba(255, 248, 231, 0.85); /* Cream base with transparency */
  border: 3px solid #2A2A2A;
  box-shadow: 6px 6px 0px #2a2a2a;
  padding: calc(var(--grid-unit) * 3);
  width: min(500px, 90%);
  display: flex;
  flex-direction: column;
  gap: var(--grid-unit);
  box-sizing: border-box;
  animation: modalScaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalScaleIn {
  from {
    transform: scale(0.92);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.modal-title {
  margin: 0;
  font-family: var(--font-main);
  font-size: 1.25rem;
  font-weight: 700;
  color: #2A2A2A;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.modal-description {
  margin: 0;
  font-size: 0.85rem;
  color: #555;
  line-height: 1.4;
}

.modal-label {
  display: block;
  font-size: 0.72rem;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  text-transform: uppercase;
  color: #2A2A2A;
  margin-top: var(--grid-unit);
  margin-bottom: 4px;
}

#flag-form select,
#flag-form input[type="text"] {
  width: 100%;
  height: 42px;
  border: 2px solid var(--color-border);
  background: #FFF;
  padding: 0 10px;
  font-size: 0.9rem;
  font-family: inherit;
  box-sizing: border-box;
  outline: none;
  border-radius: 0;
  color: var(--color-text);
  margin-bottom: var(--grid-unit);
}

#flag-form select:focus,
#flag-form input[type="text"]:focus {
  border-color: var(--color-primary);
}

#flag-form textarea {
  width: 100%;
  height: 120px;
  border: 2px solid var(--color-border);
  background: #FFF;
  padding: 10px;
  font-size: 0.9rem;
  font-family: inherit;
  box-sizing: border-box;
  resize: vertical;
  outline: none;
}

#flag-form textarea:focus {
  border-color: var(--color-primary);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--grid-unit);
  margin-top: calc(var(--grid-unit) * 2);
}

.modal-actions button {
  border: 2px solid var(--color-border);
  padding: 10px 18px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.15s, color 0.15s;
}

.modal-actions .btn-secondary {
  background: transparent;
  color: var(--color-text);
}

.modal-actions .btn-secondary:hover {
  background: rgba(0, 0, 0, 0.05);
}

.modal-actions .btn-primary {
  background: var(--color-primary); /* Cherokee Red */
  color: #FFF;
  border-color: var(--color-primary);
}

.modal-actions .btn-primary:hover {
  background: #8e3526;
  border-color: #8e3526;
}

/* Autocomplete Dropdown Panel */
.autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-width: 600px;
  background: rgba(255, 248, 231, 0.96); /* Matches cream layout base with high opacity */
  border: 3px solid #2A2A2A;
  box-shadow: 6px 6px 0px #2a2a2a; /* Signature Bauhaus card drop shadow */
  z-index: 9999;
  margin-top: 6px;
  max-height: 350px;
  overflow-y: auto;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.autocomplete-dropdown.hidden {
  display: none !important;
}

/* Suggestion Option Item */
.autocomplete-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 2px solid var(--color-border, #2a2a2a);
  display: flex;
  flex-direction: column;
  transition: background 0.15s ease, color 0.15s ease;
  box-sizing: border-box;
  text-align: left;
}

.autocomplete-item:last-child {
  border-bottom: none;
}

.autocomplete-item:hover,
.autocomplete-item.active {
  background: #2A2A2A;
  color: #FFF8E7; /* Cream text on dark background on active selection */
}

/* Sub-elements inside item */
.autocomplete-item .item-label-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.autocomplete-item .item-label {
  font-weight: 700;
  font-size: 0.95rem;
}

.autocomplete-item .item-role-tag {
  font-family: var(--font-mono, monospace);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border: 1px solid currentColor;
  border-radius: 3px;
  opacity: 0.85;
}

.autocomplete-item .item-description {
  font-size: 0.76rem;
  opacity: 0.8;
  margin-top: 4px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Suggestion header / Did you mean tag */
.autocomplete-item.suggestion-header {
  background: rgba(174, 68, 50, 0.12); /* Soft Cherokee Red highlight */
}

.autocomplete-item.suggestion-header:hover,
.autocomplete-item.suggestion-header.active {
  background: #AE4432;
  color: #FFF;
}

.autocomplete-item.suggestion-header .item-label {
  color: #AE4432;
}

.autocomplete-item.suggestion-header:hover .item-label,
.autocomplete-item.suggestion-header.active .item-label {
  color: #FFF;
}

.autocomplete-suggestion-tag {
  font-family: var(--font-mono, monospace);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #AE4432;
  border: 1.5px solid #AE4432;
  padding: 1px 6px;
  margin-right: 4px;
}

.autocomplete-item.suggestion-header:hover .autocomplete-suggestion-tag,
.autocomplete-item.suggestion-header.active .autocomplete-suggestion-tag {
  color: #FFF;
  border-color: #FFF;
}

/* Autocomplete footer */
.autocomplete-footer {
  padding: 8px 14px;
  font-size: 0.72rem;
  font-style: italic;
  opacity: 0.7;
  background: rgba(0, 0, 0, 0.03);
  border-top: 1px dashed var(--color-border, #2a2a2a);
  text-align: center;
  font-family: var(--font-mono, monospace);
}

/* Field-Level Provenance Badges */
.provenance-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.58rem;
  font-family: var(--font-mono, monospace);
  padding: 1px 4px;
  border-radius: 2px;
  margin-left: 6px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: help;
  vertical-align: middle;
  border: var(--border-width, 2px) solid var(--color-border, #2a2a2a);
}

.provenance-badge--primary {
  background-color: rgba(75, 83, 32, 0.15); /* Soft Primary Moss Green */
  color: #4B5320;
  border-color: #4B5320;
}

.provenance-badge--secondary {
  background-color: rgba(212, 155, 53, 0.15); /* Soft Secondary Amber */
  color: #B58024;
  border-color: #D49B35;
}

.provenance-badge--inferred {
  background-color: rgba(74, 107, 130, 0.15); /* Soft Inferred Steel Blue */
  color: #4A6B82;
  border-color: #4A6B82;
}

.provenance-badge--unknown {
  background-color: rgba(120, 120, 120, 0.15); /* Soft Grey */
  color: #707070;
  border-color: #909090;
}

/* Provenance Badge Tooltip with Glassmorphism */
.provenance-tooltip {
  position: absolute;
  z-index: 20000;
  background: rgba(255, 248, 231, 0.9); /* Cream base with high transparency */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: var(--border-width, 1px) solid var(--color-border, #2a2a2a);
  padding: 8px 12px;
  box-shadow: 3px 3px 0px var(--color-border, #2a2a2a);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 180px;
  font-size: 0.72rem;
  box-sizing: border-box;
}

.provenance-tooltip strong {
  font-weight: 700;
}

.provenance-tooltip .tier-primary {
  color: #4B5320; /* Primary Moss Green */
  font-weight: 700;
}

.provenance-tooltip .tier-secondary {
  color: #B58024; /* Secondary Amber */
  font-weight: 700;
}

.provenance-tooltip .tier-inferred {
  color: #707070; /* Grey */
  font-weight: 700;
}

.provenance-tooltip .tier-unknown {
  color: #707070; /* Grey */
  font-weight: 700;
}

/* Curation Dashboard Layout */
.curation-dashboard {
  display: flex;
  flex-direction: column;
  gap: var(--grid-unit);
}

.curation-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--grid-unit);
  margin-bottom: var(--grid-unit);
}

.curation-controls h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.curation-tabs {
  display: flex;
  border-bottom: var(--border-width) solid var(--color-border);
  margin-bottom: var(--grid-unit);
  overflow-x: auto;
}

.curation-tab-btn {
  background: transparent;
  color: var(--color-text);
  border: none;
  border-bottom: 3px solid transparent;
  padding: 10px 16px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  white-space: nowrap;
}

.curation-tab-btn:hover {
  background: var(--color-surface);
}

.curation-tab-btn.active {
  border-bottom-color: var(--color-primary);
  color: var(--color-primary);
}

.curation-tab-btn span.badge {
  background: var(--color-primary);
  color: var(--color-bg);
  padding: 1px 5px;
  font-size: 0.6rem;
  font-family: var(--font-mono, monospace);
  margin-left: 4px;
}

.curation-tab-content {
  display: flex;
  flex-direction: column;
  gap: var(--grid-unit);
}

.curation-card {
  border: var(--border-width) solid var(--color-border);
  box-shadow: 2px 2px 0px var(--color-border);
  background: var(--color-bg);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.curation-card.review-due {
  border-left: 4px solid var(--accent-orange);
}

.curation-card.is-gospel {
  border-left: 4px solid var(--color-secondary);
}

.curation-card.is-auto-promoted {
  border-left: 4px solid var(--accent-blue);
}

.curation-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: var(--border-width) dashed var(--color-border);
  padding-bottom: 6px;
}

.curation-card-title {
  font-weight: 700;
  font-size: 0.9rem;
}

.curation-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.68rem;
  opacity: 0.8;
}

.curation-card-body {
  font-size: 0.8rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

@media (max-width: 600px) {
  .curation-card-body {
    grid-template-columns: 1fr;
  }
}

.curation-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: var(--border-width) solid var(--color-border);
  padding-top: 8px;
  margin-top: 4px;
}

.curation-card-actions button {
  font-size: 0.65rem;
  padding: 4px 10px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
}

.curation-card-actions button.btn-danger {
  background: var(--accent-red, #AE4432);
  color: white;
  border: none;
}

.curation-card-actions button.btn-success {
  background: var(--color-secondary);
  color: var(--color-bg);
  border: none;
}

/* Curate Edit Modal styles */
.curate-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

@media (max-width: 600px) {
  .curate-form-grid {
    grid-template-columns: 1fr;
  }
}

.curate-form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.curate-form-field.full-width {
  grid-column: span 2;
}

@media (max-width: 600px) {
  .curate-form-field.full-width {
    grid-column: span 1;
  }
}

.curate-form-field label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-primary);
}

.curate-form-field input,
.curate-form-field textarea,
.curate-form-field select {
  border: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  padding: 8px;
  font-size: 0.8rem;
  border-radius: 0;
  font-family: inherit;
}

.curate-form-checkbox-row {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 8px 0;
}

.curate-form-checkbox-field {
  display: flex;
  align-items: center;
  gap: 6px;
}

.curate-form-checkbox-field input {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.curate-form-checkbox-field label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}

.modal-content.glass-modal--large {
  max-width: 650px;
}

.curation-badge {
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 1px 5px;
  border: var(--border-width) solid var(--color-border);
}

.curation-badge--gospel {
  background: rgba(75, 83, 32, 0.1);
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.curation-badge--autopromote {
  background: rgba(74, 107, 130, 0.1);
  color: var(--accent-blue);
  border-color: var(--accent-blue);
}

.curation-badge--pending {
  background: rgba(212, 155, 53, 0.1);
  color: var(--accent-orange);
  border-color: var(--accent-orange);
}