/* GreenMinter app-level rules for the templates family: page-level layout of the workspace pages
   (templates/ui/templates/*.html). Lumen classes first (lm-stack, lm-grid, lm-cluster, lm-panel,
   lm-kanban, lm-list-row); this file only places them. Every grid folds to one column on the page's
   own width (container queries on .gm-tpl), so a page reads the same in the 420px drawer layout. */

/* ---------- the page column ---------- */
.gm-tpl { container: gm-tpl / inline-size; display: flex; flex-direction: column; gap: var(--lm-space-6); min-width: 0; max-width: 1480px; margin-inline: auto; }
.gm-tpl > .lm-page-header { margin-block-end: calc(var(--lm-space-2) * -1); }
.gm-tpl__section { display: flex; flex-direction: column; gap: var(--lm-space-3); min-width: 0; }
.gm-tpl__note { margin: 0; color: var(--lm-fg-subtle); font-size: var(--lm-text-xs); line-height: 1.5; }
.gm-tpl a.lm-btn, .gm-tpl a.lm-card { text-decoration: none; }

/* the status line under a page header: session, feed, edge reach, freshness */
.gm-tpl-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lm-space-2) var(--lm-space-4); padding: var(--lm-space-3) var(--lm-space-4); border: var(--lm-border-width) solid var(--lm-border-subtle); border-radius: var(--lm-radius-card); background: var(--lm-bg-subtle); }
.gm-tpl-status__item { display: inline-flex; align-items: center; gap: var(--lm-space-2); min-width: 0; font-size: var(--lm-text-sm); }
.gm-tpl-status__label { color: var(--lm-fg-subtle); font-size: var(--lm-text-xs); font-weight: var(--lm-weight-medium); letter-spacing: var(--lm-tracking-caps); text-transform: uppercase; }
.gm-tpl-status__val { color: var(--lm-fg-muted); font-size: 12px; }
.gm-tpl-status__end { margin-inline-start: auto; }
@container gm-tpl (max-width: 640px) { .gm-tpl-status__end { margin-inline-start: 0; } }

/* ---------- "needs you today": one tile per count, each a link to its filtered list ----------
   The tile is a quiet alert (GreenMint): a surface card with the intent's soft border and wash, the
   count in the intent ink; the border is molecules card(accent=...)'s intent hairline. */
