/* Styles for the playground (see playground.html and playground.js). The colors come from screen.css. */

/* The playground fills the window and never scrolls, so it doesn't need the space other pages keep for a scrollbar */
html {
    scrollbar-gutter: auto;
    overflow: hidden;
}

.playground {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    box-sizing: border-box; /* So the room for the phone top bar is inside the height */
    height: 100vh;
    height: 100dvh;
    font-family: var(--font-sans);
    color: var(--text);
}

.playground * {
    box-sizing: border-box;
    font-family: inherit;
}

.playground.dragging::after {
    content: "Drop files to add them";
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px dashed var(--accent);
    background-color: color-mix(in srgb, var(--bg) 85%, transparent);
    color: var(--accent);
    font-size: 22px;
    pointer-events: none;
}

.playground code {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

.pg-spacer {
    flex: 1;
}

/* ===== Toolbar ===== */

/* The same height as the sidebar's search bar area, so their bottom lines meet */
.pg-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-height: 55px;
    padding: 6px 16px;
    border-bottom: 1px solid var(--border);
    background-color: var(--surface);
}

.pg-title {
    margin: 0 8px 0 0;
    font-size: 18px;
}

/* Room is tight on smaller windows, and the sidebar already shows this is the Playground */
@media (max-width: 1200px) {
    .pg-title, .pg-saved {
        display: none;
    }
}

.pg-button, .pg-views button, .pg-panel-tabs button, .pg-asset-buttons button, .pg-asset-buttons a {
    padding: 5px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-small);
    background-color: var(--surface-raised);
    color: var(--text);
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
}

.pg-button:hover, .pg-views button:hover, .pg-asset-buttons button:hover, .pg-asset-buttons a:hover {
    border-color: var(--accent);
}

.pg-run {
    border-color: var(--accent-strong);
    background-color: var(--accent-strong);
    color: #fff;
    font-weight: bold;
}

.pg-autorun {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
}

.pg-views {
    display: flex;
}

.pg-views button {
    border-radius: 0;
    color: var(--text-muted);
}

/* The buttons overlap by their borders, and the one under the mouse comes to the front so its whole border shows */
.pg-views button {
    position: relative;
}

.pg-views button + button {
    margin-left: -1px;
}

.pg-views button:hover {
    z-index: 1;
}

.pg-views button:first-child {
    border-radius: var(--radius-small) 0 0 var(--radius-small);
}

.pg-views button:last-child {
    border-radius: 0 var(--radius-small) var(--radius-small) 0;
}

.pg-views button.selected {
    background-color: var(--accent-bg);
    color: var(--accent);
}

.pg-saved {
    min-width: 50px;
    color: var(--text-faint);
    font-size: 13px;
}

.pg-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border);
    background-color: var(--accent-bg);
    font-size: 14px;
}

.pg-banner[hidden] {
    display: none;
}

.pg-banner span {
    flex: 1;
}

/* ===== Code and game ===== */

.pg-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    flex: 1;
    min-height: 0;
}

.pg-main[data-view="split"] {
    grid-template-columns: var(--pg-columns, minmax(0, 1fr) minmax(0, 1fr));
}

.pg-main[data-view="code"] .pg-game-column, .pg-main[data-view="game"] .pg-code-column {
    display: none;
}

.pg-code-column, .pg-game-column {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

.pg-code-column {
    position: relative;
    border-right: 1px solid var(--border);
}

.pg-editor {
    flex: 1;
    min-height: 0;
}

.pg-editor .cm-editor {
    height: 100%;
}

.pg-editor .cm-editor.cm-focused {
    outline: none;
}

/* The method the cursor is in, like "circle(x, y, radius, color, settings?)" */
.pg-call-hint {
    min-height: 34px;
    padding: 7px 16px;
    border-top: 1px solid var(--border);
    background-color: var(--surface);
    color: var(--text-muted);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pg-call-hint code {
    margin-right: 8px;
    color: var(--tok-function);
}

.pg-call-hint b {
    color: var(--accent);
}

/* The bar above the game: restart, pause, step, screenshot, record, and full screen */
.pg-game-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 5px 8px;
    border-bottom: 1px solid var(--border);
    background-color: var(--surface);
}

.pg-game-bar button {
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-small);
    background: none;
    color: var(--text-muted);
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
}

