/* hub-drawings.css — the Hub chart drawing bar (brief 1401).
 * House language: deep indigo surfaces, cream ink, gold accents —
 * the same tokens as hub.css (--border, --surface-soft, --amber,
 * --text, --dim) so the bar sits natively in the chart panel. */

/* The drawing surface: an SVG laid exactly over #hubOwnChart inside
   .tv-chart-frame (position relative). Pointer events are handled on
   the frame in the capture phase by hub-drawings.js; the SVG itself
   never intercepts — the chart keeps its own interactions whenever
   no drawing is being placed or dragged. Watermark sits at z 3; the
   drawing layer rides above the candles and below nothing else the
   owner needs to touch (the watermark is pointer-events none). */
.hub-app .hub-draw-svg { position: absolute; z-index: 4; pointer-events: none; overflow: hidden; }
.hub-app .hub-draw-svg .dl-label { paint-order: stroke; stroke: #120C2E; stroke-width: 3px; font-family: inherit; }
.hub-app .hub-draw-svg .dl-handle { cursor: grab; }
.hub-app .hub-draw-svg .dl-selected { filter: drop-shadow(0 0 2px rgba(232, 193, 90, .45)); }

/* Brief 1411: the bar in TradingView's arrangement. #hubDrawBar
   sits inside .tv-chart-frame (position relative) and covers it,
   pointer-events none; each piece re-enables its own events. The
   strip is a narrow column on the far-left edge, full pane height;
   the flyout opens immediately to its right, overlapping the
   chart; favourites run along the top of the pane, right-aligned
   under the panel header; the settings pill floats top-centre. */
.hub-app .hub-draw-bar { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.hub-app .hub-draw-bar .hd-vbar { position: absolute; left: 0; top: 0; bottom: 0; width: 46px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 0; overflow-y: auto; overflow-x: hidden; background: rgba(24, 17, 54, .92); border-right: 1px solid var(--border); border-radius: 13px 0 0 13px; pointer-events: auto; scrollbar-width: none; }
.hub-app .hub-draw-bar .hd-vbar::-webkit-scrollbar { display: none; }
.hub-app .hub-draw-bar .hd-cat { position: relative; display: flex; align-items: center; }
.hub-app .hd-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; flex: none; }
.hub-app .hd-btn svg { width: 19px; height: 19px; }
.hub-app .hd-btn:hover { background: var(--surface-soft); border-color: var(--border); }
.hub-app .hd-btn[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: #120C2E; }
.hub-app .hd-btn:disabled { opacity: .38; cursor: not-allowed; }
.hub-app .hd-btn:focus-visible, .hub-app .hd-set-btn:focus-visible, .hub-app .hd-swatch:focus-visible, .hub-app .hd-fly-row:focus-visible, .hub-app .hd-fly-star:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.hub-app .hub-draw-bar .hd-cat-trig { width: 12px; height: 32px; border-radius: 4px; margin-left: -3px; }
.hub-app .hub-draw-bar .hd-cat-trig svg { width: 9px; height: 9px; transform: rotate(0deg); }
.hub-app .hub-draw-bar .hd-vdiv { width: 26px; border-top: 1px solid var(--border); margin: 5px 0; flex: none; }
.hub-app .hub-draw-bar .hd-status { position: absolute; left: 54px; bottom: 8px; max-width: min(520px, 70%); padding: 3px 8px; border-radius: 6px; background: rgba(24, 17, 54, .85); color: var(--dim); font-size: 11.5px; pointer-events: none; }
.hub-app .hub-draw-bar .hd-status:empty { display: none; }

/* The flyout: dark panel immediately right of the strip, rows of
   icon + name + favourite star, capital section headings. */
.hub-app .hd-flyout { position: absolute; left: 50px; top: 6px; z-index: 8; width: 264px; max-height: calc(100% - 12px); overflow-y: auto; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: #1D1542; box-shadow: 0 12px 32px rgba(0, 0, 0, .5); pointer-events: auto; }
.hub-app .hd-flyout[hidden] { display: none; }
.hub-app .hd-fly-head { margin: 8px 8px 4px; font: 700 10.5px/1.3 inherit; letter-spacing: .12em; color: var(--amber); }
.hub-app .hd-fly-head:first-child { margin-top: 2px; }
.hub-app .hd-fly-row-wrap { display: flex; align-items: center; }
.hub-app .hd-fly-row { display: flex; align-items: center; gap: 9px; flex: 1; min-height: 32px; padding: 4px 8px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--text); font: 500 12.5px/1.25 inherit; text-align: left; cursor: pointer; }
.hub-app .hd-fly-row svg { width: 17px; height: 17px; flex: none; }
.hub-app .hd-fly-row:hover { background: var(--surface-soft); }
.hub-app .hd-fly-row[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: #120C2E; }
.hub-app .hd-fly-star { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--dim); cursor: pointer; flex: none; }
.hub-app .hd-fly-star svg { width: 15px; height: 15px; }
.hub-app .hd-fly-star:hover { background: var(--surface-soft); color: var(--text); }
.hub-app .hd-fly-star.on { color: var(--amber); }

/* Favourites strip: horizontal, icon-only, top of the pane,
   right-aligned under the panel header. */
.hub-app .hd-favstrip { position: absolute; top: 6px; right: 8px; z-index: 6; display: flex; align-items: center; gap: 2px; padding: 3px 5px; border: 1px solid var(--border); border-radius: 9px; background: rgba(24, 17, 54, .92); pointer-events: auto; }
.hub-app .hd-favstrip[hidden] { display: none; }
.hub-app .hd-favstrip .hd-fav-empty { padding: 2px 6px; color: var(--dim); font-size: 11.5px; white-space: nowrap; }

/* The note that replaces the bar's job on the two embed instruments. */
.hub-app .hd-note { margin: 0 0 10px; color: var(--dim); font-size: 12.5px; }

/* Selection settings pill: floats top-centre of the pane, the way
   TradingView's settings pill floats over its chart. */
.hub-app .hd-settings { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); z-index: 7; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: calc(100% - 130px); padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; background: rgba(29, 21, 66, .95); box-shadow: 0 8px 24px rgba(0, 0, 0, .4); pointer-events: auto; }
.hub-app .hd-settings[hidden] { display: none; }
.hub-app .hd-set-label { font: 700 12px/1 inherit; letter-spacing: .04em; color: var(--amber); margin-right: 2px; }
.hub-app .hd-swatches { display: inline-flex; gap: 4px; }
.hub-app .hd-swatch { width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer; }
.hub-app .hd-swatch[aria-pressed="true"] { border-color: var(--text); }
.hub-app .hd-set-group { display: inline-flex; gap: 4px; }
.hub-app .hd-set-btn { min-height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--text); font: 600 12px/1 inherit; cursor: pointer; }
.hub-app .hd-set-btn[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: #120C2E; }
.hub-app .hd-set-btn.hd-danger { border-color: rgba(214, 69, 69, .65); color: #F0A3A3; }

/* Inline text editor for text-family drawings. */
.hub-app .hd-editor { position: absolute; z-index: 6; width: 232px; padding: 10px; border: 1px solid var(--amber); border-radius: 10px; background: #1D1542; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.hub-app .hd-editor-label { display: block; font: 700 11px/1 inherit; letter-spacing: .06em; color: var(--amber); }
.hub-app .hd-editor textarea { width: 100%; margin-top: 6px; padding: 7px 8px; border: 1px solid var(--border); border-radius: 8px; background: #120C2E; color: var(--text); font: 400 13px/1.45 inherit; resize: vertical; }
.hub-app .hd-editor-row { display: flex; gap: 6px; margin-top: 8px; justify-content: flex-end; }

@media (max-width: 640px) {
  .hub-app .hd-btn { width: 34px; height: 34px; }
  .hub-app .hub-draw-bar .hd-vbar { width: 48px; }
  .hub-app .hd-flyout { width: min(264px, calc(100vw - 70px)); }
  .hub-app .hd-settings { max-width: calc(100% - 60px); }
}