/*
    Portal styling.

    The shared component library ships its own stylesheet with the design tokens and every
    component class; this file adds only what belongs to this application — the shell, the page
    chrome, the form controls, and the page-specific layouts. Everything here is built on the
    library's custom properties, so light and dark themes and the whole visual language stay in
    one place rather than being redefined per host.

    The .NET 10 Blazor template no longer ships Bootstrap, so there is no framework underneath
    this. Every class is prefixed mmp- for the same reason the library's are: adding Bootstrap
    later must not collide with any of it.
*/

/* --------------------------------------------------------------- theme */

/*
    The portal is a single, fixed palette: a dark navigation surface with light text, over a light
    content surface with dark text.

    Two things follow. `color-scheme: light` tells the browser to render form controls, scrollbars,
    and focus rings for a light page, so a user whose system is set to dark mode does not get dark
    native widgets on a light background. And the block below re-states the light token values
    inside the dark-scheme media query, overriding the dark set the component library declares.

    That override is deliberate rather than an oversight in the library. The library is written to
    follow the reader's preference, which is right for a component that could be dropped into any
    host; this host has a chosen identity, and a navigation bar that inverts itself depending on an
    OS setting is not that. The navigation keeps its own dark tokens either way, so it is unaffected.
*/

:root {
    color-scheme: light;

    --mmp-nav-surface: #131a24;
    --mmp-nav-surface-raised: #1d2734;
    --mmp-nav-border: #2b3746;
    --mmp-nav-text: #e8eef6;
    --mmp-nav-text-muted: #9fb0c4;
    --mmp-nav-accent: #6ea8fe;
    --mmp-nav-accent-soft: #24354d;
}

@media (prefers-color-scheme: dark) {
    :root {
        --mmp-surface: #ffffff;
        --mmp-surface-raised: #f8fafc;
        --mmp-surface-sunken: #eef2f7;
        --mmp-border: #d8dee9;
        --mmp-border-strong: #b9c2d0;

        --mmp-text: #1c2430;
        --mmp-text-muted: #5b6676;
        --mmp-text-inverse: #ffffff;

        --mmp-accent: #1f5fbf;
        --mmp-accent-strong: #17488f;
        --mmp-accent-soft: #e8f0fd;

        --mmp-success: #157347;
        --mmp-success-soft: #e6f4ec;
        --mmp-warning: #9a6200;
        --mmp-warning-soft: #fdf3e2;
        --mmp-danger: #b02a2a;
        --mmp-danger-soft: #fbeaea;
        --mmp-info: #1f5fbf;
        --mmp-info-soft: #e8f0fd;
        --mmp-neutral: #5b6676;
        --mmp-neutral-soft: #eef1f5;
    }
}

/* ---------------------------------------------------------------- base */

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    margin: 0;
    font-family: var(--mmp-font-sans);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--mmp-text);
    background: var(--mmp-surface-sunken);
    -webkit-font-smoothing: antialiased;
}

h1:focus {
    outline: none;
}

a {
    color: var(--mmp-accent);
}

code {
    font-family: var(--mmp-font-mono);
    font-size: 0.85em;
}

.mmp-muted {
    color: var(--mmp-text-muted);
}

.mmp-stacked {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.mmp-inline-facts {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: 0.85rem;
}

.mmp-inline-facts--end {
    align-items: flex-end;
    text-align: right;
}

.mmp-link-quiet {
    color: var(--mmp-text-muted);
    text-decoration: none;
    font-size: 0.85rem;
}

.mmp-link-quiet:hover {
    color: var(--mmp-accent);
    text-decoration: underline;
}

.mmp-code-wrap {
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------- button variants */
/* The library defines .mmp-button and its primary, secondary, danger, and link
   variants. These three are additions this application needs. */

.mmp-button--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--mmp-text-muted);
}

.mmp-button--ghost:hover:not(:disabled) {
    background: var(--mmp-surface-sunken);
    border-color: var(--mmp-border);
    color: var(--mmp-text);
}

.mmp-button--small {
    padding: 0.2rem 0.55rem;
    font-size: 0.8rem;
}

