/* September 10 desk study. Physical controls, original editable manuscript.
   Camera ownership lives in desk-motion.css; print geometry stays untouched. */
body.desk-enabled {
  --desk-lettering: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --desk-ink: #1f0e05;
  --desk-edge: rgba(31, 15, 7, .5);
  --desk-brass: #ad8548;
}

/* The brass: two thick triangles and a disc, in desk units (each piece 40 x
   44, 10 apart), resting on the wood with a contact shadow. Real buttons:
   keyboard, focus and names are the button's; the metal is drawn inside. */
body.desk-enabled #desk-nav {
  display: flex; align-items: flex-start; gap: 10px;
  width: 143px; padding: 0; isolation: isolate;
}
body.desk-enabled #desk-nav .dn-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
body.desk-enabled #desk-nav button {
  position: relative; flex: none; width: 41px; height: 44px; padding: 0; margin: 0;
  border: 0; border-radius: 0; background: none; color: inherit; cursor: pointer;
  filter: drop-shadow(.8px 1.6px .7px rgb(12 4 1 / .95)) drop-shadow(3.2px 5.4px 4.4px rgb(12 4 1 / .7));
  transition: translate 150ms cubic-bezier(.3,.7,.3,1), filter 150ms cubic-bezier(.3,.7,.3,1);
  -webkit-tap-highlight-color: transparent;
}
/* a little more to press than to see, even from far out */
body.desk-enabled #desk-nav button::after { content: ""; position: absolute; inset: -4px -5px; }
body.desk-enabled #desk-nav svg { display: block; width: 41px; height: 44px; overflow: visible; }
body.desk-enabled #desk-nav .dn-body { fill: url(#dn-face); filter: url(#dn-bevel); }
body.desk-enabled #desk-nav .dn-brush { fill: #fff; filter: url(#dn-brushed); opacity: .22; mix-blend-mode: soft-light; }
body.desk-enabled #desk-nav :is(.dn-cut, .dn-cut-lit) { fill: none; stroke-linecap: round; stroke-linejoin: round; }
body.desk-enabled #desk-nav .dn-cut { stroke: #452a10; stroke-width: .82; opacity: .9; }
body.desk-enabled #desk-nav .dn-cut-lit { stroke: #f3d9a3; stroke-width: .7; opacity: .55; }
/* the disc: a short brass cylinder, its face brushed in a soft sunburst, a small square hole at its centre */
body.desk-enabled #desk-nav .dn-disc::before {
  content: ""; position: absolute; left: .25px; top: 2.3px; width: 40.5px; height: 40.5px; border-radius: 50%;
  background: linear-gradient(#6a421e, #36200b 86%, #6d4521);
}
body.desk-enabled #desk-nav .dn-face {
  position: absolute; left: .25px; top: 1.3px; width: 40.5px; height: 40.5px; border-radius: 50%;
  background:
    radial-gradient(ellipse 72% 84% at 27% 40%, rgb(255 226 176 / .42), transparent 64%),
    radial-gradient(circle at 74% 80%, rgb(48 24 6 / .36), transparent 60%),
    repeating-conic-gradient(from 7deg, rgb(255 230 186 / .03) 0 2.4deg, rgb(52 28 8 / .025) 2.4deg 5.8deg),
    conic-gradient(from 205deg, #d99a57, #b0763f 15%, #83522a 30%, #a06a38 47%, #d09252 64%, #aa713d 82%, #d99a57);
  box-shadow: inset 0 0 0 .8px rgb(120 78 36 / .8), inset 1.2px 1.5px 1.3px rgb(248 212 154 / .85), inset -1.4px -1.9px 2.2px rgb(60 34 10 / .9), inset 0 0 3px 1.5px rgb(84 50 18 / .28);
}
body.desk-enabled #desk-nav .dn-face::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 4.4px; height: 4.4px;
  translate: -50% -50%; rotate: 45deg; background: #130802;
  box-shadow: .35px .45px 0 rgb(255 226 166 / .55), inset .6px .6px .8px rgb(0 0 0);
}
body.desk-enabled #desk-nav button:hover { translate: 0 -.8px; filter: drop-shadow(1px 2.3px 1px rgb(12 4 1 / .92)) drop-shadow(3.2px 5.8px 4.8px rgb(12 4 1 / .58)); }
body.desk-enabled #desk-nav button:active { translate: 0 .7px; filter: drop-shadow(.5px 1px .5px rgb(12 4 1 / .96)) drop-shadow(2px 3.4px 3px rgb(12 4 1 / .6)); }
/* the stone for the view you are in sits a hair deeper */
body.desk-enabled #desk-nav button[aria-pressed="true"] { translate: 0 .4px; }
body.desk-enabled #desk-nav button:focus-visible { outline: none; filter: drop-shadow(0 0 1.6px rgb(255 236 190)) drop-shadow(0 0 3px rgb(255 226 160 / .8)) drop-shadow(.8px 1.6px .7px rgb(12 4 1 / .95)); }

