/* Chart layout (moved out of phone-layout.css so that file stays only about the phone canvas; same rules, same
   load position). */
/* Chart layout repair: normal flow squares, complete Ocean View controls,
   and fullscreen independent of animated page containing blocks. */
/* Ocean View outside full screen (user 2026-10-24): just the square chart. The pair, timeframes, Live / Latest, layers
   and drawing tools live in the full-screen task bar (they move there when it opens), so the page carries none of them. */
#cc-root > .cc-bar,
#cc-root > .cc-cardrow,
#cc-root > .cc-layers,
#cc-root > .cc-tools { display: none !important; }
#cc-root > .cc-bar,
#cc-root > .cc-layers,
#cc-root > .cc-tools { min-width: 0; max-width: 100%; flex-wrap: wrap; }
#cr-chart { position: relative; min-width: 0; max-width: 100%; }
#cc-wrap.reef:not(.full) {
  position: relative; display: block; width: 100%; max-width: 640px;
  height: auto; min-height: 0; aspect-ratio: 1 / 1;
  box-sizing: border-box; margin: 0 auto 12px; overflow: hidden;
  isolation: isolate;
}
#cc-wrap.reef:not(.full) > #cc-chart {
  position: absolute; inset: 0; width: 100%; height: 100%;
  min-width: 0; min-height: 0; max-width: 100%; max-height: 100%;
}
/* A transform/filter/animation on an ancestor makes fixed positioning local.
   Disable only those ancestor effects while the chart owns fullscreen. */
html.cc-noscroll body,
html.cc-noscroll body > .wrap,
html.cc-noscroll .page,
html.cc-noscroll .page > *,
html.cc-noscroll #cc-root,
html.cc-noscroll #cr-chart {
  animation: none !important; transform: none !important;
  filter: none !important; perspective: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  will-change: auto !important;
}
#cc-wrap.full {
  position: fixed; margin: 0; max-width: none; max-height: none;
  min-width: 0; min-height: 0; aspect-ratio: auto;
  box-sizing: border-box; z-index: 1000;
}
#cc-wrap.full > #cc-chart { position: relative; inset: auto; min-width: 0; min-height: 0; max-height: 100%; }
#cc-wrap.full .cc-rtop { min-width: 0; }
#cc-wrap.full .cc-rt-tools { min-width: 0; }
#cc-wrap.full .cc-rmenu { max-width: calc(100vw - 16px); }
@media(max-width:380px) {
  #cc-wrap.full .cc-rtop { gap: 3px; padding-inline: 4px; }
  #cc-wrap.full .cc-rt-tools { gap: 3px; }
  #cc-wrap.full .cc-rt-tools .cc-sel { padding-inline: 3px; }
  #cc-wrap.full .cc-rt-menu { padding-inline: 4px; }
}