/* Apibesaz responsive system — v9
   Goals: mobile-first reflow, no accidental horizontal scrolling,
   comfortable touch targets, readable text at narrow widths, and
   graceful layout changes instead of desktop miniaturization. */

html { overflow-x: clip; }
body { overflow-x: clip; }

/* Every direct layout child is allowed to shrink inside grid/flex parents. */
main, header, footer, section, article, aside, form, fieldset, .card,
.builder-grid, .settings-layout, .settings-layout > *, .settings-panel, .settings-panel > *, .docs-layout, .contact-grid, .payment-shell,
stats-grid, .grid-2, .grid-3, .grid-4 { min-width: 0; }

/* Long user/API content must never create viewport overflow. */
h1, h2, h3, h4, p, a, label, td, th, li, .ticket-title-line,
.builder-step strong, .feature-desc, .b-name, .b-desc, .page-title,
.docs-content, .legal-container { overflow-wrap: anywhere; word-break: normal; }

/* Safe media defaults. */
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
iframe { max-width: 100%; border: 0; }

/* Tables: preserve semantics, permit intentional local horizontal scrolling only. */
.table-wrap, .docs-table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.table-wrap > table, .docs-table-wrap > table { width: 100%; }

/* Header: collapse before it gets crowded rather than wrapping the primary chrome. */
@media (max-width: 1160px) {
  .nav-inner { gap: .8rem; }
  .nav-right { gap: .35rem; }
  .balance-chip { font-size: .74rem; }
}

@media (max-width: 1020px) {
  .navbar { position: sticky; }
  .nav-inner { grid-template-columns: minmax(0,1fr) auto; }
  .nav-logo { min-width: 0; }
  .nav-right { grid-column: 1 / -1; grid-row: 3; width: 100%; min-width: 0; }
  .nav-links { grid-column: 1 / -1; grid-row: 2; width: 100%; justify-self: stretch; }
  .nav-links.open { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .35rem; }
  .nav-links a { width: 100%; justify-content: flex-start; }
}

@media (max-width: 760px) {
  .nav-inner { padding: .65rem .85rem; }
  .nav-logo { font-size: 1.05rem; }
  .nav-logo .logo-icon { width: 32px; height: 32px; }
  .nav-menu-toggle { display: flex; }
  .nav-right { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); align-items: stretch; }
  .nav-right > * { min-width: 0; width: 100%; }
  .balance-chip, .nav-account, .nav-signout { justify-content: center; }
  .nav-account span { display: inline; }
  .nav-links.open { grid-template-columns: 1fr; }
  .nav-links a { justify-content: flex-start; }
}

@media (max-width: 520px) {
  .nav-inner { padding-inline: .7rem; }
  .nav-right { grid-template-columns: 1fr 1fr; }
  .nav-account span { display: none; }
  .nav-signout { font-size: .72rem; }
}

/* Global typography and controls: scale with viewport without becoming tiny. */
@media (max-width: 760px) {
  .container, .container-wide, .page-shell { max-width: 100%; }
  .section { padding-block: 3rem; }
  .section-head { margin-bottom: 2rem; }
  .section-head p { font-size: .95rem; }
  .btn { max-width: 100%; }
  .form-grid-2 { grid-template-columns: 1fr !important; }
  .modal-overlay, .ticket-modal-backdrop { padding: .7rem; }
  .modal-box, .ticket-modal { width: 100%; max-height: calc(100dvh - 1.4rem); }
}

@media (max-width: 480px) {
  .container, .container-wide, .page-shell { padding-inline: .75rem; }
  .card { padding: .95rem; }
  .card-head .btn { margin-left: 0; }
  .card-head { flex-wrap: wrap; }
  .card-head .card-sub { flex-basis: 100%; }
  .modal-actions, .ticket-modal-actions, .ticket-create-actions { align-items: stretch; }
  .modal-actions .btn, .ticket-modal-actions .btn, .ticket-create-actions .btn { width: 100%; }
}

