/*
    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;
}

/* ------------------------------------------------- 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;
    }
}