/* FILE PATH: frontend/playground/playground.css * PURPOSE:
Snowflake-like layout for the read-only SQL Playground. * RESULTS:
hidden initially, compact after execution, draggable, *
minimize/maximize/close supported by playground.js. */


/* ============================================================
   SQL PLAYGROUND
   ============================================================

   PATH
   ----
   frontend/playground/playground.css

   PURPOSE
   -------
   Complete styling for the read-only SQL Playground.

   MAJOR UI COMPONENTS
   -------------------
   1. Global page layout
   2. Header / navigation
   3. Database Explorer
   4. Database / table tree
   5. Playground workspace
   6. Information banner
   7. Active database indicator
   8. Query tabs
   9. SQL worksheet
   10. SQL editor
   11. Worksheet status
   12. Query results
   13. Results resize handle
   14. Results controls
   15. Results table
   16. CSV button
   17. Modals
   18. Describe / Schema
   19. Relationships / data model
   20. Mobile responsive layout
   21. Scrollbars
   22. Utility states

   IMPORTANT
   ---------
   This stylesheet does not execute application logic.

   JavaScript is responsible for:
   - opening databases
   - changing active database
   - executing queries
   - rendering tables
   - rendering Describe / Schema
   - rendering relationships
   - opening / closing results
   - resizing results
   - minimizing / maximizing results
   - query tabs
   - CSV download

   CSS only controls presentation and layout.
   ============================================================ */


/* ============================================================
   1. GLOBAL RESET
   ============================================================ */

* {
    box-sizing: border-box;
}


html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}


body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

    background: #020617;
    color: #e2e8f0;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size: 14px;
    line-height: 1.4;

    overflow: hidden;
}


/* Prevent inherited margins from creating layout gaps. */

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}


button,
input,
textarea,
select {
    font: inherit;
}


/* ============================================================
   2. PAGE SHELL
   ============================================================ */

.playground-page {
    width: 100%;
    height: 100vh;

    display: flex;
    flex-direction: column;

    background: #020617;
    overflow: hidden;
}


.playground-main {
    flex: 1 1 auto;

    min-height: 0;

    display: flex;

    overflow: hidden;
}


/* ============================================================
   PLAYGROUND PAGE FLEX SHELL
   ------------------------------------------------------------
   The HTML uses .playground-layout and .platform-header.
   Keep the whole application as a two-row flex layout so the
   database explorer and SQL workspace occupy the full viewport
   immediately below the top navigation.
   ============================================================ */

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow: hidden;
}

.platform-header {
    flex: 0 0 auto;
}

.playground-layout {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;

    display: flex;
    flex-direction: row;

    overflow: hidden;
}

.playground-workspace {
    flex: 1 1 auto;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
}


/* ============================================================
   3. TOP NAVIGATION
   ============================================================ */

.site-header {
    width: 100%;
    height: 54px;
    min-height: 54px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 18px;

    background: #020617;

    border-bottom:
        1px solid #1e293b;

    flex-shrink: 0;

    z-index: 20;
}


.site-brand {
    display: flex;
    align-items: center;

    gap: 10px;

    color: #f8fafc;

    text-decoration: none;
}


.site-brand-icon {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 7px;

    background: #2563eb;

    color: #ffffff;

    font-size: 15px;
    font-weight: 700;
}


.site-brand-name {
    color: #f8fafc;

    font-size: 15px;
    font-weight: 700;

    letter-spacing: .1px;
}


.site-navigation {
    display: flex;
    align-items: center;

    gap: 4px;

    height: 100%;
}


.site-navigation a {
    height: 34px;

    display: inline-flex;
    align-items: center;

    padding: 0 11px;

    border-radius: 5px;

    color: #94a3b8;

    text-decoration: none;

    font-size: 12px;
    font-weight: 500;

    transition:
        background .15s ease,
        color .15s ease;
}


.site-navigation a:hover {
    background: #111c31;

    color: #e2e8f0;
}


.site-navigation a.active {
    background: #172554;

    color: #60a5fa;

    font-weight: 600;
}


/* ============================================================
   4. MOBILE SIDEBAR BUTTON
   ============================================================ */

.mobile-sidebar-button {
    display: none;

    width: 36px;
    height: 36px;

    align-items: center;
    justify-content: center;

    border: 1px solid #334155;
    border-radius: 6px;

    background: #0f172a;

    color: #cbd5e1;

    cursor: pointer;
}


.mobile-sidebar-button:hover {
    background: #172033;

    color: #ffffff;

    border-color: #475569;
}


/* ============================================================
   5. DATABASE EXPLORER
   ============================================================ */

.database-sidebar {
    width: 270px;
    min-width: 270px;
    height: 100%;

    display: flex;
    flex-direction: column;

    background: #07101f;

    border-right:
        1px solid #1e293b;

    overflow: hidden;

    flex-shrink: 0;

    z-index: 10;
}


/* ============================================================
   6. SIDEBAR HEADER
   ============================================================ */

.sidebar-header {
    height: 46px;
    min-height: 46px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 12px;

    background: #0b1628;

    border-bottom:
        1px solid #1e293b;

    color: #cbd5e1;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .55px;

    flex-shrink: 0;
}


.close-sidebar-button {
    width: 28px;
    height: 28px;

    display: none;

    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 5px;

    background: transparent;

    color: #94a3b8;

    font-size: 18px;

    cursor: pointer;
}


.close-sidebar-button:hover {
    background: #1e293b;

    color: #ffffff;
}


/* ============================================================
   7. DATABASE SEARCH
   ============================================================ */

.database-search {
    padding: 9px 10px;

    border-bottom:
        1px solid #1e293b;

    background: #07101f;

    flex-shrink: 0;
}


.database-search input {
    width: 100%;
    height: 32px;

    padding:
        0 10px;

    border:
        1px solid #263247;

    border-radius: 5px;

    outline: none;

    background: #0b1120;

    color: #e2e8f0;

    font-size: 12px;
}


.database-search input::placeholder {
    color: #64748b;
}


.database-search input:focus {
    border-color: #3b82f6;

    box-shadow:
        0 0 0 2px
        rgba(59, 130, 246, .12);
}


/* ============================================================
   8. DATABASE TREE
   ============================================================ */

.database-tree {
    flex: 1 1 auto;

    min-height: 0;

    padding: 6px 0;

    overflow-x: hidden;
    overflow-y: auto;

    scrollbar-width: thin;
    scrollbar-color:
        #334155
        #07101f;
}


.database-tree::-webkit-scrollbar {
    width: 7px;
}


.database-tree::-webkit-scrollbar-track {
    background: #07101f;
}


.database-tree::-webkit-scrollbar-thumb {
    background: #334155;

    border-radius: 6px;
}


.database-tree::-webkit-scrollbar-thumb:hover {
    background: #475569;
}


/* ============================================================
   9. DATABASE ITEM
   ============================================================ */

.database-item {
    width: 100%;

    margin: 0;
    padding: 0;
}


.database-header {
    min-height: 34px;

    display: flex;
    align-items: center;

    gap: 7px;

    padding: 0 10px;

    background: transparent;

    color: #cbd5e1;

    cursor: pointer;

    user-select: none;

    font-size: 12px;
    font-weight: 600;

    transition:
        background .12s ease,
        color .12s ease;
}


.database-header:hover {
    background: #111c31;

    color: #f8fafc;
}


.database-header.active {
    background: #172554;

    color: #60a5fa;
}


.database-arrow {
    width: 14px;
    min-width: 14px;

    color: #64748b;

    text-align: center;

    font-size: 10px;
}


.database-icon {
    width: 18px;
    min-width: 18px;

    color: #60a5fa;

    text-align: center;

    font-size: 13px;
}


.database-name {
    min-width: 0;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}


/* ============================================================
   10. TABLE LIST
   ============================================================ */

.table-list {
    width: 100%;

    display: block;

    padding:
        2px 0
        5px 27px;

    background: #050c18;
}


.table-list.hidden {
    display: none;
}


/* ============================================================
   11. TABLE ITEM
   ============================================================ */

.table-item {
    min-height: 31px;

    display: flex;
    align-items: center;

    gap: 7px;

    padding: 0 8px;

    border-radius: 4px;

    color: #94a3b8;

    cursor: pointer;

    font-size: 11.5px;

    transition:
        background .12s ease,
        color .12s ease;
}


.table-item:hover {
    background: #111c31;

    color: #dbeafe;
}


.table-item.active {
    background: #172554;

    color: #60a5fa;
}


.table-item-icon {
    width: 16px;
    min-width: 16px;

    color: #64748b;

    text-align: center;
}


.table-item.active .table-item-icon {
    color: #60a5fa;
}


.table-item-name {
    min-width: 0;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}


/* ============================================================
   12. EMPTY DATABASE TREE STATE
   ============================================================ */

.database-empty {
    padding: 24px 15px;

    color: #64748b;

    text-align: center;

    font-size: 11px;

    line-height: 1.6;
}


.database-empty-icon {
    margin-bottom: 8px;

    color: #475569;

    font-size: 22px;
}


.database-empty strong {
    display: block;

    margin-bottom: 3px;

    color: #94a3b8;

    font-size: 12px;
}


/* ============================================================
   13. PLAYGROUND WORKSPACE
   ============================================================ */

.playground-workspace {
    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    height: 100%;

    display: flex;
    flex-direction: column;

    background: #0b1120;

    overflow: hidden;
}


/* ============================================================
   14. INFORMATION BANNER
   ============================================================ */

