/*
 * AXIS Studio — Base Styles
 */

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--c-text-dark);
  background: var(--c-navy);
}

img, video {
  display: block;
  max-width: 100%;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }


/* ── Utilities ──────────────────────────────────────────────── */

.u-serif   { font-family: var(--font-serif); }
.u-mono    { font-family: var(--font-mono); }
.u-amber   { color: var(--c-amber); }
.u-cream   { color: var(--c-text-navy); }
.u-mid     { color: var(--c-text-mid); }

/* Amber horizontal rule */
.u-rule {
  display: block;
  width: 2.5rem;
  height: 1px;
  background: var(--c-amber);
  flex-shrink: 0;
}

/* Operator glyph */
.u-glyph {
  font-family: var(--font-mono);
  font-weight: 400;
  line-height: 1;
}

/* Amber link */
.u-link {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--c-amber);
  transition: opacity var(--ease-default);
}
.u-link:hover { opacity: 0.7; text-decoration: underline; text-underline-offset: 3px; }

/* Section label: amber, all-caps, widely tracked */
.u-section-label {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--c-amber);
}

/* Continue button */
.btn-continue {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-8);
  background: var(--c-amber);
  color: var(--c-navy);
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  transition: opacity var(--ease-default);
}
.btn-continue:hover { opacity: 0.85; }


/* ── Operator grid (2×5) ────────────────────────────────────── */

.operator-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

/*
 * Operator color rule:
 * On ivory/cream: operators render in deep AXIS navy — semantic, not decorative.
 * On navy: operators may use muted gold.
 * Amber as accent only (hover, selected state).
 */

.operator-cell {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--c-navy);          /* deep navy on cream */
  background: var(--c-cream-dim);
  border: 1px solid rgba(169, 116, 57, 0.2);
  padding: var(--space-2) 0;
  text-align: center;
  line-height: 1;
}

/* On navy backgrounds (e.g., S01 learn panel), operators are muted gold */
.on-navy .operator-cell {
  color: rgba(240, 160, 32, 0.75);
  background: rgba(240, 160, 32, 0.06);
  border-color: rgba(240, 160, 32, 0.15);
}