/* GreenMinter app-level rules for the organisms family. Lumen classes first; only what Lumen has no construct for:
   the workspace switcher, the sidebar footer, the top bar, the navbar's three looks, the data table's
   filter chips / sort links / row accents, the alert center, menus, dialogs, and small fixes for links
   used as Lumen buttons. The sidebar's current-item look is the theme layer's (greenminter.css), not ours. */

/* A small caps label on a card or panel ("ALERT CENTER"): 11px, 600, 0.08em, muted (STYLE_SPEC 5.23). */
.gm-og-label { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; line-height: 1.5; text-transform: uppercase; color: var(--lm-fg-muted); }

/* ---------- workspace switcher ----------
   One markup, three layouts. The selected workspace is lit the way every active control in GreenMint is (lime soft fill,
   lime-soft border, lime ink: STYLE_SPEC 3.3, 7 item 6), never blue or violet, and it also reads from weight, an
   underline or a check and the line naming it under the control, so the colour is never the only cue. */
.gm-wsw { container-type: inline-size; display: flex; flex-direction: column; gap: var(--lm-space-2); min-width: 0; }
.gm-wsw__heading { margin: 0; padding-inline: var(--lm-space-1); }
.gm-wsw__list { display: grid; gap: 3px; margin: 0; padding: 3px; list-style: none; border: var(--lm-border-width) solid var(--lm-border); border-radius: var(--lm-radius-lg); background: var(--lm-surface-sunken); }
.gm-wsw__entry { display: flex; min-width: 0; }
.gm-wsw__item {
  position: relative; display: flex; flex: 1; align-items: center; justify-content: center; gap: var(--lm-space-2); min-width: 0;
  min-height: var(--lm-control-md); padding: var(--lm-space-1) var(--lm-space-3);
  border: var(--lm-border-width) solid transparent; border-radius: var(--lm-radius-md);
  color: var(--lm-fg-muted); font-size: var(--lm-text-sm); font-weight: var(--lm-weight-medium); text-decoration: none;
  transition: background-color var(--lm-duration-fast) var(--lm-ease-out), color var(--lm-duration-fast) var(--lm-ease-out), border-color var(--lm-duration-fast) var(--lm-ease-out);
}
.gm-wsw__item:hover { background: var(--lm-fill); color: var(--lm-fg); }
.gm-wsw__item:focus-visible { outline: var(--lm-ring-width) solid var(--lm-ring); outline-offset: 1px; }
.gm-wsw__item[aria-current] { border-color: var(--gm-primary-soft-border); background: var(--gm-primary-soft); color: var(--gm-primary-ink); font-weight: 700; cursor: default; }
.gm-wsw__item[aria-current]:hover { background: var(--gm-primary-soft); }
.gm-wsw__icon { display: inline-grid; place-items: center; flex-shrink: 0; color: var(--lm-fg-subtle); }
.gm-wsw__item:hover .gm-wsw__icon { color: var(--lm-fg); }
.gm-wsw__item[aria-current] .gm-wsw__icon { color: var(--gm-primary-ink); }
.gm-wsw__text { display: flex; flex-direction: column; min-width: 0; }
.gm-wsw__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-wsw__desc, .gm-wsw__check { display: none; }

/* tiles: icon over label, three across (the sidebar) */
.gm-wsw--tiles .gm-wsw__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gm-wsw--tiles .gm-wsw__item { flex-direction: column; gap: 3px; padding: var(--lm-space-2) 2px; font-size: var(--lm-text-xs); }
.gm-wsw--tiles .gm-wsw__item[aria-current]::after {
  content: ""; position: absolute; inset-inline: 22%; bottom: 3px; height: 2px; border-radius: var(--lm-radius-full); background: var(--gm-primary-control);
}

