/* All component rules are scoped; demo pages supply their own page layout. */
.gp-frame, .gp-frame * { box-sizing: border-box; }
.gp-frame { position: relative; width: 100%; overflow: hidden; overflow: clip; color: #e3ebed; font: 15px/1.5 Arial, sans-serif; }
.gp-frame [hidden] { display: none !important; }
.gp-panel { --text-boost: 1; transform-origin: top left; font-size: calc(15px * var(--text-boost)); background: #041119; border: 1px solid #294450; border-radius: 12px; }
.gp-heading {
  position: relative; display: flex; align-items: stretch; min-height: 60px; overflow: hidden;
  border-radius: 11px 11px 0 0; border-bottom: 1px solid #285269; color: #f1f4f5;
  background: radial-gradient(ellipse at 100% 0%, #102e43 0%, transparent 70%), linear-gradient(180deg, #0a1d29 0%, #05141c 100%);
  box-shadow: inset 0 1px 0 #4b7389, inset 0 -1px 0 #102f40;
}
.gp-brand { display: flex; align-items: center; gap: calc(14px * var(--text-boost)); padding: 11px 24px; min-width: 0; }
.gp-brand :is(svg,img) { display: block; width: calc(32px * var(--text-boost)); height: calc(36px * var(--text-boost)); flex: none; }
.gp-title { margin: 0; font: 700 calc(24px * var(--text-boost))/1.15 'Segoe UI', Arial, sans-serif; letter-spacing: 0; text-transform: none; }
.gp-heading::after { content: ''; position: absolute; pointer-events: none; left: var(--brand-divider,25%); top: 50%; transform: translate(-50%,-50%); height: 50%; width: 1px; background: #668698; opacity: .7; }
.gp-status {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  display: grid; grid-template-columns: max-content 0; align-items: baseline; align-content: center; width: max-content;
  color: #e3ebed; font: 600 calc(24px * var(--text-boost))/1.2 'Segoe UI', Arial, sans-serif;
}
.gp-outcome, .gp-number, .gp-forecast { white-space: nowrap; }
.gp-status[data-status=up] { color: #ff6655; }
.gp-status[data-status=down] { color: #77bbff; }
.gp-heading-horizon { color: #a7b6c1; font-size: calc(16px * var(--text-boost)); font-weight: 400; letter-spacing: 0; white-space: nowrap; margin-left: calc(12px * var(--text-boost)); transform: translateY(calc(-1px * var(--text-boost))); }
.gp-content { padding-top: 0; }
.gp-canvas-window { display: flow-root; width: var(--drawing-width); overflow: hidden; overflow: clip; }
.gp-canvas { display: block; width: var(--drawing-width); max-width: none; height: auto; margin: 0; }
.gp-summary { width: var(--drawing-width); margin: 12px 0 0; line-height: 1.45; }
.gp-panel.has-long .gp-summary { display: flex; }
.gp-panel.has-long .gp-dial-labels { flex: none; width: var(--dial-share); }
.gp-panel.has-long .gp-long { flex: none; width: var(--thermo-share); margin-left: var(--instrument-shift); transform: translateX(var(--long-label-shift,0px)); }
.gp-dial-labels { display: flex; justify-content: center; gap: 30px; }
.gp-horizon { text-align: center; --accent: #dce8ef; }
.gp-horizon[data-status=down] { --accent: #77bbff; }
.gp-horizon[data-status=up] { --accent: #ff8c81; }
.gp-shape { color: #adc4d4; font-size: calc(19px * var(--text-boost)); }
.gp-value { margin-left: calc(7px * var(--text-boost)); font-size: calc(23px * var(--text-boost)); font-variant-numeric: tabular-nums; }
.gp-period { color: #a7b6c1; font-size: calc(14px * var(--text-boost)); white-space: nowrap; }
.gp-result { display: inline-block; color: var(--accent); font-size: calc(14px * var(--text-boost)); white-space: nowrap; }
.gp-result::before { content: '('; color: #e3ebed; }
.gp-result::after { content: ')'; color: #e3ebed; }
.gp-toggle {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: grid; place-items: center;
  width: calc(28px * var(--text-boost)); height: calc(28px * var(--text-boost)); padding: 0; border: 0;
  border-radius: 5px; background: transparent; color: #a1b9c7; cursor: pointer;
}
.gp-toggle svg { display: block; width: calc(12px * var(--text-boost)); height: calc(26px * var(--text-boost)); }
.gp-toggle[aria-pressed=false] { color: #6b8392; }
.gp-icon-fill { opacity: .75; }
.gp-toggle[aria-pressed=false] .gp-icon-fill { opacity: 0; }
.gp-toggle:hover { color: #c3d5df; }
.gp-toggle:focus-visible { outline: 2px solid #91bddc; outline-offset: 4px; }