/* Chrome around the real Adakode panel: a VS Code window painted in Light Modern tokens, so the panel
   (assets/demo/panel.html — the extension's own markup, renderer and stylesheet) sits on the colours it
   actually sees in a light editor. The title bar, activity bar and the panel's white surface are the three
   bands a developer reads a VS Code window by, so they are the ones drawn here: nothing else is invented.
   The one deliberate departure from Light Modern is the activity rail, which carries the home page's own
   faint lime wash (--lime-soft in assets/css/style.css, the value the page's cards are washed with) instead
   of a neutral grey: the rail is where the brand lime already lives, so washing the strip keeps the
   window's left edge in the same colour family as the marks and buttons around it. */

:root {
    --wb-titlebar: #f8f8f8;        /* Light Modern titleBar.activeBackground */
    --wb-activity: rgba(118, 230, 0, 0.12);   /* the page's --lime-soft, over the editor white */
    --wb-editor: #ffffff;          /* editor.background: the panel's own surface */
    --wb-line: #e5e5e5;            /* titleBar / activityBar / panel border */
    --wb-fg: #1f1f1f;              /* titleBar.activeForeground */
    --wb-icon: #616161;            /* activityBar.inactiveForeground */
    --wb-icon-active: #1f1f1f;     /* activityBar.foreground */
    --wb-accent: #76E600;          /* the brand lime, on the rail item that is open */
    --wb-close: #ff5f57;           /* the three window lights, as the site draws them elsewhere */
    --wb-min: #febc2e;
    --wb-max: #28c840;
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
}

body {
    background-color: var(--wb-editor);
    color: var(--wb-fg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif;
}

/* A window is a title bar with the work area under it. */
.workbench {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 420px;
}

/* The bar carries the three window lights and nothing else: no title, so it reads as a window
   whose document has no name yet rather than one asserting a project it does not have. */
.titlebar {
    flex: none;
    display: flex;
    align-items: center;
    height: 34px;
    padding: 0 12px;
    background-color: var(--wb-titlebar);
    border-bottom: 1px solid var(--wb-line);
}

.lights {
    display: inline-flex;
    gap: 6px;
}

.light {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.light.close { background-color: var(--wb-close); }
.light.min { background-color: var(--wb-min); }
.light.max { background-color: var(--wb-max); }

.workarea {
    flex: 1;
    min-height: 0;
    display: flex;
}

.activitybar {
    flex: 0 0 48px;
    width: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    background-color: var(--wb-activity);   /* the brand's faint lime wash, per the token above */
    border-right: 1px solid var(--wb-line);
}

.act {
    position: relative;
    display: grid;
    place-items: center;
    width: 48px;
    height: 34px;
    color: var(--wb-icon);
    line-height: 1;
}

.act.active {
    color: var(--wb-icon-active);
}

/* The open view is marked with the brand lime against the rail's edge, as the real rail marks it. */
.act.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 5px;
    width: 2px;
    border-radius: 0 1px 1px 0;
    background-color: var(--wb-accent);
}

.act.bottom {
    margin-top: auto;               /* settings sits on the floor of the rail */
}

.sidebar {
    flex: 1;
    min-width: 0;
    display: flex;
    background-color: var(--wb-editor);
}

.panel {
    flex: 1;
    width: 100%;
    border: 0;
    background-color: var(--wb-editor);
}