/* ==========================================================================
   ENERGY FORECAST — experimental pillar stylesheet (pass 2)

   Kept in its own file so the experimental pillar stays additive and can be
   removed by deleting one <link>. Uses the tokens declared in styles.css
   (--gold, --teal, --ember, --blue, glass tokens, display fonts).

   Pass 2 intent: a scientific instrument for navigating personal time.
   One thing is loudest per screen; everything else recedes in clear steps.
   Hierarchy is carried by scale and space, not by boxes and borders.
   ========================================================================== */

.product-shell--energy-forecast {
  background:
    radial-gradient(1300px 680px at 76% -10%, rgba(105, 183, 173, 0.06), transparent 62%),
    radial-gradient(1100px 600px at 6% 2%, rgba(213, 182, 109, 0.055), transparent 58%),
    rgba(7, 8, 10, 0.98);
}

.energy-forecast {
  --ef-wood: #7ea87f;
  --ef-fire: #cb765e;
  --ef-earth: #d5b66d;
  --ef-metal: #b6bdc2;
  --ef-water: #6f90b7;
  --ef-hairline: rgba(213, 182, 109, 0.16);
  --ef-rule: rgba(41, 46, 49, 0.8);
  --ef-panel: linear-gradient(180deg, rgba(18, 20, 23, 0.6), rgba(10, 11, 13, 0.46));

  display: flex;
  max-width: 1280px;
  flex-direction: column;
  gap: 40px;
  padding: 34px 40px 96px;
  margin: 0 auto;
}

/* ---- header ------------------------------------------------------------ */

.ef-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
}

.ef-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  color: var(--muted);
  font-family: var(--font-meta);
  font-size: 10.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.ef-badge {
  padding: 2px 8px;
  border: 1px solid rgba(203, 118, 94, 0.5);
  border-radius: var(--radius-pill);
  color: var(--ember);
  font-size: 9px;
  letter-spacing: 0.18em;
}

.ef-header h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(34px, 3.8vw, 54px);
  font-weight: 400;
  letter-spacing: 0.012em;
  line-height: 1.02;
}

.ef-subtitle {
  max-width: 64ch;
  margin: 10px 0 0;
  color: var(--text-soft);
  font-size: 13.5px;
  line-height: 1.6;
}

.ef-controls { display: flex; align-items: center; gap: 12px; }

.ef-view-switch {
  display: flex;
  padding: 4px;
  border: 1px solid var(--ef-hairline);
  border-radius: var(--radius-pill);
  background: rgba(4, 5, 6, 0.6);
  backdrop-filter: blur(var(--glass-blur-soft));
}

.ef-view-button {
  padding: 9px 20px;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--muted);
  background: transparent;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease;
}

.ef-view-button:hover { color: var(--text); }
.ef-view-button.is-active { color: #0b0c0d; background: var(--gold); }

.ef-stepper { display: flex; gap: 6px; }

.ef-step-button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--ef-hairline);
  border-radius: 50%;
  color: var(--text-soft);
  background: rgba(4, 5, 6, 0.55);
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease;
}

.ef-step-button:hover { border-color: var(--glass-border-strong); color: var(--gold); }

.ef-body { display: flex; flex-direction: column; gap: 40px; }

/* ---- notices ----------------------------------------------------------- */

.ef-notice {
  padding: 40px;
  border: 1px solid var(--ef-hairline);
  border-radius: var(--radius-panel);
  background: var(--ef-panel);
  text-align: center;
}

.ef-notice h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: 24px; font-weight: 400; }
.ef-notice p { max-width: 70ch; margin: 0 auto; color: var(--text-soft); font-size: 13.5px; line-height: 1.6; }
.ef-notice.is-error { border-color: rgba(183, 107, 107, 0.4); }
.ef-notice.is-nodata { border-style: dashed; }
.ef-notice-hint { margin-top: 10px !important; color: var(--muted) !important; font-size: 12px !important; }

.ef-spinner {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-bottom: 12px;
  border: 1px solid rgba(213, 182, 109, 0.25);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: ef-spin 900ms linear infinite;
}

@keyframes ef-spin { to { transform: rotate(360deg); } }

.ef-tension-flag {
  padding: 12px 18px;
  border-left: 2px solid rgba(203, 118, 94, 0.6);
  color: var(--text-soft);
  font-size: 12.5px;
  line-height: 1.6;
}

.ef-tension-flag strong { color: var(--ember); font-weight: 500; }

/* ---- A. hero ----------------------------------------------------------- */

.ef-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.95fr);
  gap: 44px;
  align-items: stretch;
}

.ef-hero-eyebrow {
  margin: 0 0 14px;
  color: var(--muted);
  font-family: var(--font-meta);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* The single loudest element on every view. */
.ef-hero-theme {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(40px, 4.6vw, 66px);
  font-weight: 400;
  letter-spacing: 0.006em;
  line-height: 1;
}

.ef-hero-codominant { margin: 12px 0 0; color: var(--ember); font-size: 12.5px; }
.ef-hero-codominant strong { font-weight: 500; }

.ef-hero-ambient {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 14px 0 0;
  color: var(--text-soft);
  font-size: 14px;
}

.ef-hero-ambient em {
  color: var(--muted);
  font-family: var(--font-meta);
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.ef-chip-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 0; padding: 0; list-style: none; }

.ef-chip {
  padding: 4px 11px;
  border: 1px solid rgba(105, 183, 173, 0.26);
  border-radius: var(--radius-pill);
  color: var(--teal);
  font-family: var(--font-meta);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ef-hero-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 30px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--ef-rule);
}

.ef-hero-fact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.5;
}