/* pills: one row of icon + label (a top bar's); in a narrow slot only the selected one keeps its label */
.gm-wsw--pills .gm-wsw__list { display: flex; }
.gm-wsw--pills .gm-wsw__entry { flex: 1 1 auto; }
.gm-wsw--pills .gm-wsw__item { padding-inline: var(--lm-space-2); }
@container (max-width: 380px) {
  .gm-wsw--pills .gm-wsw__entry:not(:has([aria-current])) { flex: 0 0 auto; }
  .gm-wsw--pills .gm-wsw__item:not([aria-current]) .gm-wsw__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* cards: one row each with its description */
.gm-wsw--cards .gm-wsw__list { padding: 0; border: 0; background: none; gap: var(--lm-space-2); }
.gm-wsw--cards .gm-wsw__item { justify-content: flex-start; gap: var(--lm-space-3); padding: var(--lm-space-3); border-color: var(--lm-border); background: var(--lm-surface); text-align: start; }
.gm-wsw--cards .gm-wsw__item:hover { border-color: var(--lm-border-strong); }
.gm-wsw--cards .gm-wsw__item[aria-current] { border-color: var(--gm-primary-soft-border); box-shadow: 0 0 0 1px var(--gm-primary-soft-border); }
.gm-wsw--cards .gm-wsw__icon { width: var(--lm-control-md); height: var(--lm-control-md); border-radius: var(--lm-radius-md); background: var(--lm-fill); }
.gm-wsw--cards .gm-wsw__item[aria-current] .gm-wsw__icon { background: var(--gm-primary); color: var(--gm-primary-contrast); }
.gm-wsw--cards .gm-wsw__name { color: var(--lm-fg); font-size: var(--lm-text-base); }
.gm-wsw--cards .gm-wsw__item[aria-current] .gm-wsw__name { color: var(--gm-primary-ink); }
.gm-wsw--cards .gm-wsw__desc { display: block; margin-top: 2px; color: var(--lm-fg-muted); font-size: var(--lm-text-xs); font-weight: var(--lm-weight-body); line-height: 1.4; }
.gm-wsw--cards .gm-wsw__item[aria-current] .gm-wsw__desc { color: var(--lm-fg-muted); }
.gm-wsw--cards .gm-wsw__check { display: inline-grid; margin-inline-start: auto; opacity: 0; color: var(--gm-primary-ink); }
.gm-wsw--cards .gm-wsw__item[aria-current] .gm-wsw__check { opacity: 1; }

/* the line naming the current workspace under the control */
.gm-wsw__detail { margin: 0; padding-inline: var(--lm-space-1); font-size: var(--lm-text-xs); line-height: 1.45; color: var(--lm-fg-muted); }
.gm-wsw__detail-name { display: block; color: var(--gm-primary-ink); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

/* ---------- sidebar ---------- */
.gm-sidebar { gap: var(--lm-space-4); }
.gm-sidebar a.lm-app-sidebar__item { text-decoration: none; }
.gm-sidebar .lm-app-sidebar__header { padding-inline: var(--lm-space-1); }
.gm-sidebar__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--lm-space-2); min-width: 0; }
.gm-sidebar__user { display: flex; align-items: center; gap: var(--lm-space-2); min-width: 0; }
.gm-sidebar__user-text { display: flex; flex-direction: column; min-width: 0; font-size: var(--lm-text-sm); line-height: 1.2; }
.gm-sidebar__user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--lm-weight-medium); }
.gm-sidebar__user-text small { color: var(--lm-fg-subtle); font-size: var(--lm-text-xs); }
.gm-sidebar__tools { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; }
.gm-sidebar__signout { margin: 0; }

