/* RelicusRoad web chart — dark theme matched to the product screenshots
   in market/shots-gif/ (1280x800, dark). Deliberately committed to one
   look rather than theme-aware: it must read as the same product as the
   MetaTrader build, which is dark. */

:root {
  --bg:            #0b0e13;
  --bg-raised:     #121722;
  --bg-panel:      #0f141d;
  --border:        #1e2634;
  --border-strong: #2a3446;

  --text:          #e6ebf3;
  --text-dim:      #8a97ab;
  --text-faint:    #5a6678;

  --accent:        #d4a340;   /* RelicusRoad gold */
  --accent-soft:   #7a5f26;
  --up:            #26a69a;
  --down:          #ef5350;
  --warn:          #e0a030;
  --error:         #e05a52;

  --bottombar-h:   44px;
  --panel-w:       260px;
  /* The bar under the chart: 44px cells under its 1px top rule; a short
     landscape viewport (a phone on its side) gets the slim 32px cells. */
  --chartbar-h:    45px;
  --chartbar-h-slim: 33px;
  --chip-h:        44px;
  /* Tool icons: off is dimmed (opacity only), hover lifts it, on is 1. */
  --tool-off:      0.58;
  --tool-hover:    0.8;
  --cell-fill:     #0f141d;
  --cell-hover:    #161c28;
  --accent-wash:   rgba(212, 163, 64, 0.13);

  /* Multi-TF TrendBar: the indicator's own colours
     (RR_Library/Indicators/MultiTFTrendbar.mqh:28-30, clrLime / clrYellow /
     clrRed), all past 5:1 on --bg. */
  --tb-up:         #00ff00;
  --tb-flat:       #ffff00;
  --tb-down:       #ff0000;
  /* A soft wash behind the legend so it reads over busy overlays: the
     chart's own ground, fading out, never a box. */
  --legend-scrim:  radial-gradient(120% 100% at 0 0, rgba(11, 14, 19, 0.88) 0%,
                   rgba(11, 14, 19, 0.7) 45%, rgba(11, 14, 19, 0) 100%);

  /* Motion (site ui_motion rules): no overshoot anywhere. */
  --ease-enter:    cubic-bezier(.22, 1, .36, 1);
  --ease-exit:     cubic-bezier(.4, 0, .2, 1);
  --ease-state:    cubic-bezier(.4, 0, .2, 1);
  --dur-enter:     640ms;
  --dur-exit:      460ms;
  --dur-state:     360ms;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

/* `hidden` beats layout, always.
   The browser's own [hidden] rule lives in the UA sheet, so ANY author rule
   that sets display wins over it - and every element on this page that gets
   hidden from script is also a flex container. That is not a hypothetical
   ordering problem: .panel and .dlg-back each needed their own [hidden]
   patch after being caught showing through, and the picker was the third,
   sitting on screen as two empty selects whenever the catalogue was absent.
   One rule instead of a patch per element, and the next one cannot repeat
   it. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

/* ---------- legend (over the chart's top-left corner) ---------- */

/* TradingView's phone legend: symbol, timeframe, last price and change on
   one line, what is drawn on the next. Click-through, and haloed in the
   chart's own ground so it reads over candles and zones alike. Kept clear of
   the price axis on the right. */
.legend {
  position: absolute;
  top: 8px;
  left: 10px;
  z-index: 4;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: calc(100% - 96px);
  pointer-events: none;
  font-size: 12px;
  line-height: 1.3;
  text-shadow: 0 0 3px var(--bg), 0 0 3px var(--bg), 0 0 2px var(--bg);
}
.legend::before {
  content: "";
  position: absolute;
  inset: -8px -48px -14px -10px;
  z-index: -1;
  background: var(--legend-scrim);
  pointer-events: none;
}
.legend-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
}
.legend-symbol { font-weight: 700; letter-spacing: 0.02em; color: var(--text); }
.legend-tf { font-family: var(--mono); font-size: 11px; color: var(--text-dim); }
.legend-price { font-family: var(--mono); font-weight: 600; }
.quote-change { font-family: var(--mono); font-size: 11.5px; }
.quote-change.up   { color: var(--up); }
.quote-change.down { color: var(--down); }
.legend-sub { font-size: 11.5px; color: var(--text-dim); }
.legend-tools { color: var(--accent); font-weight: 600; }
.legend-trend { gap: 7px; font-family: var(--mono); font-size: 10.5px; }
.tb-slot { display: inline-flex; align-items: baseline; gap: 2px; }
.tb-slot[data-trend="up"]   { color: var(--tb-up); }
.tb-slot[data-trend="flat"] { color: var(--tb-flat); }
.tb-slot[data-trend="down"] { color: var(--tb-down); }
.tb-mark { font-size: 9px; }

