/* THE PIVOT · Energy Mapping — page-local styles. Leans on design-system + /pivot/pivot.css */

.em-list { margin-top:28px; border-top:1px solid var(--rule); }
.em-row { display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; padding:14px 0; border-bottom:1px solid var(--hair2); }
.em-row .em-text { font-size:15.5px; color:var(--ink); line-height:1.4; }
.em-choices { display:flex; gap:0; border:1px solid var(--hair); }
.em-choice { cursor:pointer; background:var(--paper); border:none; border-left:1px solid var(--hair); padding:9px 14px; font-family:var(--font-body); font-weight:600; font-size:12px; letter-spacing:.02em; color:var(--mut); transition:.12s; white-space:nowrap; }
.em-choice:first-child { border-left:none; }
.em-choice:hover { color:var(--ink); }
.em-choice:focus-visible { outline:2px solid var(--red); outline-offset:-2px; }
/* Selected states echo the pattern-chart encoding so the rating UI and the
   graph read as one color language: energizes = data2 (steel blue),
   drains = red, neutral = track/faint. */
.em-choice[aria-pressed="true"][data-bucket="energizes"] { background:var(--data2); color:#fff; }
.em-choice[aria-pressed="true"][data-bucket="neutral"] { background:var(--track); color:var(--ink); box-shadow:inset 0 -3px 0 var(--faint); }
.em-choice[aria-pressed="true"][data-bucket="drains"] { background:var(--red); color:#fff; }

.em-cta-row { margin-top:26px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.em-count { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--mut); }

/* pattern chart */
.em-chart { margin-top:28px; }
.em-dim { margin-bottom:16px; }
.em-dim-label { display:flex; justify-content:space-between; font-family:var(--font-body); font-weight:700; font-size:13.5px; margin-bottom:6px; }
.em-dim-label .em-dim-mono { font-family:var(--font-mono); font-weight:400; font-size:10.5px; color:var(--mut); }
.em-bar { display:flex; height:16px; background:var(--track); overflow:hidden; }
/* Three encodings per segment: (1) hue, (2) a distinct fill texture so the
   graph survives greyscale / color-blindness, (3) a letter marker the JS
   writes into wide-enough segments. energizes = data2 solid; drains = red
   diagonal hatch; neutral = faint dotted on track. */
.em-seg { display:flex; align-items:center; justify-content:center; min-width:0; overflow:hidden; }
.em-seg-mark { font-family:var(--font-mono); font-size:9px; font-weight:500; letter-spacing:.04em; line-height:1; opacity:.9; }
.em-seg-energizes { background:var(--data2); }
.em-seg-energizes .em-seg-mark { color:#fff; }
.em-seg-neutral { background:var(--track); background-image:radial-gradient(var(--faint) 1px, transparent 1.4px); background-size:5px 5px; }
.em-seg-neutral .em-seg-mark { color:var(--ink2); }
.em-seg-drains { background:var(--red); background-image:repeating-linear-gradient(45deg, transparent 0 3px, rgba(255,255,255,.32) 3px 5px); }
.em-seg-drains .em-seg-mark { color:#fff; }
.em-legend { display:flex; gap:22px; margin-top:16px; font-family:var(--font-mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--mut); flex-wrap:wrap; }
.em-legend span { display:flex; align-items:center; gap:7px; }
.em-legend i { width:14px; height:14px; display:inline-block; border:1px solid var(--hair); }
.em-legend .k-energizes { background:var(--data2); border-color:var(--data2); }
.em-legend .k-neutral { background:var(--track); background-image:radial-gradient(var(--faint) 1px, transparent 1.4px); background-size:5px 5px; }
.em-legend .k-drains { background:var(--red); border-color:var(--red); background-image:repeating-linear-gradient(45deg, transparent 0 3px, rgba(255,255,255,.32) 3px 5px); }
.em-summary { font-size:16px; color:var(--ink2); line-height:1.6; margin-top:24px; max-width:640px; }

/* buckets breakdown */
.em-buckets { margin-top:28px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:0; }
.em-bucket { border-left:1px solid var(--hair); padding:2px 22px 8px; }
.em-bucket:first-child { border-left:none; padding-left:0; }
.em-bucket h4 { font-family:var(--font-body); font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase; border-bottom:2px solid var(--rule); padding-bottom:7px; margin-bottom:12px; }
.em-tag { font-size:13.5px; color:var(--ink2); line-height:1.4; padding:5px 0; border-bottom:1px solid var(--hair2); }
.em-tag:last-child { border-bottom:none; }
.em-bucket-empty { font-size:13px; color:var(--faint); }

.em-guidance { font-size:16px; color:var(--ink2); line-height:1.6; margin-top:24px; max-width:640px; }

@media (max-width:640px){
  .em-row { grid-template-columns:1fr; gap:10px; align-items:start; }
  .em-choices { width:100%; }
  .em-choice { flex:1; text-align:center; }
  .em-buckets { grid-template-columns:1fr; }
  .em-bucket { border-left:none; padding-left:0; padding-right:0; border-top:1px solid var(--hair2); padding-top:16px; margin-top:6px; }
  .em-bucket:first-child { border-top:none; }
}