/* The brand theme (App/Presentation/Partials/theme/brand), over Pico. */
:root {
    --pico-background-color: #f5f0e8;
    --pico-card-background-color: #fffdf7;
    --brand-accent: #b02030;
}
nav .brand { font-weight: 700; letter-spacing: 0.03em; }
nav .brand span { color: var(--brand-accent); }
nav .brand img { height: 24px; width: auto; vertical-align: middle; margin-right: 6px; }

/* A notice: class="notice notice-{level}". Framework's layout.php renders the
   page's notices this way (acting as a user, a question, a redirect's message),
   and this app's templates use it for a message inline in their body. The
   header loads no framework-base.css, so the base rule is here too. */
.notice { padding: 0.75rem 1rem; border-radius: 4px; margin-bottom: 1rem; }
.notice p { margin-bottom: 0; }
.notice form { display: inline-block; margin: 0.5rem 0.5rem 0 0; }
.notice form button { margin-bottom: 0; }
.notice-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.notice-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.notice-info { background: #cce5ff; color: #004085; border: 1px solid #b8daff; }
.notice-warning { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }

footer.site-footer { text-align: center; opacity: 0.5; font-size: 0.8rem; padding: 2rem 0; }

/* The API pages (App/Presentation/Api/). */
.side-effects { text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.04em; padding: 0.15rem 0.5rem; border-radius: 3px; background: #cce5ff; color: #004085; }
.produces code { margin-right: 0.4rem; }