/* kit-explorer.css — the brand kit as a small explorer window (assets/kit-explorer.js).

   A dark window: a title bar with the three traffic lights, and under it the kit's
   folder tree. A file marked with an eye opens (the real file, served from
   assets/ai-web/kit/); one marked with a lock ships with a client's kit and answers
   "Nice try", as the traffic lights do. It is on /aos (section 2) and, small, in
   the aOS card on the home page.

   The window is a dark surface of its own wherever it is put, so its colours are
   written out here rather than taken from tokens a page may have re-pointed for type
   that stands on the sky. */
.kx { position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: #0E0F13; color: #EBE9D9; text-align: left;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 12px; line-height: 1.45; }
.kx-bar { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,.12); }
.kx-bar i { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; cursor: pointer; }
.kx-bar .dot-close { background: #FF5F57; } .kx-bar .dot-min { background: #FEBC2E; } .kx-bar .dot-max { background: #28C840; }
.kx-bar i::before { content: ''; position: absolute; inset: -8px; }   /* a forgiving target */
.kx-bar i::after { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 8px/1 ui-monospace, Menlo, monospace; color: rgba(0,0,0,.6); }
.kx-bar .dot-close::after { content: '\00d7'; } .kx-bar .dot-min::after { content: '\2212'; } .kx-bar .dot-max::after { content: '+'; }
.kx-bar i:focus-visible { outline: 2px solid #FB3F0C; outline-offset: 2px; }
.kx-title { flex: 1; min-width: 0; margin-right: 46px; text-align: center; font-size: 10px; color: rgba(245,244,238,.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* the margin balances the dots, so the name is centred on the window */
.kx-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.kx-tree { height: 100%; box-sizing: border-box; padding: 12px 8px; overflow: auto; }
.kx-tree::-webkit-scrollbar { width: 8px; } .kx-tree::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 8px; }
.kx-row { display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 2px 8px; padding-left: calc(8px + var(--depth, 0) * 18px); border-radius: 8px; color: #EBE9D9; }
.kx-row.is-dir .kx-name { color: #5BBDE4; font-weight: 600; }
.kx-row.is-root .kx-name { color: #fff; font-weight: 600; }
.kx-row.is-open, .kx-row.is-expand { cursor: pointer; }
.kx-row.is-open:hover, .kx-row.is-expand:hover { background: rgba(255,255,255,.06); }
.kx-row.is-auto { background: rgba(255,255,255,.12); } .kx-row.is-auto .kx-name { color: #fff; }   /* a row the window is about to open by itself */
.kx-row.is-open:hover .kx-name { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.kx-row.is-lock { opacity: .55; cursor: not-allowed; }
.kx-chev { flex: none; width: 12px; color: #BBEE2F; font-size: 11px; display: inline-flex; justify-content: center; transition: transform .2s cubic-bezier(.16, 1, .3, 1); }
.kx-chev.is-blank { visibility: hidden; }
.kx-row.is-expand.open .kx-chev { transform: rotate(90deg); }
.kx-ico { flex: none; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; color: #BBEE2F; }
.kx-row.is-lock .kx-ico { color: rgba(245,244,238,.6); }
.kx-ico svg { width: 14px; height: 14px; display: block; }
.kx-name { white-space: nowrap; }
.kx-note { flex: 1; min-width: 0; margin-left: 8px; color: rgba(245,244,238,.45); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kx-note::before { content: '\2190\00a0\00a0'; }
.kx-kids { display: none; } .kx-kids.open { display: block; }
.kx-row.shake, .kx.shake { animation: kx-shake .3s cubic-bezier(.16, 1, .3, 1); }
@keyframes kx-shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.kx-view { position: absolute; inset: 0; display: flex; flex-direction: column; background: #0E0F13; overflow: hidden; }
.kx-view[hidden] { display: none; }
.kx-vbar { flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 10px; letter-spacing: .04em; color: rgba(245,244,238,.6); }
.kx-back { flex: none; min-height: 32px; padding: 0 12px; background: transparent; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: #EBE9D9; font: inherit; cursor: pointer; transition: border-color .2s cubic-bezier(.16, 1, .3, 1), color .2s cubic-bezier(.16, 1, .3, 1); }
.kx-back:hover { border-color: #FB3F0C; color: #fff; }
.kx-path { min-width: 0; color: #BBEE2F; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kx-body { flex: 1; margin: 0; padding: 12px; overflow: auto; font: inherit; font-size: 12px; line-height: 1.55; color: #EBE9D9; white-space: pre; tab-size: 2; }
.kx-body .h { color: #fff; font-weight: 600; } .kx-body .k { color: #5BBDE4; } .kx-body .c { color: rgba(245,244,238,.45); } .kx-body .m { color: #BBEE2F; }
.kx-toast { position: absolute; left: 50%; bottom: 12px; transform: translate(-50%, 8px); background: #FB3F0C; color: #fff; font-family: 'Be Vietnam Pro', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; padding: 4px 12px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .2s cubic-bezier(.16, 1, .3, 1), transform .2s cubic-bezier(.16, 1, .3, 1); z-index: 2; }
.kx-toast.show { opacity: 1; transform: translate(-50%, 0); }
.kx-row:focus-visible, .kx-back:focus-visible { outline: 2px solid #FB3F0C; outline-offset: 2px; }

/* small: in a card. Tighter rows and type; the tree does not scroll (it would take the
   wheel from the page), so it shows the top of the kit. An open file scrolls. */
.kx--small { font-size: 11px; }
.kx--small .kx-bar { padding: 7px 10px; gap: 6px; }
.kx--small .kx-bar i { width: 8px; height: 8px; }
.kx--small .kx-bar i::after { content: none; }
.kx--small .kx-title { margin-right: 36px; font-size: 9px; }
.kx--small .kx-tree { padding: 6px 4px; overflow: hidden; }
.kx--small .kx-row { min-height: 23px; padding: 1px 6px; padding-left: calc(4px + var(--depth, 0) * 13px); gap: 6px; border-radius: 6px; }
.kx--small .kx-ico { width: 13px; height: 13px; } .kx--small .kx-ico svg { width: 12px; height: 12px; }
.kx--small .kx-chev { width: 8px; font-size: 9px; }
.kx--small .kx-note { font-size: 9px; margin-left: 4px; }
.kx--small .kx-vbar { padding: 5px 8px; gap: 8px; font-size: 9px; }
.kx--small .kx-back { min-height: 22px; padding: 0 9px; }
.kx--small .kx-body { padding: 8px 10px; font-size: 10.5px; }
.kx--small .kx-toast { bottom: 8px; font-size: 9px; }

@media (max-width: 767px) {
  .kx-row { padding-left: calc(2px + var(--depth, 0) * 12px); gap: 4px; }
  .kx-chev.is-blank { display: none; }
  .kx-note { margin-left: 4px; font-size: 9px; }   /* stays on the folder's line */
}
@media (prefers-reduced-motion: reduce) {
  .kx-toast { transition: none; }
  .kx-row.shake, .kx.shake { animation: none; }
}