.playground-info-banner {
    min-height: 52px;

    display: flex;
    align-items: center;

    padding:
        8px 15px;

    background: #0b1628;

    border-bottom:
        1px solid #1e293b;

    flex-shrink: 0;
}


.playground-info-content {
    display: flex;
    flex-direction: column;

    gap: 2px;

    min-width: 0;
}


.playground-info-content strong {
    color: #f1f5f9;

    font-size: 13px;
    font-weight: 700;
}


.playground-info-content span {
    color: #94a3b8;

    font-size: 11px;

    line-height: 1.4;
}


/* ============================================================
   15. ACTIVE DATABASE INDICATOR
   ============================================================ */

.active-database-hint {
    min-height: 36px;

    display: flex;
    align-items: center;

    gap: 5px;

    padding:
        0 14px;

    background: #081426;

    border-bottom:
        1px solid #1e293b;

    color: #94a3b8;

    font-size: 11px;

    flex-shrink: 0;

    white-space: nowrap;

    overflow: hidden;
}


.active-database-hint strong {
    color: #60a5fa;

    font-weight: 700;

    overflow: hidden;

    text-overflow: ellipsis;
}


.active-database-hint code {
    padding:
        2px 5px;

    border-radius: 3px;

    background: #111c31;

    color: #a5b4fc;

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 10px;
}


/* ============================================================
   16. QUERY TABS
   ============================================================ */

.query-tabs-container {
    height: 40px;
    min-height: 40px;

    display: flex;

    background: #0f172a;

    border-bottom:
        1px solid #263247;

    flex-shrink: 0;
}


.query-tabs {
    min-width: 0;

    display: flex;
    align-items: stretch;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: thin;
    scrollbar-color:
        #334155
        #0f172a;
}


.query-tabs::-webkit-scrollbar {
    height: 5px;
}


.query-tabs::-webkit-scrollbar-track {
    background: #0f172a;
}


.query-tabs::-webkit-scrollbar-thumb {
    background: #334155;

    border-radius: 5px;
}


/* ============================================================
   17. INDIVIDUAL QUERY TAB
   ============================================================ */

.query-tab {
    position: relative;

    min-width: 125px;
    max-width: 210px;
    height: 40px;

    display: flex;
    align-items: center;

    padding:
        0 8px
        0 14px;

    border: 0;

    border-right:
        1px solid #263247;

    background: #111c31;

    color: #94a3b8;

    cursor: pointer;

    font-size: 11.5px;
    font-weight: 600;

    white-space: nowrap;
}


.query-tab:hover {
    background: #172338;

    color: #dbeafe;
}


.query-tab.active {
    background: #0b1120;

    color: #60a5fa;

    box-shadow:
        inset 0 2px 0 #3b82f6;
}


.query-tab-name {
    min-width: 0;

    flex: 1;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* ============================================================
   18. QUERY TAB CLOSE BUTTON
   ============================================================ */

.query-tab-close {
    width: 22px;
    min-width: 22px;
    height: 22px;

    margin-left: 5px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 4px;

    background: transparent;

    color: #64748b;

    cursor: pointer;

    font-size: 14px;

    opacity: .75;
}


.query-tab:hover .query-tab-close,
.query-tab.active .query-tab-close {
    opacity: 1;
}


.query-tab-close:hover {
    background: #263247;

    color: #f87171;
}


/* ============================================================
   19. QUERY TAB RENAME
   ============================================================ */

.query-tab-rename {
    width: 100%;
    max-width: 150px;

    height: 25px;

    padding:
        0 6px;

    border:
        1px solid #3b82f6;

    border-radius: 3px;

    outline: none;

    background: #020617;

    color: #e2e8f0;

    font-size: 11px;
}


.query-tab-rename:focus {
    box-shadow:
        0 0 0 2px
        rgba(59, 130, 246, .12);
}


/* ============================================================
   20. NEW QUERY BUTTON
   ============================================================ */

.new-query-button {
    width: 40px;
    min-width: 40px;
    height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 0;

    border-right:
        1px solid #263247;

    background: #111c31;

    color: #cbd5e1;

    font-size: 18px;

    cursor: pointer;

    flex-shrink: 0;
}


.new-query-button:hover {
    background: #172338;

    color: #60a5fa;
}


/* ============================================================
   21. SQL EDITOR SECTION
   ============================================================ */

.sql-editor-section {
    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    background: #0b1120;

    border-bottom:
        1px solid #263247;

    overflow: hidden;
}


/* ============================================================
   22. WORKSPACE TOOLBAR
   ============================================================ */

.workspace-toolbar {
    min-height: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding:
        5px 12px;

    background: #0f172a;

    border-bottom:
        1px solid #263247;

    flex-shrink: 0;
}


.workspace-title {
    display: flex;
    align-items: center;

    min-width: 0;

    color: #cbd5e1;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .5px;
}


.workspace-actions {
    display: flex;
    align-items: center;

    gap: 5px;

    flex-shrink: 0;
}


/* ============================================================
   23. TOOLBAR BUTTONS
   ============================================================ */

.toolbar-button {
    height: 29px;

    padding:
        0 9px;

    border:
        1px solid #334155;

    border-radius: 4px;

    background: #111c31;

    color: #cbd5e1;

    cursor: pointer;

    font-size: 10.5px;
    font-weight: 600;

    transition:
        background .12s ease,
        border-color .12s ease,
        color .12s ease;
}


.toolbar-button:hover {
    background: #172338;

    border-color: #475569;

    color: #ffffff;
}


.toolbar-button:active {
    background: #1e293b;
}


.toolbar-button:disabled {
    opacity: .45;

    cursor: not-allowed;
}


/* ============================================================
   24. RUN QUERY BUTTON
   ============================================================ */

.run-query-button {
    height: 29px;

    padding:
        0 12px;

    border:
        1px solid #2563eb;

    border-radius: 4px;

    background: #2563eb;

    color: #ffffff;

    cursor: pointer;

    font-size: 10.5px;
    font-weight: 700;

    transition:
        background .12s ease,
        border-color .12s ease;
}


.run-query-button:hover {
    background: #1d4ed8;

    border-color: #1d4ed8;
}


.run-query-button:active {
    background: #1e40af;
}


.run-query-button:disabled {
    opacity: .55;

    cursor: not-allowed;
}


/* ============================================================
   25. EDITOR WRAPPER
   ============================================================ */

.editor-wrapper {
    position: relative;

    flex: 1 1 auto;

    min-height: 0;

    background: #0b1120;

    overflow: hidden;
}


/* ============================================================
   26. SQL EDITOR
   ============================================================ */

.sql-editor {
    width: 100%;
    height: 100%;

    display: block;

    margin: 0;

    padding:
        15px 17px;

    border: 0;

    outline: none;

    resize: none;

    background: #0b1120;

    color: #e2e8f0;

    caret-color: #60a5fa;

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        Menlo,
        monospace;

    font-size: 13px;

    line-height: 1.65;

    tab-size: 4;

    white-space: pre;

    overflow: auto;
}


.sql-editor::selection {
    background: rgba(59, 130, 246, .35);
}


.sql-editor::placeholder {
    color: #475569;

    opacity: 1;
}


.sql-editor:focus {
    box-shadow:
        inset 0 1px 0
        rgba(59, 130, 246, .12);
}


/* ============================================================
   27. SQL EDITOR SCROLLBAR
   ============================================================ */

.sql-editor::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}


.sql-editor::-webkit-scrollbar-track {
    background: #0b1120;
}


.sql-editor::-webkit-scrollbar-thumb {
    background: #334155;

    border-radius: 8px;
}


.sql-editor::-webkit-scrollbar-thumb:hover {
    background: #475569;
}



/* ============================================================
   28. WORKSHEET STATUS
   ============================================================ */

