/* In-amp diamond plot.
   Quiet #eef1f4 field and a full-width walk, kept in this file so the page
   matches on main today and after the shared restyle lands. */

body.dp-page {
    background: #eef1f4 none;
    color: var(--ai-gray-900);
    margin: 0;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body.dp-page .ai-header {
    margin: 0;
    border-radius: 0;
    padding: 6px 16px;
    flex: 0 0 auto;
}

body.dp-page .ai-header h1 {
    font-size: 1.15rem;
    margin: 0;
    color: #fff;
}

body.dp-page .ai-site-footer {
    margin: 0;
    padding: 4px 12px 6px;
    flex: 0 0 auto;
    max-width: none;
}

.dp-shell {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}

.dp-workspace {
    height: 100%;
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
    width: 100%;
    max-width: 2200px;
    margin: 0 auto;
    padding: 8px 12px;
    min-width: 0;
    box-sizing: border-box;
}

.dp-walk,
.dp-lab {
    min-width: 0;
    min-height: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.dp-walk {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 8px 10px 10px;
}

.dp-picks { flex: 0 0 auto; }

.dp-controls,
.dp-steps {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.dp-steps { display: none; }

body[data-mode="guided"] .dp-controls { display: none; }
body[data-mode="guided"] .dp-steps {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dp-key {
    margin: 0 0 4px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--ai-gray-800);
}

.dp-seg-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}

.dp-seg {
    display: inline-flex;
    flex-shrink: 0;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #f8fafc;
    padding: 2px;
    gap: 2px;
}

.dp-seg button {
    border: 0;
    background: transparent;
    color: var(--ai-gray-800);
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
}

.dp-seg button.is-on {
    background: var(--ai-blue-800, #003087);
    color: #fff;
}

.dp-pick {
    display: block;
    margin: 2px 0 2px;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ai-gray-600, #475569);
}

.dp-select {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 2px;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    color: #1e3a5f;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 4px 8px;
}

.dp-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 4px;
    overflow: hidden;
}

.dp-presets button {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #1e3a5f;
    border-radius: 999px;
    padding: 4px 10px;
    font: inherit;
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
    line-height: 1.3;
    flex: 0 1 auto;
    white-space: nowrap;
}

.dp-presets button.is-on {
    background: #eff6ff;
    border-color: #93c5fd;
    color: var(--ai-blue-800, #003087);
}

.dp-blurb {
    margin: 0 0 2px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--ai-gray-700, #334155);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dp-grid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 4px 6px;
    align-items: center;
    margin: 4px 0;
}

.dp-grid label {
    font-size: 12px;
    font-weight: 650;
    color: var(--ai-gray-800);
}

.dp-grid input[type="number"] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font: inherit;
    font-size: 13px;
    padding: 3px 6px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
}

.dp-grid input.is-bad {
    border-color: #dc2626;
    outline: 2px solid #dc2626;
    background: #fef2f2;
}

.dp-fixes {
    margin: 4px 0 2px;
}

.dp-fix-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 2px;
}

.dp-fix-title,
.dp-fix-line {
    margin: 0;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.3;
    color: #1e293b;
}

.dp-fix-line { font-weight: 650; color: #065f46; }

body.dp-bad .dp-fix-title { color: #991b1b; }

.dp-fix {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
    margin: 0 0 3px;
}

.dp-fix p {
    margin: 0;
    font-size: 12px;
    line-height: 1.3;
    color: #1e293b;
}

.dp-fix button,
.dp-undo {
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    color: var(--ai-blue-800, #003087);
    background: #fff;
    border: 1px solid #93c5fd;
    border-radius: 6px;
    padding: 3px 8px;
    cursor: pointer;
}

body.dp-bad .dp-blurb { -webkit-line-clamp: 1; }
body.dp-bad #signal-note { display: none; }

.dp-link {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 2px 0;
    font-size: 12px;
    font-weight: 650;
}

.dp-note,
.dp-live,
.dp-idle,
.dp-slope,
.dp-read {
    margin: 2px 0;
    font-size: 12px;
    line-height: 1.35;
    color: var(--ai-gray-700, #334155);
}

.dp-head,
.dp-more {
    margin-top: 6px;
    font-size: 12px;
}

.dp-head summary,
.dp-more summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--ai-blue-800, #003087);
}

.dp-steps h2 {
    margin: 0;
    font-size: 15px;
    color: var(--ai-blue-800, #003087);
}

.dp-step-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dp-step-nav button {
    flex: 1 1 auto;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    color: var(--ai-blue-800, #003087);
    background: #fff;
    border: 1px solid #93c5fd;
    border-radius: 6px;
    padding: 5px 8px;
    cursor: pointer;
}

.dp-step-nav button:disabled {
    opacity: 0.4;
    cursor: default;
    border-color: #e2e8f0;
}

.dp-step-nav span {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
}

.dp-steps article { display: none; }
.dp-steps article.is-on { display: block; min-height: 0; overflow: hidden; }

.dp-steps article button {
    display: flex;
    gap: 8px;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: 6px 4px;
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    line-height: 1.35;
    color: var(--ai-gray-900);
}

.dp-steps article.is-on button { background: #eff6ff; }

.dp-n {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dp-lab {
    display: flex;
    flex-direction: column;
    padding: 8px 10px 6px;
    overflow: hidden;
    gap: 4px;
}

.dp-step-now { display: none; margin: 0; }

.dp-howto { margin: 0; font-size: 13px; }
.dp-howto summary {
    cursor: pointer;
    font-weight: 750;
    color: var(--ai-blue-800, #003087);
}
.dp-howto ul { margin: 4px 0 0; padding-left: 1.2em; }
.dp-howto li { margin: 0 0 2px; }

body[data-mode="guided"] .dp-howto,
body[data-mode="guided"] .dp-answers { display: none; }

.dp-stage {
    flex: 0 0 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
}

.dp-plot {
    width: 100%;
    aspect-ratio: 1;
    max-height: 100%;
    min-height: 0;
    justify-self: start;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.dp-plot svg { display: block; width: 100%; height: 100%; }

.dp-verdict {
    display: grid;
    grid-template-columns: minmax(180px, 0.9fr) minmax(0, 1.2fr);
    gap: 8px;
    align-items: start;
}

.dp-banner {
    border-radius: 8px;
    padding: 6px 8px;
    margin: 0;
}

.dp-banner.pass { background: #ecfdf5; border: 1px solid #6ee7b7; }
.dp-banner.fail { background: #fef2f2; border: 1px solid #fca5a5; }
.dp-banner.bad { background: #fffbeb; border: 1px solid #fcd34d; }

.dp-banner-k {
    margin: 0;
    font-size: 16px;
    font-weight: 750;
    line-height: 1.25;
}

.dp-banner.pass .dp-banner-k { color: #065f46; }
.dp-banner.fail .dp-banner-k { color: #991b1b; }
.dp-banner.bad .dp-banner-k { color: #92400e; }

.dp-banner-d {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.35;
    color: var(--ai-gray-900);
}

.dp-answers p {
    margin: 0 0 3px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--ai-gray-900);
}

.dp-why {
    border: 0;
    background: transparent;
    color: var(--ai-blue-800, #003087);
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    text-decoration: underline;
    cursor: pointer;
    padding: 0 2px;
}

.dp-warn {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    padding: 4px 8px;
    color: #92400e;
    font-size: 13px;
    margin: 0;
}

.dp-sch-wrap {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    align-self: stretch;
}

.dp-sch {
    width: 100%;
    height: 100%;
    display: block;
}

.dp-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    align-items: center;
}

.dp-meta .dp-legend { flex: 1 1 auto; }
.dp-meta .dp-note,
.dp-meta .dp-slope,
.dp-meta .dp-read,
.dp-meta .dp-idle { margin: 0; }

.dp-node-name,
.dp-node-val { fill: #1e293b; }
.dp-node.is-hot .dp-node-bar { stroke-width: 4; }
.dp-node.is-limit { opacity: 1; }

body.dp-focus .dp-sch .dp-wires line,
body.dp-focus .dp-sch .dp-wires path,
body.dp-focus .dp-sch .dp-junc,
body.dp-focus .dp-sch .dp-ampbox,
body.dp-focus .dp-sch .dp-node,
body.dp-focus .dp-sch .dp-r { opacity: 0.35; }

body.dp-focus .dp-sch .dp-wires line.is-hot,
body.dp-focus .dp-sch .dp-wires path.is-hot,
body.dp-focus .dp-sch .dp-junc.is-hot,
body.dp-focus .dp-sch .dp-ampbox.is-hot,
body.dp-focus .dp-sch .dp-node.is-hot,
body.dp-focus .dp-sch .dp-r.is-hot { opacity: 1; }

body.dp-focus .dp-ampbox.is-hot .dp-tri {
    stroke: var(--hot, #2563eb);
    stroke-width: 6;
}
body.dp-focus .dp-ampbox.is-hot .dp-amp,
body.dp-focus .dp-ampbox.is-hot .dp-pin { fill: var(--hot, #2563eb); }
body.dp-focus .dp-node.is-hot .dp-node-bar {
    stroke: var(--hot, #2563eb);
    stroke-width: 8;
}
body.dp-focus .dp-node.is-hot .dp-node-dot {
    stroke: var(--hot, #2563eb);
    stroke-width: 5;
}
body.dp-focus .dp-r.is-hot { fill: var(--hot, #1e293b); }

.dp-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
}

.dp-legend button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 999px;
    padding: 2px 8px;
    font: inherit;
    font-size: 12px;
    font-weight: 650;
    color: var(--ai-gray-800);
    cursor: pointer;
}

.dp-legend button.is-on { border-color: #93c5fd; background: #eff6ff; }
.dp-legend button.is-idle { opacity: 0.55; }

.dp-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
}

.dp-table-wrap { overflow: hidden; }
.dp-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.dp-table th {
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color: var(--ai-gray-600);
    padding: 4px 6px 4px 0;
    border-bottom: 1px solid #e2e8f0;
}
.dp-table td {
    padding: 3px 6px 3px 0;
    border-bottom: 1px solid #f1f5f9;
    font-variant-numeric: tabular-nums;
}
.dp-table tr.is-worst td { background: #fef2f2; }
.dp-table tr.is-hot td:first-child { box-shadow: inset 3px 0 0 var(--hot, #1d4ed8); }
.dp-table td.neg { color: #991b1b; font-weight: 700; }
.dp-table td.pos { color: #065f46; }

.dp-math { margin-top: 6px; }
.dp-math p { margin: 0 0 4px; font-size: 13px; }

.dp-corners {
    font-family: var(--ai-font-mono, ui-monospace, monospace);
    font-size: 12px;
    margin: 4px 0;
    overflow-wrap: anywhere;
}

body[data-topo="3"] .only-2 { display: none !important; }
body[data-topo="2"] .only-3 { display: none !important; }

body[data-axes="sheet"] .ax-lab { display: none !important; }
body[data-axes="lab"] .ax-sheet { display: none !important; }

.dp-steps mjx-container,
.dp-math mjx-container {
    max-width: 100%;
    vertical-align: middle;
}

mjx-assistive-mml {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%);
}

@media (max-width: 980px) {
    body.dp-page {
        height: auto;
        overflow: visible;
        display: block;
    }
    body.dp-page .ai-header {
        flex-direction: row;
        align-items: center;
        padding: 8px 12px;
    }
    body.dp-page .ai-header h1 { font-size: 1.05rem !important; }
    body.dp-page .ai-nav { width: auto; }
    .dp-workspace {
        height: auto;
        grid-template-columns: 1fr;
        padding: 8px;
    }
    .dp-lab { order: 1; overflow: visible; }
    .dp-walk { order: 2; overflow: visible; }
    .dp-controls,
    .dp-steps { overflow: visible; }
    .dp-stage { display: contents; }
    .dp-howto { order: 0; }
    .dp-plot {
        order: 1;
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        max-height: 360px;
        flex: none;
    }
    .dp-sch-wrap { order: 2; display: block; overflow: visible; max-height: none; height: auto; }
    .dp-sch { height: auto; aspect-ratio: 1; }
    .dp-verdict { order: 3; grid-template-columns: 1fr; }
    .dp-warn { order: 4; }
    .dp-meta { order: 5; }
    .dp-sch { width: 100%; height: auto; max-height: none; }
    body[data-mode="guided"] .dp-step-now {
        display: block;
        font-size: 14px;
        font-weight: 650;
        color: var(--ai-blue-800, #003087);
    }
}