.mmp-button--block {
    display: flex;
    width: 100%;
    justify-content: center;
}

/* ----------------------------------------------------------- controls */

.mmp-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.9rem;
}

.mmp-field--compact {
    margin-bottom: 0;
    min-width: 11rem;
}

.mmp-field--inline {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.mmp-field__label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--mmp-text-muted);
}

.mmp-field__input {
    width: 100%;
    padding: 0.45rem 0.6rem;
    font: inherit;
    color: var(--mmp-text);
    background: var(--mmp-surface);
    border: 1px solid var(--mmp-border);
    border-radius: var(--mmp-radius);
}

.mmp-field__input:focus-visible {
    outline: none;
    border-color: var(--mmp-accent);
    box-shadow: var(--mmp-focus-ring);
}

.mmp-field__input--textarea {
    resize: vertical;
    min-height: 4.5rem;
}

/* A fixed, read-only field value — the source type on the edit form, which is chosen at
   creation and never changes. Styled like a filled input so the form reads as one piece,
   but visibly inert. */
.mmp-field__static {
    margin: 0;
    padding: 0.45rem 0.6rem;
    font: inherit;
    color: var(--mmp-text-muted);
    background: var(--mmp-surface-muted, var(--mmp-surface));
    border: 1px dashed var(--mmp-border);
    border-radius: var(--mmp-radius);
}

.mmp-field__checkbox {
    width: 1rem;
    height: 1rem;
    accent-color: var(--mmp-accent);
}

.mmp-field__inline-label {
    font-size: 0.9rem;
}

.mmp-field__hint {
    margin: 0;
    font-size: 0.8rem;
    color: var(--mmp-text-muted);
}

.mmp-field__error,
.validation-message {
    font-size: 0.8rem;
    color: var(--mmp-danger);
}

.mmp-field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0 1rem;
}

.invalid {
    border-color: var(--mmp-danger);
}

/* -------------------------------------------------------------- shell */

.mmp-shell {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.mmp-shell__main {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.mmp-shell__content {
    flex: 1;
    width: 100%;
    max-width: 84rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
}

.mmp-shell__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
    padding: 0.9rem 1.25rem;
    font-size: 0.8rem;
    color: var(--mmp-text-muted);
    border-top: 1px solid var(--mmp-border);
    background: var(--mmp-surface);
}

.mmp-shell__footer-reference code {
    color: var(--mmp-text-muted);
}

/* --------------------------------------------------------- navigation */

/*
    The dark band across the top. It uses its own token set rather than the shared surface tokens,
    which is what lets it stay dark while the content below stays light without either one having
    to know about the other.
*/

.mmp-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 0.65rem 1.5rem;
    color: var(--mmp-nav-text);
    background: var(--mmp-nav-surface);
    border-bottom: 1px solid var(--mmp-nav-border);
    box-shadow: 0 1px 3px rgb(16 24 40 / 24%);
}

.mmp-nav__brand {
    display: flex;
    align-items: center;
}

.mmp-nav__item {
    display: flex;
}

.mmp-nav__brand-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--mmp-nav-text);
}

.mmp-nav__brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #ffffff;
    background: linear-gradient(135deg, #2f6fd0, #1d4e9c);
    border-radius: var(--mmp-radius);
}

.mmp-nav__brand-text {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.mmp-nav__list {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mmp-nav__link {
    display: inline-block;
    padding: 0.4rem 0.75rem;
    font-size: 0.9rem;
    text-decoration: none;
    color: var(--mmp-nav-text-muted);
    border-radius: var(--mmp-radius);
    transition: color 120ms ease, background-color 120ms ease;
}

.mmp-nav__link:hover {
    color: var(--mmp-nav-text);
    background: var(--mmp-nav-surface-raised);
}

.mmp-nav__link:focus-visible {
    outline: none;
    color: var(--mmp-nav-text);
    box-shadow: 0 0 0 2px var(--mmp-nav-accent);
}

.mmp-nav__link.active {
    color: #ffffff;
    background: var(--mmp-nav-accent-soft);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--mmp-nav-accent);
}

/*
   Navigation groups (Setup, Crawls).

   The panel itself is the shared AppActionMenu and is deliberately left alone — it belongs
   to the light content surface and looks right there. Only the trigger is restyled, because
   the component library ships it as a secondary button and this bar is dark; a pale button
   sitting between two dark links would read as the one thing demanding attention.

   The selectors reach the trigger through the group root rather than overriding
   .mmp-menu__trigger globally, so an actions menu anywhere else in the portal is untouched.
*/
.mmp-nav__group .mmp-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--mmp-nav-text-muted);
    background: transparent;
    border: none;
    border-radius: var(--mmp-radius);
    transition: color 120ms ease, background-color 120ms ease;
}

