/* GreenMinter app-level rules for the molecules family. Lumen classes first; this file holds what Lumen
   has no construct for (animal cards, market and signal chips, chart tips, nav items, steps, pagers,
   toasts, accordions, the mini calendar) and the GreenMint recipes for the stat variants. Cards,
   tabs, alerts and the segmented control take their look from the theme layer (greenminter.css).
   Colours are its --gm-* tokens; values are STYLE_SPEC's:
   numbers in section 5.7 to 5.13, 5.30 and 5.31, art in 6.2. Figures are tabular Inter (.gm-num). */

/* ------------------------------------------------------------------ showcase furniture */

/* A vertical run of demos. */
.gm-sc-stack { display: flex; flex-direction: column; gap: var(--lm-space-4); }

/* GreenMint's demo grids: auto-fit columns with a floor (300 / 240 / 190px), so two cards fill a row
   and four sit three to a row at the 1084px column, as on its page. */
.gm-mol-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(var(--gm-mol-min, 300px), 100%), 1fr)); }
.gm-mol-grid--3 { --gm-mol-min: 240px; }
.gm-mol-grid--4 { --gm-mol-min: 190px; }
.gm-mol-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.gm-mol-row--start { align-items: flex-start; }
.gm-mol-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.gm-mol-col--tight { gap: 8px; }
/* A grid cell that leads with its own sub-label, flush on top (GreenMint's `marginTop: 0`). */
.gm-mol-cell { min-width: 0; }
.gm-mol-cell > .gm-sc-label:first-child { margin: 0; }
.gm-mol-cell > * + .gm-sc-label { margin: 16px 0 0; }
.gm-mol-gap { margin-top: 12px; }
.gm-mol-grid--top { align-items: start; }
/* a compact alert in a wrapping row keeps its own width instead of the full row */
.lm-alert.gm-alert--compact.gm-mol-fit { width: auto; max-width: 100%; }
.lm-card.gm-mol-card--pad-3 { padding: 12px; }
/* a card whose subject is in a warning state: an amber hairline, never a coloured stripe */
.lm-card.gm-mol-card--warn { border-color: var(--gm-warning-soft-border); }

/* Block molecules fill their specimen stage rather than shrinking to content. */
.gm-sc-specimen__stage > :is(.lm-table-container, .lm-dl, .lm-empty-state, .lm-error-block, .lm-timeline, .lm-skeleton-lines, .lm-tabs) { flex: 1 1 100%; min-width: 0; }

/* ------------------------------------------------------------------ cards (STYLE_SPEC 5.7) */

.gm-card__eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gm-text-muted);
}
/* A label alone over the body, GreenMint's demo label in a plain card: subtle, flush on the body. */
.gm-card__eyebrow--solo { margin: 0 0 -16px; color: var(--gm-text-subtle); line-height: 1.5; }
.gm-mol-card-body { margin: 0; color: var(--gm-text-muted); font-size: 14px; line-height: 1.5; text-wrap: wrap; }
/* The watermark demo cards: a plain block card, label, ticker, then the body 8px down. */
.lm-card.gm-mol-wm-demo { gap: 0; }
.gm-mol-wm-demo > .gm-sc-label { margin: 0; }
.gm-mol-wm-demo > .gm-mol-card-body { margin-top: 8px; }

/* ------------------------------------------------------------------ tickers: logo mark (6.2) */

/* Full-bleed circle, no ring. The animal fallback sits letterboxed in a bordered media well, 8% in. */
.gm-logo {
  display: inline-grid;
  place-items: center;
  flex: none;
  box-sizing: border-box;
  width: var(--gm-logo, 44px);
  height: var(--gm-logo, 44px);
  border-radius: 50%;
  overflow: hidden;
}
.gm-logo > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gm-logo--well { background: var(--gm-media-surface); border: 1px solid var(--gm-media-border); }
.gm-logo__animal { object-fit: contain !important; padding: calc(var(--gm-logo, 44px) * 0.08); box-sizing: border-box; }
.gm-logo__mono { font-size: calc(var(--gm-logo, 44px) * 0.4); font-weight: 700; color: var(--gm-text-muted); letter-spacing: 0.02em; line-height: 1; }

/* ------------------------------------------------------------------ animal watermark (6.2) */

/* GreenMint's AnimalWatermark, the one implementation on the page. The art's alpha masks a flat
   text-subtle fill: a grey silhouette, never the art's own colours. The host card gets position,
   isolation and the clip through :has(); the mark sits under every child on z-index -1. Placement
   composes two axes (side, align) and a mirror multiplier inside one transform, so a left, top,
   flipped mark is all three at once. Opacity is one ladder times --gm-wm-scale (1 dark, 0.55 light,
   flipped by the inverse scope). */