/* A header is the object and the navigation target: no satellite close icon.
   The approved plank: 266 x 63 on the desk, light cherry (toned from the
   approved walnut), a bright bevel on its top and left, a dark side face on
   its bottom and right, a crisp shadow falling right. Lettering is EB
   Garamond, pressed lightly into the face. The desk's own sun crosses it. */
body.desk-enabled .ground-aperture .desk-heading-back {
  position: relative; isolation: isolate;
  display: grid !important; place-items: center;
  width: 266px !important; min-width: 0 !important; max-width: none !important;
  height: 63px !important; min-height: 0 !important;
  margin: 0 auto 34px !important; padding: 0 0 3px !important;
  border: 0 !important; border-radius: 1.5px !important;
  color: #2a1508 !important;
  background: #a55f33 url("../backdrops/desk/plank.webp") 0 0 / 100% 100% no-repeat !important;
  box-shadow:
    inset 0 1.2px 0 rgb(255 226 188 / .85), inset 1.2px 0 0 rgb(255 214 170 / .55),
    inset 0 -2.4px 0 rgb(98 48 20 / .75), inset -2px 0 0 rgb(110 56 24 / .6),
    1px 2px 0 rgb(66 30 10), 2px 3.5px 2px rgb(14 5 1 / .8), 5px 9px 11px rgb(14 5 1 / .5) !important;
  font: 500 31px/1 var(--desk-lettering) !important;
  letter-spacing: .004em !important;
  text-transform: none !important;
  text-shadow: 0 .8px 0 rgb(255 222 180 / .55), 0 -.6px 0 rgb(56 24 6 / .35);
  opacity: 1 !important;
  cursor: pointer;
  transition: translate 130ms ease-out, box-shadow 130ms ease-out !important;
}
/* where the desk is sunlit, so is the block */
body.desk-enabled[data-desk-material="walnut"] .ground-aperture[data-desk-side="left"] .desk-heading-back::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: rgb(77 77 48);
  -webkit-mask: url("../backdrops/desk/block-sun.webp") 0 0 / 100% 100%; mask: url("../backdrops/desk/block-sun.webp") 0 0 / 100% 100%;
  mix-blend-mode: color-dodge;
}
body.desk-enabled .ground-aperture .desk-heading-back:hover { translate: 0 -1px; }
body.desk-enabled .ground-aperture .desk-heading-back:active { translate: 0 2px; }
body.desk-enabled .ground-aperture .desk-heading-back:focus-visible { outline: 2px solid #f4deb2; outline-offset: 5px; }
body.desk-enabled .desk-heading-back svg { width: 22px; height: 22px; flex: none; }
body.desk-enabled .ground-aperture { background: transparent; }
body.desk-enabled .ground-aperture[data-phase="open"] { overflow: visible; }
body.desk-enabled .ground-aperture :is(.workspace-menu-head, .xd-head) { padding: 0 !important; margin: 0 0 6px !important; min-height: 0; border: 0; }
body.desk-enabled #experience-drawer .xd-heading:empty { display: none; }
body[data-v21="true"].desk-enabled.workspace-ground .ground-aperture [hidden] { display: none !important; }
body[data-v21="true"].desk-enabled #wpcluster.desk-writing-tools {
  display: flex !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  translate: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: max-content !important;
  gap: 7px !important;
  padding: 3px 8px 18px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body[data-v21="true"].desk-enabled #wpcluster.desk-writing-tools .tbtn {
  width: 44px !important;
  height: 44px !important;
  padding: 7px !important;
  background: #eac89b26 !important;
  border: 1px solid #2e1a101a !important;
  border-radius: 2px !important;
  color: var(--key-ink, var(--desk-ink)) !important;
  font: 500 19px/1 var(--desk-lettering) !important;
  text-shadow: 0 1px 0 #ffdfae80;
}
body[data-v21="true"].desk-enabled #wpcluster.desk-writing-tools .tbtn:hover { background: #eac89b55 !important; }
body[data-v21="true"].desk-enabled #wpcluster.desk-writing-tools .tbtn[aria-pressed="true"] { background: #351c0e20 !important; box-shadow: inset 0 1px 2px #30170d40; }
body[data-v21="true"].desk-enabled #wpcluster.desk-writing-tools .tbtn:focus-visible { outline: 2px solid #f8e4bd; outline-offset: 2px; }
body[data-v21="true"].desk-enabled #wpcluster.desk-writing-tools .sep { width: 25px; height: 1px; margin: 5px 0; background: #452c1933; }
body[data-v21="true"].desk-enabled #wpcluster.desk-writing-tools .desk-undo {
  width: auto !important; min-width: 96px; padding: 0 14px !important;
  justify-content: flex-start; gap: 8px; font-size: 17px !important; letter-spacing: .02em;
}
body[data-v21="true"].desk-enabled #wpcluster.desk-writing-tools .desk-undo::before { content: "\21B6"; font: 400 18px/1 Georgia, serif; }
body.desk-enabled #btn-room[hidden] { display: none !important; }

