/* KT8 Tools top bars, shared by every tool page (kt8.com and the speed test, which loads it from here).
   The dark bar is the same everywhere: KT8 Tools, every tool (the current one picked out) and your
   account on the right. The white bar under it is this tool's own: its logo and its page links.
   On phones the tool names in the dark bar swipe sideways and the page links fold behind ☰. */

/* Moving between tools should feel like one page: keep room for the scrollbar so nothing slides
   sideways, and fade between pages with the bars held still. */
html { scrollbar-gutter: stable; }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .tools-top { view-transition-name: tools-top; }
}

.tools-top { height: auto; }

/* Dark bar */
.suite { background: #15171c; color: #fff; }
.suite-in { display: flex; align-items: center; gap: 22px; height: 52px; }
.kt8t { display: inline-flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; font-weight: 750; font-size: 17px; white-space: nowrap; flex: none; }
.kt8t svg { flex: none; display: block; }
.suite-tools { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.suite-tools::-webkit-scrollbar { display: none; }
.suite-tools a { color: #d2d5dc; text-decoration: none; font-size: 16px; padding: 7px 12px; border-radius: 999px; white-space: nowrap; }
.suite-tools a:hover { color: #fff; background: rgba(255,255,255,.08); }
.suite-tools a[aria-current] { color: #fff; background: rgba(255,255,255,.16); font-weight: 650; }

/* Your account, right of the dark bar (drawn by tools.js once we know who you are) */
.acct-bar { margin-left: auto; display: flex; align-items: center; gap: 6px; position: relative; flex: none; }
.acct-bar:empty { display: none; }
.mydom { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-size: 16px; font-weight: 600; padding: 7px 12px; border-radius: 999px; white-space: nowrap; }
.mydom svg { width: 17px; height: 17px; flex: none; }
.mydom:hover, .mydom[aria-current] { background: rgba(255,255,255,.16); }
.who-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 4px; border-radius: 999px; border: 0; background: rgba(255,255,255,.08); color: #fff; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.who-btn:hover, .who-btn[aria-expanded="true"] { background: rgba(255,255,255,.16); }
.who-btn .chev { opacity: .7; transition: transform .2s; }
.who-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.av { position: relative; width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, #e0314c, #8a0b20); color: #fff; font-weight: 750; font-size: 14px; }
.av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.who-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 70; width: 290px; padding: 8px; background: var(--sheet); color: var(--ink); border: 1px solid var(--line-2); border-radius: 18px; box-shadow: 0 28px 60px -24px rgba(16,18,21,.35); }
.who-menu .me { display: flex; gap: 12px; align-items: center; padding: 10px 10px 14px; border-bottom: 1px solid var(--line); margin-bottom: 6px; min-width: 0; }
.who-menu .me .av { width: 44px; height: 44px; font-size: 18px; }
.who-menu .me b { display: block; font-size: 17px; }
.who-menu .me small { display: block; color: var(--ink-soft); font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
.who-menu a, .who-menu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border-radius: 12px; color: var(--ink); text-decoration: none; font: inherit; font-size: 17px; background: none; border: 0; cursor: pointer; text-align: left; }
.who-menu a:hover, .who-menu button:hover { background: var(--bg-2); }
.who-menu svg { width: 18px; height: 18px; flex: none; color: var(--ink-soft); }

/* White bar: this tool's logo and its own links */
.tools-top .top-in { height: 76px; gap: 24px; }
.tools-top .mark { white-space: nowrap; font-size: 22px; }
.tools-top .menu { margin-left: auto; }
.tools-top .menu a { color: var(--ink); }

/* Seven tools plus My domains and your name don't all fit on a computer, so tighten the spacing and
   show just your picture, keeping every tool name (All tools included) in view. On smaller laptops
   My domains moves into your picture's menu, where it already is. */
@media (min-width: 961px) {
  .suite-in { gap: 14px; }
  .suite-tools a { padding: 7px 9px; font-size: 15.5px; }
  .who-btn .nm { display: none; }
  .who-btn { padding: 0 8px 0 4px; }
  .mydom { padding: 7px 10px; }
}
@media (min-width: 961px) and (max-width: 1180px) {
  .mydom { display: none; }
  .suite-tools a { padding: 7px 7px; font-size: 15px; }
}

@media (max-width: 960px) {
  .suite-in { height: 48px; gap: 10px; }
  .kt8t span, .mydom, .who-btn .nm, .who-btn .chev { display: none; }
  .suite-tools a { font-size: 15px; padding: 6px 10px; }
  .who-btn { padding: 0; width: 34px; height: 34px; justify-content: center; background: none; }
  .who-menu { position: fixed; left: 12px; right: 12px; top: 56px; width: auto; }
  .tools-top .top-in { height: 64px; }
  .tools-top .menu { top: 100%; }
  .tools-top .menu-btn { margin-left: auto; flex: none; }
}

/* The "Find out more" pill tools.js shows while the tool box fills the screen, in the tool's own colour. */
.tools-cue { position: fixed; z-index: 20; left: 50%; bottom: 24px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; font-size: 17px; text-decoration: none; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: color-mix(in srgb, var(--post) 88%, #000); box-shadow: 0 10px 30px rgba(0,0,0,.25); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.tools-cue.on { opacity: 1; visibility: visible; }
.tools-cue:hover { background: color-mix(in srgb, var(--post) 75%, #000); }
.tools-cue span { display: inline-block; animation: tools-cue-bob 2s ease-in-out infinite; }
@keyframes tools-cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
/* The tools' dark-mode colours are lighter, so darken them more to keep white text readable. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tools-cue { background: color-mix(in srgb, var(--post) 62%, #000); } }
:root[data-theme="dark"] .tools-cue { background: color-mix(in srgb, var(--post) 62%, #000); }
@media (prefers-reduced-motion: reduce) { .tools-cue span { animation: none; } }
@media (max-width: 600px) { .tools-cue { font-size: 16px; padding: 8px 16px; bottom: 18px; } }