/**
 * Armchair Journal Foundational Layout & Grid Architecture
 */

.aj-site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--aj-color-bg-page, #f6f7fa);
}

.aj-site-main {
  flex: 1 0 auto;
  width: 100%;
}

/* Page Containers */
.aj-container {
  width: 100%;
  max-width: var(--aj-width-editorial, 1180px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--aj-gutter, 24px);
  padding-right: var(--aj-gutter, 24px);
}

.aj-container-tools {
  width: 100%;
  max-width: var(--aj-width-tools, 1120px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--aj-gutter, 24px);
  padding-right: var(--aj-gutter, 24px);
}

.aj-container-fluid {
  width: 100%;
  padding-left: var(--aj-gutter, 24px);
  padding-right: var(--aj-gutter, 24px);
}

/* Common Layout Utilities */
.aj-flex {
  display: flex;
}

.aj-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.aj-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.aj-flex-col {
  display: flex;
  flex-direction: column;
}

.aj-grid {
  display: grid;
}

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

/* Responsive Gutter Adjustments */
@media (max-width: 720px) {
  :root {
    --aj-gutter: 16px;
  }
}

/* ==========================================================================
   Lens Toggle Component
   ========================================================================== */

.aj-lens-toggle {
  position: relative;
  display: inline-flex;
  width: max-content;
  background-color: var(--aj-color-bg-inset, #e9edf4);
  border: 1px solid var(--aj-color-rule-light, #dfe3ea);
  border-radius: var(--aj-radius-6, 6px);
  padding: 3px;
  font-family: var(--aj-font-mono, monospace);
  letter-spacing: -0.01em;
  user-select: none;
  box-sizing: border-box;
  vertical-align: middle;
}

.aj-lens-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  /*
   * Half the track inside the 3px padding, so the thumb is whatever one option is
   * wide — standard, compact, or shrunk by the small-screen rule below. lens-state.js
   * slides it by translateX(100%), which is its own width, so no length is restated
   * anywhere and the three cases stay in step.
   */
  width: calc((100% - 6px) / 2);
  border-radius: var(--aj-radius-3, 3px);
  background-color: var(--aj-color-navy-primary, #1a3d74);
  box-shadow: var(--aj-shadow-thumb, 0 3px 10px -2px rgba(20, 41, 75, 0.45));
  transform: translateX(0);
  transition: transform var(--aj-transition-default, 0.3s cubic-bezier(0.4, 0, 0.2, 1));
  pointer-events: none;
}

.aj-lens-option {
  position: relative;
  z-index: 1;
  width: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0 7px;
  cursor: pointer;
  border-radius: var(--aj-radius-3, 3px);
  outline: none;
  transition: color var(--aj-transition-color, 0.3s ease);
}

.aj-lens-name {
  font-size: var(--aj-fs-10-5, 10.5px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--aj-color-ink-body, #474f5c);
  transition: color var(--aj-transition-color, 0.3s ease);
}

.aj-lens-poles {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
}

.aj-pole-label {
  font-size: var(--aj-fs-7-5, 7.5px);
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--aj-color-ink-muted, #616a79);
  transition: color var(--aj-transition-color, 0.3s ease);
}

.aj-pole-bar {
  width: 30px;
  height: 3px;
  border-radius: 2px;
  opacity: 0.45;
  transition: opacity var(--aj-transition-color, 0.3s ease);
}

.aj-pole-bar--academic {
  background: linear-gradient(90deg, var(--aj-color-academic-left, #0c7180), #9aa3ad 50%, var(--aj-color-academic-right, #b04f37));
}

.aj-pole-bar--indic {
  background: linear-gradient(90deg, var(--aj-color-indic-dharmic, #a35f22), #9aa3ad 50%, var(--aj-color-indic-modern, #306bb7));
}

/* Active option state */
.aj-lens-option.is-active .aj-lens-name {
  color: #ffffff;
}

.aj-lens-option.is-active .aj-pole-label {
  color: rgba(255,255,255,.64);
}

.aj-lens-option.is-active .aj-pole-bar {
  opacity: 1;
}

.aj-lens-option:focus-visible {
  outline: 2px solid var(--aj-color-navy-primary, #1a3d74);
  outline-offset: 2px;
}

/* Compact variant */
.aj-lens-toggle--compact .aj-lens-option {
  width: 74px;
  padding: 4px 0 5px;
}

/*
 * A 74px segment cannot hold the pole words: at 7.5px the Indic row ("DHARMIC" + bar +
 * "MODERN") measures ~89px, and because only the bar can flex-shrink it collapsed to under
 * a pixel -- the lens colour disappeared on Indic while Academic kept its bar. The gradient
 * carries the pole reading on its own, so the compact variant shows the bar at its full
 * width and leaves the words to the standard toggle.
 */
.aj-lens-toggle--compact .aj-pole-label {
  display: none;
}

/*
 * The full toggle is 272px at its natural size, which overflows a 320px screen once a
 * label sits beside it. Below 480px it takes the width it is given instead; the thumb
 * is a fraction of the track, so it follows without any JS change.
 */
@media (max-width: 480px) {
  .aj-lens-toggle:not(.aj-lens-toggle--compact) {
    width: 100%;
    max-width: 272px;
  }
  .aj-lens-toggle:not(.aj-lens-toggle--compact) .aj-lens-option {
    width: 50%;
    min-width: 0;
  }
}

/* ==========================================================================
   Theel Badge Component
   ========================================================================== */

.aj-theel-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
}

.aj-theel-badge__coin {
  border-radius: var(--aj-radius-full, 50%);
  flex-shrink: 0;
  object-fit: contain;
}

.aj-theel-badge__balance {
  font-family: var(--aj-font-mono, monospace);
  font-weight: 700;
  font-size: var(--aj-fs-12-5, 12.5px);
  color: var(--aj-color-gold-text, #87651f);
}

.aj-theel-badge__label {
  font-size: var(--aj-fs-11-5, 11.5px);
  color: var(--aj-color-ink-secondary, #616a78);
}

.aj-theel-badge--small .aj-theel-badge__coin {
  width: 14px;
  height: 14px;
}

.aj-theel-badge--medium .aj-theel-badge__coin {
  width: 22px;
  height: 22px;
}

.aj-theel-badge--large .aj-theel-badge__coin {
  width: 34px;
  height: 34px;
}

.aj-theel-badge--pill {
  background-color: rgba(220, 179, 82, 0.16);
  border-radius: var(--aj-radius-pill, 20px);
  padding: 4px 10px;
}