/* ---------- top bar ---------- */
.gm-topbar { display: flex; align-items: center; gap: var(--lm-space-3); min-height: 52px; padding: var(--lm-space-2) var(--lm-space-4); }
.gm-topbar__lead { display: flex; align-items: center; flex: 1 1 auto; gap: var(--lm-space-3); min-width: 0; }
.gm-topbar__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--lm-weight-strong); }
.gm-topbar__end { display: flex; align-items: center; flex-shrink: 0; gap: var(--lm-space-2); }
.gm-topbar .lm-breadcrumbs { min-width: 0; }
.gm-ws-chip {
  display: inline-flex; flex-shrink: 0; align-items: center; gap: var(--lm-space-1); height: var(--lm-control-xs); padding-inline: var(--lm-space-2);
  border: var(--lm-border-width) solid var(--gm-primary-soft-border); border-radius: var(--lm-radius-full); background: var(--gm-primary-soft); color: var(--gm-primary-ink);
  font-size: var(--lm-text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.gm-app__content { padding: var(--lm-space-6) var(--lm-space-6) var(--lm-space-12); }
/* ~~Below 560px the top bar's right side was hidden (`.gm-topbar__end { display: none; }`), which took
   the page menu and the page actions with it.~~ Since 2026-10-23 (the admin review's Shell item 2) it
   stays: a dropdown's trigger keeps its icon and its accessible name and drops the visible label. */
@container lm-app-shell (max-width: 560px) {
  .gm-topbar { gap: var(--lm-space-2); padding-inline: var(--lm-space-3); }
  .gm-topbar__end { gap: var(--lm-space-1); }
  .gm-topbar .gm-dropdown__trigger .lm-btn__label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .gm-topbar .gm-dropdown__menu { max-width: calc(100vw - var(--lm-space-6)); }
  .gm-app__content { padding: var(--lm-space-4) var(--lm-space-4) var(--lm-space-10); }
}
/* The sidebar footer's one small line (the admin shell's environment and version). */
.gm-sidebar__note { margin: 0 0 var(--lm-space-2); padding-inline: var(--lm-space-1); color: var(--lm-fg-subtle); font-size: 11px; line-height: 1.4; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }

/* ---------- smaller fixes ---------- */
a.lm-pagination__page, a.lm-pagination__nav, a.lm-tag__remove { text-decoration: none; }
.gm-filter-bar { gap: var(--lm-space-3); }
.gm-filter-bar__select { flex: 0 1 auto; min-width: 9rem; }
.gm-settings-row--bare { display: block; }
.gm-settings-row--bare > .lm-switch-row { width: 100%; }

/* ---------- the showcase's framed shell demos ----------
   showcase.css pins the outer sidebar to the viewport; a demo shell inside a .gm-sc-frame keeps Lumen's own sizing. */
.gm-sc-shell .gm-sc-frame .lm-app-shell__sidebar { position: static; height: 100%; }
.gm-sc-frame .lm-app-shell { border-radius: inherit; }
.gm-sc-demo-page { display: flex; flex-direction: column; gap: var(--lm-space-5); padding: var(--lm-space-5); }

/* ---------- settings form grid: fields side by side, one column when the section is narrow ---------- */
.gm-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--lm-space-4); width: 100%; }

/* ---------- navbar (STYLE_SPEC 5.25) ----------
   Lumen's pill top nav (`lm-top-nav--pill`) gives the markup and the link strip; the three GreenMint looks are set here:
   default (a bordered, rounded bar, links centred), floating (a detached pill, brand chip, divider before the actions)
   and minimal (borderless, a bottom rule, underline links). */
.gm-navbar .lm-top-nav__bar { block-size: auto; max-inline-size: none; margin: 0; gap: var(--lm-space-6); padding: var(--lm-space-3) var(--lm-space-6); background: var(--lm-surface); border: var(--lm-border-width) solid var(--lm-border); border-radius: var(--lm-radius-xl); }
.gm-navbar__brand { display: inline-flex; align-items: center; gap: var(--lm-space-2); font-weight: 700; letter-spacing: -0.01em; color: var(--lm-fg); text-decoration: none; white-space: nowrap; }
.gm-navbar__brand svg { color: var(--lm-primary-text); }
html[data-theme="dark"] .gm-navbar__brand svg { color: var(--lm-primary); }
.gm-navbar .lm-top-nav__nav { flex: 0 1 auto; margin-inline: auto; min-width: 0; }
.gm-navbar .lm-top-nav__list { gap: var(--lm-space-1); }
.gm-navbar .lm-top-nav__link { block-size: auto; padding: 7px 12px; border-radius: var(--lm-radius-md); text-decoration: none; }
.gm-navbar .lm-top-nav__link:hover { background: var(--gm-surface-2); color: var(--lm-fg); }
.gm-navbar .lm-top-nav__link[aria-current="page"] { background: var(--gm-surface-2); color: var(--lm-fg); }
.gm-navbar .lm-top-nav__link[aria-current="page"]::after { content: none; }
.gm-navbar .lm-top-nav__end { margin-inline-start: 0; }
@container lm-top-nav (max-width: 640px) {
  /* Two rows: the brand and the actions, then the links across the full width, scrolling sideways if they must. */
  .gm-navbar .lm-top-nav__bar { flex-wrap: wrap; row-gap: var(--lm-space-2); width: 100%; padding: var(--lm-space-3); }
  .gm-navbar .lm-top-nav__start { order: 1; }
  .gm-navbar .lm-top-nav__end { order: 2; margin-inline-start: auto; gap: var(--lm-space-1); }
  .gm-navbar .lm-top-nav__nav { order: 3; flex: 1 1 100%; margin-inline: 0; overflow-x: auto; scrollbar-width: none; }
  .gm-navbar .lm-top-nav__nav::-webkit-scrollbar { display: none; }
  .gm-navbar--floating .lm-top-nav__bar { border-radius: var(--lm-radius-xl); padding: var(--lm-space-2) var(--lm-space-3) var(--lm-space-3); }
  .gm-navbar--floating .lm-top-nav__nav { padding-block: 0; }
  .gm-navbar--minimal .lm-top-nav__bar { padding-inline: 0; }
}

