/*
 * Temporary holding page. Same palette and fonts as the Desk in next/, copied here so this folder
 * deploys on its own. Note sizes scale with --u (set by holding.js: note width / 200).
 */
@font-face { font-family: "Bitter"; src: url("assets/fonts/Bitter-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("assets/fonts/Caveat-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("assets/fonts/JetBrainsMono-Medium.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("assets/fonts/JetBrainsMono-Bold.woff2") format("woff2"); font-weight: 600 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Bitter Fallback"; src: local("Georgia"); size-adjust: 96%; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; }

:root {
  --desk-bg: #1b1b1f;
  --note-yellow: #ffd84d;
  --note-pink: #ff8fb1;
  --note-green: #7ce0a3;
  --note-blue: #8ec5ff;
  --paper: #fffdf6;
  --font-head: "Bitter", "Bitter Fallback", Georgia, serif;
  --font-mono: "JetBrains Mono", "Courier New", ui-monospace, monospace;
  --font-hand: "Caveat", "Segoe Script", "Comic Sans MS", cursive;
  --font-body: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }

body {
  min-height: 100vh; color: #fff;
  font: 16px/1.5 var(--font-body);
  background-color: var(--desk-bg);
  /* lamplight from the top-left, then the dot grid */
  background-image: radial-gradient(ellipse 60% 100% at var(--gx, 12%) 0%, rgba(255, 216, 77, .13), transparent 70%),
                    radial-gradient(rgba(255, 255, 255, .09) 1.5px, transparent 1.5px);
  background-size: 100% 700px, 26px 26px;
  background-repeat: no-repeat, repeat;
  overflow-x: hidden;
}

.skip-link { position: absolute; left: -999px; top: 8px; background: #fff; color: #000; padding: 8px 16px; z-index: 100; }
.skip-link:focus { left: 8px; }

/* Top bar: the tidy button and the counter */
.bar { display: flex; align-items: center; gap: 16px; padding: 16px; }
.bar__btn {
  font: 700 12px var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  background: var(--note-yellow); color: #111; border: 0; padding: 9px 14px; cursor: pointer;
}
.bar__btn--quiet { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .45); padding: 7px 12px; }
.bar__btn--quiet[aria-pressed="false"] { color: #aaa; border-color: rgba(255, 255, 255, .25); }
.bar__btn:focus-visible, .note:focus-visible, .note a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.bar__count { font: 500 12px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: #cfcfcf; }

main { position: relative; overflow: hidden; padding: 0 24px 160px; }
.hint { position: relative; z-index: 1; max-width: 640px; margin: 0 auto 24px; text-align: center; color: #cfcfcf; font: 500 13px/1.5 var(--font-mono); }

/* The board. Notes and outlines are placed by holding.js (it sets the stage height). */
.stage { position: absolute; top: 0; left: 50%; width: min(1100px, 100%); transform: translateX(-50%); }

.slot {
  position: absolute; border: 2px dashed rgba(255, 255, 255, .28); border-radius: 4px;
  transition: border-color .15s, background-color .15s;
}
.slot.is-hot { border-color: var(--note-yellow); background: rgba(255, 216, 77, .1); }

.note {
  position: absolute; left: 0; top: 0; color: #111;
  display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u, 1) * 8px);
  padding: calc(var(--u, 1) * 14px);
  box-shadow: 0 14px 26px rgba(0, 0, 0, .45);
  cursor: url("assets/cursor/grab.svg") 16 12, grab; touch-action: none; user-select: none; -webkit-user-select: none;
  will-change: transform;
}
.note.is-snapping { transition: transform .35s cubic-bezier(.2, 1.2, .4, 1); }
.note.is-dragging { cursor: url("assets/cursor/grabbing.svg") 16 14, grabbing; box-shadow: 0 26px 40px rgba(0, 0, 0, .6); }
.note.is-placed { box-shadow: 0 6px 12px rgba(0, 0, 0, .4); }
.note.c-y { background: var(--note-yellow); }
.note.c-p { background: var(--note-pink); }
.note.c-g { background: var(--note-green); }
.note.c-b { background: var(--note-blue); }
.note.c-w { background: var(--paper); }

.note h1, .note__big { font: 700 calc(var(--u, 1) * 36px)/1 var(--font-hand); }
.note__sub { font: 700 calc(var(--u, 1) * 30px)/1 var(--font-hand); }
.note__name { font: 700 calc(var(--u, 1) * 24px)/1.1 var(--font-head); }
.note__mono { font: 500 calc(var(--u, 1) * 12px)/1.3 var(--font-mono); letter-spacing: .04em; overflow-wrap: anywhere; }
.note a { font: 700 calc(var(--u, 1) * 22px)/1.1 var(--font-hand); color: #111; text-underline-offset: 3px; user-select: text; }
.note--verse { padding: calc(var(--u, 1) * 10px); gap: calc(var(--u, 1) * 6px); }
.note__verse { font: 700 max(14px, calc(var(--u, 1) * 17px))/1.05 var(--font-hand); }
.note__blank { opacity: 0; }  /* blank notes keep their size but show nothing */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Avatar: head pops up, then one bubble. Same look as the pop-up on the real site. */
.avatar {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: flex; align-items: flex-end; gap: 8px;
  max-width: calc(100vw - 32px); color: #111; font: 13px/1.4 var(--font-body);
  pointer-events: none;
}
.avatar__head {
  flex: none; width: 80px; aspect-ratio: 136 / 171; overflow: hidden;
  transform: scale(.4); transform-origin: 50% 100%; opacity: 0;
  transition: transform .5s cubic-bezier(.2, 1.4, .4, 1), opacity .25s ease-out;
}
.avatar__head img { display: block; width: 100%; height: auto; }
.avatar.is-up .avatar__head { transform: none; opacity: 1; }

.avatar__talk { width: 200px; margin-bottom: 16px; }
.avatar__bubble {
  position: relative; background: var(--paper); border: 2px solid #111; border-radius: 14px;
  padding: 6px 12px; box-shadow: 3px 3px 0 #111; font-weight: 700;
}
.avatar__bubble::after {
  content: ""; position: absolute; right: -9px; bottom: 14px; width: 14px; height: 14px;
  background: var(--paper); border: 2px solid #111; border-width: 2px 2px 0 0; transform: rotate(45deg);
}
.avatar__bubble.is-in { animation: bubble-in .25s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes bubble-in { from { opacity: 0; transform: scale(.7) translateY(8px); } to { opacity: 1; transform: none; } }

.nojs { padding: 24px; text-align: center; font: 700 28px var(--font-hand); }

@media (max-width: 520px) {
  main { padding: 0 16px 200px; }
  .avatar { flex-direction: column-reverse; align-items: flex-end; gap: 0; }
  .avatar__talk { width: min(200px, 100%); margin: 0 0 8px; }
  .avatar__bubble::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .note.is-snapping, .slot, .avatar__head { transition: none; }
  .avatar__bubble.is-in { animation: none; }
}

/*
 * The desk in 3D. .world holds two layers with the same perspective and tilt: the objects (a real 3D layer, so
 * the laptop screen can stand up and objects get thickness) and the notes (flat paper, drawn over the objects).
 * holding.js reads --tilt and --persp to turn pointer positions back into positions on the desk, so keep them
 * here only. Objects are placed from the centre line (left: 50% + x), in desk pixels from the top of the board.
 */
.world { --tilt: 32deg; --persp: 2400px; position: relative; margin: 0 auto; }
.world__layer { position: absolute; inset: 0; perspective: var(--persp); }
.world__layer--objects { pointer-events: none; }
.plane, .scene { position: absolute; inset: 0; transform: rotateX(var(--tilt)); }
.scene { transform-style: preserve-3d; }

.o3 { position: absolute; aspect-ratio: var(--ar); transform-style: preserve-3d; }
.o3__in { position: absolute; inset: 0; transform-style: preserve-3d; }
.o3 img { position: absolute; left: 0; top: 0; width: 100%; height: auto; display: block; }
.o3__side { filter: brightness(.42); }
.o3__shadow {
  filter: brightness(0) blur(7px); opacity: .5;
  transform: translate(calc(12px - var(--lx, 0) * 8px), calc(16px - var(--ly, 0) * 6px));
}
/* Laptop screen: hinged at the far edge of the keyboard, standing up and leaning back. */
.o3__screen {
  position: absolute; left: 0; bottom: 100%; width: 100%; aspect-ratio: 520 / 270;
  transform-origin: 50% 100%; transform: translateZ(10px) rotateX(-70deg);
}

.o3--mat      { left: 50%; top: 30px; width: min(1200px, 96%); transform: translateX(-50%); }
.o3--laptop   { left: calc(50% - 540px); top: 467px; width: 500px; transform: rotate(-2deg); }
.o3--mouse    { left: calc(50% + 10px);  top: 237px; width: 64px;  transform: rotate(12deg); }
.o3--notebook { left: calc(50% + 110px); top: 337px; width: 320px; transform: rotate(3deg); }
.o3--pen      { left: calc(50% + 170px); top: 377px; width: 190px; transform: rotate(-22deg); }
.o3--books    { left: calc(50% + 360px); top: 177px; width: 210px; transform: rotate(4deg); }
.o3--pencil   { left: calc(50% - 300px); top: 587px; width: 190px; transform: rotate(-6deg); }
.o3--phone    { left: calc(50% - 60px);  top: 557px; width: 62px;  transform: rotate(-14deg); }
.o3--bible    { left: calc(50% + 395px); top: 390px; width: 150px; transform: rotate(-6deg); }
.o3--mug      { left: calc(50% + 520px); top: -10px; width: 100px; }
.o3--plant    { left: calc(50% - 650px); top: -10px; width: 150px; transform: rotate(10deg); }

/* Objects drop onto the desk one after another (JS sets --i). */
@keyframes o3-drop { from { transform: translate3d(0, -50px, 150px); } }
.has-drop .o3__in { animation: o3-drop .7s cubic-bezier(.2, 1.3, .4, 1) both; animation-delay: calc(var(--i, 0) * 90ms); }

@media (max-width: 1100px) {
  .o3--mat, .o3--notebook, .o3--books, .o3--pencil, .o3--phone, .o3--plant { display: none; }
  .o3--laptop { left: calc(50% - 300px); top: 555px; width: 420px; }
  .o3--mouse  { left: calc(50% + 150px); top: 377px; width: 56px; }
  .o3--pen    { left: calc(50% + 110px); top: 497px; width: 150px; }
  .o3--mug    { left: calc(50% + 190px); top: 267px; width: 84px; }
  .o3--bible  { left: calc(50% + 190px); top: 560px; width: 110px; }
}
@media (max-width: 700px) {
  .o3--mouse, .o3--pen { display: none; }
  .o3--laptop { left: calc(50% - 170px); top: 594px; width: 340px; }
  .o3--mug    { left: calc(50% + 100px); top: 377px; width: 70px; }
  .o3--bible  { left: calc(50% + 100px); top: 590px; width: 84px; }
}
@media (prefers-reduced-motion: reduce) { .has-drop .o3__in { animation: none; } }

/* Welcome dialog (native <dialog>: focus stays inside, Esc closes). Same look as the avatar's speech bubble. */
.welcome {
  margin: auto; width: min(440px, calc(100vw - 32px)); padding: 28px 28px 24px;
  background: var(--paper); color: #111; border: 3px solid #111; border-radius: 6px;
  box-shadow: 8px 8px 0 #111; text-align: left;
}
.welcome::backdrop { background: rgba(10, 10, 14, .72); }
.welcome[open] { animation: welcome-in .35s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes welcome-in { from { opacity: 0; transform: translateY(16px) scale(.96) rotate(-1.5deg); } }
.welcome__tag {
  display: inline-block; margin-bottom: 14px; padding: 4px 10px; background: var(--note-yellow);
  font: 700 12px var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  transform: rotate(-2deg); border: 2px solid #111;
}
.welcome__title { font: 700 clamp(30px, 8vw, 40px)/1.05 var(--font-head); margin-bottom: 10px; }
.welcome__text { font: 700 28px/1.1 var(--font-hand); margin-bottom: 22px; }
.welcome__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.welcome__btn {
  font: 700 12px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  background: var(--paper); color: #111; border: 2px solid #111; padding: 10px 14px;
}
.welcome__btn--go { background: var(--note-yellow); box-shadow: 3px 3px 0 #111; }
.welcome__btn:focus-visible { outline: 3px solid var(--report-blue, #2b59ff); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .welcome[open] { animation: none; } }

/* ?share: a clean frame for the share-preview picture (no controls, no hint). */
.share .bar, .share .hint { display: none; }
html:has(.share), .share { overflow: hidden; }
.share main { margin-top: -60px; }