.playground-status {
    min-height: 30px;
    height: 30px;

    display: flex;
    align-items: center;

    padding:
        0 13px;

    background: #08101f;

    color: #94a3b8;

    font-size: 11px;

    border-top:
        1px solid #172033;

    flex-shrink: 0;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.playground-status.success {
    color: #4ade80;
}


.playground-status.error {
    color: #f87171;
}


.playground-status.info {
    color: #60a5fa;
}


.playground-status.warning {
    color: #fbbf24;
}


/* ============================================================
   29. RESULTS SECTION
   ============================================================ */

.results-section {
    position: relative;

    width: 100%;

    height: 220px;

    min-height: 90px;

    max-height: calc(100% - 80px);

    flex: 0 0 220px;

    display: flex;
    flex-direction: column;

    background: #0f172a;

    border-top:
        1px solid #334155;

    overflow: hidden;

    z-index: 8;
}


.results-section.results-hidden {
    display: none;
}


/* ============================================================
   30. RESULTS MINIMIZED
   ============================================================ */

.results-section.results-minimized {
    height: 46px;

    min-height: 46px;

    flex-basis: 46px;
}


.results-section.results-minimized
.results-container {
    display: none;
}


.results-section.results-minimized
.results-resize-handle {
    display: none;
}


/* ============================================================
   31. RESULTS MAXIMIZED
   ============================================================ */

.results-section.results-maximized {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    max-height: none;

    flex: none;

    z-index: 100;
}


.results-section.results-maximized
.results-resize-handle {
    display: none;
}


/* ============================================================
   32. RESULTS RESIZE HANDLE
   ============================================================ */

.results-resize-handle {
    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 8px;

    z-index: 15;

    cursor: ns-resize;

    background: transparent;

    touch-action: none;
}


.results-resize-handle::after {
    content: "";

    position: absolute;

    top: 3px;
    left: 50%;

    transform:
        translateX(-50%);

    width: 44px;
    height: 3px;

    border-radius: 4px;

    background: #475569;

    opacity: .8;
}


.results-resize-handle:hover::after {
    background: #60a5fa;

    opacity: 1;
}


.results-section.is-resizing {
    transition: none;
}


body.results-resizing {
    cursor: ns-resize;

    user-select: none;
}


/* ============================================================
   33. RESULTS HEADER
   ============================================================ */

.results-header {
    min-height: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding:
        8px 13px;

    padding-top: 10px;

    background: #0f172a;

    border-bottom:
        1px solid #263247;

    flex-shrink: 0;
}


.results-title-container {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 1px;
}


.results-title {
    display: flex;
    align-items: center;

    gap: 7px;

    min-width: 0;
}


.results-title-icon {
    color: #60a5fa;

    font-size: 13px;
}


.results-title h2 {
    color: #e2e8f0;

    font-size: 12px;
    font-weight: 700;
}


.results-summary {
    color: #64748b;

    font-size: 10px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* ============================================================
   34. RESULTS ACTIONS
   ============================================================ */

.results-actions {
    display: flex;
    align-items: center;

    gap: 4px;

    flex-shrink: 0;
}


.download-button,
.results-control-button {
    height: 28px;

    border-radius: 4px;

    cursor: pointer;

    transition:
        background .12s ease,
        border-color .12s ease,
        color .12s ease;
}


.download-button {
    padding:
        0 9px;

    border:
        1px solid #334155;

    background: #111c31;

    color: #cbd5e1;

    font-size: 10.5px;
    font-weight: 600;
}


.download-button:hover:not(:disabled) {
    background: #172338;

    border-color: #475569;

    color: #ffffff;
}


.download-button:disabled {
    opacity: .4;

    cursor: not-allowed;
}


.results-control-button {
    width: 29px;

    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid #334155;

    background: #111c31;

    color: #94a3b8;

    font-size: 15px;
}


.results-control-button:hover {
    background: #172338;

    border-color: #475569;

    color: #ffffff;
}


#close-results-button:hover {
    background: #3f1720;

    border-color: #7f1d1d;

    color: #fca5a5;
}


/* ============================================================
   35. RESULTS CONTAINER
   ============================================================ */

.results-container {
    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    padding: 0;

    background: #0b1120;

    overflow: auto;

    scrollbar-width: thin;

    scrollbar-color:
        #334155
        #0b1120;
}


.results-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}


.results-container::-webkit-scrollbar-track {
    background: #0b1120;
}


.results-container::-webkit-scrollbar-thumb {
    background: #334155;

    border-radius: 7px;
}


.results-container::-webkit-scrollbar-thumb:hover {
    background: #475569;
}


/* ============================================================
   36. EMPTY RESULTS
   ============================================================ */

.empty-results {
    min-height: 120px;

    height: 100%;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 7px;

    color: #64748b;

    text-align: center;

    font-size: 11px;
}


.empty-results-icon {
    color: #334155;

    font-size: 25px;
}


.empty-results p {
    color: #64748b;

    font-size: 11px;
}


/* ============================================================
   37. RESULTS TABLE
   ============================================================ */

.results-table-wrapper {
    width: 100%;

    overflow: auto;
}


.results-table {
    width: max-content;
    min-width: 100%;

    border-collapse: collapse;

    table-layout: auto;

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        Menlo,
        monospace;

    font-size: 11px;
}


.results-table th {
    position: sticky;

    top: 0;

    z-index: 2;

    padding:
        8px 10px;

    background: #111c31;

    color: #93c5fd;

    border-right:
        1px solid #263247;

    border-bottom:
        1px solid #334155;

    text-align: left;

    white-space: nowrap;

    font-weight: 700;
}


.results-table td {
    padding:
        7px 10px;

    background: #0b1120;

    color: #cbd5e1;

    border-right:
        1px solid #1e293b;

    border-bottom:
        1px solid #1e293b;

    white-space: nowrap;

    vertical-align: top;
}


.results-table tbody tr:hover td {
    background: #111c31;
}


.results-table tbody tr:nth-child(even) td {
    background: #0d1525;
}


.results-table tbody tr:nth-child(even):hover td {
    background: #111c31;
}

/* ============================================================
   38. NULL VALUE
   ============================================================ */

.sql-null {
    color: #64748b;

    font-style: italic;
}


/* ============================================================
   39. NUMBER VALUE
   ============================================================ */

.sql-number {
    color: #93c5fd;
}


/* ============================================================
   40. BOOLEAN VALUE
   ============================================================ */

.sql-boolean {
    color: #c4b5fd;
}


/* ============================================================
   41. RESULTS ERROR
   ============================================================ */

.results-error {
    margin: 12px;

    padding: 11px 13px;

    border:
        1px solid #7f1d1d;

    border-radius: 5px;

    background: #2a0d14;

    color: #fca5a5;

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: 11px;

    line-height: 1.5;

    white-space: pre-wrap;
}


/* ============================================================
   42. RESULTS SUCCESS MESSAGE
   ============================================================ */

.results-success {
    margin: 12px;

    padding: 11px 13px;

    border:
        1px solid #14532d;

    border-radius: 5px;

    background: #071c12;

    color: #86efac;

    font-size: 11px;
}


/* ============================================================
   43. MODAL OVERLAY
   ============================================================ */

.modal-overlay {
    position: fixed;

    inset: 0;

    background:
        rgba(2, 6, 23, .72);

    backdrop-filter:
        blur(2px);

    z-index: 80;
}


.modal-overlay.hidden {
    display: none;
}


/* ============================================================
   44. MODAL BASE
   ============================================================ */

.modal {
    position: fixed;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%);

    width: min(
        520px,
        calc(100vw - 30px)
    );

    max-height:
        calc(100vh - 40px);

    display: flex;
    flex-direction: column;

    background: #0f172a;

    border:
        1px solid #334155;

    border-radius: 8px;

    box-shadow:
        0 24px 70px
        rgba(0, 0, 0, .55);

    overflow: hidden;

    z-index: 90;
}


.modal.hidden {
    display: none;
}


.modal-medium {
    width: min(
        560px,
        calc(100vw - 30px)
    );
}


.modal-large {
    width: min(
        760px,
        calc(100vw - 30px)
    );
}


.modal-xl {
    width: min(
        1100px,
        calc(100vw - 30px)
    );
}


/* ============================================================
   45. MODAL HEADER
   ============================================================ */

.modal-header {
    min-height: 56px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding:
        9px 13px;

    background: #111c31;

    border-bottom:
        1px solid #263247;

    flex-shrink: 0;
}


.modal-kicker {
    display: block;

    margin-bottom: 2px;

    color: #64748b;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .65px;
}


.modal-header h2 {
    color: #f1f5f9;

    font-size: 14px;
    font-weight: 700;
}


.modal-close {
    width: 30px;
    height: 30px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 5px;

    background: transparent;

    color: #94a3b8;

    font-size: 20px;

    cursor: pointer;

    flex-shrink: 0;
}


.modal-close:hover {
    background: #263247;

    color: #ffffff;
}


/* ============================================================
   46. TABLE SELECTOR
   ============================================================ */

.table-selector-list {
    flex: 1 1 auto;

    min-height: 0;

    padding: 10px;

    overflow-y: auto;
}


.table-selector-item {
    width: 100%;

    min-height: 52px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding:
        8px 10px;

    margin-bottom: 5px;

    border:
        1px solid #263247;

    border-radius: 5px;

    background: #0b1120;

    color: #cbd5e1;
}


.table-selector-item:hover {
    background: #111c31;

    border-color: #3b82f6;
}


.table-selector-table-name {
    display: flex;
    align-items: center;

    gap: 8px;

    min-width: 0;

    color: #e2e8f0;

    font-size: 12px;
    font-weight: 600;
}


.table-selector-table-icon {
    color: #60a5fa;
}


.table-selector-describe-button {
    height: 28px;

    padding:
        0 9px;

    border:
        1px solid #334155;

    border-radius: 4px;

    background: #111c31;

    color: #cbd5e1;

    cursor: pointer;

    font-size: 10px;
}


.table-selector-describe-button:hover {
    background: #172338;

    color: #ffffff;

    border-color: #475569;
}


/* ============================================================
   DESCRIBE / SCHEMA SELECTOR - UI FIX
   ------------------------------------------------------------
   The selector is shared by both Describe and Schema.  Keep the
   presentation identical and prevent native browser button
   styling from leaking into the dark Playground UI.
   ============================================================ */

.table-selector-list {
    background: #0b1120;
}

.table-selector-item,
.table-selector-row {
    width: 100%;
    min-height: 52px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;
    padding: 9px 11px;
    margin-bottom: 6px;

    border: 1px solid #263247;
    border-radius: 6px;

    background: #0f172a;
    color: #cbd5e1;

    transition:
        background .15s ease,
        border-color .15s ease,
        transform .15s ease;
}

.table-selector-item:hover,
.table-selector-row:hover {
    background: #111c31;
    border-color: #3b82f6;
}

.table-selector-table-name {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 8px;

    color: #e2e8f0;
    font-size: 12px;
    font-weight: 600;
}

.table-selector-table-name > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table-selector-table-icon {
    flex: 0 0 auto;
    color: #60a5fa;
    font-size: 13px;
}

.table-selector-describe-button,
.table-selector-row button {
    flex: 0 0 auto;
    min-width: 76px;
    height: 30px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 12px;

    border: 1px solid #3b82f6;
    border-radius: 5px;

    background: #172554;
    color: #93c5fd;

    box-shadow: none;
    outline: none;

    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .02em;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease,
        transform .1s ease;
}