/* Sliders on the Desk: a brass knob in an engraved groove, like the
   approved Words view. These restate the shared thumb tokens, so every
   slider stays one family (v22 invariant). */
body.desk-enabled[data-desk-material="walnut"] {
  --xd-thumb-size: 16px;
  --xd-thumb-fill: radial-gradient(circle at 36% 30%, #f0cf93, #c08b48 52%, #80552a);
  --xd-thumb-border: rgb(96 60 24);
  --xd-thumb-shadow: .6px 1.4px 1.2px rgb(14 5 1 / .8), 1.6px 3px 3.5px rgb(14 5 1 / .45);
}
/* Lettering cut into the wood: a dark core with a pale lower lip, so it reads
   on sunlit and shaded walnut alike. The document keeps its own font. */
body.desk-enabled[data-desk-material="walnut"] :is(.workspace-access, #experience-drawer, #projectmenu, #moremenu, #settings, #statusbar) {
  --v21-ink: var(--desk-ink);
  --workspace-ui: var(--desk-lettering);
  --ui: var(--desk-lettering);
  color: var(--desk-ink) !important;
  text-shadow: 0 1px 0 rgb(255 214 160 / .22), 0 -.5px 0 rgb(20 8 2 / .4);
}
/* The Workspace root, measured from the Workspace reference: a text column
   64 px in from the column's edge, 27 px labels on a 42 px rhythm, 18 px
   eyebrows, engraved rules between groups. Every control is the bound one. */
body.desk-enabled #workspace-left { padding: 0 !important; }
body.desk-enabled #workspace-left .workspace-menu-head { margin: 0 !important; min-height: 0 !important; justify-content: center !important; }
body.desk-enabled #workspace-left .workspace-access-body { display: flex !important; flex-direction: column; align-items: flex-start; padding: 22px 0 0 64px !important; gap: 0 !important; }
body.desk-enabled #workspace-left .workspace-access-body > :is(button, .script-map-toggle) {
  display: flex !important; align-items: baseline; gap: 14px; width: auto !important; max-width: 330px;
  min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 5px 0 6px !important;
  border: 0 !important; background: none !important; box-shadow: none !important;
  font: 500 27px/1.12 var(--desk-lettering) !important; letter-spacing: .002em !important; text-align: left;
  color: inherit !important; cursor: pointer;
}
/* the reference's order: Appearance, Settings, Pages, the page views */
body.desk-enabled #workspace-left #btn-paper { order: 1; }
body.desk-enabled #workspace-left #btn-settings { order: 2; }
body.desk-enabled #workspace-left .script-map-toggle { order: 3; }
body.desk-enabled #workspace-left #btn-two-page { order: 4; }
body.desk-enabled #workspace-left #statusbar { order: 6; }
body.desk-enabled #workspace-left .workspace-access-body > :is(button, .script-map-toggle):hover { color: #150800 !important; text-shadow: 0 1px 0 rgb(255 222 170 / .5), 0 0 12px rgb(255 214 150 / .28); }
body.desk-enabled #workspace-left .workspace-access-body > :is(button, .script-map-toggle):focus-visible { outline: 1.5px solid rgb(255 226 176 / .85); outline-offset: 4px; }
body.desk-enabled #workspace-left .workspace-access-body > button .ic { display: none; }
body.desk-enabled #workspace-left :is(#btn-library, #btn-project) { flex-direction: column !important; align-items: flex-start !important; gap: 1px !important; }
body.desk-enabled #workspace-left #btn-project .workspace-file { display: flex; flex-direction: column; gap: 1px; }
body.desk-enabled #workspace-left .workspace-eyebrow { font: 500 18px/1.2 var(--desk-lettering) !important; letter-spacing: .01em; text-transform: none !important; opacity: 1 !important; }
body.desk-enabled #workspace-left :is(#workspace-project-label, #project-label) { font: 500 27px/1.12 var(--desk-lettering) !important; }
/* a long name stays on one line and ends in an ellipsis; the full name is its title (issue 29) */
body.desk-enabled #workspace-left #btn-project, body.desk-enabled #workspace-left #btn-project .workspace-file { min-width: 0; max-width: 100%; }
body.desk-enabled #workspace-left #btn-project #project-label { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
body.desk-enabled #workspace-left #btn-library { margin-bottom: 14px !important; }
/* the browser's own autosave word sits with the script's save state */
body.desk-enabled #workspace-left .workspace-access-body > #savestate { margin: -2px 0 0 20px !important; padding: 0 !important; font: 500 17px/1.2 var(--desk-lettering) !important; background: none !important; border: 0 !important; color: inherit !important; }
body.desk-enabled #workspace-left .workspace-access-body > #savestate:empty { display: none !important; }
/* save state: a small brass bead, then its word */
body.desk-enabled #workspace-left #filestate { display: inline-flex !important; align-items: center; gap: 9px; margin-top: 9px; font: 500 20px/1.2 var(--desk-lettering) !important; opacity: 1 !important; color: inherit !important; }
body.desk-enabled #workspace-left #filestate::before { content: ""; width: 11px; height: 11px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #f3d49c, #b88645 55%, #7a5024); box-shadow: .5px 1px 1.2px rgb(14 5 1 / .7); }
/* engraved rules between groups: a cut line with its lit lip */
body.desk-enabled #workspace-left #btn-paper { position: relative; margin-top: 30px !important; }
body.desk-enabled #workspace-left #btn-paper::before,
body.desk-enabled #workspace-left #statusbar::before {
  content: ""; position: absolute; left: 0; width: 184px; height: 1px;
  background: rgb(38 17 6 / .7); box-shadow: 0 1px 0 rgb(255 214 160 / .3);
}
body.desk-enabled #workspace-left #btn-paper::before { top: -17px; }
/* on/off: a quiet engraved word after the view's name */
body.desk-enabled #workspace-left #btn-two-page::after { margin-left: 4px !important; font: 500 18px/1 var(--desk-lettering) !important; opacity: 1 !important; text-transform: lowercase; }
body.desk-enabled #workspace-left #statusbar {
  position: relative;
  display: flex !important; flex-direction: column; align-items: flex-start; gap: 10px !important;
  width: 330px; margin: 30px 0 0 !important; padding: 0 !important; background: none !important; border: 0 !important;
  font: 400 20px/1.2 var(--desk-lettering) !important;
}
body.desk-enabled #workspace-left #cloudstate { position: relative; margin-bottom: 26px !important; padding: 4px 0 !important; font: 400 24px/1.2 var(--desk-lettering) !important; background: none !important; border: 0 !important; color: inherit !important; }
body.desk-enabled.workspace-ground #workspace-left #statusbar #cloudstate::after {
  content: ""; position: absolute; left: 0; bottom: -15px; width: 184px; height: 1px;
  background: rgb(38 17 6 / .7); box-shadow: 0 1px 0 rgb(255 214 160 / .3);
}
body.desk-enabled #workspace-left #statusbar::before { top: -17px; }
body.desk-enabled #workspace-left #statusbar :is(.v21-fader, .v21-fader > span, .v21-fader output, #pageinfo) { color: inherit !important; opacity: 1; font: 500 20px/1.2 var(--desk-lettering) !important; }
/* The ink measured for a label wins over the label's own rules above, which
   inherit the column's dark ink even where the label sits in shade. */
