/* Cool acrylic, coloured identities and a quieter opaque reading surface. */
body[data-theme] {
  --ui-neutral:#b9cbdc;
  --role-apps:#68cbff; --role-projects:#f1bd79; --role-systems:#65dfba; --role-ai:#bea9ff;
  --action-play:#73e2a7; --action-pause:#f0c778; --action-danger:#ff9d94;
  --sd-glass-face:rgba(9,20,32,.60); --sd-glass-face-deep:rgba(4,12,23,.38);
  --sd-glass-edge:rgba(193,228,255,.30); --sd-glass-edge-soft:rgba(202,235,255,.13);
  --sd-glass-highlight:rgba(237,249,255,.23); --sd-glass-groove:rgba(197,225,247,.15);
  --sd-glass-groove-low:rgba(0,8,18,.48); --sd-glass-hover:rgba(192,232,255,.085);
  --sd-glass-down:rgba(0,0,0,.16); --sd-glass-text:rgba(248,248,250,.96);
  --sd-glass-muted:rgba(207,223,238,.80);
  --blue-glow:color-mix(in srgb,var(--workspace-accent,var(--blue)) 32%,transparent);
}
body[data-theme="graphite"] {
  --sd-glass-face:rgba(20,32,47,.66);
  --content-surface:#18222d; --content-surface-raised:#21303e;
}
body[data-theme="light"] {
  --ui-neutral:#4a6377;
  --role-apps:#086fa6; --role-projects:#98601f; --role-systems:#147858; --role-ai:#7151b6;
  --action-play:#237647; --action-pause:#916718; --action-danger:#ac3830;
  --sd-glass-face:rgba(238,247,253,.84); --sd-glass-face-deep:rgba(188,210,226,.24);
  --sd-glass-edge:rgba(255,255,255,.76); --sd-glass-edge-soft:rgba(255,255,255,.37);
  --sd-glass-highlight:rgba(255,255,255,.76); --sd-glass-groove:rgba(63,63,68,.19);
  --sd-glass-groove-low:rgba(48,66,83,.18); --sd-glass-hover:rgba(255,255,255,.38);
  --sd-glass-down:rgba(75,75,80,.11); --sd-glass-text:rgba(27,27,31,.96);
  --sd-glass-muted:rgba(44,66,83,.82);
  --content-surface:#f6f9fc; --content-surface-raised:#e8eff5;
}

/* A small amount of role colour makes the four docked sheets recognizable. */
.apps-zone {--area-role:var(--role-apps)}
.project-area {--area-role:var(--project-accent,var(--role-projects))}
.project-area[data-project-library-open="true"] {--area-role:var(--role-projects)}
.systems-zone {--area-role:var(--role-systems)}
.ai-area {--area-role:var(--role-ai)}
.area-window,.universal-search,.all-apps-drawer,.desktop-context-menu,.desktop-glass-dialog {
  --area-header-accent:var(--area-role,var(--workspace-accent,var(--blue)))!important;
  --area-body-tint:var(--area-header-accent)!important;
  --control-accent:var(--area-header-accent);
  --state-tone:var(--control-accent)!important;
}
.overview-zone-lane,.overview-apps-section,.open-windows-section,.overview-widgets {
  --lane-accent:var(--area-role,var(--workspace-accent,var(--blue)))!important;
}
.overview-panel[data-overview-panel="apps"] {--area-role:var(--role-apps)}
.overview-panel[data-overview-panel="projects"] {--area-role:var(--role-projects)}
.overview-panel[data-overview-panel="system"] {--area-role:var(--role-systems)}
.overview-panel[data-overview-panel="timeline"] {--area-role:var(--role-ai)}
.system-widget {--widget-tone:var(--role-systems)!important}
body[data-theme] .area-window .area-window-bar {
  background:var(--sd-glass-face-deep)!important;
  border-color:var(--sd-glass-groove)!important;
}
body[data-theme] .area-window .area-window-bar .area-window-identity b {color:var(--sd-glass-text)!important}
body[data-theme] .area-window .area-window-bar .area-window-identity small {color:var(--sd-glass-muted)!important}
body[data-theme] :is(.area-window-icon,.area-list-icon,.overview-zone-mark,.project-editor-mark,.package-mark) {
  color:var(--area-role,var(--workspace-accent,var(--ui-neutral)))!important;background:transparent!important;
  border-color:var(--sd-glass-groove)!important;box-shadow:none!important;
}
body[data-theme] .project-area[data-project-library-open="false"] .area-window-icon {color:var(--project-accent)!important}
.overview-system-heading,.overview-zone-heading,.overview-section-heading {
  background:color-mix(in srgb,var(--area-role,var(--workspace-accent)) 10%,var(--sd-glass-face-deep))!important;color:var(--sd-glass-text)!important;
}
body[data-theme] :is(.overview-zone-heading,.overview-section-heading) .eyebrow {color:var(--sd-glass-muted)!important}
.desktop-glass-dialog :is(.package-titlebar,.project-editor-titlebar) {background:var(--sd-glass-face-deep)!important}
.project-editor-titlebar small,.package-window :is(.package-mark,.package-size,.package-mode-switch svg,.package-primary svg,.import-count),
.overview-layout-status svg,.overview-areas-widget>header svg,.apps-zone .overview-launch svg,
.system-launcher svg,.widget-heading svg,.launcher-category svg,.overview-area-row>button {
  color:var(--area-role,var(--workspace-accent,var(--ui-neutral)))!important;
}
.package-window .package-size {background:var(--sd-glass-face-deep)!important}
.area-resize-handle:hover,.area-window.is-area-resizing>.area-resize-handle {background:var(--area-header-accent)!important;box-shadow:0 0 5px color-mix(in srgb,var(--area-header-accent) 30%,transparent)!important}

