/* APIMarket responsive hardening layer.
   Keep this file small and loaded after app.css so shared fixes apply to every
   public, account, admin and developer page without having to duplicate inline
   page styles. */

/* A grid/flex child with a long API name, URL, email address or seller-authored
   string must be allowed to shrink before the browser expands the page. */
body { overflow-x: hidden; }

main, .container, .nav-inner, .footer-inner, .card, .panel, .api-card,
.layout-2, .ac-grid, .flex, .endpoint, .table-wrap, details, form {
  min-width: 0;
  max-width: 100%;
}
.flex > *, .layout-2 > *, .ac-grid > *, .api-card-top > *, .endpoint > * {
  min-width: 0;
}

h1, h2, h3, h4, p, li, dt, dd, td, th, label, summary, a {
  overflow-wrap: break-word;
}
h1, h2, h3, h4 { word-break: break-word; }
.card, .panel, .alert, .empty { overflow-wrap: anywhere; }
img, svg, video, canvas, iframe { max-width: 100%; }
input, select, textarea, button { max-width: 100%; }

/* Inline code and generated URLs are the most common source of phone overflow.
   Preserve fenced/preformatted blocks, but let ordinary code wrap. */
code:not(pre code), .copyable, .path, .endpoint .meth,
.dev-response-meta, .dev-fact b {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
code:not(pre code) { white-space: normal; }
pre, pre.codeblock, .codeblock, .console-out, .dev-response-output,
.dev-code-output, .dev-ai-reply {
  max-width: 100%;
  box-sizing: border-box;
}

.btn { max-width: 100%; overflow-wrap: anywhere; }
.chart-bar .tip { max-width: min(220px, calc(100vw - 32px)); white-space: normal; overflow-wrap: anywhere; text-align: center; }
.badge, .chip { max-width: 100%; overflow-wrap: anywhere; }
.endpoint .meth { flex: 0 1 auto; }
.endpoint .path { flex: 1 1 120px; }

.table-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.table-wrap table { max-width: none; }

/* Definition-list rows are used by checkout pages. On a narrow screen, stacking
   the label and value is clearer than allowing a long plan name to push the value
   out of the card. */
.dl-row { min-width: 0; gap: 10px; }
.dl-row dt, .dl-row dd { min-width: 0; overflow-wrap: anywhere; }
.dl-row dd { margin-left: auto; text-align: right; }

/* Long notification/support text must remain inside its panel. */
.nd-item, .nd-item > span, .ac-user, .ac-user .grow,
.cp-row, .cp-bubble, .dev-note, .dev-ai-result-card {
  min-width: 0;
  overflow-wrap: anywhere;
}
.ac-user .small { overflow-wrap: anywhere; }

.nav-inner { overflow: visible; }
.nav-links, .nav-right, .nav-user { min-width: 0; }
.nav-drop-panel {
  width: min(330px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
}
.console-quick #conMaskedUrl { flex: 1 1 auto; }

/* Admin plan actions used absolute popovers inside a horizontally scrolling table.
   That combination is clipped on mobile (and on some desktop browsers). Keep the
   form in normal table flow so tapping Set price / Reject always reveals it. */
.plan-price-form, .plan-reject-form {
  margin-top: 6px;
  padding: 10px;
  width: 230px;
  max-width: calc(100vw - 40px);
  box-sizing: border-box;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.plan-reject-form { width: 240px; }
.plan-price-form .input, .plan-reject-form .input { width: 100%; }
.field-label-row { display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.field-label-row .f { flex:1 1 220px; margin-bottom:6px; }
.field-save-btn { flex:0 0 auto; }

/* Small screens: all inline auto-fit/auto-fill grids collapse before their
   minimum track can become wider than the viewport. */
@media (max-width: 700px) {
  .container { padding-left: 14px; padding-right: 14px; }
  .hero { padding-top: 44px; padding-bottom: 38px; }
  .flex { flex-wrap: wrap; }
  .flex > [style*="min-width:220px"], .flex > [style*="min-width:200px"],
  .flex > [style*="min-width:180px"], .flex > [style*="min-width:160px"] {
    min-width: 0 !important;
  }
  .draft-banner .grow { min-width: 0; }
  .btn { white-space: normal; text-align: center; }
  .card, .panel { padding: 16px; }
  .auth-card { padding: 22px 18px; }

  .api-grid, .plans-grid, .stat-grid, .steps-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  main [style*="grid-template-columns:repeat"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  main [style*="grid-template-columns:"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Search/sort controls in Browse APIs must wrap as a unit. */
  .section-head > .flex {
    flex: 1 1 100%;
    max-width: 100%;
    flex-wrap: wrap;
  }
  .section-head > .flex form {
    flex: 1 1 170px;
    max-width: 100%;
    min-width: 0;
  }
  .section-head > .flex form .input { width: 100% !important; min-width: 0; }
  .section-head > .flex select.input { flex: 0 1 auto; max-width: 100%; }
  main input[style*="width:260px"], main input[style*="width:220px"],
  main input[style*="width:200px"], main input[style*="width:170px"] {
    width: 100% !important;
    max-width: 100%;
  }

  .searchbar { width: 100%; }
  .searchbar input { min-width: 0; }
  .api-card-top { align-items: flex-start; }
  .api-card-top > :last-child { min-width: 0; }
  .api-card h3, .api-card h3 a { overflow-wrap: anywhere; }
  .api-card .foot { flex-wrap: wrap; gap: 8px; }
  .api-card .foot > * { min-width: 0; }

  .dl-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .dl-row dd { margin-left: 0; text-align: left; }

  .console-quick #conMaskedUrl { flex: 1 1 100%; }
  .console-body > .flex { flex-wrap: wrap; }
  .console-body > .flex > code { flex: 1 1 100%; white-space: normal !important; }
  .console-body > .flex > .input { flex: 1 1 100%; }
  .ep-pick, #selftest .btn { white-space: normal; text-align: left; }

  /* Inline form columns in the seller editor contain several 200–300px
     minimums. Let them become full-width fields on phones. */
  main [style*="min-width:520px"], main [style*="min-width:420px"],
  main [style*="min-width:390px"], main [style*="min-width:340px"],
  main [style*="min-width:300px"], main [style*="min-width:280px"],
  main [style*="min-width:260px"], main [style*="min-width:240px"],
  main [style*="min-width:230px"], main [style*="min-width:220px"],
  main [style*="min-width:200px"], main [style*="min-width:180px"],
  main [style*="min-width:160px"], main [style*="min-width:150px"],
  main [style*="min-width:140px"], main [style*="min-width:120px"] {
    min-width: 0 !important;
  }

  /* Fixed-width action popovers must fit even on 240px-wide devices. */
  main [style*="position:absolute"][style*="min-width:300px"],
  main [style*="position:absolute"][style*="width:300px"],
  main [style*="position:absolute"][style*="width:280px"],
  main [style*="position:absolute"][style*="width:240px"],
  main [style*="position:absolute"][style*="width:230px"] {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
  }

  .footer-inner { align-items: flex-start; }
  .footer-inner > * { min-width: min(100%, 180px); }
}

@media (max-width: 420px) {
  .container { padding-left: 12px; padding-right: 12px; }
  .nav-inner { gap: 7px; }
  .brand { font-size: 17px; gap: 6px; min-width: 0; }
  .brand > span:last-child { max-width: calc(100vw - 178px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .brand .logo-dot { width: 25px; height: 25px; }
  .nav-right { gap: 4px; }
  .icon-btn { width: 34px; height: 34px; }
  .btn { padding-left: 11px; padding-right: 11px; }
  .btn-lg { padding-left: 14px; padding-right: 14px; }
  .section-head h2 { font-size: 19px; }
  .stat .v { font-size: 21px; }
  .tabs a { padding-left: 11px; padding-right: 11px; }
  .table-wrap { margin-left: -2px; margin-right: -2px; width: calc(100% + 4px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Branded API sharing card. */
.share-embed-heading, .share-embed-title, .share-brand-bar, .share-brand-lockup,
.share-badge-row, .share-actions { display:flex; align-items:center; }
.share-embed-heading { justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.share-embed-title { gap:10px; min-width:0; }
.share-embed-icon { width:34px; height:34px; display:inline-grid; place-items:center; flex:0 0 auto; border-radius:10px; color:#fff; background:linear-gradient(135deg,#de5320,#ff7048); box-shadow:0 5px 14px rgba(222,83,32,.22); }
.share-brand-preview { overflow:hidden; border:1px solid #26354a; border-radius:14px; background:#101a2d; color:#fff; box-shadow:0 10px 26px rgba(15,23,42,.16); }
.share-brand-bar { justify-content:space-between; gap:12px; padding:12px 15px; background:linear-gradient(100deg,#0c1424,#17243b); border-bottom:1px solid rgba(255,255,255,.10); }
.share-brand-lockup { gap:9px; min-width:0; }
.share-brand-lockup img { width:29px; height:29px; flex:0 0 auto; border-radius:8px; object-fit:cover; background:#fff; }
.share-brand-lockup span { font-weight:750; letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.share-live-pill { flex:0 0 auto; padding:4px 8px; border-radius:99px; color:#a7f3d0; background:rgba(16,185,129,.14); border:1px solid rgba(110,231,183,.30); font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; }
.share-brand-body { padding:18px 18px 16px; background:radial-gradient(circle at 100% 0,rgba(222,83,32,.22),transparent 38%),#142139; }
.share-api-kicker { color:#a9b9cf; font:700 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.12em; text-transform:uppercase; }
.share-api-title { margin-top:7px; color:#fff; font-size:clamp(20px,3vw,28px); font-weight:800; line-height:1.15; overflow-wrap:anywhere; }
.share-api-tagline { margin-top:7px; color:#c5d1e1; font-size:13px; line-height:1.5; max-width:680px; }
.share-api-link { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:15px; color:#93c5fd; font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; }
.share-api-link span { overflow-wrap:anywhere; }
.share-api-link a { color:#fff; font:650 12px/1.4 inherit; text-decoration:none; white-space:nowrap; }
.share-api-link a:hover { text-decoration:underline; }
.share-badge-row { justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:14px; padding:12px 14px; border:1px solid var(--border-soft); border-radius:11px; background:var(--card2); }
.share-badge-row img { max-width:min(100%,420px); }
.share-code-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px; }
.share-code-item { min-width:0; }
.share-code-item .f { margin-bottom:6px; }
.share-code-item textarea { width:100%; box-sizing:border-box; resize:vertical; font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; }
.share-actions { gap:8px; flex-wrap:wrap; margin-top:12px; }
.share-actions .small { flex:1 1 260px; }

@media (max-width: 760px) {
  .share-code-grid { grid-template-columns:minmax(0,1fr); }
  .share-brand-bar { padding:10px 12px; }
  .share-brand-body { padding:15px; }
  .share-api-link { display:block; }
  .share-api-link a { display:inline-block; margin-top:7px; }
  .share-badge-row { align-items:flex-start; }
}

@media (max-width: 560px) {
  .share-embed-heading .badge { width:100%; justify-content:center; }
  .share-brand-lockup span { font-size:13px; }
}

/* The review decision must never sit underneath the tall tester card. Keep the
   decision/checklist first and make the tester a normal-flow card. */
#review-right-column { display:flex; flex-direction:column; min-width:0; }
#review-decision-card { order:1; position:relative; z-index:2; }
#review-test-card { order:2; position:relative !important; top:auto !important; z-index:1; }

/* Refund forms must remain usable inside the orders table on phones. The old
   absolute panel was clipped by .table-wrap; normal-flow details expand the
   table row instead. */
.refund-details { position:relative; }
.refund-details summary { white-space:normal; }
.refund-form {
  width:min(300px, calc(100vw - 48px));
  max-width:100%;
  margin-top:8px;
  padding:10px;
  box-sizing:border-box;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:10px;
}
.refund-form form { width:100%; }
.refund-form .input { width:100%; box-sizing:border-box; }

/* Seller API studio: keep the launch checklist readable while the preview stays
   visible beside it on desktop and stacks cleanly on phones. */
@media (max-width: 980px) {
  .studio-grid { grid-template-columns:minmax(0,1fr); }
  .studio-preview { min-height:0; }
}
@media (max-width: 760px) {
  .seller-studio { padding:13px; }
  .studio-actions { width:100%; justify-content:flex-start; }
  .studio-actions .btn { flex:1 1 180px; }
  .studio-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 430px) {
  .studio-title-wrap { align-items:flex-start; }
  .studio-orb { width:34px; height:34px; }
  .studio-step { padding:8px 6px; }
  .studio-step-copy small { display:none; }
  .studio-step-arrow { display:none; }
}
@media (max-width: 700px) {
  .dev-hero-signal { max-width:none; }
}

/* Broadcast history actions use the same normal-flow treatment as refund and
   plan forms; table overflow must not cut off view/resend controls. */
.broadcast-history-details { position:relative; }
.broadcast-history-form {
  width:min(320px, calc(100vw - 48px));
  max-width:100%;
  margin-top:8px;
  padding:10px;
  box-sizing:border-box;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:var(--shadow);
}
.broadcast-history-form pre { max-width:100%; overflow:auto; }