/* Magpie's shared look: the design tokens and the mark, in one file so
every page draws from the same place. Load it before a page's own
styles: */
:root{
/* Design tokens (god-tier plan, Stage 3). Every colour, and the one type
family, in one place. The look Nick chose on 13 Oct 2026: near-black ink,
ONE accent (the blue-green of a magpie's wing), light type, no emoji. The
page is pure white with cool grey hairlines and wash (Nick, 14 Oct 2026:
the warm cream "makes it feel odd and dirty", so no cream or beige
anywhere in the app). The older names below are kept as aliases so every
rule already written follows the palette. */
--paper:#fff;--sheet:#fff;--ink:#14181b;--ink-2:#4c5053;--ink-3:#686c6e;
--line:#e1e4e7;--wash:#f3f5f6;--wing:#0b6b78;--wing-deep:#095a65;--wing-soft:#e2eff0;--bad:#a8281e;
--ease:cubic-bezier(.19,1,.22,1);
--cloud:var(--wash);--grey:var(--ink-2);--teal:var(--wing);--blue:var(--wing);--violet:var(--wing);--green:var(--wing);--red:var(--bad)}
/* the mark: one picture, /magpie-mark.svg, the word with one tail feather
under it:
font-size sets how big it is. The picture is cut tight to the ink, 3.048em
wide and 1.1646em tall, so its letters come out the size "magpie" would be
in type at that size, with the baseline .6954em below the picture's top. */
/* The feather needs at least a 16px type size; below that use the word alone. */
/* If the picture does not arrive the browser writes the alt word in its
place at this font-size, too big for the box: Chrome cuts it in half,
Safari leaves the box empty. font-size-adjust draws those letters at about
six tenths of the size and leaves the em alone, so the box and the picture
do not change. */
.wordmark{display:block;font-size:23px;width:3.048em;height:1.1646em;font-size-adjust:.3}
/* Standing alone above a card (sign in, forgot, reset, join). To centre the
mark, centre the word, not the picture: the feather runs on past the e, so
the word's middle is .058em left of the picture's. The margins leave the
baseline 51px below the top of .login-head, where the text mark had it. */
.login-head .wordmark{font-size:44px;margin:20.4px 0 3.4px;position:relative;left:.058em}
/* In the app's top bar the margins do the same job: the baseline, and the
left edge of the m, sit where the text mark had them. */
#topbar .wordmark{margin:3px 0 0 .07em}
font-size sets how big it is. The picture is cut tight to the ink, 3.048em
wide and 1.1646em tall, so its letters come out the size "magpie" would be
in type at that size, with the baseline .6954em below the picture's top. */
/* The feather needs at least a 16px type size; below that use the word alone. */
/* If the picture does not arrive the browser writes the alt word in its
place at this font-size, too big for the box: Chrome cuts it in half,
Safari leaves the box empty. font-size-adjust draws those letters at about
six tenths of the size and leaves the em alone, so the box and the picture
do not change. */
.wordmark{display:block;font-size:23px;width:3.048em;height:1.1646em;font-size-adjust:.3}
/* Standing alone above a card (sign in, forgot, reset, join). To centre the
mark, centre the word, not the picture: the feather runs on past the e, so
the word's middle is .058em left of the picture's. The margins leave the
baseline 51px below the top of .login-head, where the text mark had it. */
.login-head .wordmark{font-size:44px;margin:20.4px 0 3.4px;position:relative;left:.058em}
/* In the app's top bar the margins do the same job: the baseline, and the
left edge of the m, sit where the text mark had them. */
#topbar .wordmark{margin:3px 0 0 .07em}