/* HOME */
@media (max-width: 760px) {
  .hero { padding: 3.4rem .85rem 2.2rem; }
  .hero-cta { display: grid; grid-template-columns: 1fr; gap: .6rem; }
  .hero-cta .btn { width: 100%; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .hero-stats { grid-template-columns: 1fr; gap: .55rem; }
}

/* PRICING */
@media (max-width: 760px) {
  .pricing-hero { padding: 3rem .75rem 1.5rem; }
  .bundle-grid { grid-template-columns: 1fr; padding-inline: .75rem; margin-top: 1.6rem; }
  .bundle.popular::before { top: -9px; font-size: .56rem; }
  .includes { padding-inline: .75rem; }
  .pricing-cta { padding-inline: .75rem; }
  .token-explainer { padding: 1rem; align-items: flex-start; }
}

/* AUTH */
@media (max-width: 520px) {
  body.auth-page { align-items: flex-start; }
  .auth-wrap { min-height: 100dvh; justify-content: center; padding: 1rem .7rem; }
  .auth-card { padding: 1rem; }
  .auth-tabs { margin-bottom: 1.2rem; }
  .auth-form .btn-lg { min-height: 48px; }
  .toggle-pass { min-width: 44px; min-height: 44px; right: .2rem; }
  .mfa-input { letter-spacing: .28em; }
}

/* DASHBOARD */
@media (max-width: 760px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .dash-head { flex-direction: column; align-items: stretch; gap: .8rem; }
  .dash-head-actions { width: 100%; justify-content: stretch; }
  .dash-head .btn { width: 100%; }
  .qa-list { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .tx-table { min-width: 520px; }
}

/* DOCUMENTATION */
@media (max-width: 820px) {
  .docs-layout { padding: 1.5rem .8rem 3rem; gap: 1rem; }
  .docs-nav { position: static; max-height: none; }
  .docs-nav, .docs-nav ul { min-width: 0; }
  .docs-nav { overflow-x: auto; overscroll-behavior-x: contain; }
  .docs-nav ul { display: flex; gap: .35rem; white-space: nowrap; }
  .docs-nav a { flex: 0 0 auto; }
}
@media (max-width: 560px) {
  .docs-layout { padding-inline: .7rem; }
  .docs-table td:first-child { white-space: normal; word-break: break-word; }
  .feature-list { grid-template-columns: 1fr; }
}

/* BUILDER — the highest-density screen gets deliberate breakpoint transitions. */
@media (max-width: 1100px) {
  .builder-grid { grid-template-columns: minmax(0,1fr) 300px; gap: 1rem; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .db-selector { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .builder-hero { flex-direction: column; align-items: stretch; gap: 1rem; }
  .builder-hero-actions { justify-content: flex-start; }
  .builder-grid { grid-template-columns: 1fr; }
  .cost-sidebar { position: static !important; order: -1; }
  .builder-steps { top: 64px; overflow-x: auto; grid-template-columns: repeat(4, minmax(175px,1fr)); }
  .builder-step { min-width: 0; }
}
@media (max-width: 640px) {
  .builder-page { padding-top: .8rem; }
  .builder-hero { padding: .7rem 0 0; }
  .builder-hero h1 { font-size: clamp(1.7rem, 9vw, 2.35rem); }
  .builder-hero .sub { font-size: .9rem; }
  .builder-hero-actions { display: grid; grid-template-columns: 1fr; }
  .builder-hero-actions > * { width: 100%; }
  .builder-steps { top: 60px; margin-inline: -.75rem; padding-inline: .75rem; grid-template-columns: repeat(4, minmax(160px,1fr)); }
  .builder-step { min-height: 50px; }
  .builder-step small { display: none; }
  .feature-grid { grid-template-columns: 1fr; }
  .db-option { min-height: 68px; }
  .entity-header, .entity-actions, .endpoint-row, .field-row { min-width: 0; }
  .endpoint-row, .field-row { grid-template-columns: 1fr !important; }
  .endpoint-row .btn, .field-row .btn { width: 100%; }
  .selected-features { max-width: 100%; overflow-x: auto; }
  .cost-line { gap: .5rem; }
  .cost-line span:last-child { text-align: right; }
  .json-view { min-height: 220px; max-height: 45vh; font-size: .7rem; }
}
@media (max-width: 420px) {
  .builder-steps { grid-template-columns: repeat(4, minmax(145px,1fr)); }
  .builder-step { padding: .55rem; }
  .builder-step span { width: 25px; height: 25px; }
  .feature-card { min-height: 0; }
}

/* CONTACT */
@media (max-width: 820px) {
  .contact-grid { grid-template-columns: 1fr !important; }
  .info-stack { order: 2; }
  .form-card { order: 1; }
}
@media (max-width: 520px) {
  .contact-hero { text-align: left; }
  .form-card, .info-card { padding: 1rem; }
}

/* PAYMENT */
@media (max-width: 820px) {
  .pay-hero { text-align: left; }
  .payment-shell .bundle-grid { grid-template-columns: 1fr; }
  .pay-summary { width: 100%; }
}

/* SETTINGS */
@media (max-width: 800px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav { position: static !important; width: 100%; overflow-x: auto; display: flex; gap: .4rem; padding-bottom: .35rem; }
  .settings-nav button { flex: 0 0 auto; white-space: nowrap; }
}
@media (max-width: 520px) {
  .pw-grid { grid-template-columns: 1fr !important; }
  .recovery-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .panel-title { align-items: flex-start; }
}

/* TICKETS */
@media (max-width: 900px) {
  .ticket-hero { align-items: stretch; flex-direction: column; }
  .ticket-open { width: 100%; }
}
@media (max-width: 640px) {
  .ticket-page { padding: 1rem .7rem 3rem; }
  .ticket-hero { padding: 1rem; }
  .ticket-toolbar { margin-inline: 0; }
  .ticket-tabs { width: max-content; }
  .ticket-panel-head { padding: .9rem; }
  .ticket-row { padding: .9rem; }
  .ticket-view { width: 100%; }
  .ticket-modal-top { flex-wrap: wrap; padding-right: 2rem; }
  .ticket-message { font-size: .78rem; }
}

/* LEGAL / 404 */
@media (max-width: 640px) {
  .legal-container { padding-inline: .75rem; }
  .legal-toc { position: static !important; }
  .legal-header { padding-top: 1.5rem; }
  .nf-wrap { min-height: 65vh; padding: 2rem .75rem; }
  .nf-actions { display: grid; grid-template-columns: 1fr; }
  .nf-actions .btn { width: 100%; }
}

/* Footer becomes a compact, readable information architecture on phones. */
@media (max-width: 760px) {
  .footer { padding: 2.6rem .9rem 1.7rem; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .footer-inner { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
}

/* Respect larger text settings: don't use negative hacks that break zoom/reflow. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* Final containment + breathing-room pass. */
*, *::before, *::after { max-width: 100%; }
main { width: 100%; min-width: 0; }
section, article, aside, form, fieldset, .card, .panel, .form-card, .info-card, .ticket-panel, .ticket-modal, .builder-panel { min-width: 0; }

.form-group, .field-group, .form-field, .input-group, .field-row > *, .endpoint-row > * { min-width: 0; }
.form-group input, .form-group select, .form-group textarea, .field-group input, .field-group select, .field-group textarea, .form-field input, .form-field select, .form-field textarea { box-sizing: border-box; }

@media (max-width: 760px) {
  .page-title, .section-head, .dash-head, .builder-hero, .ticket-hero, .payment-hero, .pricing-hero { margin-bottom: 1.5rem; }
  .section { padding-block: 3.5rem; }
  .section + .section { padding-top: 1rem; }
  .form-group, .field-group, .form-field { margin-bottom: 1.15rem; }
  .card-head { margin-bottom: 1.1rem; }
  .nav-inner { row-gap: .65rem; }
}
@media (max-width: 480px) {
  .section { padding-block: 2.75rem; }
  .section-head { margin-bottom: 1.25rem; }
  .hero, .pricing-hero, .contact-hero, .pay-hero { padding-inline: 1rem; }
  .builder-page, .ticket-page { padding-inline: .85rem; }
  .form-grid, .form-grid-2, .grid-2, .grid-3, .grid-4 { gap: .9rem; }
  .btn, .btn-lg { width: 100%; }
}