/* Konformista concept pages: Kontroller's page bar, working (suite-kontroller.js).
   CONCEPT ONLY. Colours are the app's, read from its screenshots: the window #0a0807, its
   bars #121010, the gold of its wordmark and selected tab. Works on the landing (suite.html)
   and on the drafts (suite-pages.css), so it brings its own colours. */
.kx {
  position: relative;
  --kx-bg: #0a0807; --kx-bar: #121010; --kx-line: rgba(255, 236, 200, .08); --kx-ink: #ecebe6; --kx-dim: #a6a29a;
  --kx-gold: #d4a84a; --kx-gold-hi: #e6bf68;
  overflow: hidden; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .12); background: var(--kx-bg);
  box-shadow: 0 50px 110px -50px rgba(0, 0, 0, 1); color: var(--kx-ink); font-family: var(--sans);
}
/* the header the app draws over every page */
.kx-head { display: flex; align-items: center; gap: 22px; padding: 12px 18px; background: var(--kx-bar); border-bottom: 1px solid var(--kx-line); }
.kx-brand { display: flex; flex-direction: column; gap: 2px; padding-right: 22px; border-right: 1px solid var(--kx-line); }
.kx-brand b { font: 300 17px var(--sans); letter-spacing: .16em; color: var(--kx-gold-hi); }
.kx-brand small { font: 500 9px var(--mono); letter-spacing: .14em; color: var(--kx-dim); }
.kx-tl { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 12px; color: var(--kx-dim); white-space: nowrap; }
.kx-tl b { font-size: 14px; font-weight: 600; color: var(--kx-ink); margin-right: 4px; }
.kx-tl > * { overflow: hidden; text-overflow: ellipsis; }
.kx-tl em { font-style: normal; color: #e5555f; margin-left: 6px; }
.kx-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--kx-dim); white-space: nowrap; }
.kx-conn { display: inline-flex; align-items: center; gap: 7px; margin-right: 4px; }
.kx-conn::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #4fa05f; }
.kx-chip { padding: 6px 12px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, .12); color: var(--kx-ink); font-weight: 500; }
/* the page bar: pages on the left, Timer and Billing at the right end, then Pop out */
.kx-bar { display: flex; align-items: stretch; gap: 4px; padding: 0 10px; background: var(--kx-bar); border-bottom: 1px solid var(--kx-line);
  overflow-x: auto; scrollbar-width: none; }
.kx-bar::-webkit-scrollbar { display: none; }
.kx-tab { flex: none; position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 12px 12px 11px; border: 0; background: none;
  font: 500 14px var(--sans); color: var(--kx-dim); cursor: pointer; transition: color .2s ease; }
.kx-tab i { font: 500 10px var(--mono); font-style: normal; padding: 1px 6px; border-radius: 999px; background: rgba(255, 255, 255, .07); color: var(--kx-dim); }
.kx-tab::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--kx-gold); transform: scaleX(0); transition: transform .3s var(--ease, ease); }
.kx-tab:hover { color: var(--kx-ink); }
.kx-tab[aria-selected="true"] { color: var(--kx-ink); font-weight: 600; }
.kx-tab[aria-selected="true"]::after { transform: scaleX(1); }
.kx-tab:focus-visible { outline: 2px solid var(--kx-gold); outline-offset: -4px; border-radius: 6px; }
.kx-gap { flex: 1 1 24px; min-width: 24px; }
.kx-pop { flex: none; display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding-left: 14px; border-left: 1px solid var(--kx-line);
  font-size: 12px; color: var(--kx-dim); white-space: nowrap; }
.kx-pop button { padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .1); background: none; color: var(--kx-dim);
  font: inherit; cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.kx-pop button:hover { color: var(--kx-ink); border-color: rgba(255, 255, 255, .22); }
.kx-pop button[aria-pressed="true"] { color: var(--kx-gold-hi); border-color: var(--kx-gold); background: rgba(212, 168, 74, .12); }
/* VFX's own two tabs */
.kx-sub { display: flex; gap: 6px; padding: 8px 16px; background: var(--kx-bg); border-bottom: 1px solid var(--kx-line); }
.kx-sub[hidden] { display: none; }
.kx-sub button { padding: 5px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .12); background: none; font: 500 12px var(--sans); color: var(--kx-dim); cursor: pointer; }
.kx-sub button[aria-selected="true"] { border-color: var(--kx-gold); color: var(--kx-ink); background: rgba(212, 168, 74, .12); }
/* the page: its screenshot, top-aligned on the window's own black */
.kx-view { position: relative; aspect-ratio: var(--kx-aspect, 1600 / 873); background: var(--kx-bg); }
.kx-view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 0; opacity: 0; transition: opacity .35s ease; }
.kx-view img.is-on { opacity: 1; }
/* a part of a screenshot that answers a click: the strip's Hide, a bar's ✕ or Hide */
.kx-spot { position: absolute; z-index: 3; margin: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.kx-spot:hover, .kx-spot:focus-visible { background: rgba(212, 174, 46, .16); outline: 1px solid rgba(212, 174, 46, .6); }
.kx-spot[hidden] { display: none; }
/* the pop-out bars, floating over the window as they float over Resolve */
.kx-float { position: absolute; z-index: 6; width: var(--w); cursor: grab; touch-action: none; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .65)); }
.kx-float[hidden] { display: none; }
.kx-float:active { cursor: grabbing; }
.kx-float > img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .14); user-select: none; -webkit-user-drag: none; }
.kx-float > img[hidden] { display: none; }
.kx-float.is-folded { width: var(--wf); }
.kx-float .kx-pill { border-radius: 4px; cursor: pointer; }
.kx-says { max-width: 860px; margin: 18px auto 0; min-height: 3.2em; text-align: center; font-size: 15px; line-height: 1.6; color: var(--dim, var(--ink-dim, #a3a199)); }
.kx-says b { color: var(--text, var(--ink, #ecebe6)); font-weight: 600; }
/* a pop-out bar, shown at its own size on the Kontroller page */
.kx-popfig { margin: 0 0 26px; }
.kx-popfig img { display: block; max-width: 100%; height: auto; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .9); }
.kx-popfig figcaption { margin-top: 10px; font-size: 13px; color: var(--ink-mut, var(--mut, #8d8b83)); }
@media (max-width: 760px) {
  .kx-tools { display: none; }
  .kx-head { padding: 10px 14px; }
  .kx-brand { padding-right: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .kx-view img, .kx-tab::after { transition: none; }
}