/* m11 bug-hunt fixes (see research/BUGS-M11.md for ids). Loaded after rx-m9.css. */

/* S1 1024–1180: swap ticket content wider than its card; coin chips clipped under the side column */
#view-swap .swap-card.nb-ticket, #view-swap .nb-amount-stack { grid-template-columns: minmax(0, 1fr) !important; }
#view-swap .swap-card.nb-ticket > *, #view-swap .swap-panel, #view-swap .swap-panel-row { min-width: 0; }
#view-swap .swap-panel-row .swap-amount { width: 100%; min-width: 0; }

/* S2 orange is for actions only: offer prices you can take read as the buy side (green) */
#view-swap .nb-offer-line .nb-book-px { color: #34D399 !important; }
#view-swap .nb-offer-line::before { background: rgba(52,211,153,.09) !important; box-shadow: inset -2px 0 0 rgba(52,211,153,.5) !important; }
#view-swap .nb-offer-line .nb-book-size small { color: var(--rx-bone-3) !important; }

/* L1 desktop composer was sticky inside the whole grid and slid over the Marketplace */
#view-lend#view-lend .lend-compose { position: relative !important; top: auto !important; }

/* L2 "Fill this request" panel: themed, inline, not covering the table header */
#view-lend #escrow-take { display: grid; gap: 12px; margin: 12px; padding: 18px; border: 1px solid var(--rx-line-2, rgba(190,176,255,.18)); border-radius: 16px; background: var(--rx-ink-2, #1d1646) !important; box-shadow: var(--rx-hi), 0 18px 40px -20px rgba(4,2,14,.8); }
#view-lend #escrow-take h3 { margin: 0; font: 600 17px/1.3 var(--rx-sans); color: var(--rx-bone); }
#view-lend #escrow-take label { display: grid; gap: 6px; font: 500 13px/1.3 var(--rx-sans); color: var(--rx-bone-2); }
#view-lend #escrow-take input { height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--rx-line); background: var(--rx-ink, #120d2a); color: var(--rx-bone); font: 400 14px/1 var(--rx-mono); outline: none; min-width: 0; }
#view-lend #escrow-take input:focus { border-color: rgba(255,138,31,.55); box-shadow: 0 0 0 3px rgba(255,138,31,.14); }
#view-lend #escrow-take .m11-take-act { display: flex; gap: 10px; }
#view-lend #escrow-take .m11-take-act .swap-submit { flex: 1; margin: 0; position: static !important; }
#view-lend #escrow-take .m11-take-cancel { height: 48px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--rx-line-2); background: none; color: var(--rx-bone-2); font: 600 14px/1 var(--rx-sans); cursor: pointer; }

/* L3 hero amount shrank to 16px between 601 and 768 (generic mobile input rule won) */
#view-lend #escrow-loan.lend-hero-input { font-size: 32px !important; height: 44px !important; }
body.m8 #view-lend #escrow-loan.lend-hero-input { font-size: 44px !important; height: 52px !important; }

/* L5 summary amounts misaligned because BTC and FB chips differ in width */
#view-lend#view-lend .lend-summary label { grid-template-columns: auto minmax(0, 1fr) 84px !important; }
#view-lend#view-lend .lend-summary .lend-coin { justify-self: end; }
#view-lend#view-lend .lend-summary input { min-width: 0; text-overflow: ellipsis; }

/* L6 notes were capped at ~350px leaving a dead right half */
#view-lend .nb-maker-group .nb-field-note { max-width: none !important; }

/* L7 LTV foot: interest got squeezed against the wrapping note */
#view-lend#view-lend .lend-health-foot { align-items: flex-end; }
#view-lend#view-lend .lend-health-foot > span:first-child { max-width: 34ch; }

/* L8 360/de: amount inputs underlapped the coin chip */
body.m8 #view-lend .lend-summary label { grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto !important; column-gap: 8px !important; }
body.m8 #view-lend .lend-summary label > span:first-child { white-space: normal !important; }

