.AppLayout-header-title {
  gap: var(--spacing4);
}

.AppLayout-header-title:not(:last-child) {
  border-right: var(--style-separator-line-light);
  padding-right: var(--spacing8);
  margin-right: var(--spacing4);
}

.AppLayout-header-title > span {
  font-weight: 300;
}
:root {
  --chart-image-opacity: 0.1;
  /* Light mode chart colors - matching CHART_STYLING_GUIDE.md */
  --chart-grid-color: var(--gray-040);
  --chart-axis-color: var(--gray-040);
  --chart-axis-text: var(--gray-040);
}

/* AppLayout styles for indexes */
.AppLayout-main {
  grid-area: main;
  min-height: 0;
  overflow-y: auto;
  gap: var(--spacing2);
}

.AppLayout-header {
  justify-content: flex-start;
}

.Theme-night,
.Theme-night-toggle:checked ~ * {
  --chart-image-opacity: 0.1;
  /* Dark mode chart colors - matching CHART_STYLING_GUIDE.md */
  --chart-grid-color: #1a1a1a;
  --chart-axis-color: #333333;
  --chart-axis-text: #ffffff;
}

section.Row {
  flex-wrap: wrap;
  align-items: stretch;
}

/* Match Atlas spacing for AppLayout-row */
.AppLayout-row {
  gap: var(--spacing2);
}

section.Row > section {
  width: min(35rem, 100%);
  flex: 1 0 auto;
}

.AppLayout-row .Panel > section:not(.Panel-header) h3 {
  text-transform: uppercase;
}

/* Panel content padding to match Atlas */
.Panel > .Text-content {
  padding: var(--spacing12);
}

.Panel > section:not(.Panel-header) {
  padding: 0;
}

.Panel-header {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing4);
  color: var(--gray-080);
  border-bottom: none;
}

.Panel-header .Asset-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.Panel-header .Header-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--style-gap-n);
  min-width: max-content;
}

.Panel-header .Header-left cm-icon svg,
.Panel-header .Header-left cm-coin svg {
  color: var(--gray-100);
}

.Panel-header .Header-left .Asset-group h3,
.Panel-header .Header-left .Asset-group h4,
.Panel-header .Header-left .Asset-group p {
  width: max-content;
  font-size: var(--text-size-l);
  text-transform: none;
}

.Panel-header .Header-left .Asset-group .Asset-title-row {
  display: flex;
  align-items: baseline;
  gap: var(--spacing8);
  margin: 0;
  line-height: 1.1;
}

.Panel-header .Header-left .Asset-group h3 {
  font-weight: bold;
}

.Panel-header .Header-left .Asset-group p,
.Panel-header .Header-left .Asset-group h4 {
  font-weight: normal;
  color: var(--gray-080);
}

.Panel-header .Header-left .Asset-group .Asset-ticker {
  font-size: calc(var(--text-size-s) - 0.125rem);
  font-weight: normal;
  color: var(--gray-090);
}

.Panel-header .Header-left .Asset-group .Asset-bletchley-subtitle {
  margin: 0;
  font-size: var(--text-size-s);
  color: var(--gray-100);
  line-height: 1.1;
  margin-top: 0;
}

.Panel-header > p.Text-regular,
.About-panel .Text-content {
  color: var(--gray-090);
}