.lm-card:has(> .gm-wm),
.gm-wm-host { position: relative; isolation: isolate; overflow: hidden; }
.gm-wm {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}
.gm-wm::after {
  content: "";
  --gm-wm-mirror: 1;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scaleX(var(--gm-wm-mirror));
  height: var(--gm-wm-size, 190px);
  aspect-ratio: var(--gm-wm-aspect, 1.15);
  background: var(--gm-text-subtle);
  opacity: 0.09;
  -webkit-mask-image: var(--gm-wm-art);
  mask-image: var(--gm-wm-art);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.gm-wm--right::after { right: -6%; }
.gm-wm--left::after { left: -6%; }
.gm-wm--center::after { left: 50%; transform: translate(-50%, -50%) scaleX(var(--gm-wm-mirror)); }
/* vertical anchor: top / bottom pin the mark near that edge (a corner mark with a side) */
.gm-wm--top::after { top: var(--gm-wm-inset, 10%); transform: scaleX(var(--gm-wm-mirror)); }
.gm-wm--bottom::after { top: auto; bottom: var(--gm-wm-inset, 10%); transform: scaleX(var(--gm-wm-mirror)); }
.gm-wm--center.gm-wm--top::after,
.gm-wm--center.gm-wm--bottom::after { transform: translateX(-50%) scaleX(var(--gm-wm-mirror)); }
.gm-wm--faint::after { opacity: calc(0.05 * var(--gm-wm-scale, 1)); }
.gm-wm--subtle::after { opacity: calc(0.09 * var(--gm-wm-scale, 1)); }
.gm-wm--medium::after { opacity: calc(0.16 * var(--gm-wm-scale, 1)); }
.gm-wm--bold::after { opacity: calc(0.26 * var(--gm-wm-scale, 1)); }
/* fit: --gm-wm-size is min(Xcqw, Xcqh), resolved against this inset:0 box */
.gm-wm--fit { container-type: size; }
/* bleed: oversized and cropped against the side's edge; only the fraction of its own width stays on */
.gm-wm--bleed::after {
  right: auto;
  left: calc(100% - var(--gm-wm-bleed-fraction, 0.6) * var(--gm-wm-size) * var(--gm-wm-aspect));
}
.gm-wm--left.gm-wm--bleed::after {
  left: auto;
  right: calc(100% - var(--gm-wm-bleed-fraction, 0.6) * var(--gm-wm-size) * var(--gm-wm-aspect));
}
.gm-wm--flip::after { --gm-wm-mirror: -1; }

/* ------------------------------------------------------------------ animal stock cards (5.30) */

.gm-animal { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; min-width: 0; }
.gm-animal__head { display: flex; align-items: center; gap: 12px; }
.gm-animal__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gm-animal__ticker { font-weight: 700; letter-spacing: 0.02em; line-height: 1.5; color: var(--gm-text); }
.gm-animal__name { font-size: 12px; line-height: 1.5; color: var(--gm-text-muted); }
.gm-animal__label { margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; line-height: 1.5; text-transform: uppercase; color: var(--gm-text-subtle); }
.gm-animal__quote { display: flex; align-items: baseline; gap: 12px; }
.gm-animal__price { font-size: 16px; font-weight: 700; color: var(--gm-text); }
.gm-animal__change { font-weight: 600; color: var(--gm-text-muted); }
.gm-animal[data-trend="up"] .gm-animal__change { color: var(--gm-up-ink); }
.gm-animal[data-trend="down"] .gm-animal__change { color: var(--gm-down-ink); }
.gm-animal__tag.lm-badge { border: 1px solid var(--i-border); }
.gm-animal--default > .gm-animal__tag.lm-badge { display: flex; justify-content: flex-start; }
.gm-animal__cta--default { margin-top: 4px; }

/* Confidence: a 6px surface-3 track, a green-to-lime fill (STYLE_SPEC 7.13), the figure in text. */
.gm-conf { display: flex; align-items: center; gap: 8px; }
.gm-conf__track { flex: 1; height: 6px; border-radius: 9999px; background: var(--gm-surface-3); overflow: hidden; }
.gm-conf__fill { display: block; height: 100%; border-radius: 9999px; background: linear-gradient(90deg, var(--gm-success), var(--gm-primary)); }
.gm-conf__value { flex: none; color: var(--gm-text); }

/* Compact: one dense row on the card itself. */
.lm-card.gm-animal--compact { flex-direction: row; align-items: center; gap: 12px; padding: 12px; border-radius: 20px; }
.gm-animal__name--row { flex: 1; min-width: 0; }
.gm-animal__quote--stack { flex-direction: column; align-items: flex-end; gap: 2px; line-height: 1.5; }
.gm-animal--compact .gm-animal__price { font-size: inherit; }

/* Featured: a row of the 72px mark and a body column; the ring is pulled up beside the ticker. */
.lm-card.gm-animal--featured { flex-direction: row; align-items: flex-start; gap: 16px; }
.gm-animal__main { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.gm-animal__top { display: flex; align-items: center; gap: 8px; }
.gm-animal__ticker--lg { font-size: 20px; }
.gm-animal__quote--lg { font-size: 16px; }
.gm-animal--featured .gm-animal__change { font-size: 16px; }
.gm-animal__cta { display: flex; flex-direction: column; }
.gm-ring { position: relative; display: inline-flex; align-items: center; justify-content: center; align-self: flex-end; width: 56px; height: 56px; margin-top: -64px; }
.gm-ring svg { transform: rotate(-90deg); }
.gm-ring__track, .gm-ring__bar { fill: none; stroke-width: 5; }
.gm-ring__track { stroke: var(--gm-surface-3); }
.gm-ring__bar { stroke: var(--gm-primary-control); stroke-linecap: round; }
.gm-ring__value { position: absolute; font-size: 13.333px; line-height: 20px; font-weight: 700; color: var(--gm-text); }

/* ------------------------------------------------------------------ stat cards (5.8) */

.lm-stat.gm-stat {
  position: relative;
  gap: 6px;
  padding: 24px;
  border-radius: 20px;
  border: 1px solid var(--lm-border);
  background: var(--lm-surface);
  box-shadow: none;
}
.lm-stat.gm-stat--plain { padding: 0; border: 0; background: none; border-radius: 0; }
.lm-stat.gm-stat:hover { border-color: var(--lm-border); }
.gm-stat .lm-stat__head { min-height: 0; }
.gm-stat .lm-stat__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lm-fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.gm-stat .lm-stat__icon { color: var(--lm-fg-subtle); }
.gm-stat .lm-stat__row { align-items: flex-start; }
.gm-stat .lm-stat__value {
  font-family: var(--lm-font-sans);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--lm-fg);
  font-variant-numeric: tabular-nums;
}
.gm-stat[data-tone="value"][data-sentiment="positive"] .lm-stat__value { color: var(--gm-up-ink); }
.gm-stat[data-tone="value"][data-sentiment="negative"] .lm-stat__value { color: var(--gm-down-ink); }
.gm-stat .lm-stat__sparkline { position: absolute; top: 24px; right: 24px; }
.lm-stat.gm-stat .lm-stat__delta { display: flex; width: auto; margin: 0; gap: 4px; font-size: 12px; font-weight: 600; }
.lm-stat.gm-stat .lm-stat__delta .lm-stat__delta-change,
.lm-stat.gm-stat .lm-stat__delta[data-sentiment] .lm-stat__delta-change {
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--lm-fg-muted);
}
.gm-stat .lm-stat__delta-change svg, .gm-stat__head-delta svg { width: 13px; height: 13px; flex: none; margin-top: 1px; }
.lm-stat.gm-stat .lm-stat__delta[data-sentiment="positive"] .lm-stat__delta-change { color: var(--gm-up-ink); }
.lm-stat.gm-stat .lm-stat__delta[data-sentiment="negative"] .lm-stat__delta-change { color: var(--gm-down-ink); }
.gm-stat .lm-stat__caption { margin: 8px 0 0; font-size: 12px; color: var(--lm-fg-subtle); }
.gm-stat .lm-stat__delta + .lm-stat__caption { margin-top: 6px; }

