/* The web page supplies what VS Code's theme would: a dark and a light palette under the same variable names. */
:root {
  color-scheme: dark;
  --vscode-foreground: #d4d4d4; --vscode-editor-background: #1e1e1e; --vscode-sideBar-background: #252526;
  --vscode-descriptionForeground: #9d9d9d; --vscode-panel-border: #3c3c3c; --vscode-focusBorder: #3794ff;
  --vscode-button-background: #0e639c; --vscode-button-foreground: #fff; --vscode-button-hoverBackground: #1177bb;
  --vscode-button-secondaryBackground: #3a3d41; --vscode-button-secondaryForeground: #fff; --vscode-button-secondaryHoverBackground: #45494e;
  --vscode-input-background: #3c3c3c; --vscode-input-foreground: #d4d4d4; --vscode-dropdown-background: #3c3c3c; --vscode-dropdown-foreground: #d4d4d4;
  --vscode-textLink-foreground: #3794ff; --vscode-textCodeBlock-background: #2d2d2d; --vscode-errorForeground: #f48771;
  --vscode-editorWarning-foreground: #cca700; --vscode-testing-iconPassed: #73c991;
  --vscode-font-family: -apple-system, system-ui, "Segoe UI", sans-serif; --vscode-font-size: 15px;
  --vscode-editor-font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --vscode-foreground: #1f1f1f; --vscode-editor-background: #ffffff; --vscode-sideBar-background: #f3f3f3;
    --vscode-descriptionForeground: #616161; --vscode-panel-border: #d4d4d4; --vscode-input-background: #ffffff;
    --vscode-input-foreground: #1f1f1f; --vscode-dropdown-background: #ffffff; --vscode-dropdown-foreground: #1f1f1f;
    --vscode-button-secondaryBackground: #e5e5e5; --vscode-button-secondaryForeground: #1f1f1f; --vscode-textCodeBlock-background: #f0f0f0;
    --vscode-textLink-foreground: #005fb8; --vscode-editorWarning-foreground: #8a6100; --vscode-errorForeground: #b5200d;
  }
}
html, body { margin: 0; background: var(--vscode-editor-background); color: var(--vscode-foreground);
  font-family: var(--vscode-font-family); font-size: var(--vscode-font-size); }
.web-nav { display: flex; gap: 16px; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--vscode-panel-border);
  position: sticky; top: 0; background: var(--vscode-editor-background); z-index: 5; }
.web-nav a { color: var(--vscode-textLink-foreground); text-decoration: none; }
.web-nav form { margin-left: auto; }
.web-nav button { font: inherit; font-size: 13px; background: none; border: 1px solid var(--vscode-panel-border); color: var(--vscode-foreground); border-radius: 4px; padding: 2px 10px; }
.session-page #app { height: calc(100dvh - 43px); }
.session-page #app, .session-page #app > * { box-sizing: border-box; }
.login-box { max-width: 340px; margin: 12vh auto; padding: 0 16px; display: flex; flex-direction: column; }
.login-box h1 { margin: 0 0 16px; }
.login-box form { display: flex; flex-direction: column; gap: 12px; }
.login-box label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.login-box input { font: inherit; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--vscode-panel-border);
  background: var(--vscode-input-background); color: var(--vscode-input-foreground); }
.login-box button { font: inherit; padding: 9px; border: 0; border-radius: 6px; background: var(--vscode-button-background); color: var(--vscode-button-foreground); }
.login-box .err { color: var(--vscode-errorForeground); }
.login-box .small { color: var(--vscode-descriptionForeground); font-size: 13px; }