/*
 * Shared foundation: the typefaces, the palette, the type system, and the handful of
 * primitives every page uses.
 *
 * Loaded before home.css, docs.css or app.css so the landing page, the guide and the
 * administrator pages are demonstrably the same product. The palette is the three
 * scoring bands plus a near-black ink; nothing in it is decorative.
 *
 * The two employee-facing pages do NOT load this file. They load survey.css, which
 * carries a copy of the palette and a lighter set of faces in a single request; see the
 * note at the top of it. StylesheetTest compares the two palettes and fails if they
 * drift apart.
 *
 * Only the latin subset of each face is declared. The Google Fonts latin-ext cuts used
 * to be here as well, and no page ever fetched one: the landing page and the guide are
 * English, and not one of the ten translation files contains a single codepoint in that
 * range. A test keeps that true.
 *
 * The fonts are served from this host, never from a font CDN. The Content-Security-Policy
 * is "default-src 'none'" with "font-src 'self'", so an external one would be blocked -
 * and on the employee-facing questionnaire it would also tell a third party that someone
 * had opened it, which is precisely what this service exists not to reveal.
 *
 * All three are SIL Open Font Licence 1.1. The licence texts are in assets/fonts/ and
 * must stay there: the OFL requires them to travel with the fonts.
 */

/* Bricolage Grotesque - display. Variable, 200-800, so every heading weight the design
   uses comes out of one file rather than three. */
@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/bricolage-grotesque-latin.woff2') format('woff2');
    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;
}

/* Source Serif 4 - body. Variable, 400-600. */
@font-face {
    font-family: 'Source Serif 4';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/source-serif-4-latin.woff2') format('woff2');
    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;
}

/* IBM Plex Mono - labels, code, anything machine-shaped. No variable version exists, so
   the two weights the design uses are one file each. */
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
    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: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
    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;
}

:root {
    --detractor: #A8324A;
    --passive: #A97615;
    --promoter: #16705C;

    --ink: #101C26;
    --ink-soft: #55697A;
    --ink-faint: #7B8794;
    --paper: #E5EAE9;
    --card: #FCFDFD;
    --rule: #C3CFCF;

    --field: #FFFFFF;
    --field-line: #AFBDBD;

    --detractor-wash: #FBF1F3;
    --passive-wash: #FCF6E9;
    --promoter-wash: #EDF4F2;

    /* The character meter's four steps, one per encouragement message: red, amber,
     * yellow, green. Its own scale rather than the three scoring bands, which it
     * outgrew - and which mean something else entirely.
     *
     * The two middle tones are chosen to stay legible against the bar's own track
     * (--paper): a brighter yellow would score under 3:1 there and the fill would be
     * hard to see at all. --meter-yellow is a true yellow hue at 51 degrees rather than
     * the gold of --passive, so it is not mistaken for the amber before it. */
    --meter-red: var(--detractor);
    --meter-amber: #C2410C;
    --meter-yellow: #957E00;
    --meter-green: var(--promoter);

    /* The self-hosted faces first, then the CJK families, then a generic.
     *
     * The CJK entries are not decoration. None of these three typefaces contains a
     * Japanese, Korean or Chinese glyph, and the questionnaire is offered in all three
     * languages; without them the browser would fall back to whatever it liked, which on
     * Windows means a Chinese face rendering Japanese text with visibly wrong forms.
     * Listing them puts the choice in our hands. */
    --display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto,
        "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo,
        "Malgun Gothic", "Apple SD Gothic Neo",
        "PingFang SC", "Microsoft YaHei UI", sans-serif;
    --body: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman",
        "Hiragino Mincho ProN", "Yu Mincho", "YuMincho",
        "Nanum Myeongjo", "Apple SD Gothic Neo", "Malgun Gothic",
        "Songti SC", "SimSun", serif;
    --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
        "Liberation Mono",
        "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo,
        "Malgun Gothic", "PingFang SC", "Microsoft YaHei UI", monospace;

    --radius: 3px;
    --gut: clamp(1.25rem, 4vw, 3.5rem);
}

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--display);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.025em;
    margin: 0;
}

p {
    margin: 0 0 1em;
}

a {
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
    border-radius: 2px;
}

/* An author rule such as ".button { display: inline-block }" outranks the user agent's
   [hidden] { display: none }, so anything hidden from script would stay on screen. This
   is what keeps the language toggler's no-JavaScript button from appearing twice over. */
[hidden] {
    display: none !important;
}

.rule {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: 0;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* The mono eyebrow that labels a section or a page. */
.eyebrow {
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 1.1rem;
}

/* Wordmark ---------------------------------------------------------------- */

.wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--mono);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.wordmark span {
    color: var(--ink-soft);
}

/* Buttons ----------------------------------------------------------------- */

.btn,
.button {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    padding: 0.75em 1.3em;
    background: var(--ink);
    color: var(--card);
    border: 1px solid var(--ink);
    border-radius: 2px;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.btn:hover,
.button:hover {
    background: transparent;
    color: var(--ink);
}

.btn-ghost {
    background: transparent;
    color: var(--ink);
}

.btn-ghost:hover {
    background: var(--ink);
    color: var(--card);
}

.button-small {
    padding: 0.55em 0.9em;
    font-size: 0.78rem;
}

.button-wide {
    display: block;
    width: 100%;
    margin-top: 1.75rem;
    padding: 0.95em 1.3em;
    font-size: 0.9rem;
}

/* Page chrome shared by the landing page and the guide -------------------- */

.wrap {
    max-width: 76rem;
    margin-inline: auto;
    padding-inline: var(--gut);
}

/* Masthead ---------------------------------------------------------------- */

.masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.15rem;
    flex-wrap: wrap;
}

.masthead nav {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    font-family: var(--mono);
    font-size: 0.8rem;
    flex-wrap: wrap;
}

/* :not(.btn), or this outranks .btn and leaves the button's label at --ink-soft on an
   --ink background: about 3:1, below the 4.5:1 that body text needs. */
.masthead nav a:not(.btn) {
    color: var(--ink-soft);
    text-decoration: none;
}

.masthead nav a:not(.btn):hover {
    color: var(--ink);
}