/* Adjacent Areas remain separate sheets even when their dock rectangles meet.
   The glass edge faces the working canvas; shared seams divide dock peers. */
body[data-theme] .area-window {
  --area-sheet-shade:rgba(221,241,255,.035);
  --area-seam-dark:rgba(0,8,18,.52);
  --area-seam-light:rgba(210,239,255,.32);
  --area-glass-edge-direction:to right;
  --area-join-seam:linear-gradient(transparent,transparent);
  background:linear-gradient(120deg,var(--area-sheet-shade),transparent 36% 78%,var(--area-sheet-shade)),color-mix(in srgb,var(--sd-glass-face) 96%,var(--area-header-accent) 4%)!important;
}
body[data-theme="light"] .area-window {
  --area-sheet-shade:rgba(255,255,255,.18);
  --area-seam-dark:rgba(45,45,50,.30);
  --area-seam-light:rgba(255,255,255,.85);
}
body[data-theme] .area-window::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:30;
  pointer-events:none;
  background:
    linear-gradient(var(--area-glass-edge-direction),var(--area-seam-dark) 0 1px,var(--area-seam-light) 1px 2px,transparent 2px),
    var(--area-join-seam);
}
body[data-theme] .area-window[data-dock-edge="left"] {--area-glass-edge-direction:to left}
body[data-theme] .area-window[data-dock-edge="right"] {--area-glass-edge-direction:to right}
body[data-theme] .area-window[data-dock-edge="top"] {--area-glass-edge-direction:to top}
body[data-theme] .area-window[data-dock-edge="bottom"] {--area-glass-edge-direction:to bottom}
body[data-theme] .area-window[data-area-join-edge="top"] {
  --area-join-seam:linear-gradient(to bottom,var(--area-seam-dark) 0 1px,var(--area-seam-light) 1px 2px,transparent 2px);
}
body[data-theme] .area-window[data-area-join-edge="left"] {
  --area-join-seam:linear-gradient(to right,var(--area-seam-dark) 0 1px,var(--area-seam-light) 1px 2px,transparent 2px);
}
body[data-theme] .area-window>.area-window-bar {
  background:linear-gradient(110deg,color-mix(in srgb,var(--area-header-accent) 24%,var(--sd-glass-face)),color-mix(in srgb,var(--area-header-accent) 10%,var(--sd-glass-face)))!important;
  border-bottom:1px solid color-mix(in srgb,var(--area-header-accent) 28%,var(--sd-glass-groove))!important;
  box-shadow:inset 0 1px var(--sd-glass-highlight)!important;
}
body[data-theme] .area-window>.area-window-bar::after {content:none}

/* Rail labels distinguish Area roles alongside the icons and coloured tools. */
.area-window[data-area-state="rail"] .area-window-identity {
  flex-direction:column;
  gap:2px;
}
.area-window[data-area-state="rail"] .area-window-identity::after {
  display:block;
  color:var(--sd-glass-text);
  font:650 10px/12px system-ui,sans-serif;
}
.apps-zone[data-area-state="rail"] .area-window-identity::after {content:"Apps"}
.project-area[data-area-state="rail"] .area-window-identity::after {content:"Workspace\A& Projects";white-space:pre-line;text-align:center;font-size:9px}
.systems-zone[data-area-state="rail"] .area-window-identity::after {content:"System"}
.area-window[data-area-state="rail"]:is([data-dock-edge="left"],[data-dock-edge="right"])>.area-window-bar {
  flex-basis:60px;
  min-height:60px;
}
.apps-zone[data-area-state="rail"]:is([data-dock-edge="left"],[data-dock-edge="right"])>.area-window-bar {
  flex:0 0 auto;
  min-height:94px;
}