.gm-tpl-attn { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: var(--lm-space-3); margin: 0; padding: 0; list-style: none; }
.gm-tpl-attn__item { display: flex; height: 100%; min-width: 0; }
.gm-tpl-attn__item > .lm-card { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: inherit; background: color-mix(in srgb, var(--i-soft) 55%, var(--lm-surface)); }
.gm-tpl-attn__item > .lm-card:hover { border-color: var(--i-text); }
.gm-tpl-attn__top { display: flex; align-items: center; gap: var(--lm-space-3); margin-bottom: var(--lm-space-2); }
.gm-tpl-attn__icon { flex: none; background: transparent; color: var(--i-text); }
.gm-tpl-attn__count { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--i-text); }
.gm-tpl-attn__title { margin: 0; font-size: var(--lm-text-sm); font-weight: 600; line-height: 1.35; color: var(--lm-fg); }
.gm-tpl-attn__meta { overflow: hidden; color: var(--lm-fg-muted); font-size: var(--lm-text-xs); line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.gm-tpl-attn__go { display: inline-flex; align-items: center; gap: 2px; margin-inline-start: auto; flex-shrink: 0; color: var(--lm-fg-muted); font-size: var(--lm-text-xs); font-weight: 600; white-space: nowrap; }
.gm-tpl-attn__item > .lm-card:hover .gm-tpl-attn__go { color: var(--i-text); }

/* a risk decision row: the ticker, then its state badge inline after it */
.gm-tpl-decision { display: flex; align-items: center; flex-wrap: wrap; gap: var(--lm-space-2); }
.gm-tpl-decision > a { display: inline-flex; text-decoration: none; }
.gm-tpl-rows .lm-list-row__trailing { display: flex; align-items: center; gap: var(--lm-space-2); }
.gm-tpl-rows .lm-list-row__trailing .gm-num { color: var(--lm-fg-subtle); font-size: 12px; }
.gm-tpl .lm-card .lm-stat-grid { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
.gm-tpl .lm-stat__label { white-space: normal; }
/* page-level stat cards: five (or four) across at the workspace width, captions pinned to the card's
   bottom so a card with a delta row and one without read on the same baseline */
.gm-tpl > .lm-stat-grid, .gm-tpl__section > .lm-stat-grid { display: flex; flex-wrap: wrap; gap: var(--lm-space-3); }
.gm-tpl > .lm-stat-grid > *, .gm-tpl__section > .lm-stat-grid > * { flex: 1 1 9.5rem; min-width: 0; }
/* five cards go 5 across or 3 + 2; four go 4 across or 2 + 2 */
.lm-stat-grid:has(> :last-child:nth-child(5)) > * { flex-basis: 11.5rem; }
.gm-tpl .lm-stat--card { display: flex; flex-direction: column; }
.gm-tpl .lm-stat--card .lm-stat__caption { margin-top: auto; padding-top: 6px; }
.gm-tpl-rows .lm-list-row__trailing.gm-num { color: var(--lm-fg-subtle); font-size: 11px; }

/* paper-trade and other macro tables: cells never wrap (trading.css), the card scrolls instead.
   Page-level tables take GreenMint's table recipe (14px cells, 12px 16px padding); a table nested in
   a side panel or card keeps the compact 12px type with 10px 16px padding. */
.gm-tpl .gt-table--tight th, .gm-tpl .gt-table--tight td { padding-inline: var(--lm-space-4); }
.gm-tpl .lm-card .lm-table--compact .lm-table__head, .gm-tpl .lm-card .lm-table--compact .lm-table__cell { padding: 10px var(--lm-space-4); }

/* ---------- main column plus a side rail ---------- */
.gm-tpl-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--lm-space-6); align-items: start; }
.gm-tpl-split__main, .gm-tpl-split__aside { display: flex; flex-direction: column; gap: var(--lm-space-6); min-width: 0; }
@container gm-tpl (min-width: 1080px) {
  .gm-tpl-split { grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem); }
  .gm-tpl-split--wide-aside { grid-template-columns: minmax(0, 1fr) minmax(22rem, 24rem); }
  .gm-tpl-split--sticky > .gm-tpl-split__aside { position: sticky; top: var(--lm-space-4); }
}
.gm-tpl-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--lm-space-6); align-items: start; }
@container gm-tpl (min-width: 900px) { .gm-tpl-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* card grids: setup and signal cards, strategy cards, alert rules */
.gm-tpl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--gm-tpl-card-min, 18rem), 100%), 1fr)); gap: var(--lm-space-3); }

/* a short row of cards (the three setups on the home page) stretches to fill the row it has */
.gm-tpl-cards--fit { display: flex; flex-wrap: wrap; }
.gm-tpl-cards--fit > * { flex: 1 1 min(var(--gm-tpl-card-min, 18rem), 100%); min-width: 0; }

/* a list of Lumen list rows inside a card or panel body */
.gm-tpl-rows { display: flex; flex-direction: column; margin: 0 calc(var(--lm-space-3) * -1); padding: 0; list-style: none; }
.gm-tpl-rows .lm-list-row { padding-inline: var(--lm-space-3); border-radius: var(--lm-radius-md); }
.gm-tpl-rows .lm-list-row__trailing { color: var(--lm-fg-muted); }

/* key/value lines in a side panel */
.gm-tpl-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--lm-space-2) var(--lm-space-4); margin: 0; font-size: var(--lm-text-sm); }
.gm-tpl-kv dt { color: var(--lm-fg-muted); }
.gm-tpl-kv dd { margin: 0; text-align: end; overflow-wrap: anywhere; }
.gm-tpl-kv dd.gm-mono { font-size: 12px; overflow-wrap: break-word; }

/* ---------- setups board ---------- */
.gm-tpl-board .lm-kanban__columns { grid-auto-columns: minmax(15rem, 1fr); }
.gm-tpl-board .lm-kanban-card { color: inherit; text-decoration: none; }
.gm-tpl-board .lm-kanban-card__title { display: flex; align-items: center; gap: var(--lm-space-2); }
.gm-tpl-board__levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lm-space-2); margin: 0; font-size: var(--lm-text-xs); }
.gm-tpl-board__levels dt { color: var(--lm-fg-subtle); }
.gm-tpl-board__levels dd { margin: 0; font-family: var(--lm-font-sans); font-size: var(--lm-text-sm); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--lm-fg); }
.gm-tpl-board .lm-kanban-card__due { flex-shrink: 0; white-space: nowrap; }
.gm-tpl-board .lm-kanban-card__foot { flex-wrap: nowrap; gap: var(--lm-space-2); }
.gm-tpl-board .lm-kanban-card__meta { white-space: nowrap; }
.gm-tpl-board__reason { display: block; overflow: hidden; color: var(--lm-fg-subtle); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.gm-tpl-detail { display: flex; flex-direction: column; gap: var(--lm-space-4); }
.gm-tpl-detail__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr)); gap: var(--lm-space-6); align-items: start; }
.gm-tpl-detail__col { display: flex; flex-direction: column; gap: var(--lm-space-4); min-width: 0; }
.gm-tpl-detail__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--lm-space-2); }

