/**
 * @file offer-map.css
 * @author Jouni Miikki
 * SPDX-License-Identifier: MIT
 * @description The map of offers, in three flat views: columns (one per need, as many as fit at 10rem),
 *   the grid (a row per agent, a column per need, scrolling inside the map when the main is narrow)
 *   and blocks (one per need, wider the more it holds). An offer is a tile: a framed link on the card
 *   ground with its title, a small "opens elsewhere" mark and its agent, the frame and the mark coral
 *   under the pointer; a line tile in the grid and a compact tile in a block are smaller. A column's
 *   head carries a typewriter count. Drawn only by the Offers page; moved here unchanged with its
 *   class names (UI consolidation phase 5, a move). The tile's frame reads the shape tokens.
 *   Drawn as markup by views/profile/offers/map-page.js.
 *   NOTE: this file must be linked in spa.html.
 *   Drawn now by components/OfferMap.js under its own names (.offer-map-*); the op- rules stay for the
 *   design lab's catalogue until its pass.
 * @version-history
 *   v1.2.0 — 2026-09-27 — A pickable tree's nodes show the hand and fade under the pointer again, as on main.
 *   v1.1.0 — 2026-09-26 — The OfferMap component's rules (.offer-map-*), the same values, with the
 *     grid's column cuts main had (n1…n6; the previous branch had lost them, so the grid stood in one
 *     column) and the block's growth by its count in place of the inline --op-n (page group G6).
 *   v1.0.0 — 2026-09-25 — Moved out of offers-poster.css (UI consolidation phase 5, a move).
 */