.gm-navbar--floating .lm-top-nav__bar { width: fit-content; max-width: 100%; margin-inline: auto; gap: var(--lm-space-3); padding: var(--lm-space-2) var(--lm-space-2) var(--lm-space-2) var(--lm-space-3); border-radius: var(--lm-radius-full); box-shadow: var(--lm-shadow-lg); }
.gm-navbar--floating .gm-navbar__brand { padding: 6px 14px 6px 8px; border: var(--lm-border-width) solid var(--lm-border); border-radius: var(--lm-radius-full); background: var(--gm-surface-2); }
.gm-navbar--floating .lm-top-nav__nav { margin-inline: 0; }
.gm-navbar--floating .lm-top-nav__list { gap: 2px; }
.gm-navbar--floating .lm-top-nav__link { border-radius: var(--lm-radius-full); }
.gm-navbar--floating .lm-top-nav__link[aria-current="page"] { background: var(--lm-primary-soft); color: var(--lm-primary-text); }
.gm-navbar--floating .lm-top-nav__end { padding-inline-end: var(--lm-space-1); }
.gm-navbar__divider { align-self: stretch; width: 1px; margin-block: var(--lm-space-1); background: var(--lm-border-strong); }

.gm-navbar--minimal .lm-top-nav__bar { padding: var(--lm-space-3) 0; background: transparent; border: 0; border-bottom: var(--lm-border-width) solid var(--lm-border); border-radius: 0; }
.gm-navbar--minimal .lm-top-nav__nav { margin-inline: 0; }
.gm-navbar--minimal .lm-top-nav__list { gap: var(--lm-space-4); }
.gm-navbar--minimal .lm-top-nav__link { padding: var(--lm-space-1) 0; border-radius: 0; border-bottom: 2px solid transparent; }
.gm-navbar--minimal .lm-top-nav__link:hover { background: none; border-bottom-color: var(--lm-border-strong); }
.gm-navbar--minimal .lm-top-nav__link[aria-current="page"] { background: none; color: var(--lm-primary-text); border-bottom-color: var(--lm-primary); }
.gm-navbar--minimal .lm-top-nav__end { margin-inline-start: auto; }
.gm-navbar--minimal .lm-top-nav__start { flex: none; }

/* ---------- data table: filter chips, sort links, row accent, bar cell (STYLE_SPEC 5.22) ---------- */
.gm-dt { --panel-pad: var(--lm-space-4); }
.gm-dt .lm-panel__head { padding-bottom: var(--lm-space-4); }
.gm-dt .lm-panel__body { gap: 0; padding-top: 0; }
.gm-dt .lm-panel__foot { padding: var(--lm-space-3) var(--lm-space-4); font-size: var(--lm-text-xs); color: var(--lm-fg-muted); }
.gm-dt .lm-data-table__toolbar { padding: var(--lm-space-3) var(--lm-space-4); border-bottom: var(--lm-border-width) solid var(--lm-border); }
.gm-dt .lm-panel__head + .lm-panel__body .lm-data-table__toolbar { border-top: var(--lm-border-width) solid var(--lm-border); }
.gm-dt .lm-filter-bar__controls { gap: var(--lm-space-3); }
.gm-dt .lm-filter-bar__search { flex: 0 1 240px; min-width: 180px; max-width: none; }
.gm-fgroup { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--lm-space-2); }
.gm-fgroup__label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lm-fg-subtle); white-space: nowrap; }
.gm-fchip {
  display: inline-flex; align-items: center; gap: var(--lm-space-2); height: 32px; padding-inline: var(--lm-space-3);
  border: var(--lm-border-width) solid var(--lm-border); border-radius: var(--lm-radius-full); background: var(--gm-surface-2); color: var(--lm-fg);
  font-size: var(--lm-text-xs); font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: border-color var(--lm-duration-base) var(--lm-ease-out), background-color var(--lm-duration-base) var(--lm-ease-out), color var(--lm-duration-base) var(--lm-ease-out);
}
.gm-fchip:hover { border-color: var(--lm-border-strong); }
.gm-fchip:focus-visible { outline: var(--lm-ring-width) solid var(--lm-ring); outline-offset: 2px; }
.gm-fchip[aria-current] { border-color: var(--lm-primary-border); background: var(--lm-primary-soft); color: var(--lm-primary-text); }
.gm-fchip__count { margin-inline-start: 5px; font-size: 11px; font-weight: 400; color: var(--lm-fg-subtle); }
.gm-fchip[aria-current] .gm-fchip__count { color: inherit; opacity: 0.75; }
/* A chip whose count is 0 recedes; it stays a link, since the empty list says what would fill it. */
.gm-fchip[data-count="0"]:not([aria-current]) { color: var(--lm-fg-subtle); }
.gm-fchip[data-count="0"]:not([aria-current]) .gm-fchip__count { opacity: 0.6; }
.gm-sort { display: inline-flex; align-items: center; min-height: 32px; margin-block: -8px; gap: 5px; color: inherit; text-decoration: none; letter-spacing: inherit; text-transform: inherit; transition: color var(--lm-duration-fast) var(--lm-ease-out); }
.gm-sort:hover, .gm-sort--on { color: var(--lm-fg); }
.gm-sort:focus-visible { outline: var(--lm-ring-width) solid var(--lm-ring); outline-offset: 2px; border-radius: 4px; }
.gm-sort__arrow { font-size: 0.85em; opacity: 0.6; }
.gm-sort--on .gm-sort__arrow { color: var(--lm-primary-text); opacity: 1; }