/* ---------- alerts manager ---------- */
.gm-tpl-reach { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); gap: var(--lm-space-3); }
.gm-tpl-copyline { display: flex; align-items: center; gap: var(--lm-space-2); min-width: 0; padding: var(--lm-space-2) var(--lm-space-2) var(--lm-space-2) var(--lm-space-3); border: var(--lm-border-width) solid var(--lm-border); border-radius: var(--lm-radius-md); background: var(--lm-surface-sunken); }
.gm-tpl-copyline code { flex: 1; min-width: 0; overflow: hidden; font-family: var(--lm-font-mono); font-size: var(--lm-text-sm); text-overflow: ellipsis; white-space: nowrap; }
.gm-tpl-keymeta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lm-space-2); }
.gm-tpl-rules { display: flex; flex-direction: column; gap: var(--lm-space-3); margin: 0; padding: 0; list-style: none; font-size: var(--lm-text-sm); line-height: 1.5; }
.gm-tpl-rules li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--lm-space-2); }
.gm-tpl-rules li > .lm-icon { margin-top: 3px; color: var(--lm-success-text); }
.gm-tpl-rules strong { font-weight: var(--lm-weight-strong); }
.gm-tpl-rules code, .gm-tpl-inline-code { padding: 0.05em 0.35em; border-radius: var(--lm-radius-xs); background: var(--lm-fill); font-family: var(--lm-font-mono); font-size: 0.9em; }

/* ---------- developer: the log stream ---------- */
.gm-tpl-log { margin: 0; padding: var(--lm-space-2) 0; overflow-x: auto; list-style: none; font-family: var(--lm-font-mono); font-size: calc(var(--lm-text-sm) * 12.5 / 14); line-height: 1.6; background: var(--lm-surface-sunken); }
.gm-tpl-log__line { display: grid; grid-template-columns: 7.5rem 3.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--lm-space-3); padding: 2px var(--lm-space-4); border-inline-start: 2px solid transparent; min-width: 44rem; }
.gm-tpl-log__line:hover { background: var(--lm-fill); }
.gm-tpl-log__line[data-level="WARN"] { border-inline-start-color: var(--lm-warning); }
.gm-tpl-log__line[data-level="ERROR"] { border-inline-start-color: var(--lm-danger); background: color-mix(in oklab, var(--lm-danger) 6%, transparent); }
.gm-tpl-log__time { color: var(--lm-fg-subtle); }
.gm-tpl-log__level { font-weight: var(--lm-weight-strong); }
.gm-tpl-log__line[data-level="INFO"] .gm-tpl-log__level { color: var(--lm-info-text); }
.gm-tpl-log__line[data-level="WARN"] .gm-tpl-log__level { color: var(--lm-warning-text); }
.gm-tpl-log__line[data-level="ERROR"] .gm-tpl-log__level { color: var(--lm-danger-text); }
.gm-tpl-log__msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--lm-fg); }
.gm-tpl-log__msg b { font-weight: var(--lm-weight-medium); color: var(--lm-fg-muted); }
.gm-tpl-log__rid { display: inline-flex; align-items: center; gap: var(--lm-space-1); color: var(--lm-fg-subtle); }
.gm-tpl-log__rid .lm-btn { height: 22px; width: 22px; min-width: 22px; }

/* latency bars in the endpoint table: a reading drawn to scale, no threshold */
.gm-tpl-bar { display: inline-block; width: 4.5rem; height: 6px; margin-inline-end: var(--lm-space-2); vertical-align: middle; border-radius: var(--lm-radius-full); background: var(--lm-fill); overflow: hidden; }
.gm-tpl-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--lm-fg-subtle); }

/* identifiers, instants and prices in table cells stay on one line (the table scrolls instead) */
.gm-tpl .lm-table__cell.gm-mono, .gm-tpl .lm-table__cell .gm-mono { white-space: nowrap; }

/* the log level filter works with no script: the segmented control's checked radio hides the other levels */
.gm-tpl-logpanel:has(input[name="level"][value="INFO"]:checked) .gm-tpl-log__line:not([data-level="INFO"]),
.gm-tpl-logpanel:has(input[name="level"][value="WARN"]:checked) .gm-tpl-log__line:not([data-level="WARN"]),
.gm-tpl-logpanel:has(input[name="level"][value="ERROR"]:checked) .gm-tpl-log__line:not([data-level="ERROR"]) { display: none; }

