/**
 * The Tunnyl mark, and how it locks up with the wordmark.
 *
 * Its own file because the shell pages and the auth pages share no stylesheet
 * except tokens.css: dashboard-common.css covers the seventeen pages with a
 * header, while login, register, the password flows, the OAuth callback and
 * profile-setup load only tokens plus their own page sheet. The lockup lived
 * in dashboard-common.css first and simply did not render on any auth page.
 *
 * tokens.css is not the place for it — that file is custom properties only, by
 * design. So: one small sheet, linked by every page.
 */

/* ===== The mark, locked up with the wordmark =====
 *
 * The name is kept beside the mark rather than replaced by it. A mark earns
 * the right to stand alone by being recognised first, and nothing is
 * recognised yet — so the header reads mark + "Tunnyl", and the mark goes
 * alone only where there is no room for words: the favicon, the app icon, the
 * home screen.
 *
 * The small asset, not the detailed one. The wordmark is 2rem, dropping to
 * 1.125rem at 360px, so the mark is 29px at its largest and 16px at its
 * smallest — squarely the range where the tunnel rings blur into grey haze.
 *
 * Sized in em so it tracks the three responsive font-size steps below without
 * repeating itself in each, and drawn with ::before so the accessible name
 * stays the real text: the mark is decoration, "Tunnyl" is the label.
 */
a.logo::before,
span.logo::before {
    content: "";
    display: inline-block;
    width: 0.92em;
    height: 0.92em;
    margin-right: 0.34em;
    /* The optical centre of the letterform sits a little above the text
       baseline; -0.09em drops the tile to line up with the x-height. */
    vertical-align: -0.09em;
    background-image: url("/brand/tunnyl-mark-small.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* The tile is #151517, the dark card colour, so on a dark page it
       vanished and left a floating T. A hairline edge keeps the square;
       --mark-edge is transparent in the light theme. */
    border-radius: 22.4%;
    box-shadow: 0 0 0 1px var(--mark-edge, transparent);
}

/* The auth pages use .logo as a centred container around an <h1>, not as the
   wordmark itself, so the mark stacks above the name instead of sitting inline
   with it. */
div.logo::before {
    content: "";
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto 0.75rem;
    background-image: url("/brand/tunnyl-mark-small.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* The tile is #151517, the dark card colour, so on a dark page it
       vanished and left a floating T. A hairline edge keeps the square;
       --mark-edge is transparent in the light theme. */
    border-radius: 22.4%;
    box-shadow: 0 0 0 1px var(--mark-edge, transparent);
}

/* ===== Form controls use the page font =====
 *
 * Browsers give textarea (and in some engines input and button) a monospace
 * or system font of their own. Pages that never said font-family: inherit
 * showed the application note and the bio in monospace. One rule here, since
 * this is the one sheet every page loads.
 */
input,
textarea,
select,
button {
    font-family: inherit;
}