/* ============================================================
   EDITOR MODE
   The stylesheet for assets/pbx-editor-mode.js, which builds the
   overlay on the first press. Three layers and nothing else: the
   column grid, one bracket with its chip, and the readout, and on a
   phone a fourth: the map, one faint mark on every control on screen,
   which the script lays and the root's is-map class shows. One value,
   --p, from 0 to 1, and every layer derives its opacity from it:
   nothing here animates a box. Drawn on the site ladder, so it follows
   the theme and the palettes; the one colour of its own is the tool
   blue.
   ============================================================ */
.em-root{
  --p:0;
  --em-blue:#4C8DFF;
  --em-mono:ui-monospace,'SF Mono',Menlo,Consolas,'Courier New',monospace;
  position:fixed;inset:0;z-index:150;pointer-events:none;
  contain:layout paint;
  font-family:var(--em-mono);font-size:11px;line-height:1;letter-spacing:0;
  color:var(--fg);
}
.em-root[hidden]{display:none;}
/* the grid, faint: a hairline either side of each column */
.em-grid{
  position:absolute;inset:0;
  display:grid;grid-template-columns:repeat(var(--em-cols,12),minmax(0,1fr));gap:var(--gutter);
  padding:0 var(--margin);
  opacity:var(--p);will-change:opacity;
}
.em-grid i{display:block;border-left:1px solid rgb(76 141 255 / .16);border-right:1px solid rgb(76 141 255 / .16);}
/* the map: a faint tint and hairline on every control on screen, so a
   phone shows what there is to touch before anything is tapped. Marks
   are laid by the script; only their opacity rides on --p. */
.em-map{position:absolute;inset:0;opacity:var(--p);will-change:opacity;}
.em-map i{position:absolute;box-shadow:inset 0 0 0 1px rgb(76 141 255 / .45);background:rgb(76 141 255 / .05);}
.em-row--map{display:none;}
.em-root.is-map .em-row--map{display:flex;}
/* the bracket: four corners on the one thing being read, and a chip on
   its top edge naming it. The box takes its geometry from the script;
   only its opacity rides on --p. */
.em-box{position:absolute;opacity:var(--p);will-change:opacity;}
.em-box[hidden]{display:none;}
.em-box i{position:absolute;width:7px;height:7px;border:1px solid var(--em-blue);}
.em-box i:nth-child(1){left:-1px;top:-1px;border-right:0;border-bottom:0;}
.em-box i:nth-child(2){right:-1px;top:-1px;border-left:0;border-bottom:0;}
.em-box i:nth-child(3){left:-1px;bottom:-1px;border-right:0;border-top:0;}
.em-box i:nth-child(4){right:-1px;bottom:-1px;border-left:0;border-top:0;}
.em-box.is-ui{box-shadow:inset 0 0 0 1px var(--em-blue);background:rgb(76 141 255 / .08);}
.em-box b{
  position:absolute;left:0;top:-18px;height:18px;padding:0 5px;
  display:inline-flex;align-items:center;white-space:nowrap;
  font-size:10px;font-weight:500;
  background:var(--em-blue);color:#fff;
}
.em-box.is-below b{top:100%;}
.em-box.is-right b{left:auto;right:0;}
/* the focus: the same bracket in ink rather than blue, so a reading the
   page chose looks different from one a hand chose. A change of element
   glides; the script puts is-move on for the length of the glide only,
   so a bracket following its element down the page never trails it. */
.em-box.is-auto i{border-color:var(--fg);}
.em-box.is-auto b{background:var(--fg);color:var(--bg);}
.em-box.is-auto.is-ui{box-shadow:inset 0 0 0 1px var(--fg);background:rgb(var(--fg-rgb) / .05);}
.em-box.is-move{transition:left .32s var(--snap),top .32s var(--snap),width .32s var(--snap),height .32s var(--snap);}
@media (prefers-reduced-motion:reduce){.em-box.is-move{transition:none;}}
html.reduce-motion .em-box.is-move{transition:none;}
/* the readout: four rows of mono in the top right, or the bottom right
   while the reading is under the top right. Clear of the discs, which
   stand at the bottom left on a desktop, and of the logo mark at the
   top left. On a phone the discs stand at the bottom right, and the
   readout is at the top, so the two never meet. */
.em-hud{
  position:absolute;top:12px;right:12px;
  min-width:212px;padding:8px 10px;
  background:var(--fg);color:var(--bg);
  opacity:var(--p);
  transform:translateY(calc((1 - var(--p)) * 6px));
  will-change:transform,opacity;
}
.em-hud.is-low{top:auto;bottom:12px;}
/* on a phone the clock has the top right and the mark the top left, so
   the readout takes the middle; five rows there, the count first */
@media (max-width:1020px){
  .em-hud{right:auto;left:50%;transform:translate(-50%,calc((1 - var(--p)) * 6px));}
}
.em-row{display:flex;justify-content:space-between;gap:16px;padding:3px 0;}
.em-row span{color:rgb(var(--bg-rgb) / .6);}
.em-row b{font-weight:500;text-align:right;display:inline-flex;align-items:center;gap:6px;}
.em-swatch{display:inline-block;width:9px;height:9px;border:1px solid rgb(var(--bg-rgb) / .28);}
.em-swatch[hidden]{display:none;}
/* the announcement, off screen */
.em-say{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
/* the disc that is holding the mode reads as pressed */
html.em-on #gridBtn{background:var(--fg);color:var(--bg);}
@media (max-width:639px){
  .em-hud{min-width:0;max-width:calc(100vw - 24px);font-size:10px;}
}