/* palimpsest.css — the window chrome.
   Everything inside the two canvases is drawn by the application; this file
   only supplies the surrounding window, in the manner of the OS X screen dumps
   in Blackwell's paper. */

:root {
  --chrome: #e8e8ea;
  --chrome-edge: #b9b9c0;
  --title-from: #f3f3f5;
  --title-to: #dcdce0;
  --panel: #fdfdfd;
  --text: #34343c;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #6e7078;
  font: 13px/1.4 "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--text);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

#palimpsest { height: 100%; }

.palim-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--chrome);
  overflow: hidden;
}

/* ---- title bar ---- */

.palim-titlebar {
  flex: 0 0 auto;
  height: 22px;
  display: flex;
  align-items: center;
  background: linear-gradient(to bottom, var(--title-from), var(--title-to));
  border-bottom: 1px solid var(--chrome-edge);
  position: relative;
  user-select: none;
}

.palim-lights { display: flex; gap: 8px; padding-left: 8px; }
.palim-lights i {
  width: 11px; height: 11px; border-radius: 50%;
  background: #d6d6da; border: 1px solid rgba(0,0,0,0.22);
}
.palim-lights i:nth-child(1) { background: #ff5f57; }
.palim-lights i:nth-child(2) { background: #febc2e; }
.palim-lights i:nth-child(3) { background: #28c840; }

.palim-title {
  position: absolute; left: 0; right: 0; text-align: center;
  font-size: 12px; font-weight: 600; color: #4a4a52;
  letter-spacing: 0.2px; pointer-events: none;
}

/* Attribution lives in the window chrome, not on Blackwell's canvas. */
.palim-credit {
  margin-left: auto;
  padding-right: 10px;
  font-size: 10px;
  color: #8a8a94;
  letter-spacing: 0.1px;
  white-space: nowrap;
  pointer-events: none;
}

@media (max-width: 660px) { .palim-credit { display: none; } }

/* ---- body ---- */

.palim-body { flex: 1 1 auto; display: flex; min-height: 0; }

.palim-side {
  flex: 0 0 auto;
  width: 132px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--chrome-edge);
  background: var(--panel);
  min-height: 0;
}

.palim-toolbar {
  flex: 0 0 auto;
  display: flex;
  gap: 3px;
  padding: 5px 4px;
  border-bottom: 1px solid #e2e2e6;
  background: linear-gradient(to bottom, #fafafb, #ececef);
}

.palim-toolbtn {
  width: 34px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  border: 1px solid #c4c4cb;
  border-radius: 4px;
  background: linear-gradient(to bottom, #ffffff, #e6e6ea);
  cursor: pointer;
}
.palim-toolbtn:hover { background: linear-gradient(to bottom, #ffffff, #d8d8de); }
.palim-toolbtn:active { background: linear-gradient(to bottom, #d4d4da, #eeeef2); }
.palim-toolbtn canvas { display: block; pointer-events: none; }

.palim-stackpanel {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
.palim-stackview { display: block; }

/* ---- main view ---- */

.palim-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #9a9ca4;
  position: relative;
  overflow: hidden;
}

.palim-canvas {
  display: block;
  box-shadow: 0 2px 14px rgba(0,0,0,0.28);
  touch-action: none;
}

.palim-tip {
  position: absolute;
  display: none;
  padding: 3px 7px;
  background: rgba(40,44,58,0.88);
  color: #fff;
  font-size: 11px;
  border-radius: 4px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 10;
}

/* ---- exhibition mode: "all controls hidden" ---- */

.palim-root.exhibition .palim-side,
.palim-root.exhibition .palim-titlebar { display: none; }
.palim-root.exhibition .palim-main { background: #1b1c20; }

/* ---- file drop ---- */

.palim-root.dropping .palim-main { outline: 3px dashed #22c32b; outline-offset: -6px; }

/* ---- small screens ---- */

@media (max-width: 720px) {
  .palim-side { width: 110px; }
}