/* =========================================================
   scrapbooking is fun!!! · the scrapbook editor
   1. layout   2. trays   3. the spread   4. things on the page
   5. tools and menus   6. desk   7. magazines   8. phones
   9. the dark theme
   (the forum and home page also use sections 3 and 4
   to show posted scrapbooks)
   ========================================================= */

/* ---------- 1. layout ---------- */

/* a compact menu so the spread gets more room */
.scrapbook .menu-bar button,
.scrapbook .menu-bar .btn {
  padding: 3px 8px;
  font-size: 12px;
}

.scrapbook {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hidden-svg {
  position: absolute;
  width: 0;
  height: 0;
}

.app-title .title-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* <summary> is the clickable heading of a <details> dropdown */
.drawer-toggle {
  display: block;
  padding: 3px 8px;
  font: 12px var(--title-font);
  cursor: pointer;
  background: linear-gradient(#fff, color-mix(in srgb, var(--face), var(--primary) 14%));
  border: 2px solid;
  border-color: #fff rgba(80,20,90,.55) rgba(80,20,90,.55) #fff;
}

.magazine-drawer {
  margin: 6px 10px 0;
}

.magazine-content {
  display: flex;
  gap: 10px;
  padding: 6px;
  overflow-x: auto;
  background: rgba(255,255,255,.85);
  border: 2px inset #eee;
}

.drag-ghost {
  position: fixed;
  z-index: 80;
  width: 90px;
  opacity: .85;
  transform: translate(-50%, -50%) rotate(-4deg);
  pointer-events: none;
}

.workspace {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 10px;
  padding: 8px 10px;
}

.status-bar {
  display: flex;
  gap: 4px;
  padding: 3px;
  font-size: 12px;
  background: var(--face);
  border-top: 2px groove rgba(255,255,255,.8);
}

/* each section of the status bar looks "sunken" */
.status-bar span {
  padding: 2px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid;
  border-color: rgba(0,0,0,.35) #fff #fff rgba(0,0,0,.35);
}

#statusHint {
  flex: 1;
}

/* ---- the scrapbook and the desk swap places ---- */

.views {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.book-area,
.desk-area {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 44px 12px 8px;
  transition: opacity .15s;
}

/* only one shows at a time, with a quick fade */
.desk-area,
.at-desk .book-area {
  visibility: hidden;
  opacity: 0;
}

.at-desk .desk-area {
  visibility: visible;
  opacity: 1;
}

/* the space the spread (or desk) is shrunk to fit into.
   one finger slides around when zoomed in; two fingers zoom (see setZoom in script.js) */
.fit-box {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pan-x pan-y;
}

.fit-box.zoomed {
  display: block;
  overflow: auto;
}

.fit-box.zoomed .sizer {
  margin: 0 auto;
}

/* the photo picker is invisible but still there, so phones open it when you tap its button */
.file-input {
  position: fixed; /* fixed, so it never makes the page wider */
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.zoom-buttons {
  margin-left: 12px;
}

.sizer {
  position: relative;
  flex: none;
}

/* the tabs for switching; you can drag things onto them too */
.view-tab {
  position: absolute;
  top: 50%;
  z-index: 26;
  padding: 16px 7px;
  font: 12px var(--title-font);
  writing-mode: vertical-rl;
}

/* work area stands on the right, in the space next to the book */
.to-desk {
  right: 4px;
  transform: translateY(-50%);
  border-radius: 0 10px 10px 0;
}

/* scrapbook stands on the left of the desk */
.to-book {
  left: 4px;
  display: none;
  transform: translateY(-50%) rotate(180deg);
  border-radius: 0 10px 10px 0;
}

/* phones have no room at the sides, so the tabs sit along the top */
@media (max-width: 760px) {
  .view-tab {
    top: 6px;
    padding: 6px 14px;
    writing-mode: horizontal-tb;
    transform: none;
    border-radius: 10px 10px 0 0;
  }

  .to-desk { right: 10px; }
  .to-book { left: 10px; }
}

.at-desk .to-book {
  display: block;
}

.at-desk .to-desk {
  display: none;
}

.view-tab.hover {
  color: white;
  background: var(--neon-pink);
  scale: 1.15;
}

.page-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

#pageNumbers {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.page-number.active {
  color: white;
  background: var(--primary);
}

/* ---- the trash can in the bottom-right corner ---- */

.trash-can,
.trash-can:active,
.trash-can:hover {
  position: absolute;
  right: 12px;
  bottom: 8px;
  z-index: 25;
  width: 56px;
  height: 70px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  filter: drop-shadow(2px 3px 2px rgba(0,0,0,.4));
  transition: scale .2s;
}

.trash-can svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.trash-can .lid {
  transform-origin: 8px 14px;
  transition: transform .2s;
}

.trash-can.open {
  scale: 1.3;
}

.trash-can.open .lid {
  transform: rotate(-35deg);
}

.trash-can.gulp {
  animation: gulp .4s;
}

@keyframes gulp {
  30% { scale: 1.3 .8; }
  60% { scale: .9 1.15; }
}

/* ---------- 2. trays: stickers, stamps, decals, frames, supplies ---------- */

.supply-tray {
  width: 212px;
  flex-shrink: 0;
  margin-bottom: 78px; /* room for the cd underneath */
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  overflow-y: auto;
}

.tray-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  background: white;
  border: 2px inset #eee;
}

.tray-source,
.tray-source:hover,
.tray-source:active {
  position: relative;
  padding: 2px;
  cursor: grab;
  user-select: none;
  touch-action: pan-y; /* the tray can still scroll up and down with a finger */
  background: none;
  border: 0;
  box-shadow: none;
  transform: none;
}

.tray-source:hover {
  outline: 2px dotted var(--neon-pink);
}

.tray-source img {
  display: block;
  width: 100%;
  height: 50px;
  object-fit: contain;
  pointer-events: none;
}

.tray-remove {
  position: absolute;
  top: -4px;
  right: -4px;
  display: none;
  width: 18px;
  height: 18px;
  font: bold 12px/16px sans-serif;
  color: #fff;
  background: #ff3f6c;
  border-radius: 50%;
}

.tray-source:hover .tray-remove,
.tray-source:focus-visible .tray-remove {
  display: block;
}

.ink-pad {
  display: flex;
  gap: 3px;
  padding: 4px;
  background: white;
  border: 2px inset #eee;
  border-bottom: 0;
}

.ink-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.ink-swatch.active {
  outline: 2px solid var(--text);
  outline-offset: 1px;
}

/* ---------- 3. the spread: two pages side by side ----------
   it's always 1400 x 900 and gets shrunk to fit (see fitSurface in script.js). */

.spread {
  position: absolute;
  top: 0;
  left: 0;
  width: 1400px;
  height: 900px;
  overflow: hidden;
  transform-origin: 0 0;
  background: var(--paper, none) 0 0 / 350px, #fff;
}

/* flat: a fold down the middle and a stack of pages underneath */
.spread.flat {
  box-shadow: 4px 4px 0 #f3f3f3, 5px 5px 0 rgba(0,0,0,.15), 9px 9px 0 #ececec, 10px 10px 0 rgba(0,0,0,.15), 14px 20px 26px rgba(0,0,0,.35);
}

.spread.flat::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 44%, rgba(0,0,0,.06) 48.5%, rgba(0,0,0,.2) 50%, rgba(0,0,0,.06) 51.5%, transparent 56%);
}