body.desk-enabled[data-desk-material="walnut"] :is(#workspace-left, #workspace-right) :is(.workspace-access-body > *, #statusbar > *)[data-desk-ink="pale"],
body.desk-enabled[data-desk-material="walnut"] #workspace-left #statusbar #pageinfo[data-desk-ink="pale"] { color: #efd8ae !important; }
/* Zoom, as the approved Workspace draws it: "−  ——●——  +" with its value
   under the groove. The word Zoom stays for screen readers. */
body.desk-enabled #workspace-left .v21-zoom-fader {
  position: relative; display: grid !important; grid-template-columns: auto 172px auto; align-items: center;
  column-gap: 12px; row-gap: 5px; margin-top: 4px; font: 500 20px/1 var(--desk-lettering) !important; color: inherit !important; cursor: default;
}
body.desk-enabled #workspace-left .v21-zoom-fader > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.desk-enabled #workspace-left .v21-zoom-fader::before { content: "\2212"; grid-column: 1; grid-row: 1; font-size: 26px; }
body.desk-enabled #workspace-left .v21-zoom-fader::after { content: "+"; grid-column: 3; grid-row: 1; font-size: 26px; }
body.desk-enabled #workspace-left .v21-zoom-fader input { grid-column: 2; grid-row: 1; width: 172px !important; height: 20px !important; }
body.desk-enabled #workspace-left .v21-zoom-fader output { grid-column: 2; grid-row: 2; justify-self: center; font: 500 18px/1 var(--desk-lettering) !important; }
/* One slider family on the Desk: an engraved groove and a brass knob. */
body.desk-enabled[data-desk-material="walnut"] :is(.workspace-access, #experience-drawer) input[type="range"]::-webkit-slider-runnable-track {
  height: 3px !important; border-radius: 2px !important; background: rgb(28 12 4 / .85) !important; box-shadow: 0 1px 0 rgb(255 214 160 / .3);
}
body.desk-enabled[data-desk-material="walnut"] :is(.workspace-access, #experience-drawer) input[type="range"]::-moz-range-track {
  height: 3px; border-radius: 2px; background: rgb(28 12 4 / .85); box-shadow: 0 1px 0 rgb(255 214 160 / .3);
}
body.desk-enabled[data-desk-material="walnut"] :is(.workspace-access, #experience-drawer) input[type="range"]::-moz-range-progress { background: transparent; }
body.desk-enabled[data-desk-material="walnut"] :is(.workspace-access, #experience-drawer) input[type="range"]::-webkit-slider-thumb {
  width: var(--xd-thumb-size) !important; height: var(--xd-thumb-size) !important; margin-top: -6.5px !important; border-radius: 50% !important;
  background: var(--xd-thumb-fill) !important; border: .8px solid var(--xd-thumb-border) !important; box-shadow: var(--xd-thumb-shadow) !important; transform: none !important;
}
body.desk-enabled[data-desk-material="walnut"] :is(.workspace-access, #experience-drawer) input[type="range"]::-moz-range-thumb {
  width: var(--xd-thumb-size); height: var(--xd-thumb-size); border-radius: 50%;
  background: var(--xd-thumb-fill); border: .8px solid var(--xd-thumb-border); box-shadow: var(--xd-thumb-shadow); transform: none;
}
/* Cloud library carries its small engraved cloud */
body.desk-enabled #workspace-left #cloudstate { display: inline-flex !important; align-items: center; gap: 14px; }
body.desk-enabled.workspace-ground #workspace-left #statusbar #cloudstate::before {
  content: ""; width: 34px; height: 22px; flex: none; background: currentColor; opacity: .9;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 22'%3E%3Cpath d='M9 20.5h17.5a6 6 0 0 0 .9-11.9A8.4 8.4 0 0 0 11.3 6 6.2 6.2 0 0 0 9 20.5z' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 22'%3E%3Cpath d='M9 20.5h17.5a6 6 0 0 0 .9-11.9A8.4 8.4 0 0 0 11.3 6 6.2 6.2 0 0 0 9 20.5z' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.desk-enabled #experience-drawer { padding: 2px 6px 14px !important; background: transparent !important; }
body.desk-enabled #experience-drawer .xd-content { padding: 0 5px 10px; scrollbar-width: thin; scrollbar-color: #58371b66 transparent; }
body.desk-enabled #experience-drawer .xd-acc-inner { padding: 0; }
body.desk-enabled #experience-drawer .xd-acc-rule { display: none; }
body.desk-enabled[data-desk-level="appearance"] #experience-drawer .xd-content { display: none; }
body.desk-enabled:not([data-desk-level="appearance"]) #experience-drawer .xd-nav { display: none; }
body.desk-enabled[data-desk-level="appearance"] #experience-drawer .xd-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  padding: 0 10px;
  border: 0;
}
body.desk-enabled[data-desk-level="appearance"] #experience-drawer .xd-nav button {
  flex-direction: row;
  justify-content: flex-start;
  gap: 16px;
  min-height: 45px;
  padding: 5px 0;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font: 500 18px/1.3 var(--desk-lettering);
}
body.desk-enabled[data-desk-level="appearance"] #experience-drawer .xd-nav button::after { content: none; }
body.desk-enabled[data-desk-level="appearance"] #experience-drawer .xd-live-sample { width: 43px; height: 30px; border-radius: 0; }
body.desk-enabled #xd-desk-arts {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px 18px !important;
  margin: 0 0 18px !important;
  padding: 5px !important;
}
body.desk-enabled #xd-desk-arts button {
  position: relative;
  width: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9;
  border: 1px solid #ffffff26 !important;
  border-radius: 0 !important;
  box-shadow: 0 1px 1px #1a100999, 1px 3px 5px #1a100959 !important;
  transition: translate 140ms ease-out, box-shadow 140ms ease-out;
}
body.desk-enabled #xd-desk-arts button:hover { translate: 0 -2px; box-shadow: 1px 4px 7px #1a100969 !important; }
body.desk-enabled #xd-desk-arts button[aria-pressed="true"] { outline: 1px solid #dab26d; outline-offset: 3px; }
body.desk-enabled #xd-desk-arts button:focus-visible { outline: 2px solid #f9e3b5; outline-offset: 3px; }
body.desk-enabled #experience-drawer :is(.xd-desk, .xd-bg-more) { margin: 0 5px; }

