/* Panes 2000 edition: the classic workstation. Grey bevels, a navy title
   gradient on the active window, square corners, dense lists. */

.shell[data-edition="panes2000"] {
  --ui-font: Tahoma, Verdana, "Segoe UI", "DejaVu Sans", sans-serif;
  --ui-size: 11.5px;
  --face: #d4d0c8;
  --hi: #ffffff;
  --lo: #808080;
  --dk: #404040;
  --navy: #0a246a;
  --bevel-out: inset -1px -1px 0 var(--dk), inset 1px 1px 0 var(--hi), inset -2px -2px 0 var(--lo), inset 2px 2px 0 #e8e6e1;
  --bevel-in: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi), inset 2px 2px 0 var(--dk), inset -2px -2px 0 #e8e6e1;
  --bevel-thin-in: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi);

  --desk-bg: #3a6a78;
  --desk-fg: #000;
  --focus: #000;
  --accent-fg: #fff;
  --link: #0a246a;
  --danger: #b0201a;
  --muted: #555;
  --sep: #a8a49c;

  --win-bg: var(--face);
  --body-bg: var(--face);
  --win-fg: #000;
  --win-border: 0;
  --win-radius: 0;
  --win-shadow: var(--bevel-out);
  --title-h: 20px;
  --title-pad: 0 3px 0 4px;
  --title-bg: linear-gradient(90deg, var(--navy), #a6caf0);
  --title-fg: #fff;
  --title-bg-inactive: linear-gradient(90deg, #808080, #c0c0c0);
  --title-fg-inactive: #d4d0c8;
  --ctl-gap: 2px;
  --snap-bg: transparent;
  --snap-border: 3px solid #808080;

  --tb-h: 30px;
  --tb-pad: 2px;
  --tb-btn-h: 23px;
  --tb-bg: var(--face);
  --tb-fg: #000;
  --tb-muted: #444;
  --tb-border: 1px solid var(--hi);
  --tb-sep: var(--lo);
  --avatar-radius: 0;

  --pop-bg: var(--face);
  --pop-fg: #000;
  --pop-border: 0;
  --pop-radius: 0;
  --pop-shadow: var(--bevel-out), 2px 2px 0 rgba(0, 0, 0, 0.35);
  --menu-pad: 3px;
  --menu-item-pad: 4px 18px 4px 6px;
  --menu-radius: 0;
  --hover: var(--navy);
  --hover-fg: #fff;
  --hover-soft: #c8c4bc;
  --current-bg: #c3c0b8;
  --selection: var(--navy);
  --selection-fg: #fff;

  --input-bg: #fff;
  --input-fg: #000;
  --input-border: 0;
  --input-radius: 0;
  --btn-bg: var(--face);
  --btn-fg: #000;
  --btn-border: 0;
  --btn-radius: 0;
  --btn-shadow: var(--bevel-out);
  --btn-shadow-active: var(--bevel-in);
  --btn-hover: var(--face);
  --primary-bg: var(--face);
  --primary-fg: #000;
  --primary-border: 1px solid #000;
  --primary-hover: var(--face);
  --swatch-border: 1px solid #000;
  --swatch-radius: 0;
  --side-bg: #fff;
  --side-border: 0;
  --item-bg: #fff;
  --item-border: 1px solid var(--lo);

  --widget-bg: var(--face);
  --widget-fg: #000;
  --widget-muted: #444;
  --widget-border: 0;
  --widget-radius: 0;
  --widget-shadow: var(--bevel-out);

  --icon-fg: #fff;
  --icon-text-shadow: none;
  --backdrop: transparent;
  --accent: #0a246a;
}

.shell[data-edition="panes2000"][data-density="compact"] { --ui-size: 11px; --title-h: 18px; }

/* Sunken fields */
.shell[data-edition="panes2000"] :is(.charlist-search, .sm-search, .cp-input, .dialog-input, .widget-note-text, input[type="color"]) { box-shadow: var(--bevel-in); padding-left: 6px; }
.shell[data-edition="panes2000"] :is(.charlist-search, .cp-input, .dialog-input) { height: 22px; }

/* Windows */
.shell[data-edition="panes2000"] .win { padding: 3px; }
.shell[data-edition="panes2000"] .win.is-max { padding: 0; box-shadow: none; }
.shell[data-edition="panes2000"] .win-title { font-weight: 700; gap: 4px; }
.shell[data-edition="panes2000"] .win-btn { width: 16px; height: 14px; background: var(--face); color: #000; box-shadow: var(--bevel-out); }
.shell[data-edition="panes2000"] .win-btn:active { box-shadow: var(--bevel-in); }
.shell[data-edition="panes2000"] .win-btn svg { width: 9px; height: 9px; }
.shell[data-edition="panes2000"] .win-close { margin-left: 2px; }
.shell[data-edition="panes2000"] .win-body { margin-top: 2px; }
.shell[data-edition="panes2000"] .win-title, .shell[data-edition="panes2000"] .win.is-active .win-title { background-size: 100% 100%; }

/* Taskbar */
.shell[data-edition="panes2000"] .taskbar { box-shadow: inset 0 1px 0 var(--face), inset 0 2px 0 var(--hi); gap: 3px; }
.shell[data-edition="panes2000"] .taskbar button { background: var(--face); border: 0; border-radius: 0; color: #000; box-shadow: var(--bevel-out); }
.shell[data-edition="panes2000"] .taskbar button:active,
.shell[data-edition="panes2000"] .tb-start.is-down,
.shell[data-edition="panes2000"] .tb-task.is-active { box-shadow: var(--bevel-in); background: repeating-conic-gradient(#fff 0 25%, var(--face) 0 50%) 0 0 / 2px 2px; }
.shell[data-edition="panes2000"] .tb-task.is-active { font-weight: 700; }
.shell[data-edition="panes2000"] .tb-start { padding: 0 6px 0 4px; gap: 4px; }
.shell[data-edition="panes2000"] .tb-sep { width: 2px; height: 22px; background: none; border-left: 1px solid var(--lo); border-right: 1px solid var(--hi); }
.shell[data-edition="panes2000"] .tb-pinned { padding: 0 4px; gap: 1px; }
.shell[data-edition="panes2000"] .tb-pin { box-shadow: none !important; background: none !important; width: 24px; }
.shell[data-edition="panes2000"] .tb-pin:hover { box-shadow: var(--bevel-thin-in) !important; }
.shell[data-edition="panes2000"] .tb-task { flex-basis: 160px; max-width: 160px; justify-content: flex-start; }
.shell[data-edition="panes2000"] .tb-tray { box-shadow: var(--bevel-thin-in); padding: 0 4px; height: 23px; gap: 2px; }
.shell[data-edition="panes2000"] .tb-tray .tb-tray-btn { box-shadow: none; background: none; height: 21px; padding: 0 4px; }
.shell[data-edition="panes2000"] .tb-tray .tb-tray-btn:hover { box-shadow: var(--bevel-thin-in); }
.shell[data-edition="panes2000"] .tb-clock { flex-direction: row; gap: 0; }
.shell[data-edition="panes2000"] .tb-clock-date { display: none; }
.shell[data-edition="panes2000"] .tb-char-role { display: none; }
.shell[data-edition="panes2000"] .tb-char-name { font-weight: 400; }
.shell[data-edition="panes2000"] .tb-avatar { width: 16px; height: 16px; font-size: 8px; }

/* Classic start menu */
.shell[data-edition="panes2000"] .startmenu { padding: 3px; }
.sm-classic { display: flex; min-width: 230px; }
.sm-c-band { width: 22px; flex: none; display: flex; align-items: flex-end; justify-content: center; padding: 6px 0; background: linear-gradient(0deg, var(--navy), #3a6ea5); color: #d4d0c8; }
.sm-c-band span { writing-mode: vertical-rl; transform: rotate(180deg); font: 700 16px/1 Tahoma, Verdana, sans-serif; letter-spacing: 0.02em; }
.sm-c-band b { color: #fff; }
.sm-c-list { display: flex; flex-direction: column; flex: 1; }
.sm-c-item { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 16px 0 4px; text-align: left; background: none; border: 0; color: #000; }
.sm-c-item:hover, .sm-c-item:focus-visible { background: var(--navy); color: #fff; outline: none; }
.sm-c-icon { width: 26px; display: grid; place-items: center; flex: none; }
.sm-c-radio { width: 16px; height: 16px; display: grid; place-items: center; }
.sm-c-sep { height: 0; margin: 3px 2px; border-top: 1px solid var(--lo); border-bottom: 1px solid var(--hi); }
.sm-c-group { padding: 4px 8px 2px 38px; color: #555; font-size: 0.92em; }

/* Popover lists */
.shell[data-edition="panes2000"] .charlist-items { background: #fff; box-shadow: var(--bevel-in); border: 0; padding: 2px; }
.shell[data-edition="panes2000"] .charlist-item { padding: 3px 6px; }
.shell[data-edition="panes2000"] .charlist-item.is-current { background: none; font-weight: 700; }
.shell[data-edition="panes2000"] .charlist.is-compact .charlist-items { border: 0; }
.shell[data-edition="panes2000"] .menu-item.is-checked .menu-icon::before { width: 5px; height: 5px; }
.shell[data-edition="panes2000"] .clockpop-time { font-size: 1.8em; }
.shell[data-edition="panes2000"] .cal-day.is-today { background: var(--navy); }

/* Widgets as desk accessories */
.shell[data-edition="panes2000"] .widget { padding: 3px 3px 6px; }
.shell[data-edition="panes2000"] .widget-head { background: linear-gradient(90deg, var(--navy), #a6caf0); margin: 0 0 6px; padding: 2px 3px 2px 5px; height: 18px; }
.shell[data-edition="panes2000"] .widget-title { font: 700 11px/1 Tahoma, Verdana, sans-serif; letter-spacing: 0; text-transform: none; color: #fff; }
.shell[data-edition="panes2000"] .widget-remove { opacity: 1; width: 16px; height: 14px; background: var(--face); color: #000; box-shadow: var(--bevel-out); }
.shell[data-edition="panes2000"] .widget-remove svg { width: 8px; height: 8px; }
.shell[data-edition="panes2000"] .widget > :not(.widget-head) { margin: 0 5px; }
.shell[data-edition="panes2000"] .widget-big { font-size: 1.9em; font-weight: 400; }

/* Control Panel */
.shell[data-edition="panes2000"] .cp { padding: 6px; gap: 6px; }
.shell[data-edition="panes2000"] .cp-nav { box-shadow: var(--bevel-in); padding: 4px; }
.shell[data-edition="panes2000"] .cp-nav-item { padding: 3px 6px; }
.shell[data-edition="panes2000"] .cp-nav-item.is-current { background: var(--navy); color: #fff; font-weight: 400; }
.shell[data-edition="panes2000"] .cp-content { padding: 6px 10px 16px; }
.shell[data-edition="panes2000"] .cp-title { font-size: 1.3em; }
.shell[data-edition="panes2000"] .cp-field { border-top: 0; box-shadow: 0 -1px 0 var(--hi), 0 -2px 0 var(--lo); margin-top: 2px; }
.shell[data-edition="panes2000"] .cp-field:first-of-type { box-shadow: none; }
.shell[data-edition="panes2000"] .cp-item { border: 0; box-shadow: var(--bevel-in); }
.shell[data-edition="panes2000"] .cp-item.is-current { font-weight: 700; }
.shell[data-edition="panes2000"] .cp-preset.is-current { border-color: var(--navy); }
.shell[data-edition="panes2000"] .cp-btn, .shell[data-edition="panes2000"] .dialog-btn { min-height: 23px; padding: 0 12px; min-width: 75px; }
.shell[data-edition="panes2000"] .cp-icon { min-width: 26px; padding: 0; }

/* Dialogs */
.shell[data-edition="panes2000"] .dialog { padding: 3px; }
.shell[data-edition="panes2000"] .dialog-body, .shell[data-edition="panes2000"] .dialog-actions { background: var(--face); }

/* Toasts as tray balloons */
.shell[data-edition="panes2000"] .toast { background: #ffffe1; box-shadow: none; border: 1px solid #000; }
.shell[data-edition="panes2000"] .toast-error { border-left: 1px solid #000; }

/* Desktop icons */
.shell[data-edition="panes2000"] .desk-icon:focus span { background: var(--navy); }

/* Navigator */
.shell[data-edition="panes2000"] .nav-bar { --nav-bar-bg: var(--face); --nav-bar-border: 0; --nav-bar-pad: 3px 2px; box-shadow: 0 1px 0 var(--lo), 0 2px 0 var(--hi); margin-bottom: 2px; }
.shell[data-edition="panes2000"] .nav-btn { width: 28px; height: 24px; border: 1px solid transparent; }
.shell[data-edition="panes2000"] .nav-btn:hover:not([disabled]) { background: none; box-shadow: var(--bevel-thin-in); }
.shell[data-edition="panes2000"] .nav-form { height: 22px; box-shadow: var(--bevel-in); padding: 0 4px; }
.shell[data-edition="panes2000"] .nav-zone { border-radius: 0; }
.shell[data-edition="panes2000"] .nav-frame { box-shadow: var(--bevel-in); padding: 2px; }
.shell[data-edition="panes2000"] .nav-status { display: flex; margin-top: 2px; }
.shell[data-edition="panes2000"] .nav-status > * { box-shadow: var(--bevel-thin-in); padding: 1px 6px; }
.shell[data-edition="panes2000"] .nav-status-text { flex: 1; }
.shell[data-edition="panes2000"] .nav-status-zone { width: 140px; }