@trdrs/quickcharts 1.1.0 → 1.3.0

package/dist/quickcharts.css

@@ -39,6 +39,14 @@
   --qc-illustration-ink: #1e222d;
   --qc-motion-durationBase: 150ms;
   --qc-motion-durationFast: 90ms;
+  --qc-motion-durationModerate: 250ms;
+  --qc-motion-durationSlow: 350ms;
+  --qc-motion-durationSlower: 500ms;
+  --qc-motion-easingLinear: linear;
+  --qc-motion-easingOut: ease-out;
+  --qc-motion-easingSpring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --qc-motion-easingStandard: ease;
+  --qc-motion-scaleEnter: 0.97;
   --qc-overlay-scrim: rgba(0, 0, 0, 0.35);
   --qc-overlay-separator: #ebebeb;
   --qc-overlay-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
@@ -122,6 +130,14 @@
   --qc-illustration-ink: #d1d4dc;
   --qc-motion-durationBase: 150ms;
   --qc-motion-durationFast: 90ms;
+  --qc-motion-durationModerate: 250ms;
+  --qc-motion-durationSlow: 350ms;
+  --qc-motion-durationSlower: 500ms;
+  --qc-motion-easingLinear: linear;
+  --qc-motion-easingOut: ease-out;
+  --qc-motion-easingSpring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --qc-motion-easingStandard: ease;
+  --qc-motion-scaleEnter: 0.97;
   --qc-overlay-scrim: rgba(0, 0, 0, 0.5);
   --qc-overlay-separator: #4a4a4a;
   --qc-overlay-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
@@ -174,6 +190,16 @@
   --qc-text-primary: #dbdbdb;
   --qc-text-secondary: #b8b8b8;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  [data-qc-theme] {
+    --qc-motion-durationBase: 0ms !important;
+    --qc-motion-durationFast: 0ms !important;
+    --qc-motion-durationModerate: 0ms !important;
+    --qc-motion-durationSlow: 0ms !important;
+    --qc-motion-durationSlower: 0ms !important;
+  }
+}
 }
 
 @layer trdrs.chart {
@@ -249,7 +275,7 @@
   border: 1px solid var(--qc-chrome-border);
   border-radius: var(--qc-chrome-radius);
   cursor: pointer;
-  transition: background-color var(--qc-motion-durationFast) linear, border-color var(--qc-motion-durationFast) linear;
+  transition: background-color var(--qc-motion-durationFast) var(--qc-motion-easingLinear), border-color var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
 }
 
 [data-qc-theme] .qc-button:hover {
@@ -375,7 +401,7 @@
   border: 0;
   border-radius: var(--qc-chrome-radius);
   cursor: pointer;
-  transition: background-color var(--qc-motion-durationFast) linear;
+  transition: background-color var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
 }
 
 [data-qc-theme] .qc-menu-row:hover {
@@ -1139,13 +1165,8 @@
 
 /* Accessibility --------------------------------------------------------------------------------- */
 
-@media (prefers-reduced-motion: reduce) {
-  [data-qc-theme] * {
-    transition-duration: 1ms !important;
-    animation-duration: 1ms !important;
-    animation-iteration-count: 1 !important;
-  }
-}
+/* Every transition reads a motion duration role, and the generated tokens resolve each of them to
+ * zero under a reduced-motion preference, so no recipe here repeats that rule. */
 
 @media (forced-colors: active) {
   [data-qc-theme] .qc-surface,
@@ -1219,6 +1240,17 @@
   font-variant-numeric: tabular-nums lining-nums;
 }
 
+/* With one zone offered the clock stands alone, in the trigger's own cell and inset. */
+[data-qc-theme] .qc-bottombar .qc-tz-clock {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 38px;
+  padding: 0 6px;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums lining-nums;
+}
+
 [data-qc-theme] .qc-clock {
   font-variant-numeric: tabular-nums;
 }
@@ -1304,7 +1336,7 @@
   transform: translateX(-50%);
   opacity: 0;
   pointer-events: auto;
-  transition: opacity var(--qc-motion-durationBase) linear;
+  transition: opacity var(--qc-motion-durationBase) var(--qc-motion-easingLinear);
 }
 
 [data-qc-theme] .qc-nav[data-qc-near],
@@ -1438,7 +1470,7 @@
   inset: 2px;
   z-index: -1;
   border-radius: var(--qc-chrome-radius);
