/* GreenMinter app-level rules for the atoms family (STYLE_SPEC 5.1 to 5.6). Lumen classes first; only what Lumen
   has no construct for: the native checkbox / switch / radio skins (Lumen's are Radix buttons that need script),
   the sparkline, avatar rings and stars, the market indicators and loaders, the tooltip, and the showcase's own
   composition helpers. The look of the primitives themselves (button, badge, input, progress fill, spinner,
   skeleton, control colors) is greenminter.css's; nothing here restates it. */

/* ---------- Native controls wearing Lumen's look, so forms post with no script ----------
   Geometry and the check / dot / knob only; the colors are greenminter.css's (section 2.7). */
.gm-check, .gm-radio {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex-shrink: 0;
  width: var(--cb-size, 18px);
  height: var(--cb-size, 18px);
  margin: 0.15em 0 0;
  background: var(--gm-surface-2);
  border: 1.5px solid var(--gm-border-strong);
  cursor: pointer;
}
.gm-check { border-radius: var(--gm-radius-xs); }
.gm-check--circle, .gm-radio { border-radius: var(--gm-radius-full); }
.gm-check::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--gm-primary-contrast);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  transform: scale(0.6);
}
.gm-check:checked::after { opacity: 1; transform: scale(1); }
.gm-radio::after {
  content: "";
  position: absolute;
  inset: 3.5px;
  border-radius: 50%;
  background: var(--gm-primary-control);
  transform: scale(0);
}
.gm-radio:checked::after { transform: scale(1); }

.gm-switch {
  --sw-w: 40px;
  --sw-h: 22px;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex-shrink: 0;
  width: var(--sw-w);
  height: var(--sw-h);
  margin: 0;
  background: var(--gm-surface-3);
  border: 1px solid var(--gm-border-strong);
  border-radius: var(--gm-radius-full);
  cursor: pointer;
}
.gm-switch::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gm-text-muted);
  transform: translate(2px, -50%);
}
.gm-switch:checked::after { transform: translate(20px, -50%); }
.gm-check:disabled, .gm-radio:disabled, .gm-switch:disabled { cursor: not-allowed; }
.gm-check:disabled ~ *, .gm-radio:disabled ~ * { cursor: not-allowed; }

/* Switch row: Lumen puts the switch last, so the label cell takes the slack; `inline` puts it first. */
.lm-switch-row { cursor: pointer; }
.lm-checkbox-row, .lm-radio-row { cursor: pointer; }
/* A one-line row centres its box on the label at an 8px gap (GreenMint's 21px row); a row with a hint keeps
   the box on the first line. */
.lm-checkbox-row:not(:has(.lm-checkbox-row__desc)), .lm-radio-row:not(:has(.lm-radio-row__desc)) { gap: var(--gm-space-2); align-items: center; }
.lm-checkbox-row:not(:has(.lm-checkbox-row__desc)) .gm-check, .lm-radio-row:not(:has(.lm-radio-row__desc)) .gm-radio { margin-top: 0; }
.gm-switch-row--inline { justify-content: flex-start; gap: var(--gm-space-2); align-items: center; }
.gm-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--gm-space-2); }
.gm-fieldset > legend { padding: 0; margin-bottom: var(--gm-space-2); }

/* An idle status reads as quiet, not as healthy: Lumen's neutral dot is full foreground color. */
.lm-connection-status[data-status="idle"] .lm-connection-status__dot { background: var(--gm-text-subtle); }

/* The loading button's spinner: a lime quarter arc on a surface-3 ring, 0.7s; on the lime primary button it is
   the contrast ink instead. (The standalone spinner is greenminter.css's.) */
.lm-btn__spinner { border: 2px solid var(--gm-surface-3); border-top-color: var(--gm-primary-control); animation-duration: 0.7s; }
.lm-btn--primary .lm-btn__spinner { border-color: color-mix(in srgb, var(--gm-primary-contrast) 22%, transparent); border-top-color: var(--gm-primary-contrast); }

/* Disabled labels and descriptions stay readable: Lumen's --lm-fg-disabled (neutral-8) is under 3:1
   in dark mode. Subtle foreground still reads as dimmed beside the dimmed control. */
.lm-field[data-disabled] .lm-field__label,
.lm-checkbox-row[data-disabled] :is(.lm-checkbox-row__label, .lm-checkbox-row__desc),
.lm-radio-row[data-disabled] :is(.lm-radio-row__label, .lm-radio-row__desc),
.lm-switch-row[data-disabled] :is(.lm-switch-row__label, .lm-switch-row__desc) { color: var(--gm-text-subtle); }
.lm-field[data-disabled] .lm-field__hint { color: var(--gm-text-subtle); }
.gm-check:disabled ~ *, .gm-radio:disabled ~ * { color: var(--gm-text-subtle); }