/* wired: a column of punched holes each side of the middle, and metal rings through them */
.spread.wired {
  box-shadow: 8px 10px 0 rgba(0,0,0,.2), 14px 20px 26px rgba(0,0,0,.35);
}

.spread.wired::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 664px;
  width: 72px;
  z-index: 11;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(60,35,55,.8) 0 7px, transparent 8px) 0 0 / 20px 40px no-repeat space,
    radial-gradient(circle, rgba(60,35,55,.8) 0 7px, transparent 8px) 52px 0 / 20px 40px no-repeat space,
    linear-gradient(90deg, transparent, rgba(0,0,0,.12) 50%, transparent);
}

.spread.wired::after {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 664px;
  width: 72px;
  z-index: 20;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='40'%3E%3Cpath d='M10 24 C8 2 64 2 62 24' fill='none' stroke='%236f7780' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M10 22 C9 5 63 5 62 22' fill='none' stroke='%23f4f6f8' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 72px 40px space;
}

.spread.show-grid {
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    var(--paper, none);
  background-size: 25px 25px, 25px 25px, 350px;
}

.page-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  padding: 6px 14px;
  font: 30px var(--title-font);
  color: #888;
  background: rgba(255,255,255,.75);
  pointer-events: none;
}

/* hide the hint once something is on the page */
.spread:has(.placed) .page-hint {
  display: none;
}