@media screen and (max-width: 640px) {
  .Panel-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--style-gap-xl);
  }

  .Panel-header .Header-left {
    min-width: 100%;
    max-width: 100%;
  }

  .Performance-panel cm-table table {
    table-layout: auto;
    width: 100%;
  }

  .Performance-panel cm-table th,
  .Performance-panel cm-table td {
    padding: var(--spacing4) var(--spacing12);
    font-size: var(--text-size-s);
  }

  .Performance-panel cm-table {
    --table-width: 100%;
    scroll-snap-type: none;
  }

  .Performance-panel cm-table tr > * {
    min-width: auto;
    white-space: normal;
  }

  .Performance-panel cm-table th:first-child,
  .Performance-panel cm-table td:first-child {
    width: auto;
  }

  .Performance-panel cm-table th:nth-child(2),
  .Performance-panel cm-table td:nth-child(2) {
    width: auto;
  }

  .Performance-panel cm-table th:nth-child(3),
  .Performance-panel cm-table td:nth-child(3) {
    width: max-content;
    white-space: nowrap;
  }

  .KeyInfo-panel cm-table {
    scroll-snap-type: none;
  }

  .KeyInfo-panel cm-table thead th,
  .KeyInfo-panel cm-table tbody td {
    scroll-snap-align: none;
  }

  .KeyInfo-panel .Table-left-align {
    white-space: normal;
    word-break: break-word;
  }

  .Historical-toolbar {
    gap: var(--style-gap-l);
    padding: var(--spacing12);
  }

  .Historical-toolbar > div:first-child {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--style-gap-l);
  }

  .Historical-toolbar .Date-picker-wrapper {
    flex-direction: column;
    align-items: center;
    gap: var(--style-gap-n);
    width: auto;
    flex: 1 1 0;
    min-width: 0;
  }

  .Historical-toolbar .Dropdown > summary {
    width: max-content;
  }

  .Historical-toolbar .Date-picker-wrapper label {
    width: 100%;
  }

  .Historical-toolbar .Date-picker-wrapper .Input-with-icon {
    width: 100%;
  }

  .Historical-toolbar .Date-picker-wrapper .Input {
    width: 100%;
    min-width: 0;
  }

  .Historical-toolbar .Frequency-picker-wrapper {
    flex-direction: column;
    align-items: stretch;
    gap: var(--style-gap-n);
    flex: 0 1 12rem;
    max-width: 50%;
    width: auto;
  }

  .Historical-toolbar .Frequency-picker-wrapper > div,
  .Historical-toolbar .Frequency-picker-wrapper cm-dropdown,
  .Historical-toolbar .Frequency-picker-wrapper .Dropdown {
    width: 100%;
    min-width: 0;
  }

  .Historical-toolbar .Download-wrapper {
    width: 100%;
    min-width: 0;
  }

  .Historical-toolbar .Download-wrapper .Button {
    width: 100%;
    justify-content: center;
    min-width: 0;
  }
}

.Historical-toolbar .Input-with-icon,
.Historical-toolbar .Date-picker-wrapper,
.Historical-toolbar .Frequency-picker-wrapper,
.Historical-toolbar .Frequency-picker-wrapper > div,
.Historical-toolbar .Download-wrapper,
.Historical-toolbar .Download-wrapper .Button,
.Historical-toolbar cm-dropdown,
.Historical-toolbar .Dropdown,
.Historical-toolbar input.Input,
.Historical-toolbar button {
  min-width: 0;
}

.Indicator-down {
  color: var(--color-charts-chart-red);
}

.Indicator-up {
  color: var(--color-charts-chart-green);
}

.Indicator-NoChange {
  color: var(--color-secondary-darker-yellow);
}

.Indicator cm-color-icon,
.Indicator .Color-icon-svg {
  width: 1rem;
  height: 1rem;
}

/* Legacy support for old structure */
.Landing-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.Landing-container .Content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--style-gap-xxxl);
  max-width: 37.5rem;
}

.Landing-container .Content > div.Line-h-dark {
  width: 17.5rem;
}

.Landing-container .Content > div.Button-wrapper {
  display: flex;
  justify-content: center;
  gap: var(--style-gap-l);
}

.Performance-panel cm-table tbody > tr > * {
  height: 0;
}

.Performance-panel .Performance-table-wrapper {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.Performance-panel .Performance-table-wrapper > section:last-child > section {
  margin-bottom: var(--style-gap-l);
}

.Performance-panel
  .Performance-table-wrapper
  > :is(section:first-child, section:last-child) {
  width: 100%;
}

.Chart-container .plotly .svg-container .main-svg:first-of-type,
.Constituent-chart .plotly .svg-container .main-svg:first-of-type {
  background: var(--color-panel-face) !important;
}

.Chart-container .ygrid.crisp {
  stroke: var(--chart-axis-color) !important;
  transition: stroke var(--style-animation-speed-normal);
}

.Chart-container .imagelayer image {
  opacity: var(--chart-image-opacity);
  transition: opacity var(--style-animation-speed-normal);
}

.Chart-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: var(--spacing12);
}

.Chart-container {
  position: relative;
}

.Chart-controls {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing8);
}

/* Match Charts ButtonGroup styling */
#btn-group-1 {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: var(--spacing2);
  height: var(--spacing32);
  background: var(--gray-000);
  padding: var(--spacing2);
  border-radius: var(--style-corner-default);
  box-sizing: border-box;
}

#btn-group-1 > label.Button {
  flex: 1 1 100%;
  min-width: 2rem;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--style-corner-default);
  font-size: 0.875rem;
  padding: 0 var(--spacing8);
  background: transparent !important;
  color: var(--gray-090);
}