.ef-hero-fact.is-wide { grid-column: 1 / -1; }

.ef-hero-fact em {
  flex: 0 0 100%;
  color: var(--muted);
  font-family: var(--font-meta);
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ef-expression-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.ef-expression { padding: 2px 0 2px 15px; border-left: 2px solid var(--line-strong); }
.ef-expression.is-constructive { border-left-color: var(--teal); }
.ef-expression.is-shadow { border-left-color: var(--ember); }

.ef-expression span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-family: var(--font-meta);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.ef-expression p { margin: 0; color: var(--text-soft); font-size: 13px; line-height: 1.6; }
.ef-footnote { margin: 22px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }

/* Tier-1 meters, beside the signature. The panel spans the hero's full height
   with the arcs optically centred, so the right column never leaves a gap. */
.ef-hero-meters {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 24px;
  border: 1px solid var(--ef-rule);
  border-radius: var(--radius-panel);
  background: rgba(6, 7, 8, 0.42);
}

.ef-primary-gauges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.ef-gauge { margin: 0; text-align: center; }
.ef-gauge svg { width: 100%; height: auto; overflow: visible; }

.ef-gauge-track { fill: none; stroke: rgba(240, 238, 232, 0.09); stroke-width: 2; }
.ef-gauge-value { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; }
.ef-gauge-head { fill: var(--gold); }
.ef-gauge-tick { stroke: rgba(240, 238, 232, 0.1); stroke-width: 1; }
.ef-gauge-tick.is-major { stroke: rgba(240, 238, 232, 0.24); }

.ef-gauge--convergence .ef-gauge-value { stroke: var(--teal); }
.ef-gauge--convergence .ef-gauge-head { fill: var(--teal); }
.ef-gauge--charge .ef-gauge-value { stroke: var(--ember); }
.ef-gauge--charge .ef-gauge-head { fill: var(--ember); }

.ef-gauge-number { fill: var(--text); font-family: var(--font-display); font-size: 32px; letter-spacing: 0.01em; }
.ef-gauge-scale { fill: var(--muted); font-family: var(--font-meta); font-size: 9px; letter-spacing: 0.12em; }

.ef-gauge figcaption { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }

.ef-gauge-label {
  color: var(--text-soft);
  font-family: var(--font-meta);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ef-gauge-caption { color: var(--muted); font-size: 9px; letter-spacing: 0.08em; }

/* ---- B. bipolar balances ----------------------------------------------- */

.ef-balances { padding-top: 6px; }
.ef-axis-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }

.ef-axis-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }

.ef-axis-label {
  color: var(--text-soft);
  font-family: var(--font-meta);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ef-axis-value { color: var(--muted); font-family: var(--font-display); font-size: 15px; }
.ef-axis.is-positive .ef-axis-value, .ef-axis.is-negative .ef-axis-value { color: var(--blue); }

.ef-axis-track { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }

.ef-axis-pole {
  color: var(--muted);
  font-family: var(--font-meta);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 160ms ease;
}

.ef-axis.is-negative .ef-axis-pole.is-negative,
.ef-axis.is-positive .ef-axis-pole.is-positive { color: var(--text); }

.ef-axis-rail { position: relative; height: 3px; border-radius: 3px; background: rgba(240, 238, 232, 0.08); }

.ef-axis-centre {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 50%;
  width: 1px;
  background: rgba(240, 238, 232, 0.26);
}

.ef-axis-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--ef-from);
  right: calc(100% - var(--ef-to));
  border-radius: 3px;
  background: var(--blue);
  opacity: 0.55;
}

.ef-axis-marker {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(7, 8, 10, 0.9);
  border-radius: 50%;
  background: var(--blue);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px rgba(111, 144, 183, 0.16);
}

.ef-axis.is-neutral .ef-axis-marker { background: var(--muted); box-shadow: none; }
.ef-axis-reading { margin: 10px 0 0; color: var(--muted); font-size: 11px; letter-spacing: 0.02em; }

/* ---- panels ------------------------------------------------------------ */

.ef-panel {
  padding: 26px 28px;
  border: 1px solid var(--ef-rule);
  border-radius: var(--radius-panel);
  background: rgba(9, 10, 12, 0.44);
}

.ef-panel--hero-chart {
  padding: 28px 30px 22px;
  border-color: var(--ef-hairline);
  background: var(--ef-panel);
}

.ef-panel-head { margin-bottom: 20px; }

.ef-panel-head h3 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-meta);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.ef-panel-head p { margin: 7px 0 0; color: var(--muted); font-size: 12px; }

.ef-two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.ef-empty { margin: 0; color: var(--muted); font-size: 12.5px; font-style: italic; }

/* ---- charts ------------------------------------------------------------ */

.ef-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 14px;
  color: var(--muted);
  font-family: var(--font-meta);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ef-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.ef-legend-item::before { width: 14px; height: 2px; background: currentcolor; content: ''; }
.ef-legend-item.is-intensity { color: var(--gold); }
.ef-legend-item.is-convergence { color: var(--teal); }
.ef-legend-item.is-missing { color: var(--muted); }
.ef-legend-item.is-missing::before { height: 8px; background: repeating-linear-gradient(45deg, rgba(133, 139, 141, 0.5) 0 2px, transparent 2px 4px); }
.ef-legend-item.is-event { color: var(--text-soft); }
.ef-legend-item.is-event::before { width: 6px; height: 6px; border-radius: 50%; }
.ef-legend-item.is-eclipse { color: var(--ember); }
.ef-legend-item.is-eclipse::before { width: 6px; height: 6px; border-radius: 50%; }
.ef-legend-item.is-station { color: var(--blue); }
.ef-legend-item.is-station::before { width: 6px; height: 6px; border-radius: 50%; }

