/* V177: usability, touch feedback and readable dialog */
.challenge .preview-stock:focus-visible,.challenge .modal-stock:focus-visible,.challenge .index-tab:focus-visible{outline:3px solid #ffe36c!important;outline-offset:3px!important}
.challenge .preview-stock:active,.challenge .modal-stock:active{transform:scale(.985)}
.challenge .trade-panel #trade-message:not(:empty){padding:10px 12px;border-radius:10px;background:#123b70;color:#fff;line-height:1.45}
@media(max-width:600px){.challenge .trade-panel .quantity-row button{min-width:44px;min-height:44px}.challenge .trade-panel .trade-actions button{min-height:48px}}
@media(prefers-reduced-motion:reduce){.challenge .preview-stock:active,.challenge .modal-stock:active{transform:none}}

/* V178 draft: keep stock names clear of the brand tile on narrow screens. */
@media(max-width:600px){
  .challenge .stock-modal .modal-stock{display:grid!important;grid-template-columns:44px minmax(0,1fr)!important;column-gap:12px!important;align-items:center!important;box-sizing:border-box!important}
  .challenge .stock-modal .modal-stock .stock-symbol{grid-column:1!important;grid-row:1 / span 3!important;position:static!important;width:44px!important;height:44px!important;max-width:44px!important;margin:0!important}
  .challenge .stock-modal .modal-stock strong,.challenge .stock-modal .modal-stock small,.challenge .stock-modal .modal-stock span:not(.stock-symbol){grid-column:2!important;min-width:0!important;margin-left:0!important;padding-left:0!important}
  .challenge .stock-modal .modal-stock strong{overflow-wrap:anywhere!important;line-height:1.3!important}
}