/* The desk at /fun/productivity-tips.
 *
 * The page is 2,871 words of Shaun's own writing that used to arrive as one
 * wall of 22 numbered sections. Nothing here rewords any of it. The drawing
 * groups the tips into the ten objects they are actually about, so the reader
 * picks a thing off a desk rather than starting at the top of an essay.
 *
 * The drawing came out of the same house pipeline as the room plates and went
 * through plate-process.py, so its paper and its graphite are this page's own
 * cream and ink rather than a photograph's. That is why the objects sit ON the
 * page instead of in a box on it, and why nothing here draws a frame.
 *
 * Sits after fun.css, which owns the palette and the two typefaces.
 */

/* fun.css holds running text to 46rem, which is right for an essay and far too
   narrow for a drawing that has to be read as a plan. */
main.desk-page { max-width: 66rem; }

.tips-intro {
  max-width: 38rem;
  color: var(--ink-2);
  margin: 0 0 2rem;
}

/* ---------- the drawing ---------- */
.desk-fig { margin: 0 0 .4rem; }
.deskwrap { position: relative; }
.desk-plate { display: block; width: 100%; height: auto; }

/* Each object is an anchor sitting over its own patch of the drawing. The
   boxes are percentages so they track the image at every width, and they were
   measured off a grid laid over the plate rather than guessed. */
.spot {
  position: absolute;
  display: block;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: 9px;
  transition: border-color .16s, background .16s;
}
.spot:hover,
.spot:focus-visible,
.spot.is-open {
  border-color: var(--orange-deep);
  background: rgba(223, 89, 17, .07);
}

/* The room labels every object it wants clicked, permanently, and a desk whose
   objects only speak on hover would ask the reader to go fishing. Same drawn
   contour as the controls, at label size. */
.spot-tag {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 7px);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  padding: .24rem .55rem;
  border: 1.1px solid var(--graphite);
  border-radius: 150px 9px 140px 11px / 11px 145px 9px 155px;
  white-space: nowrap;
  pointer-events: none;
  transition: color .16s, border-color .16s, background .16s;
}
/* Two objects sit where a label underneath would land on a neighbour, so those
   two hang their label off the side instead. */
.spot[data-anchor="right"] .spot-tag { left: 100%; top: 50%; transform: translate(8px, -50%); }
.spot[data-anchor="left"] .spot-tag { left: auto; right: 100%; top: 50%; transform: translate(-8px, -50%); }
.spot:hover .spot-tag,
.spot:focus-visible .spot-tag,
.spot.is-open .spot-tag {
  color: var(--orange-deep);
  border-color: var(--orange-deep);
  background: var(--paper-2);
}

.desk-hint {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
  margin: 1.4rem 0 0;
}

/* ---------- the same ten objects as a list ---------- */
/* Ten labels pinned to a narrow drawing sit on top of one another, so below
   46rem the drawing keeps its hotspots, drops its labels, and the objects are
   listed underneath where there is room to read them. */
.spotlist { display: none; flex-wrap: wrap; gap: .45rem; margin: 1.1rem 0 0; }
.listspot {
  display: flex;
  align-items: center;
  gap: .45rem;
  text-decoration: none;
  color: var(--ink);
  font-size: .85rem;
  padding: .5rem .75rem;
  min-height: 44px;
  border: 1.2px solid var(--graphite);
  border-radius: 150px 10px 145px 12px / 12px 148px 10px 155px;
  background: var(--paper);
}
.listspot:hover,
.listspot:focus-visible,
.listspot.is-open {
  background: var(--paper-2);
  color: var(--orange-deep);
  border-color: var(--orange-deep);
}
.ls-count { font-family: var(--font-mono); font-size: .66rem; color: var(--ink-muted); }

/* ---------- the tips ---------- */
.panel { margin: 2.6rem 0 0; }

/* With no script every cluster is simply on the page, in object order, and the
   hotspots are anchors into it. desk.js sets .has-js and takes over from there.
   A test asserts this page reads with JavaScript off, so this pair is the
   contract rather than a nicety. */
.has-js .cluster { display: none; }
.has-js .cluster.is-open { display: block; }

