/* Datomic Playground — standalone full-viewport tool page.
   Loaded after datomic.css, which supplies the tokens, reset, and @font-face.
   The bar carries the lockup only — no nav links, no search, no footer — so
   the panes own the rest of the screen. */

.playground-body {
    /* dvh, not vh: mobile browser chrome must not push the panes off-screen. */
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header ------------------------------------------------------------------ */

/* Mirrors .nav: the tool page wears the site's bar, minus the links and search.
   Keep the background, border, padding and mark height in step with .nav,
   .nav-container and .logo-img in datomic.css. */
.playground-header {
    flex: none;
    background: var(--white);
    border-bottom: 2px solid var(--accent);
}

.playground-header-inner {
    max-width: var(--max-width);
    padding: 0.75rem;
}

/* 45px, not the lockup's 44: in .nav it is the links, not the logo, that set the
   row height. Without the links the bar would come up a pixel short. */
.playground-lockup a {
    display: flex;
    align-items: center;
    min-height: 45px;
    text-decoration: none;
}

/* 44px matches .logo-img, holding the row at the site nav's height. The lockup
   carries its own mark/word proportions, so nothing here needs to nudge them. */
.playground-lockup img {
    height: 44px;
    width: auto;
    /* Letterbox rather than overflow once the bar is narrower than the lockup. */
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
}

/* Panes ------------------------------------------------------------------- */

/* Holds panes + toolbar so both sit inside the <main> landmark; the column
   split that used to live on .playground-body happens here. */
.playground-main {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.playground {
    flex: 1;
    /* Without min-height:0 the grid refuses to shrink and the page scrolls. */
    min-height: 0;
    /* CodeMirror's internals carry z-index up to 6, and .CodeMirror sets no
       stacking context of its own, so they would otherwise compete in the root
       context and paint over the toolbar. Trap them here. */
    isolation: isolate;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
}

.playground-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--white);
}

/* Toolbar ----------------------------------------------------------------- */

/* First flex child of a 100dvh column, so it holds the head of the viewport
   while the panes scroll. Same columns and gap as .playground, which is what
   lands Run on the right edge of the code pane. */
.playground-toolbar {
    /* Above the isolated panes, so the Run tooltip can hang over them. */
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    flex: none;
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-100);
}

.playground-toolbar-code,
.playground-toolbar-result {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
    padding: var(--space-2) var(--space-4);
}

/* Picker to the left edge of the code pane, Run to its right edge. */
.playground-toolbar-code {
    justify-content: space-between;
}

.playground-toolbar-result {
    justify-content: flex-end;
}

.playground-status {
    flex: 1;
    text-align: right;
    font-size: var(--text-sm);
    color: var(--gray-600);
}

/* Editor and result fill the pane; the toolbar sits above them. */
.playground-pane .CodeMirror,
.playground-result,
#play-code {
    flex: 1;
    min-height: 0;
    height: auto;
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-sm-plus);
    line-height: var(--lh-normal);
}

#play-code {
    width: 100%;
    padding: var(--space-4);
    border: 0;
    resize: none;
}

/* CodeMirror pads its line box, not the wrapper. */
.playground-pane .CodeMirror-lines {
    padding: var(--space-4);
}

.playground-result {
    padding: var(--space-4);
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.playground-result.is-error {
    color: #b42318;
}

/* Example picker ---------------------------------------------------------- */

/* Picker and Reset act as one control, so the toolbar's space-between keeps
   Run on the right edge of the code pane. */
.playground-controls {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
}

#play-preset {
    font: inherit;
    font-size: var(--text-sm);
    padding: 0.5rem 2.25rem 0.5rem 1.25rem;
    border: 2px solid var(--border);
    border-radius: 6px;
    background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231C2421' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 1rem center;
    color: var(--text);
    appearance: none;
    cursor: pointer;
    transition: border-color 150ms cubic-bezier(0.2, 0, 0, 1);
}

#play-preset:hover {
    border-color: var(--link);
}

/* Nothing to restore yet. Reads as unavailable rather than broken. */
#play-reset:disabled {
    opacity: 0.45;
    cursor: default;
}

#play-reset:disabled:hover {
    border-color: var(--border);
    color: var(--text);
}

/* Toolbar controls, not page CTAs: hold btn-small's box against the
   full-width padded treatment .btn takes at 640px and 480px, which would
   otherwise grow the row by 14px on a phone. */
.playground-toolbar .btn {
    width: auto;
    padding: 0.5rem 1.25rem;
    font-size: var(--text-sm);
}

/* Run ---------------------------------------------------------------------- */

#play-run {
    /* Anchors the tooltip. */
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* Scales with the label rather than a fixed px height. */
.playground-run-glyph {
    width: 0.6em;
    height: 0.75em;
}

/* Below the button: the toolbar sits at the top, so there is pane to hang over.
   No transition, so nothing is owed to prefers-reduced-motion. */
.playground-tooltip {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    padding: var(--space-1) var(--space-2);
    border-radius: 4px;
    background: var(--text);
    color: var(--white);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--fw-normal);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
}

#play-run:hover .playground-tooltip,
#play-run:focus-visible .playground-tooltip {
    opacity: 1;
}

/* Stack when portrait, or genuinely narrow. Landscape phones stay side-by-side:
   stacking them leaves each pane too short to read. */
@media (max-width: 640px), (orientation: portrait) {
    .playground {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }

    /* Stacked, there is no code-pane edge to finish on, so the groups dissolve
       into one row and Run takes the far right. */
    .playground-toolbar {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        padding: var(--space-2) var(--space-4);
    }

    .playground-toolbar-code,
    .playground-toolbar-result {
        display: contents;
    }

    #play-run {
        order: 1;
    }
}

/* Header padding tracks .nav-container's own breakpoints. */
@media (max-width: 640px) {
    .playground-header-inner {
        padding: 0.75rem 1.5rem;
    }
}

@media (max-width: 480px) {
    .playground-header-inner {
        padding: 0.75rem 1rem;
    }

    /* Below the lockup's natural width, scale it down whole rather than
       letterbox it, so the bar keeps its proportions. */
    .playground-lockup img {
        height: auto;
        width: 100%;
    }
}