-  transition: background-color var(--qc-motion-durationFast) linear;
+  transition: background-color var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
 }
 
 [data-qc-theme] .qc-toolbar-button:hover {
@@ -1499,11 +1531,11 @@
  * and neither bends the other, and each answers to its OWN button: a caret nested inside some other
  * open thing is not the thing that opened. */
 [data-qc-theme] .qc-caret {
-  transition: translate 350ms ease;
+  transition: translate var(--qc-motion-durationSlow) var(--qc-motion-easingStandard);
 }
 
 [data-qc-theme] .qc-caret > svg {
-  transition: rotate 350ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  transition: rotate var(--qc-motion-durationSlow) var(--qc-motion-easingSpring);
 }
 
 [data-qc-theme] .qc-toolbar-button:not([aria-expanded='true']):hover > .qc-caret {
@@ -1626,7 +1658,7 @@
   height: 14px;
   background: var(--qc-control-mark);
   border-radius: 50%;
-  transition: inset-inline-start 250ms ease-out;
+  transition: inset-inline-start var(--qc-motion-durationModerate) var(--qc-motion-easingOut);
 }
 
 [data-qc-theme] .qc-switch[aria-checked='true'] .qc-switch-knob,
@@ -1650,7 +1682,7 @@
   border: 1px solid var(--qc-control-on);
   border-radius: 3px;
   cursor: pointer;
-  transition: background-color 350ms, border-color 350ms;
+  transition: background-color var(--qc-motion-durationSlow) var(--qc-motion-easingStandard), border-color var(--qc-motion-durationSlow) var(--qc-motion-easingStandard);
 }
 
 [data-qc-theme] .qc-checkbox:checked {
@@ -2755,7 +2787,7 @@
   border-radius: var(--qc-chrome-radius);
   content: '';
   pointer-events: none;
-  transition: background-color var(--qc-motion-durationFast) linear;
+  transition: background-color var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
 }
 
 [data-qc-theme] .qc-drawing-bar-wide {
@@ -2973,7 +3005,7 @@
 
 [data-qc-theme] .qc-drawing-caret {
   display: flex;
-  transition: transform var(--qc-motion-durationFast) linear;
+  transition: transform var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
 }
 
 [data-qc-theme] .qc-drawing-template-button[aria-expanded='true'] .qc-drawing-caret {
@@ -3097,7 +3129,7 @@
   content: '';
   pointer-events: none;
   transform: translate(-50%, -50%);
-  transition: background-color var(--qc-motion-durationFast) linear;
+  transition: background-color var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
 }
 
 [data-qc-theme] .qc-drawing-rail-button:hover,
@@ -3177,13 +3209,13 @@
   border-start-end-radius: 0;
   border-end-end-radius: 0;
   opacity: 0;
-  transition: opacity var(--qc-motion-durationFast) linear;
+  transition: opacity var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
 }
 
 /* The chevron turns to face the panel: pointing out at where the flyout will appear while closed,
  * back at the rail once it is open. */
 [data-qc-theme] .qc-drawing-rail-arrow svg {
-  transition: transform 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  transition: transform var(--qc-motion-durationSlower) var(--qc-motion-easingSpring);
 }
 
 [data-qc-theme] .qc-drawing-rail-arrow[aria-expanded='true'] svg {
@@ -3294,10 +3326,6 @@
   cursor: default;
 }
 
-[data-qc-theme] .qc-drawing-menu-note {
-  padding: 8px 12px;
-}
-
 [data-qc-theme] .qc-drawing-menu .qc-separator {
   margin: 6px 0;
 }
@@ -3360,7 +3388,7 @@
   border-radius: 4px;
   cursor: pointer;
   opacity: 0;
-  transition: opacity var(--qc-motion-durationFast) linear;
+  transition: opacity var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
 }
 
 [data-qc-theme] .qc-drawing-flyout-row:hover .qc-drawing-star,
@@ -3457,7 +3485,7 @@
   border-radius: 2px;
   content: '';
   pointer-events: none;
-  transition: background-color var(--qc-motion-durationFast) linear;
+  transition: background-color var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
 }
 
 [data-qc-theme] .qc-drawing-favorite:hover,
@@ -4403,8 +4431,12 @@
   text-transform: uppercase;
 }
 