.ink-picture {
  position: absolute;
  inset: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------- 4. things on the page ---------- */

.placed {
  position: absolute;
  cursor: grab;
  user-select: none;
  touch-action: none;
  /* everything casts a soft shadow, like real paper */
  filter: drop-shadow(2px 3px 2px rgba(0,0,0,.28));
}

.placed[data-type="tape"] {
  filter: drop-shadow(1px 1px 1px rgba(0,0,0,.2));
}

/* a sticker has a white die-cut border that follows its shape */
.placed.sticker {
  filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)
          drop-shadow(2px 3px 3px rgba(0,0,0,.35));
}

/* the back of a flipped picture: white, with a thin grey outline */
.placed.back {
  filter: drop-shadow(0 0 1px #777) drop-shadow(0 0 1px #777);
}

.placed.back img {
  filter: brightness(0) invert(1) !important;
}

/* picked up while dragging: it floats above everything */
.placed.lifted {
  z-index: 40;
  scale: 1.04;
  cursor: grabbing;
}

/* sliding back onto the page after being dropped off the edge */
.placed.settling {
  transition: left .2s, top .2s;
}

.dragging-item .spread,
.dragging-item .desk,
.dragging-item .fit-box {
  overflow: visible;
}

/* picked: a pink line that hugs the thing's real shape (even after it's been cut) */
.placed.selected {
  --line: calc(2px * var(--inv, 1));
  filter: drop-shadow(var(--line) 0 0 var(--neon-pink)) drop-shadow(calc(var(--line) * -1) 0 0 var(--neon-pink))
          drop-shadow(0 var(--line) 0 var(--neon-pink)) drop-shadow(0 calc(var(--line) * -1) 0 var(--neon-pink))
          drop-shadow(2px 3px 2px rgba(0,0,0,.28));
}

/* words have no solid shape to hug, so they get a dashed box instead */
.placed[data-type="text"].selected {
  outline: calc(2px * var(--inv, 1)) dashed var(--neon-pink);
  outline-offset: 3px;
}

.placed.sticker.selected {
  filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)
          drop-shadow(var(--line) 0 0 var(--neon-pink)) drop-shadow(calc(var(--line) * -1) 0 0 var(--neon-pink))
          drop-shadow(0 var(--line) 0 var(--neon-pink)) drop-shadow(0 calc(var(--line) * -1) 0 var(--neon-pink));
}

.placed:focus-visible {
  outline: calc(3px * var(--inv, 1)) dashed var(--neon-cyan);
}

.placed img,
.placed video {
  display: block;
  width: 160px;
  pointer-events: none;
}

/* --cut is a scissors shape that couldn't be "baked" (videos, or pages opened as files) */
.placed img.content,
.placed video.content,
.glue-canvas,
.glitter-canvas {
  clip-path: var(--cut);
}

