/*
 * 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)); }

/* The duck shows how far the reading has gone: where scroll-driven animations exist (not Firefox),
   it walks head first down the right edge of the screen as the page scrolls, waddling, hat and
   all, and leaves webbed footprints from the top down to where it is. On a page that does not
   scroll it stays at the top. Beside the sheet on a wide screen, a mini duck on the sheet's edge
   below 980px. Footprints are drawn in a 40 x 56 tile, two feet pointing down. */
.duck-trail { display: none; }
@supports (animation-timeline: scroll()) {
  .duck-trail {
    display: block;
    position: fixed;
    z-index: -1;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='56'%3E%3Cg fill='%23c9861a' fill-opacity='.8'%3E%3Cpath d='M11 2 19 20 15 18 11 22 7 18 3 20Z'/%3E%3Cpath d='M29 30 37 48 33 46 29 50 25 46 21 48Z'/%3E%3C/g%3E%3C/svg%3E") top center / 100% auto repeat-y;
    filter: brightness(var(--obj-dim));
    animation: duck-trail linear both;
    animation-timeline: scroll(root);
  }
  @keyframes duck-trail { from { height: 0; } to { height: var(--trail-length); } }
  @keyframes duck-walks { from { top: var(--walk-from); } to { top: var(--walk-to); } }
  @keyframes duck-waddle {
    0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100% { rotate: -84deg; }
    5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% { rotate: -96deg; }
  }

  /* Wide screens: a 6 cm duck (4.55 cm wide before turning) just right of the sheet, from the top
     of the screen, or below the tag tabs, to the bottom. */
  .desk__right {
    --walk-from: 10px;
    --walk-to: calc(100% - var(--cm) * 5.3 - 20px);
    --trail-length: calc(100% - var(--walk-from) - var(--cm) * 5.3 - 20px);
  }
  .sheet:has(.tag-tabs) .desk__right { --walk-from: 330px; }
  .desk__right > .o-duck {
    position: fixed;
    left: calc(min(50% + 520px, 100% - 16px) + var(--cm) * .3);
    font-size: calc(var(--cm) * 6 / 5.8);
    rotate: -90deg;
    animation: duck-walks linear both, duck-waddle linear both;
    animation-timeline: scroll(root), scroll(root);
  }
  .desk__right > .duck-trail { top: calc(var(--walk-from) + var(--cm) * 2.3); left: calc(min(50% + 520px, 100% - 16px) + var(--cm) * 2.5); width: calc(var(--cm) * 1.6); }
}

/* 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; }

/* Below 980px the desk is hidden: the duck pokes its head into the page from the right edge of the
   sheet, under the header. */
.sheet-duck { display: none; }
@media (max-width: 980px) {
  .sheet-duck { display: block; position: absolute; z-index: 2; width: 5.8em; height: 4.4em; font-size: 11px; pointer-events: none; }
  .sheet-duck { right: -30px; top: 110px; scale: -1 1; rotate: -8deg; }
  .sheet-duck .o-duck { left: 0; top: 0; }
}

/* The mini duck walks too (see "The duck shows how far the reading has gone" above). */
@supports (animation-timeline: scroll()) {
  .duck-trail--mini { display: none; }
  /* Below 980px: a 23px mini duck on the right edge, in the sheet's margin, below the header. */
  @media (max-width: 980px) {
    .sheet-duck, .duck-trail--mini { --walk-from: 140px; --walk-to: calc(100% - 50px); --trail-length: calc(100% - 140px - 50px); }
    .sheet-duck { position: fixed; right: 1px; font-size: 4px; rotate: -90deg; animation: duck-walks linear both, duck-waddle linear both; animation-timeline: scroll(root), scroll(root); }
    .duck-trail--mini { display: block; z-index: 2; top: calc(140px + 12px); right: 4px; width: 10px; }
  }
}