#btn-group-1 > label.Button:hover {
  border-radius: var(--style-corner-default);
  background: var(--gray-000-a08) !important;
  z-index: 2;
  border: none;
}

#btn-group-1 > input[type="radio"]:checked + label.Button {
  border-radius: var(--style-corner-default);
  background: var(--gray-050) !important;
  color: var(--gray-100);
  z-index: 3;
}

.Zoom-bar {
  flex: 1 1 auto;
  overflow: hidden;
}

.Zoom-bar cm-range-slider {
  display: block;
  width: 100%;
  height: var(--spacing32);
  padding: var(--spacing2);
  background-color: var(--gray-000);
  border: none;
  box-shadow: none;
  border-radius: var(--style-corner-default);
  box-sizing: border-box;
}

.Zoom-bar .RangeSlider {
  height: 100%;
  border: none;
}

.Zoom-bar .RangeSlider-slider {
  top: 0;
  bottom: 0;
  padding: 0;
}

.Zoom-bar .RangeSlider-slider::before {
  border-radius: var(--style-corner-default);
  background-color: var(--gray-050);
  border: none;
  box-shadow: none;
}

.Zoom-bar :is(.RangeSlider-handle-l, .RangeSlider-handle-r) {
  width: var(--spacing2);
  padding: 0;
  background-color: var(--gray-070);
  border: none;
  border-radius: 0;
  transform: none;
  left: 0;
  right: auto;
}

.Zoom-bar .RangeSlider-handle-l {
  border-radius: var(--style-corner-default) 0 0 var(--style-corner-default);
}

.Zoom-bar .RangeSlider-handle-r {
  left: auto;
  right: 0;
  border-radius: 0 var(--style-corner-default) var(--style-corner-default) 0;
}

.Zoom-bar :is(.RangeSlider-handle-l, .RangeSlider-handle-r)::before,
.Zoom-bar :is(.RangeSlider-handle-l, .RangeSlider-handle-r)::after {
  content: none;
}

.Zoom-bar :is(.RangeSlider-handle-l, .RangeSlider-handle-r):hover,
.Zoom-bar :is(.RangeSlider-handle-l, .RangeSlider-handle-r):active {
  background-color: var(--blue);
}

.IndexReturns-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.IndexReturns-container .Price {
  gap: var(--spacing2);
}

.IndexReturns-container .Price span {
  display: block;
}

.IndexReturns-container .Price > span:first-child {
  font-weight: var(--text-weight-bold);
  font-size: var(--text-size-l);
}

.IndexReturns-container .Price > span:last-child {
  font-weight: var(--text-weight-normal);
  font-size: var(--text-size-s);
}

.IndexReturns-container .IndexReturns-content .Return {
  justify-content: flex-start;
  width: initial;
  display: flex;
  text-align: right;
  flex-direction: column;
  gap: var(--spacing2);
}

.IndexReturns-container .IndexReturns-content .Return > span:first-child {
  font-weight: var(--text-weight-bold);
  font-size: var(--text-size-s);
  text-transform: uppercase;
}

.IndexReturns-container .IndexReturns-content .Return:last-child {
  margin-left: var(--style-gap-l);
}

.IndexReturns-container .IndexReturns-content {
  display: flex;
}

.About-panel .Text-content .KeyFeatures-title {
  margin: var(--spacing8) 0 var(--spacing6);
  font-size: 0.8125rem;
  font-weight: var(--text-weight-bold);
  text-decoration: none;
  text-transform: none;
  border: 0;
}

.About-panel .Text-content > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.About-panel .Text-content > ul > li {
  margin: 0;
  padding: 0 0 0 1rem;
  position: relative;
  display: block;
  line-height: 1.4;
}

.About-panel .Text-content > ul > li + li {
  margin-top: var(--spacing2);
}

.About-panel .Text-content > ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--brand-primary);
}

.Chart-zoom-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing8);
  background-color: color-mix(
    in srgb,
    var(--color-panel-face) 92%,
    transparent
  );
  color: var(--gray-100);
  opacity: 0;
  visibility: hidden;
  z-index: 2;
  pointer-events: none;
}

.Chart-zoom-overlay.Chart-zoom-overlay-active {
  opacity: 1 !important;
  visibility: visible !important;
}

.Chart-zoom-overlay cm-icon {
  color: var(--gray-100);
}

.Chart-zoom-overlay span {
  display: flex;
  align-items: center;
  gap: var(--spacing2);
}

