@font-face {
  font-family: "IBM Plex Mono";
  src: url("./assets/fonts/plex-medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("./assets/fonts/plex-semibold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
#analysis {
  --volume-bg: #B8D3C9;
  --volume-ink: #183436;
  --baseline: #687B73;
  --band: #A8C3BA;
  --grid: #A0BBB3;
  width: 100%;
  background: var(--paper);
}
#analysis .section-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  height: 640px;
}
#analysis .section-row.cost-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
#analysis .volume-copy,
#analysis .cost-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  height: 640px;
  overflow: hidden;
  padding: 48px 40px 32px;
}
#analysis .volume-copy { background: #202020; color: #B9B9B9; }
#analysis .cost-copy { background: var(--paper); color: #202020; }
#analysis .copy-content { display: flex; flex-direction: column; justify-content: flex-end; min-height: 0; }
#analysis .actions { display: flex; gap: 16px; flex-wrap: nowrap; }
#analysis .actions button {
  position: relative;
  isolation: isolate;
  flex: 0 0 120px;
  width: 120px;
  height: 48px;
  padding: 0;
  border: 0;
  background: currentColor;
  color: #B9B9B9;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  font: 500 12px/16px "IBM Plex Mono", var(--mono);
  letter-spacing: 1px;
  text-transform: uppercase;
}
#analysis .volume-copy .actions button { --button-fill: #202020; }
#analysis .cost-copy .actions button { color: #202020; --button-fill: var(--paper); }
#analysis .actions button::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  background: var(--button-fill);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}
#analysis .actions button span { position: relative; z-index: 1; }
#analysis .volume-copy .actions button[aria-pressed="true"] { --button-fill: #B9B9B9; color: #202020; }
#analysis .cost-copy .actions button[aria-pressed="true"] { --button-fill: #202020; color: var(--paper); }
#analysis .actions button:focus-visible { outline: 2px solid var(--green); outline-offset: -4px; }
#analysis .cost-copy .actions button:focus-visible { outline-color: #202020; }
#analysis .volume-panel h2,
#analysis .cost-panel h2 { font: 500 40px/40px Inter, var(--sans); margin: 0 0 32px; }
#analysis .volume-panel p,
#analysis .cost-panel p {
  font: 500 12px/15.96px "IBM Plex Mono", var(--mono);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 32px;
  max-width: 360px;
}
#analysis .volume-panel p { max-width: 345px; }
#analysis .visual { position: relative; min-width: 0; width: 100%; height: 640px; overflow: hidden; background: #183436; }
#analysis .visual.volume-chart { background: var(--volume-bg); }
#analysis .visual > svg { display: block; width: 100%; height: 100%; overflow: hidden; }
#analysis .visual .readout { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#analysis .visual .readout svg { width: 100%; height: 100%; overflow: visible; }
#analysis .visual.rf012-pan-ready { cursor: grab; }
#analysis .visual.rf012-pan-active { cursor: grabbing; user-select: none; -webkit-user-select: none; }
#analysis .visual { scrollbar-color: #202020 var(--paper); scrollbar-width: thin; }
#analysis .visual::-webkit-scrollbar { width: 8px; height: 8px; }
#analysis .visual::-webkit-scrollbar-track { background: var(--paper); }
#analysis .visual::-webkit-scrollbar-thumb { background: #202020; border: 0; border-radius: 0; }
#analysis .visual::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
@supports selector(::-webkit-scrollbar) {
  #analysis .visual { scrollbar-color: auto; scrollbar-width: auto; }
}
#analysis .visual:focus-visible { outline: 2px solid var(--green); outline-offset: -3px; z-index: 2; }
#analysis .visual.volume-chart:focus-visible { outline-color: var(--volume-ink); }
#analysis .rf012-error { padding: 24px 40px; color: #202020; font: 500 12px/16px "IBM Plex Mono", var(--mono); }
#analysis .rf012-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
#analysis[data-error="true"] .section-row { display: none; }
@media (max-width: 1431px) {
  #analysis .section-row,
  #analysis .section-row.cost-row { grid-template-columns: 1fr; height: auto; }
  #analysis .section-row.cost-row .cost-copy { grid-row: 1; }
  #analysis .section-row.cost-row .cost-chart { grid-row: 2; }
  #analysis .volume-copy,
  #analysis .cost-copy { height: auto; min-height: 400px; }
  #analysis .copy-content { min-height: 336px; }
  #analysis .visual { width: 100%; height: 560px; min-height: 560px; overflow-x: auto; overflow-y: hidden; }
  #analysis .visual > svg { width: max(100%, 960px); height: 552px; }
  #analysis .visual .readout { width: max(100%, 960px); height: 552px; }
}
@media (max-width: 600px) {
  #analysis .volume-copy,
  #analysis .cost-copy { min-height: 0; padding: 48px 24px 32px; }
  #analysis .copy-content { min-height: 0; }
  #analysis .volume-panel h2,
  #analysis .cost-panel h2 { font-size: 32px; line-height: 34px; margin-bottom: 24px; }
  #analysis .volume-panel h2 br,
  #analysis .cost-panel h2 br { display: none; }
  #analysis .volume-panel p,
  #analysis .cost-panel p { margin-bottom: 28px; max-width: none; }
  #analysis .volume-copy .actions,
  #analysis .cost-copy .actions { gap: 12px; flex-wrap: wrap; }
  #analysis .visual { height: 560px; min-height: 560px; overflow-x: auto; overflow-y: hidden; }
  #analysis .visual > svg,
  #analysis .visual .readout { width: 960px; height: 552px; }
  #analysis .visual .readout svg { width: 960px; height: 552px; }
}
@media (max-width: 749px) {
  #analysis .visual { height: var(--rf012-host-height, 488px); min-height: var(--rf012-host-height, 488px); overflow-x: auto; overflow-y: hidden; }
  #analysis .visual > svg { width: auto; height: var(--rf012-canvas-height, 480px); max-width: none; }
  #analysis .rf012-mobile-pin { position: sticky; z-index: 4; top: 0; left: 0; display: block; width: 100%; height: var(--rf012-canvas-height, 480px); margin-bottom: calc(0px - var(--rf012-canvas-height, 480px)); pointer-events: none; }
  #analysis .rf012-mobile-context { position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: var(--rf012-canvas-height, 480px); overflow: visible; pointer-events: none; }
  #analysis .rf012-mobile-pin .readout { position: absolute; z-index: 2; inset: 0; width: 100%; height: var(--rf012-canvas-height, 480px); overflow: visible; }
  #analysis .rf012-mobile-pin .readout svg { width: 100%; height: var(--rf012-canvas-height, 480px); overflow: visible; }
}