/* ============================================================================
   ALIGNMENT MAP COPY — Cartographer's Console
   Depends on colors_and_type.css + shell.css for base tokens and nav styles.
   ========================================================================= */

:root {
  --font-serif-display: 'Newsreader', Georgia, serif;
  --font-serif-italic:  'Newsreader', Georgia, serif;
  --font-sans-tight:    'Inter', system-ui, sans-serif;
  --font-mono:          'JetBrains Mono', 'Fira Mono', monospace;
  --duration-hover:     150ms;
  --duration-page:      280ms;
  --ease-quiet:         cubic-bezier(0.4, 0, 0.2, 1);
  --ease-instrument:    cubic-bezier(0.2, 0, 0, 1);
  --radius-pill:        9999px;

  --dom-inner:              var(--axis-inner);
  --dom-inner-soft:         color-mix(in srgb, var(--axis-inner) 22%, transparent);
  --dom-physical:           var(--axis-physical);
  --dom-physical-soft:      color-mix(in srgb, var(--axis-physical) 22%, transparent);
  --dom-creative:           var(--axis-creative);
  --dom-creative-soft:      color-mix(in srgb, var(--axis-creative) 26%, transparent);
  --dom-interpersonal:      var(--axis-interpersonal);
  --dom-interpersonal-soft: color-mix(in srgb, var(--axis-interpersonal) 22%, transparent);
  --dom-adventure:          var(--axis-adventure);
  --dom-adventure-soft:     color-mix(in srgb, var(--axis-adventure) 22%, transparent);
  --dom-admin:              var(--axis-life-admin);
  --dom-admin-soft:         color-mix(in srgb, var(--axis-life-admin) 22%, transparent);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
body {
  background: var(--parchment-0);
  color: var(--ink-1);
  font-family: var(--font-serif-display);
}

/* ── App shell ───────────────────────────────────────────────────────────── */
.app {
  position: fixed; inset: 0;
  display: grid;
  grid-template-columns: 240px 1fr 360px;
  grid-template-rows: 88px 1fr;
}

/* Left nav sidebar — override shell.css sticky + 280px width */
.app > .sidebar {
  grid-column: 1; grid-row: 1 / -1;
  width: auto; min-width: 0;
  height: auto; min-height: 0;
  position: relative; top: auto;
}

/* ── Legend strip (graph top only) ──────────────────────────────────────── */
.legend-strip {
  grid-column: 2; grid-row: 1;
  display: flex; align-items: center;
  padding: 0 24px;
  gap: 20px;
  border-bottom: 1px solid var(--stone-2);
  background: var(--parchment-0);
  overflow: hidden;
}
.legend-strip__label {
  font-family: var(--font-sans-tight);
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap; flex-shrink: 0;
}
.legend-strip__pills {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: nowrap; overflow: hidden;
}
.legend-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: none; cursor: pointer;
  padding: 6px 4px;
  transition: opacity var(--duration-hover) var(--ease-quiet);
}
.legend-pill__dot { width: 10px; height: 10px; border-radius: var(--radius-pill); flex-shrink: 0; }
.legend-pill__name {
  font-family: var(--font-serif-display);
  font-size: 13px; color: var(--ink-2); white-space: nowrap;
}
.legend-pill:hover { opacity: 0.7; }
.legend-pill--active .legend-pill__name { color: var(--ink-0); font-weight: 500; }

.legend-strip__right {
  margin-left: auto; flex-shrink: 0;
  display: flex; align-items: center; gap: 14px;
}
.legend-strip__date {
  font-family: var(--font-serif-italic); font-style: italic;
  font-size: 13px; color: var(--ink-3); white-space: nowrap;
}

/* Filter chips */
.filter-chips { display: flex; align-items: center; gap: 6px; }
.filter-chip {
  padding: 4px 11px;
  border: 1px solid var(--stone-3);
  background: var(--parchment-2);
  font-family: var(--font-sans-tight);
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-3); cursor: pointer;
  transition: border-color var(--duration-hover), background var(--duration-hover), color var(--duration-hover);
}
.filter-chip:hover { border-color: var(--stone-2); color: var(--ink-2); }
.filter-chip--on {
  background: var(--gold-1); border-color: var(--gold-2);
  color: var(--parchment-0);
}