/* ---------- Showcase composition: sub-labels, rows, grids, card stacks (STYLE_SPEC 1.4, 1.5) ---------- */
.gm-at-stack { display: flex; flex-direction: column; gap: var(--gm-space-4); min-width: 0; }
.gm-at-stack > .gm-sc-label:first-child { margin-top: 0; }
.gm-at-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gm-space-3); }
.gm-at-row--wide { gap: var(--gm-space-5); }
.gm-at-row--xwide { gap: var(--gm-space-6); }
.gm-at-grid { display: grid; gap: var(--gm-space-4); grid-template-columns: repeat(auto-fit, minmax(min(var(--gm-at-min, 300px), 100%), 1fr)); }
.gm-at-grid--2 { --gm-at-min: 300px; }
.gm-at-grid--3 { --gm-at-min: 240px; }
.gm-at-col { display: flex; flex-direction: column; gap: var(--gm-space-3); min-width: 0; }
.gm-at-col--lg { gap: var(--gm-space-4); }
.gm-at-col--xl { gap: var(--gm-space-5); }
.gm-at-center { display: flex; align-items: center; justify-content: center; }
.gm-at-rule { border: 0; border-top: 1px solid var(--gm-border); margin: var(--gm-space-4) 0; width: 100%; }
.gm-at-pair { display: inline-flex; align-items: center; gap: var(--gm-space-2); }

/* The small caps label GreenMint puts over a figure (Day range, Volume). */
.gm-at-statlabel {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gm-text-muted);
}

/* ---------- Chips (STYLE_SPEC 5.3): h32, pad 12, surface-2, 12/500; selected is the lime state ---------- */
.gm-filter-chip {
  --tag-h: 32px;
  --tag-px: 12px;
  --tag-fs: 12px;
  --tag-bg: var(--gm-surface-2);
  --tag-border: var(--gm-border);
  --tag-fg: var(--gm-text);
  gap: 8px;
  border-radius: var(--gm-radius-full);
  font-weight: 500;
  text-decoration: none;
}
.gm-filter-chip:hover { --tag-border: var(--gm-border-strong); --tag-fg: var(--gm-text); }
.gm-filter-chip[data-state="on"] {
  --tag-bg: var(--gm-primary-soft);
  --tag-border: var(--gm-primary-soft-border);
  --tag-fg: var(--gm-primary-ink);
}
.gm-filter-chip__count { font-size: 11px; color: var(--gm-text-subtle); }
.gm-filter-chip[data-state="on"] .gm-filter-chip__count { color: inherit; opacity: 0.75; }
.gm-filter-chip.gm-glow { border-color: var(--gm-primary-soft-border); box-shadow: 0 1px 14px color-mix(in srgb, var(--gm-primary-glow) 70%, transparent); }
.gm-filter-chip.gm-glow[data-state="on"] { box-shadow: 0 1px 18px var(--gm-primary-glow); }

/* ---------- Badge extras: the pulsing live dot, the dot's own glow ---------- */
.gm-badge--pulse .lm-badge__dot { animation: gm-at-pulse 1.6s ease-in-out infinite; }
@keyframes gm-at-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.lm-badge:is(.gm-glow, .gm-glow-green) .lm-badge__dot { box-shadow: 0 0 2px currentColor, 0 0 7px currentColor; }
.lm-badge--solid.gm-glow .lm-badge__dot { box-shadow: none; }

/* ---------- Avatars (STYLE_SPEC 5.4, 4.4): neutral frame, optional lime or green profile ring ---------- */
.lm-avatar { border-radius: var(--avatar-radius); }
.lm-avatar__frame.lm-intent-neutral { background: var(--gm-surface-3); color: var(--gm-text-muted); box-shadow: none; font-weight: 600; }
.gm-avatar--ring { box-shadow: 0 0 0 2px var(--gm-primary-control), 0 0 0 5px var(--gm-primary-soft), 0 0 18px var(--gm-primary-glow); }
.gm-avatar--ring-green { box-shadow: 0 0 0 2px var(--gm-up), 0 0 0 5px var(--gm-up-soft), 0 0 18px var(--gm-up-soft); }
/* Avatar group: Lumen overlaps 28% of the size, which clips initials; 18% keeps them legible. */
.lm-avatar-group--stacked > :is(.lm-avatar, .lm-agent-avatar) { margin-left: calc(var(--avatar-size) * -0.18); }
.lm-avatar-group--stacked > :is(.lm-avatar, .lm-agent-avatar):first-child { margin-left: 0; }
/* Ticker marks: full-bleed circles, no ring. */
.gm-at-logo { display: block; flex-shrink: 0; border-radius: 50%; object-fit: cover; background: var(--gm-surface-3); }

