/*
 * The page around the playground (server.mjs), after the blog's stylesheet. The blog's is in the cascade
 * layer "blog"; these are in no layer, so they win. The page is <main id="lc">: everything else in
 * <body> is the blog's (header, footer, loading screen, cookie notice, its pop-ups).
 * The playground itself (LiveCodes) is in its frame, in its own colors (Dracula in its editor: shell.js).
 */

/* The blog's rules for plain elements (h1, button…) don't reach the page */
@layer blog {
  body > #lc, body > #lc *, body > #lc *::before, body > #lc *::after { all: revert-layer; }
}

/* Dracula (Alucard in light mode); light or dark follows the blog header's button */
html:not(#lc-never) {
  --lc-fg: #1f1f1f; --lc-soft: #6c664b; --lc-comment: #635d97;
  --lc-surface: #fffbeb; --lc-surface-2: #efebd6; --lc-tonal: #e4dfc6; --lc-line: #ddd8c0;
  --lc-purple: #644ac9; --lc-pink: #a3144d; --lc-green: #14710a;
  --lc-shadow: 0 2px 14px rgba(60, 50, 20, .14);
}
html[data-theme='dark']:not(#lc-never) {
  --lc-fg: #f8f8f2; --lc-soft: #a7aed3; --lc-comment: #6272a4;
  --lc-surface: #1c1d26; --lc-surface-2: #262833; --lc-tonal: #343746; --lc-line: #2c2e3b;
  --lc-purple: #bd93f9; --lc-pink: #ff79c6; --lc-green: #50fa7b;
  --lc-shadow: 0 8px 30px rgba(0, 0, 0, .45);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme='light']):not(#lc-never) {
    --lc-fg: #f8f8f2; --lc-soft: #a7aed3; --lc-comment: #6272a4;
    --lc-surface: #1c1d26; --lc-surface-2: #262833; --lc-tonal: #343746; --lc-line: #2c2e3b;
    --lc-purple: #bd93f9; --lc-pink: #ff79c6; --lc-green: #50fa7b;
    --lc-shadow: 0 8px 30px rgba(0, 0, 0, .45);
  }
}

/* The blog's header and footer sit right in the page, as on the blog */
unix3r-header, unix3r-footer { display: contents; }
unix3r-header, unix3r-footer, #blog-embed { font: 400 1.0625rem/1.65 var(--font-body, Georgia, serif); color: var(--ink); }

#lc {
  display: block; box-sizing: border-box; max-width: 1600px; margin: 0 auto; padding: 18px 16px 8px;
  font: 400 .95rem/1.5 var(--font-ui, system-ui), system-ui, sans-serif; color: var(--lc-fg);
}
@media (min-width: 720px) { #lc { padding: 22px 24px 8px; } }
#lc *, #lc *::before, #lc *::after { box-sizing: border-box; }
#lc a { color: var(--lc-purple); }
#lc a:hover { color: var(--lc-pink); }

/* The bar above the playground: what it is, its docs, and full screen */
/* The bar and the note below line up with the blog's header (its 1120px column); the playground may be wider */
.lc-bar, .lc-about { max-width: 1120px; margin-left: auto !important; margin-right: auto !important; }
@media (min-width: 720px) { .lc-bar, .lc-about { padding: 0 8px; } }
@media (min-width: 1168px) { .lc-bar, .lc-about { padding: 0 32px; } }
.lc-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 14px; }
.lc-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.lc-mark {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 13px;
  color: var(--lc-green); background: color-mix(in srgb, var(--lc-green) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lc-green) 35%, transparent);
}
.lc-title h1 { margin: 0; font: 800 1.7rem/1.1 var(--font-head, system-ui), system-ui, sans-serif; letter-spacing: -.02em; }
.lc-title p { margin: 3px 0 0; color: var(--lc-soft); font-size: .9rem; }
.lc-tools { display: flex; gap: 8px; }
.lc-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--lc-line); background: var(--lc-surface-2); color: var(--lc-fg) !important;
  font: 600 .85rem/1 var(--font-ui, system-ui), system-ui, sans-serif; text-decoration: none;
}
.lc-btn:hover { border-color: color-mix(in srgb, var(--lc-purple) 50%, var(--lc-line)); background: var(--lc-tonal); }
.lc-btn:focus-visible { outline: 2px solid var(--lc-purple); outline-offset: 2px; }

/* The playground: the window's height below the header, so it works like the app it is */
.lc-stage {
  position: relative; height: calc(100dvh - 160px); min-height: 520px; overflow: hidden;
  border: 1px solid var(--lc-line); border-radius: 16px; background: var(--lc-surface); box-shadow: var(--lc-shadow);
}
.lc-stage:fullscreen { height: 100%; border: 0; border-radius: 0; }

/* LiveCodes' box: its loader puts the app in it (a frame) and shows it once it's ready */
#lc #livecodes { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; opacity: 0; transition: opacity .4s ease-in-out; }
/* Its loading screen, until then (the loader fades it out and removes it) */
#lc #loading {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  color: var(--lc-soft); transition: opacity .4s ease-in-out;
}
#lc #loading-text { font: 500 .9rem var(--font-code, ui-monospace), ui-monospace, monospace; }
#lc .lc-spin { display: grid; color: var(--lc-green); animation: lc-pulse 2.4s ease-in-out infinite; }
@keyframes lc-pulse { 0%, 100% { opacity: .35; transform: scale(.94); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { #lc .lc-spin { animation: none; } }
/* The loader sets the body to the window's height (LiveCodes' own page is only the app); here the footer follows */
body { height: auto !important; }

.lc-about { margin: 14px 0 4px; font-size: .8rem; color: var(--lc-soft); }
.lc-about code { font: .78rem var(--font-code, ui-monospace), ui-monospace, monospace; padding: .05em .35em; border-radius: 5px; background: var(--lc-surface-2); }

@media (max-width: 600px) {
  .lc-title p { display: none; }
  .lc-tools .lc-btn span { display: none; }
  .lc-stage { height: calc(100dvh - 130px); border-radius: 12px; }
}