+/* The line a list shows in place of rows (empty, loading, failed): the rows' own size in the muted
+ * ink, on a row's height, its words 8px in where a row's label starts. */
 [data-qc-theme] .qc-menu-note {
-  padding: 6px 12px;
+  padding: 6px 8px;
+  color: var(--qc-text-muted);
+  line-height: 20px;
 }
 
 [data-qc-theme] .qc-menu-panel .qc-separator {
@@ -4438,6 +4470,34 @@
   font-size: var(--qc-text-fontSizeBase);
 }
 
+/* The modal motion, for a dialog that opens and closes with it (the scrim carries `data-state`):
+ * the backdrop fades in, and the box fades in and grows from the entrance scale, over one duration.
+ * Closing runs the same motion in reverse. Under a reduced-motion preference the duration is zero,
+ * so both are instant. */
+[data-qc-theme] .qc-dialog-scrim[data-state] {
+  opacity: 1;
+  transition: opacity var(--qc-motion-durationBase) var(--qc-motion-easingOut);
+}
+
+[data-qc-theme] .qc-dialog-scrim[data-state] > .qc-dialog {
+  opacity: 1;
+  scale: none;
+  transition:
+    opacity var(--qc-motion-durationBase) var(--qc-motion-easingStandard),
+    scale var(--qc-motion-durationBase) var(--qc-motion-easingStandard);
+}
+
+[data-qc-theme] .qc-dialog-scrim[data-state='opening'],
+[data-qc-theme] .qc-dialog-scrim[data-state='closing'] {
+  opacity: 0;
+}
+
+[data-qc-theme] .qc-dialog-scrim[data-state='opening'] > .qc-dialog,
+[data-qc-theme] .qc-dialog-scrim[data-state='closing'] > .qc-dialog {
+  opacity: 0;
+  scale: var(--qc-motion-scaleEnter);
+}
+
 /* In place of rows: the drawing over the line that says nothing matched, centred where the rows
  * would have stood. */
 [data-qc-theme] .qc-empty {
@@ -4623,6 +4683,8 @@
   justify-content: flex-end;
   width: 100%;
   min-width: 0;
+  min-height: 0;
+  max-height: 49px;
   height: 49px;
   padding: 0;
   overflow-x: auto;
@@ -4633,6 +4695,29 @@
   border-top: 1px solid var(--qc-canvas-paneBorder);
   pointer-events: auto;
   scrollbar-width: none;
+  transform-origin: bottom center;
+  opacity: 1;
+  transform: translateY(0);
+  clip-path: inset(0);
+  transition:
+    flex-basis var(--qc-motion-durationBase) var(--qc-motion-easingStandard),
+    max-height var(--qc-motion-durationBase) var(--qc-motion-easingStandard),
+    opacity var(--qc-motion-durationBase) var(--qc-motion-easingStandard),
+    transform var(--qc-motion-durationBase) var(--qc-motion-easingStandard),
+    clip-path var(--qc-motion-durationBase) var(--qc-motion-easingStandard);
+}
+
+/* The row itself animates from zero to 49px and back, on the modal motion's duration and timing,
+ * and closing runs the opening in reverse. max-height clamps the fixed-height band while
+ * flex-basis gives the chart space up at the same pace, so the chart and controls move together.
+ * The state is driven by CSS transitions because some embedded hosts omit Element.animate(). */
+[data-qc-theme] .qc-replay[data-state='opening'],
+[data-qc-theme] .qc-replay[data-state='closing'] {
+  flex-basis: 0;
+  max-height: 0;
+  opacity: 0;
+  transform: translateY(8px);
+  clip-path: inset(100% 0 0);
 }
 
 [data-qc-theme] .qc-replay::-webkit-scrollbar {
@@ -4918,6 +5003,7 @@
  * `scrollbar-width: none`, which more than one app ships) from erasing the chart's own. */
 [data-qc-theme] .qc-menu-body,
 [data-qc-theme] .qc-dialog-body,
+[data-qc-theme] .qc-chart-settings-panel,
 [data-qc-theme] .qc-picker-list,
 [data-qc-theme] .qc-layouts-list,
 [data-qc-theme] .qc-search-list,
@@ -4929,6 +5015,7 @@
 
 [data-qc-theme] .qc-menu-body::-webkit-scrollbar,
 [data-qc-theme] .qc-dialog-body::-webkit-scrollbar,
