/*
 * Objects on the desk, seen from above, drawn in CSS and sized in em (drawings copied from
 * docs/design/maquette.html). Behind the sheet (z-index -1), so the paper can cover their edges,
 * except the glasses, which lie across its edge.
 * .only-day / .only-night follow the theme tokens --day-show / --night-show.
 */

/*
 * Real proportions: the sheet is an A4 page (21 cm wide, 1040px whenever the desk shows), so
 * one centimetre is 49.5px at life size. --cm grows with the room beside the sheet, from 50% to
 * 80% of life size (reached when that room is 440px, a 1920px screen): room * .09.
 * Two groups hang on the edges of the sheet; objects are placed in cm from that edge (a negative
 * offset slides them under the sheet). An object's font-size, its real size divided by the size
 * of its drawing in em, sets how big it is.
 */
.desk { --cm: clamp(24.75px, (100vw - 1040px) / 2 * .09, 39.6px); pointer-events: none; }
.desk__left, .desk__right { position: absolute; top: -40px; bottom: -70px; width: 0; overflow: visible clip; }
.desk__left { right: 100%; }
.desk__right { left: 100%; }
.desk__left > *, .desk__right > * { z-index: -1; }
.desk .o-glasses, .desk .pencil { z-index: 1; }
.only-day { display: var(--day-show); }
.only-night { display: var(--night-show); }

/* Left: a 12 cm saucer beside the sheet, 13.5 cm glasses across its edge, a 17.5 cm pencil whose tip
   rests on it (40px in, inside the sheet's 56px padding, so it never hides text), a 5 cm eraser and
   its shavings. Right: a 9 cm duck facing the sheet, below the tag tabs, and in season two objects. */
.desk__left > .o-cup { font-size: calc(var(--cm) * 12 / 7); right: calc(var(--cm) * .8); top: calc(var(--cm) * 1); }
.desk__left > .o-glasses { font-size: calc(var(--cm) * 13.5 / 15.4); right: calc(var(--cm) * -3.5); top: calc(var(--cm) * 13.5); rotate: -6deg; }
.desk__left > .pencil { font-size: calc(var(--cm) * 17.5 / 12); right: -40px; top: calc(var(--cm) * 20); rotate: 9deg; scale: -1 1; }
.desk__left > .o-eraser { font-size: calc(var(--cm) * 5 / 4.4); right: calc(var(--cm) * .6); top: calc(var(--cm) * 22.5); }
.desk__left > .shavings { font-size: calc(var(--cm) * 5 / 4.4); right: calc(var(--cm) * 4.5); top: calc(var(--cm) * 21.5); }
.desk__right > .o-duck { font-size: calc(var(--cm) * 9 / 5.8); left: calc(var(--cm) * .3); top: calc(var(--cm) * 7); scale: -1 1; rotate: 20deg; }
.desk__right > .slot-1 { left: calc(var(--cm) * .5); top: calc(var(--cm) * 15); rotate: -8deg; }
.desk__right > .slot-2 { left: calc(var(--cm) * 5.5); top: calc(var(--cm) * 18.5); rotate: 10deg; }

/* Pages with tag tabs: the right group moves down so the duck (7 cm from the top) starts below the tabs (330px). */
.sheet:has(.tag-tabs) .desk__right { top: calc(-40px + max(0px, 330px - var(--cm) * 7)); }

/* Real sizes of the seasonal objects, as for the others: real size / drawing size in em. */
.desk .o-candy { font-size: calc(var(--cm) * 6 / 5); }
.desk .o-pumpkin { font-size: calc(var(--cm) * 8 / 5); }
.desk .o-bauble { font-size: calc(var(--cm) * 7 / 3); }
.desk .o-cane { font-size: calc(var(--cm) * 10 / 5.4); }
.desk .o-flakes { font-size: calc(var(--cm) * 7 / 5); }
.desk .o-confetti { font-size: calc(var(--cm) * 8 / 5); }
.desk .o-cake { font-size: calc(var(--cm) * 9 / 4.6); }
.desk .o-flag { font-size: calc(var(--cm) * 8 / 4.6); }
.desk .o-cockade { font-size: calc(var(--cm) * 5 / 3.6); }

