/*
 * The employee-facing pages: the questionnaire and the /anonymity explainer.
 *
 * The one stylesheet those two pages load. Everything else on the site loads tokens.css
 * plus one of home.css, docs.css or app.css; these two load this file alone, and the
 * reason is weight.
 *
 * An employee opens the questionnaire once, on a phone, on whatever connection they have,
 * from a link in an email. They did not choose to come here and they will not come back.
 * Every byte between them and the first question is a byte we are spending on their
 * behalf. So this file carries the palette, the type system and the page in a single
 * request, and it declares two typefaces where the rest of the site declares three.
 *
 * Source Serif 4 is deliberately absent. It is 122 KB - more than half of what these
 * pages used to fetch - and it set the body text. Here the body text is set in whatever
 * serif the device already has. The headings keep Bricolage and the machine-shaped
 * chrome keeps IBM Plex Mono, so the pages still read as the same product; they simply
 * stop paying to ship a body face. The Japanese, Korean and Chinese versions have always
 * rendered their body text in a system font, because none of these faces contains a CJK
 * glyph, and nobody has minded.
 *
 * The palette below is a copy of the one in tokens.css, not an import: an @import would
 * cost the request this file exists to avoid. StylesheetTest compares the two and fails
 * if they drift.
 *
 * 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 questionnaire it would also tell a third party that someone had opened it,
 * which is precisely what this service exists not to reveal.
 */

/* 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;
}

/* IBM Plex Mono - labels, the 0-10 row, anything machine-shaped. No variable version
   exists, so the two weights the design uses are two files. */
@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. Neither of these 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.
     *
     * --body names no web font at all. See the note at the top of this file. */
    --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: "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;
}

h1 {
    font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.3rem);
    margin: 0 0 0.85rem;
}

h2 {
    font-size: 1.1rem;
    margin: 2.25rem 0 0.6rem;
}

p {
    margin: 0 0 1em;
}

a {
    color: inherit;
}

/* The /anonymity page's three guarantees are the only list here. The muted colour is
   inherited by the heading in each row, which is why it is set on the list and not on
   the paragraphs. */
ul {
    margin: 0 0 1em;
    padding-left: 1.15rem;
    color: var(--ink-soft);
}

li {
    margin-bottom: 0.4rem;
}

: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;
}

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

/* 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);
}

.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;
}

/* Form controls ----------------------------------------------------------- */

/* The bare element selector is load-bearing beyond the one visible label on these pages:
   each of the eleven scale buttons is a <label>, and takes its margin-bottom and
   letter-spacing from here. .scale-button overrides the rest. */
label {
    display: block;
    margin-bottom: 0.3rem;
    font-family: var(--mono);
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
}

textarea,
select {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--field-line);
    border-radius: 2px;
    background: var(--field);
    color: inherit;
    font-family: var(--body);
    font-size: 1rem;
    line-height: 1.5;
}

textarea {
    resize: vertical;
}

textarea:focus,
select:focus {
    outline: 2px solid var(--ink);
    outline-offset: 1px;
    border-color: var(--ink);
}

.error {
    margin: 0.45rem 0 0;
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--detractor);
}

/* ==========================================================================
   The questionnaire

   One deliberate exception to the palette. The 0-10 row is NOT coloured by band. On the
   landing page the red/amber/green scale explains how scoring works; on the real
   questionnaire it would tell an employee that low numbers are the bad ones before they
   have answered, which is a leading design. The selected score is ink, whatever it is.
   ========================================================================== */

.submit-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.submit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
    max-width: 44rem;
    margin: 0 auto;
    padding: 1.15rem var(--gut) 0.5rem;
}

.submit-main {
    flex: 1;
    width: 100%;
    max-width: 44rem;
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 1.75rem) var(--gut) 4rem;
}

.language {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.language select {
    width: auto;
    max-width: 12rem;
    padding: 0.45rem 0.6rem;
    font-family: var(--mono);
    font-size: 0.78rem;
}

.submit-card {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: clamp(1.75rem, 4vw, 2.75rem);
}

/* Anonymity banner -------------------------------------------------------- */

.anon-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin: 0 0 2rem;
    padding: 0.85rem 1rem;
    background: var(--promoter-wash);
    border-left: 2px solid var(--promoter);
    border-radius: 2px;
}

.anon-icon {
    font-size: 0.9rem;
    line-height: 1.55;
}

