/*
 * The page around the editor (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="dw">: everything else in
 * <body> is the blog's (header, footer, loading screen, cookie notice, its pop-ups).
 * The editor itself is styled by drawio.css, inside its frame.
 */

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

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

#dw {
  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(--dw-fg);
}
@media (min-width: 720px) { #dw { padding: 22px 24px 8px; } }
#dw *, #dw *::before, #dw *::after { box-sizing: border-box; }
#dw a { color: var(--dw-purple); }
#dw a:hover { color: var(--dw-pink); }

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

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

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

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