.mmp-nav__group .mmp-menu__trigger:hover:not(:disabled) {
    color: var(--mmp-nav-text);
    background: var(--mmp-nav-surface-raised);
}

.mmp-nav__group .mmp-menu__trigger:focus-visible {
    outline: none;
    color: var(--mmp-nav-text);
    box-shadow: 0 0 0 2px var(--mmp-nav-accent);
}

/*
   An open group stays lit even when the reader is not inside it, so the heading and its
   panel read as one object rather than two.
*/
.mmp-nav__group .mmp-menu__trigger[aria-expanded="true"] {
    color: var(--mmp-nav-text);
    background: var(--mmp-nav-surface-raised);
}

/*
   The reader is on a page inside this group — matched to .mmp-nav__link.active.

   Last, and matching the interaction states explicitly, because it has to outrank all
   three of them: :hover:not(:disabled) above is (0,4,0) and both :focus-visible and
   [aria-expanded] are (0,3,0), so the plain (0,2,0) form would lose the highlight at
   exactly the moment the reader opens the group they are already inside.
*/
.mmp-nav__group--current .mmp-menu__trigger,
.mmp-nav__group--current .mmp-menu__trigger:is(:hover, :focus-visible, [aria-expanded="true"]) {
    color: #ffffff;
    background: var(--mmp-nav-accent-soft);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--mmp-nav-accent);
}

.mmp-nav__group--current .mmp-menu__trigger:focus-visible {
    outline: none;
    box-shadow: inset 0 -2px 0 var(--mmp-nav-accent), 0 0 0 2px var(--mmp-nav-accent);
}

.mmp-nav__account {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-left: 0.75rem;
    border-left: 1px solid var(--mmp-nav-border);
}

.mmp-nav__user {
    max-width: 14rem;
    overflow: hidden;
    font-size: 0.85rem;
    color: var(--mmp-nav-text-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mmp-nav__logout-form {
    margin: 0;
}

/*
    The account controls sit on the dark band, so the shared ghost-button styling — built for a
    light surface — would render them nearly invisible. These two rules re-tint them for the
    navigation only; the same classes elsewhere are untouched.
*/

.mmp-nav__account .mmp-button--ghost {
    color: var(--mmp-nav-text);
    border-color: var(--mmp-nav-border);
    background: transparent;
}

.mmp-nav__account .mmp-button--ghost:hover:not(:disabled) {
    color: #ffffff;
    background: var(--mmp-nav-surface-raised);
    border-color: var(--mmp-nav-accent);
}

/* --------------------------------------------------- public / account */

.mmp-public {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
}

.mmp-auth {
    width: 100%;
    display: flex;
    justify-content: center;
}

.mmp-auth__panel {
    width: 100%;
    max-width: 26rem;
    padding: 2rem;
    background: var(--mmp-surface);
    border: 1px solid var(--mmp-border);
    border-radius: var(--mmp-radius-large);
    box-shadow: var(--mmp-shadow);
}

.mmp-auth__brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.mmp-auth__brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--mmp-text-inverse);
    background: var(--mmp-accent);
    border-radius: var(--mmp-radius);
}

.mmp-auth__brand-text {
    font-weight: 600;
}

.mmp-auth__title {
    margin: 0 0 0.35rem;
    font-size: 1.5rem;
}

.mmp-auth__subtitle {
    margin: 0 0 1.25rem;
    color: var(--mmp-text-muted);
}