.ef-chart-svg, .ef-ribbon-svg { display: block; width: 100%; height: auto; }

.ef-chart-grid { stroke: rgba(240, 238, 232, 0.055); stroke-width: 1; }
.ef-chart-axis-label, .ef-chart-tick { fill: var(--muted); font-family: var(--font-meta); font-size: 10px; }
.ef-chart-tick.is-selected { fill: var(--gold); }

/* Intensity dominates; convergence is deliberately thinner and dashed. */
.ef-chart-line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.ef-chart-line.is-intensity { stroke: var(--gold); stroke-width: 2.4; }
.ef-chart-line.is-convergence { stroke: var(--teal); stroke-width: 1.1; stroke-dasharray: 3 4; opacity: 0.6; }
.ef-chart-area { fill: rgba(213, 182, 109, 0.08); stroke: none; }
.ef-chart-missing { fill: rgba(133, 139, 141, 0.045); stroke: rgba(133, 139, 141, 0.16); stroke-width: 1; stroke-dasharray: 3 3; }
.ef-chart-peak { fill: var(--bg); stroke: var(--gold); stroke-width: 1.6; }
.ef-chart-peak-label { fill: var(--gold); font-family: var(--font-display); font-size: 11px; }

.ef-chart-selection-band { fill: rgba(213, 182, 109, 0.07); }
.ef-chart-selection { stroke: rgba(213, 182, 109, 0.5); stroke-width: 1; }
.ef-chart-selection-dot { fill: var(--gold); stroke: rgba(7, 8, 10, 0.95); stroke-width: 1.6; }
.ef-chart-selection-cap rect { fill: var(--gold); }
.ef-chart-selection-cap text { fill: #0b0c0d; font-family: var(--font-meta); font-size: 10px; letter-spacing: 0.08em; }

.ef-chart-event line { stroke: rgba(240, 238, 232, 0.26); stroke-width: 1; }
.ef-chart-event circle { fill: var(--text-soft); }
.ef-chart-event.is-eclipse circle { fill: var(--ember); }
.ef-chart-event.is-station circle { fill: var(--blue); }
.ef-chart-event.is-lunation circle { fill: var(--gold); }
.ef-chart-event.is-return circle { fill: var(--teal); }

.ef-chart-hover { fill: transparent; pointer-events: none; transition: fill 120ms ease; }
.ef-chart-hit { fill: transparent; cursor: pointer; }
.ef-chart-column:hover .ef-chart-hover { fill: rgba(240, 238, 232, 0.035); }
.ef-chart-column.is-empty:hover .ef-chart-hover { fill: transparent; }
.ef-chart-hit.is-empty { cursor: default; }

.ef-ribbon-month-hit { fill: transparent; cursor: pointer; }
.ef-ribbon-month:hover .ef-ribbon-month-hit { fill: rgba(213, 182, 109, 0.06); }
.ef-ribbon-month.is-empty .ef-ribbon-month-hit { cursor: default; }
.ef-ribbon-month.is-selected .ef-ribbon-month-hit { fill: rgba(213, 182, 109, 0.1); }
.ef-ribbon-divider { stroke: rgba(240, 238, 232, 0.08); stroke-width: 1; }
.ef-ribbon-month-label { fill: var(--muted); font-family: var(--font-meta); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.ef-ribbon-month.is-selected .ef-ribbon-month-label { fill: var(--gold); }
.ef-ribbon-month.is-empty .ef-ribbon-month-label { fill: rgba(133, 139, 141, 0.5); }
.ef-ribbon-empty-label { fill: rgba(133, 139, 141, 0.5); font-family: var(--font-meta); font-size: 10px; letter-spacing: 0.26em; }
.ef-ribbon-marker line { stroke: rgba(240, 238, 232, 0.22); stroke-width: 1; }
.ef-ribbon-marker.is-eclipse circle { fill: var(--ember); }
.ef-ribbon-marker.is-station circle { fill: var(--blue); }

/* ---- week strip -------------------------------------------------------- */

.ef-week-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }

.ef-week-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 14px 8px 16px;
  border: 1px solid var(--ef-rule);
  border-radius: var(--radius-control);
  background: rgba(6, 7, 8, 0.4);
  color: inherit;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.ef-week-column:hover { border-color: var(--glass-border-strong); transform: translateY(-2px); }
.ef-week-column.is-selected { border-color: var(--gold); background: rgba(213, 182, 109, 0.07); }
.ef-week-column.is-empty { border-style: dashed; cursor: default; opacity: 0.5; }

.ef-week-day { color: var(--muted); font-family: var(--font-meta); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; }
.ef-week-date { color: var(--text); font-family: var(--font-display); font-size: 26px; line-height: 1; }

.ef-week-bars { display: flex; align-items: flex-end; justify-content: center; gap: 5px; width: 100%; height: 84px; }
.ef-week-bar { width: 10px; border-radius: 2px 2px 0 0; }
.ef-week-bar.is-intensity { background: linear-gradient(180deg, var(--gold), rgba(213, 182, 109, 0.24)); }
.ef-week-bar.is-convergence { background: linear-gradient(180deg, rgba(105, 183, 173, 0.75), rgba(105, 183, 173, 0.16)); }
.ef-week-empty-note { align-self: center; color: var(--muted); font-size: 10px; font-style: italic; }
.ef-week-score { color: var(--gold); font-family: var(--font-display); font-size: 17px; }
.ef-week-theme { color: var(--text-soft); font-size: 9.5px; line-height: 1.35; text-align: center; }

/* ---- calendar ---------------------------------------------------------- */

.ef-calendar-head, .ef-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.ef-calendar-head { margin-bottom: 10px; }

.ef-calendar-head span {
  color: var(--muted);
  font-family: var(--font-meta);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
}

.ef-day {
  position: relative;
  display: flex;
  min-height: 96px;
  flex-direction: column;
  gap: 2px;
  padding: 9px 10px 10px;
  border: 1px solid rgba(41, 46, 49, 0.7);
  border-radius: var(--radius-control);
  background:
    linear-gradient(180deg, rgba(213, 182, 109, calc(var(--ef-wash, 0) * 0.3)), rgba(213, 182, 109, calc(var(--ef-wash, 0) * 0.07))),
    rgba(6, 7, 8, 0.5);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease;
}

.ef-day:hover { border-color: var(--glass-border-strong); transform: translateY(-2px); }
.ef-day.is-selected { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(213, 182, 109, 0.45); }
.ef-day.is-outside { opacity: 0.28; }
.ef-day.is-peak { border-color: rgba(213, 182, 109, 0.5); }
.ef-day.is-peak .ef-day-intensity { color: var(--gold); }

.ef-day.is-nodata {
  border-style: dashed;
  background:
    repeating-linear-gradient(45deg, rgba(133, 139, 141, 0.045) 0 4px, transparent 4px 8px),
    rgba(6, 7, 8, 0.3);
  cursor: default;
}

.ef-day-head { display: flex; align-items: center; justify-content: space-between; }
.ef-day-number { color: var(--muted); font-family: var(--font-meta); font-size: 11px; }
.ef-day.is-nodata .ef-day-number { color: rgba(133, 139, 141, 0.55); }
.ef-day-intensity { margin-top: 2px; color: var(--text); font-family: var(--font-display); font-size: 26px; line-height: 1; }
.ef-day-theme { flex: 1; margin-top: 3px; color: var(--text-soft); font-size: 10px; line-height: 1.3; }

.ef-day-event { width: 5px; height: 5px; border-radius: 50%; background: var(--text-soft); }
.ef-day-event.is-eclipse { background: var(--ember); box-shadow: 0 0 0 2px rgba(203, 118, 94, 0.22); }
.ef-day-event.is-station { background: var(--blue); }
.ef-day-event.is-lunation { background: var(--gold); }
.ef-day-event.is-return { background: var(--teal); }

.ef-day-foot { display: flex; align-items: center; gap: 6px; }
.ef-day-convergence { overflow: hidden; flex: 1; height: 2px; border-radius: 2px; background: rgba(240, 238, 232, 0.09); }
.ef-day-convergence i { display: block; height: 100%; background: var(--teal); }

.ef-element-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; }
.ef-element-dot.is-wood { background: var(--ef-wood); }
.ef-element-dot.is-fire { background: var(--ef-fire); }
.ef-element-dot.is-earth { background: var(--ef-earth); }
.ef-element-dot.is-metal { background: var(--ef-metal); }
.ef-element-dot.is-water { background: var(--ef-water); }

