/* ==========================================================================
   Botino 2.0 - Widget UI Kit (developer reference) page layout
   Builds on tokens/base/components/app CSS. Documents the embeddable
   chat + voice widget: anatomy, states, theming, data model & JS API.
   ========================================================================== */

.kit-nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.kit-nav .container { display: flex; align-items: center; gap: var(--space-4); height: 64px; }
.kit-nav__links { display: flex; gap: 0.3rem; margin-left: auto; flex-wrap: wrap; }
.kit-nav__links a { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-muted); padding: 0.45rem 0.7rem; border-radius: var(--r-sm); }
.kit-nav__links a:hover { color: var(--color-primary-700); background: var(--color-primary-50); }
@media (max-width: 900px) { .kit-nav__links { display: none; } }

.kit-hero { background: var(--grad-brand-soft); border-bottom: 1px solid var(--border); padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) 0; }

.kit-section { padding-block: var(--space-9); border-bottom: 1px solid var(--border); scroll-margin-top: 80px; }
.kit-section__head { max-width: 64ch; margin-bottom: var(--space-6); }
.kit-section__head h2 { font-size: var(--fs-h2); margin-bottom: var(--space-2); }
.kit-section__head p { color: var(--text-muted); }
.kit-label { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-primary-600); margin-bottom: var(--space-2); }

/* state gallery */
.state-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-5); align-items: start; }
.state { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-xs); }
.state__stage { padding: var(--space-5); display: grid; place-items: center; min-height: 150px; background:
  radial-gradient(circle at 1px 1px, rgba(59,91,252,0.08) 1.4px, transparent 0) 0 0 / 20px 20px,
  linear-gradient(180deg, #F1F4FA, #F7F9FD); }
.state__stage--ink { background: var(--grad-ink); }
.state__meta { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border); }
.state__name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--text-strong); display: flex; align-items: center; gap: 0.5rem; }
.state__desc { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 0.2rem; }
.state__cls { font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-violet-700); background: var(--color-slate-100); padding: 0.1rem 0.4rem; border-radius: 5px; }

/* mini widget shell for compact previews */
.cw--mini { width: 270px; }
.cw--mini .cw__body { max-height: none; padding: 0.8rem; }

/* prop / token tables */
.spec-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--bg); }
.spec-table th, .spec-table td { padding: 0.7rem 0.95rem; text-align: left; font-size: var(--fs-sm); border-bottom: 1px solid var(--border); vertical-align: top; }
.spec-table thead th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-subtle); background: var(--bg-soft); font-weight: var(--fw-bold); }
.spec-table tbody tr:last-child td, .spec-table tbody tr:last-child td { border-bottom: none; }
.spec-table tr:last-child td { border-bottom: none; }
.spec-table code { font-family: var(--font-mono); font-size: 0.78rem; color: var(--color-violet-700); background: var(--color-slate-100); padding: 0.1rem 0.4rem; border-radius: 5px; white-space: nowrap; }
.spec-table .swx { width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--border); display: inline-block; vertical-align: middle; margin-right: 0.4rem; }

.kit-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start; }
@media (max-width: 900px) { .kit-grid-2 { grid-template-columns: 1fr; } }

.api-card { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--space-5); background: var(--bg); }
.api-card h4 { font-size: var(--fs-h4); margin-bottom: 0.3rem; }
.api-sig { font-family: var(--font-mono); font-size: 0.82rem; color: var(--color-primary-700); background: var(--color-primary-50); border: 1px solid var(--color-primary-100); border-radius: var(--r-sm); padding: 0.5rem 0.7rem; margin: 0.5rem 0; overflow-x: auto; }
.evt { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.76rem; font-weight: var(--fw-medium); padding: 0.2rem 0.55rem; border-radius: var(--r-full); background: rgba(20,196,184,0.12); color: var(--color-teal-600); }

.pill-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* token chip for theming section */
.tok-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.7rem; border: 1px solid var(--border); border-radius: var(--r-full); font-family: var(--font-mono); font-size: var(--fs-xs); background: var(--bg); }
.tok-chip .sw { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--border); }

.callout { display: flex; gap: 0.8rem; background: var(--color-primary-50); border: 1px solid var(--color-primary-100); border-radius: var(--r-md); padding: var(--space-4) var(--space-5); }
.callout svg { width: 1.3rem; height: 1.3rem; color: var(--color-primary-600); flex: none; }
.callout p { font-size: var(--fs-sm); color: var(--color-primary-900); }

.do-dont { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 700px) { .do-dont { grid-template-columns: 1fr; } }
.dd { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--space-4) var(--space-5); }
.dd h5 { font-family: var(--font-display); font-size: var(--fs-sm); display: flex; align-items: center; gap: 0.5rem; margin-bottom: var(--space-3); }
.dd--do h5 { color: var(--color-success); }
.dd--dont h5 { color: var(--color-danger); }
.dd li { font-size: var(--fs-sm); color: var(--text-muted); padding: 0.25rem 0; display: flex; gap: 0.5rem; }
.dd li::before { content: "-"; color: var(--text-subtle); }