/* ============================================================
   Capability Explorer (See / Know / Talk / Act)
   Ported from the design handoff. ALL design tokens and rules are
   scoped under .cap-x so nothing collides with operate.css.
   ============================================================ */

.cap-x {
  /* paper / ink */
  --paper:        #F7F5F1;
  --paper-2:      #FFFFFF;
  --paper-3:      #EFEBE3;
  --ink:          #241C2E;
  --fg-1:         #1A1422;
  --fg-2:         #4A4255;
  --fg-3:         #7A7280;
  --fg-4:         #B5AFB8;
  --rule:         #E4DFD6;
  --rule-strong:  #C8C2B7;
  /* accent */
  --orange-50:    #FCEBE3;
  --orange-100:   #F8D7C6;
  --orange-300:   #F4A079;
  --orange-500:   #F07848;
  --orange-600:   #E0612F;
  --orange-700:   #C5552A;
  --amber-400:    #F9A03F;
  --grad-orange:  linear-gradient(135deg, #F9A03F 0%, #F07848 60%, #E0612F 100%);
  --cyan-500:     #00B0E0;
  /* type */
  --font-serif:   'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  --tracking-eyebrow: 0.16em;
  /* spacing / radius / shadow / motion */
  --space-4: 16px; --space-6: 32px;
  --radius-3: 8px; --radius-5: 22px;
  --shadow-1: 0 1px 0 rgba(10,10,10,0.04), 0 1px 2px rgba(10,10,10,0.06);
  --shadow-2: 0 2px 8px rgba(36,28,46,0.06), 0 14px 40px rgba(36,28,46,0.08);
  --shadow-3: 0 18px 60px rgba(36,28,46,0.16);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  font-family: var(--font-sans);
}
.cap-x *, .cap-x *::before, .cap-x *::after { box-sizing: border-box; }
.cap-x :focus-visible { outline: 2px solid var(--cyan-500); outline-offset: 2px; border-radius: 4px; }

/* Explorer row */
.cap-x .explorer {
  display: flex;
  gap: 14px;
  height: clamp(560px, 62vh, 640px);
}
@media (max-width: 880px) {
  .cap-x .explorer { flex-direction: column; height: auto; }
}

.cap-x .pillar {
  position: relative;
  flex: 1 1 0;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-5);
  overflow: hidden;
  cursor: pointer;
  transition: flex-grow .55s var(--ease-out), box-shadow .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
  box-shadow: var(--shadow-1);
  min-width: 0;
}
.cap-x .pillar:hover { box-shadow: var(--shadow-2); }
.cap-x .pillar.active {
  flex: 5.5 1 0;
  box-shadow: var(--shadow-3);
  border-color: var(--orange-100);
}
.cap-x .pillar.dim { background: var(--paper); }
@media (max-width: 880px) {
  .cap-x .pillar, .cap-x .pillar.active { flex: none; }
}

/* Collapsed rail — vertical spine on desktop, full card on mobile */
.cap-x .pillar-face {
  position: absolute;
  inset: 0;
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity .3s var(--ease);
}
.cap-x .pillar.active .pillar-face { opacity: 0; pointer-events: none; }

.cap-x .pillar-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--orange-50);
  color: var(--orange-600);
  flex-shrink: 0;
  transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.cap-x .pillar:hover .pillar-icon { transform: translateY(-3px); background: var(--orange-100); }

.cap-x .rail-mid { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.cap-x .pillar-name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 0.01em;
  color: var(--fg-1);
  writing-mode: vertical-rl;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: color .25s var(--ease);
}
.cap-x .pillar:hover .pillar-name { color: var(--orange-700); }
.cap-x .pillar-name .chev { writing-mode: horizontal-tb; color: var(--fg-4); transition: transform .3s var(--ease), color .3s var(--ease); }
.cap-x .pillar:hover .pillar-name .chev { color: var(--orange-500); transform: translateY(3px); }
.cap-x .pillar-cat {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--orange-600);
  writing-mode: vertical-rl;
  flex-shrink: 0;
}
.cap-x .pillar-blurb { display: none; }

