/* Shared readable type scale. Reference hierarchy retained; supporting text
   and controls enlarged after the usability review. Use rem for user zoom. */
:root {
  --text-body: 1.0625rem;
  --text-small: .9375rem;
  --text-micro: .875rem;
  --text-nav: 1rem;
  --text-workspace-nav: 1rem;
  --text-control: 1rem;
  --text-button: 1rem;
  --text-card-title: 1.125rem;
  --text-card-heading: 1.25rem;
  --text-public-card-heading: 1.3rem;
  --text-page-title: clamp(1.625rem, 2.5vw, 2rem);
  --text-section-title: 1.375rem;
  --text-public-title: clamp(1.7rem, 3.4vw, 2.5rem);
  --text-hero: clamp(2rem, 5.2vw, 3.9rem);
  --text-lead: clamp(1rem, 2vw, 1.18rem);
  --text-editor: 1.0625rem;
  --text-hero-editor: 1.0625rem;
  --leading-body: 1.65;
  --leading-lead: 1.625;
}

body {
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

h1 {
  font-size: var(--text-page-title);
  line-height: 2rem;
}

h2 {
  font-size: var(--text-section-title);
  line-height: 1.75rem;
}

h3,
.panel h2,
.card h2 {
  font-size: var(--text-card-heading);
  line-height: 1.5;
}

h4,
label,
summary {
  font-size: var(--text-control);
}

small,
input[type=file],
legend {
  font-size: var(--text-small);
}

input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),
select {
  font-size: var(--text-control);
}

textarea {
  font-size: var(--text-editor);
  line-height: var(--leading-body);
}

.button,
button:not(.icon-button):not(.mobile-menu):not([data-dismiss]) {
  font-size: var(--text-button);
  overflow-wrap: normal;
}

.button.small,
.small {
  font-size: var(--text-small);
}

.eyebrow,
.badge,
.tiny-tag,
.project-footer .badge {
  font-size: var(--text-micro);
}

.eyebrow {
  line-height: 1.5;
}

.notice,
.flash,
.toast {
  font-size: var(--text-small);
}

th {
  font-size: var(--text-micro);
}

td,
pre,
.code-block,
.tabs a,
.tabs button,
.checkbox-label,
.checkbox-row,
.checklist li,
.progress-list li,
.link-list a,
.site-nav a,
.module-feature-list a,
.subtle-link {
  font-size: var(--text-small);
}

.progress-list li:before,
.divider,
.kbd,
.notification-count {
  font-size: var(--text-micro);
}

.page-heading h1,
.empty h1 {
  font-size: var(--text-page-title);
  line-height: 2rem;
}

.page-heading p,
.stat p,
.stat .row,
.section-heading a,
.welcome-date {
  font-size: var(--text-small);
}

.section-heading h2,
.empty h2,
.markdown-output h2 {
  font-size: var(--text-section-title);
  line-height: 1.75rem;
}

.markdown-output h3 {
  font-size: var(--text-card-heading);
}

.stat .delta,
.chat-message .message-role {
  font-size: var(--text-micro);
}

.brand small,
.public-header .brand small {
  font-size: var(--text-micro);
  line-height: 1.5;
}

.sidebar-label,
.quota-card .row,
.quota-card small,
.quota-card>a,
.sidebar-profile small {
  font-size: var(--text-micro);
  line-height: 1.5;
}

.nav-item {
  font-size: var(--text-workspace-nav);
  line-height: 1.5;
}

.sidebar {
  overflow-y: auto;
}

.sidebar-profile strong {
  font-size: var(--text-small);
}

.workspace-header,
.language-button,
.language-picker,
.language-picker summary,
.language-picker nav a {
  font-size: var(--text-nav);
}

.language-picker,
.header-actions,
.mobile-menu {
  flex-shrink: 0;
}

.language-picker summary {
  white-space: nowrap;
}

.help-link {
  font-size: var(--text-micro);
}

.demo-strip,
.demo-strip a,
.public-body .demo-strip {
  font-size: var(--text-micro);
}

.dashboard-hero h2 {
  font-size: var(--text-page-title);
  line-height: 2rem;
}

.dashboard-hero p {
  font-size: var(--text-small);
}

.quick-card strong,
.project-info h3,
.new-project-card strong,
.inspiration-card h3,
.list-card h3,
.help-grid h3 {
  font-size: var(--text-card-title);
  line-height: 1.5;
}

