/* RAG Chunking Playground
   Inherits the site palette from /assets/css/style.css.
   Monochrome only: #101010 base, white text, grey scale, single blue accent (#0a21c0)
   reused from the site's ::selection colour. No new hues. */

:root {
    --cp-bg: #101010;
    --cp-surface: #131313;
    --cp-surface-2: #1a1a1a;
    --cp-border: #222;
    --cp-border-soft: #2a2a2a;
    --cp-text: #fff;
    --cp-dim: #a7a7a7;
    --cp-dimmer: #737373;
    --cp-dimmest: #454545;
    --cp-accent: #0a21c0;
    --cp-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* This page needs more room than the 800px blog column. */
body.wide {
    max-width: 1180px;
}

.cp-header {
    margin: 1em 0 2.5em;
}

.cp-header h1 {
    font-size: 1.5em;
    margin-bottom: 0.4em;
}

.cp-header p {
    max-width: none;
    font-size: 0.95em;
}

/* ---- Panels ---- */
.cp {
    display: block;
}

.cp-panel {
    background-color: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: 3px;
    padding: 20px;
    margin: 0 0 20px;
}

.cp-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1em;
    margin-bottom: 14px;
}

.cp-panel-head h3 {
    color: var(--cp-text);
    font-weight: 600;
    margin: 0;
}

.cp-meta {
    font-size: 0.8em;
    color: var(--cp-dimmer);
    font-family: var(--cp-mono);
}

/* ---- Input ---- */
.cp-input-actions {
    display: flex;
    align-items: center;
    gap: 1.25em;
}

.cp-file {
    font-size: 0.85em;
    color: var(--cp-text);
    border-bottom: 1px solid var(--cp-border-soft);
    cursor: pointer;
    padding-bottom: 1px;
}

.cp-file:hover {
    border-bottom-color: var(--cp-text);
}

.cp-link-btn {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--cp-border-soft);
    color: var(--cp-text);
    font: inherit;
    font-size: 0.85em;
    padding: 0 0 1px;
    cursor: pointer;
}

.cp-link-btn:hover {
    border-bottom-color: var(--cp-text);
}

#cp-text {
    width: 100%;
    box-sizing: border-box;
    min-height: 160px;
    background-color: var(--cp-bg);
    color: var(--cp-text);
    border: 1px solid var(--cp-border);
    border-radius: 3px;
    padding: 14px;
    font-family: var(--cp-mono);
    font-size: 0.82em;
    line-height: 1.5;
}

#cp-text:focus {
    outline: none;
    border-color: var(--cp-dimmer);
}

.cp-meta {
    margin-top: 8px;
}

/* ---- Strategy accordion ---- */
.cp-accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cp-acc-item {
    border: 1px solid var(--cp-border);
    border-radius: 3px;
    background-color: var(--cp-surface-2);
    overflow: hidden;
}

.cp-acc-item.is-open {
    border-color: var(--cp-accent);
}

.cp-acc-head {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    color: var(--cp-dim);
    font: inherit;
    font-size: 0.9em;
    padding: 12px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
}

.cp-acc-head:hover {
    color: var(--cp-text);
}

.cp-acc-item.is-open .cp-acc-head {
    color: var(--cp-text);
    font-weight: 600;
}

.cp-acc-icon {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
    margin-right: 3px;
}

.cp-acc-item.is-open .cp-acc-icon {
    transform: rotate(-135deg);
}

.cp-acc-body {
    display: none;
    padding: 2px 14px 16px;
}

.cp-acc-item.is-open .cp-acc-body {
    display: block;
}

.cp-strategy-desc {
    margin: 0 0 16px;
    font-size: 0.9em;
}

/* ---- Settings ---- */
.cp-settings {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

.cp-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 200px;
}

.cp-field label {
    font-size: 0.8em;
    color: var(--cp-dim);
    display: flex;
    justify-content: space-between;
    gap: 1em;
}

.cp-field label .cp-val {
    color: var(--cp-text);
    font-family: var(--cp-mono);
}

.cp-field input[type="range"] {
    width: 100%;
    accent-color: var(--cp-accent);
}

.cp-settings .cp-note {
    flex-basis: 100%;
    font-size: 0.8em;
    color: var(--cp-dimmer);
    margin: 0;
}

/* ---- Output / chunk cards ---- */
.cp-output {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cp-chunk {
    border: 1px solid var(--cp-border);
    border-left: 3px solid var(--cp-border-soft);
    border-radius: 3px;
    background-color: var(--cp-bg);
    padding: 12px 14px;
}

/* subtle alternating shade so adjacent chunks read as distinct, monochrome only */
.cp-chunk:nth-child(even) {
    background-color: #0c0c0c;
}

.cp-chunk-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-family: var(--cp-mono);
    font-size: 0.75em;
    color: var(--cp-dimmer);
}

.cp-chunk-idx {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 3px;
    background-color: var(--cp-surface-2);
    border: 1px solid var(--cp-border);
    color: var(--cp-text);
    font-weight: 600;
}

.cp-chunk-badge {
    margin-left: auto;
    background-color: var(--cp-surface-2);
    border: 1px solid var(--cp-border);
    border-radius: 3px;
    padding: 2px 8px;
    color: var(--cp-dim);
}

.cp-chunk-path {
    color: var(--cp-dim);
    font-weight: 600;
}