@media (max-width: 880px) {
  .cap-x .pillar-face { position: relative; flex-direction: column; align-items: flex-start; padding: 24px; }
  .cap-x .pillar.active .pillar-face { display: none; }
  .cap-x .rail-mid { flex: none; display: block; }
  .cap-x .pillar-name { writing-mode: horizontal-tb; font-size: 26px; margin-bottom: 6px; }
  .cap-x .pillar-name .chev { transform: rotate(-90deg); }
  .cap-x .pillar-cat { writing-mode: horizontal-tb; margin-top: 10px; }
  .cap-x .pillar-blurb { display: block; margin-top: 14px; color: var(--fg-2); font-size: 15px; line-height: 1.5; }
}

/* Expanded panel */
.cap-x .pillar-panel {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease) .12s;
}
.cap-x .pillar.active .pillar-panel { opacity: 1; pointer-events: auto; }
@media (max-width: 880px) {
  .cap-x .pillar-panel { grid-template-columns: 1fr; }
  .cap-x .pillar.active .pillar-panel { position: relative; }
}

.cap-x .panel-stage {
  position: relative;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(240,120,72,0.05), transparent 55%),
    var(--paper);
  border-right: 1px solid var(--rule);
  overflow: hidden;
  min-height: 300px;
}
@media (max-width: 880px) {
  .cap-x .panel-stage { border-right: none; border-bottom: 1px solid var(--rule); min-height: 260px; }
}
.cap-x .panel-stage canvas { display: block; width: 100%; height: 100%; }

.cap-x .panel-body {
  padding: 30px 32px;
  display: block;
  min-width: 0;
  overflow-y: auto;
}
.cap-x .panel-body .pcat {
  font-size: 11px; font-weight: 600; letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--fg-3); margin-bottom: 10px;
}
.cap-x .panel-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(24px, 2.1vw, 30px);
  line-height: 1.16;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: var(--fg-1);
}
.cap-x .panel-title i { color: var(--orange-600); }
.cap-x .panel-desc { color: var(--fg-2); font-size: 15px; line-height: 1.55; margin: 0 0 22px; max-width: 46ch; }

.cap-x .surface-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius-3);
  overflow: hidden;
  margin-bottom: 22px;
}
.cap-x .surface-grid.one-col { grid-template-columns: 1fr; }
.cap-x .surface { background: var(--paper-2); padding: 12px 15px; transition: background .2s var(--ease); }
.cap-x .surface:hover { background: var(--orange-50); }
.cap-x .surface .s-name {
  font-weight: 600; font-size: 14px; color: var(--fg-1);
  display: flex; align-items: center; gap: 8px; margin-bottom: 3px;
}
.cap-x .surface .s-name .dotmark { width: 6px; height: 6px; border-radius: 50%; background: var(--orange-500); flex-shrink: 0; }
.cap-x .surface .s-desc { font-size: 12.5px; color: var(--fg-3); line-height: 1.4; }

.cap-x .hood { margin-top: 24px; border-top: 1px solid var(--rule); padding-top: 16px; }
.cap-x .hood .hlabel { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); letter-spacing: 0.04em; margin-bottom: 6px; }
.cap-x .hood .htext { font-size: 13.5px; color: var(--fg-2); line-height: 1.5; }
.cap-x .hood .htext b { color: var(--fg-1); font-weight: 600; }

.cap-x .panel-foot { margin-top: 18px; display: flex; align-items: center; gap: 16px; }
.cap-x .link-arrow {
  color: var(--orange-700);
  font-weight: 600;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}
.cap-x .link-arrow svg { transition: transform .2s var(--ease); }
.cap-x .link-arrow:hover svg { transform: translateX(4px); }

/* progress dots + hint */
.cap-x .explorer-foot {
  margin-top: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.cap-x .dots { display: flex; gap: 8px; }
.cap-x .dots button {
  width: 9px; height: 9px; border-radius: 50%;
  border: none; padding: 0; cursor: pointer;
  background: var(--rule-strong);
  transition: background .25s var(--ease), transform .25s var(--ease), width .25s var(--ease);
}
.cap-x .dots button.on { background: var(--orange-500); width: 26px; border-radius: 5px; }
.cap-x .explorer-hint { font-size: 13.5px; color: var(--fg-3); font-style: italic; font-family: var(--font-serif); }

@media (prefers-reduced-motion: reduce) {
  .cap-x * { transition-duration: .01ms !important; }
}