/* ── Stage / canvas ──────────────────────────────────────────────────────── */
.stage {
  grid-column: 2; grid-row: 2;
  position: relative;
  background:
    radial-gradient(1200px 800px at 50% 60%, rgba(187,152,99,0.04), transparent 70%),
    var(--parchment-0);
  overflow: hidden;
}

/* ── Canvas-floating filter chips ───────────────────────────────────────── */
.canvas-filters {
  position: absolute; top: 16px; left: 16px;
  display: flex; gap: 6px; z-index: 5;
}

/* ── SVG graph ───────────────────────────────────────────────────────────── */
.graph {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; cursor: grab;
}
.graph.dragging { cursor: grabbing; }

.grid-ring        { fill: none; stroke: rgba(120,113,108,0.25); stroke-width: 1; }
.grid-ring--outer { stroke: rgba(60,55,50,0.55); stroke-width: 1.5; }
.grid-ring--accent-gold { stroke: rgba(187,152,99,0.45); stroke-width: 1; }
.grid-radial      { stroke: rgba(120,113,108,0.18); stroke-width: 1; }

.sector-cone { mix-blend-mode: multiply; }

.domain { cursor: pointer; }
.domain__badge {
  stroke: rgba(255,255,255,0.9); stroke-width: 1.5;
  transition: stroke-width var(--duration-hover) var(--ease-quiet);
}
.domain:hover .domain__badge,
.domain--selected .domain__badge { stroke-width: 2.5; }
.domain__name {
  font-family: var(--font-serif-display); font-size: 13px;
  fill: var(--ink-1); letter-spacing: -0.01em; pointer-events: none;
}

.structural-line {
  stroke: none;
  opacity: 0.75;
  transition: opacity var(--duration-hover) var(--ease-quiet);
}
.structural-line--accent { opacity: 1; }

.value { cursor: pointer; }
.value__glow { pointer-events: none; }
.value__star-fill {
  fill: #fff; stroke-width: 1;
  transition: stroke-width var(--duration-hover) var(--ease-quiet);
}
.value:hover .value__star-fill  { stroke-width: 2; }
.value--selected .value__star-fill { stroke-width: 2.5; }
.value__label {
  font-family: var(--font-serif-display); font-size: 15px; font-weight: 700;
  fill: var(--gold-2); letter-spacing: -0.01em; pointer-events: none;
  paint-order: stroke;
  stroke: rgba(255,253,249,0.88); stroke-width: 2px; stroke-linejoin: round;
  filter: drop-shadow(0 1px 4px rgba(255,253,249,0.9)) drop-shadow(0 0 8px rgba(255,253,249,0.6));
}

.practice { cursor: pointer; transition: opacity var(--duration-page) var(--ease-quiet); }
.practice__dot { stroke: #fff; stroke-width: 1.5; }
.practice__line { fill: none; stroke-width: 1.2; stroke-linecap: round; }
.practice__label {
  font-family: var(--font-serif-italic); font-style: italic; font-size: 11px;
  fill: var(--ink-3); letter-spacing: 0.01em; pointer-events: none;
}

.bridge { fill: none; stroke-width: 1.5; opacity: 0;
  transition: opacity var(--duration-page) var(--ease-quiet); }
.bridge--visible { opacity: 0.7; }

@keyframes auraPulse {
  0%, 100% { opacity: var(--aura-min, 0.6); }
  50%       { opacity: var(--aura-max, 1.0); }
}
.aura-pulse { animation: auraPulse 4s ease-in-out infinite; }

/* ── Zoom controls ───────────────────────────────────────────────────────── */
.controls {
  position: absolute; right: 18px; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 8px;
  z-index: 5;
}
.controls__btn {
  width: 40px; height: 40px;
  background: var(--parchment-2); border: 1px solid var(--stone-3);
  color: var(--ink-2); cursor: pointer;
  display: grid; place-items: center;
  transition: border-color var(--duration-hover), background var(--duration-hover), color var(--duration-hover);
}
.controls__btn:hover { border-color: var(--gold-1); color: var(--gold-2); background: var(--parchment-1); }
.controls__btn--accent { background: var(--parchment-2); border-color: var(--gold-1); color: var(--gold-2); }
.controls__zoom-readout {
  text-align: center;
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-3);
  letter-spacing: 0.06em; padding: 2px 0;
}

