/* Template catalog and preview pages */
.demo-template-catalog {
  padding: 3rem 0 4rem;
}
.demo-template-intro {
  max-width: 48rem;
  margin-bottom: 2rem;
}
.demo-template-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.demo-template-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  text-decoration: none;
  color: var(--k-text);
  transition: transform .2s ease, box-shadow .2s ease;
}
.demo-template-card:hover,
.demo-template-card:focus-visible {
  color: var(--k-text);
  transform: translateY(-3px);
  box-shadow: var(--k-shadow-lg);
}
.demo-template-preview {
  min-height: 10rem;
  padding: 1.25rem;
  background: linear-gradient(135deg, var(--k-color-primary-50), var(--k-color-surface-subtle));
}
.demo-template-preview--blog { background: linear-gradient(135deg, #fff7ed, #ffedd5); }
.demo-template-preview--dashboard { background: linear-gradient(135deg, #eff6ff, #dbeafe); }
.demo-template-preview--commerce { background: linear-gradient(135deg, #f0fdf4, #dcfce7); }
.demo-template-preview__window { height: 7.5rem; border: 1px solid var(--k-border); border-radius: var(--k-radius-md); background: var(--k-bg); padding: .75rem; box-shadow: var(--k-shadow-sm); }
.demo-template-preview__bar { height: .5rem; width: 42%; border-radius: var(--k-radius-full); background: var(--k-primary); margin-bottom: .75rem; }
.demo-template-preview__lines { display: grid; gap: .45rem; }
.demo-template-preview__lines span { display: block; height: .5rem; border-radius: var(--k-radius-full); background: var(--k-border-subtle); }
.demo-template-preview__lines span:nth-child(2) { width: 75%; }
.demo-template-preview__lines span:nth-child(3) { width: 55%; }
.demo-template-card__body { display: flex; flex: 1; flex-direction: column; padding: 1.25rem; }
.demo-template-card__body .k-btn { margin-top: auto; align-self: flex-start; }
.demo-template-badge { margin-bottom: .75rem; }
.demo-template-shell { min-height: 100vh; background: var(--k-bg); }
.demo-template-shell__nav { border-bottom: 1px solid var(--k-border); background: var(--k-bg); }
.demo-template-shell__nav .k-container { min-height: 4.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.demo-template-hero { padding: 5rem 0; background: linear-gradient(135deg, var(--k-color-primary-50), var(--k-bg)); }
.demo-template-stat { padding: 1.25rem; }
.demo-template-stat__value { display: block; font-size: 1.75rem; font-weight: 700; color: var(--k-text); }
.demo-template-sidebar { height: 100%; min-height: 24rem; padding: 1rem; border-right: 1px solid var(--k-border); }
.demo-template-sidebar a { display: block; padding: .6rem .75rem; border-radius: var(--k-radius-md); color: var(--k-text-muted); text-decoration: none; }
.demo-template-sidebar a.is-active, .demo-template-sidebar a:hover { background: var(--k-color-primary-50); color: var(--k-primary); }
.demo-template-product-image { min-height: 12rem; display: grid; place-items: center; border-radius: var(--k-radius-md); background: var(--k-color-primary-50); color: var(--k-primary); }
@media (max-width: 767px) {
  .demo-template-grid { grid-template-columns: 1fr; }
  .demo-template-hero { padding: 3rem 0; }
  .demo-template-shell__nav .k-container { min-height: 3.5rem; }
}





/* Keep every form label and its copy action on one aligned row. */
.demo-form-label {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
  margin-bottom: 0.25rem;
  flex-wrap: nowrap;
}
.demo-form-label .k-form-label {
  min-width: 0;
  margin-bottom: 0;
}

.demo-form-label .demo-copy-button {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0.15rem 0.45rem;
  font-size: 0.6875rem;
  font-weight: var(--k-weight-semibold, 600);
  white-space: nowrap;
}

@media (max-width: 580px) {
  .demo-form-label {
    flex-wrap: wrap;
  }

  .demo-form-label .demo-copy-button {
    margin-left: 0.15rem;
  }
}

.k-dropdown__value.is-placeholder {
  color: var(--k-text-muted, #64748b);
}



/**
 * KAUI Demo Auxiliary Stylesheet
 *
 * Provides layout and presentation helpers for the living styleguide demo page.
 * Strictly uses `.demo-*` prefix to prevent any selector namespace collision
 * with the KAUI kit (.k-* and .is-*).
 */

/* Living Styleguide Layout */
.demo-body {
  height: 100vh;
  min-height: 100vh;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}
/* Language Switcher */
.demo-language-switcher {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--k-border, #e2e8f0);
  border-radius: var(--k-radius-md, 0.375rem);
  padding: 2px;
  background-color: var(--k-bg, #ffffff);
}

.demo-language-button {
  border: none;
  background: transparent;
  color: var(--k-text-muted, #64748b);
  font-family: inherit;
  font-size: var(--k-size-xs, 0.75rem);
  font-weight: var(--k-weight-bold, 700);
  padding: 0.25rem 0.6rem;
  border-radius: var(--k-radius-sm, 0.25rem);
  cursor: pointer;
  line-height: 1.2;
  transition: all var(--k-transition-base, 0.15s ease-in-out);
}

.demo-language-button:hover {
  color: var(--k-text, #0f172a);
}

.demo-language-button.is-active {
  background-color: var(--k-primary, #2563eb);
  color: #ffffff;
}

[data-theme="dark"] .demo-language-switcher {
  background-color: var(--k-color-surface-subtle, #1e293b);
  border-color: var(--k-color-border, #334155);
}


:root {
  --demo-header-height: 4.25rem;
}

.demo-right {
  min-width: 0;
  height: 100vh;
  max-height: 100vh;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.demo-header {
  flex: 0 0 auto;
  height: var(--demo-header-height);
  min-height: var(--demo-header-height);
  max-height: var(--demo-header-height);
  box-sizing: border-box;
  border-bottom: 1px solid var(--k-border, #e2e8f0);
  background: var(--k-bg, #ffffff);
  color: var(--k-text-muted, #64748b);
  z-index: 10;
}

.demo-header .k-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  min-height: var(--demo-header-height);
  gap: 1rem;
}


.demo-header__eyebrow {
  color: var(--k-text, #0f172a);
  font-size: var(--k-size-sm, 0.875rem);
  font-weight: var(--k-weight-semibold, 600);
}

.demo-header__context {
  font-size: var(--k-size-xs, 0.75rem);
}

.demo-right__body {
  min-width: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.demo-main {
  flex: 1 0 auto;
}

[data-theme="dark"] .demo-header {
  background: var(--k-color-surface-subtle, #1e293b);
  border-color: var(--k-color-border, #334155);
}

@media (max-width: 767px) {
  :root {
    --demo-header-height: 3.5rem;
  }

  .demo-header .k-container {
    padding-inline: 1rem;
  }
}

.demo-section {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--k-border, #e2e8f0);
}

.demo-section:last-of-type {
  border-bottom: none;
}

.demo-section-header {
  margin-bottom: 1rem;
}

.demo-section-title {
  font-size: var(--k-size-2xl, 1.5rem);
  font-weight: var(--k-weight-bold, 700);
  color: var(--k-text, #0f172a);
  margin-top: 0;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.demo-section-desc {
  font-size: var(--k-size-base, 1rem);
  color: var(--k-text-muted, #64748b);
  margin: 0;
}

.demo-subheading {
  font-size: var(--k-size-lg, 1.125rem);
  font-weight: var(--k-weight-semibold, 600);
  color: var(--k-text, #0f172a);
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

/* Swatches */
.demo-swatch {
  border: 1px solid var(--k-border, #e2e8f0);
  border-radius: var(--k-radius-md, 0.375rem);
  overflow: hidden;
  background-color: var(--k-bg, #ffffff);
  box-shadow: var(--k-shadow-sm);
}

.demo-swatch-color {
  height: 4rem;
  width: 100%;
}

.demo-swatch-info {
  padding: 0.75rem;
}

.demo-swatch-name {
  font-size: var(--k-size-xs, 0.75rem);
  font-family: var(--k-font-mono, monospace);
  font-weight: var(--k-weight-semibold, 600);
  color: var(--k-text, #0f172a);
  margin-bottom: 0.25rem;
}


.demo-swatch-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
}
.demo-swatch-meta-row .demo-swatch-meta {
  margin: 0;
}
.demo-swatch-meta-row .demo-color-copy {
  margin: 0;
  flex-shrink: 0;
}

.demo-color-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--k-border, #cbd5e1);
  border-radius: var(--k-radius-sm, 0.25rem);
  background-color: var(--k-bg, #ffffff);
  color: var(--k-text-muted, #64748b);
  font-family: var(--k-font-sans, system-ui, sans-serif);
  font-size: var(--k-size-xs, 0.75rem);
  font-weight: var(--k-weight-semibold, 600);
  line-height: 1.2;
  vertical-align: middle;
  cursor: pointer;
}
.demo-color-copy.is-copied {
  border-color: var(--k-success, #10b981);
  background-color: var(--k-color-surface, #ffffff);
  color: var(--k-success, #10b981);
}
.demo-color-copy [data-kaui-icon],
.demo-color-copy .kaui-icon {
  width: 0.75rem;
  height: 0.75rem;
}
[data-theme="dark"] .demo-color-copy {
  background-color: var(--k-color-surface-subtle, #1e293b);
  border-color: var(--k-color-border, #334155);
}


.demo-swatch-meta {
  font-size: var(--k-size-xs, 0.75rem);
  color: var(--k-text-muted, #64748b);
  font-family: var(--k-font-mono, monospace);
}

.demo-icon-group {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.demo-icon-group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--k-border, #e2e8f0);
}
.demo-icon-group__header .demo-subheading {
  margin: 0;
}


/* Compact icon gallery cards */
.demo-icon-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  min-height: 3.25rem;
  padding: .55rem .65rem;
  flex-direction: row;

}
.demo-icon-card__main {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: .55rem;
}
.demo-icon-card__main .k-icon {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 1.5rem;
}
.demo-icon-card__name {
  overflow: hidden;
  color: inherit;
  font-family: var(--k-font-mono, monospace);
  font-size: .75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.demo-icon-copy {
  flex: 0 0 auto;
  margin: 0;
  padding: .2rem .45rem;
  font-size: .6875rem;
}
.k-card.demo-icon-card {
  display: flex;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.k-card.demo-icon-card .demo-icon-card__main {
  flex: 1 1 auto;
  justify-content: flex-start;
}
.k-card.demo-icon-card .demo-icon-copy {
  margin-left: auto;
}


/* Spacing Scale Bars */
.demo-spacing-item {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
  font-size: var(--k-size-xs, 0.75rem);
  font-family: var(--k-font-mono, monospace);
}

.demo-spacing-label {
  width: 7rem;
  flex-shrink: 0;
  color: var(--k-text-muted, #64748b);
}

.demo-spacing-bar-wrap {
  flex-grow: 1;
}

.demo-spacing-bar {
  background-color: var(--k-primary, #2563eb);
  height: 1.25rem;
  border-radius: var(--k-radius-sm, 0.25rem);
  opacity: 0.85;
}

/* Radius Box Showcase */
.demo-radius-box {
  background-color: var(--k-color-surface-subtle, #f8fafc);
  border: 2px dashed var(--k-primary, #2563eb);
  padding: 1.25rem;
  text-align: center;
  font-family: var(--k-font-mono, monospace);
  font-size: var(--k-size-xs, 0.75rem);
  color: var(--k-text, #0f172a);
}

/* Shadow Box Showcase */
.demo-shadow-box {
  background-color: var(--k-bg, #ffffff);
  border: 1px solid var(--k-border, #e2e8f0);
  border-radius: var(--k-radius-md, 0.375rem);
  padding: 1.5rem 1rem;
  text-align: center;
  font-family: var(--k-font-mono, monospace);
  font-size: var(--k-size-xs, 0.75rem);
  color: var(--k-text, #0f172a);
}

/* Grid Visual Columns */
.demo-grid-col {
  background-color: var(--k-color-primary-50, #eff6ff);
  border: 1px solid var(--k-color-primary-200, #bfdbfe);
  border-radius: var(--k-radius-sm, 0.25rem);
  padding: 0.75rem 0.5rem;
  text-align: center;
  font-family: var(--k-font-mono, monospace);
  font-size: var(--k-size-xs, 0.75rem);
  color: var(--k-color-primary-700, #1d4ed8);
  font-weight: var(--k-weight-medium, 500);
}

[data-theme="dark"] .demo-grid-col {
  background-color: var(--k-color-surface-subtle, #1e293b);
  border-color: var(--k-color-border, #334155);
  color: var(--k-color-primary-400, #60a5fa);
}

/* Flexbox Visual Items */
.demo-flex-box {
  background-color: var(--k-color-surface-subtle, #f8fafc);
  border: 1px dashed var(--k-border, #e2e8f0);
  border-radius: var(--k-radius-md, 0.375rem);
  padding: 1rem;
  min-height: 5rem;
}

.demo-flex-item {
  background-color: var(--k-primary, #2563eb);
  color: #ffffff;
  padding: 0.5rem 1rem;
  border-radius: var(--k-radius-sm, 0.25rem);
  font-size: var(--k-size-xs, 0.75rem);
  font-family: var(--k-font-mono, monospace);
  font-weight: var(--k-weight-semibold, 600);
}

/* Inline Code Badges */
.demo-code {
  font-family: var(--k-font-mono, monospace);
  font-size: 0.85em;
  padding: 0.15em 0.4em;
  border-radius: var(--k-radius-sm, 0.25rem);
  background-color: var(--k-color-surface-subtle, #f8fafc);
  border: 1px solid var(--k-border, #e2e8f0);
  color: var(--k-primary, #2563eb);
}

/* Overview uses the same full-width container rhythm as component pages. */
.demo-hero {
  padding: 3rem 1rem;
  text-align: left;
  background: linear-gradient(180deg, var(--k-color-surface-subtle, #f8fafc) 0%, var(--k-bg, #ffffff) 100%);
  border-bottom: 1px solid var(--k-border, #e2e8f0);
}

.demo-hero--wide {
  text-align: left;
}

.demo-overview-header {
  margin-bottom: 2rem;
}

.demo-overview-header > p {
  max-width: 56rem;
}


.demo-hero--wide > .k-container > .k-card {
  width: 100%;
}



/* Version registry tree */
.demo-version-tree { display: grid; gap: .5rem; }
.demo-version-tree__item { position: relative; }
.demo-version-tree__summary { display: flex; align-items: center; gap: .65rem; width: 100%; padding: .85rem 1rem; border: 1px solid var(--k-border, #e2e8f0); border-radius: var(--k-radius-md, .375rem); background: var(--k-color-surface, #fff); color: var(--k-text, #0f172a); cursor: pointer; list-style: none; }
.demo-version-tree__summary::-webkit-details-marker { display: none; }
.demo-version-tree__summary::before { content: '▸'; color: var(--k-primary, #2563eb); font-size: 1rem; transition: transform .15s ease; }
.demo-version-tree__item[open] > .demo-version-tree__summary::before { transform: rotate(90deg); }
.demo-version-tree__version { font-weight: var(--k-weight-semibold, 600); }
.demo-version-tree__meta { margin-left: auto; color: var(--k-text-muted, #64748b); font-size: .8rem; }
.demo-version-tree__children { position: relative; display: grid; gap: .35rem; margin: .35rem 0 .5rem 1.9rem; padding-left: 1.1rem; }
.demo-version-tree__children::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; border-left: 1px solid var(--k-border, #cbd5e1); }
.demo-version-tree__file { position: relative; display: flex; align-items: center; gap: .5rem; min-height: 2rem; padding: .35rem .6rem; color: var(--k-text-muted, #475569); font: .85rem var(--k-font-mono, monospace); text-decoration: none; }
.demo-version-tree__file::before { content: ''; position: absolute; left: -1.1rem; width: .85rem; border-top: 1px solid var(--k-border, #cbd5e1); }
.demo-version-tree__file:hover { color: var(--k-primary, #2563eb); background: var(--k-color-primary-50, #eff6ff); border-radius: var(--k-radius-sm, .25rem); }
.demo-version-tree__file .kaui-icon { width: 1rem; height: 1rem; }
[data-theme="dark"] .demo-version-tree__summary { background: var(--k-color-surface-subtle, #1e293b); }
@media (max-width: 600px) { .demo-version-tree__meta { display: none; } .demo-version-tree__children { margin-left: 1.25rem; } }



/* Footer Chrome */
.demo-footer {
  flex: 0 0 auto;
  position: static;
  z-index: 10;
  width: 100%;
  box-sizing: border-box;
  background-color: color-mix(in srgb, var(--k-color-surface-subtle, #f8fafc) 96%, transparent);
  border-top: 1px solid var(--k-border, #e2e8f0);
  padding: 0.5rem 1.25rem;
  color: var(--k-text-muted, #64748b);
  font-size: var(--k-size-xs, 0.75rem);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Component copy button */
.demo-copy-button {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.5rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--k-border, #cbd5e1);
  border-radius: var(--k-radius-sm, 0.25rem);
  background-color: var(--k-bg, #ffffff);
  color: var(--k-text-muted, #64748b);
  font-family: var(--k-font-sans, system-ui, sans-serif);
  font-size: var(--k-size-xs, 0.75rem);
  font-weight: var(--k-weight-semibold, 600);
  cursor: pointer;
  line-height: 1.2;
  vertical-align: middle;
  transition: all var(--k-transition-base, 0.15s ease-in-out);
}

/* Header/body/footer are owned by the fixed-height right shell; only body scrolls. */
.demo-page {
  min-height: 0;
  padding-bottom: 0;
}

.demo-main {
  padding-bottom: 3rem;
}

.demo-footer .k-container {
  width: 100%;
  max-width: none;
}

.demo-footer .k-navbar__link {
  font-size: inherit;
}

@media (max-width: 767px) {
  .demo-footer {
    padding-inline: 1rem;
  }

  .demo-footer .k-flex {
    gap: 0.75rem;
  }
}

.demo-copy-button:hover {
  border-color: var(--k-primary, #2563eb);
  color: var(--k-primary, #2563eb);
  background-color: var(--k-color-primary-50, #eff6ff);
}

.demo-copy-button.is-copied {
  border-color: var(--k-success, #10b981);
  background-color: var(--k-color-surface, #ffffff);
  color: var(--k-success, #10b981);
}

[data-theme="dark"] .demo-copy-button {
  background-color: var(--k-color-surface-subtle, #1e293b);
  border-color: var(--k-color-border, #334155);
}

[data-theme="dark"] .demo-copy-button:hover {
  background-color: var(--k-color-surface, #0f172a);
  border-color: var(--k-primary, #3b82f6);
}

.demo-copy-label {
  display: inline-block;
}

/* Make component copy actions clearly visible in every section header. */
.demo-section-header {
  position: relative;
}

.demo-section-title .demo-copy-button {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--k-primary, #2563eb);
  border-radius: var(--k-radius-sm, 0.25rem);
  background-color: var(--k-primary, #2563eb);
  color: #ffffff;
  font-size: var(--k-size-xs, 0.75rem);
  font-weight: var(--k-weight-semibold, 600);
  white-space: nowrap;
  opacity: 1;
}

.demo-section-title .demo-copy-button:hover,
.demo-section-title .demo-copy-button.is-copied {
  border-color: var(--k-primary-hover, #1d4ed8);
  background-color: var(--k-primary-hover, #1d4ed8);
  color: #ffffff;
}

@media (max-width: 580px) {
  .demo-section-title {
    flex-wrap: wrap;
  }

  .demo-section-title .demo-copy-button {
    margin-left: 0.25rem;
  }
}

/* Fixed single-page component navigation */
.demo-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  width: 15.5rem;
  height: 100vh;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--k-color-surface, #fff);
  border-right: 1px solid var(--k-border, #e2e8f0);
  box-shadow: var(--k-shadow-md, 0 4px 12px rgba(15,23,42,.08));
}
.demo-sidebar__header {
  height: var(--demo-header-height);
  min-height: var(--demo-header-height);
  max-height: var(--demo-header-height);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex: 0 0 var(--demo-header-height);
  padding: 0 1rem;
  border-bottom: 1px solid var(--k-border, #e2e8f0);
}
.demo-sidebar__brand { display: inline-flex; align-items: baseline; gap: .65rem; padding: 0 .75rem; color: var(--k-text, #0f172a); text-decoration: none; font-size: 1.75rem; font-weight: 800; line-height: 1; }
.demo-sidebar__brand span { color: var(--k-primary, #2563eb); }
.demo-sidebar__brand small { color: var(--k-text-muted, #64748b); font-size: .8rem; font-weight: 700; letter-spacing: .14em; line-height: 1; }
.demo-sidebar__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .75rem 1rem; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--k-color-neutral-300, #cbd5e1) transparent; }
.demo-sidebar__body::-webkit-scrollbar { width: .35rem; }
.demo-sidebar__body::-webkit-scrollbar-thumb { background: var(--k-color-neutral-300, #cbd5e1); border-radius: 999px; }
.demo-sidebar__nav { display: flex; flex-direction: column; gap: .25rem; }
.demo-sidebar__link { display: flex; align-items: center; gap: .7rem; padding: .7rem .75rem; border-radius: var(--k-radius-md, .375rem); color: var(--k-text-muted, #64748b); text-decoration: none; font-size: .9rem; transition: background-color .15s, color .15s; }
.demo-sidebar__link:hover, .demo-sidebar__link.is-active { color: var(--k-primary, #2563eb); background: var(--k-color-primary-50, #eff6ff); }
.demo-sidebar__group { display: flex; flex-direction: column; gap: .25rem; }
.demo-sidebar__group + .demo-sidebar__group { margin-top: .85rem; }
.demo-sidebar__group-title { margin: .35rem .75rem .2rem; color: var(--k-text-muted, #64748b); font-size: .6875rem; font-weight: 700; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; }
[data-theme="dark"] .demo-sidebar__group-title { color: var(--k-color-neutral-400, #94a3b8); }

.demo-sidebar__footer { flex: 0 0 auto; display: flex; flex-direction: column; gap: .75rem; padding: .75rem 1rem 1.5rem; border-top: 1px solid var(--k-border, #e2e8f0); }
.demo-sidebar__footer .k-btn { width: 100%; justify-content: center; }
.demo-theme-select { display: flex; flex-direction: column; gap: .3rem; width: 100%; color: var(--k-text-muted, #64748b); font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.demo-theme-select .k-dropdown-select { width: 100%; }
.demo-theme-select .k-dropdown__toggle { min-height: 2.625rem; padding: .55rem .75rem; font-size: .875rem; font-weight: var(--k-weight-medium, 500); letter-spacing: normal; text-transform: none; background: var(--k-color-surface, #fff); color: var(--k-text, #0f172a); }
.demo-theme-select .k-dropdown__menu { z-index: 40; bottom: calc(100% + .25rem); top: auto; max-height: 14rem; }
[data-theme="ocean"] { --k-color-surface: #f0fdff; --k-color-surface-subtle: #cffafe; --k-color-text-main: #164e63; --k-color-text-muted: #0e7490; --k-color-border: #a5f3fc; --k-color-border-subtle: #cffafe; --k-color-primary-50: #ecfeff; --k-color-primary-500: #0891b2; --k-color-primary-600: #0e7490; --k-color-primary-700: #155e75; --k-color-primary-900: #164e63; --k-primary: #0e7490; --k-primary-hover: #155e75; --k-primary-light: #ecfeff; --k-bg: var(--k-color-surface); --k-text: var(--k-color-text-main); --k-text-muted: var(--k-color-text-muted); --k-border: var(--k-color-border); --k-border-subtle: var(--k-color-border-subtle); }
[data-theme="forest"] { --k-color-surface: #f0fdf4; --k-color-surface-subtle: #dcfce7; --k-color-text-main: #14532d; --k-color-text-muted: #15803d; --k-color-border: #bbf7d0; --k-color-border-subtle: #dcfce7; --k-color-primary-50: #f0fdf4; --k-color-primary-500: #16a34a; --k-color-primary-600: #15803d; --k-color-primary-700: #166534; --k-color-primary-900: #14532d; --k-primary: #15803d; --k-primary-hover: #166534; --k-primary-light: #f0fdf4; --k-bg: var(--k-color-surface); --k-text: var(--k-color-text-main); --k-text-muted: var(--k-color-text-muted); --k-border: var(--k-color-border); --k-border-subtle: var(--k-color-border-subtle); }
[data-theme="sunset"] { --k-color-surface: #fff7ed; --k-color-surface-subtle: #ffedd5; --k-color-text-main: #7c2d12; --k-color-text-muted: #c2410c; --k-color-border: #fed7aa; --k-color-border-subtle: #ffedd5; --k-color-primary-50: #fff7ed; --k-color-primary-500: #f97316; --k-color-primary-600: #ea580c; --k-color-primary-700: #c2410c; --k-color-primary-900: #7c2d12; --k-primary: #ea580c; --k-primary-hover: #c2410c; --k-primary-light: #fff7ed; --k-bg: var(--k-color-surface); --k-text: var(--k-color-text-main); --k-text-muted: var(--k-color-text-muted); --k-border: var(--k-color-border); --k-border-subtle: var(--k-color-border-subtle); }

[data-theme="ocean"] { --k-color-primary-50: #ecfeff; --k-color-primary-500: #0891b2; --k-color-primary-600: #0e7490; --k-color-primary-700: #155e75; --k-color-primary-900: #164e63; --k-primary: #0e7490; --k-primary-hover: #155e75; --k-primary-light: #ecfeff; }
[data-theme="forest"] { --k-color-primary-50: #f0fdf4; --k-color-primary-500: #16a34a; --k-color-primary-600: #15803d; --k-color-primary-700: #166534; --k-color-primary-900: #14532d; --k-primary: #15803d; --k-primary-hover: #166534; --k-primary-light: #f0fdf4; }
[data-theme="sunset"] { --k-color-primary-50: #fff7ed; --k-color-primary-500: #f97316; --k-color-primary-600: #ea580c; --k-color-primary-700: #c2410c; --k-color-primary-900: #7c2d12; --k-primary: #ea580c; --k-primary-hover: #c2410c; --k-primary-light: #fff7ed; }
[data-theme="dark"] .demo-theme-select select { background: var(--k-color-surface-subtle, #1e293b); color: var(--k-color-text-main, #f8fafc); border-color: var(--k-color-border, #334155); }



.demo-right { margin-left: 15.5rem; min-width: 0; }

.demo-page { margin-left: 15.5rem; min-width: 0; }
.demo-sidebar-toggle { display: none; }
/* .k-navbar showcased as inline component */
html { scroll-behavior: smooth; }
.demo-section, .demo-hero { scroll-margin-top: 1rem; }

/* Navbar overflow behavior demo */
.demo-navbar-edge-item { margin-inline-start: auto; }
.demo-navbar-lab { margin-top: 1rem; padding: 1.25rem; border: 1px solid var(--k-border, #e2e8f0); border-radius: .75rem; background: linear-gradient(135deg, var(--k-color-surface, #fff), var(--k-color-surface-subtle, #f8fafc)); }
.demo-navbar-lab__intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; }
.demo-navbar-lab__eyebrow { color: var(--k-primary, #2563eb); font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.demo-navbar-lab__badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.demo-navbar-lab__badge { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .55rem; border: 1px solid var(--k-border, #e2e8f0); border-radius: 999px; color: var(--k-text-muted, #64748b); background: var(--k-color-surface, #fff); font-size: .75rem; white-space: nowrap; }
.demo-navbar-lab__badge [data-kaui-icon] { width: .85rem; height: .85rem; color: var(--k-primary, #2563eb); }
.demo-navbar-lab__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem; }
.demo-navbar-lab__steps > div { display: flex; align-items: flex-start; gap: .55rem; padding: .7rem; border-radius: .5rem; background: color-mix(in srgb, var(--k-color-surface, #fff) 72%, transparent); color: var(--k-text-muted, #64748b); font-size: .8rem; line-height: 1.45; }
.demo-navbar-lab__steps b { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 1.35rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--k-primary, #2563eb); color: #fff; font-size: .7rem; }
@media (max-width: 760px) {
  .demo-navbar-lab__intro { flex-direction: column; }
  .demo-navbar-lab__badges { justify-content: flex-start; }
  .demo-navbar-lab__steps { grid-template-columns: 1fr; }
  .demo-navbar-edge-item { margin-inline-start: 0; }
}

@media (max-width: 760px) {
  .demo-sidebar { transform: translateX(-100%); transition: transform .2s ease; }
  .demo-sidebar.is-open { transform: translateX(0); }
  .demo-right { margin-left: 0; }

  .demo-sidebar-toggle { display: block; position: fixed; top: 1rem; left: 1rem; z-index: 30; border: 0; border-radius: .4rem; padding: .6rem .75rem; background: var(--k-primary, #2563eb); color: #fff; cursor: pointer; }
  .demo-page { margin-left: 0; }
}

/* KAUI Icons Integration */
[data-kaui-icon], .kaui-icon {
  width: 1.15rem;
  height: 1.15rem;
  stroke-width: 2;
  vertical-align: middle;
  display: inline-block;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  color: inherit;
  stroke-linecap: round;
  stroke-linejoin: round;
}



.demo-sidebar__link [data-kaui-icon],
.demo-sidebar__link .kaui-icon {
  width: 1.15rem;
  height: 1.15rem;
  color: inherit;
}

/* Long-content modal demo: the shared Modal contract owns body scrolling. */
.demo-country-modal__dialog {
  overflow: hidden;
}
.demo-country-modal__body {
  min-width: 0;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.demo-country-table-wrap {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}
.demo-country-table-wrap .k-table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
}
.demo-country-table-wrap col:nth-child(1) { width: 7%; }
.demo-country-table-wrap col:nth-child(2) { width: 18%; }
.demo-country-table-wrap col:nth-child(3) { width: 35%; }
.demo-country-table-wrap col:nth-child(4) { width: 40%; }
.demo-country-table-wrap th,
.demo-country-table-wrap td {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}
.demo-country-table-wrap th:first-child,
.demo-country-table-wrap td:first-child { text-align: center; }
.demo-country-table-wrap td { vertical-align: middle; }
.demo-country-table-wrap td:nth-child(2) { white-space: normal; }
.demo-country-table-wrap td:nth-child(4) code {
  display: inline;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.demo-section-title [data-kaui-icon],
.demo-section-title .kaui-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.demo-sidebar__brand small,
.demo-section-desc,
.demo-swatch-meta,
.demo-spacing-label,
.demo-footer,
.demo-copy-button,
.demo-language-button {
  color: var(--k-color-neutral-600, #475569);
}
.demo-sidebar__link:hover,
.demo-sidebar__link.is-active,
.demo-language-button:hover,
.demo-copy-button:hover {
  color: var(--k-primary-hover, #1d4ed8);
}
.demo-section-desc {
  line-height: 1.6;
}
[data-theme="dark"] .demo-sidebar__link,
[data-theme="dark"] .demo-sidebar__brand small,
[data-theme="dark"] .demo-section-desc,
[data-theme="dark"] .demo-swatch-meta,
[data-theme="dark"] .demo-spacing-label,
[data-theme="dark"] .demo-footer,
[data-theme="dark"] .demo-copy-button,
[data-theme="dark"] .demo-language-button {
  color: var(--k-color-neutral-300, #cbd5e1);
}
[data-theme="dark"] .demo-sidebar__link:hover,
[data-theme="dark"] .demo-sidebar__link.is-active,
[data-theme="dark"] .demo-language-button:hover,
#cards .demo-card-equal { width: 100%; min-height: 30rem; height: 100%; }
[data-theme="dark"] .demo-copy-button:hover {
  color: var(--k-color-primary-300, #93c5fd);
}
[data-theme="dark"] .demo-sidebar__link.is-active { background-color: var(--k-color-primary-900, #1e3a8a); }
[data-theme="dark"] .demo-sidebar__link:hover { background-color: var(--k-color-primary-900, #1e3a8a); }


/* Slightly stronger demo text contrast across all theme presets. */
.demo-body {
  color: var(--k-color-text-main, #1e293b);
}
.demo-body .k-text-muted,
.demo-body .demo-section-desc,
.demo-body .demo-swatch-meta,
.demo-body .demo-spacing-label,
.demo-body .demo-footer,
.demo-body .demo-sidebar__brand small,
.demo-body .demo-sidebar__group-title,
.demo-body .demo-sidebar__link,
.demo-body .demo-theme-select {
  color: var(--k-color-text-muted, #475569);
}
.demo-body .demo-sidebar__link:hover,
.demo-body .demo-sidebar__link.is-active,
.demo-body .demo-copy-button:hover,
.demo-body .demo-language-button:hover {
  color: var(--k-primary-hover, #1d4ed8);
}
[data-theme="ocean"] { --k-color-text-muted: #075985; }
[data-theme="forest"] { --k-color-text-muted: #166534; }
[data-theme="sunset"] { --k-color-text-muted: #9a3412; }

/* Stronger active navigation surface, tuned per theme preset. */
:root { --demo-sidebar-active-bg: #dbeafe; }
[data-theme="ocean"] { --demo-sidebar-active-bg: #a5f3fc; }
[data-theme="forest"] { --demo-sidebar-active-bg: #bbf7d0; }
[data-theme="sunset"] { --demo-sidebar-active-bg: #fed7aa; }
[data-theme="dark"] { --demo-sidebar-active-bg: #1e3a8a; }
.demo-body .demo-sidebar__link.is-active,
.demo-body .k-navbar__link:hover,
.demo-body .k-navbar__link.is-active,
.demo-body .k-navbar__item--has-children:hover > .k-navbar__link,
.demo-body .k-navbar__item--has-children.is-open > .k-navbar__link {
  background-color: var(--demo-sidebar-active-bg);
  color: var(--k-primary-hover, #1d4ed8);
}
.demo-body .demo-sidebar__link.is-active {
  font-weight: var(--k-weight-semibold, 600);
}

[data-theme="dark"] .demo-body .k-navbar__link:hover,
[data-theme="dark"] .demo-body .k-navbar__link.is-active,
[data-theme="dark"] .demo-body .k-navbar__item--has-children:hover > .k-navbar__link,
[data-theme="dark"] .demo-body .k-navbar__item--has-children.is-open > .k-navbar__link {
  color: #ffffff;
  background-color: var(--demo-sidebar-active-bg);
}




/* The showcase card is a static example: keep the card contract, disable lift on hover here. */
.demo-page .k-card--interactive:hover {
  transform: none;
  box-shadow: var(--k-shadow-sm);
}



/* Ultra-crisp typography & contrast for demo showcase */
.demo-body {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeLegibility;
  color: #0f172a;
}
.demo-body .k-text-muted {
  color: #334155 !important;
}

/* Cards showcase: equal-height cards with the Countries card body as the scroll region. */
#cards .demo-card-grid { align-items: stretch; }
#cards .demo-card-grid > [class*="k-col-"] { display: flex; }
#cards .demo-card-equal { width: 100%; min-height: 30rem; height: 100%; }
#cards .demo-card-countries { height: 30rem; max-height: 30rem; }
#cards .demo-card-countries .k-card__body { flex: 1 1 auto; min-height: 0; max-height: calc(30rem - 7rem); display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
#cards .demo-country-list { flex: 0 0 auto; border: 1px solid var(--k-color-border); border-radius: var(--k-radius-md); }
#cards .demo-card-countries .k-card__title { font-size: var(--k-size-base, 1rem); line-height: 1.3; }
#cards .demo-card-countries .k-card__body > .k-text-muted { font-size: var(--k-size-sm, .875rem); line-height: 1.45; }
#cards .demo-card-countries .k-card__header,
#cards .demo-card-countries .k-card__footer { font-size: var(--k-size-xs, .75rem); }
#cards .demo-country-row { display: grid; grid-template-columns: 2.5rem 4rem minmax(7rem, 1fr) 6.75rem; gap: var(--k-spacing-2); align-items: center; min-width: 22rem; padding: .375rem .5rem; border-bottom: 1px solid var(--k-color-border-subtle); font-size: var(--k-size-xs, .75rem); line-height: 1.35; }
#cards .demo-country-row--header { background: var(--k-color-surface-subtle); color: var(--k-color-text-muted); font-size: var(--k-size-xs, .75rem); font-weight: var(--k-weight-semibold); }
#cards .demo-country-row > span:nth-child(1),
#cards .demo-country-row > span:nth-child(2) { font-variant-numeric: tabular-nums; }
#cards .demo-country-row:last-child { border-bottom: 0; }

@media (max-width: 767px) {
  #cards .demo-card-equal { min-height: 0; height: auto; }
  #cards .demo-card-countries { height: auto; max-height: none; }
  #cards .demo-card-countries .k-card__body { max-height: 22rem; }
}

.demo-sidebar__link {
  color: #334155;
  font-weight: 500;
}
.demo-sidebar__brand small {
  color: #475569;
  font-weight: 600;
}

/* Chart examples use equal-height cards across the responsive grid. */
#charts .k-grid { align-items: stretch; }
#charts .k-grid > [class*="k-col-"] { display: flex; }
#charts .k-grid > [class*="k-col-"] > .k-card { width: 100%; min-height: 30rem; display: flex; flex-direction: column; }
#charts .k-grid > [class*="k-col-"] > .k-card > .k-chart { flex: 1 1 auto; min-height: 20rem; }
#charts .k-grid > [class*="k-col-"] > .k-card > .k-chart.k-chart--sm { --k-chart-height: 20rem; }

@media (max-width: 767px) {
  #charts .k-grid > [class*="k-col-"] > .k-card { min-height: 0; }
  #charts .k-grid > [class*="k-col-"] > .k-card > .k-chart,
  #charts .k-grid > [class*="k-col-"] > .k-card > .k-chart.k-chart--sm { min-height: 0; }
}
.demo-section-desc {
  color: #334155;
  font-weight: 450;
}
.demo-swatch-meta,
.demo-spacing-label,
.demo-footer {
  color: #334155;
}
.k-form-hint {
  color: #334155;
}

[data-theme="dark"] .demo-body {
  color: #f8fafc;
}
[data-theme="dark"] .demo-body .k-text-muted {
  color: #cbd5e1 !important;
}
[data-theme="dark"] .demo-sidebar__link,
[data-theme="dark"] .demo-sidebar__brand small,
[data-theme="dark"] .demo-section-desc,
[data-theme="dark"] .demo-swatch-meta,
[data-theme="dark"] .demo-spacing-label,
[data-theme="dark"] .demo-footer,
[data-theme="dark"] .k-form-hint {
  color: #cbd5e1;
}

/* Blue preset (default) uses slightly stronger text weights for readability. */
html:not([data-theme]) .demo-body { font-weight: 500; }
html:not([data-theme]) .demo-body .k-text-muted,
html:not([data-theme]) .demo-body .demo-section-desc,
html:not([data-theme]) .demo-body .demo-footer,
html:not([data-theme]) .demo-body .demo-sidebar__group-title,
html:not([data-theme]) .demo-body .demo-theme-select,
html:not([data-theme]) .demo-body .demo-navbar-lab__steps > div { font-weight: 500; }
html:not([data-theme]) .demo-body .demo-sidebar__link,
html:not([data-theme]) .demo-body .k-navbar__link { font-weight: 600; }