.mmp-auth__reference {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
}

.mmp-auth__form {
    margin-top: 1rem;
}

.mmp-auth__note {
    margin: 1.25rem 0 0;
    font-size: 0.8rem;
    color: var(--mmp-text-muted);
}

.mmp-auth__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

.mmp-auth__actions form {
    margin: 0;
}

.mmp-auth__form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.mmp-auth__form-row .mmp-field {
    margin-bottom: 0;
}

.mmp-auth__link {
    font-size: 0.85rem;
    color: var(--mmp-accent);
}

/* --------------------------------------------------------- error page */

.mmp-errorpage {
    display: flex;
    width: 100%;
    justify-content: center;
}

.mmp-errorpage__panel {
    width: 100%;
    max-width: 34rem;
    padding: 2.25rem;
    text-align: center;
    background: var(--mmp-surface);
    border: 1px solid var(--mmp-border);
    border-radius: var(--mmp-radius-large);
    box-shadow: var(--mmp-shadow);
}

.mmp-errorpage__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.mmp-errorpage__brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, #2f6fd0, #1d4e9c);
    border-radius: var(--mmp-radius);
}

.mmp-errorpage__brand-text {
    font-weight: 600;
}

/*
    The status code, set large and quiet. It is decorative — the heading carries the meaning and is
    what a screen reader announces — so it is aria-hidden and low-contrast on purpose.
*/
.mmp-errorpage__code {
    margin: 0;
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--mmp-border-strong);
}

.mmp-errorpage__title {
    margin: 0.5rem 0 0.6rem;
    font-size: 1.5rem;
    line-height: 1.3;
}

.mmp-errorpage__message {
    margin: 0 auto 1rem;
    max-width: 42ch;
    color: var(--mmp-text-muted);
}

.mmp-errorpage__reference {
    margin: 0 0 1.25rem;
    font-size: 0.9rem;
}

.mmp-errorpage__reference code {
    padding: 0.1rem 0.4rem;
    background: var(--mmp-surface-sunken);
    border-radius: var(--mmp-radius);
}

.mmp-errorpage__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
}

.mmp-errorpage__contact-note {
    font-size: 0.9rem;
    color: var(--mmp-text-muted);
}

.mmp-errorpage__hint {
    margin: 1.5rem 0 0;
    font-size: 0.8rem;
    color: var(--mmp-text-muted);
}

/* --------------------------------------------------------- page chrome */

.mmp-page__header {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.mmp-page__title {
    margin: 0.2rem 0 0.25rem;
    font-size: 1.6rem;
    line-height: 1.25;
}

.mmp-page__subtitle {
    margin: 0;
    max-width: 60ch;
    color: var(--mmp-text-muted);
}

.mmp-page__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.mmp-page-status {
    padding: 2.5rem 0;
}

.mmp-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--mmp-text-muted);
}

.mmp-breadcrumb a {
    color: var(--mmp-text-muted);
    text-decoration: none;
}

.mmp-breadcrumb a:hover {
    color: var(--mmp-accent);
    text-decoration: underline;
}

/* ------------------------------------------------------------ toolbar */

.mmp-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    width: 100%;
}

.mmp-toolbar__search {
    flex: 1 1 18rem;
    min-width: 14rem;
}

.mmp-toolbar__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

/* --------------------------------------------------------- grid cells */

.mmp-match-cell {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.mmp-match-cell__title {
    font-weight: 600;
    color: var(--mmp-text);
    text-decoration: none;
}

.mmp-match-cell__title:hover {
    color: var(--mmp-accent);
    text-decoration: underline;
}

.mmp-match-cell__meta {
    font-size: 0.8rem;
    color: var(--mmp-text-muted);
}

.mmp-match-cell__source {
    font-weight: 500;
}

.mmp-match-cell__separator {
    margin: 0 0.3rem;
}

.mmp-match-cell__link {
    font-size: 0.8rem;
}

.mmp-match-cell__error {
    font-size: 0.8rem;
    color: var(--mmp-danger);
    overflow-wrap: anywhere;
}

.mmp-grid__row--muted {
    opacity: 0.68;
}

.mmp-grid__row--danger td:first-child {
    box-shadow: inset 3px 0 0 var(--mmp-danger);
}

/*
   A left-aligned strip of related buttons inside a form — the cron presets on the crawl
   schedule editor.

   This replaced .mmp-row-actions there once the grids moved their row buttons into
   AppActionMenu. That class right-aligned its contents, which was right for a grid's last
   column and wrong for a field sitting under a label: the presets drifted to the far edge,
   away from the control they write into.
*/
.mmp-button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-start;
}