.gm-dt .lm-table__cell { white-space: nowrap; }
.gm-dt .lm-table__cell[colspan] { padding: var(--lm-space-8) var(--lm-space-4); text-align: center; color: var(--lm-fg-subtle); white-space: normal; }
.gm-dt .lm-table__cell:first-child, .gm-dt .lm-table__head:first-child { position: relative; }
.gm-row-accent { position: absolute; inset-inline-start: 0; top: 15%; bottom: 15%; width: 2px; border-radius: var(--lm-radius-full); background: var(--lm-border-strong); }
.gm-row-accent[data-tone="up"] { background: var(--gm-up); }
.gm-row-accent[data-tone="down"] { background: var(--gm-down); }

/* A setup cell: the setup type over its risk/reward band in 11px subtle caps, the way the ticker cell carries the name. */
.gm-setupcell { display: inline-flex; flex-direction: column; line-height: 1.35; }
.gm-setupcell small { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--gm-text-subtle); }
.gm-confcell { display: inline-flex; align-items: center; gap: 10px; }
.gm-confcell .lm-progress { width: 90px; flex: none; }
.gm-confcell__n { font-size: 12px; color: var(--gm-text-muted); }

.gm-barcell { display: inline-flex; align-items: center; gap: var(--lm-space-3); min-width: 128px; }
.gm-barcell .lm-progress { flex: 1 1 auto; min-width: 64px; }
.gm-barcell__n { min-width: 2.2ch; text-align: end; font-size: var(--lm-text-xs); color: var(--lm-fg-muted); }

