/* The looks Messaging E2E Demo's own screens share. Unlayered, so they outrank the SDK's layers; paint only, from the
   theme's tokens, so both themes wear them. */

.messaging-wordmark {
    font-size: var(--rspond-font-size-x-large);
    font-weight: 700;
    color: var(--rspond-logo-wordmark-color);
    letter-spacing: 0.01em;
}

/* On a phone the header holds the wordmark, the menu, Sign out, the signed-in name and the theme switch in one row, so
   the wordmark steps down a size to leave them room. */
@media (max-width: 480px) {
    .messaging-wordmark {
        font-size: var(--rspond-font-size-medium);
    }

}

/* Demo's two broker columns (D-59) stand side by side where two of this width fit, and one under the other where they
   do not; never wider than the room there is, so on a phone the one column is the page's width rather than running off
   it. Side by side, the brokers stand as tall as a desk window leaves them, and Browse's table takes what that leaves
   it, never less than about three rows (D-63). The message inspector's two panes stand side by side where two of
   their width fit, and one over the other on a phone, never wider than the dialog (D-68). */
:root {
    --messaging-broker-column-minimum-width: min(520px, 100%);
    --messaging-browse-minimum-height: 180px;
    --messaging-inspector-pane-minimum-width: min(400px, 100%);
}

/* Below about 1120 pixels the two columns no longer fit side by side and stand one under the other, so the page
   scrolls, and the brokers take their own height and each table its rows'. */
@media (max-width: 1120px) {
    :root {
        --messaging-browse-minimum-height: auto;
        --messaging-brokers-height: auto;
    }
}

.messaging-wordmark-event {
    font-size: var(--rspond-font-size-small);
    font-weight: 500;
    color: var(--messaging-brand);
}

/* "Powered by RSpond" beneath the sign-in box (D-61): present, and quiet. */
.messaging-powered-by {
    font-size: var(--rspond-font-size-default);
    color: var(--rspond-components-text-muted);
}

/* Wire content -- bodies, properties, commands -- is set in the theme's monospace face, so what lies on the broker
   reads as data and never as prose. */
.messaging-wire {
    font-family: var(--rspond-fonts-family-mono);
    font-size: var(--rspond-font-size-default);
    color: var(--rspond-components-text-primary);
}

/* A caption over a value in an opened row: the theme's body size, quieter in colour and firmer in weight than the
   value under it, so the value reads first. */
.messaging-caption {
    font-size: var(--rspond-font-size-default);
    font-weight: 600;
    color: var(--rspond-components-text-secondary);
}

/* Whole wire content standing on its own -- an opened row's body, property and fields -- keeps its line breaks and
   wraps anywhere, since Base64 has no spaces to break at. */
.messaging-wire-block {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.messaging-lead {
    font-size: var(--rspond-font-size-medium);
    color: var(--rspond-components-text-secondary);
}

/* A failure the reader needs whole -- why a decrypt failed -- said as a sentence that wraps, in the danger colour. */
.messaging-failure {
    color: var(--rspond-status-danger);
    font-weight: 500;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* A decrypted plaintext is what the reader came for, so it reads first in the inspector's Decrypted pane (D-68): a
   step larger and firmer than the wire content around it. */
.messaging-plaintext {
    font-size: var(--rspond-font-size-large);
    font-weight: 700;
}

/* The message inspector's two panes, the wire and the decrypted, framed alike so they read as a pair (D-68). */
.messaging-inspector-pane {
    border: var(--rspond-border-width) solid var(--rspond-border-color);
    border-radius: var(--rspond-border-radius-medium);
    background: var(--rspond-page-background-secondary);
}

/* A Browse row's cells open the message inspector on a click (D-68), so they say so to the pointer. */
.messaging-inspectable {
    cursor: pointer;
}

/* Column headers read as the column's name in the body face. The SDK theme sets them as a monospace, letter-spaced,
   capitalised eyebrow, but in this application monospace means wire content and nothing else (Taste). */
.rspond-column-header {
    font-family: var(--rspond-fonts-family);
    font-size: var(--rspond-font-size-default);
    letter-spacing: normal;
    text-transform: none;
}

/* The header link to the page the reader is on (the SDK marks it rspond-current and aria-current) reads as where they
   are: firmer, and underlined, beside the header's other links. */
.rspond-link-header-nav.rspond-current {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* The primary action reads bold, as the MQ Summit website's gold buttons do (D-54). The SDK sets every button's weight
   to 500 and offers no token for it; the colours and the 10 px corners come from the theme's tokens. */
.rspond-btn-primary {
    font-weight: 700;
}

/* A focused approach or algorithm chip is outlined in the theme's focus colour (D-58). The SDK draws that outline in
   the brand colour, which these themes make gold for the fills it pairs with navy, and gold on white measures 2.35:1;
   the SDK has no token for the outline alone, so its colour is restated here, the outline itself left to the SDK. */
.rspond-toggle-input-up:focus-visible,
.rspond-toggle-bar input:focus-visible + .rspond-toggle-input-up {
    outline-color: var(--messaging-focus);
}