/* MTMN Explorer Widget – embeddable in wiki pages */

.mtmn-explorer {
    border: 1px solid #E5E5E0;
    border-radius: 10px;
    background: #FAFAFA;
    overflow: hidden;
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    color: #2D3436;
    margin: 1.5rem 0;
}
.mtmn-explorer:focus { outline: 2px solid rgba(46,139,114,0.3); outline-offset: 2px; }

/* ── Header bar ─────────────────────────────────────────── */
.mtmn-explorer-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    background: #F3F4F1;
    border-bottom: 1px solid #E5E5E0;
    flex-wrap: wrap;
}
.mtmn-explorer-header label {
    font-weight: 600;
    font-size: 0.82rem;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.mtmn-explorer-header input[type="number"] {
    width: 4rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid #E5E5E0;
    border-radius: 5px;
    font-size: 0.85rem;
    font-family: inherit;
    color: #2D3436;
    background: #fff;
    outline: none;
}
.mtmn-explorer-header input[type="number"]:focus { border-color: #2E8B72; }
.me-n-group {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.me-generate {
    padding: 0.25rem 0.7rem;
    background: #2E8B72;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}
.me-generate:hover { background: #1E7B62; }
.me-status {
    width: 8px; height: 8px; border-radius: 50%; background: #E5E5E0; flex-shrink: 0;
}
.me-status.connected { background: #5FA84E; }
.me-status.connecting { background: #D4A03A; animation: me-pulse 1.5s infinite; }
@keyframes me-pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* ── Nav buttons (+/-/◀/▶) ────────────────────────────── */
.me-nav-btn {
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #E5E5E0; border-radius: 4px;
    background: #fff; color: #6B7280;
    font-size: 0.7rem; font-family: inherit; font-weight: 600;
    cursor: pointer; padding: 0;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    line-height: 1;
}
.me-nav-btn:hover { background: #E8F5F0; border-color: #2E8B72; color: #2E8B72; }

/* ── Selected badge ───────────────────────────────────── */
.me-selected-badge {
    display: flex; align-items: center; gap: 0.25rem;
    padding: 0.15rem 0.35rem;
    background: rgba(46,139,114,0.06);
    border: 1px solid rgba(46,139,114,0.2);
    border-radius: 5px;
    transition: opacity 0.2s, transform 0.2s;
}
.me-selected-badge.me-hidden { display: none; }
.me-badge-text {
    font-size: 0.78rem; font-weight: 700;
    font-family: 'Menlo', 'Consolas', monospace;
    padding: 0 0.15rem;
}

/* ── Layout pills ──────────────────────────────────────── */
.me-layout-pills {
    display: flex; gap: 2px; background: #E5E5E0; border-radius: 5px; padding: 2px;
}
.me-layout-pills button {
    padding: 3px 5px; border: none; border-radius: 4px;
    cursor: pointer; background: transparent; color: #6B7280;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.me-layout-pills button.active {
    background: #fff; color: #2D3436; box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.me-layout-pills button:hover:not(.active) { color: #2D3436; }

/* ── Detail level pills ─────────────────────────────────── */
.me-detail-pills {
    display: flex; gap: 2px; margin-left: auto;
    background: #E5E5E0; border-radius: 5px; padding: 2px;
}
.me-detail-pills button {
    padding: 0.2rem 0.6rem; font-size: 0.7rem; font-family: inherit; font-weight: 500;
    border: none; border-radius: 4px; cursor: pointer;
    background: transparent; color: #6B7280;
    transition: background 0.15s, color 0.15s;
}
.me-detail-pills button.active {
    background: #fff; color: #2D3436; box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.me-detail-pills button:hover:not(.active) { color: #2D3436; }

/* ── Body layout ────────────────────────────────────────── */
.mtmn-explorer-body {
    display: flex; gap: 0; align-items: flex-start; width: 100%;
}
.mtmn-explorer.mode-compact .mtmn-explorer-body { flex-direction: row; }
.mtmn-explorer.mode-compact .me-grid-pane { flex: 3 1 0; }
.mtmn-explorer.mode-compact .me-info-pane {
    flex: 1 1 180px; max-width: 220px;
    border-left: 1px solid #E5E5E0; border-top: none;
}

.me-grid-pane {
    flex: 2 1 0;
    padding: 0.5rem; min-width: 0; position: relative;
    transition: flex-basis 0.35s ease, flex-grow 0.35s ease;
}
.me-info-pane {
    flex: 0 0 240px;
    min-width: 0;
    border-left: 1px solid #E5E5E0;
    padding: 0.85rem 1rem;
    overflow-y: visible;
    background: #fff;
    transition: flex-basis 0.35s ease, flex-grow 0.35s ease;
}
.me-info-content {
    display: block;
    min-width: 0;
    width: 100%;
}
.mtmn-explorer.mode-inline .me-info-pane { flex: 0 0 240px; }
.mtmn-explorer.mode-full .me-info-pane { flex: 0 0 360px; }

/* ── Layout modes ─────────────────────────────────────── */
.layout-lattice .me-grid-pane {
    flex: 2 1 0; max-height: calc(100vh - 120px); position: sticky; top: 0; overflow: hidden;
}
.layout-lattice .me-info-pane { flex: 1 1 240px; }
.layout-summary .me-grid-pane {
    flex: 0 0 clamp(220px, 24vw, 320px);
    min-width: 220px;
    max-height: 100vh;
    position: sticky;
    top: 0;
    overflow: hidden;
}
.layout-summary .me-info-pane {
    flex: 1 1 auto;
    max-width: none;
    max-height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.layout-summary .me-info-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.85rem 1rem;
    align-items: start;
    justify-items: stretch;
}
.layout-summary .me-info-section {
    max-width: none;
    margin-bottom: 0;
    padding: 0.8rem 0.9rem;
    border: 1px solid #ECEFEA;
    border-radius: 10px;
    background: linear-gradient(180deg, #FFFFFF, #FCFCFA);
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.layout-summary .me-info-section-wide { grid-column: 1 / -1; }
.layout-summary .me-roots-wrap { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.layout-summary .me-roots-scroll { flex: 1 1 200px; min-width: 180px; }
.layout-summary .me-roots-plot { flex: 0 0 auto; }
.layout-summary .me-line-chart { width: 100%; }

.mtmn-explorer.mode-compact.layout-lattice .me-grid-pane { max-height: 60vh; }
.mtmn-explorer.mode-compact.layout-summary .me-grid-pane {
    flex: 0 0 clamp(200px, 32%, 280px);
    max-height: 50vh;
}
.mtmn-explorer.mode-compact.layout-summary .me-info-pane {
    flex: 1 1 auto;
    max-width: none;
}

/* ── Grid ───────────────────────────────────────────────── */
.me-table-grid {
    display: grid; gap: 1px; width: 100%;
}
.me-cell {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 500;
    font-family: 'Menlo', 'Consolas', monospace;
    border-radius: 2px; cursor: pointer;
    background: #F3F4F1; color: #6B7280;
    transition: background 0.1s, color 0.1s, box-shadow 0.1s;
}
.me-cell:hover { background: #E5E5E0; color: #2D3436; }
.me-cell.highlighted {
    background: rgba(46,139,114,0.25); color: #2E8B72; font-weight: 800;
    box-shadow: 0 0 0 2px rgba(46,139,114,0.5);
    z-index: 1; position: relative;
}
.me-hull-svg, .me-support-svg {
    position: absolute; pointer-events: none; overflow: visible;
}

/* ── Info panel sections ────────────────────────────────── */
.me-info-section { margin-bottom: 0.85rem; }
.me-info-section:last-child { margin-bottom: 0; }
.me-info-section h4 {
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: #6B7280; font-weight: 600; margin-bottom: 0.35rem;
    padding-bottom: 0.2rem; border-bottom: 1px solid #F0F0ED;
}
.me-kv {
    display: grid; grid-template-columns: auto 1fr;
    gap: 0.15rem 0.75rem; font-size: 0.82rem; line-height: 1.6;
}
.me-kv dt { font-weight: 500; color: #6B7280; white-space: nowrap; }
.me-kv dd { font-family: 'Menlo', 'Consolas', monospace; font-size: 0.8rem; }
.me-sym-badge {
    display: inline-block; font-size: 0.68rem; font-weight: 600;
    padding: 0.1rem 0.45rem; border-radius: 3px;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.me-sym-badge.sym-yes { background: #ECF5E8; color: #3d8a32; }
.me-sym-badge.sym-no { background: #F8E8E2; color: #a8523a; }

/* ── Area toggles ──────────────────────────────────────── */
.me-area-toggles { display: flex; gap: 3px; margin-bottom: 0.35rem; }
.me-area-toggle {
    padding: 0.15rem 0.5rem; font-size: 0.65rem; font-family: inherit; font-weight: 600;
    border: 1px solid #E5E5E0; border-radius: 4px; cursor: pointer;
    background: #fff; color: #6B7280;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.me-area-toggle.active { color: #fff; border-color: transparent; }
.me-area-toggle.at-full.active { background: #5578A8; }
.me-area-toggle.at-s1.active { background: #2E8B72; }
.me-area-toggle.at-s2.active { background: #C4613E; }
.me-area-toggle:hover:not(.active) { border-color: #B0B0A8; }

/* ── Area chart ──────────────────────────────────────── */
.me-area-chart {
    display: flex; align-items: flex-end; gap: 2px; height: 60px; padding: 0.25rem 0;
}
.me-bar-wrapper {
    flex: 1; display: flex; flex-direction: column-reverse;
    min-width: 3px; cursor: pointer; border-radius: 2px 2px 0 0;
    overflow: hidden; transition: height 0.3s ease; position: relative;
}
.me-bar-wrapper.selected { box-shadow: 0 0 0 2px #2E8B72; border-radius: 3px 3px 0 0; }
.me-bar-wrapper:hover { opacity: 0.85; }
.me-area-bar { width: 100%; min-height: 1px; transition: height 0.3s ease; flex-shrink: 0; }
.me-area-bar.bar-s { background: #5578A8; }
.me-area-bar.bar-s1 { background: #2E8B72; }
.me-area-bar.bar-s2 { background: #C4613E; }
.me-area-legend {
    display: flex; gap: 0.75rem; font-size: 0.68rem; color: #6B7280;
    margin-top: 0.3rem; flex-wrap: wrap;
}
.me-area-legend span::before {
    content: ''; display: inline-block; width: 8px; height: 8px;
    border-radius: 2px; margin-right: 4px; vertical-align: middle;
}
.me-area-legend .leg-s::before { background: #5578A8; }
.me-area-legend .leg-s1::before { background: #2E8B72; }
.me-area-legend .leg-s2::before { background: #C4613E; }

/* ── Polynomial / chart styles ──────────────────────────── */
.me-line-chart {
    display: block; margin: 0.4rem 0;
    background: #FAFAFA; border: 1px solid #F0F0ED; border-radius: 4px;
}
.me-coeff-row { font-size: 0.72rem; color: #6B7280; margin-top: 0.35rem; line-height: 1.7; word-break: break-all; }
.me-coeff-label { font-weight: 600; color: #6B7280; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; }
.me-coeff { font-family: 'Menlo', 'Consolas', monospace; font-size: 0.72rem; background: #F3F4F1; padding: 0 3px; border-radius: 2px; }

/* ── Roots of unity ────────────────────────────────────── */
.me-roots-wrap h4 { margin-top: 0.6rem; }
.me-roots-scroll { max-height: 240px; overflow-y: auto; }
.me-roots-table { width: 100%; border-collapse: collapse; font-size: 0.72rem; margin: 0.3rem 0; }
.me-roots-table th {
    text-align: left; font-weight: 600; color: #6B7280; font-size: 0.65rem;
    text-transform: uppercase; letter-spacing: 0.04em;
    padding: 0.2rem 0.4rem; border-bottom: 1px solid #E5E5E0;
}
.me-roots-table td {
    padding: 0.15rem 0.4rem; font-family: 'Menlo', 'Consolas', monospace;
    font-size: 0.7rem; border-bottom: 1px solid #F0F0ED;
}
.me-roots-table tr { transition: background 0.12s; cursor: pointer; }
.me-roots-table tr.highlighted { background: rgba(196,97,62,0.08); }
.me-roots-table tr:hover { background: rgba(46,139,114,0.04); }
.me-roots-plot { display: block; margin: 0.35rem auto; }

/* ── Support function ──────────────────────────────────── */
.me-support-info { font-size: 0.72rem; color: #6B7280; margin-top: 0.2rem; }
.me-support-switches { font-size: 0.72rem; color: #6B7280; margin-top: 0.3rem; line-height: 1.6; }
.me-support-pinned {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.7rem; color: #C4613E; font-weight: 600;
    background: rgba(196,97,62,0.08);
    border: 1px solid rgba(196,97,62,0.2);
    border-radius: 5px; padding: 0.2rem 0.5rem;
    margin-top: 0.35rem;
}
.me-support-unpin {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border: none; border-radius: 3px;
    background: rgba(196,97,62,0.12); color: #C4613E;
    font-size: 0.7rem; cursor: pointer;
    transition: background 0.12s;
}
.me-support-unpin:hover { background: rgba(196,97,62,0.25); }

/* ── Cross references ───────────────────────────────────── */
.me-refs { list-style: none; padding: 0; }
.me-refs li { margin-bottom: 0.3rem; }
.me-refs a { font-size: 0.8rem; color: #2E8B72; text-decoration: none; transition: color 0.15s; }
.me-refs a:hover { color: #1E7B62; text-decoration: underline; }

/* ── Explore prompts ────────────────────────────────────── */
.me-prompts { list-style: none; padding: 0; }
.me-prompts li {
    font-size: 0.78rem; color: #6B7280; padding: 0.3rem 0.5rem; margin-bottom: 0.2rem;
    background: #F7F7F5; border-radius: 4px; cursor: pointer; transition: background 0.15s;
}
.me-prompts li:hover { background: #E8F5F0; color: #2E8B72; }
.me-prompts li::before { content: '\2192\00a0'; color: #2E8B72; }

/* ── Boundary / lines toggle ──────────────────────────── */
.me-toggle-row { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.4rem; flex-wrap: wrap; }
.me-toggle-row label {
    font-size: 0.75rem; color: #6B7280; cursor: pointer;
    display: flex; align-items: center; gap: 0.25rem;
}
.me-toggle-row input[type="checkbox"] { accent-color: #2E8B72; }
.me-toggle-row input[type="checkbox"]:disabled + * { opacity: 0.45; }

/* ── Header toggle (Lines checkbox) ──────────────────── */
.me-header-toggle {
    display: flex; align-items: center; gap: 0.25rem;
    font-size: 0.72rem; font-weight: 500; color: #6B7280;
    cursor: pointer; white-space: nowrap;
    text-transform: none; letter-spacing: 0;
}
.me-header-toggle input[type="checkbox"] { accent-color: #2E8B72; }
.me-header-toggle input[type="checkbox"]:disabled { opacity: 0.35; }
.me-header-toggle:has(input:disabled) { opacity: 0.45; cursor: default; }

/* ── Placeholder ────────────────────────────────────────── */
.me-placeholder { color: #6B7280; font-style: italic; font-size: 0.82rem; padding: 1rem 0; }

/* ── Explore button (figure auto-detect) ──────────────── */
.figure-with-explorer { position: relative; }
.explore-btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    margin: 0.5rem auto 1rem; padding: 0.4rem 1rem;
    background: #F3F4F1; border: 1px solid #E5E5E0; border-radius: 6px;
    color: #2E8B72; font-size: 0.82rem; font-weight: 500; font-family: inherit;
    cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.explore-btn:hover { background: #E8F5F0; border-color: #2E8B72; }
.explore-btn::before { content: '\25B6'; font-size: 0.65rem; }
.figure-explorer-container { overflow: hidden; max-height: 0; transition: max-height 0.4s ease; }
.figure-explorer-container.open { max-height: none; }

/* ── Concept-page bottom explorer panel ─────────────────── */
.wiki-explorer-panel { margin-top: 3rem; border-top: 1px solid #E5E5E0; padding-top: 1rem; }
.wiki-explorer-panel-toggle {
    display: flex; align-items: center; gap: 0.5rem;
    cursor: pointer; user-select: none; background: none; border: none;
    font-family: inherit; font-size: 1rem; font-weight: 600; color: #2D3436;
    padding: 0.5rem 0; width: 100%; text-align: left;
}
.wiki-explorer-panel-toggle .chevron {
    display: inline-block; width: 0; height: 0;
    border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-top: 6px solid currentColor; transition: transform 0.2s;
}
.wiki-explorer-panel-toggle.collapsed .chevron { transform: rotate(-90deg); }
.wiki-explorer-panel-body { overflow: visible; max-height: 5000px; transition: max-height 0.35s ease; }
.wiki-explorer-panel-body.collapsed { max-height: 0 !important; overflow: hidden; }

/* ── Chart tooltip ─────────────────────────────────────── */
.me-chart-tooltip {
    position: fixed; display: none;
    background: rgba(45,52,54,0.92); color: #fff;
    font-size: 0.72rem; padding: 0.35rem 0.55rem; border-radius: 5px;
    pointer-events: none; z-index: 10000;
    white-space: pre-line; line-height: 1.45;
    font-family: 'Menlo', 'Consolas', monospace;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18); max-width: 220px;
    min-width: 60px;
}

/* ── LaTeX blocks ──────────────────────────────────────── */
.me-latex-block { margin: 0.35rem 0; font-size: 0.82rem; line-height: 1.6; overflow-x: auto; }
.me-latex-block .katex { font-size: 0.88em; }
.me-selected-term { color: #9B5BA0; font-weight: 500; }
.me-poly-explicit { font-size: 0.78rem; }

/* ── Pick's theorem section ───────────────────────────── */
.me-picks-section { margin-top: 0.3rem; margin-bottom: 0.3rem; }
.me-picks-group { margin-bottom: 0.45rem; }
.me-picks-group-label {
    font-size: 0.68rem; font-weight: 600; color: #6B7280;
    text-transform: uppercase; letter-spacing: 0.03em;
    margin-bottom: 0.15rem;
}
.me-picks-res-chart {
    display: flex; gap: 3px; align-items: flex-end;
    padding: 0.15rem 0;
}
.me-picks-res-col {
    display: flex; flex-direction: column; align-items: center;
    cursor: pointer; transition: opacity 0.15s;
    min-width: 18px;
}
.me-picks-res-col:hover { opacity: 0.75; }
.me-picks-res-bar {
    width: 16px; border-radius: 2px 2px 0 0;
    transition: height 0.25s ease; min-height: 2px;
}
.me-picks-res-label {
    font-size: 0.58rem; color: #6B7280; margin-top: 0.1rem;
    font-family: 'Menlo', 'Consolas', monospace;
}
.me-picks-svg { pointer-events: none; overflow: visible; }

/* ── Hoverable concept terms ──────────────────────────── */
.me-hoverable {
    cursor: pointer;
    border-bottom: 1px dotted rgba(46,139,114,0.4);
    transition: background 0.15s, border-color 0.15s;
}
.me-hoverable:hover {
    background: rgba(46,139,114,0.06);
    border-bottom-color: #2E8B72;
}

/* ── Concept popup ────────────────────────────────────── */
.me-concept-popup {
    position: fixed; z-index: 10001;
    max-width: 300px; min-width: 200px;
    background: #fff;
    border: 1px solid #E5E5E0;
    border-left: 3px solid #2E8B72;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
    padding: 0.6rem 0.8rem;
    font-size: 0.78rem; line-height: 1.55; color: #2D3436;
    opacity: 0; transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}
.me-concept-popup.visible { opacity: 1; transform: translateY(0); }
.me-concept-popup-body { }
.me-concept-popup-formula { margin-bottom: 0.25rem; }
.me-concept-popup-formula .katex { font-size: 0.85em; }
.me-concept-popup-desc { margin: 0; color: #4A5568; font-size: 0.74rem; line-height: 1.5; }
.me-concept-popup-hint {
    margin-top: 0.3rem; font-size: 0.62rem; color: #9CA3AF;
    border-top: 1px solid #F0F0ED; padding-top: 0.2rem;
}

/* ── Symmetric/compare explorer extensions ─────────────── */
.me-mode-pills {
    display: flex;
    gap: 2px;
    background: #E5E5E0;
    border-radius: 5px;
    padding: 2px;
}
.me-mode-pills button {
    padding: 0.2rem 0.55rem;
    font-size: 0.72rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: transparent;
    color: #6B7280;
    transition: background 0.15s, color 0.15s;
}
.me-mode-pills button.active {
    background: #fff;
    color: #2D3436;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.me-header-select {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.me-header-select select {
    border: 1px solid #E5E5E0;
    background: #fff;
    color: #2D3436;
    border-radius: 5px;
    padding: 0.2rem 0.35rem;
    font-size: 0.78rem;
    font-family: inherit;
}
.me-plot-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.8rem;
}
.me-plot-grid.compare {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.me-plot-card {
    border: 1px solid #E5E5E0;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}
.me-plot-card-header {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.6rem 0.75rem 0.35rem;
    border-bottom: 1px solid #F0F0ED;
    background: linear-gradient(180deg, rgba(243,244,241,0.75), rgba(255,255,255,0.85));
}
.me-plot-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #2D3436;
}
.me-plot-subtitle {
    font-size: 0.68rem;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.me-plot-svg {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    background: #FAFAFA;
}
.me-axis-label {
    fill: #6B7280;
    font-size: 10px;
    font-family: 'Lato', sans-serif;
}
.me-plot-caption {
    fill: #6B7280;
    font-size: 10px;
    font-family: 'Lato', sans-serif;
}
.me-plot-point {
    cursor: pointer;
    transition: r 0.12s ease, fill-opacity 0.12s ease;
}
.me-plot-point:hover {
    filter: brightness(1.05);
}
.me-area-block {
    margin-bottom: 0.5rem;
}
.me-area-block:last-child {
    margin-bottom: 0;
}
.me-area-block-title {
    font-size: 0.68rem;
    font-weight: 700;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.2rem;
}
.me-compare-area-wrap,
.me-compare-residue {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}
.me-residue-card {
    border: 1px solid #F0F0ED;
    border-radius: 6px;
    padding: 0.55rem 0.65rem;
    background: #FBFBFA;
}
.me-residue-card-title {
    font-size: 0.68rem;
    font-weight: 700;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
}
.me-layer-note {
    font-size: 0.78rem;
    color: #6B7280;
    margin-bottom: 0.35rem;
}
.me-layer-toolbar {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-bottom: 0.45rem;
}
.me-layer-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.me-layer-chip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    border: 1px solid #E5E5E0;
    background: #fff;
    color: #2D3436;
    border-radius: 6px;
    padding: 0.35rem 0.55rem;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}
.me-layer-chip:hover {
    border-color: #2E8B72;
    background: #F7FBF9;
}
.me-layer-chip.active {
    border-color: #D4A03A;
    background: rgba(212,160,58,0.10);
    transform: translateY(-1px);
}
.me-layer-chip-compact {
    width: auto;
    justify-content: center;
    padding: 0.3rem 0.55rem;
    font-size: 0.72rem;
}
.me-layer-main {
    font-family: 'Menlo', 'Consolas', monospace;
    font-size: 0.78rem;
}
.me-layer-meta {
    font-size: 0.7rem;
    color: #6B7280;
}
.me-clear-layer {
    margin-top: 0.45rem;
    border: 1px solid #E5E5E0;
    background: #fff;
    color: #6B7280;
    border-radius: 5px;
    padding: 0.25rem 0.45rem;
    font-size: 0.72rem;
    cursor: pointer;
    font-family: inherit;
}
.me-clear-layer:hover {
    border-color: #C4613E;
    color: #C4613E;
}
.me-clear-layer:disabled {
    opacity: 0.45;
    cursor: default;
}
.me-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.45rem;
    margin-bottom: 0.55rem;
}
.me-metric-tile {
    border: 1px solid #ECEFEA;
    border-radius: 8px;
    background: linear-gradient(180deg, #FFFFFF, #FBFBF8);
    padding: 0.5rem 0.6rem;
}
.me-metric-tile.me-layer-interactive {
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.me-metric-tile.me-layer-interactive:hover {
    border-color: #2E8B72;
    background: #F7FBF9;
    transform: translateY(-1px);
}
.me-metric-label {
    font-size: 0.62rem;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.15rem;
}
.me-metric-value {
    font-size: 0.92rem;
    font-weight: 700;
    color: #2D3436;
    font-family: 'Menlo', 'Consolas', monospace;
}
.me-metric-meta {
    margin-top: 0.12rem;
    font-size: 0.68rem;
    color: #6B7280;
}
.me-subsection-label {
    font-size: 0.66rem;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    margin-bottom: 0.35rem;
}
.me-flag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.45rem 0 0.55rem;
}
.me-flag-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    border: 1px solid #E5E5E0;
    background: #F7F7F5;
    color: #6B7280;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.me-flag-pill.active {
    border-color: rgba(46,139,114,0.25);
    background: rgba(46,139,114,0.08);
    color: #2E8B72;
}
.me-dominance-board {
    margin-bottom: 0.55rem;
}
.me-dominance-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    border: 1px solid #E5E5E0;
    border-radius: 7px;
    background: #fff;
    padding: 0.38rem 0.55rem;
    cursor: pointer;
    font-family: inherit;
    margin-bottom: 0.28rem;
    transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}
.me-dominance-row:hover {
    border-color: #2E8B72;
    background: #F7FBF9;
}
.me-dominance-row.active {
    border-color: #D4A03A;
    background: rgba(212,160,58,0.10);
    transform: translateY(-1px);
}
.me-dominance-swatch {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    flex: 0 0 10px;
}
.me-dominance-layer {
    flex: 1 1 auto;
    font-size: 0.78rem;
    font-family: 'Menlo', 'Consolas', monospace;
    text-align: left;
}
.me-dominance-meta {
    font-size: 0.7rem;
    color: #6B7280;
    white-space: nowrap;
}
.me-dominance-strip-wrap {
    margin: 0.45rem 0 0.55rem;
}
.me-strip-label {
    font-size: 0.66rem;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    margin-bottom: 0.25rem;
}
.me-dominance-strip {
    position: relative;
    height: 18px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid #E5E5E0;
    background: #F3F4F1;
}
.me-dominance-segment {
    position: absolute;
    top: 0;
    bottom: 0;
    border: none;
    padding: 0;
    cursor: pointer;
    opacity: 0.92;
}
.me-dominance-segment:hover {
    opacity: 1;
    filter: brightness(1.04);
}
.me-dominance-marker {
    position: absolute;
    top: -1px;
    bottom: -1px;
    width: 3px;
    margin-left: -1.5px;
    border: none;
    padding: 0;
    background: rgba(45,52,54,0.8);
    cursor: pointer;
}
.me-strip-meta {
    margin-top: 0.28rem;
    font-size: 0.7rem;
    color: #6B7280;
}
.me-layer-table-wrap {
    margin-top: 0.55rem;
    overflow-x: auto;
}
.me-layer-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
    background: #fff;
    border: 1px solid #ECEFEA;
    border-radius: 8px;
    overflow: hidden;
}
.me-layer-table th,
.me-layer-table td {
    padding: 0.34rem 0.45rem;
    border-bottom: 1px solid #F0F0ED;
    text-align: left;
}
.me-layer-table th {
    font-size: 0.62rem;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #FBFBFA;
    white-space: nowrap;
}
.me-layer-table td.mono {
    font-family: 'Menlo', 'Consolas', monospace;
}
.me-layer-table tbody tr {
    cursor: pointer;
    transition: background 0.12s ease;
}
.me-layer-table tbody tr:hover {
    background: rgba(46,139,114,0.05);
}
.me-layer-table tbody tr.active {
    background: rgba(212,160,58,0.10);
}
.me-layer-table tbody tr:last-child td {
    border-bottom: none;
}
.me-sort-btn {
    border: none;
    background: transparent;
    padding: 0;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}
.me-sort-btn:hover {
    color: #2E8B72;
}
.me-table-yes {
    color: #2E8B72;
    font-weight: 700;
}
.me-table-no {
    color: #9CA3AF;
}
.me-analysis-card .me-dominance-strip-wrap {
    margin-bottom: 0;
}

.me-layer-interactive.is-hovered {
    border-color: #2E8B72 !important;
    background: rgba(46,139,114,0.08) !important;
}
.me-layer-interactive.is-pinned {
    border-color: #D4A03A !important;
    background: rgba(212,160,58,0.12) !important;
    transform: translateY(-1px);
}
.me-layer-interactive.is-hovered.is-pinned {
    box-shadow: inset 0 0 0 1px rgba(46,139,114,0.2);
}
.me-layer-table tbody tr.me-layer-interactive.is-hovered {
    background: rgba(46,139,114,0.08) !important;
}
.me-layer-table tbody tr.me-layer-interactive.is-pinned {
    background: rgba(212,160,58,0.12) !important;
}
.me-dominance-segment.is-hovered {
    opacity: 1;
    filter: brightness(1.08) saturate(1.08);
}
.me-dominance-segment.is-pinned {
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.9);
}
.me-dominance-marker.is-hovered {
    background: #2E8B72;
    width: 5px;
    margin-left: -2.5px;
}
.me-dominance-marker.is-pinned {
    background: #D4A03A;
    width: 5px;
    margin-left: -2.5px;
}
.me-hyperbola-curve {
    transition: stroke-opacity 0.12s ease, stroke-width 0.12s ease, filter 0.12s ease;
}
.me-hyperbola-curve.is-hovered {
    stroke-opacity: 1 !important;
    stroke-width: 2.8px !important;
    filter: saturate(1.16);
}
.me-hyperbola-curve.is-pinned {
    stroke-opacity: 0.96 !important;
    stroke-width: 2.9px !important;
}
.me-hyperbola-hit {
    fill: none;
    pointer-events: stroke;
}
.me-area-bar.bar-sym {
    background: #D4A03A;
}
.me-area-legend .leg-sym::before {
    background: #D4A03A;
}

@media (max-width: 980px) {
    .me-plot-grid.compare,
    .me-compare-area-wrap,
    .me-compare-residue {
        grid-template-columns: minmax(0, 1fr);
    }
}