.ef-calendar-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; }

.ef-calendar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-family: var(--font-meta);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ef-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.ef-swatch.is-wash { background: linear-gradient(90deg, rgba(213, 182, 109, 0.1), var(--gold)); }
.ef-swatch.is-convergence { height: 3px; background: var(--teal); }
.ef-swatch.is-nodata { background: repeating-linear-gradient(45deg, rgba(133, 139, 141, 0.4) 0 2px, transparent 2px 4px); }

/* ---- D. key windows ---------------------------------------------------- */

.ef-window-key { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

.ef-window-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border: 1px solid currentcolor;
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-family: var(--font-meta);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ef-window-tag i { color: var(--text-soft); font-style: normal; opacity: 0.75; }
.ef-window-tag.is-peak { color: var(--gold); }
.ef-window-tag.is-convergence { color: var(--teal); }
.ef-window-tag.is-integration { color: var(--blue); }
.ef-window-tag.is-transition { color: var(--ember); }

.ef-key-windows { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }

.ef-key-windows button {
  display: grid;
  grid-template-columns: 104px 116px minmax(0, 1.1fr) minmax(0, 1.3fr);
  gap: 16px;
  align-items: baseline;
  width: 100%;
  padding: 12px 12px;
  border: 0;
  border-bottom: 1px solid rgba(41, 46, 49, 0.55);
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease, padding-left 160ms ease;
}

.ef-key-windows li:last-child button { border-bottom: 0; }
.ef-key-windows button:hover { padding-left: 18px; background: rgba(213, 182, 109, 0.045); }
.ef-window-range { color: var(--text-soft); font-family: var(--font-meta); font-size: 11.5px; letter-spacing: 0.04em; }
.ef-window-headline { color: var(--text); font-size: 13px; }
.ef-window-detail { color: var(--muted); font-size: 11.5px; line-height: 1.45; }

/* ---- E. field: five phase + constellation ------------------------------ */

.ef-field { display: grid; grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.55fr); gap: 26px; align-items: stretch; }