/* compact: label, value, delta pill on one row */
.lm-stat.gm-stat--compact { flex-direction: row; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; }
.gm-stat--compact .lm-stat__head { flex: 1; min-width: 0; }
.gm-stat--compact .lm-stat__row { flex: none; }
.gm-stat--compact .lm-stat__value { font-size: 20px; line-height: 1.2; }
.gm-stat--compact .lm-stat__caption { display: none; }
.lm-stat.gm-stat--compact .lm-stat__delta .lm-stat__delta-change,
.lm-stat.gm-stat--compact .lm-stat__delta[data-sentiment] .lm-stat__delta-change {
  align-items: center;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
  background: var(--gm-surface-3);
}
.lm-stat.gm-stat--compact .lm-stat__delta[data-sentiment="positive"] .lm-stat__delta-change { background: var(--gm-up-soft); }
.lm-stat.gm-stat--compact .lm-stat__delta[data-sentiment="negative"] .lm-stat__delta-change { background: var(--gm-down-soft); }
.gm-stat--compact .lm-stat__delta-change svg { margin-top: 0; width: 11px; height: 11px; }

/* tile: centered, big figure, ambient wash (green up, lime down) */
.lm-stat.gm-stat--tile { align-items: center; text-align: center; padding: 48px 24px; gap: 6px; background-image: var(--gm-glow-green); background-repeat: no-repeat; }
.lm-stat.gm-stat--tile[data-trend="down"] { background-image: var(--gm-glow-lime); }
.gm-stat--tile .lm-stat__head, .gm-stat--tile .lm-stat__row { justify-content: center; }
.gm-stat--tile .lm-stat__value { font-size: 44px; line-height: 1.05; }
/* value -> delta about 12px and delta -> caption about 6px, as GreenMint measures (2026-10-23) */
.lm-stat.gm-stat--tile .lm-stat__delta { justify-content: center; margin-top: 6px; }
.lm-stat.gm-stat--tile .lm-stat__caption { margin-top: 0; }