/* ── Right panel (always open) ───────────────────────────────────────────── */
.right-panel {
  grid-column: 3; grid-row: 1 / -1;
  background: var(--parchment-0);
  border-left: 1px solid var(--stone-2);
  display: flex; flex-direction: column;
  overflow: hidden;
  z-index: 5;
}
.right-panel__head {
  height: 88px;
  border-bottom: 1px solid var(--stone-2);
  padding: 0 24px;
  display: flex; flex-direction: column; justify-content: center;
  gap: 3px; flex-shrink: 0;
}
.right-panel__eyebrow {
  font-family: var(--font-sans-tight);
  font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-3);
  display: flex; align-items: center; gap: 8px;
}
.right-panel__eyebrow .dot { width: 7px; height: 7px; border-radius: var(--radius-pill); flex-shrink: 0; }
.right-panel__title {
  font-family: var(--font-serif-display); font-size: 20px; line-height: 26px;
  color: var(--ink-0); letter-spacing: -0.015em; margin: 0;
}
.right-panel__subtitle {
  font-family: var(--font-serif-italic); font-style: italic;
  font-size: 12px; color: var(--ink-3);
}
.right-panel__body {
  flex: 1; overflow-y: auto;
  padding: 20px 24px 16px;
  display: flex; flex-direction: column; gap: 20px;
}
.right-panel__edit {
  padding: 14px 24px; border-top: 1px solid var(--stone-2);
  background: var(--parchment-1);
  display: flex; align-items: center; gap: 12px;
  cursor: pointer; flex-shrink: 0;
}
.right-panel__edit .label { display: flex; flex-direction: column; gap: 2px; }
.right-panel__edit .label .k {
  font-family: var(--font-sans-tight); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-2);
}
.right-panel__edit .label .v {
  font-family: var(--font-serif-italic); font-style: italic; font-size: 12px; color: var(--ink-3);
}

/* Toggle switch */
.toggle-switch {
  position: relative; width: 36px; height: 20px;
  background: var(--stone-2); border: 1px solid var(--stone-3);
  border-radius: 999px; flex-shrink: 0;
  transition: background var(--duration-hover) var(--ease-quiet);
}
.toggle-switch__knob {
  position: absolute; top: 1px; left: 1px;
  width: 16px; height: 16px;
  background: #fff; border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
  transition: transform var(--duration-hover) var(--ease-quiet);
}
.toggle-switch--on { background: var(--gold-1); border-color: var(--gold-2); }
.toggle-switch--on .toggle-switch__knob { transform: translateX(16px); }

/* Right panel sections */
.panel-section { display: flex; flex-direction: column; gap: 10px; }
.panel-section__title {
  font-family: var(--font-sans-tight);
  font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500;
  padding-bottom: 8px; border-bottom: 1px solid var(--stone-2);
}

/* Stats grid */
.stats-grid { display: flex; flex-direction: column; gap: 0; }
.stat-row {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 9px 0; border-bottom: 1px solid var(--stone-2);
}
.stat-row:last-child { border-bottom: none; }
.stat-row .k {
  font-family: var(--font-sans-tight);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3);
}
.stat-row .v {
  font-family: var(--font-mono); font-size: 14px; color: var(--ink-1); letter-spacing: 0.02em;
}
.stat-row .v--gold { color: var(--gold-2); }

/* Unmapped section */
.unmapped-empty {
  font-family: var(--font-serif-italic); font-style: italic;
  font-size: 13px; color: var(--ink-3); padding: 6px 0;
}
.unmapped-card {
  padding: 10px 12px;
  background: var(--parchment-1); border: 1px solid var(--stone-2);
  cursor: pointer; display: flex; flex-direction: column; gap: 4px;
  transition: border-color var(--duration-hover), background var(--duration-hover);
}
.unmapped-card:hover { border-color: var(--gold-1); }
.unmapped-card--selected { border-color: var(--gold-1); background: var(--gold-soft); }
.unmapped-card__name {
  font-family: var(--font-serif-display); font-size: 13px; color: var(--ink-0); line-height: 18px;
}
.unmapped-card__hint {
  font-family: var(--font-sans-tight); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3);
}

/* Practice list */
.practice-list { border-top: 1px solid var(--stone-2); }
.practice-list__row {
  display: grid; grid-template-columns: 12px 1fr auto auto;
  align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--stone-2);
}
.practice-list__row:last-child { border-bottom: none; }

