/* ═══════════════════════════════════════════════════════════════════════════════
   nm-tiles.css — the Pathways tile, shared (4 Oct 2026).
   One set of rules for the portal's tiles and the self-test's five (Jean: "make them the same
   style as the tiles in the portal"), so the two cannot drift. Colours come from
   /assets/css/nm-theme.css, light and dark. Markup:
     <div class="tiles">
       <button class="tile"> [<span class="badge [attn|done]">…</span>]
         <span class="strip">…nmMosaicStrip…</span><span class="ticon"><svg 22×22 …></span>
         <h3>Title</h3><div class="summary">One line</div><div class="go">Open →</div>
       </button>
     </div>
   ═══════════════════════════════════════════════════════════════════════════════ */
/* ── Tiles (get_my_portal_v2 → tiles[]) ─────────────────────────────────────
   Two looks, and they mean different things:
     available   → a real destination, pink rule, hover lift
     not yet     → shown, muted, with the server's locked_reason; no control at all
   A third state, "not yours", is NOT a look: the server omits those tiles entirely and the
   offer lives once, under "Other things we offer". */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:600px){.tiles{grid-template-columns:1fr}}
/* A hairline. The 4px pink rule was on every tile, and a colour on everything says
   nothing; the hierarchy is the hero, then the one thing to do, then these. */
.tile{display:flex;flex-direction:column;gap:5px;background:var(--white);border:1px solid var(--border);
  border-radius:14px;padding:18px 18px 16px;text-decoration:none;color:inherit;text-align:left;font:inherit;cursor:pointer;
  transition:transform .1s,box-shadow .15s;position:relative}
.tile:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.14)}
/* The strip down the left edge: eight pixels of the tile's own band, with its gaps, a
   little inside the border so it reads as a brace line rather than an edge. */
.tile{padding-left:30px}
.tile .strip{position:absolute;left:11px;top:14px;bottom:14px;width:8px;pointer-events:none}
.tile .strip svg{width:100%;height:100%;display:block}
.tile.locked .strip{opacity:.35}

.tile.locked{cursor:default;background:var(--light)}
.tile.locked:hover{transform:none;box-shadow:none}
.tile h3{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:19px;color:var(--dark)}
.ticon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;
  background:var(--pink-10);color:var(--pink-text);margin-bottom:6px;flex-shrink:0}
.tile.locked .ticon{background:var(--white);color:var(--muted)}
.tile.locked h3{color:var(--mid)}
.tile .summary{font-size:13px;color:var(--mid)}
.tile .go{margin-top:6px;font-family:var(--font-head);font-size:12px;font-weight:700;color:var(--pink-text)}
.lockwhy{font-size:12px;color:var(--amber);background:var(--amber-10);border-radius:7px;padding:7px 10px;margin-top:4px;line-height:1.55}
.tile .badge{position:absolute;top:12px;right:12px;font-family:var(--font-head);font-size:10px;font-weight:800;letter-spacing:.4px;
  text-transform:uppercase;padding:3px 9px;border-radius:20px;background:var(--light);color:var(--muted)}
.tile .badge.done{background:var(--green-10);color:var(--green)}
.tile .badge.attn{background:var(--pink-btn,#E6005C);color:#fff}
.tile .badge.mail{display:inline-flex;align-items:center;gap:5px;animation:nm-mail 1.1s steps(1,end) infinite}
@keyframes nm-mail{50%{background:transparent;color:var(--pink-text);box-shadow:inset 0 0 0 1.5px var(--pink)}}
@media (prefers-reduced-motion:reduce){.tile .badge.mail{animation:none}}
/* keyboard focus (added with the move; the portal had none) */
.tile:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.tile.locked:focus-visible{outline-color:var(--muted)}