/* Scoped derivative of germanData/viz/style.css for embedding inside a
   normal Hugo/PaperMod content page. Everything is namespaced under
   #gfa-app so it can't leak out and repaint the surrounding site page --
   the original file styles `body`/`*` directly, since it expects to own
   the whole page as a standalone Claude Artifact. Generated by
   scope_for_hugo.py -- do not hand-edit or `cp` style.css over this file;
   re-run this script instead. */

/* Shared structural CSS for both viz variants. Colors/fonts/motion come
   from CSS custom properties set per-variant in each HTML file's <style>. */

#gfa-app * { box-sizing: border-box; }

/* Reserve the scrollbar's width whether or not one is showing. A fully
   drilled-down chart lands within a few pixels of the viewport height, so the
   scrollbar was appearing and disappearing as the callout box at the bottom
   changed size -- and each toggle moves the content edge ~15px, which
   re-lays-out every segment in every bar horizontally. That put a different
   segment under a stationary cursor, which rendered a different callout, which
   did it again. scope_for_hugo.py strips this rule: the surrounding site owns
   `html` there, and a scoped `#gfa-app html` would be silently dead. */

#gfa-app {
  border-radius: 16px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  margin: 0;
  padding: 24px 20px;
}

#gfa-app .wrap {
  max-width: 960px;
  margin: 0 auto;
}

/* Title above the controls, not beside them. Side by side, two toggle pairs
   take roughly half the width and the <h1> wraps into a narrow column against
   the left edge -- the heading is the thing being compressed to make room for
   a control. Stacking costs one row of vertical space and lets the title run
   full width. */
#gfa-app .header-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  /* Stacking puts the controls directly above #crumbs, which has no top
     margin of its own -- without this the toggle border sits on the crumb
     text. */
  margin-bottom: 22px;
}

#gfa-app .header-text { min-width: 0; width: 100%; }

/* Measure toggle. The two views are not two slices of one number -- they are
   two different measures -- so this reads as a pair of tabs rather than an
   on/off switch. */
/* Two controls side by side: measure on the left, basis on the right. */
#gfa-app .view-toggles {
  display: flex;
  flex: none;
  gap: 10px;
  flex-wrap: wrap;
}

#gfa-app .view-toggle {
  display: flex;
  /* Padding is what makes the container legible as a container: it is the
     visible gutter between the active pill and the border. At 3px the pill
     nearly touched the edge and the bubble read as a hairline around a
     button. */
  padding: 5px;
  border-radius: 11px;
  background: var(--toggle-track);
  border: 2px solid var(--toggle-border);
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.5);
}


#gfa-app .view-tab {
  appearance: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  padding: 8px 16px;
  border-radius: 6px;
  background: transparent;
  color: var(--toggle-text);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: background 0.12s ease, color 0.12s ease;
}
#gfa-app .view-tab:hover:not(.active) {
  color: var(--heading);
  background: rgba(255,255,255,0.06);
}
/* The active side is a solid filled block, not a tint. A low-contrast
   "selected" state on a two-way control is the same as no state at all --
   you can't tell which side is on without reading both labels. */
#gfa-app .view-tab.active {
  background: var(--toggle-active-bg);
  color: var(--toggle-active-text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
#gfa-app .view-tab:focus-visible {
  outline: 2px solid var(--toggle-active-bg);
  outline-offset: 2px;
}

#gfa-app h1 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: 0 0 4px;
  color: var(--heading);
  letter-spacing: 0.01em;
}

#gfa-app #page-title, #gfa-app #page-subtitle {
  cursor: pointer;
}

#gfa-app .subtitle {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0 0 22px;
}

#gfa-app #crumbs {
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

#gfa-app .crumb-link { cursor: pointer; }
#gfa-app .crumb-link:hover { color: var(--text); }
#gfa-app .crumb-sep { padding: 0 2px; }

#gfa-app #hierarchy {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

#gfa-app .rung-slot[hidden] { display: none; }
/* Dulled (ancestor) rungs no longer dim the whole bar via opacity -- that
   would flatten every segment equally, including the one you actually
   clicked. Only the blurb text dims uniformly; the bar itself dims per
   segment (see .segment.dim below), so the selected segment can stay at
   full color and visibly show which one you picked. */
#gfa-app .rung-slot.dulled .ancestor-line {
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
/* The old "whole bar lifts a bit on hover" cue, brought back per-segment
   instead of via container opacity: hovering anywhere on a dulled bar
   nudges its dimmed (non-selected) segments a little brighter, so it
   still reads as interactive, without touching the selected one (already
   at full color) or boosting past normal. */
#gfa-app .rung-slot.dulled:hover .segment.dim {
  filter: brightness(0.72);
}

#gfa-app .ancestor-line {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 10px;
}
#gfa-app .ancestor-line strong { color: var(--heading); }