.anon-banner-title {
    margin: 0;
    font-family: var(--mono);
    font-size: 0.8rem;
    letter-spacing: 0.01em;
    color: var(--promoter);
}

/* The detail is three sentences of explanation, so it drops out of the mono headline
   voice and into running text. It stays inside the green block: it is the promise, not a
   footnote to it. */
.anon-banner-detail {
    margin: 0.4rem 0 0;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

/* Not nowrap: "Wie Ihre Anonymität geschützt wird" would then run out of the card on a
   narrow phone. :not(.btn) for the usual reason - a descendant selector outranks .btn and
   would repaint a button's label. */
.anon-banner-detail a:not(.btn) {
    color: var(--promoter);
}

/* Questions --------------------------------------------------------------- */

.question {
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
    line-height: 1.25;
    letter-spacing: -0.015em;
    margin: 0 0 1.5rem;
}

/* The 0-10 row.
   Eleven circles on one line above 34rem, two rows of six below it. .scale-ends and
   .followup are siblings of the radios so the :checked selectors can reach them, and
   span the full row. */
.scale {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.4rem;
}

@media (min-width: 34rem) {
    .scale {
        grid-template-columns: repeat(11, 1fr);
    }
}

.scale-button {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    max-height: 3.05rem;
    border: 1px solid var(--field-line);
    border-radius: 50%;
    background: var(--field);
    color: var(--ink);
    font-family: var(--mono);
    font-size: 0.92rem;
    cursor: pointer;
    user-select: none;
    transition: background .15s, border-color .15s, color .15s, transform .15s;
}

.scale-button:hover {
    border-color: var(--ink);
}

/* Ink, not a band colour. See the note at the top of this section. */
.scale-input:checked + .scale-button {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--card);
    transform: translateY(-3px);
}

/* The radio is visually hidden, so its focus ring has to be drawn on the label. */
.scale-input:focus-visible + .scale-button {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

.scale-ends,
.followup {
    grid-column: 1 / -1;
}

.scale-ends {
    display: flex;
    justify-content: space-between;
    margin: 0.7rem 0 0;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* Question 2, revealed by the checked radio alone - no JavaScript involved. */
.followup {
    display: none;
    margin-top: 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--rule);
}

.scale-input:checked ~ .followup {
    display: block;
}

.followup .question-praise {
    display: none;
}

#score-9:checked ~ .followup .question-improve,
#score-10:checked ~ .followup .question-improve {
    display: none;
}

#score-9:checked ~ .followup .question-praise,
#score-10:checked ~ .followup .question-praise {
    display: block;
}

/* Character meter --------------------------------------------------------- */

.meter {
    margin-top: 0.9rem;
}

.meter[hidden] {
    display: none;
}

.meter-track {
    height: 4px;
    background: var(--paper);
    border-radius: 999px;
    overflow: hidden;
}

.meter-fill {
    width: 0;
    height: 100%;
    background: var(--ink-soft);
    border-radius: 999px;
    transition: width .18s ease-out, background-color .18s;
}

.meter-message {
    margin: 0.6rem 0 0;
    min-height: 1.5em;
    font-family: var(--mono);
    font-size: 0.76rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

/* One colour per encouragement message, warming from red to green as the answer grows.

   It reports how much has been written, never what was said - a detractor who writes at
   length gets a green bar. The 0-10 row itself is deliberately never coloured; see the
   note at the top of this section. */
.meter-step-1 .meter-fill {   /* "The more detail you can share…" */
    background: var(--meter-red);
}

.meter-step-2 .meter-fill {   /* "Thanks for sharing…" */
    background: var(--meter-amber);
}

.meter-step-3 .meter-fill {   /* "That's helpful…" */
    background: var(--meter-yellow);
}

.meter-step-4 .meter-fill {   /* "Thank you. Your detailed feedback…" */
    background: var(--meter-green);
}

/* Only the last message takes a colour of its own. Red, amber or yellow running text
   would read as a validation error, and the comment is optional. */
.meter-step-4 .meter-message {
    color: var(--meter-green);
}

.error-block {
    margin: 0 0 1.2rem;
    padding: 0.7rem 0.9rem;
    background: var(--detractor-wash);
    border-left: 2px solid var(--detractor);
    border-radius: 2px;
    color: var(--detractor);
}

.submit-footnote {
    margin: 2rem 0 0;
    font-family: var(--mono);
    font-size: 0.74rem;
    line-height: 1.7;
    color: var(--ink-soft);
    text-align: center;
}

/* Thank you, already answered, closed, not found -------------------------- */

.submit-card-message {
    text-align: center;
    padding: clamp(2.5rem, 6vw, 3.5rem) clamp(1.75rem, 4vw, 2.75rem);
}

.submit-card-message p {
    color: var(--ink-soft);
    max-width: 34ch;
    margin-inline: auto;
}

.submit-card-message .submit-footnote {
    max-width: none;
}

.message-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: var(--promoter-wash);
    color: var(--promoter);
    font-size: 1.25rem;
    line-height: 1;
}