.status {
  font-size: 11px;
  color: var(--text-faint);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-faint);
}
.status[data-state="live"]::before  { background: var(--up); }
.status[data-state="stale"]::before { background: var(--warn); }
.status[data-state="error"]::before { background: var(--error); }
.status[data-state="demo"]::before  { background: var(--accent); }

/* ---------- chart bar (under the chart) ---------- */

/* Symbol | TF | Tools (n) | Fullscreen, TradingView's segmented row: each
   control is a cell the bar's full height, edge to edge, split by 1px rules
   and flush with the chart's edge above and the disclaimer's rule below.
   Symbol takes the spare width; the rest size to their content. The pickers
   are native <select>s on purpose (keyboard, screen reader and the phone's
   own picker for free); the cell is the frame, the select fills it and
   carries the hit area. */
.chartbar {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  min-width: 0;
  height: var(--chartbar-h);
  padding: 0;
  background: var(--cell-fill);
  border-top: 1px solid var(--border);
}
.picker {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  min-width: 0;
}
.chip {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: var(--chip-h);
  margin: 0;
  padding: 0 14px;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-state) var(--ease-state),
              color var(--dur-state) var(--ease-state),
              box-shadow var(--dur-state) var(--ease-state);
}
/* The rules between cells. */
.chip + .chip,
.picker:not([hidden]) + .chip { border-left: 1px solid var(--border); }
.chip:hover { background: var(--cell-hover); }
.chip:active { background: var(--accent-wash); }
.chip-btn:focus-visible,
.chip-select:focus-within { outline: 2px solid var(--accent); outline-offset: -2px; }
.chip-select { padding: 0; }
.chip-select:not(.chip-tf) { flex: 1 1 auto; min-width: 0; }
.chip-input {
  -webkit-appearance: none;
          appearance: none;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0 32px 0 14px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a97ab' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 13px center / 10px 6px;
  border: 0;
  border-radius: 0;
  color: inherit;
  font: inherit;
  text-overflow: ellipsis;
  cursor: pointer;
}
/* The ring is on the cell (:focus-within above), so the select's own goes. */
.chip-input:focus { outline: none; }
/* The open list is painted by the OS, light by default on a dark page. */
.chip-input option { background: var(--bg-raised); color: var(--text); }
.chip-tf .chip-input { font-family: var(--mono); }
/* No catalogue, no picker: Tools takes the spare width instead. */
.picker[hidden] + .chip { flex: 1 1 auto; justify-content: flex-start; }
.chip-glyph { flex: 0 0 auto; width: 16px; height: 16px; }
.chip-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent);
  color: #17120a;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
/* Pressed (the sheet open, fullscreen on): the cell fills, with a gold rule
   along its top edge, never a floating outline. */
.chip-btn[aria-expanded="true"],
.chip-btn[aria-pressed="true"] {
  background: var(--accent-wash);
  color: var(--accent);
  box-shadow: inset 0 2px 0 var(--accent);
}
.fs-exit,
.chip-btn[aria-pressed="true"] .fs-enter { display: none; }
.chip-btn[aria-pressed="true"] .fs-exit { display: block; }

/* A phone keeps Fullscreen to its glyph (the label stays as aria-label). */
@media (max-width: 520px) {
  .chip-end { padding: 0; width: var(--chip-h); }
  .chip-end .chip-label { display: none; }
}

/* A phone on its side (or any short, wide box): the slim row. */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --chip-h: 32px; --chartbar-h: var(--chartbar-h-slim); }
  .chip { font-size: 12px; }
}

/* ---------- tool strip ---------- */

/* One icon toggle per tool, the site toolkit's pictures and short names.
   Desktop: one row, wrapping to two if the window is narrow. Tablet and
   phone: one row that scrolls sideways (snap + edge fade), so the page
   itself never scrolls sideways. Settings sits outside the scroller, so it
   is always reachable. */
.toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 4px 10px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}

.toolbar-strip {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.tool,
.tool-settings {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 76px;
  padding: 6px 2px 4px;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--text-faint);
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tool:focus-visible,
.tool-settings:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: -1px;
}

.tool-art {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  box-shadow: 0 0 0 1px var(--border-strong);
  transition: box-shadow var(--dur-state) var(--ease-state);
}
/* Dimming sits on the picture, not the tile, so the M15 badge stays legible.
   Off is opacity alone (no greyscale): the icons' colours are what tells
   the tools apart, dimmed or not. */
.tool-art img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: contain;
  opacity: var(--tool-off);
  transition: opacity var(--dur-state) var(--ease-state);
}

.tool-name {
  font-size: 10.5px;
  line-height: 1.2;
  white-space: nowrap;
  transition: color var(--dur-state) var(--ease-state);
}

.tool:hover .tool-art img { opacity: var(--tool-hover); }
.tool:hover .tool-name { color: var(--text-dim); }

/* On: full colour and a gold ring with a hairline gap, so the ring reads
   against the icon's own dark edge. */
.tool[aria-pressed="true"] .tool-art img { opacity: 1; }
.tool[aria-pressed="true"] .tool-art {
  box-shadow: 0 0 0 2px var(--bg-panel), 0 0 0 4px var(--accent);
}
.tool[aria-pressed="true"] .tool-name { color: var(--text); }

/* Draws on another timeframe only (Sessions off M15): dimmed like off, with
   the timeframe it needs on a badge. A tap goes there. */
.tool-badge {
  position: absolute;
  right: -6px;
  bottom: -5px;
  padding: 0 3px;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 13px;
  color: var(--accent);
  background: var(--bg-raised);
  border: 1px solid var(--accent-soft);
  border-radius: 4px;
}
/* All / None quick toggles at the start of the strip: a glyph on the tile
   face instead of a picture, a hairline after them to set them apart. */
.tool-quick .tool-art {
  display: grid;
  place-items: center;
  color: var(--text-dim);
  background: var(--bg-raised);
}
.tool-quick:hover .tool-art { color: var(--text); }
.tool-quick:hover .tool-name { color: var(--text-dim); }
.tool-quick[data-tool="none"] {
  margin-right: 4px;
  box-shadow: 1px 0 0 0 var(--border);
  border-radius: 8px 0 0 8px;
}
.tool[aria-disabled="true"] { cursor: default; }
.tool[aria-disabled="true"] .tool-art img { opacity: 0.2; }

.tool-settings {
  border-left: 1px solid var(--border);
  border-radius: 0 8px 8px 0;
  color: var(--text-dim);
}
.tool-art-gear {
  display: grid;
  place-items: center;
  background: var(--bg-raised);
  color: var(--text-dim);
  transition: color var(--dur-state) var(--ease-state),
              box-shadow var(--dur-state) var(--ease-state);
}
.tool-art-gear .gear-icon { width: 18px; height: 18px; }
.tool-settings:hover .tool-art-gear { color: var(--text); }
.tool-settings[aria-expanded="true"] .tool-art-gear {
  color: var(--accent);
  box-shadow: 0 0 0 2px var(--bg-panel), 0 0 0 4px var(--accent-soft);
}
.tool-settings[aria-expanded="true"] .tool-name { color: var(--accent); }

@media (max-width: 1024px) {
  .toolbar-strip {
    --fade-l: 0px;
    --fade-r: 0px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 24px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l),
                                        #000 calc(100% - var(--fade-r)), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l),
                                        #000 calc(100% - var(--fade-r)), transparent 100%);
  }
  .toolbar-strip::-webkit-scrollbar { display: none; }
  .toolbar-strip[data-fade-start="true"] { --fade-l: 28px; }
  .toolbar-strip[data-fade-end="true"]   { --fade-r: 28px; }
  .tool { scroll-snap-align: start; }
}

/* ---------- banners ---------- */

.banner {
  flex: 0 0 auto;
  padding: 8px 14px;
  font-size: 12.5px;
  background: rgba(224, 160, 48, 0.12);
  border-bottom: 1px solid rgba(224, 160, 48, 0.3);
  color: #f0d8a8;
}
.banner strong { color: var(--warn); margin-right: 6px; }
/* Loudest of the three: a viewer must never mistake the fixture's synthetic
   overlays for the product's analysis. */
.banner-fixture {
  background: rgba(224, 90, 82, 0.18);
  border-bottom-color: rgba(224, 90, 82, 0.45);
  color: #f6d5d2;
  font-weight: 500;
}
.banner-fixture strong { color: var(--error); }
.banner-fixture em { color: #ffffff; font-style: normal; font-weight: 700; }

/* Not a warning. The note strip states what an instrument is; it borrows
   the banner's shape for a fact, so it drops the banner's alarm colour. */
.banner-note {
  background: var(--bg-raised);
  color: var(--text-dim);
  border-bottom-color: var(--border);
}

.banner-error {
  background: rgba(224, 90, 82, 0.12);
  border-bottom-color: rgba(224, 90, 82, 0.3);
  color: #f3c8c4;
}
.banner-error strong { color: var(--error); }

/* ---------- stage ---------- */

#stage {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  min-height: 0;
}

#chart {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

/* ---------- panel ---------- */

/* Settings: a popover over the chart's top-right corner (a bottom sheet on
   a phone), so the chart keeps the full width. Eases in and out; app.js
   sets [hidden] only after the exit has played. */
.panel {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 20;
  width: var(--panel-w);
  max-height: calc(100% - 20px);
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  transition: opacity var(--dur-exit) var(--ease-exit),
              transform var(--dur-exit) var(--ease-exit);
}
.panel[data-open="true"] {
  opacity: 1;
  transform: none;
  transition-duration: var(--dur-enter);
  transition-timing-function: var(--ease-enter);
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom: 1px solid var(--border);
}

.panel-close {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.panel-close:hover { color: var(--text); }

.panel-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 6px 0;
}

.panel-empty {
  margin: 16px 12px;
  color: var(--text-faint);
  font-size: 12px;
}

/* The row is a flex pair, not one control: the toggle takes the space and
   the gear sits at the end. They cannot nest - a button inside a button is
   invalid and the inner one never fires. */
.feature-row {
  display: flex;
  align-items: stretch;
}
.feature-row:hover { background: rgba(255, 255, 255, 0.03); }

.feature {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 4px 8px 12px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.feature:hover { color: var(--text); }

/* The icon says which overlay this is and, by its colour, whether it is on.
   Off is the same muted grey as the label, so a row reads as one state. */
.feature-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--text-faint);
  opacity: 0.75;
  transition: color 0.12s ease, opacity 0.12s ease;
}
.feature[aria-pressed="true"] { color: var(--text); }
.feature[aria-pressed="true"] .feature-icon { opacity: 1; }

.feature-name  { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feature-count { flex: 0 0 auto; font-size: 11px; color: var(--text-faint); font-family: var(--mono); }

.feature-gear {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 10px;
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  /* Dim rather than absent. Hiding it until hover keeps the column quiet,
     but :hover never fires on a touch screen, so the settings for every
     feature would simply not exist on a phone. */
  opacity: 0.4;
  transition: opacity 0.12s ease, color 0.12s ease;
}
.feature-row:hover .feature-gear,
.feature-gear:focus-visible,
.feature-gear[aria-expanded="true"] { opacity: 1; }
.feature-gear:hover,
.feature-gear[aria-expanded="true"] { color: var(--accent); }
.gear-icon { width: 14px; height: 14px; }

/* ---------- Tools sheet ---------- */

/* One component at every width: a popover over the bar's Tools chip from
   721px, a bottom sheet on a phone. The tool tiles reuse the strip's look
   (.tool: picture dimmed when off, gold ring when on). Same motion as the
   panel: [data-open] drives it, app.js sets [hidden] after the exit. */
.sheet {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 22;
  width: min(380px, calc(100% - 16px));
  max-height: calc(100% - 16px);
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transform-origin: bottom left;
  transition: opacity var(--dur-exit) var(--ease-exit),
              transform var(--dur-exit) var(--ease-exit);
}
.sheet[data-open="true"] {
  opacity: 1;
  transform: none;
  transition-duration: var(--dur-enter);
  transition-timing-function: var(--ease-enter);
}
.sheet-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 0 14px;
  border-bottom: 1px solid var(--border);
}
.sheet-title { flex: 0 0 auto; margin-right: auto; font-size: 13px; font-weight: 700; color: var(--text); }
.sheet-close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.sheet-close:hover { color: var(--text); }
.sheet-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  padding: 8px 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sheet .sheet-tool { width: auto; min-width: 0; min-height: 44px; }
/* The TrendBar tile: its glyph in the indicator's colours, dimmed when off. */
/* Strategy sets: a sideways strip in the sheet's head, between the title
   and Close, its ends fading so a cut-off chip reads as "more this way". */