/* ------------------------------------------------- reference library */

.mmp-upload-outcomes {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mmp-panel__section {
    margin-top: 1rem;
}

.mmp-panel__subtitle {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 600;
}

/* ------------------------------------------------------ external link */

.mmp-external-link {
    display: inline-flex;
    align-items: baseline;
    gap: 0.2rem;
    overflow-wrap: anywhere;
}

.mmp-external-link__icon {
    font-size: 0.75em;
}

/* ------------------------------------------------------------- panels */

.mmp-panel {
    padding: 1.1rem 1.25rem 1.25rem;
    margin-bottom: 1.25rem;
    background: var(--mmp-surface);
    border: 1px solid var(--mmp-border);
    border-radius: var(--mmp-radius-large);
}

.mmp-panel__header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.85rem;
}

.mmp-panel__title {
    margin: 0;
    font-size: 1.05rem;
}

.mmp-panel__lead,
.mmp-modal__lead {
    margin: 0 0 1rem;
    color: var(--mmp-text-muted);
}

.mmp-definition {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
}

.mmp-definition__row {
    display: grid;
    grid-template-columns: minmax(7rem, 32%) 1fr;
    gap: 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--mmp-border);
}

.mmp-definition__row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.mmp-definition dt {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mmp-text-muted);
}

.mmp-definition dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.mmp-alert__quote {
    margin: 0.4rem 0 0;
    padding-left: 0.75rem;
    border-left: 3px solid currentcolor;
    font-style: italic;
}

.mmp-alert__list {
    margin: 0.25rem 0 0;
    padding-left: 1.1rem;
}

/*
   A short, unadorned list of values — the crawl schedule editor's occurrence preview and
   the schedule details page's upcoming occurrences. Bullets would imply the items are
   separate points; these are one sequence, so they read better as plain lines.
*/
.mmp-plain-list {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0.35rem 0 0;
    padding: 0;
    list-style: none;
    font-variant-numeric: tabular-nums;
}

/*
    A plain-list row that carries an action button — the crawl schedule's report
    recipients (Claude.md section 66.2). The value takes the space and the button sits at
    the end, so a long address wraps instead of pushing the control off the row.
*/
.mmp-inline-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--mmp-border-subtle, rgba(0, 0, 0, 0.08));
}

.mmp-inline-actions:last-child {
    border-bottom: none;
}

.mmp-inline-actions > span {
    overflow-wrap: anywhere;
}

/* ------------------------------------------------- match comparison */

.mmp-scorecard {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-start;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.25rem;
    background: var(--mmp-surface);
    border: 1px solid var(--mmp-border);
    border-radius: var(--mmp-radius-large);
}

.mmp-scorecard__overall {
    flex: 0 0 auto;
}

.mmp-scorecard__components {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 0;
}

.mmp-scorecard__component dt {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--mmp-text-muted);
}

.mmp-scorecard__component dd {
    margin: 0.1rem 0 0;
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
}

.mmp-scorecard__version {
    font-size: 0.8rem;
    color: var(--mmp-text-muted);
}

.mmp-scorecard__terms {
    flex: 1 1 16rem;
}

.mmp-scorecard__terms-title {
    margin: 0 0 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--mmp-text-muted);
}

.mmp-termlist {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mmp-termlist__item {
    padding: 0.1rem 0.45rem;
    font-size: 0.8rem;
    background: var(--mmp-accent-soft);
    color: var(--mmp-accent-strong);
    border-radius: 999px;
}

.mmp-comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
    gap: 1.25rem;
}

