/* Toybox: a desktop of classic Mac windows. Loaded only by toybox.html
   (front matter `styles:`). No JavaScript; the scroll bars are CSS too. */

:root {
  --tb-desk: #6f7fa8;
  --tb-face: #dddddd;
  --tb-shade: #888888;
  --tb-hi: #ffffff;
  --tb-ink: #000000;
}
@media (prefers-color-scheme: dark) {
  :root { --tb-desk: #2b3350; }        /* the same desktop after hours */
}

/* Desktop: the old blue-grey with a faint dither, like System 7 on a
   color monitor. */
.toybox {
  margin: 0 -14px;
  padding: 22px 14px 30px;
  border: 2px inset var(--tb-shade);
  background:
    repeating-conic-gradient(rgb(0 0 0 / .07) 0 25%, transparent 0 50%) 0 0 / 4px 4px,
    var(--tb-desk);
  color: var(--tb-ink);
  font-family: Charcoal, Chicago, "Geneva", "Helvetica Neue", Arial, sans-serif;
}

.toybox-intro {
  max-width: 34em;
  margin: 0 auto 22px;
  padding: 8px 12px;
  border: 1px solid var(--tb-ink);
  background: #ffffcc;
  box-shadow: 2px 2px 0 var(--tb-ink);
  font-size: .95rem;
}

.toybox-desk {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 22px;
  align-items: start;
}

/* One toy = one window. */
.toy {
  margin: 0;
  border: 1px solid var(--tb-ink);
  background: var(--tb-face);
  box-shadow: 2px 2px 0 var(--tb-ink);
}
.toy:nth-child(3n+2) { transform: translateY(14px); }   /* desks are never tidy */
.toy:nth-child(4n+3) { transform: translateY(-6px); }

/* Title bar: pinstripes, a close box on the left, the name in a white gap. */
.toy h2 {
  position: relative;
  margin: 0;
  padding: 3px 6px;
  border-bottom: 1px solid var(--tb-ink);
  background:
    repeating-linear-gradient(to bottom, var(--tb-ink) 0 1px, transparent 1px 3px) 4px 4px / calc(100% - 8px) 11px no-repeat,
    var(--tb-face);
  font: bold 13px/1.1 Charcoal, Chicago, Geneva, sans-serif;
  text-align: center;
}
.toy h2 span {
  padding: 0 7px;
  background: var(--tb-face);
}
.toy h2::before {          /* close box */
  content: "";
  position: absolute;
  left: 12px;
  top: 3px;
  width: 11px;
  height: 11px;
  border: 1px solid var(--tb-ink);
  background: var(--tb-face);
  box-shadow: 0 0 0 2px var(--tb-face);
}

.toy-body {
  height: 168px;
  overflow-y: scroll;      /* always a scroll bar: that's the point */
  margin: 0;
  padding: 10px 12px;
  border-bottom: 1px solid var(--tb-ink);
  background: var(--tb-hi);
  font: 14px/1.45 Georgia, "Times New Roman", serif;
}
.toy-body p { margin: 0 0 .7em; }
.toy-icon {
  float: left;
  margin: 2px 10px 4px 0;
  font: 28px/1 serif;
}

.toy-status {             /* the info bar under the content */
  margin: 0;
  padding: 2px 8px;
  font: 11px/1.4 Geneva, Verdana, sans-serif;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toybox-trash {
  margin: 26px 4px 0 auto;
  width: max-content;
  text-align: center;
  font: 12px Geneva, sans-serif;
  color: var(--tb-hi);
  text-shadow: 1px 1px 0 var(--tb-ink);
}
.toybox-trash b { display: block; font: 30px/1 serif; }

/* ---- Classic Mac scroll bars ------------------------------------------
   WebKit/Blink get the full look: a dithered grey track, a white
   "elevator" thumb, boxed arrows. Firefox only takes two colors. */

html, .toy-body {
  scrollbar-color: #ffffff #aaaaaa;      /* Firefox */
}
@supports selector(::-webkit-scrollbar) {
  html, .toy-body { scrollbar-color: auto; }
}

::-webkit-scrollbar { width: 16px; height: 16px; }

::-webkit-scrollbar-track {
  border-left: 1px solid #000;
  background:
    repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 0 / 2px 2px;
  background-color: #999;
  background-blend-mode: screen;
}

::-webkit-scrollbar-thumb {
  min-height: 20px;
  border: 1px solid #000;
  border-right: 0;
  background: #fff;
  box-shadow: inset -1px -1px 0 #bbb;
}
::-webkit-scrollbar-thumb:active { background: #ccccff; }

::-webkit-scrollbar-button:single-button {
  display: block;
  height: 16px;
  border: 1px solid #000;
  border-right: 0;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
}
::-webkit-scrollbar-button:single-button:vertical:decrement {
  border-top: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M4.5 0 9 6H0z'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:single-button:vertical:increment {
  border-bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M0 0h9L4.5 6z'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:single-button:active { background-color: #000; filter: invert(1); }
::-webkit-scrollbar-corner { background: var(--tb-face); }

@media (max-width: 560px) {
  .toybox { margin: 0; }
  .toy:nth-child(n) { transform: none; }
}

/* ---- Live desktop (assets/js/toybox.js adds .live, and .free on wide screens) ---- */
.toybox.live .toy h2::before { content: none; }      /* real buttons replace the drawn close box */
.toybox.free .toybox-desk { position: relative; display: block; }
.toybox.free .toy { position: absolute; transform: none; }
.toybox.free .toy h2 { cursor: grab; touch-action: none; user-select: none; }
.toy.dragging { opacity: .85; }
.toy.dragging h2 { cursor: grabbing; }

.toy-btn {
  position: absolute;
  top: 3px;
  width: 13px;
  height: 13px;
  padding: 0;
  border: 1px solid var(--tb-ink);
  background: var(--tb-face);
  box-shadow: 0 0 0 2px var(--tb-face), inset 1px 1px 0 var(--tb-hi), inset -1px -1px 0 var(--tb-shade);
  cursor: default;
}
.toy-btn:active { background: var(--tb-shade); box-shadow: 0 0 0 2px var(--tb-face), inset 1px 1px 0 var(--tb-ink); }
.toy-close { left: 10px; }
.toy-shade { right: 10px; }
.toy-zoom { right: 30px; }
.toy-zoom::after {        /* small box inside: the zoom glyph */
  content: "";
  position: absolute;
  left: 1px; top: 1px;
  width: 5px; height: 5px;
  border: 1px solid var(--tb-ink);
}
.toy-shade::after {       /* two lines: the windowshade glyph */
  content: "";
  position: absolute;
  left: 1px; right: 1px; top: 3px;
  height: 3px;
  border-block: 1px solid var(--tb-ink);
}

.toy.shaded .toy-body, .toy.shaded .toy-status { display: none; }
.toy.shaded h2 { border-bottom: 0; }
.toy.zoomed { grid-column: span 2; }
.toybox.free .toy.zoomed { width: min(560px, 100%) !important; }
.toy.zoomed .toy-body { height: 300px; font-size: 16px; }

.toybox-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 26px;
}
.toybox-icon, .toybox-cleanup {
  font: 12px Geneva, sans-serif;
  color: var(--tb-hi);
  text-shadow: 1px 1px 0 var(--tb-ink);
  background: none;
  border: 0;
  cursor: default;
}
.toybox-icon { display: flex; flex-direction: column; align-items: center; padding: 2px 4px; }
.toybox-icon b { font: 28px/1.1 serif; }
.toybox-icon:focus { background: #000080; outline: 1px dotted var(--tb-hi); }
.toybox-cleanup { display: none; margin-top: 10px; text-decoration: underline; }
.toybox.live .toybox-cleanup { display: inline-block; }
.toybox-trash.hover b, .toybox-trash.full b { transform: scale(1.2); }
.toybox-trash.hover { outline: 1px dotted var(--tb-hi); }

/* Zoom shows more: the .toy-more detail is hidden until a window is zoomed
   (without JS it's simply visible, at the bottom of the scroll). */
.toybox.live .toy:not(.zoomed) .toy-more { display: none; }
.toybox.live .toy:not(.zoomed) .toy-body::after {
  content: "Zoom (\25A3) for more";
  display: block;
  font: 11px Geneva, sans-serif;
  color: #666;
}
.toy-more { border-top: 1px dotted var(--tb-shade); padding-top: .6em; }
.toy-more code { font-size: 12px; }
.toy-src { float: right; margin-left: 8px; }   /* source link, always visible */