.quick-card small,
.project-info .meta,
.project-footer,
.new-project-card small,
.inspiration-card p,
.inspiration-card>a,
.list-card p,
.help-grid p {
  font-size: var(--text-small);
}

.public-nav {
  font-size: var(--text-nav);
}

.public-header>.row .button {
  font-size: var(--text-button);
}

.hero-kicker,
.hero-hints,
.hero-search-note,
.prompt-tags a,
.hero-proof {
  font-size: var(--text-small);
}

.public-hero h1,
.public-hero .public-idea-title {
  font-size: var(--text-hero);
  line-height: 1.15;
}

.public-hero>div>p,
.public-lead,
.public-article-lead {
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.public-hero>div>p.hero-search-note {
  font-size: var(--text-small);
  line-height: var(--leading-body);
}

.hero-input textarea {
  font-size: var(--text-hero-editor);
  line-height: var(--leading-body);
}

.hero-input button {
  flex-shrink: 0;
  white-space: nowrap;
}

.public-body .section-intro h1,
.public-body .section-intro h2,
.public-body .catalog-header h1,
.public-section>.grid-2>div>h2,
.public-body .prose h1,
.public-body .catalog-layout>.grid-2>div>h1 {
  font-size: var(--text-public-title);
  line-height: 1.34;
}

.public-body .section-intro h2,
.public-section>.grid-2>div>h2 {
  line-height: 1.18;
}

.section-intro p,
.catalog-header p,
.public-section .card p {
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.public-section .card h3 {
  font-size: var(--text-public-card-heading);
  line-height: 1.35;
}

.category-card strong,
.template-card h3,
.template-card .public-article-title {
  font-size: var(--text-card-title);
  line-height: 1.5;
}

.category-card small,
.template-card p,
.template-card>small,
.catalog-filters a,
.public-credit-note,
.public-project-description {
  font-size: var(--text-small);
}

.public-body .prose,
.markdown-output {
  line-height: var(--leading-body);
}

.public-body .prose h2 {
  font-size: var(--text-card-heading);
  line-height: 1.5;
}

.docs-sidebar a {
  font-size: var(--text-nav);
}

.docs-sidebar h3 {
  font-size: var(--text-micro);
  line-height: 1.5;
}

.pricing-card h3 {
  font-size: var(--text-card-heading);
}

.pricing-card .price small,
.pricing-card ul {
  font-size: var(--text-small);
}

.pricing-card .badge {
  font-size: var(--text-micro);
}

.public-footer p,
.public-footer nav {
  font-size: var(--text-small);
  line-height: var(--leading-body);
}

.public-footer small,
.public-footer nav strong,
.footer-bottom {
  font-size: var(--text-micro);
}

.auth-layout h1 {
  font-size: var(--text-page-title);
  line-height: 2rem;
}

.auth-layout p {
  font-size: var(--text-body);
}

.auth-layout .row {
  font-size: var(--text-small);
}

@media (min-width: 721px) {
  .sidebar {
    width: 260px;
    padding-inline: 16px;
  }

  .workspace-frame {
    margin-left: 260px;
  }
}

@media (max-width: 1100px) {
  .quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  :root {
    --text-hero-editor: 1rem;
  }

  input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),
  textarea,
  select,
  .hero-input textarea {
    font-size: 1rem;
  }

  .public-header {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    height: auto;
    min-height: 73px;
    padding: 14px 18px;
    gap: 12px;
  }

  .public-header .brand small {
    display: none;
  }

  .public-header > .row {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    justify-content: space-between;
  }

  .public-header > .row .button {
    white-space: nowrap;
  }

  .public-header > .mobile-menu {
    grid-column: 2;
    grid-row: 1;
  }

  .public-header .language-picker nav {
    inset-inline-start: 0;
    inset-inline-end: auto;
  }

  .menu-open .public-header .public-nav {
    top: 100%;
  }

  .quick-card {
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .quick-card > div {
    width: 100%;
    min-width: 0;
    overflow-wrap: normal;
  }

  .quick-card > .arrow {
    position: absolute;
    inset-inline-end: 14px;
    top: 18px;
  }

  .workspace-header > .row:first-child {
    flex: 1;
    min-width: 0;
  }

  .workspace-header > .row:first-child > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .page-heading {
    flex-wrap: wrap;
  }

  .page-heading > div {
    min-width: 0;
  }

  .page-heading > .button {
    white-space: nowrap;
  }
}