/* hero: label with the delta on the right, a wide glowing chart */
.lm-stat.gm-stat--hero { gap: 8px; }
.gm-stat--hero .lm-stat__head { align-items: baseline; }
.lm-stat.gm-stat--hero .lm-stat__head .lm-stat__delta-change { display: inline-flex; align-items: center; gap: 4px; height: auto; padding: 0; border-radius: 0; background: none; font-size: 12px; font-weight: 600; color: var(--lm-fg-muted); }
.lm-stat.gm-stat--hero[data-sentiment="positive"] .lm-stat__head .lm-stat__delta-change { color: var(--gm-up-ink); }
.lm-stat.gm-stat--hero[data-sentiment="negative"] .lm-stat__head .lm-stat__delta-change { color: var(--gm-down-ink); }
.gm-stat--hero .lm-stat__head .lm-stat__delta-change svg { margin: 0; }
.gm-stat__chart { display: block; width: 100%; height: 136px; margin-top: 4px; color: var(--lm-fg-subtle); overflow: visible; }
.gm-stat__chart polyline { filter: drop-shadow(0 0 5px currentColor) drop-shadow(0 0 12px color-mix(in srgb, currentColor 55%, transparent)); }
.gm-stat__chart--up { color: var(--gm-up); }
.gm-stat__chart--down { color: var(--gm-down); }
.gm-stat--hero .lm-stat__caption { margin-top: 12px; }

/* ------------------------------------------------------------------ market and signal chips (GreenMint MarketChip, SignalChip) */

.gm-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--gm-border);
  border-radius: 16px;
  background: var(--gm-surface);
  font-size: 14px;
  line-height: 1.5;
  color: var(--gm-text);
  min-width: 0;
  max-width: 100%;
}
.gm-chip__row { display: flex; align-items: center; gap: 12px; }
.gm-chip__id { display: flex; flex-direction: column; min-width: 0; }
.gm-chip__ticker { font-weight: 700; letter-spacing: 0.02em; color: var(--gm-text); }
.gm-chip__sub { font-size: 11px; color: var(--gm-text-subtle); }
.gm-chip__quote { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; }
.gm-chip__price { font-weight: 600; }
.gm-chip__change { font-weight: 600; color: var(--gm-text-muted); }
.gm-chip__change--sm { font-size: 11px; }
.gm-chip[data-trend="up"] .gm-chip__change { color: var(--gm-up); }
.gm-chip[data-trend="down"] .gm-chip__change { color: var(--gm-down); }
.gm-chip__foot { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--gm-border); font-size: 11px; color: var(--gm-text-muted); }
.gm-chip__foot b { font-weight: 700; color: var(--gm-text); }
.gm-chip--compact { gap: 8px; }
.gm-chip--detailed { flex-direction: column; align-items: stretch; gap: 8px; }

