/* ============================================================
   Narrative frame profiles - skyline small multiples

   One mini column chart per mindset, frames in a shared left-to-right
   order, trademarked pills as a shared axis at the TOP and BOTTOM,
   mindset label to the left in that mindset's brand colour. Columns
   are filled with their pill's own sampled colour.

   Pills are sized by HEIGHT only (width auto, never max-width) so the
   aspect ratio is never distorted. Scoped to .chart--frame-skyline.

   Defaults here are slide-scale (the workshop frame); report-context
   overrides at the bottom are scoped to the report host so the two
   never collide.
   ============================================================ */

.chart--frame-skyline {
  --fp-label: 240px;        /* left mindset-label column width */
  --fp-gap: 12px;           /* gap between frame columns */
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  padding: 40px 44px;
  /* Everything in this chart (mindset labels, axis labels, value
     numbers) uses the page's headline font, Helvetica Neue. */
  font-family: var(--font-display, 'Helvetica Neue', Helvetica, 'Inter', Arial, sans-serif);
  color: var(--chart-grey-text, #2b2b2b);
}

.fp-grid {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ---- Frame axis (top + bottom), text labels ---- */
.fp-axis {
  display: flex;
  gap: var(--fp-gap);
}
.fp-axis--top    { align-items: flex-end;   margin-bottom: 12px; }
.fp-axis--bottom { align-items: flex-start; margin-top: 12px; }
.fp-axis__spacer { flex: 0 0 var(--fp-label); }
.fp-axis__cols {
  flex: 1;
  display: flex;
  gap: var(--fp-gap);
}
.fp-axis__slot {
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 0;
  padding: 0 2px;
}
.fp-axis--top .fp-axis__slot    { align-items: flex-end; }
.fp-axis--bottom .fp-axis__slot { align-items: flex-start; }

/* Text frame label, coloured per column by JS. Wraps within its
   column rather than overflowing. */
.fp-axis__txt {
  display: block;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.12;
  letter-spacing: -0.005em;
  overflow-wrap: break-word;
  color: #444;
}
/* Single-word labels stay on one line (centred, overflowing into the
   empty gaps if a touch too wide) rather than breaking mid-word. */
.fp-axis__txt--1line { white-space: nowrap; }

/* Quiet link wrapping a label - no affordance at rest, faint dim on
   hover, focus ring for keyboard users. */
.fp-axis__link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border-radius: 4px;
  transition: opacity 0.15s ease;
}
.fp-axis__link:hover { opacity: 0.68; }
.fp-axis__link:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

/* ---- Mindset rows ---- */
.fp-row {
  flex: 1;
  display: flex;
  gap: var(--fp-gap);
  min-height: 0;
}
.fp-row__label {
  flex: 0 0 var(--fp-label);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
  padding-right: 10px;
  font-weight: 800;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.fp-sky {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: var(--fp-gap);
  border-bottom: 1.5px solid #dadada;
}
.fp-col {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.fp-bar {
  position: relative;
  width: 72%;
  min-height: 2px;
  border-radius: 3px 3px 0 0;
}

/* Value labels. Inside tall columns (white/dark for contrast, set by
   JS); just above short columns in the column's own colour. The unit
   is on every label since there's no axis. */
.fp-val {
  position: absolute;
  left: -10px;
  right: -10px;
  text-align: center;
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  pointer-events: none;
}
.fp-val--inside { top: 7px; color: #ffffff; }
.fp-val--above  { bottom: 100%; margin-bottom: 4px; color: #333333; }

/* ============================================================
   Report context overrides

   With text frame labels instead of the trademarked pills, the chart
   fits inside the 720px report text column - no width breakout needed.
   Scoped to the report host id+class so the workshop host
   (.ws-chart-host) is untouched.
   ============================================================ */
#chart-frame-profiles.chart-container {
  height: 600px;
}
#chart-frame-profiles.chart-container .chart--frame-skyline {
  --fp-label: 100px;
  --fp-gap: 4px;
  padding: 2px 3px;
}
#chart-frame-profiles.chart-container .fp-axis--top    { margin-bottom: 8px; }
#chart-frame-profiles.chart-container .fp-axis--bottom { margin-top: 8px; }
/* Narrower label column + smaller mindset names + zero slot padding
   hand width back to the frame-label columns, so the shorter frame
   names (incl. Inauthentic, ~53px) sit on one line. */
#chart-frame-profiles.chart-container .fp-axis__slot { padding: 0; }
#chart-frame-profiles.chart-container .fp-axis__txt { font-size: 10px; line-height: 1.1; }
#chart-frame-profiles.chart-container .fp-row__label { font-size: 14px; padding-right: 6px; }
#chart-frame-profiles.chart-container .fp-bar { width: 72%; }
#chart-frame-profiles.chart-container .fp-val { font-size: 12px; left: -6px; right: -6px; }
#chart-frame-profiles.chart-container .fp-val--inside { top: 5px; }
#chart-frame-profiles.chart-container .fp-val--above { margin-bottom: 3px; }