.table-selector-describe-button:hover,
.table-selector-row button:hover {
    background: #1d4ed8;
    border-color: #60a5fa;
    color: #ffffff;
}

.table-selector-describe-button:active,
.table-selector-row button:active {
    transform: translateY(1px);
}

.table-selector-describe-button:focus-visible,
.table-selector-row button:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}


/* ============================================================
   47. TABLE DETAILS
   ============================================================ */

.table-details-container {
    flex: 1 1 auto;

    min-height: 0;

    padding: 12px;

    overflow: auto;
}


.table-details-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 10px;
}


.table-details-heading strong {
    color: #f8fafc;

    font-size: 13px;
}


.table-details-heading span {
    color: #64748b;

    font-size: 10px;
}


/* ============================================================
   48. SCHEMA TABLE
   ============================================================ */

.schema-table-wrapper {
    width: 100%;

    overflow: auto;

    border:
        1px solid #263247;

    border-radius: 5px;
}


.schema-table {
    width: 100%;

    border-collapse: collapse;

    font-size: 11px;
}


.schema-table th {
    padding:
        8px 9px;

    background: #111c31;

    color: #93c5fd;

    border-bottom:
        1px solid #334155;

    text-align: left;

    white-space: nowrap;
}


.schema-table td {
    padding:
        7px 9px;

    background: #0b1120;

    color: #cbd5e1;

    border-bottom:
        1px solid #1e293b;

    white-space: nowrap;
}


.schema-table tr:hover td {
    background: #111c31;
}


/* ============================================================
   49. PRIMARY KEY BADGE
   ============================================================ */

.schema-primary-key {
    display: inline-flex;
    align-items: center;

    padding:
        2px 5px;

    border-radius: 3px;

    background: #172554;

    color: #93c5fd;

    font-size: 9px;
    font-weight: 700;
}


/* ============================================================
   50. FOREIGN KEY BADGE
   ============================================================ */

.schema-foreign-key {
    display: inline-flex;
    align-items: center;

    padding:
        2px 5px;

    border-radius: 3px;

    background: #2e1065;

    color: #c4b5fd;

    font-size: 9px;
    font-weight: 700;
}


/* ============================================================
   51. NULLABLE BADGE
   ============================================================ */

.schema-nullable {
    color: #94a3b8;

    font-size: 10px;
}


.schema-required {
    color: #fca5a5;

    font-size: 10px;
}


/* ============================================================
   52. RELATIONSHIPS CONTAINER
   ============================================================ */

.relationships-container {
    flex: 1 1 auto;

    min-height: 0;

    padding: 15px;

    overflow: auto;

    background: #08101f;
}


/* ============================================================
   53. RELATIONSHIP CANVAS
   ============================================================ */

.relationship-canvas {
    position: relative;

    min-width: 760px;
    min-height: 500px;

    background:
        radial-gradient(
            circle at 1px 1px,
            rgba(100, 116, 139, .16) 1px,
            transparent 1px
        );

    background-size: 20px 20px;

    border:
        1px solid #1e293b;

    border-radius: 6px;
}


/* ============================================================
   54. RELATIONSHIP TABLE CARD
   ============================================================ */

.relationship-table {
    position: absolute;

    width: 210px;

    background: #0f172a;

    border:
        1px solid #334155;

    border-radius: 6px;

    box-shadow:
        0 8px 25px
        rgba(0, 0, 0, .35);

    overflow: hidden;
}


.relationship-table-header {
    min-height: 36px;

    display: flex;
    align-items: center;

    gap: 7px;

    padding:
        0 9px;

    background: #111c31;

    border-bottom:
        1px solid #263247;

    color: #93c5fd;

    font-size: 11px;
    font-weight: 700;
}


.relationship-table-body {
    padding: 5px 0;
}


.relationship-column {
    min-height: 26px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;

    padding:
        0 9px;

    color: #cbd5e1;

    font-size: 10px;
}


.relationship-column:hover {
    background: #172338;
}


.relationship-column-name {
    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.relationship-column-type {
    color: #64748b;

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: 9px;
}


/* ============================================================
   55. RELATIONSHIP LINE
   ============================================================ */

.relationship-line {
    position: absolute;

    height: 2px;

    background: #475569;

    transform-origin: left center;

    pointer-events: none;

    z-index: 0;
}


.relationship-line::after {
    content: "";

    position: absolute;

    right: -1px;
    top: -3px;

    width: 0;
    height: 0;

    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid #64748b;
}


/* ============================================================
   56. RELATIONSHIP EMPTY STATE
   ============================================================ */

.relationships-empty-state {
    min-height: 300px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 8px;

    color: #64748b;

    text-align: center;

    font-size: 11px;
}


.relationships-empty-icon {
    color: #475569;

    font-size: 30px;
}


/* ============================================================
   57. MODAL EMPTY STATE
   ============================================================ */

.modal-empty-state {
    padding: 30px 15px;

    color: #64748b;

    text-align: center;

    font-size: 11px;

    line-height: 1.6;
}


.modal-empty-state strong {
    display: block;

    margin-bottom: 4px;

    color: #94a3b8;

    font-size: 12px;
}


/* ============================================================
   58. GENERAL LOADING STATE
   ============================================================ */

.loading-state {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 120px;

    color: #60a5fa;

    font-size: 11px;
}


/* ============================================================
   59. FOCUS ACCESSIBILITY
   ============================================================ */

button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline:
        2px solid #3b82f6;

    outline-offset: 2px;
}


/* ============================================================
   60. DISABLED ELEMENTS
   ============================================================ */

button:disabled {
    opacity: .45;

    cursor: not-allowed;
}


/* ============================================================
   61. MOBILE OVERLAY
   ============================================================ */

.mobile-sidebar-overlay {
    display: none;

    position: fixed;

    inset: 0;

    background:
        rgba(2, 6, 23, .65);

    z-index: 25;
}


.mobile-sidebar-overlay.active {
    display: block;
}


/* ============================================================
   62. RESPONSIVE PLAYGROUND
   ============================================================ */

@media (max-width: 900px) {

    .site-navigation {
        gap: 1px;
    }


    .site-navigation a {
        padding: 0 7px;

        font-size: 11px;
    }


    .database-sidebar {
        width: 245px;
        min-width: 245px;
    }


    .workspace-actions {
        gap: 3px;
    }


    .toolbar-button {
        padding:
            0 7px;
    }

}


@media (max-width: 760px) {

    body {
        overflow: hidden;
    }


    .site-header {
        height: 50px;
        min-height: 50px;

        padding:
            0 10px;
    }


    .site-brand-name {
        font-size: 13px;
    }


    .site-navigation {
        display: none;
    }


    .mobile-sidebar-button {
        display: inline-flex;
    }


    .playground-main {
        position: relative;
    }


    .database-sidebar {
        position: fixed;

        top: 50px;
        left: 0;
        bottom: 0;

        width: min(
            300px,
            85vw
        );

        min-width: 0;

        transform:
            translateX(-105%);

        transition:
            transform .18s ease;

        box-shadow:
            12px 0 30px
            rgba(0, 0, 0, .4);

        z-index: 30;
    }


    .database-sidebar.mobile-open {
        transform:
            translateX(0);
    }


    .close-sidebar-button {
        display: inline-flex;
    }


    .playground-workspace {
        width: 100%;
    }


    .playground-info-banner {
        min-height: 46px;

        padding:
            7px 10px;
    }


    .playground-info-content strong {
        font-size: 12px;
    }


    .playground-info-content span {
        font-size: 10px;
    }


    .active-database-hint {
        min-height: 34px;

        padding:
            0 10px;

        font-size: 10px;
    }


    .workspace-toolbar {
        height: auto;
        min-height: 44px;

        align-items: flex-start;

        flex-direction: column;

        padding:
            7px 9px;
    }


    .workspace-actions {
        width: 100%;

        overflow-x: auto;

        padding-bottom: 2px;
    }


    .toolbar-button,
    .run-query-button {
        flex-shrink: 0;
    }


    .sql-editor {
        padding:
            12px;

        font-size: 12px;
    }


    .results-section {
        min-height: 85px;

        height: 200px;
    }


    .results-header {
        padding:
            7px 9px;
    }


    .results-summary {
        max-width: 180px;
    }


    .modal {
        width:
            calc(100vw - 20px);

        max-height:
            calc(100vh - 20px);
    }


    .modal-xl,
    .modal-large,
    .modal-medium {
        width:
            calc(100vw - 20px);
    }


    .relationship-canvas {
        min-width: 650px;
    }

}


@media (max-width: 480px) {

    .site-brand-icon {
        width: 27px;
        height: 27px;
    }


    .site-brand-name {
        font-size: 12px;
    }


    .query-tab {
        min-width: 105px;
    }


    .query-tab-close {
        width: 20px;
        min-width: 20px;
    }


    .workspace-actions {
        gap: 3px;
    }


    .toolbar-button,
    .run-query-button {
        font-size: 9px;
    }


    .results-actions {
        gap: 2px;
    }


    .download-button {
        padding:
            0 6px;
    }


    .results-control-button {
        width: 27px;
    }


    .results-title h2 {
        font-size: 11px;
    }


    .results-summary {
        display: none;
    }


    .schema-table {
        font-size: 10px;
    }

}


/* ============================================================
   END OF PART 1
   ============================================================ */