/* The explanation above a bar is height-locked to two lines. Without this the
   bar below it moves whenever the copy wraps differently -- switching basis
   dropped the first bar 23px because one blurb ran to three lines -- and at
   narrow widths any of them can gain a line. Reserving the space costs one
   blank line on a short blurb and keeps the bars still.
   1.55 line-height x 2 lines = 3.1em.
   #blurb-2 was left out of this rule until 2026-09-21, so hovering rung 1 to
   preview a sub-group still moved bar 2 and everything under it.
   Note this is a FLOOR, not a cap -- on its own it only removes the
   one-line/two-line case. Staying at two lines means keeping the copy itself
   inside two lines at the narrowest host column (680px on the Hugo site, where
   PaperMod's --main-width binds long before .wrap's 960px cap); see the
   character budget recorded in presentation.py. */
#gfa-app #blurb-0 p, #gfa-app #blurb-1 p, #gfa-app #blurb-2 p, #gfa-app #blurb-3 p { min-height: 3.1em; }

/* The view explanation (#blurb-0) carries its comparison sentence too, since
   2026-09-22, so it runs to three lines -- worded by the user to fit exactly 3
   at the Hugo site's 680px binding width (1.55 x 3 = 4.65em). Below that the
   three views' texts can differ by a line, which would move the bars when
   switching view, so narrower screens reserve the longest (media queries). */
#gfa-app #blurb-0 p { min-height: 4.65em; }
@media (max-width: 679px) { #gfa-app #blurb-0 p { min-height: 6.2em; } }

#gfa-app .bar-wrap {
  position: relative;
}

#gfa-app .bar {
  display: flex;
  width: 100%;
  height: 64px;
  border-radius: var(--bar-radius);
  overflow: hidden;
  background: var(--bar-track);
  box-shadow: var(--bar-shadow);
}

#gfa-app .segment {
  position: relative;
  height: 100%;
  min-width: 0;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-right: 1px solid rgba(0,0,0,0.25);
  transition: filter 0.15s ease;
}
#gfa-app .segment:last-child { border-right: none; }
#gfa-app .segment.clickable { cursor: pointer; }
#gfa-app .segment.bright { filter: brightness(1.28) saturate(1.15); }
#gfa-app .segment.dim { filter: brightness(0.55); }
#gfa-app .segment.seg-unobserved {
  background-image: repeating-linear-gradient(
    135deg, rgba(255,255,255,0.06) 0 6px, transparent 6px 12px
  );
}

#gfa-app .seg-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-width: 0;
  padding: 0 8px;
  pointer-events: none;
}
#gfa-app .seg-name, #gfa-app .seg-size {
  display: block;
  width: 100%;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--seg-label);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
#gfa-app .seg-name {
  font-size: 0.72rem;
  font-weight: 600;
}
#gfa-app .seg-size {
  font-size: 0.64rem;
  font-weight: 500;
  opacity: 0.85;
  margin-top: 1px;
}

#gfa-app #lines {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 3;
}

#gfa-app #callouts {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 46px;
  min-height: 20px;
}

#gfa-app .callout {
  background: var(--callout-bg);
  border: 1px solid var(--callout-border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.78rem;
  color: var(--text);
  max-width: 220px;
}
#gfa-app .callout-single {
  max-width: none;
  width: 100%;
  font-size: 0.82rem;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
#gfa-app .source-link {
  color: var(--heading);
  font-weight: 600;
  text-decoration: none;
  margin-top: 4px;
}
#gfa-app .source-link:hover { text-decoration: underline; }

@media (max-width: 560px) {
  /* Already a column above; just tighten the spacing and let the two pairs
     wrap onto separate lines when they no longer fit side by side. */
  #gfa-app .header-row { align-items: stretch; gap: 14px; }
  #gfa-app .view-toggles { justify-content: flex-start; margin-bottom: 18px; }
  /* Three options, one of them long ("Consolidated assets under management"):
     on a phone one row overflows and scrolls the whole page sideways, so the
     options stack, full width. */
  #gfa-app .view-toggles, #gfa-app .view-toggle { width: 100%; box-sizing: border-box; }
  #gfa-app .view-toggle { flex-direction: column; }
  /* Phones: the longest explanation is 7 lines at 375px (1.55 x 7). */
  #gfa-app #blurb-0 p { min-height: 10.85em; }
  /* The rung explanations run to three lines on a phone; reserve three for all of
     them, or a two-line one leaves its bar closer to the one above (rung 3). */
  #gfa-app #blurb-1 p, #gfa-app #blurb-2 p, #gfa-app #blurb-3 p { min-height: 4.65em; }
  #gfa-app .view-tab { text-align: left; }
  #gfa-app .subtitle { margin-bottom: 14px; }
  #gfa-app .bar { height: 84px; }
  #gfa-app #callouts { flex-direction: column; margin-top: 20px; }
  #gfa-app .callout, #gfa-app .callout-single { max-width: 100%; }
  #gfa-app #lines { display: none; }
}