/* MetaRemote site styles.
 *
 * LAYERED ON TOP OF metanova-theme.css, which is the single source of
 * truth for colour, type and geometry. Nothing here hardcodes a colour:
 * every value is a semantic token, so a retheme is a theme-file swap with
 * no edits in this file. That is the themeability contract the theme
 * states, and this file honours it.
 *
 * CLASS PREFIXES. Site-owned classes are `mr-`. The theme's own component
 * classes are `mn-` and are used AS THEY COME -- .mn-card for the login
 * panel, .mn-btn for the button. The prefixes are kept apart deliberately:
 * the theme's .mn-rail is the 64px ICON RAIL of the application shell, a
 * different component from this login page's 250px identity rail, and
 * reusing the name would silently collapse one into the other.
 *
 * TYPOGRAPHY. The display face is confined to .mr-wordmark. BRAND-SPEC
 * section 7 restricts it to logo, wordmarks, section headers and hero
 * type, and forbids it for labels, buttons, form fields and running text:
 * it is caps-only with no numerals or punctuation, and its thin
 * horizontals go fragile below ~14px. Everything functional uses
 * --font-ui. Do NOT "brand" the page by moving the display face up to
 * body.
 */

/* Self-hosted. No CDN and no external reference: the no-network rule and
 * the no-domain-names rule both apply to this file. */
@font-face {
    font-family: 'METANOVA Display';
    src: url('../fonts/METANOVADisplay-Regular.woff2') format('woff2'),
         url('../fonts/METANOVADisplay-Regular.woff')  format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    /* The identity rail on the login and landing pages. Not the theme's
     * --rail-w, which sizes the application's icon rail. */
    --mr-rail-w: 250px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: var(--surface-page);
    color: var(--text-secondary);
    font-family: var(--font-ui);
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
}

/* ---- shell + identity rail ------------------------------------------- */

.mr-shell {
    display: flex;
    min-height: 100vh;
}

.mr-rail {
    flex: 0 0 var(--mr-rail-w);
    background: var(--surface-rail);
    border-right: var(--hairline) solid var(--border-hairline);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 48px 0;
}

/* Accent segment on the rail edge. Brand red, because this is identity
 * chrome -- not signal red, which would make a lit alert stop reading as
 * different from the frame. */
.mr-rail::after {
    content: "";
    position: absolute;
    right: -1px;
    top: 42%;
    height: 16%;
    width: var(--hairline);
    background: rgb(var(--accent-rgb));
}

/* The inlined METANOVA-vertical wordmark. Its silver letters are
 * fill="currentColor" and its M carries baked brand red, so setting
 * `color` here is what tints it -- which is exactly why the SVG is inlined
 * rather than referenced through <img>, where currentColor would resolve
 * against the image's own root and render the letters black. */
.mr-rail-mark {
    color: var(--rail-letter);
    line-height: 0;
}

.mr-rail-mark svg {
    height: min(72vh, 900px);
    width: auto;
    display: block;
}

.mr-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}

/* ---- wordmark -- the ONLY display-face element ------------------------ */

.mr-wordmark {
    font-family: var(--font-display);
    font-size: 44px;
    line-height: 1;
    color: var(--wordmark-silver);
    text-align: center;
    margin: 0;
}

/* BRAND-SPEC section 4 accent rule: a product wordmark reds the TWO
 * CAPITALS so the red spells the product's own shorthand. MetaRemote ->
 * M and R -> "MR". Lowercase letters render as 90% small caps with the
 * crossbar a, which is the approved wordmark form and needs no markup. */
.mr-wordmark .mr-accent { color: rgb(var(--accent-rgb)); }

.mr-subtitle {
    margin: 12px 0 0;
    text-align: center;
    font-family: var(--font-ui);
    font-size: 12px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ---- panel ------------------------------------------------------------ */

/* .mn-card comes from the theme and brings the card edge highlight with
 * it. Only the sizing is site-specific. */
.mn-card.mr-panel {
    width: 100%;
    max-width: 520px;
    padding: 44px 48px 46px;
}

.mr-rule {
    border: 0;
    border-top: var(--hairline) solid var(--border-hairline);
    margin: 30px 0 26px;
}

/* ---- form -- workhorse face throughout -------------------------------- */

.mr-field { margin-bottom: 22px; }

.mr-field label {
    display: block;
    font-family: var(--font-ui);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.mr-field input {
    width: 100%;
    height: 50px;
    padding: 0 16px;
    background: var(--surface-inset);
    border: var(--hairline) solid transparent;
    border-radius: var(--radius-ctl);
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: 15px;
}

.mr-field input:focus {
    outline: none;
    border-color: var(--border-strong);
}

/* .mn-btn is the theme's button; the ladder and its focus ring come with
 * it. No button uses accent, by the theme's own rule. */
.mn-btn.mr-submit {
    width: 100%;
    height: 52px;
    margin-top: 26px;
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.mn-btn.mr-submit:disabled { cursor: default; }

/* A failed sign-in is an ALERT, so it takes signal red -- deliberately a
 * different value from the brand red on the rail and the wordmark. */
.mr-message {
    margin-top: 20px;
    min-height: 20px;
    font-family: var(--font-ui);
    font-size: 14px;
    text-align: center;
    color: rgb(var(--signal-danger-rgb));
}

.mr-message.mr-ok { color: rgb(var(--signal-success-rgb)); }

.mr-signed-in-label {
    margin: 0;
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.mr-who {
    text-align: center;
    font-size: 18px;
    color: var(--text-primary);
    margin: 10px 0 4px;
}

.mr-role {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}

.mr-lede {
    margin: 0 0 26px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-muted);
    text-align: center;
}

.mr-alt {
    margin: 22px 0 0;
    text-align: center;
    font-size: 13px;
}

.mr-alt a,
.mr-footer a {
    color: var(--text-muted);
}

a.mn-btn.mr-submit {
    display: block;
    text-align: center;
    line-height: 52px;
    text-decoration: none;
}

/* ---- footer ----------------------------------------------------------- */

.mr-footer {
    margin-top: 34px;
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}

/* ---- landing page ----------------------------------------------------- */

.mr-hero { max-width: 760px; }

/* The gradient METANOVA lockup. BRAND-SPEC section 4 assigns the gradient
 * treatment to hero and large static use; it carries its own gradient
 * definition because a gradient cannot ride currentColor. */
.mr-hero-mark {
    line-height: 0;
    margin-bottom: 28px;
}

.mr-hero-mark svg {
    width: min(100%, 620px);
    height: auto;
    display: block;
}

.mr-hero p {
    font-size: 17px;
    line-height: 1.65;
    color: var(--text-secondary);
    margin: 0 0 18px;
}

.mr-note {
    margin-top: 34px;
    padding: 18px 20px;
    background: var(--surface-card);
    border: var(--hairline) solid var(--border-hairline);
    border-left: 2px solid rgb(var(--accent-rgb));
    border-radius: var(--radius-ctl);
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
}

.mr-note strong { color: var(--text-secondary); }

.mr-actions { margin-top: 30px; }

.mn-btn.mr-link {
    display: inline-block;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

@media (max-width: 860px) {
    .mr-rail { display: none; }
    .mn-card.mr-panel { padding: 32px 24px 36px; }
    .mr-wordmark { font-size: 34px; }
}