/* D1 601–1080: Markets card stuck at 440px leaving an empty right half */
@media (max-width: 1080px) and (min-width: 601px) { #view-docs .hm-book { max-width: none !important; } }

/* H1 1024/de: header actions pushed 1px past the viewport */
@media (max-width: 1180px) and (min-width: 761px) {
  .header .header-actions { gap: 8px !important; min-width: 0; }
  .header .lang-switch select, .header .lang-switch { max-width: 132px; }
}
/* H2 360/de: "Wallet verbinden" truncated in the top bar */
@media (max-width: 380px) { body.m8 #wallet-btn { padding: 0 12px !important; } body.m8 #wallet-btn-text { font-size: 14px !important; letter-spacing: -.01em; } }

/* F1 768: footer legal link clipped */
.site-footer__bottom { flex-wrap: wrap; row-gap: 8px; }
#view-lend .lend-fmt.is-zero{opacity:.55}
/* L2b the row being filled stays highlighted and the panel opens right under it */
#view-lend .lend-offer.m11-filling { background: rgba(255,138,31,.06) !important; box-shadow: inset 2px 0 0 #FF8A1F; }
/* M1 compact top-bar title collided with the wallet pill (worse in de/fr) */
body.m8 .m8-tbar-title { left: 56px !important; right: var(--m11-tr, 220px) !important; justify-content: flex-start !important; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block !important; line-height: 52px !important; }
/* M8 term segment track was 36px tall with 44px buttons spilling out of it */
body.m8 #view-lend .lend-term { height: auto !important; min-height: 0 !important; padding: 3px !important; }
/* H2 small phones: no ellipsis on the connect label */
@media (max-width: 380px) { body.m8 #wallet-btn:not(.connected) #wallet-btn-icon { display: none !important; } body.m8 #wallet-btn { gap: 0 !important; } }
body.m8 #wallet-btn-text { max-width: none !important; }
body.m8 #wallet-btn { max-width: calc(100vw - 124px) !important; }
/* M9 long locales: 3-line segment labels at 360 */
body.m8 #view-lend .nb-choice-row .nb-choice { font-size: 14px !important; line-height: 18px !important; padding: 8px 10px !important; }
html:is([lang=de],[lang=fr],[lang=ru],[lang=uk],[lang=es]) body.m8 #view-lend .nb-choice-row .nb-choice { font-size: 13px !important; }
/* M10 the lend form's fixed CTA hid the Marketplace once the form was off screen */
body.m8 #escrow-continue { transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .2s; }
body.m8.m11-cta-off #escrow-continue { transform: translate3d(0,140%,0) !important; opacity: 0; pointer-events: none; }
/* S4 the deviation chip rendered as an empty pill while hidden (m10 display override beat [hidden]) */
#rx-quote-chip[hidden], body.m8 #rx-quote-chip[hidden] { display: none !important; }
/* H1b 761–1180 with long locales: status shows its dot only (label stays for screen readers via title/role), wallet label never truncates */
@media (max-width: 1180px) and (min-width: 761px) {
  .header #backend-status { width: 22px; overflow: hidden; white-space: nowrap; color: transparent !important; padding-left: 0 !important; padding-right: 0 !important; justify-content: center; }
  .header #wallet-btn-text { max-width: none !important; }
  .header .lang-switch { max-width: 116px !important; }
}
/* L9 1024 de: long "if unpaid" text ran into the row action */
#view-lend .lend-end-cell { min-width: 0; overflow-wrap: anywhere; padding-right: 8px; }
/* B1 768: network pulse strip ran off the right edge */
@media (max-width: 960px) { #view-orders #activity-network-pulse { flex-wrap: wrap; row-gap: 8px; max-width: 100%; } }
/* F1 601–960: footer content sat flush against the screen edge */
@media (max-width: 960px) and (min-width: 601px) { .site-footer .site-footer__inner { padding-left: 24px !important; padding-right: 24px !important; } }
/* H3 desktop fr: "Connecter le portefeuille" truncated at 160px */
@media (min-width: 761px) { .header #wallet-btn-text { max-width: 240px !important; } }
/* P1 modals used violet + slate buttons: primary actions are orange, secondary sits on the ink palette */
.modal .modal-btn.primary { background: #FF8A1F !important; color: #1a0f00 !important; border: 0 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 24px -12px rgba(255,138,31,.6) !important; font-weight: 600; }
.modal .modal-btn.secondary { background: rgba(244,241,234,.06) !important; color: var(--rx-bone, #f4f1ea) !important; border: 1px solid var(--rx-line-2, rgba(190,176,255,.18)) !important; }
/* until the wallet connects, "Continue" is the follow-up step, not a second loud CTA */
#match-tgt-continue-btn { background: rgba(255,138,31,.12) !important; color: #FFB066 !important; box-shadow: inset 0 0 0 1px rgba(255,138,31,.35) !important; }
#view-lend input[aria-invalid=true]{border-color:rgba(248,113,113,.7)!important;box-shadow:0 0 0 3px rgba(248,113,113,.14)!important}
html body #view-swap #rx-quote-chip[hidden], html body.m8 #view-swap #rx-quote-chip[hidden] { display: none !important; }
/* L10 the loan amount used a mono face while Swap's amount uses the sans display face: one amount style app-wide */
#view-lend #escrow-loan.lend-hero-input { font-family: var(--rx-sans) !important; font-weight: 500 !important; letter-spacing: -0.035em !important; font-variant-numeric: tabular-nums; font-size: 36px !important; }
body.m8 #view-lend #escrow-loan.lend-hero-input { font-size: 44px !important; font-weight: 600 !important; }
/* S5 mobile: leftover hairlines under the address card and the fields block doubled up with card edges */
body.m8 #view-swap :is(.claim-addr-row, .nb-swap-fields, #swap-advanced) { border-bottom: 0 !important; }
/* L11 interest premium is information, not an action: no orange */
#view-lend .lend-repay em { color: var(--rx-bone-3) !important; }
/* M9b long locales on phones: stack the two "if unpaid" options instead of 3-line segment labels */
html:is([lang=de],[lang=fr],[lang=ru],[lang=uk],[lang=es]) body.m8 #view-lend .nb-choice-row { flex-direction: column !important; }
html:is([lang=de],[lang=fr],[lang=ru],[lang=uk],[lang=es]) body.m8 #view-lend .nb-choice-row .nb-choice { width: 100%; min-height: 40px; }
/* L12 phones: "if it is not repaid" group had a card fill but zero padding, so text touched its edges */
body.m8 #view-lend .nb-maker-group { padding: 14px 14px 12px !important; display: grid; gap: 10px; }