.tf-route { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(160px, 220px); gap: .75rem; align-items: end; }
.tf-swap { margin-bottom: 3px; }

/* search scope: between two locations, from one place to anywhere or buy orders to haul (Trader and up), or every market (Tycoon) */
.tf-mode { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.tf-mode .seg button { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .85rem; font-size: .85rem; }
.tf-mode a { font-weight: 600; }
#TradeForm.mode-everywhere .tf-loc { display: none; }
#TradeForm.mode-everywhere .tf-route { grid-template-columns: minmax(0, 260px); }
/* from one place to anywhere: From and security only */
#TradeForm.mode-anywhere .tf-to { display: none; }
#TradeForm.mode-anywhere .tf-route { grid-template-columns: minmax(0, 1fr) minmax(160px, 220px); }
/* the buy-order search's own settings (broker fee, max. spread) only show in that mode */
#TradeForm:not(.mode-buyorders) .tf-buyorders-only { display: none; }
#TradeForm:not(.mode-alongroute) .tf-alongroute-only { display: none; }
.tf-elapsed { font-variant-numeric: tabular-nums; }

/* saved trade settings */
.tf-presets { display: flex; align-items: center; gap: .5rem; margin-left: auto; flex-wrap: wrap; }
.tf-presets-label { font-size: .8rem; color: var(--text-2); font-weight: 500; }
.tf-presets select { width: auto; min-width: 220px; max-width: 320px; padding-block: .35rem; }
/* quantity panel opened by a manifest + button */
.qty-panel {
    position: absolute;
    z-index: 1045;
    width: 380px;
    max-width: calc(100vw - 16px);
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.qty-panel[hidden] { display: none; }
.qty-head h3 { margin: 0 0 .2rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.qty-head p { margin: 0; font-size: .9rem; }
.qty-row { display: flex; gap: .5rem; }
.qty-row .field-input { flex: 1; min-width: 0; padding-block: .45rem; font-size: 1.05rem; }
.qty-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 0; }
.qty-figures div { background: var(--surface-2); border-radius: 8px; padding: .45rem .55rem; }
.qty-figures dt { font-size: .68rem; color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.qty-figures dd { margin: 0; font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.qty-note { margin: 0; font-size: .78rem; color: var(--muted); }
.qty-note:empty { display: none; }
.qty-note.error { color: var(--down); }
.qty-note.warn { color: var(--isk); }
.qty-actions { display: flex; align-items: center; gap: .75rem; }
.qty-body { display: flex; flex-direction: column; gap: .75rem; }
.qty-login-text { margin: 0; font-size: .88rem; color: var(--text-2); }
.qty-actions a.btn-primary-x { text-decoration: none; }
/* signed out: the + still shows (so pilots know the feature exists) but reads as locked */
.mf-add.mf-locked { opacity: .6; }
.mf-add.mf-locked:hover { opacity: 1; }

/* the name field opens right-aligned, directly under the Save settings button */
.tf-preset-save { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; margin-top: .75rem; flex-wrap: wrap; }
.tf-preset-save .field-input { width: 320px; max-width: 100%; padding-block: .4rem; }
.tf-preset-status { margin: .6rem 0 0; font-size: .82rem; color: var(--text-2); text-align: right; }
.tf-preset-status.error { color: var(--down); }
@media (max-width: 760px) {
    .tf-presets { margin-left: 0; width: 100%; }
    .tf-presets select { flex: 1; min-width: 0; max-width: none; }
    /* on narrow screens the controls stack at the left, so the name field follows them */
    .tf-preset-save { justify-content: flex-start; }
    .tf-preset-save .field-input { width: 100%; }
    .tf-preset-status { text-align: left; }
}
.tf-params { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: .75rem; }
@media (max-width: 760px) {
    .tf-route, #TradeForm.mode-anywhere .tf-route { grid-template-columns: minmax(0, 1fr); }
    .tf-swap { justify-self: center; transform: rotate(90deg); margin: 0; }
}
#TradeTable tbody tr.trade-row { cursor: pointer; }
#TradeTable tbody tr.trade-row[aria-expanded="true"] td { background: var(--accent-wash); }
#TradeTable .route { white-space: nowrap; }
#TradeTable .route .stop { display: inline-block; vertical-align: top; }
#TradeTable .route .region { display: block; color: var(--muted); font-size: .78rem; line-height: 1.3; }
#TradeTable .route .arrow { color: var(--muted); margin: 0 .5rem; vertical-align: top; }
#TradeTable .chev { transition: transform .15s; color: var(--muted); display: inline-block; }
#TradeTable tr[aria-expanded="true"] .chev { transform: rotate(90deg); color: var(--accent); }
#TradeTable tr.detail-row > td { background: var(--surface-2); padding: 1rem; }
#TradeTable tr.detail-row:hover > td { background: var(--surface-2); }
.leg { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: .9rem 1rem; }
.leg h4 { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 .5rem; }
.leg dl { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; margin: 0; font-size: .85rem; }
.leg dt { color: var(--muted); font-weight: 400; }
.leg dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.copy { border: 0; background: none; color: var(--muted); padding: 0 .2rem; cursor: pointer; }
.copy:hover { color: var(--accent); }
.related { margin-top: .75rem; }
.related summary { cursor: pointer; color: var(--text-2); font-size: .82rem; }
#PresetDelete.armed { color: var(--down); border-color: var(--down); }
.tf-detour { white-space: nowrap; }

/* an expanded row's details: as wide as the table's visible part and pinned to its left edge, so on a narrow screen (where
   the table scrolls sideways) they stay on screen; the width is set by tradefinder.js (sizeDetails) */
#TradeTable .tf-detail { position: sticky; left: var(--tf-detail-left, 1rem); width: var(--tf-detail-width, auto); max-width: 100%; }
#TradeTable .tf-detail .leg { min-width: 0; overflow-x: auto; }
#TradeTable .tf-detail .chip { white-space: normal; }
@media (max-width: 760px) {
    #TradeTable tr.detail-row > td { padding: .75rem; }
    .leg dl { grid-template-columns: auto minmax(0, 1fr); }
    .leg dd { overflow-wrap: anywhere; }
}