/* ============================================================
   PLAYGROUND UI FIXES - REVISION
   ============================================================
   These overrides intentionally affect only Playground controls.
   - No white focus/selection block on explorer tables.
   - No white active block on Query 1 / query tabs.
   - Relationship data-model canvas and connector lines.
   - Schema definition / FK metadata presentation.
   ============================================================ */

.database-tree .table-item,
.database-tree .table-item.selected,
.database-tree .table-item:focus,
.database-tree .table-item:focus-visible {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent !important;
    color: #94a3b8;
    box-shadow: none !important;
    user-select: none;
    -webkit-user-select: none;
    text-align: left;
}

.database-tree .table-item:hover,
.database-tree .table-item:active {
    background: #111c31 !important;
    color: #dbeafe;
}

.database-tree .table-item::selection,
.database-tree .table-item *::selection {
    background: transparent;
}

.query-tabs .query-tab,
.query-tabs .query-tab.active,
.query-tabs .query-tab:focus,
.query-tabs .query-tab:focus-visible {
    appearance: none;
    -webkit-appearance: none;
    outline: 0 !important;
    background: #111c31 !important;
    color: #94a3b8;
    box-shadow: none !important;
    user-select: none;
    -webkit-user-select: none;
}

.query-tabs .query-tab:hover {
    background: #172338 !important;
    color: #dbeafe;
}

.query-tabs .query-tab.active {
    background: #111c31 !important;
    color: #60a5fa;
    box-shadow: inset 0 2px 0 #3b82f6 !important;
}

.query-tabs .query-tab-name {
    background: transparent !important;
    color: inherit;
    user-select: none;
    -webkit-user-select: none;
}

.query-tabs .query-tab-name::selection {
    background: transparent;
}

/* Schema / Describe */
.metadata-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 8px;
    border: 1px solid #334155;
    border-radius: 5px;
    background: #111c31;
    color: #93c5fd;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .05em;
}

.schema-badge {
    color: #c4b5fd;
    border-color: #4c1d95;
    background: #1e1640;
}

.schema-column-name {
    color: #e2e8f0 !important;
    font-weight: 600;
}

.schema-type {
    color: #93c5fd !important;
    font-family: "SFMono-Regular", Consolas, monospace;
}

.schema-definition-card,
.schema-extra-section {
    margin-bottom: 13px;
}

.schema-section-title {
    margin-bottom: 7px;
    color: #93c5fd;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
}

.schema-definition {
    margin: 0;
    padding: 12px 13px;
    border: 1px solid #263247;
    border-radius: 6px;
    background: #07101f;
    color: #cbd5e1;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 11px;
    line-height: 1.65;
    white-space: pre-wrap;
    overflow: auto;
}

.schema-list-card {
    overflow: hidden;
    border: 1px solid #263247;
    border-radius: 6px;
    background: #0b1120;
}

.schema-list-row {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 10px;
    border-bottom: 1px solid #1e293b;
    color: #cbd5e1;
    font-size: 11px;
}

.schema-list-row:last-child {
    border-bottom: 0;
}

.schema-list-row strong {
    color: #93c5fd;
}

.schema-list-row code {
    color: #94a3b8;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schema-arrow {
    color: #60a5fa;
    font-size: 14px;
    font-weight: 700;
}

.schema-empty-note {
    padding: 10px 12px;
    border: 1px dashed #334155;
    border-radius: 5px;
    color: #64748b;
    font-size: 10px;
}

/* Relationship / Data Model */
.relationship-model-toolbar {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 10px;
    padding: 9px 12px;
    border: 1px solid #263247;
    border-radius: 6px;
    background: #0f172a;
}

.relationship-model-toolbar > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.relationship-model-toolbar strong {
    color: #f1f5f9;
    font-size: 12px;
}

.relationship-model-toolbar span {
    color: #64748b;
    font-size: 10px;
}

.relationship-legend {
    display: flex !important;
    align-items: center;
    gap: 10px;
    flex-direction: row !important;
}

.relationship-legend span {
    color: #94a3b8;
    font-size: 9px;
}

.relationship-legend b {
    color: #93c5fd;
}

.relationship-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 1;
}

.relationship-line-svg {
    stroke: #60a5fa;
    stroke-width: 2;
    fill: none;
    opacity: .9;
}

.relationship-table {
    z-index: 2;
}

.relationship-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    margin-right: 4px;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 8px;
    font-weight: 800;
}

.relationship-key.pk {
    background: #172554;
    color: #93c5fd;
}

.relationship-key.fk {
    background: #2e1065;
    color: #c4b5fd;
}

.relationship-list {
    margin-top: 12px;
    border: 1px solid #263247;
    border-radius: 6px;
    background: #0b1120;
    overflow: hidden;
}

.relationship-list .schema-section-title {
    margin: 0;
    padding: 9px 11px;
    border-bottom: 1px solid #263247;
    background: #111c31;
}

.relationship-list-row {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 11px;
    border-bottom: 1px solid #1e293b;
    color: #cbd5e1;
    font-size: 10px;
}

.relationship-list-row:last-child {
    border-bottom: 0;
}

.relationship-list-row strong {
    color: #93c5fd;
}

.relationships-empty-state.compact {
    min-height: 140px;
}


/* ============================================================
   PLATFORM BRAND — same identity as Home and Tutorial.
   Only the clickable platform logo is styled here.
   ============================================================ */