.placed.locked {
  cursor: default;
}

/* handles stay the same size on screen however small the page is (--inv) */
.resize-handle,
.rotate-handle {
  display: none;
  position: absolute;
  z-index: 5;
  width: 18px;
  height: 18px;
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #000;
  transform: scale(var(--inv, 1));
}

@media (pointer: coarse) {
  .resize-handle,
  .rotate-handle {
    width: 30px;
    height: 30px;
  }
}

.placed.selected:not(.locked) .resize-handle,
.placed.selected:not(.locked) .rotate-handle {
  display: block;
}

/* the crop bars on each edge of a photo */
.crop-handle {
  display: none;
  position: absolute;
  z-index: 5;
  background: #fff;
  border: 1px solid #333;
  box-shadow: 0 0 0 1px #fff;
}

.placed.selected:not(.locked) .crop-handle {
  display: block;
}

.crop-handle.top,
.crop-handle.bottom {
  left: 50%;
  width: 34px;
  height: 8px;
  cursor: ns-resize;
}

.crop-handle.left,
.crop-handle.right {
  top: 50%;
  width: 8px;
  height: 34px;
  cursor: ew-resize;
}

/* the bars sit on the edges of what's showing (a cropped gif or video still has its full size underneath) */
.crop-handle.top { top: calc(var(--crop-top, 0%) - 4px); transform: translateX(-50%) scale(var(--inv, 1)); }
.crop-handle.bottom { bottom: calc(var(--crop-bottom, 0%) - 4px); transform: translateX(-50%) scale(var(--inv, 1)); }
.crop-handle.left { left: calc(var(--crop-left, 0%) - 4px); transform: translateY(-50%) scale(var(--inv, 1)); }
.crop-handle.right { right: calc(var(--crop-right, 0%) - 4px); transform: translateY(-50%) scale(var(--inv, 1)); }

.crop-handle.top,
.crop-handle.bottom {
  left: calc((var(--crop-left, 0%) + 100% - var(--crop-right, 0%)) / 2);
}

.crop-handle.left,
.crop-handle.right {
  top: calc((var(--crop-top, 0%) + 100% - var(--crop-bottom, 0%)) / 2);
}

@media (pointer: coarse) {
  .crop-handle.top,
  .crop-handle.bottom { width: 48px; height: 14px; }
  .crop-handle.left,
  .crop-handle.right { width: 14px; height: 48px; }
}

.resize-handle {
  right: -9px;
  bottom: -9px;
  background: #2b8fff;
  cursor: nwse-resize;
}

.rotate-handle {
  left: -9px;
  top: -9px;
  background: #31c96b;
  cursor: grab;
}

.glue-canvas,
.glitter-canvas,
.cut-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.glue-canvas {
  z-index: 4;
  pointer-events: none;
}

/* glue only shows on the back, and you can only draw on the selected flipped picture */
.placed:not(.back) .glue-canvas {
  visibility: hidden;
}

[data-tool="glue"] .placed.selected.back:not(.locked) .glue-canvas {
  pointer-events: auto;
  cursor: crosshair;
}

.glitter-canvas {
  z-index: 3;
  pointer-events: none;
  animation: shimmer 1.8s ease-in-out infinite;
}

.back .glitter-canvas {
  display: none;
}

@keyframes shimmer {
  50% { filter: brightness(1.6) saturate(1.3); opacity: .8; }
}

.cut-canvas {
  z-index: 6;
  cursor: crosshair;
  touch-action: none;
}

/* "move" animations for any item (the 🎞 menu) */
.placed[data-move="float"] .content { animation: float 2.5s ease-in-out infinite; }
.placed[data-move="spin"] .content { animation: spin 5s linear infinite; }
.placed[data-move="wiggle"] .content { animation: wiggle .8s ease-in-out infinite; }
.placed[data-move="pulse"] .content { animation: pulse 1.4s ease-in-out infinite; }
.placed[data-move="flip"] .content { animation: flip 3s linear infinite; }
.placed[data-move="bounce"] .content { animation: bounce 1s ease-in-out infinite; }
.placed[data-move="glow"] .content { animation: glow 1.6s ease-in-out infinite; }

