/* The MATS form theme (Raj, 2026-10-15) for every form a person outside the
   dashboard fills in: open forms, public form links, the applicant page. Those
   pages load mats-brand.css (the font + `--mats-*` tokens), then this file,
   then their own stylesheet, which draws every colour from the tokens.

   The page itself as matsprogram.org sets it: pill buttons live in the page
   sheets; here are the base type, the logo, and the site's square card marked
   with a maroon corner block. */
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: var(--mats-font);
    font-size: 16px;
    line-height: 1.6;
    background: var(--mats-50);
    color: var(--mats-800);
    accent-color: var(--mats-red-600);
}
a { color: inherit; text-underline-offset: 3px; }
a:hover { color: var(--mats-red-600); }

/* Header: the logo exactly as the site shows it (torch block + wordmark). */
.mats-brand { display: block; height: 36px; width: auto; }

/* The site's card: square, hairline border, a maroon block on its top-left corner. */
.mats-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--mats-300);
    padding: 40px 40px 36px;
}
.mats-card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 12px;
    height: 12px;
    background: var(--mats-red-600);
}
@media (max-width: 560px) {
    .mats-card { padding: 28px 20px 24px; }
}

/* The big maroon torch on the right, as the Fillout forms had it — fixed,
   running off the bottom of the window. Only where it fits beside the form
   (≥1200px); the form then moves left into the space the torch leaves. */
.mats-torch { display: none; }
@media (min-width: 1200px) {
    .mats-torch {
        display: block;
        position: fixed;
        top: 48px;
        right: 4vw;
        width: min(30vw, 420px);
        height: auto;
        pointer-events: none;
    }
    main.mats-shell {
        margin-left: max(24px, calc((100vw - min(30vw, 420px) - 4vw - 32px - 760px) / 2));
        margin-right: 0;
    }
}