.Chart-zoom-overlay kbd {
  background-color: var(--gray-000);
  border-radius: var(--spacing2);
  padding: var(--spacing2) var(--spacing6);
  color: var(--gray-090);
  font-size: var(--text-size-s);
  font-family: monospace;
}

.KeyInfo-panel .Customize-quickLinks p {
  margin-top: var(--style-gap-s);
}

.Paginator-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing12);
}

.Paginator-wrapper .Pagination-input-wrapper {
  display: none;
}

.Historical-container {
  display: flex;
}

.Historical-container .Historical-table-wrapper {
  width: 100%;
}

.Loader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing12);
  margin: auto;
}

.Loader > span {
  margin-left: var(--style-gap-s);
}

/* Historical toolbar layout */
.Historical-toolbar {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  padding: var(--spacing12);
}

.Historical-toolbar > div:first-child {
  flex-direction: row;
}

.Historical-toolbar .Date-picker-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--style-gap-n);
  position: relative;
  z-index: var(--z-high);
}

.Historical-toolbar .Date-picker-wrapper label {
  flex: 1 1 10rem;
  min-width: 0;
}

.Historical-toolbar .Date-picker-wrapper .Input-with-icon {
  position: relative;
  width: 100%;
}

.Historical-toolbar .Date-picker-wrapper .Input {
  width: 100%;
  min-width: 0;
}

.Historical-toolbar .Date-picker-wrapper cm-calendar-icon {
  color: var(--color-text);
  opacity: 1;
}

.Historical-toolbar .Date-picker-wrapper .Date-picker-native {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  border: 0;
  background: transparent;
  color: transparent;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.Historical-toolbar .Frequency-picker-wrapper {
  display: flex;
  width: auto;
}

.Historical-toolbar .Frequency-picker-wrapper > span,
.Historical-toolbar .Date-picker-wrapper > span {
  display: none;
}

.Constituent-data {
  display: flex;
  flex-grow: 1;
}

@media screen and (max-width: 640px) {
  .Constituent-data {
    padding-bottom: var(--spacing12) !important;
  }

  .Constituent-data cm-table {
    --table-width: 100%;
    scroll-snap-type: x mandatory;
  }

  .Constituent-data cm-table table {
    table-layout: auto;
    width: 100%;
  }

  .Constituent-data cm-table th,
  .Constituent-data cm-table td {
    padding: var(--spacing4) var(--spacing12);
    font-size: var(--text-size-s);
  }

  .Constituent-data cm-table tr > * {
    min-width: auto;
    white-space: normal;
  }

  .Constituent-data cm-table th:first-child,
  .Constituent-data cm-table td:first-child {
    width: 40%;
  }

  .Constituent-data cm-table th:nth-child(2),
  .Constituent-data cm-table td:nth-child(2) {
    width: 30%;
  }

  .Constituent-data cm-table th:nth-child(3),
  .Constituent-data cm-table td:nth-child(3) {
    width: 30%;
  }
}

.Constituent-data .Constituent-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.Constituent-data .Constituent-wrapper cm-table,
.Constituent-data .Constituent-wrapper .Constituent-chart {
  flex-grow: 1;
}

.Constituent-chart .plotly .svg-container .main-svg .infolayer .legend .bg {
  fill: var(--color-panel-face) !important;
}

.Constituent-chart .plotly .svg-container .main-svg .infolayer .legendtext {
  fill: var(--color-text) !important;
}

.Constituent-data .Constituent-chart-wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  width: 100%;
}

.Constituent-data .Asset-wrapper {
  display: flex;
  align-items: center;
}

.Constituent-data .Asset-wrapper .Asset-wrapper-details {
  display: flex;
  flex-direction: column;
  margin-left: var(--style-gap-l);
}

.Constituent-data .Asset-wrapper .Asset-wrapper-details span:first-child {
  font-weight: var(--text-weight-bold);
  text-transform: uppercase;
}

.Constituent-data .Footnote-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--text-size-n);
  text-align: right;
  padding: var(--spacing8) var(--spacing12);
}

.Constituent-data .Footnote-wrapper .Time {
  margin-left: var(--style-gap-n);
  font-family: var(--text-monospace-font);
}

.Constituent-data .Constituent-chart {
  height: 40vh;
  min-height: 40vh;
}

/** NOTE: 
 We should be able to choose orientation (vertical/horizontal) for positioning 
 in the spotlight module regardless of device size. 

 We need to remove this when this has been addressed in Choco
 **/