.ef-panel--wuxing { display: flex; flex-direction: column; }
.ef-wuxing { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 16px; margin: 0; }
.ef-wuxing svg { width: 100%; max-width: 320px; height: auto; }
.ef-wuxing-orbit { fill: none; stroke: rgba(240, 238, 232, 0.045); stroke-width: 1; }
.ef-wuxing-generate { fill: none; stroke: rgba(213, 182, 109, 0.2); stroke-width: 1; }
.ef-wuxing-control { stroke: rgba(240, 238, 232, 0.05); stroke-width: 1; stroke-dasharray: 2 5; }
.ef-wuxing-crown { fill: none; stroke: currentcolor; stroke-width: 1; opacity: 0.32; }
.ef-wuxing-ring { fill: rgba(6, 7, 8, 0.8); stroke: currentcolor; stroke-width: 1; opacity: calc(0.3 + var(--ef-strength, 0) * 0.7); }
.ef-wuxing-core { fill: currentcolor; opacity: calc(0.22 + var(--ef-strength, 0) * 0.78); }
.ef-wuxing-node.is-wood { color: var(--ef-wood); }
.ef-wuxing-node.is-fire { color: var(--ef-fire); }
.ef-wuxing-node.is-earth { color: var(--ef-earth); }
.ef-wuxing-node.is-metal { color: var(--ef-metal); }
.ef-wuxing-node.is-water { color: var(--ef-water); }
.ef-wuxing-node.is-dominant .ef-wuxing-ring { stroke-width: 1.6; }
.ef-wuxing-label { fill: rgba(195, 192, 184, 0.55); font-family: var(--font-meta); font-size: 8px; letter-spacing: 0.18em; }
.ef-wuxing-node.is-dominant .ef-wuxing-label { fill: var(--text); }
.ef-wuxing-value { fill: rgba(133, 139, 141, 0.75); font-family: var(--font-display); font-size: 11px; }
.ef-wuxing-node.is-dominant .ef-wuxing-value { fill: var(--text-soft); }

.ef-wuxing-caption { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; }

.ef-wuxing-dominant { display: flex; flex-direction: column; gap: 3px; }
.ef-wuxing-dominant em { color: var(--muted); font-family: var(--font-meta); font-style: normal; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; }
.ef-wuxing-dominant strong { color: currentcolor; font-family: var(--font-display); font-size: 30px; font-weight: 400; line-height: 1; }
.ef-wuxing-dominant.is-wood { color: var(--ef-wood); }
.ef-wuxing-dominant.is-fire { color: var(--ef-fire); }
.ef-wuxing-dominant.is-earth { color: var(--ef-earth); }
.ef-wuxing-dominant.is-metal { color: var(--ef-metal); }
.ef-wuxing-dominant.is-water { color: var(--ef-water); }

.ef-wuxing-organ { color: var(--text); font-size: 13.5px; }
.ef-wuxing-mirror { max-width: 40ch; color: var(--text-soft); font-size: 12px; line-height: 1.5; }
.ef-wuxing-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }
.ef-wuxing-cycles, .ef-wuxing-unit { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-family: var(--font-meta); font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.ef-wuxing-key { display: inline-block; width: 13px; height: 1px; }
.ef-wuxing-key.is-generate { background: rgba(213, 182, 109, 0.6); }
.ef-wuxing-key.is-control { margin-left: 8px; background: repeating-linear-gradient(90deg, rgba(240, 238, 232, 0.35) 0 2px, transparent 2px 5px); }
.ef-wuxing-disclaimer { color: rgba(133, 139, 141, 0.75); font-size: 10px; font-style: italic; }

/* Signature visualisation: given the most room on the row. */
.ef-panel--constellation { border-color: var(--ef-hairline); background: var(--ef-panel); }
.ef-constellation-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(190px, 0.85fr); gap: 22px; align-items: center; }
.ef-constellation { margin: 0; }
.ef-constellation svg { display: block; width: 100%; max-height: 430px; height: auto; }

.ef-constellation-orbit { fill: none; stroke: rgba(240, 238, 232, 0.05); stroke-width: 1; stroke-dasharray: 2 5; }
.ef-constellation-spoke { stroke: rgba(213, 182, 109, 0.14); stroke-width: 1; opacity: calc(0.25 + var(--ef-strength, 0) * 0.75); transition: opacity 200ms ease; }
.ef-constellation-chord { fill: none; stroke: var(--teal); opacity: calc(0.16 + var(--ef-strength, 0) * 0.54); transition: opacity 200ms ease; }
.ef-constellation-spoke.is-dimmed, .ef-constellation-chord.is-dimmed { opacity: 0.06; }

.ef-constellation-hub { fill: rgba(6, 7, 8, 0.94); stroke: rgba(213, 182, 109, 0.34); stroke-width: 1; }
.ef-constellation-hub-inner { fill: none; stroke: rgba(213, 182, 109, 0.12); stroke-width: 1; }
.ef-constellation-hub-name { fill: var(--muted); font-family: var(--font-meta); font-size: 9px; letter-spacing: 0.36em; }
.ef-constellation-hub-theme { fill: var(--gold); font-family: var(--font-display); font-size: 20px; letter-spacing: 0.01em; }
.ef-constellation-hub-value { fill: var(--muted); font-family: var(--font-meta); font-size: 9px; letter-spacing: 0.16em; }

