/* Panes edition: the current Facade desktop. Solid surfaces, small radii, a
   dark taskbar and light windows. */

.shell[data-edition="panes"] {
  --ui-font: "Hanken Grotesk", system-ui, "Segoe UI", sans-serif;
  --ui-size: 13.5px;
  --desk-bg: #1a2631;
  --desk-fg: #e6ecf0;
  --focus: var(--accent);
  --accent-fg: #14191e;
  --link: #8cc4f0;
  --danger: #d9534a;
  --muted: #6b7782;
  --sep: #dfe4e8;

  --win-bg: #f4f5f6;
  --body-bg: #f9fafa;
  --win-fg: #1d242b;
  --win-border: 1px solid #0d141a;
  --win-radius: 6px;
  --win-shadow: 0 10px 28px rgba(0, 0, 0, 0.34), 0 1px 3px rgba(0, 0, 0, 0.25);
  --title-h: 34px;
  --title-pad: 0 0 0 12px;
  --title-bg: #e3e7eb;
  --title-fg: #1d242b;
  --title-bg-inactive: #edf0f2;
  --title-fg-inactive: #7a858f;
  --ctl-gap: 0;
  --snap-bg: rgba(232, 184, 48, 0.12);
  --snap-border: 2px solid var(--accent);

  --tb-h: 46px;
  --tb-pad: 0 8px;
  --tb-btn-h: 38px;
  --tb-bg: #0f161c;
  --tb-fg: #dfe6ec;
  --tb-muted: #8fa1af;
  --tb-border: 1px solid #26323c;
  --tb-sep: #26323c;
  --avatar-radius: 3px;

  --pop-bg: #141d24;
  --pop-fg: #e3e9ee;
  --pop-border: 1px solid #2b3842;
  --pop-radius: 6px;
  --pop-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  --menu-pad: 4px;
  --menu-item-pad: 7px 10px;
  --menu-radius: 4px;
  --hover: #22303a;
  --hover-fg: #ffffff;
  --hover-soft: #e6ebef;
  --current-bg: #dde6ee;
  --selection: #2f5f8f;
  --selection-fg: #fff;

  --input-bg: #ffffff;
  --input-fg: #1d242b;
  --input-border: 1px solid #c5cdd4;
  --input-radius: 4px;
  --btn-bg: #ffffff;
  --btn-fg: #1d242b;
  --btn-border: 1px solid #c5cdd4;
  --btn-radius: 4px;
  --btn-shadow: none;
  --btn-shadow-active: inset 0 1px 2px rgba(0, 0, 0, 0.12);
  --btn-hover: #eef2f5;
  --primary-bg: #1f5f8b;
  --primary-fg: #fff;
  --primary-border: 1px solid #1f5f8b;
  --primary-hover: #1a5279;
  --swatch-border: 1px solid rgba(0, 0, 0, 0.25);
  --swatch-radius: 4px;
  --side-bg: #eef1f3;
  --side-border: 1px solid #dde2e6;
  --item-bg: #ffffff;
  --item-border: 1px solid #dde2e6;

  --widget-bg: #111a21;
  --widget-fg: #dde5eb;
  --widget-muted: #7f919e;
  --widget-border: 1px solid #26323c;
  --widget-radius: 6px;
  --widget-shadow: none;

  --icon-fg: #fff;
  --icon-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  --backdrop: rgba(5, 10, 14, 0.45);
}

/* The dark popovers sit on light windows; their inputs follow the popover. */
.shell[data-edition="panes"] .popover { --input-bg: #0d1419; --input-fg: #e3e9ee; --input-border: 1px solid #2f3d48; --muted: #8fa1af; --sep: #26323c; --current-bg: #1c2a33; }
.shell[data-edition="panes"] .widget { --input-bg: #0d1419; --input-fg: #e3e9ee; --input-border: 1px solid #2f3d48; --hover: #22303a; }
.shell[data-edition="panes"] .toasts { --muted: #8fa1af; }

.shell[data-edition="panes"][data-density="compact"] { --ui-size: 12.5px; --title-h: 30px; --tb-h: 40px; --tb-btn-h: 34px; }

.shell[data-edition="panes"] .win-btn { width: 44px; height: 100%; color: #3c4650; }
.shell[data-edition="panes"] .win-btn:hover { background: #d2d8dd; }
.shell[data-edition="panes"] .win-close:hover { background: #c4372f; color: #fff; }
.shell[data-edition="panes"] .win.is-active .win-title { border-bottom: 1px solid #cdd3d8; }
.shell[data-edition="panes"] .win-title { border-bottom: 1px solid #e2e6e9; border-radius: 5px 5px 0 0; }
.shell[data-edition="panes"] .win.is-max .win-title { border-radius: 0; }
.shell[data-edition="panes"] .win-body { border-radius: 0 0 5px 5px; }
.shell[data-edition="panes"] .win:not(.is-active) { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); }

.shell[data-edition="panes"] .taskbar button { background: none; border: 0; border-radius: 4px; color: inherit; }
.shell[data-edition="panes"] .taskbar button:hover { background: #1c2730; }
.shell[data-edition="panes"] .tb-start { letter-spacing: 0.01em; }
.shell[data-edition="panes"] .tb-start.is-down { background: #1c2730; }
.shell[data-edition="panes"] .tb-task { position: relative; }
.shell[data-edition="panes"] .tb-task::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 2px; height: 2px; border-radius: 1px; background: #4a5a66; }
.shell[data-edition="panes"] .tb-task.is-active { background: #1c2730; }
.shell[data-edition="panes"] .tb-task.is-active::after { background: var(--accent); left: 20%; right: 20%; }
.shell[data-edition="panes"] .tb-task.is-min .tb-task-name { color: var(--tb-muted); }
.shell[data-edition="panes"] .tb-char { border: 1px solid #26323c !important; padding-left: 4px; }
.shell[data-edition="panes"] .tb-ws { color: var(--tb-muted); }

/* Start menu */
.shell[data-edition="panes"] .startmenu { width: 440px; }
.sm-modern { padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.sm-results { min-height: 120px; }
.sm-heading { margin: 12px 0 8px; font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #7f919e; }
.sm-apps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.sm-app { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 2px; background: none; border: 0; border-radius: 4px; color: inherit; font-size: 0.88em; text-align: center; }
.sm-app:hover, .sm-app:focus-visible { background: #1f2a33; outline: none; }
.sm-workspaces { display: flex; gap: 6px; flex-wrap: wrap; }
.sm-ws { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: none; border: 1px solid #2f3d48; border-radius: 4px; color: inherit; }
.sm-ws:hover { background: #1f2a33; }
.sm-ws.is-current { border-color: var(--accent); }
.sm-ws-new { color: #8fa1af; }
.sm-empty { color: #8fa1af; margin: 16px 0; }
.sm-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 10px; border-top: 1px solid #26323c; }
.sm-user { display: flex; align-items: center; gap: 8px; color: #b7c4ce; }
.sm-signout { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: none; border: 1px solid #2f3d48; border-radius: 4px; color: inherit; }
.sm-signout:hover { background: #1f2a33; }