/* Sternenfall — shared by the homepage (all profiles) and the industry pages (one industry).
   Uses only the design tokens that site.css and pages.css both define. */
.sfall { --sf-gap: 18px; }
.sfall [hidden] { display: none !important; }

/* header: one left edge — number, then label, then caption */
.sfall-num { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.sfall-num .n { font-family: var(--serif); font-weight: 600; font-size: clamp(64px, 10vw, 104px); line-height: .9; letter-spacing: -.02em; color: var(--data-blue); transition: color .6s var(--ease); }
.sfall-num .n.after { color: var(--accent); }
.sfall-num .of { font-family: var(--serif); font-size: clamp(22px, 3vw, 32px); color: var(--ink-3); }
.sfall-lbl { font: 400 17px/1.45 var(--sans); color: var(--ink-2); margin: 10px 0 0; max-width: 46ch; }
.sfall-cap { font: 400 17px/1.5 var(--sans); color: var(--ink); margin: 14px 0 0; max-width: 60ch; min-height: 1.5em; }
.sfall-cap b { font-weight: 600; }

/* chart */
.sfall-chart { position: relative; margin-top: 26px; }
.sfall-chart svg { width: 100%; height: auto; display: block; touch-action: pan-y; }
.sfall-chart .ax { stroke: var(--rule-2); stroke-width: 1; }
.sfall-chart .tk { fill: var(--ink-3); font: 400 13px var(--sans); }
.sfall-chart .thr { stroke: var(--ink); stroke-width: 1.5; }
.sfall-chart .thrl { fill: var(--ink); font: 600 13px var(--sans); }
.sfall-chart .ghost { fill: var(--data-blue); opacity: 0; transition: opacity 1.2s var(--ease); }
.sfall-chart.fallen .ghost { opacity: .13; }
.sfall-tip { position: absolute; pointer-events: none; background: var(--ink); color: #fff; font: 400 13px/1.4 var(--sans); padding: 8px 11px; border-radius: 6px; transform: translate(-50%, -115%); white-space: nowrap; opacity: 0; transition: opacity .12s; z-index: 2; }
.sfall-tip b { font-weight: 600; }

/* footer row: legend left, actions right — on one baseline */
.sfall-foot { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px 24px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); }
.sfall-legend { display: flex; gap: 8px 18px; flex-wrap: wrap; font: 400 13px var(--sans); color: var(--ink-2); }
.sfall-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.sfall-actions { display: flex; gap: 8px; justify-self: end; }
.sfall-btn[data-a="toggle"] { min-width: 15.5em; text-align: center; }
.sfall-btn:disabled { opacity: .55; cursor: default; }
.sfall-btn { font: 500 14px var(--sans); padding: 8px 15px; border-radius: 6px; border: 1px solid var(--rule-2); background: var(--surface); color: var(--ink); cursor: pointer; white-space: nowrap; transition: border-color .15s var(--ease), background .15s var(--ease); }
.sfall-btn:hover { border-color: var(--ink); }
.sfall-btn.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.sfall-btn.primary:hover { background: var(--accent); border-color: var(--accent); }
.sfall-fine { font: 400 12.5px/1.55 var(--sans); color: var(--ink-3); max-width: 76ch; margin: 12px 0 0; }
@media (max-width: 720px) { .sfall-foot { grid-template-columns: 1fr; } .sfall-actions { justify-self: stretch; } .sfall-btn { flex: 1; } .sfall-btn[data-a="toggle"] { min-width: 0; } }