.ef-constellation-halo { fill: rgba(105, 183, 173, calc(0.05 + var(--ef-strength, 0) * 0.14)); stroke: rgba(105, 183, 173, 0.45); stroke-width: 1; transition: opacity 200ms ease; }
.ef-constellation-core { fill: var(--teal); opacity: 0.85; }
.ef-constellation-node.is-astrology .ef-constellation-halo { fill: rgba(213, 182, 109, calc(0.05 + var(--ef-strength, 0) * 0.14)); stroke: rgba(213, 182, 109, 0.5); }
.ef-constellation-node.is-astrology .ef-constellation-core { fill: var(--gold); }
.ef-constellation-node.is-numerology .ef-constellation-halo { fill: rgba(111, 144, 183, calc(0.05 + var(--ef-strength, 0) * 0.14)); stroke: rgba(111, 144, 183, 0.5); }
.ef-constellation-node.is-numerology .ef-constellation-core { fill: var(--blue); }
.ef-constellation-node.is-bazi .ef-constellation-halo { fill: rgba(203, 118, 94, calc(0.05 + var(--ef-strength, 0) * 0.14)); stroke: rgba(203, 118, 94, 0.5); }
.ef-constellation-node.is-bazi .ef-constellation-core { fill: var(--ember); }
.ef-constellation-label { fill: var(--text-soft); font-family: var(--font-meta); font-size: 9.5px; letter-spacing: 0.18em; }
.ef-constellation-value { fill: var(--text); font-family: var(--font-display); font-size: 16px; }
.ef-constellation-share { fill: var(--muted); font-size: 10px; }
.ef-constellation-hit { fill: transparent; cursor: pointer; }
.ef-constellation-node { transition: opacity 200ms ease; }
.ef-constellation-node:hover .ef-constellation-halo { stroke-width: 1.8; }
.ef-constellation-node.is-dimmed { opacity: 0.28; }
.ef-constellation-node.is-focused .ef-constellation-halo { stroke-width: 2; }
.ef-constellation-node.is-focused .ef-constellation-label { fill: var(--text); }

.ef-constellation-aside { display: flex; flex-direction: column; gap: 14px; }
.ef-constellation-hint { margin: 0; color: var(--text-soft); font-size: 12px; line-height: 1.6; }
.ef-constellation-legend { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; }
.ef-constellation-legend li { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 11px; }
.ef-swatch.is-node { width: 11px; height: 11px; border: 1px solid rgba(213, 182, 109, 0.6); border-radius: 50%; background: rgba(213, 182, 109, 0.16); }
.ef-swatch.is-chord { width: 16px; height: 2px; border-radius: 2px; background: var(--teal); }
.ef-swatch.is-hub { width: 11px; height: 11px; border: 1px solid rgba(213, 182, 109, 0.4); border-radius: 50%; background: transparent; }

.ef-constellation-aside-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--ef-rule); }
.ef-constellation-aside-head strong { color: var(--text); font-family: var(--font-display); font-size: 26px; font-weight: 400; }
.ef-constellation-aside-head em { flex: 1 0 100%; color: var(--muted); font-size: 10.5px; font-style: normal; }

.ef-constellation-clear {
  padding: 3px 10px;
  border: 1px solid var(--ef-rule);
  border-radius: var(--radius-pill);
  color: var(--muted);
  background: transparent;
  font-family: var(--font-meta);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.ef-constellation-clear:hover { border-color: var(--glass-border-strong); color: var(--text); }

.ef-constellation-signals { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: ef-signal; }
.ef-constellation-signals li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; }
.ef-constellation-signal-label { color: var(--text-soft); font-size: 11.5px; line-height: 1.4; }
.ef-constellation-signal-themes { grid-column: 1; color: var(--muted); font-size: 10px; }

/* ---- year blocks / tables ---------------------------------------------- */

.ef-year-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

.ef-fact {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 18px 20px;
  border: 1px solid var(--ef-rule);
  border-radius: var(--radius-control);
  background: rgba(6, 7, 8, 0.4);
}

.ef-fact span { color: var(--muted); font-family: var(--font-meta); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; }
.ef-fact strong { color: var(--gold); font-family: var(--font-display); font-size: 30px; font-weight: 400; line-height: 1; }
.ef-fact em { color: var(--text-soft); font-size: 11px; font-style: normal; line-height: 1.45; }

.ef-month-blocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 26px; }

.ef-month-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  border: 1px solid var(--ef-rule);
  border-radius: var(--radius-control);
  background: rgba(6, 7, 8, 0.4);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease;
}

.ef-month-block:hover { border-color: var(--glass-border-strong); transform: translateY(-2px); }
.ef-month-block.is-selected { border-color: var(--gold); background: rgba(213, 182, 109, 0.06); }
.ef-month-block.is-elapsed { border-style: dashed; opacity: 0.7; }

.ef-month-block-label { color: var(--muted); font-family: var(--font-meta); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; }
.ef-month-block-theme { color: var(--text); font-family: var(--font-display); font-size: 21px; font-weight: 400; line-height: 1.12; }
.ef-month-block-co { color: var(--ember); font-size: 11px; }

.ef-month-block-bars { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; align-items: center; margin-top: 4px; }
.ef-month-block-bars em { color: var(--muted); font-family: var(--font-meta); font-size: 9.5px; font-style: normal; letter-spacing: 0.1em; }

.ef-meter { overflow: hidden; height: 3px; border-radius: 3px; background: rgba(240, 238, 232, 0.08); }
.ef-meter i { display: block; height: 100%; background: var(--gold); }
.ef-meter.is-convergence i { background: var(--teal); }

.ef-month-block-foot { display: flex; align-items: center; gap: 7px; color: var(--text-soft); font-size: 10.5px; }
.ef-month-block-strong { margin-left: auto; color: var(--muted); font-family: var(--font-meta); letter-spacing: 0.08em; }

.ef-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

.ef-split-half { padding: 20px 22px; border: 1px solid var(--ef-rule); border-radius: var(--radius-control); background: rgba(6, 7, 8, 0.36); }
.ef-split-half.is-active { border-color: rgba(213, 182, 109, 0.32); }
.ef-split-half h4 { margin: 0 0 9px; color: var(--muted); font-family: var(--font-meta); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; }
.ef-split-theme { margin: 0 0 14px; color: var(--text); font-family: var(--font-display); font-size: 22px; }
.ef-split-note { margin: 14px 0 0; color: var(--muted); font-size: 11px; font-style: italic; }