.pg-game-bar button:hover:not(:disabled) {
    background-color: var(--hover-bg);
    color: var(--text);
}

.pg-game-bar button:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Recording: a red dot before the time */
.pg-game-bar .pg-game-record.recording {
    border-color: rgba(255, 100, 100, 0.5);
    color: var(--text);
}

.pg-game-bar .pg-game-record.recording::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background-color: #ff5566;
    animation: pg-recording 1s infinite;
}

@keyframes pg-recording {
    50% { opacity: 0.3; }
}

.pg-game {
    position: relative;
    flex: 1;
    min-height: 0;
    background-color: #000;
}

/* A label in the corner while the game is paused */
.pg-game.paused::after {
    content: "Paused";
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 9px;
    border-radius: var(--radius-small);
    background-color: rgba(0, 0, 0, 0.7);
    color: var(--text);
    font-size: 12px;
    font-weight: bold;
    pointer-events: none;
}

/* Buttons for the keys the game uses, on phones (see mdogTouchKeys in game-page.js) */
.pg-touch-keys {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 8px;
    border-top: 1px solid var(--border);
    background-color: var(--surface);
}

.pg-touch-keys[hidden] {
    display: none;
}

.mdog-touch-key {
    min-width: 52px;
    height: 46px;
    padding: 0 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background-color: var(--surface-raised);
    color: var(--text);
    font-size: 16px;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.mdog-touch-key.held {
    border-color: var(--accent);
    background-color: var(--accent-bg);
}

.pg-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.pg-game-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-faint);
}

.pg-game.running .pg-game-empty {
    display: none;
}

/* ===== Console and assets ===== */

.pg-panels {
    display: flex;
    flex-direction: column;
    position: relative;
    height: var(--pg-panels-height, 38%);
    min-height: 70px;
    border-top: 1px solid var(--border);
    background-color: var(--surface);
}

.pg-main[data-view="game"] .pg-panels {
    height: var(--pg-panels-height, 28%);
}

/* The lines that can be dragged to resize the code, game, and console (see setUpDividers in playground.js).
   Each is an invisible strip over the border that lights up when the mouse is on it. */
.pg-divider {
    position: absolute;
    z-index: 5;
    touch-action: none;
}

.pg-divider::after {
    content: "";
    position: absolute;
    background-color: transparent;
    transition: background-color 0.15s;
}

.pg-divider:hover::after, .pg-divider.dragging::after {
    background-color: var(--accent);
}

.pg-divider-columns {
    top: 0;
    right: -5px;
    bottom: 0;
    width: 9px;
    cursor: col-resize;
}

.pg-divider-columns::after {
    top: 0;
    bottom: 0;
    left: 3px;
    width: 3px;
}

.pg-main:not([data-view="split"]) .pg-divider-columns {
    display: none;
}

.pg-divider-rows {
    top: -5px;
    left: 0;
    right: 0;
    height: 9px;
    cursor: row-resize;
}

.pg-divider-rows::after {
    left: 0;
    right: 0;
    top: 3px;
    height: 3px;
}

/* While dragging, the game can't take the mouse, and the cursor stays the same everywhere */
.playground.resizing .pg-frame {
    pointer-events: none;
}

.playground.resizing-columns, .playground.resizing-columns * {
    cursor: col-resize !important;
    user-select: none;
}

.playground.resizing-rows, .playground.resizing-rows * {
    cursor: row-resize !important;
    user-select: none;
}

.pg-panel-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
}

.pg-panel-tabs button {
    padding: 3px 10px;
    border-color: transparent;
    background: none;
    color: var(--text-muted);
    font-size: 13px;
}

.pg-panel-tabs button:hover {
    color: var(--text);
}