+[data-qc-theme] .qc-chart-settings-panel::-webkit-scrollbar,
 [data-qc-theme] .qc-picker-list::-webkit-scrollbar,
 [data-qc-theme] .qc-layouts-list::-webkit-scrollbar,
 [data-qc-theme] .qc-search-list::-webkit-scrollbar,
@@ -4942,6 +5029,7 @@
 
 [data-qc-theme] .qc-menu-body::-webkit-scrollbar-thumb,
 [data-qc-theme] .qc-dialog-body::-webkit-scrollbar-thumb,
+[data-qc-theme] .qc-chart-settings-panel::-webkit-scrollbar-thumb,
 [data-qc-theme] .qc-picker-list::-webkit-scrollbar-thumb,
 [data-qc-theme] .qc-layouts-list::-webkit-scrollbar-thumb,
 [data-qc-theme] .qc-search-list::-webkit-scrollbar-thumb,
@@ -4956,6 +5044,7 @@
 
 [data-qc-theme] .qc-menu-body::-webkit-scrollbar-track,
 [data-qc-theme] .qc-dialog-body::-webkit-scrollbar-track,
+[data-qc-theme] .qc-chart-settings-panel::-webkit-scrollbar-track,
 [data-qc-theme] .qc-picker-list::-webkit-scrollbar-track,
 [data-qc-theme] .qc-layouts-list::-webkit-scrollbar-track,
 [data-qc-theme] .qc-search-list::-webkit-scrollbar-track,
@@ -4968,6 +5057,7 @@
 
 [data-qc-theme] .qc-menu-body::-webkit-scrollbar-corner,
 [data-qc-theme] .qc-dialog-body::-webkit-scrollbar-corner,
+[data-qc-theme] .qc-chart-settings-panel::-webkit-scrollbar-corner,
 [data-qc-theme] .qc-picker-list::-webkit-scrollbar-corner,
 [data-qc-theme] .qc-layouts-list::-webkit-scrollbar-corner,
 [data-qc-theme] .qc-search-list::-webkit-scrollbar-corner,
@@ -4980,6 +5070,7 @@
 @supports (-moz-appearance: none) {
   [data-qc-theme] .qc-menu-body,
   [data-qc-theme] .qc-dialog-body,
+  [data-qc-theme] .qc-chart-settings-panel,
   [data-qc-theme] .qc-picker-list,
   [data-qc-theme] .qc-layouts-list,
   [data-qc-theme] .qc-search-list,
@@ -5138,6 +5229,12 @@
   display: none;
 }
 
+/* A selected class's narrower classes: a second strip of the same tabs, standing directly under the
+ * strip above so the two rows read as one filter. */
+[data-qc-theme] .qc-search-classes + .qc-search-subclasses {
+  padding-top: 0;
+}
+
 [data-qc-theme] .qc-search-scope {
   display: inline-flex;
   flex: 0 0 auto;
@@ -5537,14 +5634,312 @@
   font-size: var(--qc-text-fontSizeSmall);
 }
 
