/* Starpath Type styling — family palettes, motif tile, family tag. Transcribed from Wayfinder/docs/design/mock-ups/agent/starpath-test.html.
   Usage: <div class="fam-sky"> <span class="tile sky"> + Starpath.motifSvg(code) </span> </div>
   The family class sets the --f* variables the motif SVG classes (.w .a .l .d .as) read. Trail's yellow is the one non-kit colour, as in the app mock-up. */
.fam-sky { --f50: var(--p50); --f100: var(--p100); --f200: var(--p200); --f600: var(--p600); --f800: var(--p800); --fa: var(--p400); }
.fam-sea { --f50: var(--t50); --f100: var(--t200); --f200: var(--t200); --f600: var(--t600); --f800: var(--t800); --fa: var(--t400); }
.fam-harbour { --f50: var(--sk50); --f100: #a2d9fd; --f200: #a2d9fd; --f600: var(--sk600); --f800: #003f5f; --fa: var(--sk400); }
.fam-trail { --f50: #fff8d6; --f100: #ffe98a; --f200: #ffe270; --f600: #ffc81f; --f800: #6b4c00; --fa: #ffc81f; --fon: #4a3400; }

.tile { flex: none; display: grid; place-items: center; width: 132px; height: 132px; border: 2px solid var(--f800); border-bottom-width: 7px; border-radius: 20px; color: var(--f600); background-color: #fff; }
.tile.sky { background-image: radial-gradient(var(--f200) 1.3px, transparent 1.4px); background-size: 14px 14px; }
.tile.sea { background-image: repeating-radial-gradient(circle at 50% 120%, transparent 0 9px, var(--f100) 9px 10.5px); }
.tile.harbour { background-image: linear-gradient(var(--f100) 1px, transparent 1px), linear-gradient(90deg, var(--f100) 1px, transparent 1px); background-size: 14px 14px; }
.tile.trail { background-image: repeating-linear-gradient(-45deg, transparent 0 9px, var(--f100) 9px 10.5px); }
.tile svg { width: 84px; height: 84px; fill: none; stroke: var(--f800); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tile svg .w { fill: #fff; } .tile svg .a { fill: var(--fa); } .tile svg .l { fill: var(--f100); } .tile svg .d { fill: var(--f800); } .tile svg .as { stroke: var(--fa); }
.ftag { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border: 1.5px solid var(--f800); border-bottom-width: 3px; border-radius: 7px; background: #fff; font: 700 10px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--f800); }

/* Maya's portrait ring (the app's .wf-maya-big): use <span class="mring"><img src="_assets/maya/<look>.svg" alt=""></span>.
   The grid/dots/stripes ground is inside the SVG and changes with her look. Size it with width/height on .mring. */
.mring { display: block; width: 160px; height: 160px; border: 2.5px solid var(--p800); border-bottom-width: 4px; border-radius: 50%; background: var(--p200); overflow: hidden; }
.mring img { width: 100%; height: 100%; }