.mmp-comparison__side {
    padding: 1.1rem 1.25rem 1.25rem;
    background: var(--mmp-surface);
    border: 1px solid var(--mmp-border);
    border-radius: var(--mmp-radius-large);
}

.mmp-comparison__header {
    margin-bottom: 0.9rem;
}

.mmp-comparison__eyebrow {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--mmp-text-muted);
}

.mmp-comparison__title {
    margin: 0.15rem 0 0;
    font-size: 1.15rem;
    line-height: 1.35;
}

.mmp-comparison__section-title {
    margin: 1.1rem 0 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--mmp-text-muted);
}

.mmp-comparison__summary p {
    margin: 0;
}

.mmp-comparison__evidence,
.mmp-comparison__images {
    margin-top: 0.5rem;
}

.mmp-comparison__actions {
    margin-top: 1.1rem;
}

/* ------------------------------------------------------ detail layout */

.mmp-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(17rem, 1fr);
    gap: 1.25rem;
    align-items: start;
}

/*
    min-width: 0 on both columns is load-bearing, not decoration. A grid item defaults to
    min-width: auto, which refuses to shrink below its content — so one long unbroken URL in the
    content column would push the sidebar off the page instead of wrapping.
*/
.mmp-detail-layout__main,
.mmp-detail-layout__aside {
    min-width: 0;
}

@media (max-width: 60rem) {
    .mmp-detail-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* -------------------------------------------------------- scraped body */

.mmp-segmented {
    display: inline-flex;
    border: 1px solid var(--mmp-border);
    border-radius: var(--mmp-radius);
    overflow: hidden;
}

.mmp-segmented__button {
    padding: 0.25rem 0.7rem;
    font: inherit;
    font-size: 0.8rem;
    color: var(--mmp-text-muted);
    background: var(--mmp-surface);
    border: none;
    cursor: pointer;
}

.mmp-segmented__button--active {
    color: var(--mmp-accent-strong);
    background: var(--mmp-accent-soft);
    font-weight: 600;
}

/*
    Container for the stored sanitized HTML. Deliberately opinionated about width and about
    images: scraped markup carries whatever dimensions its origin used, and without these caps a
    single wide table or oversized image would stretch the whole page layout.
*/
.mmp-scraped-body {
    max-width: 72ch;
    overflow-wrap: anywhere;
}

.mmp-scraped-body img,
.mmp-scraped-body table {
    max-width: 100%;
}

.mmp-scraped-body img {
    height: auto;
}

.mmp-scraped-body table {
    display: block;
    overflow-x: auto;
}

.mmp-scraped-text {
    max-width: 82ch;
    max-height: 40rem;
    overflow: auto;
    padding: 0.9rem;
    margin: 0;
    font-family: var(--mmp-font-mono);
    font-size: 0.82rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: var(--mmp-surface-sunken);
    border-radius: var(--mmp-radius);
}

/* ------------------------------------------------- related / timeline */

.mmp-related,
.mmp-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mmp-related__item,
.mmp-timeline__item {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--mmp-border);
}

.mmp-related__item:last-child,
.mmp-timeline__item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.mmp-related__body,
.mmp-timeline__body {
    min-width: 0;
}

.mmp-related__title {
    font-weight: 600;
    color: var(--mmp-text);
    text-decoration: none;
}

.mmp-related__title:hover {
    color: var(--mmp-accent);
    text-decoration: underline;
}

.mmp-related__meta,
.mmp-timeline__meta {
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
    color: var(--mmp-text-muted);
}

/* ---------------------------------------------------------------- form */

.mmp-form {
    max-width: 52rem;
}

.mmp-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

/* --------------------------------------------------------- crawl pages */

.mmp-crawl-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.mmp-crawl-list__item {
    padding: 1.1rem 1.25rem 1.25rem;
    background: var(--mmp-surface);
    border: 1px solid var(--mmp-border);
    border-radius: var(--mmp-radius-large);
}

.mmp-crawl-list__header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.9rem;
}

.mmp-crawl-list__title {
    margin: 0;
    font-size: 1.1rem;
}

