html { 
  var(accent-color): window-accent-color; 
  border: window-frame-width solid transparent;
  min-width: 400dip;
}

html:owns-focus {
  border-color: morph(color(accent-color), opacity:50%);   
}

html > header { width:*; background-color: #eee;}
html > header { width:*; flow:horizontal; height:42dip; margin:0; } 

html > header > window-caption { 
  display:block; 
  line-height:42dip; 
  width:*; 
  padding:0 1em; 
  color:color(text-color);
}

html > header > window-buttons { 
  display:block; 
  position: fixed;
  top: 0; 
  left: *;
  flow: horizontal; 
  width:max-content; 
  height: window-caption-height;
  background-color: #eee;
}
html > header > window-buttons > window-button { 
  behavior:clickable;
  display:block; 
  height: inherit; 
  width:window-button-width; 
  foreground-size: 11dip;
  foreground-repeat: no-repeat;
  foreground-position:50% 50%;
  stroke:color(text-color);
  stroke-width:1dip;
  transition: background-color linear 100ms;
}
html > header > window-buttons > window-button:hover { 
  background:rgba(0,0,0,0.25);
}
html > header > window-buttons > window-button[role="window-close"] { stroke-width:1.44dip; foreground-image: url(path:M0 0 L10 10 M10 0 L0 10); }
html > header > window-buttons > window-button[role="window-close"]:hover { background:rgb(232,17,35); stroke:#fff; }

html > header > window-buttons > window-button[role="window-maximize"] { foreground-image: url(path:M0 0 H10 V10 H0 Z); }

html[window-state="maximized"] { border-color:transparent; }
html[window-state="maximized"] > header > window-buttons > window-button[role="window-maximize"] { foreground-image: url(path:M0 2 h8 v8 h-8 Z M2 2 v-2 h8 v8 h-2); }
html > header > window-buttons > window-button[role="window-minimize"] { foreground-image: url(path:M0 0 M0 5 H10 M10 10); }

@media (platform == "OSX"){
  html > header > window-buttons {
    visibility: none;
  }

  html > header {
    padding-top: window-caption-height;
    background: #000;
  }
  
  html > header > window-caption {
    line-height: window-caption-height;
  }

  html > header > window-caption > #bookmarks {
    margin-top: window-caption-height;
  }
}

.logo-background-text {
  text-align: left;
  font-size: 8pt; 
  color: gray;
  width: 60dip; 
  height: 75dip;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1em;
}