/* ═══════════════════════════════════════════════════════════════════════════════
   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)}
/* the learner courses (3 Nov 2026), as portal tiles since 9 Nov 2026 (Jean: "in line with the design style of the rest of
   Pathways"): the strip, the icon, the name and the sentence, then Start or Carry on and My plan. Two ways in, so the tile
   itself does not lift. Headings in Fraunces, as on every Pathways tile (Jean, 9 Nov 2026: "keep what is the predominant
   rule in Pathways"). */
.ln-card{cursor:default}
.ln-card:hover{transform:none;box-shadow:none}
.tile h3.ln-t{line-height:1.2}
.ln-t .badge{position:static;display:inline-block;vertical-align:middle;margin-left:6px;font-family:'Arimo',Arial,sans-serif;font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:var(--light);color:var(--mid);border:1px solid var(--border)}
.ln-s{line-height:1.5}
.ln-p{font-size:13px;font-weight:700;color:var(--dark);margin-top:6px}
.ln-bar{height:6px;border-radius:9px;background:var(--light);overflow:hidden;max-width:320px}
.ln-bar i{display:block;height:100%;background:var(--pink);border-radius:9px}
.ln-b{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
/* Tell a friend (nm-share.js, 2 Nov 2026): a quiet card under the tiles */
.pw-share{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:2px 18px 14px;margin-top:16px;color:var(--dark)}
.pw-share[hidden]{display:none}
.pw-share .nms{border-top:0;margin-top:0}
.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)}

/* a course's plan, from its card (8 Nov 2026): a plain, large link under the course's own button */
.ln-plan{display:inline-flex;align-items:center;min-height:44px;margin-top:2px;font-size:14px;font-weight:700;color:var(--pink-text);text-decoration:none}
.ln-plan:hover,.ln-plan:focus-visible{text-decoration:underline}