.ef-mini-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.ef-mini-stats dt { color: var(--muted); font-family: var(--font-meta); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; }
.ef-mini-stats dd { margin: 4px 0 0; color: var(--text); font-family: var(--font-display); font-size: 20px; }

.ef-transit-table { display: flex; flex-direction: column; }

.ef-transit-row {
  display: grid;
  grid-template-columns: 1.3fr 1.6fr 1.9fr 1.5fr 1.2fr;
  gap: 14px;
  padding: 10px 4px;
  border-bottom: 1px solid rgba(41, 46, 49, 0.55);
  font-size: 12px;
}

.ef-transit-row.is-head { color: var(--muted); font-family: var(--font-meta); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; }
.ef-transit-row strong { color: var(--gold); font-weight: 500; }
.ef-transit-row em { color: var(--muted); font-size: 11px; font-style: normal; }
.ef-mono { color: var(--text-soft); font-family: var(--font-meta); font-size: 11.5px; letter-spacing: 0.03em; }

.ef-event-list, .ef-transition-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }

.ef-event-list li {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 4px 12px;
  padding: 9px 11px;
  border-left: 2px solid var(--line-strong);
  background: rgba(6, 7, 8, 0.3);
  font-size: 12px;
}

.ef-event-list li.is-eclipse { border-left-color: var(--ember); }
.ef-event-list li.is-station { border-left-color: var(--blue); }
.ef-event-list strong { font-weight: 500; }
.ef-event-list em { grid-column: 2; color: var(--muted); font-size: 11px; font-style: normal; }

.ef-transition-list button {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 3px 12px;
  align-items: baseline;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: rgba(6, 7, 8, 0.3);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

.ef-transition-list button:hover { border-color: var(--glass-border-strong); background: rgba(213, 182, 109, 0.05); }
.ef-transition-list span:last-child { color: var(--muted); font-size: 11px; line-height: 1.45; }

.ef-day-mini {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.ef-day-mini:hover strong { color: var(--gold); }
.ef-day-mini-date { color: var(--muted); font-family: var(--font-meta); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }
.ef-day-mini strong { color: var(--text); font-family: var(--font-display); font-size: 24px; font-weight: 400; transition: color 160ms ease; }
.ef-day-mini-scores { color: var(--gold); font-family: var(--font-meta); font-size: 11px; letter-spacing: 0.08em; }
.ef-day-mini em { color: var(--muted); font-size: 11px; font-style: italic; }

/* ---- day: event chips + system cards ----------------------------------- */

.ef-day-events { display: flex; flex-wrap: wrap; gap: 10px; }

.ef-day-event-chip {
  padding: 8px 14px;
  border: 1px solid rgba(203, 118, 94, 0.34);
  border-radius: var(--radius-pill);
  background: rgba(203, 118, 94, 0.06);
  color: var(--text);
  font-size: 12px;
}

.ef-system-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }

.ef-system-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 18px 17px 15px;
  border: 1px solid var(--ef-rule);
  border-top: 2px solid var(--line-strong);
  border-radius: 0 0 var(--radius-control) var(--radius-control);
  background: rgba(6, 7, 8, 0.4);
}

.ef-system-card.is-astrology { border-top-color: var(--gold); }
.ef-system-card.is-numerology { border-top-color: var(--blue); }
.ef-system-card.is-human-design { border-top-color: var(--teal); }
.ef-system-card.is-bazi { border-top-color: var(--ember); }
.ef-system-card.is-convergence { border-top-color: var(--text-soft); }

.ef-system-card h4 { margin: 0; color: var(--text-soft); font-family: var(--font-meta); font-size: 9.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }
.ef-system-card ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ef-system-card li { color: var(--text-soft); font-size: 11.5px; line-height: 1.45; }
.ef-system-card strong { color: var(--text); font-weight: 500; }
.ef-system-foot { margin: auto 0 0; padding-top: 9px; border-top: 1px solid rgba(41, 46, 49, 0.6); color: var(--muted); font-family: var(--font-meta); font-size: 10px; letter-spacing: 0.06em; }

/* ---- F. why / provenance ----------------------------------------------- */

.ef-why { display: flex; flex-direction: column; gap: 16px; }
.ef-why-basis { margin: 0; color: var(--muted); font-size: 11.5px; font-style: italic; }
.ef-why-themes { display: flex; flex-direction: column; gap: 6px; }
.ef-why-theme { border: 1px solid rgba(41, 46, 49, 0.65); border-radius: var(--radius-control); background: rgba(6, 7, 8, 0.3); }

.ef-why-theme summary {
  display: grid;
  grid-template-columns: 1.5fr 1.2fr 1.5fr 1.1fr;
  gap: 14px;
  align-items: center;
  padding: 11px 15px;
  list-style: none;
  cursor: pointer;
}

.ef-why-theme summary::-webkit-details-marker { display: none; }
.ef-why-theme[open] summary { border-bottom: 1px solid rgba(41, 46, 49, 0.65); }
.ef-why-theme-name { color: var(--text); font-size: 12.5px; }
.ef-why-bar { overflow: hidden; height: 3px; border-radius: 3px; background: rgba(240, 238, 232, 0.08); }
.ef-why-bar i { display: block; height: 100%; background: var(--gold); }
.ef-why-numbers { color: var(--muted); font-family: var(--font-meta); font-size: 10.5px; letter-spacing: 0.04em; }
.ef-why-systems { color: var(--teal); font-family: var(--font-meta); font-size: 10px; letter-spacing: 0.08em; text-align: right; }

