/* ============================================================
   TEN Effects -- the pedal tools' quick links (account/inc/layout.php
   tool_bar()). A second row inside the sticky site header, so every
   tool is one click away from anywhere. Everything here is tb-.
   ============================================================ */

.tb { border-top: 1px solid var(--line-soft, var(--line)); }
.tb-inner {
  position: relative;                     /* js/tool-bar.js measures from here */
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;                  /* phones: swipe sideways */
  -webkit-overflow-scrolling: touch;
  padding-top: 0;
  padding-bottom: 0;
}
.tb-inner::-webkit-scrollbar { display: none; }
.tb-link {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bone-2);
  padding: 10px 11px 9px;
  border-bottom: 2px solid transparent;
  text-decoration: none;
}
.tb-link:hover { color: var(--bone); text-decoration: none; }
.tb-link:focus-visible { outline: 2px solid var(--live); outline-offset: -2px; }
.tb-link[aria-current="page"] { color: var(--live); border-bottom-color: var(--live); }
.tb-hub { padding-left: 0; color: var(--bone); }
.tb-hub[aria-current="page"] { padding-left: 11px; }
.tb-account { margin-left: auto; color: var(--bone-3); }

@media (max-width: 640px) {
  .tb-inner {
    /* a soft edge on the right says there's more to swipe to */
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
    mask-image: linear-gradient(to right, #000 85%, transparent);
    padding-right: 48px;                  /* so the last link can scroll clear of the fade */
  }
  .tb-account { margin-left: 0; }
}

/* ---------- which Bridge of Vibes: treadle or non-treadle version (js/bov-model.js) ---------- */
html:not([data-bov-model="nontreadle"]) [data-model="nontreadle"],
html[data-bov-model="nontreadle"] [data-model="treadle"] { display: none !important; }

.pt-eyebrow-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 14px; }
.pt-eyebrow-row .ten-banner-eyebrow { margin: 0; }
.pt-model {
  display: inline-flex;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 2px;
  background: rgba(0, 0, 0, 0.18);
}
.pt-model button {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.pt-model button:hover { color: #fff; }
.pt-model button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.pt-model button[aria-pressed="true"] { background: var(--bone); color: var(--ink); }

/* the non-treadle version's "coming soon" panel on each tool */
.pt-coming {
  max-width: 720px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--bridgeofvibes-sig);
  background: var(--ink-2);
  border-radius: 4px;
  padding: 20px 22px;
}
.pt-coming-title { margin: 0 0 8px; font-weight: 600; color: var(--bone); font-size: 18px; }
.pt-coming p { color: var(--bone-2); margin: 0 0 10px; }
.pt-coming p:last-child { margin-bottom: 0; }
.pt-coming button { font: inherit; color: var(--live); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }