/* ---------------------------------------------------------------------------
   VisualMarkets.Blazor: the look of the library's components. Each host page links it right after its own stylesheet
   (the Desk: after app.css), so a component's rules win over the page's at equal weight: ConfirmButton's red Confirm
   over .btn.primary.
   The colours are the host's theme tokens (the Desk's app.css: the palette on :root, the rest on .shell, .vm-auth and
   .print-shell); each var() carries the Desk's dark value as its fallback, for a page that defines none.
   Buttons, inputs and hints stay the host's (.btn, input, select, textarea, .hint): ConfirmButton's default class is
   "btn sm", PickList's notes are "hint", FieldInput is plain inputs.
   --------------------------------------------------------------------------- */

/* ---- Alert banner: AlertBanner (Design features #1) ------------------------------- */
.alert {
    --a: var(--link, #6FC3FF); --a-bg: var(--soft-bg, rgba(0, 102, 255, .10));
    display: flex; align-items: flex-start; gap: 12px;
    margin: 10px 0 14px; padding: 12px 14px;
    background: var(--a-bg); color: var(--ink, #E6F0FF);
    border: 1px solid color-mix(in srgb, var(--a) 35%, transparent);
    border-left: 3px solid var(--a); border-radius: 8px;
    box-shadow: 0 0 18px color-mix(in srgb, var(--a) 18%, transparent);
}
.alert.success { --a: var(--good, #7BE0A8); --a-bg: var(--good-bg, rgba(46, 204, 135, .16)); }
.alert.warning { --a: var(--mid, #FFD27A); --a-bg: var(--mid-bg, rgba(252, 185, 0, .14)); }
.alert.danger { --a: var(--bad, #FF8FA5); --a-bg: var(--bad-bg, rgba(255, 90, 120, .15)); }
.alert-icon { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--a); }
.alert-icon svg { width: 20px; height: 20px; display: block; }
.alert-body { flex: 1; min-width: 0; }
.alert-title { font-weight: 600; color: var(--a); margin-bottom: 2px; }
.alert-text { line-height: 1.5; }
.alert-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.alert-close { flex: none; background: none; border: 0; padding: 0 2px; cursor: pointer; font-size: 20px; line-height: 1; color: var(--muted, #8FA6CC); }
.alert-close:hover { color: var(--ink, #E6F0FF); }

/* ---- Star rating: StarRating (Design features #3) --------------------------------- */
.star-rating { display: inline-flex; gap: 1px; white-space: nowrap; line-height: 1; }
.star-rating .star { font-size: 16px; color: rgba(143, 166, 204, .5); background: none; border: 0; padding: 0 1px; }
.star-rating .star.on { color: #E3A93A; text-shadow: 0 0 6px rgba(227, 169, 58, .35); }
.star-rating.edit .star { cursor: pointer; font-size: 20px; transition: transform .1s; }
.star-rating.edit .star:hover { transform: scale(1.18); }

/* ---- Dialog: Dialog (Design features #4) ------------------------------------------ */
.dialog-backdrop {
    position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
    padding: 16px; background: rgba(3, 8, 20, .62); backdrop-filter: blur(2px);
}
.dialog {
    width: min(920px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column;
    background: var(--vm-navy, #0A1733); color: var(--ink, #E6F0FF); border: 1px solid var(--rule, rgba(0, 212, 255, .45));
    border-radius: 12px; box-shadow: 0 20px 70px rgba(0, 0, 0, .55);
}
/* Other sizes are the host's, by the dialog's Class (the Desk's app.css: .dialog.wide, .dialog.narrow, and a dialog
   holding the rich editor, which must win over them). */
.dialog-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px;
    border-bottom: 1px solid var(--line, rgba(61, 169, 255, .18));
}
.dialog-head h2 { margin: 0; font-size: 18px; }
.dialog-close { background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--muted, #8FA6CC); }
.dialog-close:hover { color: var(--ink, #E6F0FF); }
.dialog-body { flex: 1; overflow: auto; padding: 16px 18px; }
.dialog-foot {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 18px;
    border-top: 1px solid var(--line, rgba(61, 169, 255, .18));
}
.dialog-foot .hint { margin-right: auto; }
@media (max-width: 700px) {
    .dialog-backdrop { padding: 0; }
    .dialog { width: 100%; height: 100%; max-height: none; border-radius: 0; }
}

/* ---- Pick list: PickList (Design features #5) ------------------------------------- */
.pick-list { display: flex; flex-direction: column; gap: 10px; }
.pick-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pick-chip {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 4px 3px 11px;
    border: 1px solid var(--btn-border, rgba(0, 212, 255, .5)); border-radius: 16px; background: var(--soft-bg, rgba(0, 102, 255, .10));
    font-size: 13px; color: var(--ink, #E6F0FF);
}
.pick-chip .pick-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-detail { color: var(--muted, #8FA6CC); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-remove {
    flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background: none; color: var(--muted, #8FA6CC); font-size: 16px; line-height: 1;
}
.pick-remove:hover { color: #fff; background: #C62839; }
.pick-remove.confirm { width: auto; padding: 0 9px; border-radius: 11px; color: #fff; background: #C62839; font-size: 12px; font-weight: 600; }
.pick-search input { width: min(380px, 100%); }
.pick-offers { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.pick-offer {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 11px; cursor: pointer;
    font: inherit; font-size: 13px; color: var(--btn-ink, #CFE6FF); background: transparent;
    border: 1px dashed var(--btn-border, rgba(0, 212, 255, .5)); border-radius: 16px;
}
.pick-offer:hover { background: var(--btn-hover, rgba(0, 163, 255, .14)); border-style: solid; }
.pick-search .hint { margin-top: 4px; }

/* ---- Confirm in place: ConfirmButton (Design features #7) ------------------------- */
/* The second click's state: a solid red rectangle. */
.btn.confirm { background: #C62839; border-color: #C62839; color: #fff; border-radius: 3px; font-weight: 600; }
.btn.confirm:hover { background: #E0334A; border-color: #E0334A; }
/* Wide enough for both words, so nothing around it moves. */
.btn.confirmable { min-width: 66px; text-align: center; }

/* ---- Property grid: PropertyGrid, PropertyGridRow, PropertyGrid/Editors ------------------------------------------ */
/* WPF's grid (VisualMarkets.WPF/PropertyGrid) in the Desk's look. Each row is a line of three columns: the name, the
   splitter and the value. The grid's parameters set four variables on its root: --vm-pg-name (the name column, kept
   between a quarter and three quarters of the grid as WPF keeps it), --vm-pg-indent (a level's indent and the expander's
   width; a leaf has no expander and no gap for one, as in WPF, so a child's name lines up under its parent's),
   --vm-pg-section (a section's band) and --vm-pg-expander; a row sets its own --vm-pg-depth. The inputs are the grid's
   own, smaller than the page's, so a row is as high as WPF's. */
.vm-property-grid { position: relative; font-size: 13px; line-height: 1.3; color: var(--ink, #E6F0FF); }
/* Auto lays out by the grid's own width, so it takes the width its host gives it and needs one: in a host that sizes to
   its content it collapses (PropertyGridLayout.Auto says so; Table sizes to its content). */
.vm-pg-auto { container-type: inline-size; }
.vm-pg-line {
    display: grid; grid-template-columns: clamp(25%, var(--vm-pg-name, 200px), 75%) 5px minmax(0, 1fr); align-items: center;
    min-height: 28px; border-bottom: 1px solid var(--line, rgba(61, 169, 255, .18));
}
.vm-pg-line:hover { background: var(--row-edit, rgba(0, 102, 255, .08)); }
.vm-pg-head {
    display: flex; align-items: center; min-width: 0; padding: 2px 0;
    padding-left: calc(var(--vm-pg-indent, 20px) * var(--vm-pg-depth, 0));
}
.vm-pg-name { margin-left: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-pg-disabled > .vm-pg-line .vm-pg-name { color: var(--muted, #8FA6CC); }
.vm-pg-splitter { align-self: stretch; cursor: col-resize; touch-action: none; }
.vm-pg-splitter:hover { background: var(--line, rgba(61, 169, 255, .18)); }
.vm-pg-value { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 2px 4px 2px 0; }
/* A group, a section and a divider: the name takes the whole line, there is no value (WPF's IsGroup, IsSuperGroup,
   IsDivider triggers). A section is a band in --vm-pg-section; a divider is a plain line, with a band only when its class
   names one ([PropertyGridDivider]'s background, set on the row), as WPF's OverrideBackground trigger paints it. */
.vm-pg-group > .vm-pg-line > .vm-pg-head, .vm-pg-divider > .vm-pg-line > .vm-pg-head { grid-column: 1 / -1; }
.vm-pg-group > .vm-pg-line { color: var(--th-ink, #CFE6FF); font-weight: 600; }
.vm-pg-section > .vm-pg-line {
    background: var(--vm-pg-section, var(--th-bg, rgba(0, 102, 255, .16)));
    border-bottom-color: var(--th-rule, rgba(0, 212, 255, .55));
}
/* WPF's expander: a triangle turned 45 degrees when open, faded under the pointer. */
.vm-pg-expander {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--vm-pg-indent, 20px); height: 20px;
    padding: 0; border: 0; background: none; cursor: pointer; color: var(--vm-pg-expander, var(--vm-sky, #00A3FF));
}
.vm-pg-expander svg { width: 8px; height: 8px; fill: currentColor; transition: transform .12s; }
.vm-pg-expander.open svg { transform: rotate(45deg); }
.vm-pg-expander:hover { opacity: .5; }
.vm-pg-expander:focus-visible { outline: 1px solid var(--focus, #00D4FF); }
/* The editors. */
.vm-property-grid .vm-pg-input {
    flex: 1 1 auto; width: 100%; min-width: 0; height: 24px; box-sizing: border-box; margin: 0; padding: 2px 6px;
    font: inherit; font-size: 13px; color: var(--ink, #E6F0FF);
    background: var(--input-bg, rgba(3, 10, 26, .85)); border: 1px solid var(--input-border, rgba(61, 169, 255, .35)); border-radius: 4px;
}
.vm-property-grid .vm-pg-input:focus { outline: 1px solid var(--focus, #00D4FF); outline-offset: -1px; }
.vm-property-grid .vm-pg-input:disabled { opacity: .55; cursor: default; }
.vm-property-grid .vm-pg-number { font-variant-numeric: tabular-nums; }
.vm-property-grid .vm-pg-check { margin: 0 0 0 2px; accent-color: var(--vm-sky, #00A3FF); }
.vm-pg-box { flex: 1 1 auto; display: flex; min-width: 0; }
/* What is shown is not what the settings hold: not a number yet, or outside the field's bounds (WPF's
   InvalidValueBorderStyle, d507966). The title says why. */
.vm-property-grid .vm-pg-invalid .vm-pg-input { border-color: var(--bad, #FF8FA5); box-shadow: 0 0 0 1px var(--bad, #FF8FA5); }
/* A row held (arena PLAN.md II.19, item 39): its field refuses the value it shows (out of bounds, required and empty, not
   one of its list; the reason is the value's title) or a check across fields that it is in fails. Outlined in the theme's
   --bad, as WPF's red border; a failing check's message is said once, under the last row it is about, in the value column. */
.vm-property-grid .vm-pg-held > .vm-pg-line > .vm-pg-value .vm-pg-input,
.vm-property-grid .vm-pg-held > .vm-pg-line > .vm-pg-value .vm-pg-check { border-color: var(--bad, #FF8FA5); box-shadow: 0 0 0 1px var(--bad, #FF8FA5); }
.vm-pg-check-message {
    margin: -1px 4px 3px clamp(25%, var(--vm-pg-name, 200px), 75%); padding: 1px 0 0 5px; font-size: 11px; line-height: 1.3;
    color: var(--bad, #FF8FA5); word-break: break-word;
}
/* A spinner beside a number whose field declares a step (WPF's StepButtons): two bare halves, the theme's muted ink. */
.vm-pg-step { flex: none; display: flex; flex-direction: column; width: 16px; margin-left: 2px; }
.vm-pg-step button {
    height: 11px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 10px; line-height: 1;
    color: var(--muted, #8FA6CC);
}
.vm-pg-step button:hover { color: var(--ink, #E6F0FF); }
.vm-pg-step button:disabled { opacity: .35; cursor: default; color: var(--muted, #8FA6CC); }
/* The time editor (WPF's TimeOfDayEditor): the digits box typed over in place, what the dial does not show before it (a
   sign, the days), the clock, and the popup of three columns under the box, each a digits box between its up and down. */
.vm-pg-time { position: relative; flex: 0 1 auto; display: flex; align-items: center; gap: 2px; min-width: 0; }
.vm-pg-value > .vm-pg-time:first-child { flex: 1 1 auto; }
.vm-property-grid .vm-pg-digits { flex: 0 1 auto; width: 11ch; min-width: 9ch; text-align: center; letter-spacing: .4px; }
.vm-pg-time-days { flex: none; color: var(--muted, #8FA6CC); font-variant-numeric: tabular-nums; cursor: help; }
.vm-pg-clock {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0;
    border: 0; background: none; cursor: pointer; color: var(--muted, #8FA6CC); opacity: .75;
}
.vm-pg-clock svg { width: 14px; height: 14px; fill: currentColor; }
.vm-pg-clock:hover, .vm-pg-time.open .vm-pg-clock { opacity: 1; color: var(--ink, #E6F0FF); }
.vm-pg-clock:focus-visible { outline: 1px solid var(--focus, #00D4FF); }
.vm-pg-clock:disabled { opacity: .35; cursor: default; }
.vm-pg-popback { position: fixed; inset: 0; z-index: 4; }
.vm-pg-timepop {
    position: absolute; top: calc(100% + 3px); left: 0; z-index: 5; display: flex; align-items: center; gap: 4px; padding: 8px 10px 6px;
    background: var(--panel-bg, var(--vm-navy, #0A1733)); border: 1px solid var(--rule, rgba(0, 212, 255, .45)); border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45); color: var(--ink, #E6F0FF);
}
.vm-pg-timecol { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.vm-property-grid .vm-pg-timecol .vm-pg-digit { width: 38px; min-width: 38px; height: 26px; font-size: 15px; letter-spacing: 1px; }
.vm-pg-spin {
    width: 24px; height: 16px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 11px; line-height: 1;
    color: var(--ink, #E6F0FF);
}
.vm-pg-spin:hover { color: var(--vm-sky, #00A3FF); }
.vm-pg-timecol-name { font-size: 10px; color: var(--muted, #8FA6CC); }
.vm-pg-timecolon { font-size: 15px; margin-bottom: 14px; color: var(--ink, #E6F0FF); }
/* A secret: the eye is a bare icon inside the box, so the row is no taller than a text row's (d6e244a). */
.vm-pg-secret { position: relative; flex: 1 1 auto; display: flex; min-width: 0; }
.vm-property-grid .vm-pg-secret .vm-pg-input { padding-right: 26px; }
.vm-pg-eye {
    position: absolute; right: 2px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center;
    justify-content: center; width: 22px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer;
    color: var(--muted, #8FA6CC); opacity: .75;
}
.vm-pg-eye svg { width: 14px; height: 14px; fill: currentColor; }
.vm-pg-eye:hover { opacity: 1; color: var(--ink, #E6F0FF); }
.vm-pg-eye:focus-visible { outline: 1px solid var(--focus, #00D4FF); }
.vm-pg-eye:disabled { opacity: .35; cursor: default; }
.vm-pg-path { flex: 1 1 auto; display: flex; align-items: center; gap: 3px; min-width: 0; }
.vm-pg-pick {
    flex: none; min-width: 28px; height: 24px; padding: 0 6px; font: inherit; line-height: 1; cursor: pointer;
    color: var(--btn-ink, #CFE6FF); background: var(--btn-bg, transparent); border: 1px solid var(--btn-border, rgba(0, 212, 255, .5)); border-radius: 4px;
}
.vm-pg-pick:hover { background: var(--btn-hover, rgba(0, 163, 255, .14)); }
.vm-pg-pick:disabled { opacity: .5; cursor: default; background: var(--btn-bg, transparent); }
/* A value shown and not edited: a kind the grid has no editor for, or flags; the title says why. */
.vm-pg-fixed { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 0 2px; color: var(--muted, #8FA6CC); cursor: help; }
.vm-pg-fixed-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vm-pg-swatch { flex: none; width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--input-border, rgba(61, 169, 255, .35)); }
.vm-pg-empty { padding: 10px 6px; color: var(--muted, #8FA6CC); }
.vm-pg-failure { color: var(--bad, #FF8FA5); }
/* While the splitter is dragged: a layer over the grid that follows the pointer. */
.vm-pg-resize { position: absolute; inset: 0; z-index: 3; cursor: col-resize; touch-action: none; }
/* Stacked (WPF's StackLayout), and Auto under a phone's width: the name above the value, no splitter. */
.vm-pg-stack .vm-pg-line { grid-template-columns: minmax(0, 1fr); }
.vm-pg-stack .vm-pg-splitter { display: none; }
.vm-pg-stack .vm-pg-value { padding: 0 4px 4px calc(var(--vm-pg-indent, 20px) * var(--vm-pg-depth, 0) + 3px); }
.vm-pg-stack .vm-pg-check-message { margin-left: calc(var(--vm-pg-indent, 20px) * var(--vm-pg-depth, 0) + 3px); }
@container (max-width: 480px) {
    .vm-pg-auto .vm-pg-line { grid-template-columns: minmax(0, 1fr); }
    .vm-pg-auto .vm-pg-splitter { display: none; }
    .vm-pg-auto .vm-pg-value { padding: 0 4px 4px calc(var(--vm-pg-indent, 20px) * var(--vm-pg-depth, 0) + 3px); }
    .vm-pg-auto .vm-pg-check-message { margin-left: calc(var(--vm-pg-indent, 20px) * var(--vm-pg-depth, 0) + 3px); }
}

/* ---- Charts: ChartGroup, CandleChart, TimeAxis, Navigator, ChartMenu, ChartLegend -------------------------- */
/* The canvases draw in ChartGroupSettings' colours; the markup around them takes the same ones from the --vmc-*
   variables the group sets on its root (ChartGroup.Style()), each falling back to the Desk's token, then its dark value.
   Rendered before any script runs, this is also the sized, empty frame a prerendered or static page shows. */
.vm-chart-group {
    position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 120px;
    overflow: hidden; user-select: none; -webkit-user-select: none;
    background: var(--vmc-bg, var(--vm-navy, #0A1733)); color: var(--vmc-fg, var(--muted, #8FA6CC));
    font-family: var(--vmc-font, Calibri, "Segoe UI", Arial, sans-serif); font-size: var(--vmc-font-size, 12px); line-height: 1.3;
}
.vm-chart-toolbar { flex: none; display: flex; border-bottom: 1px solid var(--vmc-sep, var(--input-border, rgba(61, 169, 255, .35))); }
.vm-chart-toolbar-nav { flex: 1 1 auto; min-width: 0; }
/* The value scale's column, beside the navigator's track, so the track is exactly as wide as the plot. */
.vm-chart-toolbar-switches {
    flex: none; width: var(--vmc-scale, 140px); box-sizing: border-box; padding-right: 6px;
    display: flex; align-items: center; justify-content: flex-end; gap: 2px;
}
.vm-chart-rows { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.vm-chart-row { flex: 1 1 0; min-height: 40px; position: relative; }
.vm-chart-time { flex: none; position: relative; }

/* A canvas host: the canvases fill it and let the pointer through to it, so its offsets are the canvases' own. */
.vm-chart-surface { position: relative; width: 100%; height: 100%; overflow: hidden; touch-action: none; }
.vm-chart-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.vm-chart-pane { background: var(--vmc-plot, var(--vm-night, #030814)); cursor: crosshair; }
.vm-chart-time-axis { cursor: ew-resize; }
.vm-chart-navigator { cursor: pointer; }

/* The legend: the chart's name and its values at the crosshair, over the plot's top left (WPF's ChartInfoView). */
.vm-chart-legend {
    position: absolute; top: 0; left: 0; min-width: 125px; max-width: calc(100% - var(--vmc-scale, 140px) - 8px);
    box-sizing: border-box; padding: 2px 6px; pointer-events: none;
    background: var(--vmc-panel, rgba(10, 23, 51, .85)); color: var(--vmc-fg, var(--muted, #8FA6CC));
}
.vm-chart-legend-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vm-chart-legend-item { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.vm-chart-legend-swatch { flex: none; width: 30px; }
.vm-chart-legend-value { font-variant-numeric: tabular-nums; }
/* The legend's one part that takes the pointer: the "rounded" mark, whose title says to how many decimals. */
.vm-chart-legend-note { pointer-events: auto; cursor: help; margin-left: 4px; font-weight: 400; color: var(--vmc-accent, var(--focus, #00D4FF)); }

/* The context menu of a group without a toolbar (WPF's, on a right click): the toolbar's two switches, a tick on the one
   that is on. Placed at the click, inside the plot. */
.vm-chart-context-menu {
    position: absolute; z-index: 7; display: flex; flex-direction: column; min-width: 160px; padding: 3px 0;
    background: var(--vmc-bg, var(--vm-navy, #0A1733)); color: var(--vmc-fg, var(--muted, #8FA6CC));
    border: 1px solid color-mix(in srgb, var(--vmc-fg, #8FA6CC) 38%, transparent); border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .45); touch-action: none;
}
.vm-chart-context-item {
    display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 10px 4px 6px; border: 0; background: transparent;
    color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.vm-chart-context-item:hover { background: var(--btn-hover, rgba(0, 163, 255, .14)); }
.vm-chart-context-item:focus-visible { outline: 1px solid var(--focus, #00D4FF); }
.vm-chart-context-item.on { color: var(--vmc-accent, var(--focus, #00D4FF)); }
.vm-chart-context-check { flex: none; display: inline-block; width: 14px; text-align: center; }

/* The icons of the toolbar and the menus: a 16-pixel icon on a 22-pixel button, no chrome; a switch that is on in the
   accent, one not offered faded (WPF's three-colour auto shift, bcc5465). */
.vm-chart-icon {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
    margin: 1px; padding: 0; border: 0; border-radius: 3px; background: transparent; cursor: pointer;
    color: var(--vmc-fg, var(--muted, #8FA6CC));
}
.vm-chart-icon:hover { background: var(--btn-hover, rgba(0, 163, 255, .14)); }
.vm-chart-icon:focus-visible { outline: 1px solid var(--focus, #00D4FF); }
.vm-chart-icon.on { color: var(--vmc-accent, var(--focus, #00D4FF)); }
.vm-chart-icon.unavailable, .vm-chart-icon:disabled { opacity: .35; cursor: default; background: transparent; }
.vm-chart-svg { width: 16px; height: 16px; display: block; fill: currentColor; }

/* The chart menus (WPF's ChartMenu): at 125/255 until pointed at, the chart's background at 0xE0 behind, its text colour at
   0x60 around. The group's at the top right of the plot, opening to the left (WPF centres it, where a legend in a larger
   font ran under it), the first chart's legend kept clear of it; a chart's at the middle right of its value scale. */
.vm-chart-menu {
    position: absolute; z-index: 5; display: inline-flex; align-items: center; padding: 1px; border-radius: 4px;
    background: color-mix(in srgb, var(--vmc-bg, #0A1733) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--vmc-fg, #8FA6CC) 38%, transparent);
    opacity: .49; touch-action: none;
}
.vm-chart-menu.open { opacity: 1; z-index: 6; }
.vm-chart-menu-buttons { display: inline-flex; }
.vm-chart-menu-time { right: calc(var(--vmc-scale, 140px) + 4px); }
.vm-chart-group.vm-chart-menus .vm-chart-row:first-child .vm-chart-legend { max-width: calc(100% - var(--vmc-scale, 140px) - 44px); }
.vm-chart-menu-values { right: 2px; top: 50%; transform: translateY(-50%); }

/* ---- Playground: the demos on made-up data (Playground/; the Desk's Design features #11-#13, the prototype heads) ---- */
/* A demo fills the box its host gives it (a fixed height in a page, the window in a head): a toolbar, then what is shown.
   A demo inside another's fill does the same, so the variants nest. */
.vm-demo-root { display: flex; flex-direction: column; gap: 8px; width: 100%; height: 100%; min-height: 0; min-width: 0; }
.vm-demo-toolbar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.vm-demo-fill { flex: 1 1 0; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.vm-demo-fill > * { flex: 1 1 auto; min-height: 0; }
.vm-demo-sep { width: 12px; }
.vm-demo-note { color: var(--muted, #8FA6CC); font-size: 13px; }
/* The rules demo's word on Accept (item 39): allowed in the theme's good, refused in its bad. */
.vm-demo-accept { color: var(--good, #7EE0A8); }
.vm-demo-refused { color: var(--bad, #FF8FA5); }
/* The grids' demos scroll inside the box: their columns side by side, wrapping under each other on a narrow screen. */
.vm-demo-scroll { overflow: auto; }
.vm-demo-columns { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 18px; }
.vm-demo-column { flex: 1 1 300px; min-width: 0; max-width: 100%; }
.vm-demo-heading { margin: 4px 0; font-size: 14px; font-weight: 600; color: var(--th-ink, #CFE6FF); }
.vm-demo-preview { margin: 0; font-size: 12px; white-space: pre-wrap; word-break: break-all; color: var(--muted, #8FA6CC); }
.vm-demo-sent { flex: none; min-height: 22px; }
.vm-demo-log { font-size: 12px; padding: 3px 0; border-bottom: 1px solid var(--line, rgba(61, 169, 255, .18)); color: var(--ink, #E6F0FF); word-break: break-word; }
/* A chart beside a grid over its settings; the grid under the chart on a phone. */
.vm-demo-split { display: flex; gap: 12px; width: 100%; height: 100%; min-height: 0; }
.vm-demo-chart { flex: 1 1 auto; min-width: 0; min-height: 0; }
.vm-demo-side { flex: 0 0 320px; min-height: 0; overflow: auto; }
@media (max-width: 700px) {
    .vm-demo-split { flex-direction: column; }
    .vm-demo-chart { flex: 3 1 0; }
    .vm-demo-side { flex: 2 1 0; }
}