/* Panel layout: code | divider | info-panel */
.code-with-panel {
    display: grid;
    grid-template-columns: var(--code-ratio, 2fr) auto var(--panel-ratio, 1fr);
    align-items: stretch;
    width: 95%;
    max-width: 95%;
    margin: 0.5em auto;
}

/* Code block inside panel — override standalone margins/shadow */
.code-with-panel > code.hl.lean.block {
    margin: 0;
    box-shadow: none;
    border-radius: 6px 0 0 6px;
    width: auto;
    max-width: 100%;
    overflow-x: auto;
}

/* Wrapper cell so panel can be absolutely positioned within the grid */
.panel-cell {
    position: relative;
    overflow: hidden;
    border-radius: 0 6px 6px 0;
}

/* Draggable divider */
.panel-divider {
    width: 4px;
    cursor: col-resize;
    background: rgba(128, 128, 128, 0.25);
    transition: background 0.15s;
}
.panel-divider:hover,
.panel-divider:active {
    background: rgba(128, 128, 128, 0.5);
}

/* Info panel — absolutely positioned so it never influences grid row height */
.info-panel {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.6em 0.8em;
    font-size: 0.55em;
    line-height: 1.45;
    text-align: left;
}

/* Highlight on the focused source element */
.panel-focus {
    outline: 2px solid rgba(100, 150, 255, 0.6);
    outline-offset: 1px;
    border-radius: 2px;
}

/* Subtle hover preview for the element that would be selected on click */
.panel-hover {
    outline: 1px solid rgba(100, 150, 255, 0.3);
    outline-offset: 1px;
    border-radius: 2px;
}

/* Collapsed state — hide panel, thin divider */
.panel-collapsed > .panel-cell {
    display: none;
}
.panel-collapsed > .panel-divider {
    width: 2px;
    cursor: e-resize;
}
.panel-collapsed {
    grid-template-columns: 1fr auto 0fr;
}
.panel-collapsed > code.hl.lean.block {
    border-radius: 6px;
}

/* Panel content styling — monospace by default, except case labels */
.info-panel .hl.lean {
    font-family: monospace;
    font-size: inherit;
    line-height: inherit;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.info-panel .case-label {
    font-family: inherit;
}
.info-panel .hl.lean .case-label:has(input[type="checkbox"])::before {
    background-color: currentColor;
}
.info-panel code:not(.docstring) {
    font-family: monospace;
    font-size: inherit;
}
.info-panel .hl.lean code.docstring {
    font-family: sans-serif;
    max-width: none;
    width: auto;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.info-panel .hl.lean code.docstring code {
    font-family: monospace;
}
.info-panel .docstring p {
    margin: 0.3em 0;
}
.info-panel .verso-message {
    display: block;
    white-space: pre-wrap;
    margin: 0.2em 0;
}

/* Command output and diagnostic messages — left border + subtle background */
.command-output,
.info-panel .verso-message {
    border-left: 3px solid;
    border-radius: 2px;
    padding: 0.3em 0.6em;
    margin: 0.3em 0;
}
.command-output.information,
.info-panel .verso-message.information {
    border-color: rgba(70, 120, 255, 0.7);
    background: rgba(70, 120, 255, 0.08);
}
.command-output.warning,
.info-panel .verso-message.warning {
    border-color: rgba(255, 200, 50, 0.7);
    background: rgba(255, 200, 50, 0.08);
}
.command-output.error,
.info-panel .verso-message.error {
    border-color: rgba(255, 80, 80, 0.7);
    background: rgba(255, 80, 80, 0.08);
}

/* Reflowed format expressions — white-space:pre for pretty-printed content */
.info-panel .reflowed {
    white-space: pre;
    word-wrap: normal;
    overflow-wrap: normal;
}

/* Goal layout in panel (structure uses Verso's table layout for hypotheses) */
.info-panel .goal {
    margin-bottom: 0.8em;
}
.info-panel .goal-name {
    display: block;
    font-weight: bold;
    margin-bottom: 0.2em;
}
/* .type cells take all remaining width after name/colon/vdash columns */
.info-panel .hypotheses,
.info-panel .conclusion {
    width: 100%;
}
.info-panel .type {
    width: 100%;
}
.info-panel .conclusion {
    display: table;
    border-top: 1px solid rgba(128, 128, 128, 0.3);
    padding-top: 0.3em;
    margin-top: 0.3em;
}
.info-panel .conclusion > * {
    display: table-cell;
    vertical-align: top;
}
.info-panel .goal-vdash {
    white-space: nowrap;
    padding-right: 0.4em;
}

/* Token colors in reflowed content inherit from Verso's .hl.lean rules
   (via --verso-code-keyword-color, --verso-code-const-color, etc.) */

/* Binding highlighting */
.reveal .hl.lean .token.binding-hl {
    background-color: rgba(255, 255, 255, 0.15);
}