-/* The chart settings menu. */
-[data-qc-theme] .qc-settings-menu .qc-settings-row {
-  min-height: 28px;
+/* Chart settings follows the same centered, two-column layout as TradingView: a fixed title and
+ * footer around a section rail and one roomy settings page. */
+[data-qc-theme] .qc-chart-settings-dialog {
+  box-sizing: border-box;
+  height: min(612px, calc(100vh - 32px));
+  max-height: min(612px, calc(100vh - 32px));
+  color: var(--qc-text-primary);
+  background: var(--qc-overlay-surface);
+  border: 0;
+  border-radius: 6px;
+  box-shadow: var(--qc-overlay-shadow);
+}
+
+[data-qc-theme] .qc-chart-settings-dialog .qc-dialog-title {
+  box-sizing: border-box;
+  min-height: 64px;
+  padding: 0 14px 0 19px;
+}
+
+[data-qc-theme] .qc-chart-settings-dialog .qc-dialog-title .qc-title {
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 28px;
+}
+
+[data-qc-theme] .qc-chart-settings-dialog .qc-dialog-close {
+  width: 40px;
+  height: 40px;
+  border: 0;
+}
+
+[data-qc-theme] .qc-chart-settings-body {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: row;
+  gap: 0;
+  min-height: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+[data-qc-theme] .qc-chart-settings-nav {
+  display: flex;
+  flex: 0 0 226px;
+  flex-direction: column;
+  gap: 2px;
+  box-sizing: border-box;
+  padding: 10px;
+  border-inline-end: 1px solid var(--qc-overlay-separator);
+}
+
+[data-qc-theme] .qc-chart-settings-nav-item {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  width: 100%;
+  min-height: 40px;
   padding: 0 12px;
+  color: var(--qc-text-secondary);
+  font: inherit;
+  font-size: 14px;
+  text-align: start;
+  background: transparent;
+  border: 0;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+[data-qc-theme] .qc-chart-settings-nav-item:hover {
+  color: var(--qc-text-primary);
+  background: var(--qc-state-hover);
+}
+
+[data-qc-theme] .qc-chart-settings-nav-item[aria-selected='true'] {
+  color: var(--qc-text-primary);
+  font-weight: 600;
+  background: var(--qc-state-selected);
+}
+
+[data-qc-theme] .qc-chart-settings-panel {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-width: 0;
+  padding: 13px 20px 26px;
+  overflow-y: auto;
+  outline: none;
+}
+
+[data-qc-theme] .qc-chart-settings-panel > .qc-menu-heading {
+  min-height: auto;
+  margin: 0 0 8px;
+  padding: 0;
+  color: var(--qc-text-muted);
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0;
+}
+
+[data-qc-theme] .qc-settings-menu .qc-settings-row {
+  display: grid;
+  grid-template-columns: minmax(150px, 1fr) auto;
+  gap: 16px;
+  min-height: 44px;
+  padding: 0;
+}
+
+[data-qc-theme] .qc-settings-menu .qc-settings-row .qc-field-label {
+  color: var(--qc-text-secondary);
+  font-size: 14px;
+}
+
+[data-qc-theme] .qc-settings-menu .qc-settings-row .qc-drawing-swatch-button {
+  box-sizing: border-box;
+  width: 38px;
+  height: 34px;
+  padding: 3px;
+  background: var(--qc-chrome-surfaceRaised);
+  border-color: var(--qc-chrome-fieldBorder);
+  border-radius: 6px;
+}
+
+[data-qc-theme] .qc-settings-menu .qc-settings-row .qc-drawing-well {
+  width: 28px;
+  height: 26px;
+  border-radius: 4px;
 }
 
+/* TradingView uses compact square checks in this dialog. Keep the existing accessible switch role
+ * while painting it as the same control and placing it before the label. */
 [data-qc-theme] .qc-settings-menu .qc-switch-row {
-  min-height: 28px;
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+  gap: 10px;
+  min-height: 44px;
+  padding: 0;
+  color: var(--qc-text-secondary);
+  cursor: pointer;
+}
+
+[data-qc-theme] .qc-settings-menu .qc-switch {
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+  background: transparent;
+  border: 1px solid var(--qc-control-on);
+  border-radius: 3px;
+}
+
+[data-qc-theme] .qc-settings-menu .qc-switch:hover:not([disabled]) {
+  background: var(--qc-state-hover);
+}
+
+[data-qc-theme] .qc-settings-menu .qc-switch[aria-checked='true'] {
+  background: var(--qc-control-on);
+}
+
+[data-qc-theme] .qc-settings-menu .qc-switch-knob {
+  position: absolute;
+  top: 3px;
+  inset-inline-start: 6px;
+  width: 5px;
+  height: 9px;
+  box-sizing: border-box;
+  background: transparent;
+  border: solid var(--qc-control-mark);
+  border-width: 0 2px 2px 0;
+  border-radius: 0;
+  opacity: 0;
+  transform: rotate(45deg);
+  transition: opacity var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
+}
+
+[data-qc-theme] .qc-settings-menu .qc-switch[aria-checked='true'] .qc-switch-knob {
+  inset-inline-start: 6px;
+  opacity: 1;
+}
+
+[data-qc-theme] .qc-chart-settings-choices {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  width: min(100%, 360px);
+}
+
+[data-qc-theme] .qc-chart-settings-choice {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  min-height: 40px;
+  padding: 0 8px;
+  color: var(--qc-text-secondary);
+  font: inherit;
+  text-align: start;
+  background: transparent;
+  border: 0;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+[data-qc-theme] .qc-chart-settings-choice:hover:not([disabled]) {
+  color: var(--qc-text-primary);
+  background: var(--qc-state-hover);
+}
+
+[data-qc-theme] .qc-chart-settings-choice[disabled] {
+  color: var(--qc-text-disabled);
+  cursor: default;
+}
+
+[data-qc-theme] .qc-chart-settings-radio {
+  position: relative;
+  flex: 0 0 auto;
+  box-sizing: border-box;
+  width: 18px;
+  height: 18px;
+  border: 1px solid var(--qc-control-on);
+  border-radius: 50%;
+}
+
+[data-qc-theme] .qc-chart-settings-choice[aria-checked='true'] .qc-chart-settings-radio::after {
+  content: '';
+  position: absolute;
+  inset: 4px;
+  background: var(--qc-control-on);
+  border-radius: 50%;
+}
+
+[data-qc-theme] .qc-chart-settings-footer {
+  display: flex;
+  flex: 0 0 64px;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 0 18px;
+  border-top: 1px solid var(--qc-overlay-separator);
+}
+
+[data-qc-theme] .qc-chart-settings-actions {
+  display: flex;
+  gap: 10px;
+}
+
+[data-qc-theme] .qc-chart-settings-footer .qc-button {
+  min-width: 62px;
+  height: 34px;
+  padding: 0 11px;
+  font-size: 14px;
+  line-height: 22px;
+}
+
+[data-qc-theme] .qc-chart-settings-footer .qc-chart-settings-reset {
+  min-width: 0;
+}
+
+[data-qc-theme] .qc-chart-settings-cancel,
+[data-qc-theme] .qc-chart-settings-ok {
+  min-width: 62px;
+}
+
+[data-qc-theme] .qc-chart-settings-nav {
+  scrollbar-width: none;
+}
+
+[data-qc-theme] .qc-chart-settings-nav::-webkit-scrollbar {
+  display: none;
+}
+
+@media (max-width: 680px) {
+  [data-qc-theme] .qc-chart-settings-dialog {
+    width: calc(100% - 20px) !important;
+    height: calc(100vh - 20px);
+    max-width: none;
+    max-height: none;
+  }
+
+  [data-qc-theme] .qc-chart-settings-body {
+    flex-direction: column;
+  }
+
+  [data-qc-theme] .qc-chart-settings-nav {
+    flex: 0 0 auto;
+    flex-direction: row;
+    gap: 4px;
+    padding: 6px 10px 8px;
+    overflow-x: auto;
+    border-inline-end: 0;
+    border-bottom: 1px solid var(--qc-overlay-separator);
+  }
+
+  [data-qc-theme] .qc-chart-settings-nav-item {
+    width: auto;
+    min-width: max-content;
+    min-height: 36px;
+    padding: 0 10px;
+  }
+
+  [data-qc-theme] .qc-chart-settings-panel {
+    padding: 13px 16px 20px;
+  }
+
+  [data-qc-theme] .qc-chart-settings-footer {
+    padding: 0 12px;
+  }
 }
 
 /* The market-status control on the legend and its popup. */
@@ -5944,7 +6339,7 @@
 [data-qc-theme] .qc-tf-unit-caret {
   flex: 0 0 auto;
   color: var(--qc-text-muted);
-  transition: transform var(--qc-motion-durationFast) linear;
+  transition: transform var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
   transform: rotate(180deg);
 }
 
@@ -5998,6 +6393,26 @@
   cursor: not-allowed;
 }
 
+/* The same list with no drop-down around it, for a page that holds the picker in a box of its own:
+ * a phone's card, where the card IS the picker. It fills that box, the rows scroll inside it, and the
+ * composer stays pinned below them. The box is the page's, so the card paints no surface of its own. */
+[data-qc-theme].qc-tf-card {
+  display: flex;
+  min-height: 0;
+  height: 100%;
+  flex-direction: column;
+  color: var(--qc-text-primary);
+  font-family: var(--qc-text-fontFamily);
+  font-size: var(--qc-text-fontSizeBase);
+}
+
+[data-qc-theme].qc-tf-card > .qc-tf-menu {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+  flex-direction: column;
+}
+
 /* The chart's notices, stacked at the bottom of the charts, newest last. The region is the charts
  * grid's next sibling in the root's column and takes no height of its own; the stack inside it is
  * anchored to its top edge and grows upward, over the charts, never over the bottom bar. */