/* The sandbox bar on try.quireink.com. Not part of Quire Ink; see try.js.
 *
 * Same material as the demo bar — one blur, one hairline, one radius, the product's own
 * interface face — because both are the same kind of object: a thing floating over a blog
 * that is not part of the blog. The difference is that this one carries a SENTENCE, so it
 * is a bar with text in it rather than a row of buttons, and it has to fold onto a phone
 * without the sentence pushing the buttons off the edge. */

.qi-try {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 6px;
  max-width: min(760px, calc(100vw - 20px));
  padding: 7px 9px;
  border-radius: 22px;
  background: rgba(252, 252, 252, 0.86);
  border: 1px solid rgba(16, 24, 40, 0.14);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 10px 30px rgba(16, 24, 40, 0.12);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.3;
}

/* In the admin: a pill in the bottom-left corner, over the sidebar's own footer.
   Everywhere else in that app is somebody's control — the hint line along the bottom, the
   publish panel down the right — and a floating bar that covers a control does not look
   like a bar in the way, it looks like a button that does not work. */
.qi-try-pill {
  left: 12px;
  right: auto;
  bottom: 12px;
  transform: none;
  max-width: min(340px, calc(100vw - 24px));
  padding: 5px 7px;
  gap: 2px;
}
/* Collapsed: the tag (now carrying the countdown) and the ? that opens it. */
.qi-try-pill .qi-try-note,
.qi-try-pill .qi-try-btn,
.qi-try-pill .qi-try-out { display: none; }
.qi-try-pill.qi-try-open .qi-try-note,
.qi-try-pill.qi-try-open .qi-try-btn,
.qi-try-pill.qi-try-open .qi-try-out { display: block; }
.qi-try-pill.qi-try-open { max-width: min(320px, calc(100vw - 24px)); padding: 7px 9px; }
.qi-try-pill.qi-try-open .qi-try-note { flex-basis: 100%; padding: 4px 6px; }
/* The tag carries the countdown in here, and uppercase turns "4m" into "4M", which reads
   as four million for the half second before it does not. Sentence case in the pill only. */
.qi-try-pill .qi-try-tag { text-transform: none; letter-spacing: 0; font-size: 12.5px; }

.qi-try-toggle {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #6b7280;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.qi-try-toggle:hover { background: rgba(0, 0, 0, 0.06); color: #0b0d0f; }
@media (prefers-color-scheme: dark) {
  .qi-try-toggle { color: #9096a0; }
  .qi-try-toggle:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
}

/* The one place a colour is allowed. The bar has to be read as a WARNING label before it is
   read as navigation, and the amber is the product's own accent rather than a new one. */
.qi-try-tag {
  flex: 0 0 auto;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(159, 92, 9, 0.12);
  color: #7a4607;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.qi-try-note {
  flex: 1 1 220px;
  min-width: 0;
  padding: 0 4px;
  color: #3c4149;
}

.qi-try-clock { font-weight: 600; color: #0b0d0f; white-space: nowrap; }

.qi-try-btn {
  flex: 0 0 auto;
  /* 44px tall including the bar's padding: the minimum a touch target may be. */
  padding: 11px 15px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #3c4149;
  font: inherit;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.qi-try-btn:hover { background: rgba(0, 0, 0, 0.05); color: #0b0d0f; }
.qi-try-btn:active { transform: translateY(1px); }

/* The editor is the whole reason this instance exists, so exactly one button is filled. */
.qi-try-btn-primary { background: #16181c; color: #fff; }
.qi-try-btn-primary:hover { background: #000; color: #fff; }

.qi-try-out {
  flex: 0 0 auto;
  padding: 11px 12px;
  color: #6b7280;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}
.qi-try-out:hover { color: #0b0d0f; text-decoration: underline; }

/* Keyboard focus, in the product's own monochrome rather than the browser's blue. */
.qi-try a:focus-visible {
  outline: 2px solid #0b0d0f;
  outline-offset: 2px;
}

/* Dark. The blog behind it can be in any of six palettes, five of which are dark, so this
   follows the SYSTEM preference rather than the site's — the bar is not part of the site and
   should not change colour when a reader tries a palette on. */
@media (prefers-color-scheme: dark) {
  .qi-try {
    background: rgba(22, 24, 28, 0.86);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 30px rgba(0, 0, 0, 0.4);
  }
  .qi-try-tag { background: rgba(232, 161, 60, 0.16); color: #e8a13c; }
  .qi-try-note { color: #c7cbd1; }
  .qi-try-clock { color: #fff; }
  .qi-try-btn { color: #c7cbd1; }
  .qi-try-btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
  .qi-try-btn-primary { background: #f2f3f5; color: #16181c; }
  .qi-try-btn-primary:hover { background: #fff; color: #000; }
  .qi-try-out { color: #9096a0; }
  .qi-try-out:hover { color: #fff; }
  .qi-try a:focus-visible { outline-color: #fff; }
}

/* The editor's own bottom furniture is at the same edge, so on a small screen the bar sheds
   the sentence rather than covering a control somebody is trying to press. */
@media (max-width: 540px) {
  .qi-try { font-size: 13px; gap: 3px 4px; }
  .qi-try-note { flex-basis: 100%; text-align: center; padding: 2px 6px 0; }
  .qi-try-out { display: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .qi-try { background: #fcfcfc; -webkit-backdrop-filter: none; backdrop-filter: none; }
  @media (prefers-color-scheme: dark) { .qi-try { background: #16181c; } }
}

/* The language picker. It borrows the button's geometry rather than repeating it, the same
   way `qi-try-btn-primary` does — a control that sits in this bar has to read as part of it,
   and the one thing a native <select> will not inherit is the shape. `appearance:none` drops
   the platform chrome; the caret is drawn back on as a background so the box stays flat like
   everything else here. Text colour is stated because a <select> does not inherit it. */
.qi-try-lang {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  padding: 6px 26px 6px 11px;
  border: 1px solid rgba(16, 24, 40, 0.16);
  border-radius: 999px;
  background: transparent
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2316181c' stroke-width='1.4'/%3E%3C/svg%3E")
    no-repeat right 9px center / 9px 5px;
  color: #16181c;
  font: inherit;
  line-height: 1.3;
  cursor: pointer;
  max-width: 148px;
}
.qi-try-lang:hover { background-color: rgba(0, 0, 0, 0.05); }
.qi-try-lang:focus-visible { outline: 2px solid #16181c; outline-offset: 1px; }
.qi-try-lang:disabled { opacity: 0.55; cursor: default; }