/* A side as plain tinted text, no pill (STYLE_SPEC 5.14): 12px, 700, 0.06em. */
.gm-side { font-size: var(--lm-text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.gm-side[data-side="long"] { color: var(--gm-up-ink); }
.gm-side[data-side="short"] { color: var(--gm-down-ink); }

/* P/L as tinted text (STYLE_SPEC 5.28): 600, tabular, the up or down ink; flat is muted. */
.gm-pnl { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gm-pnl--up { color: var(--gm-up-ink); }
.gm-pnl--down { color: var(--gm-down-ink); }
.gm-pnl--flat { color: var(--lm-fg-muted); }

/* ---------- alert center (STYLE_SPEC 5.23) ---------- */
.gm-alertc { padding: var(--lm-space-6); background: var(--lm-surface); border: var(--lm-border-width) solid var(--lm-border); border-radius: var(--lm-radius-xl); color: var(--lm-fg); min-width: 0; }
.gm-alertc__head { display: flex; align-items: center; justify-content: space-between; gap: var(--lm-space-3); margin-bottom: var(--lm-space-3); }
.gm-alertc__head .lm-btn--link { height: auto; min-height: 0; padding: 0; font-size: var(--lm-text-sm); font-weight: 600; line-height: 1.5; }
.gm-alertc__groups { display: flex; flex-direction: column; gap: var(--lm-space-2); }
.gm-alertc__list { display: flex; flex-direction: column; gap: var(--lm-space-2); margin: 0; padding: 0; list-style: none; }
.gm-alertc .lm-notifications__group { display: flex; flex-direction: column; gap: var(--lm-space-2); }
.gm-alertc .lm-notifications__day { position: static; margin: var(--lm-space-2) 0 0; padding: 0 var(--lm-space-1); border: 0; background: none; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--lm-fg-subtle); }
.gm-alertc .lm-notifications__group:first-child .lm-notifications__day { margin-top: 0; }
.gm-alertc__row { padding: var(--lm-space-3); gap: var(--lm-space-3); border: var(--lm-border-width) solid transparent; border-radius: var(--lm-radius-lg); }
.gm-alertc__row:hover, .gm-alertc__row:focus-within { background: transparent; }
.gm-alertc__row:not([data-read]) { background: var(--gm-surface-2); border-color: var(--lm-border); }
.gm-alertc__row .lm-notification__lead { width: 32px; padding-top: 0; }
.gm-alertc__row .lm-icon-tile { width: 32px; height: 32px; border-radius: var(--lm-radius-full); }
.gm-alertc__row .lm-notification__main { gap: 2px; }
.gm-alertc__row .lm-notification__title { font-size: var(--lm-text-sm); font-weight: 700; line-height: 1.5; }
.gm-alertc__row[data-read] .lm-notification__title { font-weight: 700; color: var(--lm-fg); }
.gm-alertc__row .lm-notification__link { color: inherit; text-decoration: none; }
.gm-alertc__row .lm-notification__link:hover { text-decoration: underline; }
.gm-alertc__row .lm-notification__body { font-size: var(--lm-text-xs); line-height: 1.5; }
.gm-alertc__row .lm-notification__side { flex-direction: column; align-items: flex-end; gap: 6px; min-height: 0; }
.gm-alertc__row .lm-notification__time { font-size: 11px; color: var(--lm-fg-subtle); line-height: 1.5; }
.gm-alertc__row .lm-notification__dot { width: 8px; height: 8px; margin: 0; background: var(--lm-primary); }
html[data-theme="light"] .gm-alertc__row .lm-notification__dot { background: var(--lm-primary-text); }

.gm-alertc--compact .gm-alertc__head { margin-bottom: 8px; }
.gm-alertc--compact .gm-alertc__list { gap: 0; }
.gm-alertc__crow { display: flex; align-items: baseline; gap: var(--lm-space-2); padding: var(--lm-space-2) var(--lm-space-3); border-bottom: var(--lm-border-width) solid var(--lm-border); font-size: var(--lm-text-xs); }
.gm-alertc__crow:last-child { border-bottom: 0; }
.gm-alertc__crow:not([data-read]) { background: var(--gm-surface-2); border-radius: var(--lm-radius-md); }
.gm-alertc__kind { align-self: center; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--i-solid, var(--lm-fg-subtle)); }
.gm-alertc__kind.lm-intent-neutral { background: var(--lm-fg-subtle); }
.gm-alertc__ctitle { flex: none; font-weight: 600; color: var(--lm-fg); }
.gm-alertc__cbody { flex: 1 1 auto; min-width: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--lm-fg-muted); }
.gm-alertc__ctime { flex: none; margin-inline-start: auto; font-size: 11px; color: var(--lm-fg-subtle); }
.gm-alertc__cbody + .gm-alertc__ctime { margin-inline-start: 0; }

/* ---------- menus and dropdown (STYLE_SPEC 5.26) ----------
   GreenMint's menu exactly: surface-2, border-strong, radius 16, shadow-lg, pad 6, rows 8/10 at 14px with a 14px icon
   in the text colour; the danger row in the danger base. The floating menu sits 6px under its trigger on the popover
   layer and appears with no motion; the trigger's chevron does not turn. */