/* Button variant — clickable rows */
.practice-list__row--btn {
  width: 100%; background: transparent; border: none; cursor: pointer; text-align: left;
  padding: 10px 6px; margin: 0 -6px;
  border-bottom: 1px solid var(--stone-2);
  transition: background var(--duration-hover);
}
.practice-list__row--btn:last-child { border-bottom: none; }
.practice-list__row--btn:hover { background: var(--parchment-1); }
.practice-list__row--btn .arrow {
  font-size: 15px; color: var(--stone-3); opacity: 0;
  transition: opacity var(--duration-hover);
}
.practice-list__row--btn:hover .arrow { opacity: 1; }

.practice-list__row .marker {
  width: 7px; height: 7px; border: 1px solid var(--ink-2);
  background: #fff; transform: rotate(45deg); flex-shrink: 0;
}
.practice-list__row .marker--filled { background: var(--ink-2); }
.practice-list__row .marker--star {
  width: 8px; height: 8px; background: transparent; transform: none;
  clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  border: none; flex-shrink: 0;
}
.practice-list__row .name {
  font-family: var(--font-serif-display); font-size: 13px; color: var(--ink-1);
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.practice-list__row .name__sub {
  font-family: var(--font-serif-italic); font-style: italic;
  font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.practice-list__row .tag {
  font-family: var(--font-sans-tight); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
}

/* Bridge badge */
.bridge-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 11px; border: 1px dashed var(--stone-3);
  background: var(--parchment-1);
  font-family: var(--font-serif-display); font-size: 13px; color: var(--ink-1);
}
.bridge-badge .dot { width: 8px; height: 8px; border-radius: var(--radius-pill); flex-shrink: 0; }

/* Button variant — clickable bridge/domain chips */
.bridge-badge--btn {
  width: 100%; cursor: pointer; justify-content: space-between;
  transition: border-color var(--duration-hover), background var(--duration-hover);
}
.bridge-badge--btn:hover { border-color: var(--gold-1); background: var(--gold-soft); }
.bridge-badge--btn .arrow {
  font-size: 15px; color: var(--stone-3); opacity: 0;
  transition: opacity var(--duration-hover);
}
.bridge-badge--btn:hover .arrow { opacity: 1; }

/* Edit mode assign zone */
.assign-zone {
  border: 1px dashed var(--gold-1); background: var(--gold-soft);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
}
.assign-zone__prompt {
  font-family: var(--font-serif-italic); font-style: italic;
  font-size: 13px; color: var(--ink-2); margin: 0;
}
.assign-zone__chip {
  display: inline-flex; align-items: center; padding: 6px 10px;
  background: #fff; border: 1px solid var(--gold-1);
  font-family: var(--font-serif-display); font-size: 13px; color: var(--ink-1);
}
.assign-zone__btn {
  align-self: flex-start; padding: 8px 13px;
  background: var(--gold-1); color: var(--gold-3); border: 1px solid var(--gold-1);
  font-family: var(--font-sans-tight); font-size: 10px; letter-spacing: 0.24em;
  text-transform: uppercase; cursor: pointer;
}
.assign-zone__btn:hover { background: var(--gold-2); border-color: var(--gold-2); }

/* Reading hint */
.reading-hint {
  font-family: var(--font-serif-italic); font-style: italic;
  font-size: 13px; line-height: 19px; color: var(--ink-3); margin: 0;
}

/* Loading */
.app--loading {
  display: flex; align-items: center; justify-content: center;
  position: fixed; inset: 0; background: var(--parchment-0);
}
.loading-mark {
  font-family: var(--font-serif-italic); font-style: italic;
  font-size: 16px; color: var(--ink-3);
}

/* ── Selection rings ─────────────────────────────────────────────────────── */
@keyframes select-pulse {
  0%, 100% { stroke-opacity: 0.9; }
  50%       { stroke-opacity: 0.25; }
}
@keyframes select-pulse-outer {
  0%, 100% { stroke-opacity: 0.35; }
  50%       { stroke-opacity: 0.08; }
}
.select-ring {
  pointer-events: none;
  stroke-opacity: 0.9;
}
.select-ring--outer {
  stroke-opacity: 0.35;
}