/* Militant Goose Developers — brand layer. Pack 1.4.1.
   Tokens plus the .mgd- component system. Reference this file; do not fork it. */
@import "tokens.css";

/* Archivo, shipped by the pack rather than fetched from a third party.
 *
 * Until 1.3.0 the pack named Archivo in --mgd-font and shipped no font, so it
 * rendered only where the viewer already had it installed and fell back to
 * Helvetica everywhere else — silently, which is the part that mattered.
 *
 * Paths are relative to THIS file, so a consumer vendoring the pack must copy
 * dist/fonts/ alongside dist/mgd-brand.css. See docs/consuming.md.
 *
 * Variable on the wght axis, so `font-weight: 100 900` here covers all five
 * weights in brand.json typography.faces.primary.weights from one 34 KB file.
 * Static cuts would be five requests and five files to keep in step.
 *
 * Two subsets, each with its own unicode-range: a browser downloads latin-ext
 * only if the text on the page actually needs a glyph from that range, so the
 * second file costs nothing until a name or a currency symbol needs it.
 *
 * font-display: swap — the text is readable immediately in the fallback and
 * reflows once when Archivo arrives. Blocking on a webfont is the worse trade,
 * and the fallback stack is metrically close enough that the reflow is small.
 *
 * OFL-1.1. dist/fonts/OFL.txt travels with these files; do not separate them.
 */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/archivo-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/archivo-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

*, *::before, *::after { box-sizing: border-box; }