/* ---------- Stars: lime filled, surface-3 empty, 14px at the small size ---------- */
.gm-at-stars { gap: 2px; }
.gm-at-stars.lm-rating--sm { --rating-size: 14px; }
.gm-at-stars .lm-rating__icon--filled { color: var(--gm-primary-ink); }
.gm-at-stars .lm-rating__icon--empty { color: var(--gm-surface-3); }

/* ---------- Progress extras: stripes replace the gradient, animated slides them ---------- */
.lm-progress__track .lm-progress__indicator:not([data-indeterminate]) { transition: width var(--gm-dur-slow) var(--gm-ease); }
.gm-progress--striped .lm-progress__indicator:not([data-indeterminate]) {
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.18) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0.18) 75%, transparent 75%);
  background-size: 12px 12px;
}
.gm-progress--animated .lm-progress__indicator { animation: gm-at-stripes 1s linear infinite; }
@keyframes gm-at-stripes { from { background-position: 12px 0; } to { background-position: 0 0; } }

/* Progress ring: label size from the diameter; glow is a drop-shadow on the arc, not a box. */
.gm-at-ring .lm-progress-ring__label { font-size: calc(var(--ring-size) / 4.2); }
.gm-at-ring--glow .lm-progress-ring__indicator { filter: drop-shadow(0 0 4px var(--gm-primary-glow)) drop-shadow(0 0 10px var(--gm-primary-glow)); }

/* Tooltip: surface-3, strong border, 12px, 8px above the trigger, fades and rises 4px; CSS only. */
.gm-at-tip { position: relative; display: inline-flex; }
.gm-at-tip:focus-visible { outline: 2px solid var(--gm-primary-control); outline-offset: 4px; border-radius: var(--gm-radius-full); }
.gm-at-tip__bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, 4px);
  width: max-content;
  max-width: 240px;
  padding: 8px 12px;
  background: var(--gm-surface-3);
  border: 1px solid var(--gm-border-strong);
  border-radius: var(--gm-radius-md);
  box-shadow: var(--gm-shadow-md);
  color: var(--gm-text);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--gm-dur) var(--gm-ease), transform var(--gm-dur) var(--gm-ease);
  z-index: 50;
}
.gm-at-tip:is(:hover, :focus, :focus-within) .gm-at-tip__bubble { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Market indicators (STYLE_SPEC 5.5) ---------- */

/* Day range: 4px red-to-green rail, lime marker ringed in the page color, figure flag above, ends beneath. */
.gm-at-range { padding-top: 0; gap: var(--gm-space-2); }
.gm-at-range .lm-range-bar__label { font-weight: 600; color: var(--gm-text-muted); }
.gm-at-range .lm-range-bar__track {
  height: 4px;
  margin-top: var(--gm-space-5);
  background: linear-gradient(90deg, var(--gm-down), var(--gm-border-strong) 50%, var(--gm-up));
}
.gm-at-range .lm-range-bar__marker {
  width: 10px;
  height: 10px;
  background: var(--gm-primary-control);
  border: 2px solid var(--gm-bg);
  box-shadow: 0 0 0 1px var(--gm-primary-soft-border), 0 0 10px var(--gm-primary-glow);
}
.gm-at-range .lm-range-bar__marker-value {
  bottom: 16px;
  padding: 1px 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gm-text);
  background: var(--gm-surface-2);
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius-sm);
}
.gm-at-range .lm-range-bar__ends { font-size: 12px; color: var(--gm-text-muted); }

/* Bull / bear split: 8px track, up and down fills, legend in the market colors. */
.gm-at-split { gap: var(--gm-space-2); }
.gm-at-split .lm-split-bar__legend { font-size: 12px; font-weight: 600; }
.gm-at-split .lm-split-bar__legend-item.lm-intent-success { color: var(--gm-up-ink); }
.gm-at-split .lm-split-bar__legend-item.lm-intent-danger { color: var(--gm-down-ink); }
.gm-at-split .lm-split-bar__legend-value { color: inherit; margin-left: 4px; font-weight: 900; }
.gm-at-split .lm-split-bar__track { height: 8px; background: var(--gm-surface-3); }
.gm-at-split .lm-split-bar__fill { border-radius: 0; }
.gm-at-split .lm-split-bar__fill.lm-intent-success { background: var(--gm-up); }
.gm-at-split .lm-split-bar__fill.lm-intent-danger { background: var(--gm-down); }
.gm-at-split .lm-split-bar__track.gm-at-split--glow { box-shadow: 0 0 12px var(--gm-primary-glow); }