.sheet-sets {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 16px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 16px), transparent 100%);
}
.sheet-sets:not([hidden]) ~ .sheet-close { margin-left: 0; }
.sheet-sets:not([hidden]) { margin-left: -4px; }
.sheet-sets::-webkit-scrollbar { display: none; }
.sheet-set {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 12px;
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-state) var(--ease-state),
              border-color var(--dur-state) var(--ease-state),
              background-color var(--dur-state) var(--ease-state);
}
.sheet-set:hover { color: var(--text); }
.sheet-set:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.sheet-set[aria-pressed="true"] {
  color: var(--text);
  border-color: var(--accent);
  background: rgba(212, 163, 64, 0.14);
}
.sheet .tool-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.sheet-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 4px;
  border-top: 1px solid var(--border);
}
.sheet-btn {
  min-height: 44px;
  padding: 0 10px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.sheet-btn:hover { color: var(--accent); }
.sheet-btn-end { margin-left: auto; }
.sheet-close:focus-visible,
.sheet-btn:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }

/* ---------- per-feature settings dialog ---------- */

/* One dialog, reused by every feature. The panel is 240px wide and these are
   two-column controls; the terminal puts its settings in a dialog too, so a
   person who knows the MetaTrader build meets the same shape here. */
.dlg-back {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  /* Right-aligned against the panel the gear was clicked in, and with no
     scrim over the chart. A dimmed backdrop is the usual thing for a modal
     and it is wrong here: every control in this dialog is a live preview,
     so darkening the one surface the preview appears on hides the answer to
     the question the dialog was opened to ask. The backdrop still catches a
     click to dismiss - it is just transparent. */
  justify-content: flex-end;
  padding: 20px calc(var(--panel-w) + 20px) 20px 20px;
  background: transparent;
}

.dlg {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 430px;
  max-height: 82vh;
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}

.dlg-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.dlg-icon { display: flex; flex: 0 0 auto; }
.dlg-icon .feature-icon { width: 17px; height: 17px; opacity: 1; }
.dlg-title { flex: 1 1 auto; font-size: 14px; color: var(--text); font-weight: 600; }
.dlg-close {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 21px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}
.dlg-close:hover { color: var(--text); }

.dlg-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 14px 4px;
}

.dlg-section {
  margin: 4px 0 10px;
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.dlg-section + .set-field { margin-top: 0; }
.dlg-body .dlg-section:not(:first-child) {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.dlg-note {
  margin: 16px 0 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-faint);
}

/* Four columns, so the values line up down the dialog rather than each row
   finding its own width. Show and Colour are fixed; the name takes the
   slack and the size slider gets a usable, constant travel. */
.el-head,
.el-row {
  display: grid;
  grid-template-columns: 18px 1fr 44px 96px;
  align-items: center;
  gap: 8px;
}
.el-head {
  padding-bottom: 6px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.el-head span:nth-child(3) { text-align: center; }
.el-row { padding: 5px 0; }
.el-row + .el-row { border-top: 1px solid rgba(30, 38, 52, 0.6); }

.el-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  color: var(--text-dim);
}
.el-show { accent-color: var(--accent); cursor: pointer; margin: 0; }
.el-color { width: 44px; height: 20px; }
.el-size { width: 100%; accent-color: var(--accent); cursor: pointer; margin: 0; }

.set-field { display: block; margin-bottom: 12px; }
.set-label {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--text-dim);
  margin-bottom: 5px;
}
.set-value { color: var(--text-faint); font-family: var(--mono); }
.set-field input[type="range"] {
  width: 100%;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.set-color {
  padding: 0;
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  cursor: pointer;
}

/* Reset alone on the left, Cancel and Save together on the right. The
   destructive one is never next to the thumb reaching for the safe one, and
   every feature's dialog puts them in the same place. */
.dlg-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-top: 1px solid var(--border);
}
.dlg-spacer { flex: 1 1 auto; }

.set-btn {
  flex: 0 0 auto;
  padding: 6px 16px;
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
.set-btn:hover { color: var(--text); border-color: var(--text-faint); }

.set-btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #17120a;
  font-weight: 600;
}
.set-btn-primary:hover { filter: brightness(1.08); color: #17120a; }

/* ---------- panel footer ---------- */

.panel-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 12px;
  border-top: 1px solid var(--border);
}
/* Pushed to the far edge: it undoes a different thing from the two beside
   it, and sitting flush against them reads as a third of the same kind. */