/* Narrow screens: no objects, shrunk to that size they would mean nothing. */
@media (max-width: 980px) {
  .desk { display: none; }
}

/* Objects stick out of the screen on the sides: no horizontal scroll for them. Also on <html>,
   or Chrome hands the body's value to the viewport and the body clips nothing. */
html, body { overflow-x: clip; }

.obj { position: absolute; filter: brightness(var(--obj-dim)) drop-shadow(.25em .35em .3em var(--shadow)); }
/* Cup on its saucer: coffee by day, herbal tea by night */
.o-cup { width: 7em; height: 7em; }
.o-cup .saucer { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, #f4f2ee 0 58%, #e2ded7 59% 62%, #f7f5f1 63% 96%, #d6d1c8 97%); }
.o-cup .cup { position: absolute; left: 1.15em; top: 1.15em; width: 4.7em; height: 4.7em; border-radius: 50%; background: #fbfaf8; box-shadow: inset 0 0 0 .12em #e4e0d9, .1em .2em .4em rgba(0, 0, 0, .18); }
.o-cup .liquid { position: absolute; inset: .45em; border-radius: 50%; }
.o-cup .liquid::after { content: ""; position: absolute; left: 22%; top: 18%; width: 1em; height: .45em; border-radius: 50%; background: rgba(255, 255, 255, .3); transform: rotate(-25deg); }
.o-cup .coffee { background: radial-gradient(circle at 42% 38%, #8a5a33 0 18%, #6a4024 30%, #4b2b17 62%, #c79a6b 64% 70%, #3a2112 71%); }
.o-cup .tea { background: radial-gradient(circle at 42% 38%, #f0cf7a 0 18%, #d9ad4f 40%, #c08d34 75%, #a8772a); }
/* The handle seen from above: only its top edge shows, a short rounded bar out of the rim */
.o-cup .handle { position: absolute; left: 5.7em; top: 3.3em; width: 1.3em; height: .4em; border-radius: .2em; background: #fbfaf8; box-shadow: .08em .12em .15em rgba(0, 0, 0, .18), inset 0 0 0 .05em #e4e0d9; }
.o-cup .spoon { position: absolute; left: .55em; top: 4.6em; width: 2.6em; height: .22em; background: #b8bcc2; border-radius: .2em; transform: rotate(38deg); }
.o-cup .spoon::before { content: ""; position: absolute; right: -.5em; top: -.3em; width: .85em; height: .6em; border-radius: 50%; background: #c9cdd2; }
.o-cup .string { position: absolute; left: 3.4em; top: 3.6em; width: 3.1em; height: .07em; background: #d8d2c4; transform-origin: 0 50%; transform: rotate(48deg); }
.o-cup .tea-tag { position: absolute; left: 5.1em; top: 5.6em; width: 1.2em; height: 1.4em; background: #fdfbf5; border: .07em solid #d8d2c4; transform: rotate(20deg); }
.o-cup .tea-tag::after { content: ""; position: absolute; left: .25em; top: .35em; width: .7em; height: .5em; background: #8fb17e; border-radius: .1em; }
/* Rubber duck, the mascot */
.o-duck { width: 5.8em; height: 4.4em; }
.o-duck .body { position: absolute; left: 0; top: .5em; width: 4.6em; height: 3.4em; border-radius: 55% 45% 45% 55% / 50%; background: radial-gradient(circle at 45% 40%, #ffe474, #f5c518 55%, #d9a40f); }
.o-duck .body::before { content: ""; position: absolute; left: -.5em; top: 1.25em; width: 1em; height: .9em; background: #e8b412; border-radius: 60% 0 0 60%; }
.o-duck .wing { position: absolute; left: 1em; top: .55em; width: 2.2em; height: 1em; border-radius: 50%; border-top: .14em solid rgba(160, 110, 0, .45); }
.o-duck .wing.b { top: auto; bottom: .55em; border-top: 0; border-bottom: .14em solid rgba(160, 110, 0, .45); }
.o-duck .head { position: absolute; left: 3.1em; top: 1.05em; width: 2.3em; height: 2.3em; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffea8a, #f5c518 60%, #dba611); }
.o-duck .beak { position: absolute; left: 5.05em; top: 1.75em; width: .9em; height: .9em; border-radius: 0 60% 60% 0; background: #f08a24; }
.o-duck .eye { position: absolute; width: .3em; height: .3em; border-radius: 50%; background: #1b1b1b; left: 4.55em; }
.o-duck .eye.a { top: 1.45em; } .o-duck .eye.b { top: 2.65em; }
.o-duck .hat { position: absolute; }
/* Striped night cap, its pompom falling on the back (shared rules serve the seasonal hats) */
.h-night .cap, .h-santa .cap, .h-knit .cap { position: absolute; left: 3em; top: 1em; width: 1.55em; height: 2.4em; border-radius: 50% 25% 25% 50%; }
.h-night .tail, .h-santa .tail { position: absolute; left: 1.4em; top: 1.55em; width: 1.8em; height: 1.3em; clip-path: polygon(100% 0, 100% 100%, 0 55%); }
.h-night .pom, .h-santa .pom, .h-knit .pom { position: absolute; width: .75em; height: .75em; border-radius: 50%; background: #fbfbf7; }
.h-night .pom, .h-santa .pom { left: 1.05em; top: 1.95em; }
.h-night .cap, .h-night .tail { background: repeating-linear-gradient(90deg, #3d5a98 0 .32em, #e9edf6 .32em .6em); }
/* Santa hat */
.h-santa .cap, .h-santa .tail { background: #c8282d; }
.h-santa .cap { box-shadow: inset -.32em 0 0 #fbfbf7; }
/* Knitted hat and scarf (winter) */
.h-knit .cap { left: 3.05em; width: 1.7em; background: repeating-linear-gradient(0deg, #2f6b5a 0 .3em, #f2efe6 .3em .45em); }
.h-knit .pom { left: 3.35em; top: 1.8em; width: .9em; height: .9em; }
.h-knit .scarf { position: absolute; left: 2.75em; top: .95em; width: .55em; height: 2.55em; border-radius: .2em; background: repeating-linear-gradient(0deg, #c0392b 0 .35em, #f2efe6 .35em .5em); }
.h-knit .scarf-end { position: absolute; left: 1.7em; top: 3.1em; width: 1.3em; height: .5em; border-radius: .15em; background: repeating-linear-gradient(90deg, #c0392b 0 .35em, #f2efe6 .35em .5em); transform: rotate(-20deg); }
/* Witch hat */
.h-witch .brim { position: absolute; left: 2.6em; top: .6em; width: 3.1em; height: 3.1em; border-radius: 50%; background: radial-gradient(circle, #3a2f45 0 34%, #7b4fb0 35% 43%, #241c2c 44% 100%); }
.h-witch .tip { position: absolute; left: 3.75em; top: 1.75em; width: .8em; height: .8em; border-radius: 50%; background: #4a3b58; box-shadow: inset .12em .12em 0 rgba(255, 255, 255, .12); }
/* Beret */
.h-beret .b { position: absolute; left: 2.8em; top: .95em; width: 2.3em; height: 2.4em; border-radius: 50%; background: radial-gradient(circle at 45% 40%, #3a4a6e, #1f2a44 70%); }
.h-beret .stem { position: absolute; left: 3.85em; top: 2.05em; width: .22em; height: .22em; border-radius: 50%; background: #121a2e; }
/* Party hat seen from above */
.h-party .cone { position: absolute; left: 3.15em; top: 1.2em; width: 2em; height: 2em; border-radius: 50%; background: conic-gradient(#ff6fa8 0 45deg, #ffe066 45deg 90deg, #5bc0eb 90deg 135deg, #ff6fa8 135deg 180deg, #ffe066 180deg 225deg, #5bc0eb 225deg 270deg, #ff6fa8 270deg 315deg, #ffe066 315deg); }
.h-party .pom { position: absolute; left: 3.9em; top: 1.95em; width: .55em; height: .55em; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .08em #ff6fa8; }
/* Seasonal objects */
.o-bauble { width: 3em; height: 3.4em; }
.o-bauble .ball { position: absolute; left: 0; top: .4em; width: 3em; height: 3em; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #ff9a9a 0 8%, #d8323a 30%, #8e1b22); }
.o-bauble .capb { position: absolute; left: 1.05em; top: 0; width: .9em; height: .6em; border-radius: .1em; background: linear-gradient(90deg, #b9a46a, #f1df9a, #b9a46a); }
.o-cane { width: 5.4em; height: 2em; }
.o-cane .stick { position: absolute; left: 0; top: 1.25em; width: 4.4em; height: .6em; border-radius: .3em; background: repeating-linear-gradient(55deg, #d8323a 0 .3em, #fdfbf5 .3em .6em); }
/* The crook: the right half of a ring as thick as the stick (2.9em across), its lower end continuing the stick */
.o-cane .hook { position: absolute; left: 2.95em; top: -1.05em; width: 1.7em; height: 1.7em; border: .6em solid #d8323a; border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: rotate(45deg); }
.o-pumpkin { width: 5em; height: 4.6em; }
.o-pumpkin .p { position: absolute; inset: 0; border-radius: 48%; background: radial-gradient(circle at 40% 35%, rgba(255, 220, 150, .45), transparent 45%), repeating-conic-gradient(from 10deg, #e8892b 0 26deg, #c86b16 26deg 30deg); }
.o-pumpkin .stem { position: absolute; left: 2.15em; top: 1.95em; width: .75em; height: .75em; border-radius: .2em; background: #5f7a2e; transform: rotate(18deg); }
.o-candy { width: 5em; height: 3.4em; }
.o-candy .cd { position: absolute; width: 1.3em; height: .85em; border-radius: 50%; }
.o-candy .cd::before, .o-candy .cd::after { content: ""; position: absolute; top: .05em; width: .6em; height: .75em; background: inherit; opacity: .85; }
.o-candy .cd::before { left: -.5em; clip-path: polygon(100% 50%, 0 0, 0 100%); }
.o-candy .cd::after { right: -.5em; clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.o-candy .cd.a { left: .8em; top: .3em; background: #8b5cc4; transform: rotate(-20deg); }
.o-candy .cd.b { left: 2.6em; top: 1.8em; background: #f08a24; transform: rotate(25deg); }
.o-flakes { width: 5em; height: 5em; }
.o-flakes .fl { position: absolute; width: 2.4em; height: 2.4em; }
.o-flakes .fl i { position: absolute; left: 50%; top: 0; width: .16em; height: 100%; margin-left: -.08em; background: #f4f8fb; border-radius: .1em; }
.o-flakes .fl i:nth-child(2) { transform: rotate(60deg); } .o-flakes .fl i:nth-child(3) { transform: rotate(120deg); }
.o-flakes .fl.a { left: .2em; top: .3em; } .o-flakes .fl.b { left: 2.8em; top: 2.6em; transform: scale(.7) rotate(15deg); }
.o-cockade { width: 3.6em; height: 4.6em; }
.o-cockade .rib { position: absolute; top: 2em; width: .8em; height: 2.5em; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); }
.o-cockade .rib.a { left: .9em; background: #0055a4; transform: rotate(14deg); } .o-cockade .rib.b { left: 1.9em; background: #ef4135; transform: rotate(-14deg); }
.o-cockade .disc { position: absolute; left: 0; top: 0; width: 3.6em; height: 3.6em; border-radius: 50%; background: radial-gradient(circle, #0055a4 0 30%, #fdfdfb 31% 62%, #ef4135 63%); box-shadow: inset 0 0 0 .1em rgba(0, 0, 0, .08); }
.o-flag { width: 4.6em; height: 3em; transform: rotate(-12deg); }
.o-flag .stickf { position: absolute; left: 0; top: 1.3em; width: 4.6em; height: .14em; background: #9b7a52; }
.o-flag .cloth { position: absolute; left: 1.4em; top: .2em; width: 3.1em; height: 2.1em; background: linear-gradient(90deg, #0055a4 0 33.3%, #fdfdfb 33.3% 66.6%, #ef4135 66.6%); }
.o-cake { width: 4.6em; height: 4em; }
.o-cake .slice { position: absolute; inset: 0; clip-path: polygon(0 10%, 100% 50%, 0 90%); background: radial-gradient(circle at 20% 50%, #fff7f2 0 30%, #f9d5df 31%); }
.o-cake .rim { position: absolute; left: 0; top: .4em; width: .45em; height: 3.2em; background: #c98a5a; border-radius: .1em; }
.o-cake .candle { position: absolute; left: 1.4em; top: 1.75em; width: .5em; height: .5em; border-radius: 50%; background: repeating-linear-gradient(45deg, #5bc0eb 0 .1em, #fff .1em .2em); }
.o-cake .flame { position: absolute; left: 1.5em; top: 1.85em; width: .3em; height: .3em; border-radius: 50%; background: #ffe066; box-shadow: 0 0 .5em .3em rgba(255, 210, 90, .6); }
.o-confetti { width: 5em; height: 4em; }
.o-confetti i { position: absolute; width: .5em; height: .25em; border-radius: .05em; }
/* Ink and pencil eraser */
.o-eraser { width: 4.4em; height: 1.9em; transform: rotate(-14deg); }
.o-eraser .rub { position: absolute; inset: 0; border-radius: .35em; overflow: hidden; background: linear-gradient(90deg, #d9534f 0 58%, #3567b5 58%); box-shadow: inset 0 -.25em 0 rgba(0, 0, 0, .18), inset 0 .12em 0 rgba(255, 255, 255, .25); }
.o-eraser .rub::after { content: ""; position: absolute; left: .3em; top: .55em; width: 2em; height: .5em; border-radius: .15em; background: rgba(255, 255, 255, .22); }
/* Round rimless glasses, Steve Jobs style: two thin circles, a straight bridge, two small hinges.
   The lenses slightly magnify what lies under them (#lens in desk_component, Chromium only).
   No filter on .o-glasses: a filtered ancestor would hide the backdrop from the lenses. */
.o-glasses { width: 15.4em; height: 7em; filter: none; }
.o-glasses .lens {
  position: absolute;
  top: .3em;
  width: 6.4em;
  height: 6.4em;
  border-radius: 50%;
  border: .05em solid var(--glass-rim);
  background: var(--glass-tint);
  box-shadow: .2em .3em .5em -.2em var(--shadow);
  backdrop-filter: url(#lens);
}
.o-glasses .lens.a { left: 0; } .o-glasses .lens.b { left: 8.9em; }
.o-glasses .lens::after { content: ""; position: absolute; top: 2.5em; width: .55em; height: .07em; background: #9aa0a7; }
.o-glasses .lens.a::after { left: -.5em; } .o-glasses .lens.b::after { right: -.5em; }
.o-glasses .bridge { position: absolute; left: 6.45em; top: 2.75em; width: 2.45em; height: .07em; background: #9aa0a7; }
.desk__filters { position: absolute; }
/* Pencil and eraser shavings */
.pencil { position: absolute; width: 12em; height: .8em;
  background: linear-gradient(90deg, #2b2b2b 0 3%, #e7c891 3% 10%, #efb22e 10% 88%, #b9b9b9 88% 92%, #e58c8c 92%);
  clip-path: polygon(0 50%, 10% 0, 100% 0, 100% 100%, 10% 100%); filter: brightness(var(--obj-dim)) drop-shadow(.2em .3em .2em var(--shadow)); }
.shavings { position: absolute; width: 5em; height: 4em; }
.shavings i { position: absolute; width: 1em; height: .55em; border-radius: 50%; border-bottom: .2em solid var(--eraser); }
.shavings i:nth-child(1) { left: 0; top: .4em; transform: rotate(20deg); }
.shavings i:nth-child(2) { left: 1.4em; top: 0; transform: rotate(-35deg) scale(.8); }
.shavings i:nth-child(3) { left: 2.4em; top: 1.3em; transform: rotate(140deg) scale(1.1); }
.shavings i:nth-child(4) { left: .8em; top: 1.9em; transform: rotate(-80deg) scale(.7); }
.shavings b { position: absolute; width: .18em; height: .18em; border-radius: 50%; background: var(--crumb); }
.shavings b:nth-of-type(1) { left: 3.4em; top: .5em; } .shavings b:nth-of-type(2) { left: 2em; top: 2.6em; } .shavings b:nth-of-type(3) { left: 3.9em; top: 2.2em; }