.mmp-crawl-list__title a {
    color: var(--mmp-text);
    text-decoration: none;
}

.mmp-crawl-list__title a:hover {
    color: var(--mmp-accent);
    text-decoration: underline;
}

.mmp-crawl-list__meta {
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
    color: var(--mmp-text-muted);
}

.mmp-crawl-list__counters,
.mmp-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 0.75rem;
    margin: 1rem 0 0;
}

.mmp-metrics {
    margin-top: 0;
}

.mmp-crawl-list__counters > div,
.mmp-metrics__item {
    padding: 0.5rem 0.7rem;
    background: var(--mmp-surface-sunken);
    border-radius: var(--mmp-radius);
}

.mmp-crawl-list__counters dt,
.mmp-metrics__item dt {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--mmp-text-muted);
}

.mmp-crawl-list__counters dd,
.mmp-metrics__item dd {
    margin: 0.1rem 0 0;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------- framework connection-failure banner */

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgb(0 0 0 / 20%);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ---------------------------------------------------------------------------
   Application settings (Claude.md section 23.14)

   Two columns on a wide screen — section list beside the section being edited —
   collapsing to one on a narrow one, where the list becomes a short scrollable
   strip above the panel rather than a full-height column pushing the form off
   the screen.
   --------------------------------------------------------------------------- */

.mmp-settings {
    display: grid;
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.mmp-settings__nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.mmp-settings__nav-button {
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.mmp-settings__nav-button:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.mmp-settings__nav-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.mmp-settings__nav-button--active {
    background-color: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.12);
    font-weight: 600;
}

.mmp-settings__panel {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

@media (max-width: 60rem) {
    .mmp-settings {
        grid-template-columns: minmax(0, 1fr);
    }

    .mmp-settings__nav-list {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .mmp-settings__nav-button {
        width: auto;
    }
}

/* ------------------------------------------------------------ help centre */

/*
    The Help Center (Claude.md sections 23.15 and 67). Everything here is static content, so the
    styling is about readability rather than state: measured line lengths, clear step numbering,
    and headings that separate one answer from the next.
*/

/* A page heading with its contextual help icon beside it. The icon is aligned to the heading's
   text baseline rather than to the block, so it does not float above a two-line title. */
.mmp-page__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem;
}

/*
    Help search in the dark navigation surface.

    The component library styles the search box for a light panel, which is right everywhere else
    it is used. Re-pointing it at the navigation's tokens means restyling `__field` — the pill
    that carries the background and the border — and only the text colour on `__input`, which the
    library deliberately leaves transparent. Colouring the input instead paints a dark rectangle
    inside a white pill.

    `color-scheme: dark` is set on the wrapper because the page as a whole declares
    `color-scheme: light`; without it the browser renders the caret and the native search
    affordances for a light field over a dark background.
*/
.mmp-nav__help-search {
    display: none;
    color-scheme: dark;
}

@media (min-width: 62rem) {
    .mmp-nav__help-search {
        display: block;

        /* The library sets min-width: 14rem on .mmp-search, so anything narrower than that is
           ignored; 15rem is the smallest width that is actually honoured here. */
        width: 15rem;
    }
}

.mmp-nav__help-search .mmp-search__field {
    padding: 0.2rem 0.5rem;
    background: var(--mmp-nav-surface-raised);
    border-color: var(--mmp-nav-border);
}

.mmp-nav__help-search .mmp-search__field:focus-within {
    border-color: var(--mmp-nav-accent);
}

.mmp-nav__help-search .mmp-search__input {
    font-size: 0.85rem;
    color: var(--mmp-nav-text);
}

.mmp-nav__help-search .mmp-search__input::placeholder,
.mmp-nav__help-search .mmp-search__glyph,
.mmp-nav__help-search .mmp-search__clear {
    color: var(--mmp-nav-text-muted);
}

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

/* The landing page's own search box. Held to a readable measure rather than the panel's full
   width — a search field as wide as the page invites a sentence, and the match is a substring. */
.mmp-help-search__input {
    max-width: 32rem;
}

.mmp-help-search__results {
    margin-top: 1rem;
}

.mmp-help-search__count {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    color: var(--mmp-text-muted);
}

.mmp-help-search__group + .mmp-help-search__group {
    margin-top: 1rem;
}

.mmp-help-search__group-title,
.mmp-help-group__title {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mmp-text-muted);
}

.mmp-help-group + .mmp-help-group {
    margin-top: 1.25rem;
}

.mmp-help-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}

.mmp-help-list__item {
    padding: 0.65rem 0.8rem;
    background: var(--mmp-surface-raised);
    border: 1px solid var(--mmp-border);
    border-radius: var(--mmp-radius);
}

.mmp-help-list__title {
    font-weight: 600;
}

.mmp-help-list__summary {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--mmp-text-muted);
}