/* Coloured state lights remain distinct from ordinary momentary buttons. */
button:is(.material-glass-button,.material-abs-button) {--state-tone:var(--control-accent,var(--workspace-accent,var(--blue)))!important;--glass-key-tone:var(--state-tone)!important}
body[data-theme] :where(button,a,input,textarea,select,[tabindex]):focus-visible {outline-color:var(--control-accent,var(--workspace-accent,var(--blue)))!important}
:where(input,textarea) {caret-color:var(--control-accent,var(--workspace-accent,var(--blue)))}
.quick-toggle:is(.is-active,[aria-pressed="true"]),.nav-choice.is-active {color:var(--text)!important}
.quick-toggle:is(.is-active,[aria-pressed="true"]) svg {color:var(--role-systems)!important}
.project-mode-status {background:var(--sd-glass-face-deep)!important;border-color:var(--sd-glass-groove)!important}
.content-row.is-selected {background:color-mix(in srgb,var(--app-primary,var(--workspace-accent)) 16%,var(--well-2));box-shadow:inset 2px 0 var(--app-primary,var(--workspace-accent))}
.calendar-grid button.is-today {color:var(--sd-glass-text)!important;background:color-mix(in srgb,var(--role-systems) 16%,var(--sd-glass-face-deep))!important;box-shadow:inset 0 -2px var(--role-systems)!important}
.next-event>i,.timer-progress i,.equalizer i,.overview-track i {background:var(--control-accent,var(--workspace-accent))!important;box-shadow:none!important}
input[type="range"] {accent-color:var(--control-accent,var(--workspace-accent,var(--blue)))!important}
body[data-theme] :is(.area-window,.universal-search) input[type="range"].material-glass-field::-webkit-slider-runnable-track {background:linear-gradient(to right,var(--control-accent,var(--workspace-accent)) var(--range-progress,0%),var(--sd-glass-groove) var(--range-progress,0%))!important;box-shadow:none!important}
body[data-theme] :is(.area-window,.universal-search) input[type="range"].material-glass-field::-moz-range-progress {background:var(--control-accent,var(--workspace-accent))!important;box-shadow:none!important}

/* Entity colour identifies launchers, workspaces and projects. */
button[data-open-app] {--state-tone:var(--app-primary)!important;--glass-key-tone:var(--app-primary)!important}
button[data-workspace] {--state-tone:var(--tab-color,var(--workspace-accent))!important}
.workspace-tab,.workspace-glyph,.workspace-home-icon {background:transparent!important;box-shadow:none!important}
.workspace-tab.is-active {box-shadow:inset 0 -2px var(--tab-color)!important}
.universal-search .overview-project {--state-tone:var(--project-card-accent)!important}
.overview-project,.workspace-context-card,.workspace-folder,.workspace-config-file {
  background:transparent!important;
}
.universal-search .overview-project:is(.is-active,[aria-selected="true"]) {background:color-mix(in srgb,var(--project-card-accent) 12%,transparent)!important}
.project-window-scope {background:transparent!important}

/* Parked app identity is a full top light strip. Reset both axes: legacy
   side-strip width/right/bottom values otherwise shrink it to a tiny dot. */
.apps-zone .mini-card[data-mini-card]::after {
  content:"";
  position:absolute;
  inset:0 9px auto;
  width:auto;
  height:3px;
  border-radius:0 0 2px 2px;
  background:var(--app-primary);
  box-shadow:0 0 5px color-mix(in srgb,var(--app-primary) 35%,transparent);
  opacity:1;
  pointer-events:none;
}

/* The app accent belongs to the whole opaque window, not just its icon.
   Stronger casing tint and quieter document tint keep text easy to read. */