.link-btn-end { margin-left: auto; }

.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--text-faint);
  font-family: inherit;
  font-size: 11.5px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link-btn:hover { color: var(--accent); }

/* ---------- bottom bar ---------- */

#bottombar {
  flex: 0 0 var(--bottombar-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  background: var(--bg-raised);
  border-top: 1px solid var(--border);
}

.legal {
  font-size: 11px;
  color: var(--text-faint);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cta {
  margin-left: auto;
  flex: 0 0 auto;
  background: var(--accent);
  color: #1a1206;
  font-weight: 600;
  font-size: 12.5px;
  text-decoration: none;
  padding: 7px 15px;
  border-radius: 4px;
  white-space: nowrap;
}
.cta:hover { filter: brightness(1.08); }

/* ---------- mobile ---------- */

@media (max-width: 720px) {
  :root { --panel-w: 100%; }

  /* The Tools sheet is the control on a phone; the strip would take a
     fifth of the screen above the chart for the same fourteen toggles. */
  .toolbar { display: none; }
  .chip-input { max-width: 150px; }

  /* Settings becomes a bottom sheet over the chart. */
  .panel {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: 72%;
    border-radius: 12px 12px 0 0;
    border-bottom: none;
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.5);
    transform: translateY(12px);
    transform-origin: bottom center;
  }
  .dlg-back { padding: 12px; justify-content: center; }

  .sheet {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: 92%;
    border-radius: 14px 14px 0 0;
    border-bottom: none;
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.5);
    transform: translateY(12px);
    transform-origin: bottom center;
  }
  .sheet-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  .toolbar { padding: 2px 4px 2px 6px; gap: 2px; }
  .tool, .tool-settings { width: 66px; padding: 6px 1px 4px; }
  .tool-settings { width: 58px; }
  .tool-art { width: 36px; height: 36px; border-radius: 9px; }
  .tool-name { font-size: 10px; }
}

/* A short, wide view (a phone on its side, the home box on a laptop): the
   sheet's fourteen tools in two rows, so it never covers the whole chart. */
@media (max-height: 500px) and (orientation: landscape) {
  .sheet { width: min(560px, calc(100% - 16px)); }
  .sheet-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 4px; }
  .sheet .sheet-tool { padding: 4px 1px 2px; }
  .sheet .tool-art { width: 30px; height: 30px; border-radius: 8px; }
  .sheet-head,
  .sheet-foot { min-height: 0; }
  .sheet-close,
  .sheet-btn { min-height: 36px; height: 36px; }
  .sheet-sets { padding-top: 3px; padding-bottom: 3px; }
  .sheet-set { min-height: 30px; }
}

/* The demo label is the page's disclaimer, so it never disappears: on narrow
   screens it wraps to two lines instead of being cut. */
@media (max-width: 520px) {
  #bottombar { padding: 6px 14px; flex-basis: auto; min-height: var(--bottombar-h); box-sizing: border-box; }
  .legal { white-space: normal; line-height: 1.35; }
  .cta { padding: 7px 11px; }
}

/* ---------- embed (?embed=1): chart, its bar and the demo label ---------- */

.is-embed .toolbar,
.is-embed .panel,
.is-embed .banner-note,
.is-embed .cta { display: none; }
.is-embed #bottombar { background: var(--bg); }
.is-embed #bottombar {
  flex-basis: auto;
  min-height: 30px;
  padding: 4px 10px;
  box-sizing: border-box;
}
.is-embed .legal { white-space: normal; line-height: 1.35; }

/* ---------- fullscreen (html.is-fs: real or the host's pinned frame) ---------- */

/* The chart, its legend, its bar and the disclaimer; nothing else. The
   disclaimer stays, on one line (the recorded dates give way, never the
   words). Safe-area padding for a notch, when the browser reports one. */
.is-fs #app {
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.is-fs .toolbar,
.is-fs .banner-note { display: none; }
.is-fs #bottombar { min-height: 22px; padding: 2px 10px; }
.is-fs .legal { white-space: nowrap; }
.is-fs .legal-range { display: none; }

/* ---------- reduced motion: jump to the target ---------- */

@media (prefers-reduced-motion: reduce) {
  .tool-art,
  .tool-art img,
  .tool-name,
  .panel,
  .panel[data-open="true"],
  .sheet,
  .sheet[data-open="true"],
  .sheet-set,
  .chip { transition: none; }
}