body.mgd {
  margin: 0;
  background: var(--mgd-ground);
  color: var(--mgd-ink);
  font-family: var(--mgd-font);
  font-size: var(--mgd-size-body);
  line-height: 1.55;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--mgd-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* Not --mgd-red. A link is body-size text, and the base red measures 3.76:1 on
   the ground and 3.95:1 on ink — both under the 4.5:1 AA needs for normal text.
   The pack shipped the base red here from 1.0.0, so every consumer with a link
   inherited it. --mgd-red-600 is 4.97 on the ground; --mgd-red-on-ink is 4.91. */
a:hover { color: var(--mgd-red-600); }
/* Left as the base red deliberately. Ground-on-red is 3.76:1 and no colour in
   the palette clears AA on the red, so the choice is this or no red selection at
   all. A selection is transient, user-invoked, and the same text is legible the
   instant it is deselected — which is not true of a link. */
::selection { background: var(--mgd-red); color: var(--mgd-ground); }
:focus-visible { outline: var(--mgd-rule) solid var(--mgd-red); outline-offset: 2px; }

/* Type */
.mgd-display { font-size: var(--mgd-size-display); font-weight: 800; letter-spacing: var(--mgd-track-display); line-height: 1; margin: 0; }
.mgd-h1 { font-size: var(--mgd-size-h1); font-weight: 800; letter-spacing: var(--mgd-track-display); line-height: 1.05; margin: 0; }
.mgd-h2 { font-size: var(--mgd-size-h2); font-weight: 700; letter-spacing: var(--mgd-track-h2); line-height: 1.15; margin: 0; }
.mgd-h3 { font-size: var(--mgd-size-h3); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; margin: 0; }
.mgd-label { font-size: var(--mgd-size-label); font-weight: 600; letter-spacing: var(--mgd-track-label); text-transform: uppercase; color: var(--mgd-muted); }
.mgd-on-ink .mgd-label, .mgd-label--on-ink { color: var(--mgd-muted-on-ink); }

/* Grounds.
   The body.mgd base rule above is (0,1,1), so a bare .mgd-on-ink at (0,1,0) can
   never beat it on a body element and no source order fixes that. The body-scoped
   pairs below are what make a dark page possible for a consumer. Do not remove
   them and do not "simplify" them back to the single-class form. */
.mgd-on-ink { background: var(--mgd-ink); color: var(--mgd-ground); }
.mgd-on-red { background: var(--mgd-red); color: var(--mgd-ground); }
body.mgd.mgd-on-ink { background: var(--mgd-ink); color: var(--mgd-ground); }
body.mgd.mgd-on-red { background: var(--mgd-red); color: var(--mgd-ground); }
.mgd-on-ink a, .mgd-on-red a { color: var(--mgd-ground); }
.mgd-on-ink a:hover { color: var(--mgd-red-on-ink); }
.mgd-on-red a:hover { color: var(--mgd-ink); }
.mgd-surface { background: var(--mgd-white); border: var(--mgd-rule) solid var(--mgd-ink); }

/* The components, on an ink ground.
   brand.json calls ink the default ground (logo.variants.onInk: "use this most
   of the time") and until 1.4.0 exactly two things followed it there:
   .mgd-label, and .mgd-rule if you remembered the --on-ink modifier. Everything
   else hard-coded the light-ground value, so a dark page got an ink rule on an
   ink ground (invisible), a secondary button with ink text on ink (invisible),
   and a white card punched into the page like a lightbox.

   Scoped to a .mgd-on-ink ancestor rather than given --on-ink modifiers,
   because that is how .mgd-label already does it: a component that moves
   between a light band and a dark one should not need its class list rewritten.

   A card on ink is BORDER-ONLY, not a dark fill. The palette has no dark
   surface value and inventing one here would be a fork of the pack in the one
   file that cannot fork it. Border-only is also more correct for a system whose
   rules are 2px and whose radius is zero. */
.mgd-on-ink .mgd-rule { background: var(--mgd-ground); }
.mgd-on-ink .mgd-btn { border-color: var(--mgd-ground); }
.mgd-on-ink .mgd-btn--secondary { color: var(--mgd-ground); }
.mgd-on-ink .mgd-btn--secondary:hover { background: var(--mgd-ground); color: var(--mgd-ink); }
.mgd-on-ink .mgd-btn:disabled { color: var(--mgd-muted-on-ink); border-color: var(--mgd-hairline-on-ink); }
/* --primary keeps its red fill on either ground, so it is not listed: the red
   is the point of it, and --mgd-ground text on the red is the same 3.76:1
   either way. That pair is display-and-chrome only, which a button label at
   13px uppercase tracked is — see colour.accessibility.redSurfaceRule. */
.mgd-on-ink .mgd-surface { background: transparent; border-color: var(--mgd-ground); }
.mgd-on-ink .mgd-card { background: transparent; border-color: var(--mgd-hairline-on-ink); }
.mgd-on-ink .mgd-card__kicker { color: var(--mgd-muted-on-ink); }
.mgd-on-ink .mgd-grid { background: var(--mgd-ground); }
.mgd-on-ink .mgd-grid > * { background: var(--mgd-ink); }

/* Rules */
.mgd-rule { height: var(--mgd-rule); background: var(--mgd-ink); border: 0; margin: 0; }
.mgd-rule--on-ink { background: var(--mgd-ground); }

/* The prompt lockup */
.mgd-lockup { display: flex; align-items: center; gap: 0.22em; font-weight: 800; letter-spacing: var(--mgd-track-display); line-height: 1; }
.mgd-lockup__prompt { color: var(--mgd-red); }
.mgd-lockup__word { color: currentColor; }
.mgd-lockup__cursor { display: inline-block; width: 0.36em; height: 0.8em; background: var(--mgd-red); }
.mgd-lockup--sm { font-size: 24px; }
.mgd-lockup--md { font-size: 40px; }
.mgd-lockup--lg { font-size: var(--mgd-size-display); }

/* Actions */
.mgd-btn {
  display: inline-flex; align-items: center; gap: var(--mgd-space-2);
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: var(--mgd-space-3) var(--mgd-space-4);
  border: var(--mgd-rule) solid var(--mgd-ink); border-radius: var(--mgd-radius);
  text-decoration: none; cursor: pointer; text-align: left;
}
.mgd-btn--primary { background: var(--mgd-red); border-color: var(--mgd-red); color: var(--mgd-ground); }
.mgd-btn--primary:hover { background: var(--mgd-red-600); border-color: var(--mgd-red-600); color: var(--mgd-ground); }
.mgd-btn--primary:active { background: var(--mgd-red-700); border-color: var(--mgd-red-700); }
.mgd-btn--secondary { background: transparent; color: var(--mgd-ink); }
.mgd-btn--secondary:hover { background: var(--mgd-ink); color: var(--mgd-ground); }

/* Cards */
.mgd-card { background: var(--mgd-white); border: var(--mgd-rule) solid var(--mgd-ink); padding: var(--mgd-space-5); display: flex; flex-direction: column; gap: var(--mgd-space-3); }
.mgd-card__kicker { font-size: var(--mgd-size-label); font-weight: 600; letter-spacing: var(--mgd-track-label); text-transform: uppercase; color: var(--mgd-muted); }

/* Status.
   The word carries the state and the colour reinforces it; the colour is never
   the only signal. Four hues at matched luminance are close to indistinguishable
   under deuteranopia, and a fifth hue would not fix that — the label does.
   Each role swaps value on an ink ground, the same way .mgd-label does. */
.mgd-ok { color: var(--mgd-ok); }
.mgd-caution { color: var(--mgd-caution); }
.mgd-attention { color: var(--mgd-attention); }
.mgd-dormant { color: var(--mgd-dormant); }
.mgd-on-ink .mgd-ok, .mgd-ok--on-ink { color: var(--mgd-ok-on-ink); }
.mgd-on-ink .mgd-caution, .mgd-caution--on-ink { color: var(--mgd-caution-on-ink); }
.mgd-on-ink .mgd-attention, .mgd-attention--on-ink { color: var(--mgd-attention-on-ink); }
.mgd-on-ink .mgd-dormant, .mgd-dormant--on-ink { color: var(--mgd-dormant-on-ink); }

/* Tag.
   The only approved surface for a colour.data hue, and the reason the component
   exists rather than just the tokens: shipped alone, a --mgd-data-* value invites
   being set as text, where it measures about 5:1 on the ground and 3:1 on ink and
   is wrong on one of them. As a fill with --mgd-ground on it, the chip is its own
   surface and the page ground behind it stops mattering.
   Default is ink, which is the correct "no category" case. Pick a hue with a
   modifier; map the hue to a meaning in the consumer, not here. */
.mgd-tag {
  display: inline-block;
  font-size: var(--mgd-size-label);
  font-weight: 600;
  letter-spacing: var(--mgd-track-label);
  text-transform: uppercase;
  padding: 3px var(--mgd-space-2);
  border-radius: var(--mgd-radius);
  background: var(--mgd-ink);
  color: var(--mgd-ground);
  white-space: nowrap;
}
.mgd-on-ink .mgd-tag { background: var(--mgd-ground); color: var(--mgd-ink); }
.mgd-tag--moss { background: var(--mgd-data-moss); color: var(--mgd-ground); }
.mgd-tag--teal { background: var(--mgd-data-teal); color: var(--mgd-ground); }
.mgd-tag--indigo { background: var(--mgd-data-indigo); color: var(--mgd-ground); }
.mgd-tag--violet { background: var(--mgd-data-violet); color: var(--mgd-ground); }
/* Each hue repeated at the on-ink specificity, BACKGROUND INCLUDED.
   `.mgd-on-ink .mgd-tag` is (0,2,0) and `.mgd-tag--teal` is (0,1,0), so on an
   ink ground the bare-tag rule above wins BOTH declarations and every hued tag
   rendered ground-on-ground: an invisible label on an invisible chip.
   1.4.0 shipped a colour-only version of this rule, which fixed the half that
   was easy to picture and left the background losing — so the text became
   ground and the fill became ground, which is worse than either alone.
   Do not reduce these back to `color:` only. */
.mgd-on-ink .mgd-tag--moss { background: var(--mgd-data-moss); color: var(--mgd-ground); }
.mgd-on-ink .mgd-tag--teal { background: var(--mgd-data-teal); color: var(--mgd-ground); }
.mgd-on-ink .mgd-tag--indigo { background: var(--mgd-data-indigo); color: var(--mgd-ground); }
.mgd-on-ink .mgd-tag--violet { background: var(--mgd-data-violet); color: var(--mgd-ground); }

/* Grid */
.mgd-grid { display: grid; gap: var(--mgd-rule); background: var(--mgd-ink); }
.mgd-grid > * { background: var(--mgd-ground); }

/* Centred composition.
   Scoped opt-in, not a default: see composition.centredException in brand.json.
   Put .mgd-centred on the page's band containers, not on <body>, so a page
   cannot end up half-centred. A centred row must be a stack: this deliberately
   does NOT centre a multi-column grid in place. */
.mgd-centred { justify-items: center; text-align: center; }
.mgd-centred.mgd-stack { display: grid; }
.mgd-centred .mgd-measure { max-width: 54ch; }
.mgd-centred .mgd-btn { text-align: left; }