/* eve-resources.css — THE SHELF (2026-09-18): the typed resource tiles Eve's
   answers end with, on the popup and on the support form. One sheet for both
   hosts. Each host hands the shelf its own tokens (the deck's --eve-* set, the
   support centre's --sp-* set) so the light theme's remaps reach the tiles
   without a rule of their own — this file names no literal ink or paper.
   js/eve-resources.js draws the DOM; js/eve-storefront.css's bare
   .eve-resource-link rule is overridden here by the two-class tile selector
   (the class stays on the tile so the adapter's document viewer opens PDFs). */

.eve-shelf {
  --shelf-ink: inherit; --shelf-ink2: inherit; --shelf-label: inherit;
  --shelf-line: currentColor; --shelf-surface: transparent; --shelf-red: currentColor;
  --shelf-ui: inherit; --shelf-mono: ui-monospace, monospace;
  display: grid; gap: 8px; margin-top: 14px; max-width: 100%; box-sizing: border-box;
  font-family: var(--shelf-ui); color: var(--shelf-ink);
}
#eve-deck .eve-shelf {
  --shelf-ink: var(--eve-body); --shelf-ink2: var(--eve-muted); --shelf-label: var(--eve-dim2);
  --shelf-line: var(--eve-line); --shelf-surface: var(--eve-panel); --shelf-red: var(--eve-red-hot);
  --shelf-ui: var(--eve-ui); --shelf-mono: var(--eve-mono);
}
.support-page .eve-shelf {
  --shelf-ink: var(--sp-ink); --shelf-ink2: var(--sp-soft); --shelf-label: var(--sp-muted);
  --shelf-line: var(--sp-line-strong); --shelf-surface: var(--sp-surface-2); --shelf-red: var(--sp-accent);
  --shelf-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --shelf-mono: "JetBrains Mono", Consolas, ui-monospace, monospace;
  flex: 1 1 100%; width: 100%; margin-top: 4px;
}
.eve-shelf-eb {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--shelf-mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--shelf-label);
}
.eve-shelf-eb::after { content: ""; flex: 1; height: 1px; background: var(--shelf-line); opacity: .8; }
.eve-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.eve-shelf[data-cols="3"] .eve-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.eve-shelf .eve-tile.eve-resource-link {
  display: grid; grid-template-rows: auto 1fr; gap: 0; margin: 0; padding: 0; min-width: 0;
  border: 1px solid var(--shelf-line); border-radius: 10px; overflow: hidden;
  background: var(--shelf-surface); color: var(--shelf-ink); text-decoration: none;
  font: inherit; font-family: var(--shelf-ui); cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.eve-shelf .eve-tile.eve-resource-link:hover { border-color: var(--shelf-red); transform: translateY(-1px); text-decoration: none; }
.eve-shelf .eve-tile.eve-resource-link:focus-visible { outline: 2px solid var(--shelf-red); outline-offset: 2px; }

/* the picture: a dark stage for whatever stands on it — the product photo, the
   manual cover, or the drawn miniature until (or unless) one arrives */
.eve-tile-vis {
  position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden;
  background: radial-gradient(ellipse 85% 95% at 50% 15%, #101014, #08080a); border-bottom: 1px solid var(--shelf-line);
}
.eve-tile-img { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.eve-tile-img--ready { display: block; }
.eve-tile-vis--cover .eve-tile-img { object-fit: contain; padding: 8px 0 0; box-sizing: border-box; }
.eve-tile-vis--photo .eve-tile-img { object-fit: cover; }
.eve-tile-vis--photo .eve-tile-sheet, .eve-tile-vis--cover .eve-tile-sheet,
.eve-tile-vis--photo::before, .eve-tile-vis--cover::before, .eve-tile-vis--photo::after, .eve-tile-vis--cover::after { display: none; }
/* the document miniature — the product page's own cut-sheet artwork, scaled:
   a white sheet, the red FENIEX word, the document kind, three grey lines */
.eve-tile-sheet {
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: 54%; aspect-ratio: 7 / 9;
  background: #f2f2ef; border-radius: 2px; box-shadow: 0 8px 22px rgba(0, 0, 0, .65); padding: 7px 8px; box-sizing: border-box;
  display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: space-between; gap: 4px 4px;
}
.eve-tile-sheet b { font-family: "Michroma", var(--shelf-ui); font-weight: 400; font-size: 7.5px; color: #d0311c; letter-spacing: .02em; }
.eve-tile-sheet i { font-family: var(--shelf-mono); font-style: normal; font-size: 7px; color: #8a8a84; white-space: nowrap; }
.eve-tile-sheet::before, .eve-tile-sheet::after {
  content: ""; flex: 0 0 100%; height: 3px; border-radius: 2px; background: #cfcfc9;
}
.eve-tile-sheet::before { margin-top: 26px; }
.eve-tile-sheet::after { flex-basis: 60%; }
/* the product miniature: a bar of modules on the stage, until the photo lands */
.eve-tile-vis[data-kind="product"]::before, .eve-tile-vis[data-kind="dealer"]::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: 38%; height: 24%; border-radius: 6px;
  background: linear-gradient(#26262b, #17171b); border: 1px solid #3a3a40;
}
.eve-tile-vis[data-kind="product"]::after {
  content: ""; position: absolute; left: 20%; right: 20%; top: 46%; height: 8%; border-radius: 2px;
  background: repeating-linear-gradient(90deg, #ffb300 0 10%, transparent 10% 13%, #ff3b1f 13% 23%, transparent 23% 26%, #3c7dff 26% 36%, transparent 36% 39%, #ffffff 39% 49%, transparent 49% 52%, #39d353 52% 62%, transparent 62% 65%, #ffb300 65% 75%, transparent 75% 78%, #ff3b1f 78% 88%, transparent 88% 91%, #3c7dff 91% 100%);
}
/* the software miniature: a small monitor */
.eve-tile-vis[data-kind="software"]::before {
  content: ""; position: absolute; left: 18%; right: 18%; top: 14%; bottom: 18%; border-radius: 3px;
  background: #141416; border: 1px solid #333; box-shadow: inset 0 0 0 4px #141416, inset 0 0 0 5px #2a2a2e;
}
.eve-tile-vis[data-kind="software"]::after {
  content: ""; position: absolute; left: 28%; right: 28%; top: 34%; height: 4px; border-radius: 1px;
  background: linear-gradient(90deg, #ee3a23 0 22%, #2a2a2e 22% 52%, #3c7dff 52% 68%, #2a2a2e 68% 100%);
}
/* the page miniature: a small window with the red mark */
.eve-tile-vis[data-kind="page"]::before {
  content: ""; position: absolute; left: 16%; right: 16%; top: 14%; bottom: 0; border-radius: 3px 3px 0 0;
  background: linear-gradient(#0f0f11 0 12%, #ffffff 12% 100%);
}
.eve-tile-vis[data-kind="page"]::after {
  content: ""; position: absolute; left: 20%; top: 17%; width: 12px; height: 3px; border-radius: 1px; background: #d0311c;
}

.eve-tile-txt { display: grid; gap: 2px; align-content: start; padding: 8px 10px 10px; min-width: 0; }
.eve-tile-k { font-family: var(--shelf-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--shelf-red); }
.eve-tile-t { font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--shelf-ink); overflow-wrap: anywhere; }
.eve-tile-m { font-size: 11px; line-height: 1.35; color: var(--shelf-ink2); overflow-wrap: anywhere; }
.eve-tile-m:empty { display: none; }
.eve-tile-a { margin-top: 5px; font-size: 11px; font-weight: 600; color: var(--shelf-red); }
.eve-tile-a::after { content: " \2192"; }

/* the support form: 16px body type, so the tiles grow a step */
.support-page .eve-tile-t { font-size: 13.5px; }
.support-page .eve-tile-m { font-size: 12px; }
.support-page .eve-tile-a { font-size: 12px; }

/* rows under 400 px (Concept B): the same data in one column, thumbnail beside */
@media (max-width: 400px) {
  .eve-shelf .eve-tiles, .eve-shelf[data-cols="3"] .eve-tiles { grid-template-columns: 1fr; gap: 6px; }
  .eve-shelf .eve-tile.eve-resource-link { grid-template-rows: none; grid-template-columns: 64px 1fr; align-items: center; }
  .eve-tile-vis { aspect-ratio: auto; height: 50px; border-bottom: 0; border-right: 1px solid var(--shelf-line); }
  .eve-tile-sheet { width: 46%; top: 5px; padding: 3px 4px; box-shadow: 0 3px 8px rgba(0, 0, 0, .6); }
  .eve-tile-sheet b { font-size: 4px; } .eve-tile-sheet i { display: none; }
  .eve-tile-sheet::before { margin-top: 3px; height: 2px; } .eve-tile-sheet::after { height: 2px; }
  .eve-tile-txt { padding: 7px 10px; }
  .eve-tile-a { margin-top: 2px; }
}
@media (min-width: 401px) and (max-width: 640px) {
  .eve-shelf[data-cols="3"] .eve-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .eve-shelf .eve-tile.eve-resource-link, .eve-shelf .eve-tile.eve-resource-link:hover { transition: none; transform: none; }
}
@media (forced-colors: active) {
  .eve-shelf .eve-tile.eve-resource-link { border-color: CanvasText; }
  .eve-shelf .eve-tile.eve-resource-link:focus-visible { outline: 2px solid Highlight; }
}