.gm-menu { min-width: 210px; max-width: none; display: flex; flex-direction: column; gap: 2px; padding: 6px; background: var(--gm-surface-2); border: var(--lm-border-width) solid var(--gm-border-strong); border-radius: var(--gm-radius-lg, 16px); box-shadow: var(--gm-shadow-lg); color: var(--gm-text); }
.gm-menu .lm-menu__item { width: 100%; gap: 8px; padding: 8px 10px; border: 0; border-radius: var(--gm-radius-sm, 8px); background: none; color: var(--gm-text); font: inherit; font-size: 14px; line-height: 1.5; text-align: start; text-decoration: none; cursor: pointer; transition: none; }
.gm-menu .lm-menu__item:hover, .gm-menu .lm-menu__item:focus-visible { background: var(--gm-surface-3); outline: none; }
.gm-menu .lm-menu__item:focus-visible { box-shadow: inset 0 0 0 2px var(--gm-primary-control); }
.gm-menu .lm-menu__item--destructive, .gm-menu .lm-menu__item--destructive:hover { color: var(--gm-danger); }
.gm-menu .lm-menu__icon { color: inherit; }
.gm-menu .lm-menu__icon svg { width: 14px; height: 14px; }
.gm-menu .lm-menu__separator { height: 0; margin: 4px 0; border: 0; border-top: 1px solid var(--gm-border); background: none; }
.gm-menu--detailed { min-width: 260px; gap: 4px; padding: 8px; }
.gm-menu--detailed .lm-menu__item { align-items: flex-start; gap: 12px; padding: 8px; }
.gm-menu--detailed .lm-menu__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--gm-radius-md, 12px); background: var(--gm-surface-3); color: var(--gm-text-muted); }
.gm-menu--detailed .lm-menu__icon svg { width: 16px; height: 16px; }
.gm-menu--detailed .lm-menu__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gm-menu--detailed .lm-menu__label { font-size: 14px; font-weight: 600; color: var(--gm-text); white-space: normal; }
.gm-menu--detailed .lm-menu__desc { font-size: 12px; font-weight: 400; color: var(--gm-text-muted); line-height: 1.5; }
.gm-menu--detailed .lm-menu__item--destructive .lm-menu__label { color: var(--gm-danger); }

.gm-dropdown { position: relative; display: inline-block; }
.gm-dropdown__trigger { list-style: none; cursor: pointer; }
.gm-dropdown__trigger::-webkit-details-marker { display: none; }
.gm-dropdown__menu { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 100; }
.gm-dropdown[data-align="end"] .gm-dropdown__menu { inset-inline-start: auto; inset-inline-end: 0; }

/* ---------- modal (STYLE_SPEC 5.26) ----------
   A native <dialog> on Lumen's dialog class, re-set to GreenMint's: 460px, border-strong, radius 20, shadow-xl; head 16/24
   with a bottom hairline, a 20px title at normal tracking, the X on the right; body 24 in muted text; foot 16/24 with a top
   hairline. The backdrop is the flat scrim (no blur) and the centred dialog opens with no motion, as GreenMint's does; only
   the sheet slides up (0.22s ease-out). `.gm-modal--static` is the same box drawn in place on a scrim stage (a specimen). */
.gm-modal {
  position: fixed; inset: 0; margin: auto; transform: none; width: min(460px, calc(100vw - 48px)); height: fit-content; max-height: calc(100dvh - 48px); padding: 0;
  display: flex; flex-direction: column; overflow: hidden; background: var(--gm-surface); color: var(--gm-text);
  border: 1px solid var(--gm-border-strong); border-radius: var(--gm-radius-xl, 20px); box-shadow: var(--gm-shadow-xl); animation: none;
}
dialog.gm-modal:not([open]) { display: none; }
dialog.gm-modal::backdrop { background: var(--gm-scrim); }
.gm-modal__head { display: flex; align-items: center; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--gm-border); }
.gm-modal__title { flex: 1; margin: 0; font-size: 20px; font-weight: 700; line-height: 1.5; letter-spacing: normal; color: var(--gm-text); }
.gm-modal__close { margin: 0 0 0 auto; }
.gm-modal__body { padding: 24px; font-size: 14px; line-height: 1.5; color: var(--gm-text-muted); overflow-y: auto; }
.gm-modal__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--gm-border); }
.gm-modal__foot form { display: contents; }
.gm-modal--static { position: relative; inset: auto; z-index: auto; margin: 0; max-height: none; }
.gm-modal-stage { display: flex; align-items: center; justify-content: center; padding: 24px; min-height: 320px; border-radius: var(--gm-radius-xl, 20px); background: var(--gm-scrim); }
.gm-modal--wide { width: min(720px, calc(100vw - 48px)); }
.gm-modal--wide .gm-modal__head { padding: 24px 32px; }
.gm-modal--wide .gm-modal__title { font-size: 24px; }
.gm-modal--wide .gm-modal__body { padding: 32px; }
.gm-modal--wide .gm-modal__foot { padding: 16px 32px; }
.gm-modal--wide.gm-modal--static { width: min(720px, 100%); }
.gm-modal--default.gm-modal--static { width: min(460px, 100%); }
.gm-modal--sheet { width: 100%; max-width: 560px; margin: auto auto 0; max-height: calc(100dvh - 24px); border-bottom: 0; border-radius: var(--gm-radius-xl, 20px) var(--gm-radius-xl, 20px) 0 0; animation: gm-modal-sheet-in 0.22s ease-out; }
@keyframes gm-modal-sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.gm-modal--sheet.gm-modal--static { margin: 0 auto; }
.gm-modal-stage--sheet { align-items: flex-end; padding: 0; min-height: 0; border-radius: 0; }
@media (max-width: 560px) { .gm-modal--sheet { max-width: 100%; } }
@media (prefers-reduced-motion: reduce) { .gm-modal--sheet { animation: none; } }

