/* Revin chart drawing tools — UI styles (web/chart-drawings-ui.js).
   Every selector is prefixed .drw-/#drw- ; nothing here lays out #side itself (index.html owns the rail column).
   The page has global rules `button { width:100%; margin-top:12px; background:#2962ff; padding:9px; font-weight:600 }`,
   `button:disabled {…}` and `select, input[type=number] { width:100% }` — every control below resets them explicitly
   (button.drw-btn = specificity 0,1,1 beats `button` and ties `button:disabled`, which the :disabled rules re-cover;
   #side button.drw-btn guards rail buttons against any #side-scoped rule).
   z-index: selection toolbar 55 · text editor 58 · flyouts/popovers 95 · context menu + toast 96 · tooltip 97. */

/* ---------------------------------------------------------------- chart container cursor modes (core §3.11) */
.drw-cur-cross, #chart.drw-cur-cross { cursor: crosshair; }
.drw-cur-draw, #chart.drw-cur-draw { cursor: crosshair; }
.drw-cur-arrow, #chart.drw-cur-arrow { cursor: default; }
.drw-cur-dot, #chart.drw-cur-dot {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='2.6' fill='%23ffffff' stroke='%23000000' stroke-width='1.2'/%3E%3C/svg%3E") 8 8, crosshair;
}
.drw-cur-eraser, #chart.drw-cur-eraser {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M14.2 3.6l6.2 6.2c.7.7.7 1.8 0 2.5l-8.1 8.1H7.6l-3.9-3.9c-.7-.7-.7-1.8 0-2.5z' fill='%23ffffff' stroke='%23000000' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M8.9 8.9l6.2 6.2' stroke='%23000000' stroke-width='1.3'/%3E%3Cpath d='M8.9 8.9l-5.2 5.2c-.7.7-.7 1.8 0 2.5l3.9 3.9h4.7l3.2-3.2z' fill='%23f7a9b1'/%3E%3C/svg%3E") 4 20, pointer;
}

/* ---------------------------------------------------------------- shared */
.drw-ui, .drw-ui *, .drw-ui *::before, .drw-ui *::after { box-sizing: border-box; }
.drw-ui { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.drw-hidden { display: none !important; }

/* Hard reset of the page-wide `button {}` / `button:disabled {}` rules for every drawing-UI button. */
button.drw-btn, #side button.drw-btn {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: auto; min-width: 0; max-width: none; height: auto; margin: 0; padding: 0;
  border: 0; border-radius: 4px; background: transparent; box-shadow: none;
  color: #b2b5be; font: inherit; font-size: 13px; font-weight: 400; line-height: 1; letter-spacing: normal;
  text-transform: none; text-align: left; text-decoration: none; white-space: nowrap;
  cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  position: relative; outline: none;
  transition: background-color .12s ease, color .12s ease;
}
button.drw-btn:disabled, #side button.drw-btn:disabled { background: transparent; color: #5d606b; cursor: default; }
button.drw-btn:focus-visible, #side button.drw-btn:focus-visible { outline: 2px solid #2962ff; outline-offset: -2px; }
.drw-ico { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; pointer-events: none; }
.drw-ico svg, .drw-mico svg { display: block; width: 28px; height: 28px; }