/* signal */
.gm-chip--signal { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 16px; }
.gm-chip--signal.gm-chip--compact { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 12px; padding: 8px 12px; }
.gm-chip__side { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--gm-up-ink); }
.gm-chip[data-trend="down"] .gm-chip__side { color: var(--gm-down-ink); }
.gm-chip__mark { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.gm-chip__conf { font-weight: 700; color: var(--gm-primary-ink); }
.gm-chip__levels-row { display: flex; gap: 16px; font-size: 12px; color: var(--gm-text-muted); }
.gm-chip__levels-row b { font-weight: 700; color: var(--gm-text); }
.gm-chip__range { font-size: 12px; color: var(--gm-text-muted); }
.gm-chip__delta[data-trend="up"] { color: var(--gm-up-ink); }
.gm-chip__delta[data-trend="down"] { color: var(--gm-down-ink); }

/* ------------------------------------------------------------------ chart tip (5.13) */

.gm-tip {
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--lm-border-strong);
  border-radius: 16px;
  background: color-mix(in srgb, var(--gm-surface-3) 82%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--lm-shadow-lg);
  color: var(--lm-fg);
  width: fit-content;
}
.gm-tip__main { display: flex; align-items: center; gap: 12px; }
.gm-tip__icon { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--gm-up-soft); color: var(--gm-up-ink); }
.gm-tip[data-trend="down"] .gm-tip__icon { background: var(--gm-down-soft); color: var(--gm-down-ink); }
.gm-tip__text { display: flex; flex-direction: column; }
.gm-tip__value { font-size: 16px; font-weight: 700; line-height: 1.2; }
.gm-tip__label { font-size: 12px; color: var(--lm-fg-muted); line-height: 1.3; }
.gm-tip__meta { padding-top: 6px; border-top: 1px solid var(--lm-border); font-size: 11px; font-weight: 600; color: var(--gm-up-ink); }
.gm-tip[data-trend="down"] .gm-tip__meta { color: var(--gm-down-ink); }
.gm-tip--minimal { flex-direction: row; align-items: center; padding: 6px 12px; border-radius: 9999px; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--lm-border); }
.gm-tip--minimal .gm-tip__main { gap: 8px; }
.gm-tip--minimal[data-trend] .gm-tip__icon { width: auto; height: auto; background: none; }
.gm-tip--minimal .gm-tip__icon svg { width: 11px; height: 11px; }
.gm-tip--minimal .gm-tip__value { font-size: 16px; }
.gm-tip--minimal .gm-tip__label { font-size: 12px; margin-left: 4px; }
.gm-tip--minimal[data-trend="up"] .gm-tip__icon { color: var(--gm-up-ink); }
.gm-tip--minimal[data-trend="down"] .gm-tip__icon { color: var(--gm-down-ink); }

/* ------------------------------------------------------------------ nav item (5.12) */

