/* Shared narrow-screen and large-text protections for owner-facing details. */
.panel,.grid,.stack,.line,.metric,.pair,.command,.header>div,#content,
#source-content,#request-form,.source-meta,.section-note {min-width:0}
.panel h2,.panel h3,.panel p,.line h3,.source-meta,.section-note,
#source-title,#request-object,#request-message,.command>span:last-child {
  overflow-wrap:anywhere;
  word-break:normal;
}
dialog {max-width:min(530px,calc(100vw - 26px));max-height:86svh;overscroll-behavior:contain}
dialog>.row:first-child {
  display:grid;
  grid-template-columns:minmax(0,1fr) 44px;
  align-items:start;
  gap:16px;
}
dialog>.row:first-child>h2 {min-width:0;line-height:1.25;padding-top:6px}
dialog>.row:first-child>.eye-btn {
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  flex:none;
  justify-self:end;
  position:relative;
}
/* Long source/client details scroll below a header that stays in normal flow.
   Keeping the close button outside the scroller also avoids sticky compositing
   failures in mobile WebKit. */
#source-dialog[open] {display:flex;flex-direction:column;overflow:hidden}
#source-dialog>.row:first-child {position:relative;top:auto;flex-shrink:0}
#source-content {min-height:0;overflow:auto}
dialog .stack {min-width:0}
dialog input,dialog textarea,dialog select {max-width:100%;min-width:0}
dialog .source-meta {font-size:16px;line-height:1.55}
dialog details {min-width:0}
dialog details summary {cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--blue-dark)}
dialog details p,dialog details code {overflow-wrap:anywhere;white-space:normal}
.row {flex-wrap:wrap}
.row>h2,.row>h3 {flex:1 1 10rem}
.row>.amount {max-width:100%;min-width:0}
.amount,.hero,.metric strong {max-width:100%;overflow-wrap:anywhere;white-space:normal}
.amount {line-height:1.25}
.hero {font-size:clamp(2.25rem,10vw,3.5rem)}
.pair {grid-template-columns:repeat(2,minmax(0,1fr))}
.bottom-nav a {min-width:0;overflow-wrap:anywhere}
.notice,.auth-description {overflow-wrap:anywhere}
@media(max-width:360px){
  .header {padding-left:16px;padding-right:16px;gap:12px}
  #content {padding-left:16px;padding-right:16px}
  .notice {margin-left:16px;margin-right:16px}
  .panel {padding:18px}
  dialog {padding:20px}
  dialog>.row:first-child {gap:12px}
  .pair {gap:12px}
}
@media(min-width:1000px){.hero {font-size:3.9375rem}}