/* ---------------------------------------------------------------- the rail (#drawtools inner) */
.drw-rail { gap: 0; }
button.drw-rbtn, #side button.drw-rbtn {
  width: 40px; height: 36px; margin: 1px 0; border-radius: 4px; color: #b2b5be;
}
button.drw-rbtn:hover, #side button.drw-rbtn:hover { background: #1e222d; color: #d1d4dc; }
button.drw-rbtn:active, #side button.drw-rbtn:active { background: #262b38; }
button.drw-rbtn.drw-on, #side button.drw-rbtn.drw-on { color: #2962ff; background: #1a1f2c; }
button.drw-rbtn.drw-on:hover, #side button.drw-rbtn.drw-on:hover { color: #3b74ff; background: #1e2433; }
button.drw-rbtn.drw-open, #side button.drw-rbtn.drw-open { background: #1e222d; }
button.drw-rbtn.drw-na, #side button.drw-rbtn.drw-na { color: #4a4e59; }
button.drw-rbtn.drw-na:hover, #side button.drw-rbtn.drw-na:hover { background: transparent; color: #5d606b; cursor: default; }
button.drw-rbtn.drw-na .drw-caret { display: none; }
/* corner triangle + the 12px right-hand flyout zone of grouped buttons */
.drw-caret { position: absolute; top: 0; right: 0; bottom: 0; width: 12px; border-radius: 0 4px 4px 0; cursor: pointer; }
.drw-caret::after {
  content: ""; position: absolute; right: 3px; bottom: 4px; width: 0; height: 0;
  border-left: 4px solid transparent; border-bottom: 4px solid #5d606b; transition: border-color .12s ease;
}
button.drw-rbtn:hover .drw-caret::after, button.drw-rbtn.drw-open .drw-caret::after { border-bottom-color: #b2b5be; }
button.drw-rbtn .drw-caret:hover { background: rgba(255, 255, 255, .07); }
button.drw-rbtn .drw-caret:hover::after { border-bottom-color: #ffffff; }
button.drw-rbtn.drw-on .drw-caret::after { border-bottom-color: #2962ff; }
.drw-sep { flex: 0 0 auto; width: 28px; height: 1px; margin: 5px auto; background: #2a2e39; }

/* ---------------------------------------------------------------- tooltip */
.drw-tip {
  position: fixed; left: -9999px; top: -9999px; z-index: 97; pointer-events: none;
  display: flex; align-items: baseline; gap: 12px; max-width: 320px; padding: 6px 10px;
  background: #131722; border: 1px solid #2a2e39; border-radius: 4px; box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
  color: #ffffff; font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap;
  opacity: 0; visibility: hidden; transition: opacity .1s ease, visibility 0s linear .1s;
}
.drw-tip.drw-show { opacity: 1; visibility: visible; transition: opacity .1s ease; }
.drw-tip-hint { color: #9598a1; font-weight: 400; }

/* ---------------------------------------------------------------- menus: flyouts, popovers, context menu */
.drw-menu, .drw-pop {
  position: fixed; left: -9999px; top: -9999px; z-index: 95;
  background: #1e222d; border: 1px solid #363a45; border-radius: 6px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .25);
  color: #d1d4dc; font-size: 14px; line-height: 1.2; outline: none;
}
.drw-menu { display: flex; flex-direction: column; padding: 6px 0; min-width: 200px; max-height: calc(100vh - 12px); overflow-y: auto; scrollbar-width: thin; }
.drw-flyout { min-width: 248px; }
.drw-ctxmenu { z-index: 96; min-width: 196px; }
button.drw-mitem {
  display: flex; align-items: center; justify-content: flex-start; gap: 6px; width: 100%; height: 36px;
  padding: 0 14px 0 8px; border-radius: 0; color: #d1d4dc; font-size: 14px; text-align: left;
}
.drw-ctxmenu button.drw-mitem { height: 32px; font-size: 13px; }
button.drw-mitem:hover, button.drw-mitem:focus-visible { background: #2a2e39; color: #ffffff; outline: none; }
button.drw-mitem.drw-cur { background: #142e61; color: #ffffff; }
button.drw-mitem.drw-cur:hover, button.drw-mitem.drw-cur:focus-visible { background: #1a3a78; }
button.drw-mitem.drw-danger:hover, button.drw-mitem.drw-danger:focus-visible { background: rgba(242, 54, 69, .16); color: #ff6b76; }
button.drw-mitem:disabled { color: #5d606b; background: transparent; }
.drw-mico { display: flex; align-items: center; justify-content: center; flex: 0 0 28px; width: 28px; height: 28px; color: #b2b5be; }
.drw-ctxmenu .drw-mico { transform: scale(.86); }
button.drw-mitem:hover .drw-mico, button.drw-mitem:focus-visible .drw-mico, button.drw-mitem.drw-cur .drw-mico { color: #ffffff; }
button.drw-mitem.drw-danger:hover .drw-mico { color: #ff6b76; }
button.drw-mitem:disabled .drw-mico { color: #4a4e59; }
.drw-mlabel { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.drw-mhint { flex: 0 0 auto; margin-left: 20px; color: #787b86; font-size: 12px; letter-spacing: .2px; }
button.drw-mitem.drw-cur .drw-mhint { color: #a9b8d8; }
.drw-mhead {
  padding: 10px 14px 4px; color: #787b86; font-size: 11px; font-weight: 600; letter-spacing: .6px;
  text-transform: uppercase; user-select: none; -webkit-user-select: none;
}
.drw-mhead:first-child { padding-top: 4px; }
.drw-msep { flex: 0 0 auto; height: 1px; margin: 5px 0; background: #2f3340; }
/* width / style menus: line previews */
.drw-pop.drw-menu { min-width: 132px; }
.drw-pop button.drw-mitem { height: 32px; gap: 12px; padding: 0 16px 0 14px; font-size: 13px; }
.drw-pop .drw-wline { display: block; flex: 0 0 36px; width: 36px; background: currentColor; border-radius: 1px; }
.drw-pop .drw-dline { display: flex; align-items: center; flex: 0 0 36px; width: 36px; height: 12px; }
.drw-pop-font button.drw-mitem { justify-content: center; }
.drw-pop-font .drw-mlabel { flex: 0 0 auto; }
.drw-pop-font.drw-menu { min-width: 80px; }

/* colour palette popover */
.drw-pop-color, .drw-pop-fill { padding: 12px; width: 228px; }
.drw-swatches { display: grid; grid-template-columns: repeat(8, 22px); gap: 4px; justify-content: space-between; transition: opacity .12s ease; }
.drw-swatches.drw-dim { opacity: .45; }
button.drw-sw {
  width: 22px; height: 22px; border-radius: 4px; padding: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
button.drw-sw:hover { transform: scale(1.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
button.drw-sw.drw-cur { box-shadow: 0 0 0 2px #1e222d, 0 0 0 3.5px #ffffff; }
button.drw-sw:focus-visible { outline: 2px solid #2962ff; outline-offset: 2px; }
.drw-poprow { display: flex; align-items: center; gap: 10px; }
.drw-pop-fill .drw-poprow:first-child { margin-bottom: 10px; }
.drw-opacity { margin-top: 12px; padding-top: 10px; border-top: 1px solid #2f3340; }
.drw-poplabel { flex: 1 0 auto; color: #b2b5be; font-size: 12px; }
.drw-opacity .drw-poplabel { flex: 0 0 auto; }
.drw-popval { flex: 0 0 36px; text-align: right; color: #d1d4dc; font-size: 12px; font-variant-numeric: tabular-nums; }
input.drw-range, #side input.drw-range {
  -webkit-appearance: none; appearance: none; flex: 1 1 auto; width: auto; min-width: 0; height: 16px; margin: 0; padding: 0;
  background: transparent; border: 0; accent-color: #2962ff; cursor: pointer;
}
input.drw-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: #434651; }
input.drw-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%;
  background: #ffffff; border: 2px solid #2962ff; box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
input.drw-range::-moz-range-track { height: 4px; border-radius: 2px; background: #434651; }
input.drw-range::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: #ffffff; border: 2px solid #2962ff; }
input.drw-range:focus-visible { outline: 2px solid #2962ff; outline-offset: 2px; border-radius: 3px; }
/* on/off switch (background fill) */
button.drw-switch {
  width: 34px; height: 18px; border-radius: 9px; background: #434651; padding: 0; justify-content: flex-start;
  transition: background-color .15s ease;
}
button.drw-switch.drw-on { background: #2962ff; }
button.drw-switch:hover { background: #50535e; }
button.drw-switch.drw-on:hover { background: #3b74ff; }
.drw-switch-knob {
  display: block; width: 14px; height: 14px; margin-left: 2px; border-radius: 50%; background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4); transition: transform .15s ease; pointer-events: none;
}
button.drw-switch.drw-on .drw-switch-knob { transform: translateX(16px); }

/* ---------------------------------------------------------------- floating selection toolbar */
.drw-selbar {
  position: fixed; left: -9999px; top: -9999px; z-index: 55;
  display: flex; align-items: center; gap: 2px; height: 40px; padding: 0 4px 0 0;
  background: #1e222d; border: 1px solid #363a45; border-radius: 6px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .5); user-select: none; -webkit-user-select: none;
}
.drw-selbar.drw-dragging { box-shadow: 0 6px 24px rgba(0, 0, 0, .65); }
.drw-grip {
  display: flex; align-items: center; justify-content: center; width: 18px; height: 38px; margin-right: 1px;
  color: #5d606b; cursor: grab; border-radius: 5px 0 0 5px; touch-action: none;
}
.drw-grip svg { width: 28px; height: 28px; flex: 0 0 28px; }
.drw-grip:hover { color: #b2b5be; background: #262a36; }
.drw-selbar.drw-dragging .drw-grip { cursor: grabbing; color: #d1d4dc; }
.drw-vsep { flex: 0 0 1px; width: 1px; height: 22px; margin: 0 3px; background: #363a45; }
button.drw-sbtn { height: 32px; min-width: 32px; border-radius: 4px; color: #d1d4dc; }
button.drw-sbtn:hover { background: #2a2e39; color: #ffffff; }
button.drw-sbtn.drw-open { background: #2a2e39; color: #ffffff; }
button.drw-sbtn.drw-on { color: #2962ff; }
button.drw-sbtn.drw-on:hover { color: #3b74ff; }
button.drw-sbtn .drw-ico { width: 28px; height: 28px; }
button.drw-delbtn:hover { color: #ff6b76; background: rgba(242, 54, 69, .14); }
/* colour buttons: icon + live colour bar */
button.drw-colorbtn { width: 32px; }
button.drw-colorbtn .drw-ico { margin-top: -5px; }
.drw-cbar {
  position: absolute; left: 7px; right: 7px; bottom: 5px; height: 3px; border-radius: 1.5px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); pointer-events: none;
}
.drw-cbar.drw-none {
  background: linear-gradient(to top right, transparent calc(50% - .75px), #f23645 calc(50% - .75px), #f23645 calc(50% + .75px), transparent calc(50% + .75px)), #131722 !important;
  height: 4px; box-shadow: inset 0 0 0 1px #5d606b;
}
/* width button: line sample + "2px" */
button.drw-widthbtn { gap: 6px; padding: 0 8px; }
button.drw-widthbtn .drw-wline { display: block; width: 14px; min-height: 1px; background: currentColor; border-radius: 1px; }
.drw-wtext { font-size: 12px; color: inherit; font-variant-numeric: tabular-nums; }
button.drw-dashbtn { padding: 0 6px; }
button.drw-dashbtn .drw-dline { display: flex; align-items: center; width: 24px; height: 12px; overflow: hidden; }
button.drw-dashbtn .drw-dash-prev { width: 36px; flex: 0 0 36px; }
button.drw-fontbtn { padding: 0 9px; }
.drw-ftext { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- inline text editor */
textarea.drw-text-editor {
  position: fixed; z-index: 58; left: -9999px; top: -9999px; display: block;
  width: 64px; min-width: 0; max-width: none; margin: 0; padding: 3px 5px;
  background: rgba(10, 12, 18, .96); border: 1px solid #2962ff; border-radius: 3px;
  box-shadow: 0 0 0 3px rgba(41, 98, 255, .22), 0 4px 14px rgba(0, 0, 0, .5);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  white-space: pre; overflow: hidden; resize: none; outline: none; caret-color: #ffffff;
  -webkit-appearance: none; appearance: none; color-scheme: dark;
}
textarea.drw-text-editor::selection { background: rgba(41, 98, 255, .55); color: #ffffff; }
/* callout: the editor IS the callout box (background = callout colour, set inline) */
textarea.drw-text-editor.drw-ed-callout {
  border-color: rgba(255, 255, 255, .75); border-radius: 5px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .16), 0 4px 14px rgba(0, 0, 0, .5);
}
textarea.drw-text-editor.drw-ed-callout::selection { background: rgba(255, 255, 255, .35); }

/* ---------------------------------------------------------------- undo toast */
.drw-toast {
  position: fixed; z-index: 96; left: -9999px; top: -9999px;
  display: flex; align-items: center; gap: 0; height: 40px; padding: 0 6px 0 16px;
  background: #1e222d; border: 1px solid #363a45; border-radius: 6px; box-shadow: 0 4px 20px rgba(0, 0, 0, .55);
  color: #d1d4dc; font-size: 13px; white-space: nowrap;
  animation: drwToastIn .16s ease-out;
}
.drw-toast-sep { width: 1px; height: 18px; margin: 0 6px 0 14px; background: #363a45; }
button.drw-toast-undo { height: 30px; padding: 0 10px; border-radius: 4px; color: #5b8cff; font-size: 13px; font-weight: 600; }
button.drw-toast-undo:hover { background: rgba(41, 98, 255, .16); color: #7ea3ff; }
@keyframes drwToastIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .drw-ui, .drw-ui *, .drw-tip, .drw-toast, .drw-caret::after { transition: none !important; animation: none !important; }
  button.drw-sw:hover { transform: none; }
}