.gm-nav { display: flex; flex-direction: column; gap: 4px; }
.gm-nav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--lm-fg-muted);
  text-decoration: none;
  transition: background-color 120ms var(--lm-ease-out), color 120ms var(--lm-ease-out), border-color 120ms var(--lm-ease-out);
}
.gm-nav__icon { display: inline-grid; place-items: center; color: var(--lm-fg-subtle); }
.gm-nav__label { flex: 1; min-width: 0; }
.gm-nav__badge { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 9999px; background: var(--gm-surface-3); color: var(--lm-fg-muted); }
.gm-nav__item:hover { background: var(--gm-surface-2); color: var(--lm-fg); }
.gm-nav__item:focus-visible { outline: 2px solid var(--gm-primary-control); outline-offset: 2px; }
.gm-nav__item[aria-current="page"] {
  background: linear-gradient(90deg, var(--gm-primary-soft), transparent 80%);
  border-color: var(--gm-primary-soft-border);
  color: var(--lm-fg);
  font-weight: 600;
}
.gm-nav__item[aria-current="page"] .gm-nav__icon { color: var(--gm-primary-ink); }
.gm-nav--pill { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.gm-nav--pill .gm-nav__item { padding: 8px 16px; border-radius: 9999px; border-color: var(--lm-border); background: var(--gm-surface-2); gap: 10px; }
.gm-nav--pill .gm-nav__item:hover { background: var(--gm-surface-3); }
.gm-nav--pill .gm-nav__item[aria-current="page"] { background: var(--gm-primary-control); border-color: var(--gm-primary-control); color: var(--gm-text-inverse); }
.gm-nav--pill .gm-nav__item[aria-current="page"] .gm-nav__icon { color: inherit; }
.gm-nav--underline { flex-direction: row; gap: 24px; border-bottom: 1px solid var(--lm-border); }
.gm-nav--underline .gm-nav__item { padding: 10px 2px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; margin-bottom: -1px; gap: 8px; background: none; }
.gm-nav--underline .gm-nav__item:hover { background: none; }
.gm-nav--underline .gm-nav__item[aria-current="page"] { background: none; border-bottom-color: var(--gm-primary-control); color: var(--gm-primary-ink); }
.gm-nav--underline .gm-nav__item[aria-current="page"] .gm-nav__icon { color: var(--gm-primary-ink); }

/* user info */
.gm-user { display: flex; align-items: center; gap: 12px; min-width: 0; }
.gm-user__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.gm-user__name { font-size: 14px; font-weight: 700; color: var(--lm-fg); }
.gm-user--compact .gm-user__name { font-size: 12px; }
.gm-user__role { font-size: 12px; color: var(--lm-fg-muted); }
.gm-user--compact .gm-user__text { flex-direction: row; align-items: baseline; gap: 8px; }
.gm-user--compact .gm-user__role { font-size: 11px; color: var(--gm-text-subtle); }
.gm-user--compact .gm-user__role::before { content: "\00B7"; margin-right: 8px; }

/* ------------------------------------------------------------------ tabs and segmented controls */

/* Their look, counts included, is the theme layer's (greenminter.css). Only the spacing of a panel
   placed after the tablist and link segments are the molecules'. */
.lm-tabs + .lm-tabs__content { margin-top: var(--lm-space-4); }
.lm-tabs.lm-tabs--underline .lm-tabs__list { width: max-content; }
a.lm-segmented__item { text-decoration: none; }

/* ------------------------------------------------------------------ steps (5.11) */

.gm-steps { display: flex; margin: 0; padding: 0; list-style: none; }
.gm-steps--default { width: 100%; }
.gm-steps--default .gm-steps__step { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 0; }
.gm-steps--default .gm-steps__step + .gm-steps__step::before {
  content: "";
  position: absolute;
  top: 15px;
  right: 50%;
  left: -50%;
  height: 2px;
  margin-inline: 16px;
  background: var(--lm-border);
}
.gm-steps--default .gm-steps__step[data-state="done"]::before,
.gm-steps--default .gm-steps__step[data-state="active"]::before { background: var(--gm-primary-control); }
.gm-steps__marker {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--lm-border-strong);
  background: var(--gm-surface-3);
  color: var(--lm-fg-muted);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.gm-steps__step[data-state="done"] .gm-steps__marker,
.gm-steps__step[data-state="active"] .gm-steps__marker { background: var(--gm-primary-control); border-color: var(--gm-primary-control); color: var(--gm-text-inverse); }
.gm-steps__step[data-state="active"] .gm-steps__marker { box-shadow: 0 0 0 4px var(--gm-primary-soft); }
.gm-steps__label { font-size: 12px; color: var(--lm-fg-muted); max-width: 110px; line-height: 1.35; }
.gm-steps__step[data-state="active"] .gm-steps__label { font-weight: 600; color: var(--lm-fg); }

.gm-steps--vertical { flex-direction: column; gap: 16px; }
.gm-steps--vertical .gm-steps__step { position: relative; display: flex; align-items: center; gap: 12px; }
.gm-steps--vertical .gm-steps__step + .gm-steps__step::before {
  content: "";
  position: absolute;
  left: 15px;
  top: -16px;
  width: 2px;
  height: 16px;
  background: var(--lm-border);
}
.gm-steps--vertical .gm-steps__step[data-state="done"]::before,
.gm-steps--vertical .gm-steps__step[data-state="active"]::before { background: var(--gm-primary-control); }
.gm-steps--vertical .gm-steps__label { max-width: none; }

.gm-steps--dots { flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.gm-steps__dots { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.gm-steps__dot { position: relative; width: 8px; height: 8px; border-radius: 9999px; background: var(--lm-border-strong); transition: width 200ms var(--lm-ease-out); }
.gm-steps__dot[data-state="done"] { background: var(--gm-primary-control); }
.gm-steps__dot[data-state="active"] { width: 22px; background: var(--gm-primary-control); box-shadow: 0 0 0 4px var(--gm-primary-soft); }
.gm-steps__current { margin: 0; font-size: 12px; font-weight: 600; color: var(--lm-fg); }

/* ------------------------------------------------------------------ pagers (5.11) */

.gm-pager { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--lm-fg-muted); }
.gm-pager__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: 8px;
  color: var(--lm-fg-muted);
  font-weight: 600;
  text-decoration: none;
}
a.gm-pager__nav:hover { background: var(--gm-surface-3); color: var(--lm-fg); }
.gm-pager__nav[aria-disabled="true"] { opacity: 0.45; }
.gm-pager__label { padding-inline: 12px; }
.gm-pager__label b { color: var(--lm-fg); font-weight: 700; }
.gm-pager--minimal { gap: 0; border: 1px solid var(--lm-border); border-radius: 12px; overflow: hidden; }
.gm-pager--minimal .gm-pager__nav { height: 28px; padding: 0 14px; border-radius: 0; }
.gm-pager--minimal .gm-pager__nav + .gm-pager__nav { border-left: 1px solid var(--lm-border); }

/* ------------------------------------------------------------------ alerts, toasts, banners (5.10) */

/* The tint, the title colour and the icon are the theme layer's (greenminter.css 2.9). */
.lm-alert__actions { margin-top: 10px; }

.gm-close, .lm-alert__dismiss.gm-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  margin: -2px -4px 0 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--lm-fg-subtle);
  cursor: pointer;
  transition: color 120ms var(--lm-ease-out), background-color 120ms var(--lm-ease-out);
}
.gm-close:hover { color: var(--lm-fg); background: color-mix(in srgb, var(--lm-fg) 8%, transparent); }
.gm-close:focus-visible { outline: 2px solid var(--gm-primary-control); outline-offset: 2px; }