.op-map { overflow-x: auto; }
.op-tile { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: .4rem .6rem .45rem; border: var(--shape-frame) solid var(--shape-frame-colour); background: var(--card-bg); color: var(--text); text-decoration: none; font-family: var(--font-showroom-body); font-weight: 700; font-size: .78rem; line-height: 1.3; }
.op-tile:hover { border-color: var(--accent); color: var(--text); }
.op-tile:hover .op-tile-out { color: var(--accent); }
.op-tile-t { display: flex; align-items: flex-start; gap: .5rem; min-width: 0; }
.op-tile-t > span { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.op-tile-out { flex: none; margin-top: 2px; color: var(--text-dim); }
.op-tile .op-agent { font-size: .68rem; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-tile--line { padding: .25rem .5rem; font-size: .74rem; }
.op-tile--line .op-tile-t { align-items: center; }
.op-tile--line .op-tile-t > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-tile--compact { padding: .3rem .5rem; font-size: .74rem; }
.op-col-h { display: flex; align-items: baseline; gap: .5rem; padding: 0 0 .25rem; }
.op-col-h > span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.op-col-h em { font-family: var(--font-mono); font-size: .7rem; font-style: normal; letter-spacing: 0; text-transform: none; color: var(--text-dim); }
.op-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 1rem; }
.op-col { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.op-matrix { display: grid; gap: 0 .75rem; align-items: stretch; min-width: 56rem; }
.op-mx-agent, .op-mx-cell { display: flex; flex-direction: column; justify-content: center; gap: .25rem; min-width: 0; padding: .35rem 0; border-bottom: 1px solid var(--border); }
.op-mx-head { display: flex; flex-direction: row; justify-content: center; align-items: baseline; gap: .5rem; min-width: 0; padding: 0 0 .25rem; }
.op-mx-head > span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.op-mx-head em { font-family: var(--font-mono); font-size: .7rem; font-style: normal; letter-spacing: 0; text-transform: none; color: var(--text-dim); }
.op-mx-agent .op-agent { color: var(--text); font-weight: 500; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-mx-agent--off .op-agent { color: var(--text-dim); }
.op-blocks { display: flex; flex-wrap: wrap; gap: 1rem; }
.op-block { flex: var(--op-n, 1) 1 16rem; max-width: 100%; display: flex; flex-direction: column; gap: .6rem; min-width: 0; margin: 0; padding: .6rem .75rem .75rem; overflow: visible; }
.op-block-tiles { display: flex; flex-wrap: wrap; gap: .4rem; align-content: flex-start; }
.op-block-tiles .op-tile { flex: 0 1 auto; max-width: 100%; }

/* ── The OfferMap component (components/OfferMap.js, page group G6): the same values under the
      component's own names. The op- rules above stay while the design lab's catalogue
      (views/design-lab/demos-settings.js) still writes them; the Offers page no longer does. ── */
.offer-map-scroll { overflow-x: auto; }
/* A tree whose offers can be picked: a node shows the hand and fades a little under the pointer
   (main's .of-mapwrap--clickable .mmd .node). */
.offer-map-tree--pick .mermaid-diagram .node { cursor: pointer; }
.offer-map-tree--pick .mermaid-diagram .node:hover { opacity: 0.82; }
.offer-map-tile { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: .4rem .6rem .45rem; border: var(--shape-frame) solid var(--shape-frame-colour); background: var(--card-bg); color: var(--text); text-decoration: none; font-family: var(--font-showroom-body); font-weight: 700; font-size: .78rem; line-height: 1.3; }
.offer-map-tile:hover { border-color: var(--accent); color: var(--text); }
.offer-map-tile:hover .offer-map-out { color: var(--accent); }
.offer-map-tile-t { display: flex; align-items: flex-start; gap: .5rem; min-width: 0; }
.offer-map-tile-t > span { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.offer-map-out { flex: none; margin-top: 2px; color: var(--text-dim); }
.offer-map-agent { display: flex; min-width: 0; }
.offer-map-agent > .poster-chip { font-size: .68rem; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.offer-map-tile--line { padding: .25rem .5rem; font-size: .74rem; }
.offer-map-tile--line .offer-map-tile-t { align-items: center; }
.offer-map-tile--line .offer-map-tile-t > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.offer-map-tile--compact { padding: .3rem .5rem; font-size: .74rem; }
.offer-map-head { display: flex; align-items: baseline; gap: .5rem; padding: 0 0 .25rem; }
.offer-map-head > span, .offer-map-grid-head > span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.offer-map-head em, .offer-map-grid-head em { font-family: var(--font-mono); font-size: .7rem; font-style: normal; letter-spacing: 0; text-transform: none; color: var(--text-dim); }
.offer-map-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 1rem; }
.offer-map-col { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
/* The grid keeps a width its cells can be read at and scrolls inside its box when the page is
   narrower; a column per need after the agents' column (the cuts main had, n1…n6). */
.offer-map-grid { display: grid; gap: 0 .75rem; align-items: stretch; min-width: 56rem; }
.offer-map-grid--n1 { grid-template-columns: minmax(8rem, 10rem) repeat(1, minmax(0, 1fr)); }
.offer-map-grid--n2 { grid-template-columns: minmax(8rem, 10rem) repeat(2, minmax(0, 1fr)); }
.offer-map-grid--n3 { grid-template-columns: minmax(8rem, 10rem) repeat(3, minmax(0, 1fr)); }
.offer-map-grid--n4 { grid-template-columns: minmax(8rem, 10rem) repeat(4, minmax(0, 1fr)); }
.offer-map-grid--n5 { grid-template-columns: minmax(8rem, 10rem) repeat(5, minmax(0, 1fr)); }
.offer-map-grid--n6 { grid-template-columns: minmax(8rem, 10rem) repeat(6, minmax(0, 1fr)); }
.offer-map-grid-agent, .offer-map-grid-cell { display: flex; flex-direction: column; justify-content: center; gap: .25rem; min-width: 0; padding: .35rem 0; border-bottom: 1px solid var(--border); }
.offer-map-grid-head { display: flex; flex-direction: row; justify-content: center; align-items: baseline; gap: .5rem; min-width: 0; padding: 0 0 .25rem; }
.offer-map-grid-agent > .poster-chip { color: var(--text); font-weight: 500; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.offer-map-grid-agent--off > .poster-chip { color: var(--text-dim); }
/* A block per need, wider the more it holds (its count, up to twelve). */
.offer-map-blocks { display: flex; flex-wrap: wrap; gap: 1rem; }
.offer-map-block { flex: 1 1 16rem; max-width: 100%; display: flex; flex-direction: column; gap: .6rem; min-width: 0; margin: 0; padding: .6rem .75rem .75rem; overflow: visible; }
.offer-map-block--n2 { flex-grow: 2; } .offer-map-block--n3 { flex-grow: 3; } .offer-map-block--n4 { flex-grow: 4; }
.offer-map-block--n5 { flex-grow: 5; } .offer-map-block--n6 { flex-grow: 6; } .offer-map-block--n7 { flex-grow: 7; }
.offer-map-block--n8 { flex-grow: 8; } .offer-map-block--n9 { flex-grow: 9; } .offer-map-block--n10 { flex-grow: 10; }
.offer-map-block--n11 { flex-grow: 11; } .offer-map-block--n12 { flex-grow: 12; }
.offer-map-block-tiles { display: flex; flex-wrap: wrap; gap: .4rem; align-content: flex-start; }
.offer-map-block-tiles .offer-map-tile { flex: 0 1 auto; max-width: 100%; }