/* ==========================================================================
   "Something wrong?" -- the corner tab

   This lived in the footer, which is where a thing goes to be never seen. It
   sits in the corner of every page instead.

   The whole difficulty is being findable without being a nuisance. It is small,
   it is the same shade as the site rather than a colour shouting for attention,
   it never moves, and it can be put away. A chat-widget circle the size of a
   thumb would be seen by everybody and resented by most of them.
   ========================================================================== */

.tellus {
  position: fixed;
  right: 16px;
  bottom: 16px;
  /* Above the page, below everything that covers the page: the enlarged
     cameras sit at 4000, the search overlay at 2000, the editing bar at 3000.
     Opening any of those buries this, which is what should happen. */
  z-index: 900;
  display: flex;
  align-items: stretch;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(43, 37, 48, .17);
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

.tellus.is-gone { display: none; }

.tellus-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 8px 10px 15px;
  border-radius: 999px 0 0 999px;
  color: #6d6577;
  font-size: .8125rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: color .16s ease;
}
.tellus-btn:hover,
.tellus-btn:focus-visible { color: #7f3f98; text-decoration: none; }

.tellus-btn svg { width: 17px; height: 17px; flex: 0 0 auto; }

/* ----------------------------------------------------------------- hide -- */

/* Putting it away is remembered for the visit, not for ever. Somebody who does
   not want it today may well want it on the page where the hours are wrong. */
.tellus-hide {
  display: flex;
  align-items: center;
  padding: 0 13px 0 7px;
  border: 0;
  border-left: 1px solid #efecf3;
  border-radius: 0 999px 999px 0;
  background: none;
  color: #a49dab;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: color .16s ease;
}
.tellus-hide:hover { color: #2b2530; }

.tellus a:focus-visible,
.tellus button:focus-visible { outline: 2px solid #7f3f98; outline-offset: -2px; }

/* ----------------------------------------------------------- responsive -- */

/* On a phone the words go and the mark stays. A tab with a sentence on it takes
   a third of the width of the screen, and down there it would be sitting on top
   of whatever somebody is reading. */
@media (max-width: 560px) {
  .tellus { right: 12px; bottom: 12px; }
  .tellus-text { display: none; }
  .tellus-btn { padding: 11px 7px 11px 12px; }
  .tellus-hide { padding: 0 11px 0 6px; }
}

@media print {
  .tellus { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tellus-btn, .tellus-hide { transition: none; }
}