/* The marker and the callout are page elements over the canvas, never drawn into it.
   That keeps the one rule the piece cannot bend: no geography is drawn, and the LED wall,
   which has no pointer and no chrome, is untouched. */

#ax-mark{position:fixed;z-index:4;pointer-events:none;display:none;
  border:1px solid rgba(232,233,238,.9);
  box-shadow:0 0 0 3px rgba(7,8,11,.55)}
#ax-mark.on{display:block}

#ax-call{position:fixed;z-index:5;display:none;max-width:302px;
  background:rgba(12,14,18,.97);border:1px solid var(--ax-line);
  border-radius:var(--ax-radius);padding:12px 14px 11px;
  font-family:var(--ax-mono);pointer-events:none}
#ax-call.on{display:block}
#ax-call.pin{pointer-events:auto}

#ax-call .nm{font-size:13px;letter-spacing:var(--ax-caps);color:var(--ax-fg);
  text-transform:uppercase}
/* The one line that does the work. Everything under it is the working. */
#ax-call .gap{font-size:12px;color:var(--ax-fg-2);margin:5px 0 10px;line-height:1.4}
#ax-call .gap b{color:var(--ax-fg);font-weight:500}

#ax-call table{border-collapse:collapse;width:100%;font-size:12px}
#ax-call td{padding:2px 0;vertical-align:baseline;white-space:nowrap}
#ax-call td.k{color:var(--ax-fg-3);padding-right:14px}
#ax-call td.v{color:var(--ax-fg);text-align:right;font-variant-numeric:tabular-nums;
  padding-right:10px}
#ax-call td.s{color:var(--ax-fg-3);text-align:right;font-variant-numeric:tabular-nums;
  width:4.4em}

#ax-call .ft{margin-top:9px;padding-top:8px;border-top:1px solid var(--ax-line);
  font-size:10px;line-height:1.5;color:var(--ax-fg-4)}
#ax-call .ft a{color:#6b7079;text-decoration:none;border-bottom:1px solid #2a2e35;
  pointer-events:auto}
#ax-call .ft a:hover{color:var(--ax-link);border-bottom-color:var(--ax-link)}

/* The affordance. Without it nobody discovers the callout, because the cool points look
   like part of the field, which is exactly what they are. */
/* Three buttons in the corner now: settings, hide, sites. Ordered right to left by how
   often they are wanted. */
#ax-sites{position:fixed;right:194px;bottom:14px;z-index:5;
  padding:8px 13px;font-size:12px;letter-spacing:var(--ax-caps);font-family:var(--ax-mono);
  background:rgba(20,22,27,.92);border:1px solid var(--ax-line);color:#c9ccd1;
  border-radius:var(--ax-radius)}
#ax-sites[aria-pressed=true]{color:var(--ax-fg);border-color:#3a3f47}
/* Room for the three buttons in the row of readings. The readout page sets its own
   padding and clears the buttons with the legend column instead, so this would only
   push its headline in by 300px. */
html:not(.ax-readout) #hud{padding-right:300px}

@media (max-width:760px){
  #ax-call{max-width:min(330px,calc(100vw - 24px))}
  #ax-sites{right:14px;bottom:14px;top:auto}
  html:not(.ax-readout) #hud{padding-right:16px;padding-bottom:60px}
  /* The readout takes the whole strip on a phone and moves the other two buttons up to
     the empty top right, where the mouse hint would be on a desktop. The third goes with
     them, at their size, rather than sitting on top of the headline.

     On its own line, not third in the row. Three buttons across the top of a 375 px
     screen leaves 193 px for the lockup and the sites button lands on the wordmark. The
     space under them is empty at every width, because the band is centred. */
  .ax-readout #ax-sites{top:52px;right:14px;bottom:auto;padding:6px 10px;font-size:11px}
}