/**
 * NeuroNano typography system
 * Display (accent): Caveat italic – brand, titles, decorative labels
 * Body (readable): Nunito – buttons, tips, forms, nav, descriptions
 * Arabic UI: Noto Sans Arabic
 *
 * Canon: .cursor/agents/ui-typography-designer.md
 *
 * Caveat italic + background-clip:text need extra inline-end padding
 * and overflow:visible so glyph overhang is not clipped on the right.
 */
/* !important: page inline :root must not re-poison body to Caveat */
:root {
  --font-display: "Caveat", "Nunito", cursive, system-ui, sans-serif !important;
  --font-body: "Nunito", "Noto Sans Arabic", system-ui, sans-serif !important;
  --nnb-display-pad-inline-end: 0.32em;
  --nnb-display-pad-inline-start: 0.1em;
  --nnb-display-line-height: 1.35;
}

html {
  font-size: 16px;
}

body {
  font-family: var(--font-body) !important;
  letter-spacing: -0.011em;
  line-height: 1.55;
  font-weight: 600;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select,
html[lang="ar"] .cabinet-nav-label,
html[lang="ar"] .cabinet-nav-tip,
html[lang="ar"] .cabinet-nav-tip-body {
  font-family: "Noto Sans Arabic", "Nunito", system-ui, sans-serif !important;
  letter-spacing: 0;
  line-height: 1.65;
  font-style: normal;
  font-weight: 600;
}

/* Main UI – straight, readable */
button,
.btn,
.btn-gen,
.btn-primary,
.btn-secondary,
.nnb-ob-btn,
.nnb-ob-chip,
input,
textarea,
select,
label,
p,
a,
li,
td,
th,
.cabinet-nav-label,
.cabinet-nav-tip,
.cabinet-nav-tip-body,
.cabinet-sidebar-messenger-plat,
.card-desc,
.agent-card-desc,
.agent-card-role,
.hint,
.tip,
.muted,
.subtitle,
.desc,
.description,
.music-panel-desc,
.music-cost-line,
.music-result-hint,
.music-presets-hint,
.chat-hero-empty__hint {
  font-family: var(--font-body) !important;
  font-style: normal !important;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-shadow: none;
  -webkit-font-smoothing: antialiased;
}

.cabinet-nav-label {
  font-size: 0.95rem;
  font-weight: 800;
}

.cabinet-nav-tip,
.cabinet-nav-tip-body {
  font-size: 0.92rem !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
}

.cabinet-sidebar-messenger-plat {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
}

/* Decorative accent – oblique script only here */
.logo-name,
.cabinet-sidebar-brand,
.cabinet-sidebar-section-label,
.cabinet-sidebar-messenger-brand,
.nnb-hub-title,
.card-title,
.music-section-label,
.page-title,
.agent-hero-name,
.agent-card-name,
.sum-hero-name,
.pod-card h2,
.install-app-title,
.brand,
h1.brand,
.nnb-ob-q,
.chat-hero-empty__title,
#panel-chat .chat-hero-empty__title,
h1,
h2 {
  font-family: var(--font-display) !important;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: var(--nnb-display-line-height) !important;
  overflow: visible !important;
  text-overflow: clip;
  white-space: normal;
  padding-inline-start: var(--nnb-display-pad-inline-start);
  padding-inline-end: var(--nnb-display-pad-inline-end);
  padding-bottom: 0.12em;
  -webkit-font-smoothing: auto;
  /* Kill gold background-clip on display/body that clips italic glyphs */
  background-image: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.cabinet-sidebar-section-label {
  font-size: 1.18rem;
  opacity: 0.95;
}

.cabinet-sidebar-messenger-brand {
  font-size: 1.4rem !important;
  line-height: 1.35 !important;
  overflow: visible !important;
  padding-inline-end: 0.28em;
}

.card-title {
  font-size: clamp(1.4rem, 2.5vw, 1.8rem) !important;
  line-height: var(--nnb-display-line-height) !important;
  overflow: visible !important;
  padding-inline-end: var(--nnb-display-pad-inline-end) !important;
}

.music-section-label {
  font-size: 1.22rem !important;
  overflow: visible !important;
  line-height: var(--nnb-display-line-height) !important;
  padding-inline-end: var(--nnb-display-pad-inline-end);
}

.nnb-hub-title {
  font-size: clamp(2rem, 5vw, 2.85rem) !important;
  line-height: 1.35 !important;
  overflow: visible !important;
  padding-inline-end: 0.28em;
}

/* Caveat empty-chat hero – italic last glyph must not clip */
.chat-hero-empty__title,
#panel-chat .chat-hero-empty__title {
  line-height: 1.4 !important;
  padding-inline-start: 0.12em !important;
  padding-inline-end: 0.42em !important;
  padding-bottom: 0.28em !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  max-width: none;
}

#panel-chat .chat-hero-empty {
  overflow: visible !important;
}

/* Body descriptions – wrap freely, never mid-word clip via overflow/ellipsis */
.card-desc,
.agent-card-desc,
.music-panel-desc,
.music-cost-line,
.music-result-hint,
.music-presets-hint,
.chat-hero-empty__hint,
.hint,
.tip,
.muted,
.subtitle,
.desc,
.description,
.gen-mode-hint,
.gen-mode-caption {
  overflow: visible !important;
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal !important;
  text-overflow: clip !important;
  max-height: none !important;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  line-height: 1.55;
  padding-inline-end: 0.12em;
}

.music-panel-desc {
  line-height: 1.55 !important;
  overflow: visible !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  background-image: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--muted, #a8c4b8) !important;
}

.chat-hero-empty__title,
#panel-chat .chat-hero-empty__title {
  display: inline-block !important;
  max-width: calc(100% - 0.5rem) !important;
  background-image: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: #e8c56a !important;
}

.card-title {
  background-image: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: #e8c56a !important;
}

code,
pre,
.mono,
.inline-code,
kbd,
samp {
  font-family: ui-monospace, "Cascadia Code", "JetBrains Mono", monospace !important;
  font-style: normal !important;
  font-weight: 500 !important;
  letter-spacing: 0;
  text-shadow: none;
}