.cluster { margin: 0 0 2.4rem; max-width: 44rem; scroll-margin-top: 1.5rem; }
.cl-h {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .8rem;
  align-items: baseline;
  margin: 0 0 1.1rem;
  padding: 0 0 .5rem;
  border-bottom: 1px solid var(--rule);
}
.cl-name { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; }
.cl-count {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.tip {
  margin: 0 0 1.6rem;
  padding: .1rem 0 .1rem 1.2rem;
  border-left: 2px solid var(--rule);
}
.tip h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.14rem;
  line-height: 1.2;
  margin: 0 0 .6rem;
  text-wrap: balance;
}
.tip-n {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--orange-deep);
  margin-right: .6rem;
  letter-spacing: .08em;
}
.tipbody { font-size: .95rem; }
.tipbody p { margin: 0 0 .8rem; }
.tipbody ul { margin: 0 0 .8rem; padding-left: 1.15rem; }
.tipbody li { margin: 0 0 .5rem; }
.tipbody p:last-child, .tipbody ul:last-child { margin-bottom: 0; }
/* Shaun's copy carries a few very long URLs, and an unbreakable token that wide
   makes the whole page scroll sideways on a phone. */
.tipbody a { overflow-wrap: anywhere; }

/* THE SCREENSHOTS FROM THE ORIGINAL DOCUMENT.
   Several tips are written as captions to a picture: tip 02 says "look at the
   schedules below", tip 14 says "Instead, do this:", and both are instructions
   to a reader who can see something. The images are mounted rather than
   duotoned, because unlike the drawings on this page their argument is often
   carried in colour, so scripts/mount-screenshot.py moves only their neutral
   pixels onto the paper. The consequence here is that an image arrives already
   sitting on --paper, and the hairline is what tells the eye where it stops. */
.shots {
  display: grid;
  gap: 1rem;
  margin: 0 0 1rem;
}
/* minmax(0, ...) rather than a bare 1fr, which means minmax(auto, 1fr) and
   floors each column at its content's min-content width. Because the images
   below are sized width:auto, that floor would be the screenshot's full pixel
   width, and two 782px phone screens would burst a 683px column. */
.shots-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.shot { margin: 0; }
.shot picture { display: block; }
.shot img {
  display: block;
  /* auto and not 100%. These are screenshots, and 100% is an instruction to
     ENLARGE one whose column is wider than it is: the redacted snippet list is
     340px wide and was being stretched half as wide again, which on type reads
     as a blurry image rather than a small one. auto with a max-width shrinks
     what is too big and leaves everything else at its own size. */
  width: auto;
  max-width: 100%;
  height: auto;
  /* The two phone screens are more than twice as tall as they are wide, and at
     full column width they would push the rest of the tip off the screen. */
  max-height: 70vh;
  margin-inline: auto;
  border: 1px solid var(--rule);
}
.shot figcaption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: .84rem;
  line-height: 1.35;
  color: var(--ink-muted);
  /* Centred under a centred plate, the way the caption sat under the picture
     in the document these came out of. */
  text-align: center;
  margin: .45rem 0 0;
}

@media (max-width: 34rem) {
  /* A side-by-side comparison stops comparing anything once each half is
     150px wide, so below that they stack and are read in order instead. */
  .shots-2 { grid-template-columns: 1fr; }
}

/* Both of these are inserted by desk.js, so neither exists without it. */
.desk-empty {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--ink-muted);
  margin: 0 0 1.4rem;
}
.desk-all {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: .88rem;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  min-height: 44px;
  padding: .5rem 1.1rem;
  border: 1.4px dashed var(--graphite);
  border-radius: 180px 12px 170px 14px / 14px 175px 12px 185px;
  margin: 0 0 2rem;
}
.desk-all:hover { background: var(--paper-2); color: var(--ink); }

.sign {
  font-family: var(--font-display);
  color: var(--ink-muted);
  margin: 2.5rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--rule);
}

@media (max-width: 46rem) {
  .spot-tag { display: none; }
  .spotlist { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .spot, .spot-tag, .listspot { transition: none; }
}