.pg-panel-tabs button.selected {
    background-color: var(--accent-bg);
    color: var(--accent);
}

.pg-console, .pg-assets, .pg-watch {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.pg-console[hidden], .pg-assets[hidden], .pg-watch[hidden] {
    display: none;
}

/* ===== Watch ===== */

.pg-watch-form {
    display: flex;
    gap: 6px;
    padding: 10px 14px;
}

.pg-watch-input {
    flex: 1;
    min-width: 0;
    padding: 5px 9px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-small);
    outline: none;
    background-color: var(--input-bg);
    color: var(--text);
    font-family: var(--font-mono) !important;
    font-size: 13px;
}

.pg-watch-input:focus {
    border-color: var(--accent);
}

.pg-watch-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 5px 14px;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-mono) !important;
    font-size: 13px;
}

.pg-watch-name {
    flex-shrink: 0;
    color: var(--tok-variable);
}

.pg-watch-value {
    flex: 1;
    min-width: 0;
    color: var(--text);
    font-family: var(--font-mono) !important;
    overflow-wrap: anywhere;
}

.pg-watch-value.problem {
    color: var(--text-faint);
    font-style: italic;
}

.pg-watch-remove {
    padding: 0 6px;
    border: none;
    border-radius: var(--radius-small);
    background: none;
    color: var(--text-faint);
    font-size: 16px;
    cursor: pointer;
}

.pg-watch-remove:hover {
    background-color: var(--hover-bg);
    color: var(--text);
}

.pg-watch-empty {
    margin: 0;
    padding: 4px 14px;
    color: var(--text-faint);
    font-size: 13px;
    line-height: 1.6;
}

.pg-watch-empty[hidden] {
    display: none;
}

.pg-console {
    font-family: var(--font-mono);
    font-size: 13px;
}

.pg-console-empty {
    padding: 10px 14px;
    color: var(--text-faint);
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.6;
}

.pg-log {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 3px 14px;
    border-bottom: 1px solid var(--border);
}

.pg-log-text {
    flex: 1;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--font-mono);
}

.pg-log-warn {
    background-color: var(--warn-bg);
    color: var(--warn-text);
}

.pg-log-error {
    background-color: rgba(255, 100, 100, 0.08);
    color: var(--error);
}

.pg-log-line {
    padding: 0;
    border: none;
    background: none;
    color: var(--accent);
    font-size: 12px;
    cursor: pointer;
}

.pg-log-line:hover {
    text-decoration: underline;
}

.pg-log-count {
    padding: 0 6px;
    border-radius: 10px;
    background-color: var(--surface-raised);
    color: var(--text-muted);
    font-size: 11px;
}

.pg-drop {
    display: block;
    margin: 10px 14px;
    padding: 14px;
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: 14px;
    text-align: center;
    cursor: pointer;
}

.pg-drop:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.pg-asset-heading {
    padding: 4px 14px 8px;
    color: var(--text);
    font-size: 13px;
    font-weight: bold;
}

.pg-asset-heading span {
    margin-left: 6px;
    color: var(--text-faint);
    font-weight: normal;
}

.pg-asset-list + .pg-asset-heading {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.pg-asset-empty {
    grid-column: 1 / -1;
    color: var(--text-faint);
    font-size: 13px;
}

/* Each built-in pack opens and closes */
.pg-builtin-pack {
    margin: 0 14px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.pg-builtin-pack > summary {
    padding: 6px 10px;
    color: var(--text);
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
}

.pg-builtin-pack > summary span {
    margin-left: 4px;
    color: var(--text-faint);
    font-weight: normal;
}

.pg-builtin-pack .pg-asset-list {
    padding: 4px 8px 8px;
}

.pg-builtin-credit {
    margin: 0;
    padding: 0 10px 4px;
    color: var(--text-faint);
    font-size: 12px;
}

.pg-builtin-credit a {
    color: var(--accent);
}

/* The files as tiles, each with a picture */
.pg-asset-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    padding: 0 14px 12px;
}

.pg-asset {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--code-bg);
}

