/* The Candles page: stock charts. The header and messages are home.css's; this is the list of securities and their charts. */
.candles { max-width: 1240px; margin: 0 auto; padding: 0 16px 24px; }
.candles-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 8px 0 14px; }
.candles-bar h2 { margin: 0 8px 0 0; font-size: 1.25rem; }
.candles-add-button, .candles-primary { padding: 6px 14px; border: 0; border-radius: 4px; background: #2f80ed; color: #fff; font-weight: 600; cursor: pointer; }
.candles-primary[disabled] { opacity: 0.6; cursor: default; }
.candles-add { display: flex; align-items: center; gap: 8px; }
.candles-add input { width: 9em; padding: 5px 8px; border: 1px solid #c9d3e0; border-radius: 4px; text-transform: uppercase; }
.candles-ok { color: #1e7b3c; }
.candles-error { color: #b42318; }
.candles-empty { margin: 0; padding: 12px 14px; background: #f5f7fa; border-radius: 6px; color: #52606d; }
.candles-card { margin: 0 0 16px; padding: 12px 14px; border: 1px solid #e1e7ef; border-radius: 6px; background: #fff; }
.candles-card-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.candles-card-head h3 { margin: 0; font-size: 1.05rem; }
.candles-symbol { font-weight: 700; }
.candles-name { font-weight: 400; color: #52606d; }
.candles-last { font-weight: 600; }
.candles-up-text { color: #1e7b3c; }
.candles-down-text { color: #b42318; }
.candles-remove { margin-left: auto; border: 0; background: none; color: #2f80ed; cursor: pointer; }
/* Columns that may shrink below their content: a chart takes the width it is given, never the width its own shape asks for. */
.candles-charts { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }
.candles-chart { min-width: 0; }
.candles-charts-wide { grid-template-columns: minmax(0, 1fr); }
.candles-chart h4 { margin: 0 0 4px; font-size: 0.85rem; font-weight: 600; color: #52606d; }
.candles-plot { position: relative; display: flex; gap: 6px; }
/* The axes: each label at its own height beside the chart (the chart is as many pixels tall as it has units), level with its gridline. */
.candles-scale { position: relative; flex: none; width: 4.6em; height: 336px; font-size: 0.72rem; color: #52606d; text-align: right; }
.candles-no-volume .candles-scale { height: 260px; }
.candles-tick { position: absolute; right: 0; line-height: 1; white-space: nowrap; }
.candles-tick-middle { transform: translateY(-50%); }
.candles-tick-bottom { transform: translateY(-100%); }
.candles-tick-volume { color: #7b8794; }
.candles-grid { stroke: #eef1f5; stroke-width: 1; vector-effect: non-scaling-stroke; }
.candles-svg { flex: 1; min-width: 0; width: 100%; height: 336px; }
.candles-divider { stroke: #e1e7ef; stroke-width: 1; vector-effect: non-scaling-stroke; }
.candles-wick { stroke-width: 1; vector-effect: non-scaling-stroke; }
.candles-up .candles-wick { stroke: #1e7b3c; }
.candles-up .candles-body { fill: #2fa35a; }
.candles-up .candles-volume { fill: #a9dbbb; }
.candles-down .candles-wick { stroke: #b42318; }
.candles-down .candles-body { fill: #d64533; }
.candles-down .candles-volume { fill: #f0b3ab; }
/* With no volume the chart is only its prices, and the scale has no volume strip to leave room for. */
.candles-no-volume .candles-svg { height: 260px; }
/* Priced once a day: a line through the prices, the space under it lightly filled; each day can still be pointed at. */
.candles-price-line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.candles-up .candles-price-line { stroke: #1e7b3c; }
.candles-down .candles-price-line { stroke: #b42318; }
.candles-area { stroke: none; opacity: 0.12; }
.candles-up .candles-area { fill: #2fa35a; }
.candles-down .candles-area { fill: #d64533; }
.candles-hover { fill: transparent; }
.candles-dates { display: flex; justify-content: space-between; margin-left: 5em; font-size: 0.72rem; color: #52606d; }
.candles-none { margin: 0; padding: 10px 12px; background: #f5f7fa; border-radius: 6px; color: #52606d; font-size: 0.9rem; }
@media (max-width: 900px) { .candles-charts { grid-template-columns: minmax(0, 1fr); } }/* The six dots a security is dragged by (styled as the plan's), and its period buttons beside the daily chart's title. */
.candles-card-head .plan-drag-handle { align-self: center; }
.candles-daily-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 4px; }
.candles-daily-head h4 { margin: 0; }
.candles-periods { display: inline-flex; border: 1px solid #c9d3e0; border-radius: 4px; overflow: hidden; }
.candles-period { padding: 2px 8px; border: 0; border-left: 1px solid #c9d3e0; background: #fff; color: #52606d; font-size: 0.75rem; cursor: pointer; }
.candles-period:first-child { border-left: 0; }
.candles-period[aria-pressed="true"] { background: #2f80ed; color: #fff; font-weight: 600; }
.candles-period[disabled] { opacity: 0.6; cursor: default; }/* The mouse tracker (candles.js): a line at the candle nearest the pointer, a dot on a line chart's price, and what it was. */
.candles-svg { cursor: crosshair; }
.candles-cursor { position: absolute; width: 0; border-left: 1px dashed #7b8794; pointer-events: none; }
.candles-dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border: 2px solid #fff; border-radius: 50%; background: #1f2933; box-shadow: 0 0 0 1px #7b8794; pointer-events: none; }
.candles-tip { position: absolute; z-index: 2; min-width: 150px; padding: 6px 9px; border: 1px solid #d9e2ec; border-radius: 6px; background: #fff; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15); font-size: 0.78rem; pointer-events: none; }
.candles-tip-when { margin-bottom: 3px; font-weight: 600; }
.candles-tip div:not(.candles-tip-when) { display: flex; justify-content: space-between; gap: 14px; }
.candles-tip span { color: #52606d; }
.candles-tip strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.candles-cursor[hidden], .candles-dot[hidden], .candles-tip[hidden] { display: none; }/* The market analysis at the top of the page. */
.candles-analyze { padding: 6px 14px; border: 1px solid #2f80ed; border-radius: 4px; background: #fff; color: #2f80ed; font-weight: 600; cursor: pointer; }
.candles-analyze[disabled] { opacity: 0.6; cursor: default; }
.candles-analysis { margin: 0 0 16px; padding: 12px 14px; border: 1px solid #d9e2ec; border-left: 4px solid #2f80ed; border-radius: 6px; background: #f8fafc; }
.candles-analysis h3 { margin: 0 0 6px; font-size: 1rem; }
.candles-analysis-when { margin-left: 6px; color: #7b8794; font-size: 0.8rem; font-weight: 400; }
.candles-analysis-waiting { margin: 0; color: #52606d; font-style: italic; }
.candles-analysis-text { max-height: 420px; overflow-y: auto; white-space: pre-line; line-height: 1.45; font-size: 0.92rem; }