/* Volume bar: head (label, figure, multiple of average), 8px track, average marker, caption under it. */
.gm-at-volume { display: flex; flex-direction: column; gap: 6px; }
.gm-at-volume__head { display: flex; align-items: center; gap: var(--gm-space-2); font-size: var(--gm-text-body); }
.gm-at-volume__ratio { margin-left: auto; font-weight: 600; }
.gm-at-volume__track { position: relative; height: 8px; border-radius: var(--gm-radius-full); background: var(--gm-surface-3); }
.gm-at-volume__fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--gm-radius-full); background: var(--gm-primary-control); transition: width var(--gm-dur-slow) var(--gm-ease); }
.gm-at-volume__fill--hot { background: linear-gradient(90deg, var(--gm-primary-control), var(--gm-up)); box-shadow: 0 0 10px var(--gm-primary-glow); }
.gm-at-volume__avg { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--gm-text-subtle); transform: translateX(-1px); }
.gm-at-volume__avg-label { display: block; font-size: 11px; color: var(--gm-text-subtle); white-space: nowrap; }

/* Market loaders: candles breathe (scaleY .35 to 1, staggered), a lime price line scrolls, bid and ask bars
   breathe toward a 1px center line. Reduced motion stills all three. */
.gm-mkt-loader--candles { display: inline-flex; align-items: flex-end; gap: 4px; }
.gm-mkt-loader__candle { width: 6px; height: 100%; border-radius: 2px; transform-origin: bottom; animation: gm-at-candle 1s var(--gm-ease) infinite; }
.gm-mkt-loader__candle--up { background: var(--gm-up); }
.gm-mkt-loader__candle--down { background: var(--gm-down); }
@keyframes gm-at-candle { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
.gm-mkt-loader--pulse { overflow: hidden; width: 100%; }
.gm-mkt-loader__track { display: block; width: 200%; height: 100%; animation: gm-at-pulse-scroll 2.4s linear infinite; }
.gm-mkt-loader__path { stroke: var(--gm-primary-control); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px var(--gm-primary-glow)); }
@keyframes gm-at-pulse-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.gm-mkt-loader--depth { display: flex; align-items: center; gap: 2px; width: 100%; }
.gm-mkt-loader__mid { width: 1px; align-self: stretch; flex-shrink: 0; background: var(--gm-border-strong); }
.gm-mkt-loader__bid, .gm-mkt-loader__ask { flex: 1; height: 8px; border-radius: var(--gm-radius-full); }
.gm-mkt-loader__bid { background: var(--gm-up); transform-origin: right; animation: gm-at-depth 1.6s var(--gm-ease) infinite; }
.gm-mkt-loader__ask { background: var(--gm-down); transform-origin: left; animation: gm-at-depth 1.6s var(--gm-ease) infinite reverse; }
@keyframes gm-at-depth { 0%, 100% { transform: scaleX(0.25); opacity: 0.6; } 50% { transform: scaleX(1); opacity: 1; } }

/* ---------- Sparkline (STYLE_SPEC 5.6) ----------
   --gm-up / --gm-down for the trend, muted when flat. Line 1.5px round; area is the same color at 12%
   (18% with glow); the glow variant thickens the line and halos it. No end dot unless asked for. */
.gm-spark { display: inline-block; vertical-align: middle; flex-shrink: 0; color: var(--gm-text-subtle); overflow: visible; }
.gm-spark--up { color: var(--gm-up); }
.gm-spark--down { color: var(--gm-down); }
.gm-spark__line { stroke: currentColor; fill: none; }
.gm-spark__area { fill: currentColor; fill-opacity: 0.12; stroke: none; }
.gm-spark__end { fill: currentColor; stroke: var(--gm-surface); stroke-width: 1; }
.gm-spark__bar { fill: currentColor; fill-opacity: 0.55; }
.gm-spark__bar--last { fill-opacity: 1; }
.gm-spark--glow .gm-spark__area { fill-opacity: 0.18; }
.gm-spark--glow .gm-spark__line { filter: drop-shadow(0 0 3px currentColor) drop-shadow(0 0 8px currentColor); }

@media (prefers-reduced-motion: reduce) {
  .gm-mkt-loader__candle, .gm-mkt-loader__track, .gm-mkt-loader__bid, .gm-mkt-loader__ask,
  .gm-progress--animated .lm-progress__indicator, .gm-badge--pulse .lm-badge__dot { animation: none; }
}