/* narrow: the status line stacks, label above value */
@container gm-tpl (max-width: 640px) {
  .gm-tpl-status { flex-direction: column; align-items: flex-start; }
  .gm-tpl-status__item { flex-wrap: wrap; }
}

/* ---------- animal market wall (animal-market.html) ----------
   GreenMint's ticker wall: auto-fill 230px cards, gap 16. Each card is an animal stock card with no
   watermark; the caption under it carries the newest setup. The filter works with no script: the
   segmented control's checked radio hides the instruments that do not match. */
.gm-tpl-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--lm-space-3); }
.gm-tpl-toolbar > :first-child { flex: 1 1 14rem; max-width: 22rem; }
.gm-tpl-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: var(--lm-space-4); margin: 0; padding: 0; list-style: none; }
.gm-tpl-wall__item { display: flex; flex-direction: column; gap: var(--lm-space-2); min-width: 0; }
.gm-tpl-wall__item > .gm-animal { flex: 1; }
.gm-tpl-wall__setup { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--lm-space-2); min-height: 40px; align-content: flex-start; margin: 0; padding-inline: var(--lm-space-2); color: var(--lm-fg-subtle); font-size: 11px; line-height: 1.4; }
.gm-tpl-wall__setup small { flex-basis: 100%; font-size: 11px; }
.gm-tpl-wallpanel:has(input[name="wall"][value="LIVE"]:checked) .gm-tpl-wall__item:not([data-live]),
.gm-tpl-wallpanel:has(input[name="wall"][value="SETUP"]:checked) .gm-tpl-wall__item:not([data-setup]),
.gm-tpl-wallpanel:has(input[name="wall"][value="QUIET"]:checked) .gm-tpl-wall__item:not([data-quiet]) { display: none; }


/* ---------- narrow widths and small touches (round 3) ---------- */
/* a table wider than its card shows a fade at the right edge until it is scrolled to the end, so a
   cut-off column reads as "more this way" (scroll-driven; browsers without it just scroll) */
@keyframes gm-tpl-more {
  0%, 94% { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
  95%, 100% { -webkit-mask-image: none; mask-image: none; }
}
@supports (animation-timeline: scroll()) {
  .gm-tpl .lm-table-container, .gm-tpl .gt-table-scroll, .gm-tpl .gm-tpl-log { animation: gm-tpl-more linear both; animation-timeline: scroll(self inline); }
}
/* a piece of a message that never breaks inside */
.gm-tpl-nb { white-space: nowrap; }
/* a message block breaks after its commas (the markup carries <wbr> there), never inside a token */
.gm-tpl .gt-trade-code, .gm-tpl .gm-code--wrap :is(.lm-code-block__pre code, .lm-code-block__line) { overflow-wrap: break-word; word-break: normal; }
/* a one-line hint under a table that scrolls sideways at narrow widths */
.gm-tpl__scrollhint { display: none; }
@container gm-tpl (max-width: 640px) {
  .gm-tpl__scrollhint { display: block; }
  .gm-tpl-cards--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lm-space-2); }
  .gm-tpl-cards--pair > .lm-card { min-width: 0; padding: var(--lm-space-3) var(--lm-space-4); overflow-wrap: anywhere; }
  /* the endpoint column wraps so the error rate and latency beside it stay in view */
  .gm-tpl .gm-dt--wrap-first .lm-table__cell:first-child { white-space: normal; overflow-wrap: break-word; min-width: 10rem; }
  /* the needs-you tiles go two-up, the way the stat cards do */
  .gm-tpl-attn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gm-tpl-attn__item > .lm-card { padding: var(--lm-space-3) var(--lm-space-4); }
  .gm-tpl-attn__go { font-size: 11px; }
  /* GreenMint's mobile stat grid is two-up; a sparkline would sit on the value at that width */
  .gm-tpl > .lm-stat-grid, .gm-tpl__section > .lm-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gm-tpl .lm-stat-grid .lm-stat__sparkline { display: none; }
  .gm-tpl > .lm-stat-grid > *, .gm-tpl__section > .lm-stat-grid > * { flex: none; }
  :is(.gm-tpl, .gm-tpl__section) > .lm-stat-grid > .lm-stat--card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .gm-tpl .lm-stat-grid .lm-stat--card { padding: var(--lm-space-3) var(--lm-space-4); }
}