/* Chart pages are a viewport workspace; the inline quick chart stays independent. */
.item-detail-page { padding-bottom: 4px; }
.item-detail-page .item-detail-shell { overflow: visible; }
.item-detail-page .trading-workspace { min-height: 0; align-items: stretch; }
.item-detail-page .chart-card { overflow: visible; }
.item-detail-page #price-chart { height: 520px; min-height: 320px; }
#price-chart polyline, #price-chart line, #price-chart circle { vector-effect: non-scaling-stroke; }
#price-chart[data-drawing-tool="inspect"] { cursor: crosshair; }
#price-chart:is([data-drawing-tool="trend"], [data-drawing-tool="horizontal"], [data-drawing-tool="rectangle"]) { cursor: cell; }

/* The chart body: the tool rail on the left, the chart filling the rest. */
.chart-body { position: relative; display: flex; align-items: stretch; min-width: 0; }
.chart-body > .chart-wrap { flex: 1 1 auto; min-width: 0; }

/* --- Layout bar: search on the left, indicators on the right ------------- */
.chart-controls .chart-search-slot { margin-right: auto; }
.chart-indicators { position: relative; flex: 0 0 auto; }
.chart-indicators-toggle {
  height: 32px; padding: 0 12px; display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid rgba(191, 130, 41, 0.46); border-radius: 3px; color: #c8bda8;
  background-color: var(--mmorpg-iron-raised, #181a15); background-image: var(--mmorpg-control-surface);
  box-shadow: inset 0 1px 0 rgba(255, 232, 174, 0.11), inset 0 -2px 0 rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.48);
  font: 800 11px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .04em; text-shadow: 0 1px 1px #000; cursor: pointer;
}
.chart-indicators-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart-indicators-toggle:hover, .chart-indicators-toggle:focus-visible, .chart-indicators-toggle[aria-expanded="true"] { color: #f2ca70; border-color: rgba(241, 193, 99, 0.76); outline: 0; }
.chart-indicators-panel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 45;
  width: min(360px, calc(100vw - 24px)); max-height: min(560px, calc(100dvh - 180px)); overflow-y: auto;
  border: 1px solid rgba(191, 130, 41, 0.5); border-radius: 4px; color: #e8dfcf;
  background-color: #0b0e0c; background-image: linear-gradient(rgba(16, 19, 15, 0.97), rgba(7, 10, 8, 0.99)), var(--mmorpg-texture);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7);
}
.chart-indicators-panel[hidden] { display: none; }
.indicators-head { padding: 10px 10px 8px 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(187, 127, 38, 0.3); }
.indicators-head h2 { margin: 0; color: #f1ddaa; font: 700 13px/1 "Cinzel", Georgia, serif; letter-spacing: .04em; }
.indicators-close { width: 24px; height: 24px; padding: 5px; border: 0; border-radius: 3px; color: #958a76; background: none; cursor: pointer; }
.indicators-close svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.indicators-close:hover, .indicators-close:focus-visible { color: #f2ca70; background: rgba(227, 180, 88, 0.12); outline: 0; }
.indicator-entry { padding: 10px 14px; border-bottom: 1px solid rgba(164, 110, 33, 0.18); }
.indicator-entry:last-child { border-bottom: 0; }
.indicator-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.indicator-switch { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; cursor: pointer; }
.indicator-switch input { width: 14px; height: 14px; margin: 0; accent-color: var(--gold); }
.indicator-heading { font-size: 12px; font-weight: 700; }
.indicator-settings { margin: 8px 0 0 23px; display: grid; gap: 6px; }
.indicator-entry:has(.indicator-switch input:not(:checked)) .indicator-settings { display: none; }
.indicator-setting { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.indicator-setting > span { color: #958a76; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.segmented { display: inline-flex; padding: 2px; gap: 2px; border: 1px solid rgba(184, 124, 36, 0.4); border-radius: 3px; background: #060806; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.7); }
.segmented button {
  min-width: 30px; height: 24px; padding: 0 7px; border: 1px solid transparent; border-radius: 2px;
  color: #b3a78f; background: none; font: 800 10px/1 ui-sans-serif, system-ui, sans-serif; cursor: pointer; white-space: nowrap;
}
.segmented button:hover { color: #f2ca70; }
.segmented button:focus-visible { outline: 2px solid #e3b458; outline-offset: 0; }
.segmented button[aria-checked="true"] { color: #241202; border-color: #f0c66b; background: linear-gradient(180deg, #f3ca70 0%, #d89c35 45%, #a45c14 100%); }
.segmented button:disabled { opacity: .4; cursor: default; }

/* --- Vertical drawing rail ------------------------------------------------ */
.chart-tool-rail {
  position: relative; z-index: 4; flex: 0 0 38px; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  border-right: 1px solid rgba(190, 130, 40, 0.28);
  background-color: #0a0d0b; background-image: linear-gradient(180deg, rgba(20, 21, 16, 0.96), rgba(8, 11, 9, 0.99)), var(--mmorpg-texture);
}
.chart-tool-rail[hidden] { display: none; }
.chart-tool {
  position: relative; width: 30px; height: 30px; padding: 6px; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: 3px; color: #b3a78f; background: none; cursor: pointer;
}
.chart-tool svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chart-tool svg .fill, .chart-draw-action svg .fill { fill: currentColor; stroke: none; }
.chart-tool:hover, .chart-tool:focus-visible { color: #f2ca70; border-color: rgba(191, 130, 41, 0.5); background: rgba(227, 180, 88, 0.08); outline: 0; }
.chart-tool[aria-pressed="true"] { color: #f5d781; border-color: rgba(224, 167, 65, 0.72); background: linear-gradient(180deg, rgba(84, 55, 16, 0.94), rgba(25, 18, 8, 0.98)); box-shadow: inset 0 1px 0 rgba(255, 237, 189, 0.14); }
.chart-tool-spacer { flex: 1; min-height: 8px; }
.chart-tool-settings { position: relative; padding-top: 4px; border-top: 1px solid rgba(190, 130, 40, 0.22); }
.chart-tool-cog[aria-expanded="true"] { color: #f2ca70; border-color: rgba(241, 193, 99, 0.6); }
/* The cog carries the colour new drawings will use. */
.chart-tool-swatch { position: absolute; right: 3px; bottom: 3px; width: 7px; height: 7px; border: 1px solid #060806; border-radius: 50%; }
.chart-tool-panel {
  position: absolute; left: calc(100% + 10px); bottom: 0; z-index: 45; width: 204px; padding: 10px;
  display: grid; gap: 7px;
  border: 1px solid rgba(191, 130, 41, 0.5); border-radius: 4px; color: #e8dfcf;
  background-color: #0b0e0c; background-image: linear-gradient(rgba(16, 19, 15, 0.97), rgba(7, 10, 8, 0.99)), var(--mmorpg-texture);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.7);
}
/* The arrow points back at the cog, the way a tooltip does. */
.chart-tool-panel::before { content: ""; position: absolute; left: -6px; bottom: 11px; width: 10px; height: 10px; border-left: 1px solid rgba(191, 130, 41, 0.5); border-bottom: 1px solid rgba(191, 130, 41, 0.5); background: #0d100d; transform: rotate(45deg); }
.chart-tool-panel[hidden] { display: none; }
.chart-tool-panel-label { color: #958a76; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.chart-tool-swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.chart-tool-color, .chart-tool-custom { width: 100%; aspect-ratio: 1; padding: 0; border: 1px solid rgba(0, 0, 0, 0.6); border-radius: 3px; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.chart-tool-color[aria-pressed="true"] { outline: 2px solid #f2ca70; outline-offset: 1px; }
.chart-tool-color:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.chart-tool-custom { position: relative; overflow: hidden; background: conic-gradient(#ff5b6e, #f5bd38, #30d58a, #38bdf8, #c084fc, #ff5b6e); }
.chart-tool-custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.chart-tool-widths { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.chart-tool-width {
  height: 34px; padding: 4px 2px 3px; display: grid; justify-items: center; align-content: space-between;
  border: 1px solid rgba(179, 120, 35, 0.3); border-radius: 3px; color: #b3a78f; background: #060806; cursor: pointer;
}
.chart-tool-width-sample { width: 70%; border-radius: 2px; background: currentColor; }
.chart-tool-width-label { font-size: 9px; font-weight: 800; }
.chart-tool-width:hover { color: #f2ca70; }
.chart-tool-width[aria-pressed="true"] { color: #f5d781; border-color: rgba(224, 167, 65, 0.72); background: rgba(84, 55, 16, 0.7); }

/* --- Undo / Clear, top-left of the plot ----------------------------------- */
.chart-draw-actions { position: absolute; z-index: 3; left: 12px; top: 88px; display: flex; align-items: center; gap: 4px; pointer-events: none; }
.chart-draw-action {
  height: 24px; padding: 0 8px 0 6px; display: inline-flex; align-items: center; gap: 5px; pointer-events: auto;
  border: 1px solid rgba(176, 119, 34, 0.44); border-radius: 3px; color: #c8bda8; background: rgba(9, 12, 10, 0.9);
  font: 800 10px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .03em; cursor: pointer;
}
.chart-draw-action[hidden] { display: none; }
.chart-draw-action svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart-draw-action:hover, .chart-draw-action:focus-visible { color: #f2ca70; border-color: rgba(241, 193, 99, 0.76); outline: 0; }
.chart-draw-action[aria-label="Clear"]:hover { color: #ff8a97; border-color: rgba(255, 91, 110, 0.6); }
/* Only a problem is worth showing; routine guidance is for screen readers. */
.chart-draw-status[data-tone="quiet"] { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.chart-draw-status[data-tone="warning"] { padding: 4px 8px; border: 1px solid rgba(255, 91, 110, 0.5); border-radius: 3px; color: #ffb3bc; background: rgba(30, 8, 11, 0.92); font-size: 10px; pointer-events: auto; }
.chart-draw-save-status { padding: 4px 7px; border-radius: 3px; color: #aaa58e; background: rgba(9, 12, 10, .9); font-size: 10px; }

@media (min-width: 1000px) {
  .item-detail-page, .item-detail-page.rail-scroll { height: calc(100dvh - var(--header-height)); min-height: 480px; padding: 4px; overflow: hidden; }
  .item-detail-page .item-detail-shell { height: 100%; display: flex; flex-direction: column; }
  .item-detail-page .trading-workspace { flex: 1; min-height: 0; }
  .item-detail-page .workspace-chart, .item-detail-page .chart-card { display: flex; flex-direction: column; min-height: 0; height: 100%; }
  .item-detail-page .chart-body { flex: 1; min-height: 0; }
  .item-detail-page .chart-wrap { min-height: 0; }
  .item-detail-page #price-chart { position: absolute; inset: 0; height: 100%; min-height: 0; }
  .item-detail-page .research-rail, .item-detail-page .watchlist-rail { height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  .item-detail-page .rail-panel { overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
  html:not([data-chart-sidebar="watchlists"]) .item-detail-page .watchlist-rail { display: none; }
  html[data-manual-price-checks="false"] .item-detail-page .research-rail { display: none; }
}
@media (max-width: 999px) {
  .item-detail-page.rail-scroll { height: auto; overflow: visible; }
  .item-detail-page .trading-workspace, html[data-chart-sidebar="watchlists"] .item-detail-page .trading-workspace { grid-template-columns: minmax(0, 1fr); }
  .item-detail-page .chart-heading { position: relative; padding: 5px 10px; }
  .item-detail-page .chart-topline { top: 40px; left: 10px !important; right: 10px !important; }
  .item-detail-page #price-chart { height: 460px; }
  .item-detail-page .watchlist-rail { max-height: 420px; border-left: 0; border-top: 1px solid rgba(198, 138, 43, 0.48); }
  .chart-controls { flex-wrap: wrap; }
}

/* --- Per-drawing editor --------------------------------------------------
   Hangs under the pointer that picked the drawing, the way a tooltip does, with
   its arrow pointing back at the click (--arrow-x is set by chart-drawings.js). It is
   fixed to the window, so it can overhang the chart's edges. */
.chart-drawing-panel {
  position: fixed; z-index: 60; width: 212px; padding: 10px;
  display: grid; gap: 7px; pointer-events: auto;
  border: 1px solid rgba(191, 130, 41, 0.5); border-radius: 4px; color: #e8dfcf;
  background-color: #0b0e0c; background-image: linear-gradient(rgba(16, 19, 15, 0.97), rgba(7, 10, 8, 0.99)), var(--mmorpg-texture);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.7);
}
.chart-drawing-panel[hidden] { display: none; }
.chart-drawing-panel::before {
  content: ""; position: absolute; left: calc(var(--arrow-x, 50%) - 5px); width: 10px; height: 10px;
  border: 1px solid rgba(191, 130, 41, 0.5); background: #0f120f; transform: rotate(45deg);
}
.chart-drawing-panel[data-placement="below"]::before { top: -6px; border-right: 0; border-bottom: 0; }
.chart-drawing-panel[data-placement="above"]::before { bottom: -6px; border-left: 0; border-top: 0; }
.chart-drawing-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chart-drawing-panel-head .chart-tool-panel-label { color: #f1ddaa; margin-right: auto; }
.chart-drawing-lock { width: 26px; height: 26px; padding: 5px; flex: 0 0 26px; color: #d9b967; background: #171a13; border: 1px solid #66522c; border-radius: 3px; cursor: pointer; }
.chart-drawing-lock svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.chart-drawing-lock:hover, .chart-drawing-lock:focus-visible { color: #ffe5a1; border-color: #d9b967; }
.chart-reset-view { position: absolute; z-index: 3; right: 12px; top: 88px; padding: 4px 7px; border: 1px solid #51472e; border-radius: 3px; background: #141710e8; color: #bcb49d; font-size: 10px; font-family: inherit; cursor: pointer; }
#price-chart { user-select: none; -webkit-user-select: none; }
.chart-reset-view:hover { color: #ffe5a1; border-color: #a58443; }
.chart-reset-view[hidden] { display: none; }
#price-chart[data-chart-dragging="true"] { cursor: grabbing; }
.chart-drawing-delete {
  width: 26px; height: 26px; padding: 5px; display: grid; place-items: center;
  border: 1px solid rgba(255, 91, 110, 0.35); border-radius: 3px; color: #ff8a97; background: rgba(30, 8, 11, 0.6); cursor: pointer;
}
.chart-drawing-delete svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart-drawing-delete:hover, .chart-drawing-delete:focus-visible { color: #fff; border-color: rgba(255, 91, 110, 0.8); background: #d83b4e; outline: 0; }
/* Hovering a drawing with the pointer tool says it can be picked up. */
#price-chart[data-drawing-tool="inspect"][data-drawing-hover="true"] { cursor: pointer; }

/* --- End of the readout row: Indicators, then the price-series square ------
   Both sit on the chart right after the readout. Simple view is the clean one,
   so it drops Indicators and keeps only the series switch. */
.chart-topline .chart-indicators { display: flex; pointer-events: auto; }
.chart-topline .chart-indicators-toggle { height: auto; min-height: 30px; }
html[data-chart-mode="simple"] .chart-topline .chart-indicators { display: none; }
.chart-series-toggle {
  /* The readout row is 40px tall; the square matches it rather than trusting
     aspect-ratio, which a stretched flex item does not carry across. */
  flex: 0 0 40px; width: 40px; min-height: 40px; align-self: stretch; padding: 0;
  display: grid; place-items: center; pointer-events: auto;
  border: 1px solid rgba(176, 119, 34, 0.44); border-radius: 3px; background: rgba(9, 12, 10, 0.94); cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 228, 166, 0.04);
}
.chart-series-toggle[hidden] { display: none; }
/* A fixed icon size: an SVG left to size itself defaults to 300x150 and
   drags the square, and the whole readout row, up to match. */
.chart-series-toggle svg { width: 18px; height: 18px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart-series-toggle .series-buy { stroke: var(--insta-buy); }
.chart-series-toggle .series-sell { stroke: var(--insta-sell); }
.chart-series-toggle .series-average { stroke: var(--gold); }
.chart-series-toggle:hover:not(:disabled), .chart-series-toggle:focus-visible { border-color: rgba(241, 193, 99, 0.76); background: rgba(24, 22, 15, 0.96); outline: 0; }
.chart-series-toggle:disabled { opacity: .4; cursor: default; }
.quick-view-frame .chart-topline .chart-indicators, .quick-view-frame .chart-series-toggle { display: none; }