/* Trade location direction (2026-09-30): tag, form control and hidden options. Companion to trade-location-direction.js.
   Restrained: small neutral pills, the same green and red as the ticket Long / Short toggles. */
.tld-pill { display: inline-block; margin-left: 10px; padding: 1px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 18px; letter-spacing: .02em; vertical-align: middle; border: 1px solid transparent; }
.tld-pill.tld-long { background: rgba(34, 197, 94, .14); color: #15803d; border-color: rgba(34, 197, 94, .35); }
.tld-pill.tld-short { background: rgba(239, 68, 68, .12); color: #b91c1c; border-color: rgba(239, 68, 68, .35); }
.tld-pill.tld-none { background: rgba(120, 120, 130, .12); color: #6b7280; border-color: rgba(120, 120, 130, .3); }
body.dark .tld-pill.tld-long { color: #4ade80; }
body.dark .tld-pill.tld-short { color: #f87171; }
body.dark .tld-pill.tld-none { color: #9ca3af; }

.tld-dir { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 2px 0 14px; padding: 0 2px; }
.tld-dir-label { font-size: 13px; font-weight: 600; min-width: 74px; }
.tld-dir .tld-pill { margin-left: 0; }
.tld-dir-note { font-size: 12px; opacity: .7; }
.tld-seg { display: inline-flex; border: 1px solid rgba(120, 120, 130, .45); border-radius: 8px; overflow: hidden; }
.tld-opt { border: 0; background: transparent; color: inherit; font: inherit; font-size: 13px; padding: 6px 18px; cursor: pointer; }
.tld-opt + .tld-opt { border-left: 1px solid rgba(120, 120, 130, .45); }
.tld-opt.tld-long.on { background: green; color: #fff; }
.tld-opt.tld-short.on { background: red; color: #fff; }
.tld-dir.tld-need .tld-seg { border-color: #dc2626; box-shadow: 0 0 0 2px rgba(220, 38, 38, .2); }
.tld-dir.tld-need .tld-dir-note { color: #dc2626; opacity: 1; }