@keyframes wiggle {
  25% { transform: rotate(-6deg); }
  75% { transform: rotate(6deg); }
}

@keyframes pulse {
  50% { transform: scale(1.1); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-18px); }
  50% { transform: translateY(0); }
  65% { transform: translateY(-6px); }
}

@keyframes glow {
  50% { filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 18px #ff9ad5); }
}

/* the ink layer sits on top of everything, but only catches the mouse while drawing */
.ink-canvas {
  position: absolute;
  inset: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

[data-tool="marker"] .ink-canvas,
[data-tool="highlighter"] .ink-canvas,
[data-tool="eraser"] .ink-canvas,
[data-tool="tape"] .ink-canvas {
  pointer-events: auto;
  cursor: crosshair;
}

/* ---- words: text boxes and sticky notes ---- */

.editable {
  white-space: pre-wrap;
  line-height: 1.2;
}

.text-box {
  min-width: 30px;
  padding: 2px 4px;
  white-space: pre;
}

.editable[contenteditable="true"] {
  cursor: text;
  user-select: text;
  background: rgba(255,255,255,.55);
  outline: 1px dotted #000;
}

.note {
  aspect-ratio: 1;
  padding: 20% 12% 14%;
  background: center / 100% 100% no-repeat;
}

.note-yellow { background-image: url("../assets/supplies/sticky-yellow.svg"); }
.note-pink { background-image: url("../assets/supplies/sticky-pink.svg"); }
.note-blue { background-image: url("../assets/supplies/sticky-blue.svg"); }
.note-green { background-image: url("../assets/supplies/sticky-green.svg"); }

.note-text {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-wrap: break-word;
}

/* text animations (picked in the T menu) */
[data-anim="rainbow"] {
  animation: rainbow 3s linear infinite;
}

[data-anim="gradient"] {
  background: linear-gradient(90deg, #ff2d55, #ffcc00, #34ff6a, #00c8ff, #b060ff, #ff2d55) 0 0 / 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: slide-rainbow 3s linear infinite;
}

[data-anim="floating"] {
  animation: float 2.5s ease-in-out infinite;
}

[data-anim="announcing"] {
  animation: announce 1.2s ease-in-out infinite;
}

@keyframes announce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); text-shadow: 0 0 6px #fff, 0 0 14px gold; }
}

/* ---- washi tape ----
   the zig-zag ends are a clip-path. each pattern is its own class. */

.tape {
  height: 34px;
  opacity: .85;
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 25%, 100% 50%, calc(100% - 6px) 75%, 100% 100%,
                     0 100%, 6px 75%, 0 50%, 6px 25%);
}