/* compact: one line, the title leads the message */
.lm-alert.gm-alert--compact { align-items: center; padding: 8px 12px; gap: 8px; width: 100%; }
.gm-alert--compact .lm-alert__icon { margin-top: 0; }
.gm-alert--compact .lm-alert__body { flex-direction: row; align-items: baseline; gap: 8px; flex-wrap: nowrap; overflow: hidden; }
.gm-alert--compact .lm-alert__title { margin: 0; white-space: nowrap; }
.gm-alert--compact .lm-alert__desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-alert--compact .gm-close { margin: 0 0 0 auto; }
/* banner: full width, tighter radius */
.lm-alert.gm-alert--banner { width: 100%; border-radius: 8px; }

/* toast: neutral raised surface; only the icon and the title take the intent */
.gm-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 280px;
  max-width: 380px;
  padding: 12px 16px;
  border: 1px solid var(--lm-border);
  border-radius: 16px;
  background: var(--gm-surface-2);
  box-shadow: var(--lm-shadow-lg);
  font-size: 14px;
  width: fit-content;
}
.gm-toast__icon { display: flex; flex: none; margin-top: 1px; color: var(--i-text, var(--lm-fg)); }
.gm-toast__icon svg { width: 17px; height: 17px; }
.gm-toast__body { flex: 1; min-width: 0; }
.gm-toast__title { margin: 0 0 2px; font-weight: 600; color: var(--i-text, var(--lm-fg)); }
.gm-toast__desc { color: var(--lm-fg-muted); }
.gm-toast--compact { align-items: center; min-width: 0; padding: 8px 12px; gap: 8px; max-width: 100%; }
.gm-toast--compact .gm-toast__icon { margin-top: 0; }
.gm-toast--compact .gm-toast__body { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; overflow: hidden; }
.gm-toast--compact .gm-toast__title { margin: 0; }
.gm-toast--compact .gm-toast__desc { overflow: hidden; text-overflow: ellipsis; }
.gm-toast--compact .gm-close { margin: 0 0 0 4px; }
.gm-toast--banner { width: 100%; max-width: none; min-width: 0; border-radius: 8px; }

/* ------------------------------------------------------------------ accordion and calendar (5.31) */

.gm-acc { display: flex; flex-direction: column; gap: 12px; }
.gm-acc__item { border: 1px solid var(--lm-border); border-radius: 16px; background: var(--lm-surface); overflow: hidden; transition: border-color 120ms var(--lm-ease-out), box-shadow 200ms var(--lm-ease-out); }
.gm-acc__item[open] { border-color: var(--lm-border-strong); }
.gm-acc__summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--lm-fg);
  cursor: pointer;
  list-style: none;
  border-radius: 8px;
}
.gm-acc__summary::-webkit-details-marker { display: none; }
.gm-acc__summary:focus-visible { outline: 2px solid var(--gm-primary-control); outline-offset: -2px; }
.gm-acc__title { flex: 1; min-width: 0; }
.gm-acc__chevron { display: inline-flex; color: var(--lm-fg-subtle); transition: transform 120ms var(--lm-ease-out); }
.gm-acc__item[open] .gm-acc__chevron { transform: rotate(180deg); }
.gm-acc__body { padding: 0 16px 16px; font-size: 14px; line-height: 1.6; color: var(--lm-fg-muted); }
.gm-acc--separated .gm-acc__item { border-radius: 20px; box-shadow: var(--lm-shadow-sm); }
.gm-acc--separated .gm-acc__item[open] { box-shadow: var(--lm-shadow-md); }
.gm-acc__index { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--gm-primary-soft); color: var(--gm-primary-ink); font-size: 12px; font-weight: 700; }
.gm-acc--separated .gm-acc__body { padding-left: 56px; }
.gm-acc--flush { gap: 0; border: 1px solid var(--lm-border); border-radius: 16px; background: var(--lm-surface); overflow: hidden; }
.gm-acc--flush .gm-acc__item { border: 0; border-radius: 0; border-top: 1px solid var(--lm-border); }
.gm-acc--flush .gm-acc__item:first-child { border-top: 0; }
.gm-acc--flush .gm-acc__item[open] > .gm-acc__summary { background: var(--gm-surface-2); }
.gm-acc--flush .gm-acc__summary { border-radius: 0; padding: 16px; }
.gm-acc--flush .gm-acc__body { padding: 8px 16px 16px; }