/* Fonts are long thin strips, so they get a whole row */
.pg-asset-wide {
    grid-column: 1 / -1;
}

.pg-asset-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 104px;
    margin-bottom: 4px;
    padding: 0;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: var(--radius-small);
    background-color: #15161a;
    cursor: copy;
}

.pg-asset-preview:hover {
    border-color: var(--accent);
}

.pg-asset-wide .pg-asset-preview {
    height: auto;
    min-height: 40px;
    padding: 12px;
}

.pg-asset-preview canvas {
    image-rendering: pixelated;
}

.pg-asset-wide .pg-asset-preview canvas {
    width: 100%;
}

.pg-asset-file {
    color: var(--text-faint);
    font-family: var(--font-mono) !important;
    font-size: 14px;
    font-weight: bold;
}

.pg-asset-name {
    overflow: hidden;
    color: var(--text);
    font-family: var(--font-mono) !important;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pg-asset-info {
    min-height: 1.4em;
    color: var(--text-faint);
    font-size: 12px;
}

.pg-asset-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pg-asset-buttons button, .pg-asset-buttons a {
    padding: 2px 7px;
    font-size: 12px;
}

/* ===== Full screen ===== */

.pg-game:fullscreen {
    width: 100vw;
    height: 100vh;
}

/* ===== Phones ===== */

@media (max-width: 800px) {
    .playground {
        padding-top: 48px; /* Room for the top bar */
    }

    .pg-title, .pg-split-button, .pg-autorun, .pg-saved {
        display: none;
    }

    .pg-toolbar {
        padding: 8px 12px;
        gap: 6px;
    }

    .pg-button, .pg-views button {
        padding: 5px 9px;
        font-size: 13px;
    }

    .pg-spacer {
        display: none;
    }

    .pg-code-column {
        border-right: none;
    }

    .pg-asset-buttons a {
        display: none;
    }
}

/* ===== The template picker ===== */

.pg-dialog {
    width: min(980px, calc(100vw - 32px));
    max-height: calc(100dvh - 64px);
    padding: 0;
    overflow-y: auto;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background-color: var(--surface);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    color: var(--text);
}

.pg-dialog:focus {
    outline: none;
}

.pg-dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.6);
}

.pg-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 0;
}

.pg-dialog-header h2 {
    margin: 0;
    font-size: 20px;
}

.pg-dialog-close {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: var(--radius-small);
    background: none;
    color: var(--text-muted);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.pg-dialog-close:hover {
    background-color: var(--hover-bg);
    color: var(--text);
}

.pg-dialog-note {
    margin: 6px 20px 16px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
}

.pg-template-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    padding: 0 20px 20px;
}

.pg-template-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 0 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--surface-raised);
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.pg-template-card:hover, .pg-template-card:focus-visible {
    border-color: var(--accent);
    outline: none;
}

.pg-template-picture {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    margin-bottom: 6px;
    background-color: #000;
}

.pg-template-picture img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
}

.pg-template-blank {
    color: var(--text-faint);
    font-family: var(--font-mono) !important;
    font-size: 36px;
}

.pg-template-name {
    padding: 0 12px;
    font-size: 15px;
    font-weight: bold;
}

.pg-template-description {
    padding: 0 12px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
}

/* ===== Sharing ===== */

.pg-share-dialog {
    width: min(620px, calc(100vw - 32px));
}

.pg-share-body {
    padding: 6px 20px 20px;
}

.pg-share-body h3 {
    margin: 16px 0 2px;
    font-size: 15px;
}

.pg-share-body p {
    margin: 0 0 8px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
}

.pg-share-body .pg-share-warning {
    padding: 8px 12px;
    border-radius: var(--radius-small);
    background-color: var(--warn-bg);
    color: var(--warn-text);
}

.pg-share-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.pg-share-row input, .pg-share-row textarea, .pg-share-size input {
    padding: 6px 9px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-small);
    outline: none;
    background-color: var(--input-bg);
    color: var(--text);
    font-family: var(--font-mono) !important;
    font-size: 12px;
}