.platform-brand-link{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;color:#edf5ff;text-decoration:none;border-radius:14px;transition:transform .2s ease,opacity .2s ease}
.platform-brand-link:hover{transform:translateY(-1px);opacity:.96}
.platform-brand-link:focus-visible{outline:2px solid #55c2ff;outline-offset:4px}
.platform-brand-mark{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,#35a7ff,#7773ff);color:#04101e;font-size:13px;font-weight:900;line-height:1;box-shadow:0 8px 22px rgba(53,167,255,.18)}
.platform-brand-text{display:block;line-height:1.1}
.platform-brand-text strong{display:block;color:#edf5ff;font-size:16px;font-weight:800;letter-spacing:-.01em}
.platform-brand-text small{display:block;margin-top:4px;color:#9eb1c8;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
@media(max-width:760px){.platform-header{min-height:64px;height:auto;padding:10px 12px;gap:10px;flex-wrap:wrap}.platform-brand-mark{width:40px;height:40px}.platform-brand-text strong{font-size:15px}.platform-nav{width:100%;justify-content:flex-start;overflow-x:auto}}
@media(prefers-reduced-motion:reduce){.platform-brand-link{transition:none}}

/* ============================================================
   PLATFORM HEADER — FINAL BRANDING
   ------------------------------------------------------------
   This block intentionally targets ONLY the Playground header.
   The rest of the SQL Playground layout, editor, results,
   Database Explorer and JavaScript behavior are untouched.

   Browser-side navigation:
       Playground logo → ../home/home.html
   ============================================================ */

body > .platform-header {
    width: 100%;
    min-height: 72px;
    height: 72px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;
    padding: 0 5vw;

    box-sizing: border-box;

    background: rgba(7, 17, 31, 0.94);
    border-bottom: 1px solid rgba(120, 170, 230, 0.18);

    position: sticky;
    top: 0;
    z-index: 1000;

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* ------------------------------------------------------------
   Clickable SQL Learning Platform brand
   ------------------------------------------------------------ */

body > .platform-header > .platform-brand-link {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;

    flex: 0 0 auto;

    color: #edf5ff !important;
    text-decoration: none !important;

    border-radius: 14px;

    line-height: 1;
    white-space: nowrap;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

body > .platform-header > .platform-brand-link:hover {
    transform: translateY(-1px);
    opacity: 0.96;
}

body > .platform-header > .platform-brand-link:focus-visible {
    outline: 2px solid #55c2ff;
    outline-offset: 4px;
}

/* The SQL square is the same 42px scale used on Tutorial. */
body > .platform-header .platform-brand-mark {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid !important;
    place-items: center;

    margin: 0;
    padding: 0;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #35a7ff,
            #7773ff
        ) !important;

    color: #04101e !important;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0;

    text-decoration: none !important;

    box-shadow:
        0 8px 22px rgba(53, 167, 255, 0.18);
}

/* Brand title + subtitle. */
body > .platform-header .platform-brand-text {
    display: block;

    margin: 0;
    padding: 0;

    line-height: 1.1;
}

body > .platform-header .platform-brand-text strong {
    display: block;

    margin: 0;
    padding: 0;

    color: #edf5ff !important;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 16px !important;
    font-weight: 800 !important;

    letter-spacing: -0.01em;
    line-height: 1.1;

    text-decoration: none !important;
}

body > .platform-header .platform-brand-text small {
    display: block;

    margin: 4px 0 0;
    padding: 0;

    color: #9eb1c8 !important;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 10px !important;
    font-weight: 700 !important;

    letter-spacing: 0.12em;
    line-height: 1;

    text-transform: uppercase;
    text-decoration: none !important;
}

/* ------------------------------------------------------------
   Playground navigation
   ------------------------------------------------------------ */

body > .platform-header > .platform-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    flex-wrap: wrap;
    gap: 20px;

    height: auto;
    min-width: 0;
}

body > .platform-header > .platform-nav > a {
    height: auto;

    display: inline-flex;
    align-items: center;

    margin: 0;
    padding: 0;

    background: transparent !important;
    border: 0;

    color: #9eb1c8 !important;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 14px !important;
    font-weight: 500;

    line-height: 1.4;

    text-decoration: none !important;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

body > .platform-header > .platform-nav > a:hover {
    background: transparent !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

body > .platform-header > .platform-nav > a.active,
body > .platform-header > .platform-nav > a[aria-current="page"] {
    background: transparent !important;
    color: #ffffff !important;
    font-weight: 700;
}

body > .platform-header > .platform-nav > a:focus-visible {
    outline: 2px solid #55c2ff;
    outline-offset: 4px;
    border-radius: 4px;
}

/* ------------------------------------------------------------
   Responsive header
   ------------------------------------------------------------ */

@media (max-width: 760px) {
    body > .platform-header {
        min-height: auto;
        height: auto;

        align-items: flex-start;
        flex-wrap: wrap;

        padding: 12px 4vw;
        gap: 10px 18px;
    }

    body > .platform-header .platform-brand-mark {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    body > .platform-header .platform-brand-text strong {
        font-size: 15px !important;
    }

    body > .platform-header > .platform-nav {
        width: 100%;

        justify-content: flex-start;

        gap: 8px 16px;

        overflow-x: auto;
        overflow-y: hidden;
    }

    body > .platform-header > .platform-nav > a {
        font-size: 13px !important;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    body > .platform-header > .platform-nav {
        gap: 7px 13px;
    }

    body > .platform-header > .platform-nav > a {
        font-size: 12px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body > .platform-header > .platform-brand-link,
    body > .platform-header > .platform-nav > a {
        transition: none;
    }
}

/* ============================================================
   MOBILE HEADER CONTROLS — FINAL RESPONSIVE FIX
   ------------------------------------------------------------
   Desktop is intentionally untouched by this block.

   Mobile layout:
       [ ☰ ] [ SQL Learning Platform ]
       [ 🗄️ ]

   ☰ opens the existing platform navbar.
   🗄️ opens the existing Database Explorer sidebar.
   ============================================================ */

.mobile-nav-button {
    display: none;
}

@media (max-width: 760px) {

    /* --------------------------------------------------------
       MOBILE HEADER
       --------------------------------------------------------
       The existing desktop header dimensions remain unchanged.
       Only mobile receives this dedicated two-control layout.
       -------------------------------------------------------- */
    body > .platform-header {
        position: sticky;
        top: 0;
        min-height: 112px;
        height: 112px;

        display: flex;
        align-items: flex-start;
        justify-content: flex-start;

        flex-wrap: nowrap;

        padding: 12px 12px 12px 66px;
        gap: 10px;

        z-index: 1000;
    }

    /*
     * Mobile navbar hamburger:
     * left of the logo, matching the established mobile header.
     */
    body > .platform-header > .mobile-nav-button {
        position: absolute;
        top: 12px;
        left: 12px;

        width: 44px;
        height: 44px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        padding: 0;

        border: 1px solid #334155;
        border-radius: 12px;

        background: #0f1b2e;
        color: #e2e8f0;

        font-size: 24px;
        line-height: 1;

        cursor: pointer;

        z-index: 1003;
    }

    body > .platform-header > .mobile-nav-button:hover {
        background: #172033;
        border-color: #475569;
    }

    /*
     * Keep the SQL logo beside the hamburger instead of centering it.
     */
    body > .platform-header > .platform-brand-link {
        flex: 0 0 auto;
        margin: 0;
    }

    body > .platform-header .platform-brand-mark {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }

    body > .platform-header .platform-brand-text strong {
        font-size: 16px !important;
    }

    /*
     * Mobile navbar is hidden initially.
     * When the hamburger is clicked, JS adds .mobile-nav-open.
     */
    body > .platform-header > .platform-nav {
        display: none;

        position: absolute;
        top: 100%;
        left: 0;
        right: 0;

        width: 100%;

        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;

        gap: 0;

        padding: 10px 14px 14px;

        background: rgba(7, 17, 31, 0.98);
        border-top: 1px solid rgba(120, 170, 230, 0.12);
        border-bottom: 1px solid rgba(120, 170, 230, 0.18);

        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);

        overflow: visible;

        z-index: 1002;
    }

    body > .platform-header.mobile-nav-open > .platform-nav {
        display: flex;
    }

    body > .platform-header > .platform-nav > a {
        width: 100%;

        min-height: 40px;

        display: flex;
        align-items: center;

        padding: 8px 10px;

        font-size: 14px !important;
        white-space: nowrap;
    }

    /*
     * Database Explorer button:
     * separate from the navbar hamburger and positioned directly
     * below it on mobile only.
     */
    body > .mobile-sidebar-button {
        position: fixed;

        top: 64px;
        left: 12px;

        width: 44px;
        height: 36px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        padding: 0;

        border: 1px solid #334155;
        border-radius: 9px;

        background: #0f1b2e;
        color: #9eb1c8;

        font-size: 17px;
        line-height: 1;

        cursor: pointer;

        z-index: 1004;
    }

    body > .mobile-sidebar-button:hover {
        background: #172033;
        color: #ffffff;
        border-color: #475569;
    }

    /*
     * Explorer sidebar starts below the mobile header so it does
     * not cover the hamburger/logo controls.
     */
    .database-sidebar {
        top: 112px;
        z-index: 1005;
    }

    .mobile-sidebar-overlay {
        z-index: 1004;
    }

    /*
     * Keep the Explorer close button above the sidebar contents.
     */
    .database-sidebar .close-sidebar-button {
        position: relative;
        z-index: 1006;
    }
}



/* ============================================================
   FINAL PLAYGROUND UI CORRECTIONS
   ------------------------------------------------------------
   Scope:
   1. Keep desktop navigation/layout unchanged.
   2. Keep mobile hamburger left of the logo.
   3. Keep Database Explorer button below the hamburger.
   4. Keep modal close buttons above relationship/schema content.
   5. Keep result controls visible in maximized mode.
   6. On mobile, maximized results occupy the lower half of the
      workspace so the query/editor remains visible above them.
   ============================================================ */

/* ------------------------------------------------------------
   MODALS / RELATIONSHIPS
   ------------------------------------------------------------
   The relationship canvas can be large and scrollable. Give the
   modal itself a higher stacking level so its header and close
   button can never be covered by another Playground layer.
   ------------------------------------------------------------ */
body > .modal-overlay {
    z-index: 1990;
}

body > .modal {
    z-index: 2000;
}

body > .modal .modal-header {
    position: relative;
    z-index: 2002;
}

body > .modal .modal-close {
    position: relative;
    z-index: 2003;
    flex: 0 0 30px;
    visibility: visible !important;
    opacity: 1 !important;
}

body > .modal .relationships-container {
    position: relative;
    z-index: 1;
}

/* ------------------------------------------------------------
   DESKTOP RESULTS
   ------------------------------------------------------------
   Keep the existing desktop maximize behavior, but make the
   maximized panel explicitly sit above the worksheet layers so
   its CSV / minimize / maximize / close controls remain visible.
   ------------------------------------------------------------ */
.results-section.results-maximized {
    z-index: 500 !important;
}

.results-section.results-maximized .results-header,
.results-section.results-maximized .results-actions,
.results-section.results-maximized .results-control-button,
.results-section.results-maximized .download-button {
    position: relative;
    z-index: 502;
    visibility: visible !important;
    opacity: 1;
}

/* ------------------------------------------------------------
   MOBILE HEADER
   ------------------------------------------------------------
   Do not affect desktop. On mobile the header uses a simple
   three-column layout:

       [ ☰ ] [ SQL Learning Platform ]

   The Database Explorer button remains directly below the
   hamburger.
   ------------------------------------------------------------ */
@media (max-width: 760px) {

    body > .platform-header {
        position: sticky !important;
        top: 0 !important;

        width: 100% !important;
        height: 112px !important;
        min-height: 112px !important;

        display: grid !important;
        grid-template-columns: 44px minmax(0, auto) 1fr !important;
        grid-template-rows: 44px 36px !important;

        align-items: center !important;
        justify-content: start !important;

        padding: 12px 12px 12px 12px !important;
        gap: 8px 10px !important;

        flex-wrap: nowrap !important;
    }

    /* Mobile hamburger: always left of the logo. */
    body > .platform-header > .mobile-nav-button {
        position: static !important;
        grid-column: 1 !important;
        grid-row: 1 !important;

        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        z-index: 1003 !important;
    }

    /* SQL brand stays beside the hamburger, never centered. */
    body > .platform-header > .platform-brand-link {
        grid-column: 2 / 4 !important;
        grid-row: 1 !important;

        width: max-content !important;
        max-width: 100% !important;
        margin: 0 !important;

        justify-self: start !important;
        align-self: center !important;
    }

    body > .platform-header .platform-brand-mark {
        width: 48px !important;
        height: 48px !important;
        flex-basis: 48px !important;
    }

    /* The normal navbar remains hidden until hamburger is clicked. */
    body > .platform-header > .platform-nav {
        display: none !important;
    }

    body > .platform-header.mobile-nav-open > .platform-nav {
        display: flex !important;
    }

    /*
     * Database Explorer control:
     * second control, directly below the hamburger.
     */
    body > .mobile-sidebar-button {
        position: fixed !important;
        top: 64px !important;
        left: 12px !important;

        width: 44px !important;
        height: 36px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        z-index: 1004 !important;
    }

    /*
     * Mobile maximized results:
     * keep the query/editor visible in the upper half and put
     * Query Results in the lower half. This makes the results
     * controls and drag handle reachable on a phone.
     */
    .results-section.results-maximized {
        position: absolute !important;

        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;

        width: 100% !important;
        height: 50% !important;
        max-height: 50% !important;

        flex: none !important;

        z-index: 700 !important;
    }

    .results-section.results-maximized .results-resize-handle {
        display: block !important;
        pointer-events: auto !important;
    }

    .results-section.results-maximized .results-header {
        display: flex !important;
        min-height: 48px !important;
        height: 48px !important;
    }

    .results-section.results-maximized .results-actions {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .results-section.results-maximized .results-control-button,
    .results-section.results-maximized .download-button {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /*
     * Keep the mobile result table independently scrollable in both
     * directions. The outer result panel handles vertical resizing;
     * the result container handles table scrolling.
     */
    .results-container {
        min-height: 0 !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
    }
}


/* ============================================================
   PLAYGROUND FOOTER — EXACT CHALLENGES-PAGE STYLE
   ------------------------------------------------------------
   This block only styles the new page-level footer.
   Existing Playground UI and JavaScript are untouched.
   ============================================================ */

.challenge-site-footer {
    width: 100%;
    box-sizing: border-box;
    margin-top: 40px;
    padding: 32px 5vw 28px;

    background: #07111f;

    border-top:
        1px solid rgba(120, 170, 230, 0.18);

    flex: 0 0 auto;
}


.challenge-footer-inner {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1.4fr 1fr 1fr;

    align-items: start;

    gap: 36px;
}


.challenge-footer-brand a {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: #edf5ff;

    text-decoration: none;
}


.challenge-footer-brand-mark {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #35a7ff,
            #7773ff
        );

    color: #04101e;

    font-size: 13px;
    font-weight: 900;

    box-shadow:
        0 8px 22px
        rgba(53, 167, 255, 0.18);
}


.challenge-footer-brand strong {
    display: block;

    color: #ffffff;

    font-size: 16px;

    line-height: 1.2;
}


.challenge-footer-brand small {
    display: block;

    margin: 6px 0;

    color: #9eb1c8;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 14px;

    line-height: 1.4;
}


.challenge-footer-links {
    display: flex;

    flex-direction: row;
    flex-wrap: nowrap;

    justify-content: center;
    align-items: center;

    gap: 10px 22px;

    text-align: center;
}


.challenge-footer-links a {
    color: #cbd5e1;

    text-decoration: none;

    font-size: 14px;

    transition:
        color .2s ease,
        transform .2s ease;
}


.challenge-footer-links a:hover,
.challenge-footer-links a[aria-current="page"] {
    color: #ffffff;

    transform:
        translateX(2px);
}


.challenge-footer-copy {
    color: #9eb1c8;

    font-size: 13px;

    line-height: 1.6;
}


.challenge-footer-copy p {
    margin: 0 0 8px;
}


/* ------------------------------------------------------------
   MOBILE FOOTER
   ------------------------------------------------------------ */

@media (max-width: 760px) {

    .challenge-site-footer {
        margin-top: 32px;

        padding:
            28px 18px 24px;
    }


    .challenge-footer-inner {
        grid-template-columns: 1fr;

        gap: 22px;
    }


    .challenge-footer-links {
        display: flex;

        flex-direction: row;
        flex-wrap: wrap;

        justify-content: center;
        align-items: center;

        gap: 10px 18px;

        text-align: center;
    }


    .challenge-footer-copy {
        padding-top: 4px;
    }
}


/* ============================================================
   MOBILE PAGE SCROLL — FOOTER ACCESS
   ------------------------------------------------------------
   The preserved Playground uses a viewport-locked layout.
   Mobile needs the document itself to grow so users can scroll
   from the worksheet down to the footer.

   IMPORTANT:
   - Does not modify Results JavaScript.
   - Does not modify Results controls.
   - Does not modify hamburger/logo positioning.
   - Does not modify Database Explorer behavior.
   - Desktop layout is untouched.
   ============================================================ */

@media (max-width: 760px) {

    html {
        height: auto !important;
        min-height: 100%;
    }


    body {
        height: auto !important;
        min-height: 100vh !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;
    }


    .playground-layout {
        flex: 0 0 auto !important;

        height: auto !important;

        min-height: 0 !important;

        overflow: visible !important;
    }


    .playground-workspace {
        height: auto !important;

        min-height: 0 !important;

        overflow: visible !important;
    }
}


/* ============================================================
   PLAYGROUND — CHALLENGE-STYLE SQL EDITOR
   ------------------------------------------------------------
   Purpose:
   - Match the Challenges page editor card visually.
   - Keep the existing #sql-editor element and playground.js logic.
   - Keep Describe / Schema / Relationships in the worksheet toolbar.
   - Put Run Query below the editor like Challenges.
   - Do NOT modify Results, navbar, Database Explorer, or Results JS.
   ============================================================ */

.playground-editor-panel {
    width: calc(100% - 28px);
    margin: 18px 14px;
    padding: 18px;
    box-sizing: border-box;
    flex: 0 0 auto;
    background: #1e293b;
    border-radius: 12px;
}

.playground-editor-panel h3 {
    margin: 0 0 14px;
    color: #f8fafc;
    font-size: 1.15rem;
    line-height: 1.35;
}

.playground-editor-panel .editor-wrapper {
    width: 100%;
    height: 500px;
    min-height: 500px;
    flex: 0 0 500px;
    box-sizing: border-box;
    overflow: hidden;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 10px;
}

.playground-editor-panel .sql-editor {
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    padding: 15px;
    border: 0;
    border-radius: 10px;
    background: #0f172a;
    color: #ffffff;
    font-size: 16px;
    line-height: 1.5;
    resize: none;
}

.playground-editor-actions {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 16px;
}

.playground-editor-actions .run-query-button {
    width: auto;
    min-width: 140px;
    min-height: 48px;
    height: 48px;
    padding: 10px 18px;
    box-sizing: border-box;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
}

/* ------------------------------------------------------------
   Mobile: use the same compact Challenges-page editor proportions.
   ------------------------------------------------------------ */
@media (max-width: 760px) {
    .playground-editor-panel {
        width: calc(100% - 24px);
        margin: 18px 12px;
        padding: 18px;
        border-radius: 12px;
    }

    .playground-editor-panel h3 {
        font-size: 1.25rem;
        line-height: 1.35;
        margin-bottom: 14px;
    }

    .playground-editor-panel .editor-wrapper {
        height: 360px;
        min-height: 300px;
        flex: 0 0 360px;
        border-radius: 10px;
    }

    .playground-editor-panel .sql-editor {
        min-height: 0;
        padding: 14px;
        font-size: 16px;
        line-height: 1.5;
        border-radius: 10px;
    }

    .playground-editor-actions {
        margin-top: 16px;
    }

    .playground-editor-actions .run-query-button {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        height: 48px;
        font-size: 16px;
    }
}

@media (max-width: 420px) {
    .playground-editor-panel {
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        padding: 15px;
    }

    .playground-editor-panel .editor-wrapper {
        height: 340px;
        min-height: 280px;
        flex-basis: 340px;
    }
}

/* ============================================================
   DESKTOP PAGE FLOW — SHOW FULL WORKSHEET + FOOTER
   ------------------------------------------------------------
   The Playground intentionally uses a tall Challenges-style SQL
   editor. The previous viewport-locked desktop shell clipped the
   lower part of the editor card and its Run Query button because
   the main layout had `overflow:hidden` and the page body could
   not scroll.

   This desktop-only block restores normal document scrolling.

   IMPORTANT:
   - Does NOT change the navbar / hamburger / logo.
   - Does NOT change Database Explorer behavior.
   - Does NOT change Results JavaScript or Results controls.
   - Does NOT change the editor dimensions.
   - Does NOT change the mobile layout; the existing mobile scroll
     block remains responsible for mobile page flow.
   ============================================================ */

@media (min-width: 761px) {

    html {
        height: auto !important;
        min-height: 100%;
    }

    body {
        height: auto !important;
        min-height: 100vh !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    /* Let the Playground application grow with its content so the
       browser's normal page scrollbar can reach the editor button
       and the footer. */
    .playground-layout {
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .playground-workspace {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    /* The worksheet contains the fixed-height Challenges-style
       editor card. It must not clip its lower Run Query action. */
    .sql-editor-section {
        flex: 0 0 auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
}


/* ============================================================
   DESKTOP PLAYGROUND RESULTS — FIXED BOTTOM ANCHOR
   ------------------------------------------------------------
   The results panel is a bottom-anchored workspace panel on
   desktop. Its bottom edge stays fixed while the top edge moves
   upward/downward when the resize handle is dragged.

   This fixes the previous behavior where increasing height made
   the panel grow downward because it was participating in normal
   document flow.

   Mobile is intentionally untouched; its existing responsive
   results behavior remains in place.
   ============================================================ */
@media (min-width: 761px) {
    #playground-workspace {
        position: relative !important;
    }

    #results-section:not(.results-hidden) {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;

        width: 100% !important;
        flex: none !important;
        z-index: 80 !important;
    }

    #results-section.results-maximized {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;

        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        flex: none !important;
        z-index: 500 !important;
    }

    /* Keep the results controls above the result table. */
    #results-section.results-maximized .results-header,
    #results-section.results-maximized .results-actions,
    #results-section.results-maximized .results-control-button,
    #results-section.results-maximized .download-button {
        position: relative !important;
        z-index: 502 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Visible desktop resize grip. */
    #results-section:not(.results-hidden) .results-resize-handle {
        z-index: 503 !important;
    }
}

/* ============================================================
   DESKTOP RUN QUERY BUTTON — ORIGINAL TOOLBAR SIZE
   ------------------------------------------------------------
   The JavaScript moves the existing button into the worksheet
   toolbar on desktop. Keep the compact toolbar appearance there.
   ============================================================ */
@media (min-width: 761px) {
    .workspace-actions > .run-query-button {
        height: 29px !important;
        min-height: 29px !important;
        min-width: 0 !important;
        width: auto !important;
        padding: 0 12px !important;
        border-radius: 4px !important;
        font-size: 10.5px !important;
    }
}

/* ============================================================
   MOBILE RUN BUTTON INITIAL-FLASH FIX
   ------------------------------------------------------------
   Prevents the desktop-positioned Run Query button from
   briefly appearing in the mobile toolbar during page load.
   JavaScript will move the same button to the mobile editor.
   ============================================================ */

@media (max-width: 760px) {
    .workspace-actions > .run-query-button {
        display: none !important;
    }
}

/* =========================================================
   FULL-PAGE HEIGHT / FOOTER POSITIONING
   Keeps the footer at the bottom when the content is short.
   This is especially useful for Chrome "Desktop site" mode
   on mobile devices.
   ========================================================= */

html,
body {
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ============================================================
   FOOTER FINAL POSITION FIX
   ------------------------------------------------------------
   Keep the Challenge-style footer at the bottom when the Playground
   content is shorter than the viewport (including Chrome Desktop Site
   mode on phones). When the page is taller than the viewport, the auto
   margin becomes zero and the footer remains in normal document flow.
   ============================================================ */
body > .challenge-site-footer {
    margin-top: auto !important;
}


/* ============================================================
   MOBILE FOOTER — REMOVE UNUSED FLEX SPACE
   ------------------------------------------------------------
   The Playground page uses a flex-column body. A later generic
   rule sets `main { flex: 1 0 auto; }` and the footer uses
   `margin-top: auto`, which intentionally pushes the footer to
   the bottom of the viewport. On a short mobile Playground this
   creates a large empty area between the worksheet and footer.

   Mobile should use normal document flow instead:
   - Main ends immediately after the Playground content.
   - Footer follows the content with a small, intentional gap.
   - Desktop layout is completely untouched.

   NOTE: `(pointer: coarse)` and `(hover: none)` are included
   alongside `max-width: 760px` because Chrome's "Desktop site"
   toggle on a phone reports a desktop-sized viewport width (so the
   max-width condition alone no longer matches) while the physical
   screen is still a short, touch-only phone screen. Both checks are
   combined with a comma (OR, not AND) because some Android phones
   (notably Samsung) misreport `hover: hover` on a plain touchscreen,
   so relying on `hover: none` alone would miss them — `pointer:
   coarse` alone is enough to flag a touch device. Real desktop/
   laptop browsers with a mouse report `pointer: fine` and
   `hover: hover`, so neither condition matches and desktop is
   unaffected.
   ============================================================ */
@media (max-width: 760px), (pointer: coarse), (hover: none) {
    html,
    body {
        height: auto !important;
        min-height: 0 !important;
    }

    body {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Do not let the generic `main { flex: 1 0 auto; }`
       create a viewport-sized empty area above the footer. */
    body > main.playground-layout {
        flex: 0 0 auto !important;
    }

    /* Keep the footer in normal document flow on mobile. */
    body > .challenge-site-footer {
        margin-top: 12px !important;
    }
}


/* ============================================================
   DESKTOP-SITE-ON-PHONE — RELIABLE FALLBACK
   ------------------------------------------------------------
   Same fix as the media query above, but triggered by the
   `force-mobile-shell` class that playground.html adds based on
   the real physical screen size (see the inline script in
   <head>). The `pointer`/`hover` media features above are not
   consistently reported by every Android device/browser build, so
   this class-based rule is the guaranteed path for Chrome's
   "Desktop site" mode on a real phone. Real desktop/laptop
   browsers never get this class, so they are unaffected.
   ============================================================ */
html.force-mobile-shell,
html.force-mobile-shell body {
    height: auto !important;
    min-height: 0 !important;
}

html.force-mobile-shell body {
    display: flex !important;
    flex-direction: column !important;
}

html.force-mobile-shell body > main.playground-layout {
    flex: 0 0 auto !important;
}

html.force-mobile-shell body > .challenge-site-footer {
    margin-top: 12px !important;
}


/* ============================================================
   FINAL MOBILE PLAYGROUND FIX
   ------------------------------------------------------------
   Requested changes only:
   1. Database Explorer button sits in the Query 1 bar, to the
      left of Query 1, matching Sandbox.
   2. The platform header stays full width without an Explorer
      button occupying a second header row.
   3. Desktop layout and all other Playground design are unchanged.
   ============================================================ */
@media (max-width: 760px) {

    body > .platform-header {
        width: 100% !important;
    }

    /* Query 1 bar becomes the positioning context for the Explorer button. */
    body > .playground-layout #query-tabs-container {
        position: relative !important;
        width: 100% !important;
        min-height: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: stretch !important;
        overflow: visible !important;
    }

    /* Explorer button: directly left of Query 1, like Sandbox. */
    /*
     * FINAL Explorer-button placement:
     * ------------------------------------------------------------
     * Keep the button anchored to the Query 1 bar itself. The broader
     * descendant selector intentionally covers both supported DOM
     * states: the button may be a direct child of #query-tabs-container
     * or may be moved into #query-tabs by an older cached JS file.
     * In both cases it must NOT be fixed to the viewport/header.
     */
    body > .playground-layout #query-tabs-container .mobile-sidebar-button {
        position: absolute !important;
        top: 2px !important;
        left: 12px !important;
        width: 44px !important;
        height: 36px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid #334155 !important;
        border-radius: 9px !important;
        background: #0f1b2e !important;
        color: #9eb1c8 !important;
        font-size: 17px !important;
        line-height: 1 !important;
        cursor: pointer !important;
        z-index: 1 !important;
    }

    body > .playground-layout #query-tabs-container .mobile-sidebar-button:hover {
        background: #172033 !important;
        color: #ffffff !important;
        border-color: #475569 !important;
    }

    /* Query 1 starts after the Explorer button. */
    body > .playground-layout #query-tabs-container .query-tabs {
        width: 100% !important;
        padding-left: 68px !important;
        box-sizing: border-box !important;
    }

    /* Safety override for the old header-positioning rule. */
    body > .platform-header > .mobile-sidebar-button {
        position: static !important;
    }
}


/* ============================================================
   FINAL MOBILE HEADER GAP FIX — MATCH SANDBOX EXACTLY
   ------------------------------------------------------------
   The Sandbox mobile header is 64px high. Playground previously
   reserved an extra 48px grid row, creating the large blank gap
   between the platform branding and the SQL Playground banner.

   ONLY the mobile Playground header geometry is changed here.
   Query tabs, Database Explorer button, editor, results, footer,
   desktop layout and JavaScript behavior remain unchanged.
   ============================================================ */
@media (max-width: 760px) {
    body > .platform-header {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        min-height: 64px !important;
        height: 64px !important;

        display: grid !important;
        grid-template-columns: 44px minmax(0, max-content) 1fr !important;
        grid-template-rows: 44px !important;

        align-items: center !important;
        justify-content: start !important;
        flex-wrap: nowrap !important;

        gap: 10px !important;
        padding: 10px 12px !important;
        box-sizing: border-box !important;
    }

    /* Keep the existing hamburger and SQL branding unchanged. */
    body > .platform-header > .mobile-nav-button {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    body > .platform-header > .platform-brand-link {
        grid-column: 2 / 4 !important;
        grid-row: 1 !important;
    }

    /* The navigation overlay now starts immediately below the 64px header. */
    body > .platform-header > .platform-nav {
        top: 100% !important;
    }

    /* Explorer sidebar must also begin below the new 64px header. */
    body > .playground-layout .database-sidebar {
        top: 64px !important;
    }
}


/* ============================================================
   LOCKED SANDBOX-STYLE FOOTER — FOOTER ONLY
   ------------------------------------------------------------
   IMPORTANT:
   This patch changes ONLY the footer presentation.
   Existing Home/Playground HTML, JavaScript, page layout,
   editor, results, navigation and all other features remain
   untouched.
   ============================================================ */

@media (min-width: 761px) {

    .challenge-site-footer .challenge-footer-inner {
        grid-template-columns:
            minmax(220px, 1.15fr)
            minmax(320px, 1.7fr)
            minmax(220px, 0.95fr);
        align-items: start;
        gap: 28px;
    }

    .challenge-site-footer .challenge-footer-links {
        flex-wrap: wrap;
        justify-content: center;
        align-content: flex-start;
        row-gap: 10px;
        column-gap: 20px;
        min-width: 0;
        line-height: 1.4;
        white-space: normal;
    }

    .challenge-site-footer .challenge-footer-links a {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .challenge-site-footer .challenge-footer-copy {
        min-width: 0;
        text-align: right;
    }
}

@media (max-width: 900px) and (min-width: 761px) {

    .challenge-site-footer .challenge-footer-inner {
        grid-template-columns:
            minmax(190px, 1fr)
            minmax(280px, 1.4fr)
            minmax(190px, 0.9fr);
        gap: 22px;
    }

    .challenge-site-footer .challenge-footer-links {
        column-gap: 16px;
    }
}

@media (max-width: 760px) {

    .challenge-site-footer .challenge-footer-inner {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .challenge-site-footer .challenge-footer-links {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        align-content: center;
        gap: 10px 18px;
        overflow: visible;
        white-space: normal;
        text-align: center;
    }

    .challenge-site-footer .challenge-footer-links a {
        flex: 0 0 auto;
        white-space: normal;
    }

    .challenge-site-footer .challenge-footer-copy {
        min-width: 0;
        padding-top: 4px;
        text-align: center;
    }
}