/* components.css - UI Widgets mapped as "Reference Instruments" */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-medium);
  padding: var(--space-12) var(--space-24);
  background-color: transparent;
  color: var(--text-primary);
  border: var(--border-width-regular) solid var(--text-primary);
  border-radius: var(--radius-0);
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: var(--line-height-none);
}

.btn-primary {
  background-color: var(--accent-mark);
  border-color: var(--accent-mark);
  color: var(--text-inverted);
}

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

.btn-secondary:hover {
  background-color: var(--surface-raised);
}

/* Tag Chips */
.chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-mono);
  color: var(--text-primary);
  padding: var(--space-4) var(--space-8);
  border: var(--border-width-regular) solid var(--border-hairline);
  border-radius: var(--radius-4);
  background-color: var(--surface-base);
  line-height: var(--line-height-none);
}

/* Cards (Thin border, no shadow, no radius) */
.card {
  border: var(--border-width-hairline) solid var(--border-hairline);
  background-color: var(--surface-base);
  padding: var(--space-24);
  border-radius: var(--radius-0);
}

/* Notational Marks (Chevrons, brackets, crosshairs) */
.notation-bracket::before { content: "["; color: var(--text-tertiary); margin-right: var(--space-4); font-family: var(--font-family-mono); }
.notation-bracket::after { content: "]"; color: var(--text-tertiary); margin-left: var(--space-4); font-family: var(--font-family-mono); }

.notation-cross {
  position: absolute;
  width: var(--space-8);
  height: var(--space-8);
}
.notation-cross::before, .notation-cross::after {
  content: "";
  position: absolute;
  background-color: var(--border-hairline);
}
.notation-cross::before { width: 100%; height: var(--border-width-regular); top: 50%; left: 0; transform: translateY(-50%); }
.notation-cross::after { height: 100%; width: var(--border-width-regular); left: 50%; top: 0; transform: translateX(-50%); }

.cross-top-left { top: -4px; left: -4px; }
.cross-top-right { top: -4px; right: -4px; }
.cross-bottom-left { bottom: -4px; left: -4px; }
.cross-bottom-right { bottom: -4px; right: -4px; }

/* Structural Diagram Mockup */
.mockup-frame {
  position: relative;
  border: var(--border-width-regular) solid var(--text-secondary);
  background: var(--surface-base);
  padding: var(--space-16);
  /* no rounded corners */
}

.mockup-callout {
  position: absolute;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-mono);
  color: var(--accent-mark);
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.mockup-callout::before {
  content: "";
  display: block;
  width: var(--space-24);
  height: var(--border-width-regular);
  background-color: var(--accent-mark);
}

/* Header & Nav */
.header-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-24) 0;
  border-bottom: var(--border-width-hairline) solid var(--border-hairline);
}

.logo-lockup {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.logomark svg {
  width: 24px;
  height: 24px;
}

.wordmark {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-heading-sm);
  letter-spacing: var(--letter-spacing-tight);
  display: flex;
  align-items: center;
}

.wordmark-tagging { color: var(--text-primary); }
.wordmark-space { color: var(--text-secondary); margin-left: 1px; }