.pg-share-row input, .pg-share-row textarea {
    flex: 1;
    min-width: 0;
}

.pg-share-row textarea {
    resize: none;
    line-height: 1.5;
}

.pg-share-row button {
    flex-shrink: 0;
}

.pg-share-size {
    display: flex;
    gap: 14px;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 13px;
}

.pg-share-size input {
    width: 76px;
    margin-left: 4px;
}

/* ===== Exporting as a Windows app ===== */

.pg-exe-dialog {
    width: min(520px, calc(100vw - 32px));
}

.pg-exe-name-row {
    align-items: center;
}

.pg-exe-name-row input {
    font-family: inherit !important;
    font-size: 14px;
}

.pg-exe-name-row span {
    color: var(--text-muted);
    font-size: 14px;
}

.pg-exe-icon-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.pg-exe-icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
    image-rendering: pixelated;
}

.pg-share-body .pg-exe-note {
    margin-top: 16px;
    font-size: 13px;
}

.pg-exe-buttons {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

.pg-exe-download:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* ===== Questions, like "Delete this project?" (see ask in playground.js) ===== */

.pg-ask-dialog {
    width: min(420px, calc(100vw - 32px));
    padding: 20px 22px 18px;
}

.pg-ask-title {
    margin: 0 0 8px;
    font-size: 18px;
    overflow-wrap: anywhere;
}

.pg-ask-text {
    margin: 0 0 18px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.pg-ask-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.pg-ask-buttons [hidden] {
    display: none;
}

.pg-ask-ok {
    border-color: var(--accent-strong);
    background-color: var(--accent-strong);
    color: #fff;
    font-weight: bold;
}

.pg-ask-ok.danger {
    border-color: #b8404a;
    background-color: #b8404a;
}

.pg-ask-ok.danger:hover {
    border-color: #d0505a;
    background-color: #d0505a;
}

/* A file's name while it's being renamed */
.pg-asset-name-input {
    width: 100%;
    padding: 1px 5px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-small);
    outline: none;
    background-color: var(--input-bg);
    color: var(--text);
    font-family: var(--font-mono) !important;
    font-size: 12px;
}

/* ===== The project button and list ===== */

.pg-project {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pg-project-actions {
    padding: 0 20px 14px;
}

.pg-project-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    padding: 0 20px 20px;
}

.pg-project-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--surface-raised);
}

.pg-project-card.open {
    border-color: var(--accent);
}

.pg-project-picture {
    display: block;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.pg-project-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px 10px;
}

.pg-project-name, .pg-project-name-input {
    height: 26px;
    font-size: 15px;
    font-weight: bold;
}

.pg-project-name {
    padding: 0;
    overflow: hidden;
    border: none;
    background: none;
    color: var(--text);
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.pg-project-card:has(.pg-project-open:hover) .pg-project-name {
    color: var(--accent);
}

/* The name while it's being renamed. It's moved out a little so its text lines up with the name it replaces. */
.pg-project-name-input {
    width: calc(100% + 14px);
    margin: 0 -7px;
    padding: 0 6px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-small);
    outline: none;
    background-color: var(--input-bg);
    color: var(--text);
}

.pg-project-edited {
    color: var(--text-muted);
    font-size: 13px;
}

.pg-project-buttons {
    display: flex;
    gap: 4px;
    padding: 0 12px 12px;
}

.pg-project-buttons button {
    padding: 2px 8px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-small);
    background-color: var(--surface);
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
}

.pg-project-buttons button:hover {
    border-color: var(--accent);
    color: var(--text);
}

/* A message at the bottom of the screen, like "Link copied" */
.pg-notice {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 60;
    max-width: min(520px, calc(100vw - 32px));
    transform: translateX(-50%);
    padding: 8px 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background-color: var(--surface-raised);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
    color: var(--text);
    font-size: 14px;
}

.pg-notice button {
    margin-left: 12px;
    padding: 2px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-small);
    background-color: var(--accent-strong);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}