.gm-cal { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.gm-cal__head { display: flex; align-items: center; justify-content: space-between; }
.gm-cal__month { font-size: 13px; font-weight: 600; color: var(--lm-fg); }
.gm-cal__nav { display: inline-flex; gap: 4px; }
.gm-cal__btn { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--lm-fg-muted); cursor: pointer; text-decoration: none; }
.gm-cal__btn:hover { background: var(--gm-surface-3); color: var(--lm-fg); }
.gm-cal__btn:disabled { opacity: 1; cursor: default; }
.gm-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.gm-cal__dow { text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--lm-fg-subtle); padding-bottom: 8px; }
.gm-cal__day {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 8px;
  font-size: 12px;
  color: var(--lm-fg);
}
.gm-cal__day--blank { pointer-events: none; }
.gm-cal--market .gm-cal__day[data-weekend="true"], .gm-cal__tile[data-weekend="true"] .gm-cal__num { color: var(--lm-fg-subtle); }
.gm-cal__day[data-closed="true"] { color: var(--lm-fg-subtle); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--lm-fg-subtle) 60%, transparent); }
.gm-cal__day[data-marked="true"]::after, .gm-cal__tile[data-marked="true"]::after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--gm-up);
}
.gm-cal__day[data-closed="true"]::after, .gm-cal__tile[data-closed="true"]::after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--lm-warning);
}
.gm-cal__day[data-today="true"] { background: var(--gm-primary); color: var(--gm-primary-contrast); font-weight: 700; }
.gm-cal__day[data-today="true"]::after { background: var(--gm-primary-contrast); }


.gm-cal__strip { display: flex; gap: 6px; margin: 0; padding: 0 0 4px; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.gm-cal__tile {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 38px;
  padding: 6px 0 8px;
  border: 1px solid var(--lm-border);
  border-radius: 8px;
  background: var(--gm-surface-2);
  scroll-snap-align: start;
}
.gm-cal__tile .gm-cal__dow { padding: 0; font-size: 9px; }
.gm-cal__tile .gm-cal__num { font-size: 12px; font-weight: 600; color: var(--lm-fg); }
.gm-cal__tile[data-today="true"] { background: var(--gm-primary); border-color: var(--gm-primary); }
.gm-cal__tile[data-today="true"] .gm-cal__dow, .gm-cal__tile[data-today="true"] .gm-cal__num { color: var(--gm-primary-contrast); }
.gm-cal__tile[data-marked="true"]::after, .gm-cal__tile[data-closed="true"]::after { bottom: 3px; }

/* ------------------------------------------------------------------ carousel (GreenMint Carousel) */

.gm-carousel { min-width: 0; }
.gm-carousel__track {
  display: flex;
  gap: 16px;
  padding: 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.gm-carousel__track::-webkit-scrollbar { display: none; }
.gm-carousel__track > * { flex: 0 0 auto; scroll-snap-align: start; }
.gm-carousel__track:focus-visible { outline: 2px solid var(--gm-primary-control); outline-offset: 2px; border-radius: 20px; }
.gm-carousel__controls { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.gm-carousel--peek .gm-carousel__track {
  gap: 12px;
  padding-inline: 32px;
  scroll-padding-inline: 24px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.gm-carousel--peek .gm-carousel__track > * { scroll-snap-align: center; }
.gm-carousel__item > * { height: 100%; box-sizing: border-box; }

/* ------------------------------------------------------------------ table cells */

/* A badge whose first child is an icon or a dot has no text baseline of its own, so on the cell's
   baseline it sits 1 to 3px off the figures beside it. Centre it on the line instead; `middle`
   lands about 1px low against the text's optical centre, hence the nudge (measured 2026-10-23). */
.lm-table__cell :is(.lm-badge, .lm-delta-chip, .lm-tag) { vertical-align: middle; position: relative; top: -1px; }

/* Banner icons draw in the intent's text colour: the solid colour on a pale tint is under 3:1 in light mode. */
.lm-banner .lm-banner__icon { color: var(--i-text, currentColor); }

/* ------------------------------------------------------------------ focus and motion */

a.gm-animal:focus-visible, .gm-pager__nav:focus-visible { outline: 2px solid var(--gm-primary-control); outline-offset: 2px; }
.gm-cal__btn:focus-visible { outline: 2px solid var(--gm-primary-control); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .gm-nav__item, .gm-steps__dot, .gm-acc__item, .gm-acc__chevron, .gm-close { transition: none; }
}

/* Round 3 (2026-10-23). Animal card footer row: the setup state and its reason, inside the card. */
.gm-animal__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding-top: 12px; border-top: 1px solid var(--gm-border); font-size: 12px; color: var(--gm-text-muted); }
/* Pagination ellipsis: GreenMint's 28px cell, 12px 600 muted. */
.lm-pagination__ellipsis { min-width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--gm-text-muted); }