/* Caleb Desktop / chrome study 01: neutral mac-inspired controls.
   Experimental branch. This deliberately changes presentation only:
   no HTML/JS window-manager actions, no dock layout, no desktop wallpaper. */
:root {
  --desktop-window-ink: #171717;
  --desktop-window-muted: #5c5c5c;
  --desktop-window-page: #ffffff;
  --desktop-window-raised: #f8f8f8;
  --desktop-window-hairline: #dfdfdf;
  --desktop-window-hover: #f0f0f0;
  --desktop-window-close: #ff5f57;
  --desktop-window-min: #febc2e;
  --desktop-window-max: #28c840;
}

/* A single, quietly framed surface rather than the mixed XP/brutalist chrome. */
.xp-window,
.xp-window.active {
  background: var(--desktop-window-page);
  border: 1px solid #cfcfcf;
  border-radius: 13px;
  box-shadow: 0 17px 46px rgba(9, 11, 16, .24), 0 2px 8px rgba(9, 11, 16, .10);
}
.xp-window.active {
  box-shadow: 0 20px 55px rgba(9, 11, 16, .29), 0 3px 12px rgba(9, 11, 16, .12);
}
.xp-window .xp-titlebar,
.xp-window:not(.active) .xp-titlebar,
.xp-window[data-kind="about"] .xp-titlebar,
.xp-window[data-kind="about"]:not(.active) .xp-titlebar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 42px;
  flex-basis: 42px;
  padding: 0 9px;
  border: 0;
  border-bottom: 1px solid var(--desktop-window-hairline);
  border-radius: 12px 12px 0 0;
  background: #f7f7f7;
  color: var(--desktop-window-ink);
  box-shadow: none;
}
.xp-window:not(.active) .xp-titlebar {
  background: #ededed;
}
.xp-window .titlebar-caption,
.xp-window .titlebar-text,
.xp-window:not(.active) .titlebar-caption,
.xp-window:not(.active) .titlebar-text {
  order: 1;
  color: var(--desktop-window-ink);
  font: 600 12px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-shadow: none;
}
.xp-window:not(.active) .titlebar-caption,
.xp-window:not(.active) .titlebar-text { color: #696969; }
.xp-window .titlebar-caption img {
  width: 18px;
  height: 18px;
}

/* Keep existing DOM actions and labels: order visually becomes
   red Close, yellow Minimize, green Maximize/restore. */
.xp-window .window-controls {
  order: 0;
  flex-direction: row-reverse;
  gap: 1px;
  margin-right: 9px;
  flex: 0 0 auto;
}
.xp-window .window-controls button,
.xp-window .window-controls button[data-window-action="close"] {
  width: 27px;
  height: 29px;
  min-width: 27px;
  min-height: 29px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: transparent;
  text-shadow: none;
  font-size: 0;
  line-height: 1;
  filter: none;
}
.xp-window .window-controls button::before {
  content: "";
  width: 13px;
  height: 13px;
  grid-area: 1 / 1;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 50%;
  background: var(--desktop-window-min);
}
.xp-window .window-controls button[data-window-action="close"]::before {
  background: var(--desktop-window-close);
}
.xp-window .window-controls button[data-window-action="maximize"]::before {
  background: var(--desktop-window-max);
}
.xp-window .window-controls button::after {
  content: "";
  grid-area: 1 / 1;
  color: #49352e;
  font: 700 10px/1 -apple-system, BlinkMacSystemFont, sans-serif;
  opacity: 0;
}
.xp-window .window-controls button[data-window-action="close"]::after {content: "×"}
.xp-window .window-controls button[data-window-action="minimize"]::after {content: "−"}
.xp-window .window-controls button[data-window-action="maximize"]::after {content: "+"}
.xp-window .window-controls:hover button::after,
.xp-window .window-controls button:focus-visible::after {opacity: 1}
.xp-window .window-controls button:hover,
.xp-window .window-controls button:active {background:rgba(0,0,0,.045);filter:none}
.xp-window .window-controls button:focus-visible {
  outline: 2px solid #333;
  outline-offset: 0;
}

/* Consistent, content-first window interiors. */
.xp-window .window-main,
.xp-window .window-main.no-padding {
  background: var(--desktop-window-page);
  color: var(--desktop-window-ink);
}
.xp-window .content-pad,
.xp-window .explorer-content { color: #292929; }
.xp-window .content-pad h2,
.xp-window .content-pad h3,
.xp-window .project-detail-header h2,
.xp-window .info-card h4,
.xp-window .tile-btn strong {
  color: var(--desktop-window-ink);
}
.xp-window .content-pad p,
.xp-window .info-card p,
.xp-window .project-item p {color: #505050}
.xp-window .info-card,
.xp-window .tile-btn,
.xp-window .contact-box,
.xp-window .project-item {
  background: #fafafa;
  color: var(--desktop-window-ink);
  border: 1px solid var(--desktop-window-hairline);
  border-radius: 10px;
  box-shadow: none;
}
.xp-window .tile-btn:hover,
.xp-window .project-item:hover,
.xp-window .file-item:hover,
.xp-window .file-item:focus-visible {
  background: var(--desktop-window-hover);
  border-color: #c5c5c5;
}
.xp-window .window-toolbar,
.xp-window .address-bar {
  background: var(--desktop-window-raised);
  border-bottom: 1px solid var(--desktop-window-hairline);
}
.xp-window .win-toolbar-btn {color:var(--desktop-window-ink)}
.xp-window .win-toolbar-btn:hover {background:#e9e9e9}
.xp-window .address-bar .path {
  color: #353535;
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 7px;
}
.xp-window .explorer-side .side-box {
  background: #fafafa;
  border: 1px solid #e1e1e1;
  border-radius: 9px;
  box-shadow: none;
}
.xp-window .file-item {color:var(--desktop-window-ink)}
.xp-window .xp-button,
.xp-window .cs-btn,
.xp-window .quick-back {
  background: #f7f7f7;
  color: #222;
  border: 1px solid #d5d5d5;
  border-radius: 8px;
  box-shadow: none;
  text-shadow: none;
}
.xp-window .xp-button:hover,
.xp-window .cs-btn:hover,
.xp-window .quick-back:hover {background:#eaeaea;color:#111}
.xp-window a:focus-visible,
.xp-window button:focus-visible {outline-color:#444}

/* Flat project cover panels: logos, text and content supply the color. */
.xp-window .destination-project,
.xp-window .destination-content {background: #fff}
.xp-window .destination-banner {
  background: #fafafa;
  border-bottom: 1px solid #e5e5e5;
  color: #171717;
  min-height: 138px;
  padding: 20px 25px;
}
.xp-window .destination-banner::before {display:none}
.xp-window .destination-banner h2 {color:#151515 !important}
.xp-window .destination-banner .destination-kicker {color:#555}
.xp-window .destination-status {color:#595959}
.xp-window .destination-status-dot {background:#4d4d4d;border-color:#666}
.xp-window .destination-emblem {
  background: #fff;
  border: 1px solid #e3e3e3;
  border-radius: 12px;
  transform: none;
  box-shadow: none;
}
.xp-window .destination-emblem img {transform:none}
.xp-window .destination-project .destination-intro {color:#3f3f3f !important}
.xp-window .destination-address {
  background:#fafafa;
  border:1px solid #e4e4e4;
  border-radius:9px;
}
.xp-window .destination-address span,
.xp-window .destination-address strong {color:#353535}
.xp-window .destination-project .quick-visit.destination-visit {
  color:#fff !important;
  background:#202020 !important;
  border:1px solid #202020;
  border-radius:9px;
  box-shadow:none !important;
}
.xp-window .destination-project .quick-visit.destination-visit:hover {
  color:#fff !important;
  background:#3a3a3a !important;
  border-color:#3a3a3a;
  box-shadow:none !important;
  transform:none;
}
.xp-window .destination-open-here {color:#464646 !important}
.xp-window .destination-footer {background:#fafafa;border-top:1px solid #e5e5e5}

/* The About shortcut folder keeps its layout, but uses the same
   monochrome canvas as other windows instead of a separate plum theme. */
.xp-window[data-kind="about"] .window-main {background:#fff}
.xp-window[data-kind="about"] .about-folder-popover {
  background:#fff;
  color:#171717;
}
.xp-window[data-kind="about"] .about-folder-intro,
.xp-window[data-kind="about"] .about-folder-hint,
.xp-window[data-kind="about"] .about-folder-app-label {
  color:#292929;
}
.xp-window[data-kind="about"] .about-folder-app-icon {
  background:#fafafa;
  border:1px solid #ddd;
  box-shadow:none;
}
.xp-window[data-kind="about"] .about-folder-app:hover .about-folder-app-icon {
  box-shadow:0 3px 10px rgba(0,0,0,.12);
}
.xp-window[data-kind="about"] .about-folder-foot {
  color:#777;
  border-top:1px solid #e4e4e4;
}

/* Opening the Start menu should not reintroduce a saturated theme.
   The floating dock itself and its buttons are deliberately unchanged. */
#start-menu {
  color:#222;
  background:#fff;
  border:1px solid #dadada;
  border-radius:13px;
  box-shadow:0 16px 46px rgba(0,0,0,.24);
}
#start-menu .start-head {
  background:#f8f8f8;
  border-bottom:1px solid #e4e4e4;
  color:#171717;
}
#start-menu .start-head strong {color:#171717}
#start-menu .start-left,
#start-menu .start-right {background:#fff;border-color:#ebebeb}
#start-menu .start-foot {
  background:#f8f8f8;
  color:#555;
  border-top:1px solid #e4e4e4;
}
#start-menu .start-entry,
#start-menu .side-entry {color:#262626}
#start-menu .start-entry:hover,
#start-menu .side-entry:hover {background:#eee;color:#171717}

/* Coarse pointer users keep practical touch targets even though only the
   colored central dots are visible. The underlying buttons and JS are intact. */
@media(max-width:740px), (hover:none) and (pointer:coarse) {
  .xp-window .xp-titlebar,
  .xp-window[data-kind="about"] .xp-titlebar {
    height:46px;
    flex-basis:46px;
    padding:0 6px;
  }
  .xp-window .window-controls button,
  .xp-window .window-controls button[data-window-action="close"] {
    width:37px;height:40px;min-width:37px;min-height:40px;
  }
  .xp-window .window-controls button::before {width:15px;height:15px}
  .xp-window .window-controls {margin-right:4px;gap:0}
}
@media(prefers-reduced-motion:reduce){
  .xp-window .window-controls button,
  .xp-window .window-controls button::before {transition:none}
}

/* Variant B: Graphite Editorial.
 * Neutral system chrome, content-led windows, and a restrained dock.
 * Source from the minimal chrome study; override stylistic choices only.
 * The native window manager and link navigation remain intact.
 */
:root {
  --desktop-window-ink: #202124;
  --desktop-window-muted: #575b60;
  --desktop-window-page: #fcfcfb;
  --desktop-window-raised: #f5f5f3;
  --desktop-window-hairline: #e0e1e1;
  --desktop-window-hover: #eeeeec;
}
.xp-window,.xp-window.active {
  background: #fcfcfb;
  border: 1px solid #45474d;
  border-radius: 13px;
  box-shadow: 0 18px 46px rgba(8,9,12,.30), 0 2px 8px rgba(8,9,12,.13);
}
.xp-window.active {box-shadow:0 20px 55px rgba(7,8,11,.35),0 2px 9px rgba(7,8,11,.15)}
.xp-window .xp-titlebar,
.xp-window:not(.active) .xp-titlebar,
.xp-window[data-kind="about"] .xp-titlebar,
.xp-window[data-kind="about"]:not(.active) .xp-titlebar {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  height:43px;
  flex:0 0 43px;
  padding:0 10px;
  border:0;
  border-bottom:1px solid #32353a;
  border-radius:12px 12px 0 0;
  background:#222428;
  box-shadow:none;
  color:#f7f7f7;
}
.xp-window:not(.active) .xp-titlebar,
.xp-window[data-kind="about"]:not(.active) .xp-titlebar {background:#4a4c50}
.xp-window .titlebar-caption,
.xp-window .titlebar-text,
.xp-window:not(.active) .titlebar-caption,
.xp-window:not(.active) .titlebar-text {
  order:1;
  color:#f8f8f8;
  font:600 12px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  text-shadow:none;
}
.xp-window:not(.active) .titlebar-caption {color:#e0e0e0}
.xp-window .titlebar-caption img {
  width:17px;height:17px;flex:none;
  padding:1px;background:#f6f6f6;
  border-radius:4px;
}
/* Traffic lights: invisible hit targets with one perfectly centered circle.
 * Explicit flex ordering produces red / yellow / green, despite original DOM
 * ordering being minimize / maximize / close. No underlying pill or oval.
 */
.xp-window .window-controls{
  order:0;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:0;
  margin-right:13px;
}
.xp-window .window-controls button,
.xp-window .window-controls button[data-window-action="close"]{
  appearance:none;
  -webkit-appearance:none;
  position:relative;
  display:block;
  flex:0 0 28px;
  width:28px;height:32px;min-width:28px;min-height:32px;
  padding:0;margin:0;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  text-shadow:none !important;
  filter:none !important;
  transform:none !important;
  color:transparent;
  font-size:0;line-height:0;
  overflow:visible;
}
.xp-window .window-controls button[data-window-action="close"]{order:0}
.xp-window .window-controls button[data-window-action="minimize"]{order:1}
.xp-window .window-controls button[data-window-action="maximize"]{order:2}
.xp-window .window-controls button::before{
  content:"";
  position:absolute;
  display:block;
  box-sizing:border-box;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  margin:0;
  width:13px;height:13px;
  border:1px solid rgba(0,0,0,.14);
  border-radius:50%;
  background:#febc2e;
  box-shadow:none;
  grid-area:auto;
}
.xp-window .window-controls button[data-window-action="close"]::before{background:#ff5f57}
.xp-window .window-controls button[data-window-action="maximize"]::before{background:#28c840}
.xp-window .window-controls button::after {
  position:absolute;
  display:block;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  grid-area:auto;
  margin:0;
  color:#292929;
  font:700 9px/1 -apple-system,BlinkMacSystemFont,sans-serif;
  opacity:0;
  text-shadow:none;
  pointer-events:none;
}
.xp-window .window-controls button[data-window-action="close"]::after{content:"×"}
.xp-window .window-controls button[data-window-action="minimize"]::after{content:"−"}
.xp-window .window-controls button[data-window-action="maximize"]::after{content:"+"}
.xp-window .window-controls:hover button::after,
.xp-window .window-controls button:focus-visible::after{opacity:1}
.xp-window .window-controls button:hover,
.xp-window .window-controls button:active{background:transparent !important;box-shadow:none !important}
.xp-window .window-controls button:focus-visible{outline:2px solid #fff;outline-offset:-2px}

/* Neutral buttons and panel content. */
.xp-window .content-pad,.xp-window .explorer-content{color:#26272b}
.xp-window .info-card,.xp-window .tile-btn,.xp-window .contact-box,.xp-window .project-item{
  background:#f8f8f7;border:1px solid #dedfdf;border-radius:10px;box-shadow:none
}
.xp-window .info-card h4,.xp-window .project-item h3,
.xp-window .content-pad h2,.xp-window .content-pad h3{color:#1f2023}
.xp-window .info-card p,.xp-window .content-pad p{color:#505258}
.xp-window .xp-button,.xp-window .cs-btn,.xp-window .quick-back {
  background:#f6f6f5;border:1px solid #d9dadb;color:#22242a;box-shadow:none;border-radius:9px
}
.xp-window .xp-button:hover,.xp-window .cs-btn:hover,.xp-window .quick-back:hover{background:#eaeaec;color:#1d1e20}

/* The project overview is intentionally low decoration. */
.xp-window .destination-banner {background:#f5f5f3;border-color:#e0e1e2}
.xp-window .destination-banner h2 {color:#17181c !important}
.xp-window .destination-project .quick-visit.destination-visit {
  background:#23252a !important;border-color:#23252a;color:#fff !important
}
.xp-window .destination-project .quick-visit.destination-visit:hover {background:#383b41 !important}
.xp-window[data-kind="about"] .about-folder-popover {background:#fcfcfb}

/* New simplified project list, no Explorer-style toolbar or sidebar. */
.xp-window .project-hub {padding:24px 25px 22px}
.xp-window .project-hub-eyebrow {
  margin:0 0 6px;
  font:700 10px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.16em;color:#6c7076
}
.xp-window .project-hub h2{
  margin:0 0 5px;font:700 25px/1.2 var(--portfolio-serif);
  color:#1d1f22
}
.xp-window .project-hub-intro{margin:0 0 17px;color:#5e6165;font-size:13px}
.xp-window .project-hub-grid{display:flex;flex-direction:column;gap:8px}
.xp-window .project-hub-item {
  width:100%;min-width:0;
  display:flex;align-items:center;gap:12px;
  padding:12px 13px;
  border:1px solid #e0e0df;border-radius:11px;
  background:#f9f9f8;box-shadow:none;
  color:#212225;text-align:left;
  cursor:pointer;
}
.xp-window .project-hub-item:hover,.xp-window .project-hub-item:focus-visible{
  background:#f0f0ef;border-color:#b6b9bd
}
.xp-window .project-hub-item:focus-visible{outline:3px solid #767c82;outline-offset:2px}
.xp-window .project-hub-item img{width:38px;height:38px;object-fit:contain;flex:0 0 38px}
.xp-window .project-hub-item>span:nth-child(2){min-width:0;flex:1;display:flex;flex-direction:column;gap:4px}
.xp-window .project-hub-item strong{font:700 14px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.xp-window .project-hub-item small{color:#686a6c;font:12px/1.25 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.xp-window .project-hub-open{font:18px/1 -apple-system,BlinkMacSystemFont,sans-serif;color:#81838a}

/* Dock: same floating layout, now truly neutral charcoal and white.
 * Avoid recoloring branded icons or the wallpaper. */
#taskbar{
  background:rgba(27,28,31,.97);
  color:#f6f6f6;
  border:1px solid #575a60;
  border-radius:18px;
  box-shadow:0 12px 32px rgba(5,7,9,.34),inset 0 1px rgba(255,255,255,.08)
}
#start-button{
  background:#34363a;
  color:#f4f4f4;
  border:1px solid #505259;
  border-radius:11px;
  box-shadow:none;
  text-shadow:none;
  font:600 13px/1 Tahoma,Arial,sans-serif;
  filter:none;
  transform:none
}
#start-button:hover,#start-button[aria-expanded="true"]{
  background:#474a50;
  border-color:#666b74;
  box-shadow:none;
  filter:none;
  transform:none
}
#start-button .start-symbol{
  width:16px;height:16px;gap:3px;transform:none;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)
}
#start-button .start-symbol i{
  background:#d7d8da !important;
  border-radius:2px;box-shadow:none
}
#quick-launch{height:34px;gap:4px;border-right:1px solid #51545b;padding:0 9px;margin-right:2px}
#quick-launch button{
  width:34px;height:34px;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;box-shadow:none
}
#quick-launch button:hover,#quick-launch button:focus-visible{background:#3b3e43;border-color:#565a60}
#quick-launch button:focus-visible{outline:2px solid #e3e5e8;outline-offset:1px}
#quick-launch img{width:22px;height:22px}
#taskbar-windows .task-window{
  background:#303238;border:1px solid #494c53;color:#eeeeef;
  border-radius:10px;box-shadow:none;text-shadow:none
}
#taskbar-windows .task-window:hover{background:#41444b}
#taskbar-windows .task-window.active{
  background:#f3f3f2;border-color:#f3f3f2;color:#1e2024;
  box-shadow:none
}
#taskbar-windows .task-window.active:hover{background:#fff;border-color:#fff}
#system-tray{background:transparent;border:0;box-shadow:none;color:#d6d7da}
#system-tray .tray-dot{background:#c5c7cb;box-shadow:0 0 0 2px #44474e}

/* Launcher stays simple: no contrasting old plum/panel blocks. */
#start-menu{
  background:#fdfdfc;color:#232529;
  border:1px solid #c9cccf;
  border-radius:15px;
  box-shadow:0 18px 46px rgba(6,9,13,.33);
  overflow:hidden
}
#start-menu .start-head{
  min-height:63px;height:auto;padding:12px 16px;
  background:#292b2f;border:0;border-bottom:1px solid #494b50;
  color:#fff;
}
#start-menu .start-head strong{color:#fff;font:700 15px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
#start-menu .start-head img{
  width:36px;height:36px;padding:4px;background:#f8f8f8;border:1px solid #d6d7d8;border-radius:10px
}
#start-menu .start-columns{min-height:0}
#start-menu .start-left,#start-menu .start-right{background:#fdfdfc;border-color:#ededed}
#start-menu .menu-eyebrow{color:#777a80;letter-spacing:.1em}
#start-menu .start-entry,#start-menu .side-entry{
  background:transparent;color:#2b2c2f;border:1px solid transparent;border-radius:10px;box-shadow:none
}
#start-menu .start-entry:hover,#start-menu .side-entry:hover{
  background:#f0f0ef;color:#202124;border-color:#ececec
}
#start-menu .start-entry strong{color:#25262a}
#start-menu .start-entry small{color:#71747a}
#start-menu .start-foot{background:#f8f8f7;color:#666a70;border-top:1px solid #eee}
#start-menu .side-separator{border-color:#ededed}

/* One mobile treatment for the new traffic-light hit areas and dock. */
@media(max-width:740px),(hover:none) and (pointer:coarse){
  .xp-window .xp-titlebar,.xp-window[data-kind="about"] .xp-titlebar{
    height:46px;flex:0 0 46px;padding:0 6px
  }
  .xp-window .window-controls{margin-right:5px}
  .xp-window .window-controls button,
  .xp-window .window-controls button[data-window-action="close"]{
    width:38px;height:42px;min-width:38px;min-height:42px;flex-basis:38px
  }
  .xp-window .window-controls button::before{width:15px;height:15px}
  .xp-window .project-hub{padding:19px 15px}
  #quick-launch{padding:0 4px;gap:1px;margin-right:0}
  #quick-launch button{width:30px;height:33px}
  #start-menu .start-head{padding:10px 12px}
}