/* Multi-chart grid. */
.mc-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.mc-layouts { display: flex; gap: 4px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 4px; }
.mc-layouts button {
  min-width: 34px; padding: 6px 0; border: 0; border-radius: 7px; cursor: pointer;
  background: transparent; color: var(--text-secondary); font-family: inherit; font-weight: 700; font-size: .85rem;
}
.mc-layouts button.on { background: var(--accent); color: #04202f; }
.mc-period {
  font-family: inherit; font-size: .86rem; padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary);
}
.mc-norm { display: flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--text-secondary); cursor: pointer; }
.mc-norm input { accent-color: var(--accent); }
.mc-hint { font-size: .76rem; color: var(--text-muted); margin-inline-start: auto; }

.mc-grid { display: grid; gap: 12px; }
.mc-grid.mc-n1 { grid-template-columns: 1fr; }
.mc-grid.mc-n2 { grid-template-columns: 1fr 1fr; }
.mc-grid.mc-n4 { grid-template-columns: 1fr 1fr; }
.mc-grid.mc-n6 { grid-template-columns: repeat(3, 1fr); }

.mc-cell {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  padding: 10px 12px 6px; display: flex; flex-direction: column;
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  transition: border-color .18s;
}
.mc-cell:hover { border-color: var(--border-hover); }
.mc-cell.loading { opacity: .55; }

.mc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mc-sym {
  /* Was a fixed 84px, which clipped the longer tickers once the timeframe
     select joined this row — "EURUSD=X" showed as "URUSD=X". Flexes instead,
     with a floor that still fits the longest symbols in use. */
  flex: 1 1 96px; min-width: 88px; max-width: 132px;
  font-family: inherit; font-weight: 800; font-size: .84rem; letter-spacing: .3px;
  text-align: center; padding: 5px 6px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-glass); color: var(--text-primary);
}
.mc-last { font-weight: 800; font-size: .9rem; font-variant-numeric: tabular-nums; margin-inline-start: auto; }
.mc-chg  { font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 58px; text-align: left; }
.mc-chg.up { color: #2DD47A; } .mc-chg.down { color: #FF5C5C; }

/* Heights are set per layout: with six panels each one must stay tall enough to
   read, but not so tall that the grid needs scrolling to compare. */
.mc-plot { width: 100%; }
.mc-n1 .mc-plot { height: 460px; }
.mc-n2 .mc-plot { height: 330px; }
.mc-n4 .mc-plot { height: 260px; }
.mc-n6 .mc-plot { height: 215px; }

@media (max-width: 900px) {
  .mc-grid.mc-n4, .mc-grid.mc-n6 { grid-template-columns: 1fr 1fr; }
  .mc-n6 .mc-plot { height: 240px; }
}
@media (max-width: 620px) {
  /* Side-by-side comparison stops working when each panel is a thumbnail, so
     below this width the grid collapses to a single column. */
  .mc-grid, .mc-grid.mc-n2, .mc-grid.mc-n4, .mc-grid.mc-n6 { grid-template-columns: 1fr; }
  .mc-plot, .mc-n2 .mc-plot, .mc-n4 .mc-plot, .mc-n6 .mc-plot { height: 250px; }
  .mc-hint { display: none; }
}

/* Per-pane timeframe. Sits in the cell header next to the symbol so each
   chart's interval is visible without opening anything. */
.mc-tf {
  background: rgba(0, 0, 0, .3);
  color: var(--text-secondary, #8892a4);
  border: 1px solid var(--border, #1e2a3d);
  border-radius: 7px;
  padding: 2px 5px;
  font: inherit; font-size: 11px;
  min-height: 26px; cursor: pointer;
  flex: 0 0 auto;
}
.mc-tf:hover { color: var(--text-primary, #e8edf7); border-color: rgba(212,175,55,.4); }
.mc-tf:focus-visible { outline: 2px solid var(--gold, #d4af37); outline-offset: 1px; }
.mc-tf-all {
  background: rgba(0, 0, 0, .3);
  color: var(--text-secondary, #8892a4);
  border: 1px solid var(--border, #1e2a3d);
  border-radius: 8px; padding: 5px 9px;
  font: inherit; font-size: 12px; min-height: 32px; cursor: pointer;
}
.mc-tf-all:focus-visible { outline: 2px solid var(--gold, #d4af37); outline-offset: 1px; }