#Menu-group-wrapper .Spotlight {
  height: auto;
  flex-direction: column;
  align-items: center;
  gap: var(--style-gap-xxxl);
}

#Menu-group-wrapper .Spotlight-content-wrapper {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--style-gap-xl);
}

#Menu-group-wrapper .Spotlight cm-inline-svg {
  min-width: 8rem;
}

@media screen and (min-width: 960px) {
  .Ticker-container h2 {
    white-space: nowrap;
  }

  .Ticker-layout {
    flex-direction: row;
  }

  .Ticker-description-wrapper {
    width: 50%;
  }

  .Performance-panel .Performance-table-wrapper {
    flex-direction: row;
  }

  .Performance-panel .Performance-table-wrapper > section:first-child {
    width: 60%;
  }

  .Performance-panel .Performance-table-wrapper > section:last-child {
    width: 40%;
    margin-left: var(--style-gap-l);
  }

  .Paginator-wrapper {
    justify-content: space-between;
  }

  .Historical-toolbar {
    flex-direction: row;
  }

  .Historical-toolbar > div:first-child {
    display: flex;
    flex-direction: row;
  }

  .Historical-toolbar .Frequency-picker-wrapper {
    align-items: center;
    margin-left: var(--style-gap-n);
  }

  .Historical-toolbar .Frequency-picker-wrapper > span,
  .Historical-toolbar .Date-picker-wrapper > span {
    display: block;
    padding: var(--spacing12);
  }

  .Constituent-data .Footnote-wrapper {
    justify-content: flex-end;
  }

  .Paginator-wrapper .Pagination-input-wrapper {
    display: flex;
    align-items: center;
  }

  .Paginator-wrapper .Pagination-input-wrapper label {
    width: 3rem;
    margin: 0 var(--style-gap-n);
  }

  .Paginator-wrapper .Pagination-input-wrapper label input {
    text-align: center;
  }

  .Paginator-wrapper .Pagination-input-wrapper .Total-count {
    font-weight: var(--text-weight-bold);
    margin-left: var(--style-gap-s);
  }
}

.Panel > .Panel-header,
.Chart-panel > .Panel-header {
  border-bottom: 1px solid var(--color-bg);
}

@media screen and (min-width: 961px) {
  .Theme-content:has(#landing-page) {
    --landing-sidebar-extras-width: min(
      calc(100vw - var(--style-sidebar-width)),
      calc(24rem - var(--style-sidebar-width))
    );
  }

  .Theme-content:has(#landing-page) .AppLayout-header,
  .Theme-content:has(#landing-page) .AppLayout-main {
    transition:
      padding-left var(--style-animation-speed-slow),
      margin-left var(--style-animation-speed-slow);
    transition-timing-function: var(--style-animation-ease, ease);
  }

  .Theme-content:has(#landing-page)
    cm-sidebar[section]:not([section=""])
    .Sidebar-extras {
    width: var(--landing-sidebar-extras-width);
    max-width: var(--landing-sidebar-extras-width);
    box-shadow: none !important;
  }

  .Theme-content:has(#landing-page)
    cm-sidebar[section]:not([section=""])
    ~ .AppLayout-header,
  .Theme-content:has(#landing-page)
    cm-sidebar[section]:not([section=""])
    ~ .AppLayout-main {
    padding-left: calc(var(--landing-sidebar-extras-width) - 1px);
  }

  .Theme-content:has(#landing-page)
    cm-sidebar[section]:not([section=""])
    ~ .AppLayout-header {
    padding-left: var(--spacing12);
    margin-left: calc(var(--landing-sidebar-extras-width) - 1px);
  }
}

@media screen and (max-width: 640px) {
  .Historical-toolbar > div:first-child {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--style-gap-l);
  }

  .Historical-toolbar .Date-picker-wrapper {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }

  .Historical-toolbar .Frequency-picker-wrapper {
    flex: 0 1 auto;
    max-width: 12rem;
    width: auto;
  }
}

/* Align index sidebar coin icons like other app sidebars */
.Sidebar-extras .NavList-item :is(a, button):has(cm-coin) {
  display: flex;
  align-items: center;
  gap: var(--spacing8);
  padding-left: var(--spacing8);
}

.Sidebar-extras .NavList-item :is(a, button) > cm-coin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.Sidebar-extras .NavList-item :is(a, button) > cm-coin svg {
  width: 16px;
  height: 16px;
}