/* The desk: the approved walnut with the approved sunlight baked in, measured
   from the Focus and Workspace references (docs/plans/THE-DESK-MEASUREMENTS.md).
   It sits in world pixels so its grain keeps the references' 7.7 px spacing;
   mirrored copies continue it past its edges when the writer zooms far out. */
body.desk-enabled .desk-surface {
  position: absolute; left: -1100px; top: -210px; width: 2700px; height: 1082px;
  z-index: 0; display: none; pointer-events: none;
}
body.desk-enabled[data-desk-material="walnut"] .desk-surface { display: block; }
body.desk-enabled .desk-surface > i {
  position: absolute; inset: 0;
  background: rgb(70 28 10) image-set(url("../backdrops/desk/walnut-sunlit@1x.webp") 1x, url("../backdrops/desk/walnut-sunlit@2x.webp") 2x) 0 0 / 100% 100% no-repeat;
}
/* The same sun on the paper: a multiply over the manuscript's place, fixed to
   the desk so the page slides beneath it. It never takes a pointer or prints. */
body.desk-enabled .desk-page-light {
  position: absolute; left: 0; top: -24px; width: 816px; height: 4000px; z-index: 2;
  display: none; pointer-events: none; mix-blend-mode: multiply;
  background: rgb(242 242 242) url("../backdrops/desk/page-light.webp") 0 0 / 816px 1264px no-repeat;
  /* the strip above page 1 is wood until the manuscript scrolls paper into it */
  clip-path: inset(24px 0 0 0);
}
body.desk-enabled.desk-scrolled .desk-page-light { clip-path: none; }
body.desk-enabled[data-desk-material="walnut"]:not(.two-page, .ghost-mode) .desk-page-light { display: block; }
body.desk-enabled[data-desk-material="walnut"] #backdrop { visibility: hidden; }
@media screen {
  body.desk-enabled:not(.ghost-active) #pages > .sheet {
    border-radius: 0 !important;
    box-shadow: 0 3px 7px -3px rgb(0 0 0 / .24), 0 12px 28px -12px rgb(0 0 0 / .3) !important;
  }
  body.desk-enabled[data-desk-material="walnut"]:not(.ghost-active) #pages > .sheet {
    box-shadow: inset -3px 0 0 rgb(178 180 182), inset 0 0 0 1px rgb(90 50 20 / .1),
      2px 0 0 0 rgb(6 5 4), 0 0 7px 1px rgb(20 8 3 / .62), 9px 1px 15px -3px rgb(0 0 0 / .8) !important;
  }
  /* On the Desk the sun does the lighting; the paper is flat stock beneath it. */
  body.desk-enabled[data-desk-material="walnut"]:not(.ghost-active) #pages > .sheet { background-image: none !important; }
  /* The measured light already carries the approved paper's unevenness; keep
     only a trace of fibre, for the writer who leans in close. */
  body.desk-enabled[data-desk-material="walnut"]:not(.ghost-active) #pages > .sheet::after { display: none; }
  body.desk-enabled[data-desk-material="walnut"]:not(.ghost-active) #pages > .sheet::before { opacity: calc(var(--grain) * .35); }
}
@media (prefers-reduced-motion: reduce) {
  body:not(.pref-full-motion).desk-enabled :is(#desk-nav button, .desk-heading-back, #xd-desk-arts button) { transition: none !important; }
}
body.desk-enabled.pref-reduced-motion :is(#desk-nav button, .desk-heading-back, #xd-desk-arts button) { transition: none !important; }
@media print {
  #desk-nav, .desk-surface, .desk-page-light, .desk-heading-back { display: none !important; }
}


/* Supporting text must survive detailed photographs without frosting them.
   The thin opposing edge belongs to the glyphs, never to the background. */
body[data-v21="true"].desk-enabled .ground-aperture,
body[data-v21="true"].desk-enabled .ground-aperture * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body[data-v21="true"].desk-enabled .ground-aperture *::before,
body[data-v21="true"].desk-enabled .ground-aperture *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body[data-v21="true"].desk-enabled .ground-aperture {
  --desk-readable-ink: #fff9ed;
  --desk-letter-edge: -1px 0 #171717, 1px 0 #171717, 0 -1px #171717, 0 1px #171717;
}
body[data-v21="true"].desk-enabled .ground-aperture :is(
  .workspace-access-body > button, .script-map-toggle, #savestate, #statusbar,
  #projectmenu, #moremenu, .xd-label, .xd-value, .xd-acc-btn, .xd-shimmer-check,
  .xd-bg-more > summary, .xd-bg-more label, .xd-bg-more p
),
body[data-v21="true"].desk-enabled #wpcluster.desk-writing-tools :is(.tbtn, #t-ai) {
  color: var(--desk-readable-ink) !important;
  text-shadow: var(--desk-letter-edge) !important;
}
body[data-v21="true"].desk-enabled .ground-aperture :is(
  #projectmenu, #moremenu, .workspace-access-body
) :is(button:not(.desk-heading-back), .kbd, .file-group-label, .file-ext, .filename-flyout-cue,
  .workspace-eyebrow, #filestate, #pageinfo, output, .pj-meta, .pj-empty) {
  color: var(--desk-readable-ink) !important; text-shadow: var(--desk-letter-edge) !important; opacity: 1 !important;
}
body[data-v21="true"].desk-enabled :is(#projectmenu, #moremenu) {
  --workspace-text: var(--desk-text-size, 18px);
}
body[data-v21="true"].desk-enabled :is(#projectmenu, #moremenu) :is(.kbd, .file-ext, .file-group-label, .pj-meta) {
  font-size: var(--desk-detail-size, 14px) !important;
}
body[data-v21="true"].desk-enabled .ground-aperture :is(button, summary):focus-visible {
  outline: 2px solid #fff9ed; outline-offset: 3px; box-shadow: 0 0 0 4px #171717;
}

body[data-v21="true"].desk-enabled .ground-aperture :is(#settings, #findbar, #titlepage-modal, #library, #outline, #gotobar, #tr-bar, #storygit) :is(h2, h3, p, label, legend, summary, button, span, output):not(.tp-preview *) {
  color: var(--desk-readable-ink) !important; text-shadow: var(--desk-letter-edge) !important; opacity: 1 !important;
}
body[data-v21="true"].desk-enabled #settings :is(.set-tab, h3, .set-check b, .set-select-row b, .set-action, .set-deck) {
  font-size: var(--desk-text-size, 18px) !important;
}
body[data-v21="true"].desk-enabled #settings :is(.set-check span, .set-select-row span, .set-note, select, .btn) {
  font-size: var(--desk-detail-size, 14px) !important;
}
body[data-v21="true"].desk-enabled #settings :is(.btn, select) {
  background: #fffdf8 !important; color: #282620 !important; text-shadow: none !important;
}

body[data-v21="true"].desk-enabled .ground-aperture :is(#findbar, #gotobar, #titlepage-modal, #library) :is(input, textarea) {
  color: var(--desk-readable-ink) !important; text-shadow: var(--desk-letter-edge) !important;
}
body.desk-enabled #workspace-left #btn-start { order: 7; margin-top: 18px !important; }
body[data-v21="true"].desk-enabled #projectmenu :is(button, summary, input, .pj-title) {
  font-size: var(--desk-text-size, 18px) !important;
}
body[data-v21="true"].desk-enabled #projectmenu :is(.pj-empty, .project-shelf-tabs button span) {
  font-size: var(--desk-detail-size, 14px) !important;
}
body[data-v21="true"].desk-enabled #projectmenu :is(input, summary) {
  color: var(--desk-readable-ink) !important; text-shadow: var(--desk-letter-edge) !important;
}

body[data-v21="true"].desk-enabled .ground-aperture input::placeholder {
  color: inherit; opacity: 1; text-shadow: inherit;
}