.cp-chunk-body {
    font-family: var(--cp-mono);
    font-size: 0.8em;
    line-height: 1.5;
    color: var(--cp-dim);
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}

.cp-chunk-body .cp-overlap {
    color: var(--cp-dimmest);
    background-image: repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.06) 0,
            rgba(255, 255, 255, 0.06) 2px,
            transparent 2px,
            transparent 5px);
    border-radius: 3px;
}

.cp-boundary {
    text-align: center;
    font-family: var(--cp-mono);
    font-size: 0.72em;
    color: var(--cp-dimmer);
    margin: 2px 0;
}

/* semantic similarity strip */
.cp-sim {
    margin-top: 14px;
    border-top: 1px solid var(--cp-border);
    padding-top: 14px;
}

.cp-sim h4 {
    margin: 0 0 10px;
    font-size: 0.85em;
    color: var(--cp-dim);
    font-weight: 600;
}

.cp-sim-row {
    display: grid;
    grid-template-columns: 120px 1fr 70px;
    align-items: center;
    gap: 10px;
    font-family: var(--cp-mono);
    font-size: 0.72em;
    color: var(--cp-dimmer);
    padding: 3px 0;
}

.cp-sim-bar {
    height: 6px;
    background-color: var(--cp-surface-2);
    border-radius: 3px;
    overflow: hidden;
}

.cp-sim-bar i {
    display: block;
    height: 100%;
    background-color: var(--cp-dim);
}

.cp-sim-row.is-split .cp-sim-bar i {
    background-color: var(--cp-accent);
}

.cp-sim-row.is-split {
    color: var(--cp-text);
}

/* contextual demo */
.cp-ctx-demo {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cp-ctx-note {
    border-left: 3px solid var(--cp-accent);
    background-color: var(--cp-surface-2);
    padding: 12px 16px;
    font-size: 0.9em;
}

.cp-ctx-note p {
    margin: 0.4em 0;
}

.cp-ctx-block .cp-meta {
    margin-bottom: 6px;
}

.cp-ctx-prefix {
    color: var(--cp-text);
    font-weight: 600;
}

.cp-prompt {
    background-color: var(--cp-bg);
    border: 1px solid var(--cp-border);
    border-radius: 3px;
    padding: 12px 14px;
    font-family: var(--cp-mono);
    font-size: 0.76em;
    line-height: 1.5;
    color: var(--cp-dim);
    white-space: pre-wrap;
    margin: 0;
}

/* status / spinner */
.cp-status {
    font-size: 0.85em;
    color: var(--cp-dimmer);
    font-family: var(--cp-mono);
    padding: 8px 0;
}

/* ---- Compare table ---- */
.cp-compare-out table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85em;
}

.cp-compare-out th,
.cp-compare-out td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--cp-border);
    vertical-align: middle;
}

.cp-compare-out th {
    color: var(--cp-dimmer);
    font-weight: 600;
    font-size: 0.85em;
}

.cp-compare-out td.cp-num {
    font-family: var(--cp-mono);
    color: var(--cp-dim);
}

.cp-compare-out .cp-strat-name {
    color: var(--cp-text);
    font-weight: 600;
}

.cp-viz {
    display: flex;
    gap: 2px;
    height: 16px;
    align-items: stretch;
    min-width: 180px;
}

.cp-viz span {
    background-color: rgba(255, 255, 255, 0.16);
    border-radius: 2px;
    min-width: 2px;
}

.cp-viz span:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.28);
}

.cp-viz span.cp-viz-overlap {
    background-image: repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.35) 0,
            rgba(255, 255, 255, 0.35) 2px,
            transparent 2px,
            transparent 4px);
}

/* ---- Book CTA ---- */
.cp-book {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5em;
    flex-wrap: wrap;
    background-color: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: 3px;
    padding: 20px 24px;
    margin: 0 0 20px;
}

.cp-book-cover {
    border: none;
    flex: 0 0 auto;
    line-height: 0;
}

.cp-book-cover img {
    width: 64px;
    height: auto;
    margin: 0;
    border-radius: 3px;
    border: 1px solid var(--cp-border);
    display: block;
}

.cp-book-text {
    flex: 1 1 240px;
}

.cp-book-from {
    display: block;
    color: var(--cp-dim);
    font-size: 0.95em;
}

.cp-book-from strong {
    color: var(--cp-text);
}

.cp-book-sub {
    display: block;
    color: var(--cp-dim);
    font-size: 0.85em;
    margin-top: 0.15em;
}

.cp-book-text p {
    margin: 0.4em 0 0;
    max-width: 60ch;
    font-size: 0.9em;
}

/* ---- Layout: two columns on wide screens ---- */
/* the two left panels always stack directly under each other */
.cp-col-left > .cp-panel:last-child {
    margin-bottom: 20px;
}

@media only screen and (min-width: 900px) {
    .cp {
        display: grid;
        grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
        gap: 32px 20px;
        align-items: start;
    }

    /* gap handles spacing inside the grid; drop panel bottom-margins so
       both columns produce the same spacing above the compare panel */
    .cp > .cp-panel,
    .cp-col-left > .cp-panel:last-child {
        margin-bottom: 0;
    }

    .cp-col-left {
        grid-column: 1;
        grid-row: 1;
    }

    .cp-results {
        grid-column: 2;
        grid-row: 1;
    }

    .cp-compare,
    .cp-book {
        grid-column: 1 / -1;
    }
}