/* ---------- showcase: GreenMint-style settings layout, a stage for an open menu, an inverse band ---------- */
.gm-settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: var(--lm-space-4); align-items: start; }
.gm-settings-grid > .gm-settings-col { display: flex; flex-direction: column; gap: var(--lm-space-4); min-width: 0; }
.gm-set-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--lm-space-3); }
.gm-set-stack { display: flex; flex-direction: column; gap: var(--lm-space-2); }
.gm-set-actions { display: flex; gap: var(--lm-space-2); }
/* The overlays section's own layout, GreenMint's: blocks 32px apart, a two-column first row (the dialog's scrim stage, then
   a column holding the floating dropdown, a 200px spacer under it and the static menu, max 220px), the detailed menu max 300px. */
.gm-og-stack { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.gm-og-stack > div:first-child > .gm-sc-label:first-child, .gm-og-stack > .gm-og-grid:first-child > div > .gm-sc-label:first-child, .gm-og-col > .gm-sc-label:first-child { margin-top: 0; }
.gm-og-grid > div > .gm-sc-label:first-child { margin-top: 0; }
.gm-og-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); align-items: start; }
.gm-og-col { min-width: 0; }
.gm-og-spacer { height: 200px; }
.gm-og-static { max-width: 220px; }
.gm-og-detailed { max-width: 300px; }
/* The other organism sections reuse the same rhythm: a three-across grid, padded frames, a 560px column (the alert
   center, as GreenMint shows it), a 640px column (the narrow tables) and a sideways-scrolling strip (the navbars).
   An inverse wrapper is a square band, as GreenMint's scope is: the card inside keeps its own radius. */
.gm-og-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.gm-og-grid--stretch { align-items: stretch; }
.gm-og-pad { padding: 12px; }
.gm-og-pad--md { padding: 16px; }
.gm-og-pad--lg { padding: 24px; }
.gm-og-vstack { display: flex; flex-direction: column; gap: 32px; }
.gm-og-560 { max-width: 560px; }
.gm-og-narrow { max-width: 640px; }
.gm-og-hscroll { overflow-x: auto; }
.gm-settings-col .gm-card__eyebrow--solo { margin-bottom: 0; }

/* Round 3 (2026-10-23). The page does not scroll under an open modal. */
html:has(dialog.gm-modal[open]) { overflow: hidden; scrollbar-gutter: stable; }
/* Toast stack (app.html's #gm-toasts): bottom right, 16px inset, 8px gap, newest last; a toast rises in over 200ms. */
.gm-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 500; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: calc(100vw - 32px); pointer-events: none; }
.gm-toasts > * { pointer-events: auto; animation: gm-toast-in 200ms ease-out; }
.gm-toasts:empty { display: none; }
@keyframes gm-toast-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .gm-toasts > * { animation: none; } }

/* ---------- page header note and section header count (2026-10-23, the admin review's Foundation fixes 4 and 7) ----------
   The note is one small line under the description, above the header's rule. A section title's count stays on the
   title's line at a narrow width instead of wrapping onto a line of its own. */
.lm-page-header__note { margin: 6px 0 0; max-width: 92ch; color: var(--lm-fg-subtle); font-size: var(--lm-text-sm); line-height: 1.5; }
.lm-page-header__note::first-letter { text-transform: uppercase; }
.lm-section-header__title-row { flex-wrap: nowrap; align-items: baseline; }
.lm-section-header__title { min-width: 0; }