.app-frame {
  --app-content-surface:color-mix(in srgb,var(--content-surface) 97%,var(--app-primary) 3%);
  --app-content-raised:color-mix(in srgb,var(--content-surface-raised) 94%,var(--app-primary) 6%);
  --app-content:var(--app-content-surface);
}
.app-frame.material-surface-abs {
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--control-top) 76%,var(--app-primary) 24%),
    color-mix(in srgb,var(--control-bottom) 86%,var(--app-primary) 14%));
}
.app-frame .app-titlebar {
  background:linear-gradient(110deg,color-mix(in srgb,var(--abs-mid) 62%,var(--app-primary) 38%),color-mix(in srgb,var(--abs-mid) 76%,var(--app-primary) 24%));
  box-shadow:inset 0 1px color-mix(in srgb,var(--app-primary) 34%,rgba(255,255,255,.20));
}
.app-frame.material-surface-abs :is(.app-toolbar,.browser-toolbar,.music-controls,.folder-tabs,.notes-layout nav) {
  background:color-mix(in srgb,var(--control-top) 88%,var(--app-primary) 12%);
  border-color:color-mix(in srgb,var(--app-primary) 20%,var(--control-edge));
}
.app-frame button:is(.material-glass-button,.material-abs-button) {
  --state-tone:var(--app-primary)!important;
  --glass-key-tone:var(--app-primary)!important;
}
.app-frame button.material-abs-button:not(.danger) {
  background:linear-gradient(180deg,color-mix(in srgb,var(--app-primary) 11%,var(--control-top)),color-mix(in srgb,var(--app-primary) 6%,var(--control-bottom)))!important;
  border-color:color-mix(in srgb,var(--app-primary) 18%,var(--control-edge))!important;
}
body[data-theme] .app-frame :where(button,a,input,textarea,select,[tabindex]):focus-visible {
  outline-color:var(--app-primary)!important;
}
.app-frame :where(input,textarea) {caret-color:var(--app-primary)}
.app-frame input[type="range"] {accent-color:var(--app-primary)!important}
.app-frame .equalizer i {background:var(--app-primary)!important}

/* Local colour at interactive points; the rest of the material stays calm. */
body[data-theme] .area-window button[data-open-app]:hover {
  background:color-mix(in srgb,var(--app-primary) 14%,transparent)!important;
}
body[data-theme] .area-window .quick-toggle[aria-pressed="true"] {
  background:color-mix(in srgb,var(--role-systems) 12%,var(--sd-glass-face-deep))!important;
  border-color:color-mix(in srgb,var(--role-systems) 24%,var(--sd-glass-groove))!important;
}
body[data-theme] .universal-search .overview-section-tab[aria-pressed="true"] {
  background:color-mix(in srgb,var(--workspace-accent) 12%,transparent);
  border-color:color-mix(in srgb,var(--workspace-accent) 26%,var(--sd-glass-groove));
}
body[data-theme] .universal-search .workspace-tab.is-active {
  background:color-mix(in srgb,var(--tab-color) 12%,transparent)!important;
}
.app-frame:not(.is-front):not(.is-dragging) {filter:saturate(.96) brightness(.96)}
.empty-mark {
  background:linear-gradient(135deg,rgba(224,249,255,.22),transparent 62%),color-mix(in srgb,var(--workspace-accent) 12%,var(--sd-glass-face));
  box-shadow:0 12px 36px rgba(0,0,0,.20),inset 0 1px var(--sd-glass-highlight),inset 0 -1px var(--sd-glass-groove-low);
}

/* Action colour follows the available action, rather than the parent app. */
button.play-toggle[aria-label="Play"],#timerToggle[aria-pressed="false"] {
  --state-tone:var(--action-play)!important;--glass-key-tone:var(--action-play)!important;color:var(--action-play)!important;
}
button.play-toggle[aria-label="Pause"],#timerToggle[aria-pressed="true"],button[data-music="stop"] {
  --state-tone:var(--action-pause)!important;--glass-key-tone:var(--action-pause)!important;color:var(--action-pause)!important;
}
button.play-toggle svg {color:inherit!important}
button.project-editor-danger,.context-menu-item.is-danger {
  --state-tone:var(--action-danger)!important;--glass-key-tone:var(--action-danger)!important;color:var(--action-danger)!important;
}
.context-menu-item.is-danger svg {color:var(--action-danger)!important}
/* Closing a window is an ordinary action; destructive dialogs stay red. */
.app-frame .window-key.danger {color:var(--muted)!important;background:linear-gradient(var(--control-top),var(--control-bottom))!important;border-color:var(--control-edge)!important}

@media(prefers-reduced-transparency:reduce) {
  body[data-theme] :is(.area-window,.universal-search,.desktop-glass-dialog) {background:#142332!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  body[data-theme="light"] :is(.area-window,.universal-search,.desktop-glass-dialog) {background:#eff5fa!important}
  body[data-theme] .area-window {--sd-glass-face:#142332;background:linear-gradient(var(--area-sheet-shade),var(--area-sheet-shade)),var(--sd-glass-face)!important}
  body[data-theme="light"] .area-window {--sd-glass-face:#eff5fa}
}