.message-mark-muted {
    background: var(--paper);
    color: var(--ink-faint);
}

/* The /anonymity page ------------------------------------------------------
   Reached from the questionnaire's banner by someone who wants to know what happens to
   what they write. It sits in the submit layout, so it inherits the header, the language
   toggler and the same 44rem measure - but it is prose, not a form, and reads as a
   document rather than a card. */

.anon-page {
    max-width: 42rem;
}

/* Restates the promise at the top of the page in the same voice the questionnaire's
   banner uses, so arriving here does not feel like leaving the survey. */
.anon-strip {
    margin: 0 0 clamp(2rem, 5vw, 3rem);
    padding: 0.7rem 1rem;
    background: var(--ink);
    border-radius: 2px;
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.01em;
    color: var(--paper);
}

.anon-hero h1 {
    font-size: clamp(1.85rem, 1.3rem + 2.4vw, 2.6rem);
    margin: 0 0 0.75rem;
}

.anon-lede {
    margin: 0;
    font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
}

.anon-section {
    padding-block: clamp(2rem, 5vw, 3rem);
}

.anon-kicker {
    margin: 0 0 1.4rem;
    font-family: var(--mono);
    font-size: 0.73rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* Ruled rows rather than boxes: three guarantees read as a list of facts, and a card each
   would make them look like features. */
.anon-facts {
    list-style: none;
    margin: 0;
    padding: 0;
}

.anon-fact {
    border-top: 1px solid var(--rule);
    padding-block: 1.35rem;
}

.anon-fact:last-child {
    border-bottom: 1px solid var(--rule);
}

.anon-fact h2 {
    font-size: 1.1rem;
    margin: 0 0 0.4rem;
}

.anon-fact p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.97rem;
}

/* The one section that asks something of the reader, so it is lifted off the page. */
.anon-control {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: clamp(1.5rem, 4vw, 2.25rem);
}

.anon-control h2 {
    font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.85rem);
    margin: 0 0 0.9rem;
    max-width: 24ch;
}

.anon-control-intro {
    max-width: 56ch;
}

.anon-swap {
    display: grid;
    gap: 1.1rem;
    margin: 1.75rem 0 0;
}

/* The two examples are marked by the band colours on purpose: this really is the
   difference between a comment that hurts the writer and one that does not. Unlike the
   meter, nothing here is about a score. */
.anon-example {
    margin: 0;
    border-left: 3px solid var(--rule);
    padding: 0.1rem 0 0.1rem 1.15rem;
}

.anon-example-identifying {
    border-left-color: var(--detractor);
}

.anon-example-better {
    border-left-color: var(--promoter);
}

.anon-example-tag {
    display: block;
    margin-bottom: 0.45rem;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.anon-example-identifying .anon-example-tag {
    color: var(--detractor);
}

.anon-example-better .anon-example-tag {
    color: var(--promoter);
}

.anon-example q {
    display: block;
    font-size: 1.02rem;
    line-height: 1.62;
}

.anon-example-identifying q {
    color: var(--ink-soft);
}

.anon-swap-mid {
    margin: 0;
    padding-left: 1.15rem;
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.anon-note {
    margin-top: 1.75rem;
    max-width: 58ch;
}

.anon-note p {
    color: var(--ink-soft);
}

.anon-note p:last-child {
    margin-bottom: 0;
}

.anon-note b {
    color: var(--ink);
    font-weight: 600;
}

/* Inside the card with the examples it refers to, so it is separated by a rule rather
   than by the gap that used to put it on the page below. */
.anon-close {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
}

.anon-close p {
    max-width: 52ch;
    color: var(--ink-soft);
    font-size: 0.97rem;
}

.anon-close p:last-child {
    margin-bottom: 0;
}

.anon-footer {
    margin: clamp(2rem, 5vw, 3rem) 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--ink-soft);
}