.tape-pink { background: repeating-linear-gradient(45deg, #ff8fc2 0 10px, #ffc4de 10px 20px); }
.tape-mint { background: radial-gradient(#fff 3px, transparent 3.5px) 0 0 / 15px 15px, #7fe0c4; }
.tape-sunny { background: #ffe066; }
.tape-grid {
  background:
    linear-gradient(#ffffff99 1px, transparent 1px) 0 0 / 9px 9px,
    linear-gradient(90deg, #ffffff99 1px, transparent 1px) 0 0 / 9px 9px,
    #8ab6ff;
}
.tape-rainbow { background: linear-gradient(90deg, #ff6b6b, #ffd93d, #6bff95, #6bc5ff, #c56bff); }
.tape-kraft { background: repeating-linear-gradient(90deg, #d8b98a 0 3px, #cfae7c 3px 5px); }

/* ---------- 5. tools and menus ---------- */

.tool-tray {
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow-y: auto;
}

.side-tool {
  position: relative;
  flex: none;
  width: 50px;
  height: 44px;
  padding: 0;
  font-size: 21px;
}

.side-tool small {
  position: absolute;
  right: 2px;
  bottom: 0;
  font-size: 9px;
}

.tool-group {
  position: relative;
}

/* dropdown menus open to the left of the tool */
.tool-menu {
  display: none;
  position: fixed;
  z-index: 50;
  width: 230px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 8px;
  right: 74px;
  top: 150px;
}

.wide-menu {
  width: 320px;
}

.tool-group.open .tool-menu {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* everything fits the menu's width instead of poking out */
  gap: 4px;
  overflow-x: hidden;
}

.tool-menu strong {
  margin-top: 4px;
  font: 12px var(--title-font);
}

.swatches,
.menu-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.swatch {
  width: 26px;
  height: 26px;
  padding: 0;
}

.tape-sample {
  width: 100%;
  height: 24px;
  padding: 0;
}

.glitter-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: middle;
  border-radius: 50%;
  border: 1px solid #999;
}

.slider {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  align-items: center;
  font-size: 12px;
}

.slider input {
  width: 100%;
  min-width: 0;
}

.paper-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}

.paper-swatch,
.paper-swatch:hover,
.paper-swatch:active {
  height: 46px;
  padding: 0;
  background-size: 140px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #bbb;
}

.paper-plain {
  grid-column: 1 / -1;
}

/* ---------- 6. the desk ----------
   the desk picture and the things on it live in assets/desk.
   swap in real photos by changing the file names here and in scrapbook.html. */

.desk {
  position: absolute;
  top: 0;
  left: 0;
  width: 1500px;
  height: 920px;
  overflow: hidden;
  transform-origin: 0 0;
  background: url("../assets/backgrounds/woodendesk.jpg") center / cover;
  border-radius: 10px;
  box-shadow: 0 14px 0 #6b4424, 0 20px 30px rgba(0,0,0,.45);
}

.cutting-mat {
  position: absolute;
  top: 10%;
  left: 19%;
  width: 60%;
  height: 80%;
  filter: drop-shadow(3px 5px 4px rgba(0,0,0,.35));
}

/* things on the desk you can click; --tilt is how they're turned */
.prop {
  position: absolute;
  cursor: pointer;
  transform: rotate(var(--tilt, 0deg));
  transition: transform .15s;
}

.prop:hover {
  transform: translateY(-6px) rotate(var(--tilt, 0deg)) scale(1.05);
}

.prop-scissors { top: 8%; left: 1%; width: 17%; --tilt: -14deg; }
.prop-pens { bottom: 6%; left: 1%; width: 17%; --tilt: 4deg; }
.prop-glue { top: 5%; right: 6%; width: 8%; --tilt: 8deg; }
.prop-glitter-1 { bottom: 30%; right: 11%; width: 6%; }
.prop-glitter-2 { bottom: 30%; right: 3%; width: 6%; --tilt: 6deg; }
.prop-glitter-3 { bottom: 7%; right: 11%; width: 6%; --tilt: -5deg; }
.prop-glitter-4 { bottom: 7%; right: 3%; width: 6%; }

/* ---------- 7. magazines ---------- */

.mag-thumb,
.mag-thumb:hover,
.mag-thumb:active {
  position: relative;
  flex: 0 0 62px;
  height: 80px;
  padding: 0;
  overflow: hidden;
  background: #fff;
  box-shadow: 2px 3px 0 rgba(0,0,0,.2);
}

.mag-thumb:hover {
  transform: translateY(-3px) rotate(-3deg);
}

.mag-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mag-thumb span {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 3px 2px;
  font: 10px Impact, "Arial Black", sans-serif;
  letter-spacing: 1px;
  color: #fff;
  background: var(--mag-color);
}

.viewer-window {
  width: min(980px, 100%);
  max-height: 96vh;
  overflow-y: auto;
}

.spread-mag {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 16px;
  background: #5b4636;
  perspective: 1600px;
}

.mag-page {
  min-height: min(460px, 55vh);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  color: #222;
  background: #fbfaf6;
  box-shadow: inset -14px 0 18px -14px rgba(0,0,0,.4);
}

.mag-page + .mag-page {
  box-shadow: inset 14px 0 18px -14px rgba(0,0,0,.4);
}

.mag-page.blank {
  background: transparent;
  box-shadow: none;
}

/* the cover looks just like the little one in the rack: a big picture with a colour band on top */
.mag-page.cover {
  position: relative;
  padding: 0;
  overflow: hidden;
}

.mag-page.cover .mag-pictures {
  position: absolute;
  inset: 0;
  display: block;
}

.mag-page.cover .mag-picture {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}

.mag-masthead {
  position: relative;
  z-index: 1;
  padding: 8px 10px;
  font: clamp(22px, 4vw, 40px)/1 Impact, "Arial Black", sans-serif;
  letter-spacing: 2px;
  text-align: center;
  color: #fff;
  background: var(--mag-color);
}

.mag-page.cover .mag-tagline {
  position: absolute;
  z-index: 1;
  left: 10px;
  right: 10px;
  bottom: 12px;
  padding: 4px 8px;
  background: rgba(255,255,255,.88);
}

.mag-header {
  padding: 3px 8px;
  font: 12px Impact, "Arial Black", sans-serif;
  letter-spacing: 1px;
  color: #fff;
  background: var(--mag-color);
}

/* catalogue pages: every picture gets a price tag */
.mag-item {
  position: relative;
  flex: 1 1 40%;
  display: grid;
  place-items: center;
}

.price-tag {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 2px 6px;
  font: 14px Impact, "Arial Black", sans-serif;
  color: #fff;
  background: #e8343f;
  transform: rotate(-6deg);
  pointer-events: none;
}

.mag-pictures {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
}

.mag-picture {
  flex: 1 1 40%;
  max-width: 100%;
  max-height: 230px;
  object-fit: contain;
  cursor: crosshair;
}

.mag-picture:hover {
  outline: 2px dashed #666;
  outline-offset: 3px;
}

/* paper magazines show square sheets */
.paper-issue .mag-pictures {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.paper-issue .mag-picture {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  box-shadow: 2px 3px 4px rgba(0,0,0,.25);
}

/* a cut-out picture leaves a pale hole behind */
.mag-picture.cut-out {
  filter: brightness(0) invert(.93);
  outline: 2px dashed #bbb;
  pointer-events: none;
}

.mag-tagline {
  margin: 0;
  font: italic bold 18px Georgia, serif;
  text-align: center;
  color: var(--mag-color);
}

/* grey stripes that look like the words of an article */
.mag-words {
  flex: 1;
  min-height: 50px;
  opacity: .5;
  background: repeating-linear-gradient(#999 0 3px, transparent 3px 11px);
}

/* turning the page: it folds over (turns 90°), then the next pages appear */
.turn-next .mag-page:last-child {
  transform-origin: left center;
  animation: turn-next .35s ease-in forwards;
}

.turn-back .mag-page:first-child {
  transform-origin: right center;
  animation: turn-back .35s ease-in forwards;
}

@keyframes turn-next {
  to { transform: rotateY(-90deg); }
}

@keyframes turn-back {
  to { transform: rotateY(90deg); }
}

.viewer-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
}

.viewer-hint {
  margin: 0 0 8px;
  text-align: center;
}

.binding-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.binding-choice {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 10px;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 8px;
}

.binding-choice:has(input:checked) {
  background: rgba(255,255,255,.7);
  border-color: var(--neon-pink);
}

/* little pictures of the two kinds of book */
.mini-book {
  position: relative;
  width: 110px;
  height: 70px;
  background: #fff;
  box-shadow: 3px 3px 0 rgba(0,0,0,.3);
}

.mini-book.flat {
  background: linear-gradient(90deg, #fff 46%, #ddd 50%, #fff 54%);
}

.mini-book.wired::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 49px;
  width: 12px;
  background: repeating-linear-gradient(transparent 0 3px, #888 3px 7px, transparent 7px 10px);
}

.help-box h3 {
  margin: 12px 0 4px;
}

.help-box h3:first-child {
  margin-top: 0;
}

.help-box p,
.help-box ol {
  margin: 0 0 6px;
}

/* ---------- 8. phones and small screens ---------- */

@media (max-width: 760px) {
  .menu-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .menu-bar > * {
    flex: none;
  }

  .app-title > span:first-child {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .magazine-drawer {
    margin: 4px 4px 0;
  }

  .workspace {
    flex-direction: column;
    gap: 4px;
    padding: 4px;
  }

  /* the drawers become a row you swipe sideways */
  .supply-tray {
    flex: none;
    width: auto;
    margin-bottom: 0;
    max-height: 26vh;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: auto;
  }

  .tray-section {
    flex: 0 0 190px;
  }

  .tray-source {
    touch-action: pan-x pan-y;
  }

  /* the page takes whatever room is left, so the tools always fit on screen */
  .views {
    flex: 1;
    min-height: 0;
  }

  .tool-tray {
    flex: none;
  }

  .book-area,
  .desk-area {
    padding: 40px 4px 4px;
  }

  /* tools become a row along the bottom */
  .tool-tray {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .tool-menu {
    left: 8px;
    right: 8px;
    top: auto;
    bottom: 110px;
    width: auto;
    max-height: 50vh;
  }

  .trash-can,
  .trash-can:active,
  .trash-can:hover {
    width: 44px;
    height: 56px;
  }

  #statusPage,
  #statusSaved {
    display: none;
  }
}

/* ---------- 9. the dark theme ----------
   everything is charcoal grey with light words, like google's dark mode.
   only the paper you scrapbook on keeps its own colours. */

.theme-dark button,
.theme-dark .btn,
.theme-dark .window,
.theme-dark .drawer-toggle,
.theme-dark .menu-bar,
.theme-dark .status-bar {
  color: var(--text);
  background: var(--face);
  border-color: #5f6368;
  box-shadow: none;
}

.theme-dark button:hover,
.theme-dark .btn:hover {
  background: #3c4043;
  filter: none;
  box-shadow: 0 0 0 1px var(--link);
}

.theme-dark button:active,
.theme-dark button.active {
  background: #5f6368;
  border-color: #5f6368;
}

.theme-dark .title-bar {
  color: var(--text);
  text-shadow: none;
  background: #292a2d;
  border-bottom: 2px solid var(--neon-pink);
}

.theme-dark .title-bar-buttons > * {
  color: var(--text);
  background: #3c4043;
  border-color: #5f6368;
}

.theme-dark .tray-grid,
.theme-dark .magazine-content,
.theme-dark .ink-pad {
  background: var(--surface);
  border: 1px solid #5f6368;
}

.theme-dark .status-bar span {
  border-color: #5f6368;
}

/* stamps are black, so their tiles stay light to keep them visible */
.theme-dark .stamp-source {
  background: #e8eaed;
}

.theme-dark input,
.theme-dark select,
.theme-dark textarea {
  color: var(--text);
  background: var(--surface);
  border: 1px solid #5f6368;
}

.theme-dark .page-hint {
  color: #bdc1c6;
  background: rgba(32,33,36,.8);
}

.theme-dark .page-number.active {
  color: #202124;
  background: var(--link);
}

.theme-dark .view-tab.hover {
  color: #202124;
  background: var(--neon-pink);
}


.theme-dark .binding-choice:has(input:checked) {
  background: #3c4043;
}