/* Quiet, contextual navigation shared by public tools, games and business pages.
 * Two plain tiles: a duotone glyph in a tinted, lit well, a title, one line, an arrow chip that fills on intent.
 * Each destination keeps its own tint so the four sections read apart at a glance; stroke colour is mixed toward the page ink for contrast in both themes. */
.discovery{margin-block:18px 0;padding-block:16px;border-block:1px solid var(--color-rule)}
.discovery-label{margin:0 0 10px;color:var(--color-muted);font-size:var(--text-sm);font-weight:600}
#main>.discovery:first-child{margin-top:0;border-top:0}
.discovery-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.discovery-link{--tint:var(--color-accent);position:relative;display:flex;align-items:center;gap:16px;min-width:0;min-height:76px;padding:12px 56px 12px 14px;color:var(--color-ink);text-decoration:none;border:1px solid var(--color-rule);border-radius:var(--radius-md);background:linear-gradient(180deg,var(--color-sheen),transparent 70%),var(--color-surface);box-shadow:inset 0 1px 0 var(--color-rim);overflow:clip;isolation:isolate;transition:border-color var(--dur-short) var(--ease-out),background-color var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out)}
.discovery-link[data-kind=games]{--tint:var(--color-art-purple)}
.discovery-link[data-kind=tools]{--tint:var(--color-art-blue)}
.discovery-link[data-kind=courses]{--tint:var(--color-art-orange)}
.discovery-link::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(90% 140% at 0% 50%,color-mix(in srgb,var(--tint) 16%,transparent),transparent 70%);opacity:.7;transition:opacity var(--dur-short) var(--ease-out)}
.discovery-glyph{position:relative;display:grid;place-items:center;width:52px;height:52px;flex:0 0 52px;border-radius:16px;color:color-mix(in srgb,var(--tint) 62%,var(--color-ink));border:1px solid color-mix(in srgb,var(--tint) 42%,var(--color-rule));background:radial-gradient(120% 120% at 18% 8%,color-mix(in srgb,var(--tint) 38%,transparent),transparent 62%),linear-gradient(160deg,var(--color-raised),var(--color-well));box-shadow:inset 0 1px 0 var(--color-rim),0 10px 20px -12px color-mix(in srgb,var(--tint) 70%,#000);transition:transform var(--dur-short) var(--ease-out),box-shadow var(--dur-short) var(--ease-out)}
.discovery-glyph::after{content:'';position:absolute;inset:3px;border-radius:13px;border:1px solid color-mix(in srgb,var(--tint) 18%,transparent);pointer-events:none}
.discovery-glyph svg{position:relative;width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.discovery-glyph .tone{fill-opacity:.22;transition:fill-opacity var(--dur-short) var(--ease-out)}
.discovery-link>span{min-width:0;display:grid;gap:3px}
.discovery-link strong{font-size:.94rem;font-weight:600;line-height:1.3}
.discovery-link span span{color:var(--color-muted);font-size:.78rem;line-height:1.45}
.discovery-link::after{content:'\2192';position:absolute;right:14px;top:50%;display:grid;place-items:center;width:30px;height:30px;transform:translateY(-50%);border:1px solid var(--color-rule);border-radius:50%;color:var(--color-subtle);font-size:.9rem;line-height:1;transition:transform var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out),background-color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out)}
.discovery-link:hover{border-color:color-mix(in srgb,var(--tint) 55%,var(--color-rule));background-color:var(--color-raised)}
.discovery-link:hover::before{opacity:1}
.discovery-link:hover .discovery-glyph{transform:translateY(-2px) rotate(-3deg);box-shadow:inset 0 1px 0 var(--color-rim),0 14px 24px -12px color-mix(in srgb,var(--tint) 85%,#000)}
.discovery-link:hover .discovery-glyph .tone{fill-opacity:.42}
.discovery-link:hover::after{color:var(--color-accent-ink);background:var(--color-accent);border-color:var(--color-accent);transform:translate(3px,-50%)}
.discovery-link:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
#main>.discovery:last-child{margin-block:32px 40px}
@media(max-width:700px){.discovery-links{grid-template-columns:1fr;gap:8px}.discovery{padding-block:12px}.discovery-link{gap:14px;min-height:68px}.discovery-link strong{font-size:.9rem}
 /* At the top of a page the band yields to the task: titles only, smaller glyph. The closing band keeps its descriptions. */
 #main>.discovery:first-child .discovery-link{min-height:56px;padding-block:6px}#main>.discovery:first-child .discovery-glyph{width:40px;height:40px;flex-basis:40px;border-radius:13px}#main>.discovery:first-child .discovery-glyph::after{inset:2px;border-radius:10px}#main>.discovery:first-child .discovery-glyph svg{width:22px;height:22px}#main>.discovery:first-child .discovery-link span span{display:none}}
@media(prefers-reduced-motion:reduce){.discovery-link,.discovery-glyph,.discovery-glyph .tone,.discovery-link::before,.discovery-link::after{transition:none}.discovery-link:hover .discovery-glyph{transform:none}.discovery-link:hover::after{transform:translateY(-50%)}}