.ef-why-contributors, .ef-signal-list { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 11px 15px; list-style: none; }
.ef-why-contributors li, .ef-signal-list li { display: grid; grid-template-columns: 92px 1fr auto; gap: 10px; align-items: baseline; font-size: 11.5px; }
.ef-signal-label { color: var(--text-soft); }
.ef-signal-label em { display: block; color: var(--muted); font-size: 10.5px; font-style: normal; }

.ef-why-system-tag {
  padding: 2px 7px;
  border: 1px solid currentcolor;
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-family: var(--font-meta);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

.ef-why-system-tag.is-astrology { color: var(--gold); }
.ef-why-system-tag.is-numerology { color: var(--blue); }
.ef-why-system-tag.is-human-design { color: var(--teal); }
.ef-why-system-tag.is-bazi { color: var(--ember); }

.ef-why-raw { border: 1px solid rgba(41, 46, 49, 0.65); border-radius: var(--radius-control); background: rgba(6, 7, 8, 0.24); }
.ef-why-raw summary { padding: 11px 15px; color: var(--text-soft); font-family: var(--font-meta); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }
.ef-position-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px 16px; padding: 4px 15px 15px; }
.ef-position-grid span { color: var(--text-soft); font-family: var(--font-meta); font-size: 11px; }
.ef-position-grid em { display: inline-block; min-width: 84px; color: var(--muted); font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; }
.ef-disclaimer { margin: 0; padding: 0 15px 15px; color: var(--muted); font-size: 10.5px; font-style: italic; line-height: 1.5; }

/* ---- footer disclosure (was the pass-1 provenance strip) ---------------- */

.ef-disclosure { margin-top: 8px; border-top: 1px solid var(--ef-rule); }

.ef-disclosure > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 2px;
  color: var(--muted);
  font-family: var(--font-meta);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
  transition: color 160ms ease;
}

.ef-disclosure > summary::-webkit-details-marker { display: none; }
.ef-disclosure > summary:hover { color: var(--text-soft); }

.ef-disclosure-mark {
  width: 9px;
  height: 9px;
  border: 1px solid currentcolor;
  border-radius: 50%;
  transition: background 160ms ease;
}

.ef-disclosure[open] .ef-disclosure-mark { background: var(--gold); border-color: var(--gold); }

.ef-disclosure-body { display: flex; flex-direction: column; gap: 20px; padding: 6px 0 26px; }
.ef-disclosure-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 26px; margin: 0; }
.ef-disclosure-grid dt { color: var(--muted); font-family: var(--font-meta); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; }
.ef-disclosure-grid dd { margin: 4px 0 0; color: var(--text-soft); font-size: 12px; word-break: break-word; }
.ef-disclosure-note { margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.6; }
.ef-disclosure-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.ef-disclosure-columns h4 { margin: 0 0 12px; color: var(--text-soft); font-family: var(--font-meta); font-size: 9.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; }
.ef-disclosure-columns ul { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; }
.ef-disclosure-columns li { display: flex; flex-direction: column; gap: 2px; }
.ef-disclosure-columns strong { color: var(--text-soft); font-size: 11.5px; font-weight: 500; }
.ef-disclosure-columns em { color: var(--muted); font-size: 10.5px; font-style: normal; line-height: 1.5; }
.ef-disclosure .ef-disclaimer { padding: 0; }

/* ---- navigation badge -------------------------------------------------- */

.flow-step-experimental .flow-step-status { width: auto; height: auto; border: 0; }

.flow-step-experimental-mark {
  padding: 2px 6px;
  border: 1px solid rgba(203, 118, 94, 0.45);
  border-radius: var(--radius-pill);
  color: var(--ember);
  font-family: var(--font-meta);
  font-size: 7.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.flow-step-experimental.is-active { color: var(--text); background: rgba(203, 118, 94, 0.08); }

/* Header state for the forecast pillar: it renders a precomputed dataset, so it
   must not claim a live or missing intake profile. */
.system-status.is-forecast { color: var(--ember); }
.system-status.is-forecast i { background: var(--ember); box-shadow: 0 0 10px rgba(203, 118, 94, 0.5); }

.forecast-subject { display: grid; gap: 1px; padding: 8px 12px; border: 1px solid rgba(195, 192, 184, 0.1); border-radius: var(--radius-control); background: rgba(20, 23, 26, 0.46); }
.forecast-subject span { color: var(--text); font-size: 12px; }
.forecast-subject small { color: var(--muted); font-size: 10px; }

/* ---- responsive scaffolding (desktop-first; collapse points only) ------- */

@media (max-width: 1240px) {
  .ef-hero { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .ef-field { grid-template-columns: minmax(0, 1fr); }
  .ef-system-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ef-month-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ef-year-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ef-key-windows button { grid-template-columns: 96px 108px minmax(0, 1fr); }
  .ef-window-detail { grid-column: 2 / -1; }
}

@media (max-width: 900px) {
  .energy-forecast { padding: 24px 20px 64px; gap: 30px; }
  .ef-body { gap: 30px; }
  .ef-two-column, .ef-split, .ef-hero-facts, .ef-expression-pair, .ef-disclosure-columns { grid-template-columns: minmax(0, 1fr); }
  .ef-axis-row { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .ef-constellation-layout { grid-template-columns: minmax(0, 1fr); }
  .ef-system-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ef-transit-row { grid-template-columns: 1fr 1fr; }
  .ef-why-theme summary { grid-template-columns: 1fr 1fr; }
  .ef-position-grid, .ef-disclosure-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .ef-primary-gauges { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .ef-system-grid, .ef-month-blocks, .ef-year-facts { grid-template-columns: minmax(0, 1fr); }
  .ef-week-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ef-header { flex-direction: column; align-items: flex-start; }
  .ef-key-windows button { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}