/* --- pipeline overview --- */

.mmp-help-pipeline {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0 0 0 1.4rem;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}

.mmp-help-pipeline__step {
    padding-left: 0.35rem;
}

.mmp-help-pipeline__title {
    font-weight: 600;
}

.mmp-help-pipeline__description {
    margin: 0.2rem 0 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--mmp-text-muted);
}

/* --- quick start --- */

.mmp-help-checklist {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    padding: 0 0 0 1.5rem;
}

.mmp-help-checklist__item {
    padding-left: 0.35rem;
}

.mmp-help-checklist__title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 600;
}

.mmp-help-checklist__description {
    margin: 0.2rem 0 0;
    max-width: 70ch;
    line-height: 1.55;
    color: var(--mmp-text-muted);
}

.mmp-help-checklist__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.4rem 0 0;
    font-size: 0.875rem;
}

/* --- topic and FAQ bodies --- */

.mmp-help-body__heading {
    margin: 1.35rem 0 0.4rem;
    font-size: 1.05rem;
}

.mmp-help-body__heading:first-child {
    margin-top: 0;
}

.mmp-help-body__paragraph {
    margin: 0 0 0.75rem;
    max-width: 72ch;
    line-height: 1.6;
}

.mmp-help-body__steps,
.mmp-help-body__bullets {
    margin: 0 0 0.85rem;
    padding-left: 1.4rem;
    max-width: 72ch;
    line-height: 1.6;
}

.mmp-help-body__steps li,
.mmp-help-body__bullets li {
    margin-bottom: 0.35rem;
}

.mmp-help-body__note {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0 0 0.85rem;
    padding: 0.65rem 0.85rem;
    max-width: 72ch;
    line-height: 1.6;
    background: var(--mmp-info-soft);
    border-left: 3px solid var(--mmp-info);
    border-radius: var(--mmp-radius);
}

.mmp-help-body__note-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mmp-info);
}

.mmp-help-body__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0.5rem 0 0;
    padding-top: 0.6rem;
    font-size: 0.875rem;
    border-top: 1px solid var(--mmp-border);
}

/* --- glossary --- */

.mmp-help-glossary {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin: 0;
}

.mmp-help-glossary__entry {
    padding-top: 0.9rem;
    border-top: 1px solid var(--mmp-border);

    /* Anchored links land here, so leave room for the heading not to sit against the
       viewport edge. */
    scroll-margin-top: 1rem;
}

.mmp-help-glossary__entry:first-child {
    padding-top: 0;
    border-top: 0;
}

.mmp-help-glossary__term {
    font-size: 1.02rem;
    font-weight: 600;
}

.mmp-help-glossary__definition {
    margin: 0.25rem 0 0;
    max-width: 72ch;
}

.mmp-help-glossary__summary {
    margin: 0 0 0.5rem;
    line-height: 1.6;
}

/* The FAQ's sections are anchor targets too. */
.mmp-help-body[id] {
    scroll-margin-top: 1rem;
}

/* Plain wrappers around the Help Center's repeated sections. They exist so each loop sits
   inside an element rather than directly in a conditional block, which is the convention every
   other page in this project follows; the panels and groups inside them already carry their own
   spacing, so these add none. */
.mmp-help-groups,
.mmp-help-faq,
.mmp-help-search__groups {
    display: block;
}