/* RL Tools — scoped to .rlt (page) and .rlt-drawer (side panel). */
.rlt, .rlt-drawer {
  --v: #04050a; --p: rgba(13,16,24,.82); --p2: rgba(20,25,39,.9); --ln: #222a3d; --ln2: #2e3850;
  --tx: #e9edf5; --mu: #8c95a8; --di: #5d6578; --cy: #38d6ff; --rd: #e3262f; --am: #ffb43a; --gn: #6ee7a0; --pu: #b48cff;
  --fd: "Orbitron", "Segoe UI", system-ui, sans-serif; --fb: "Rubik", "Segoe UI", system-ui, sans-serif; --fm: "Share Tech Mono", ui-monospace, Consolas, monospace;
  color: var(--tx); font-family: var(--fb); font-size: 14px; line-height: 1.5; color-scheme: dark;
}
.rlt *, .rlt-drawer * { box-sizing: border-box; }
.rlt { position: relative; isolation: isolate; background: radial-gradient(ellipse 90% 60% at 20% 0%, #0b1530 0%, transparent 60%), radial-gradient(ellipse 70% 50% at 90% 30%, #1a0b24 0%, transparent 60%), var(--v); min-height: 100vh; overflow: hidden; }
.rlt-stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
.rlt-app { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: 40px max(16px, env(safe-area-inset-right, 0px)) 80px max(16px, env(safe-area-inset-left, 0px)); }

/* theme neutraliser (beats theme button:hover; ours win via later, higher rules) */
.rlt.rlt :where(button, button:hover, button:focus), .rlt-drawer.rlt-drawer :where(button, button:hover, button:focus) { background: none; color: inherit; border: 0; border-radius: 0; padding: 0; margin: 0; font: inherit; letter-spacing: inherit; text-transform: none; box-shadow: none; cursor: pointer; min-height: 0; width: auto; line-height: inherit; }
.rlt.rlt :where(h1,h2,h3,h4,p,table,th,td), .rlt-drawer.rlt-drawer :where(h1,h2,h3,h4,p,table,th,td) { margin: 0; padding: 0; color: inherit; font: inherit; letter-spacing: normal; text-transform: none; border: 0; background: none; }
.rlt.rlt :where(input, select), .rlt-drawer.rlt-drawer :where(input, select) { font: inherit; color: var(--tx); background: rgba(4,5,10,.85); border: 1px solid var(--ln2); border-radius: 3px; padding: 9px 11px; min-height: 40px; width: 100%; box-shadow: none; }
.rlt.rlt :where(input:focus, select:focus), .rlt-drawer.rlt-drawer :where(input:focus, select:focus) { outline: none; border-color: var(--cy); box-shadow: 0 0 0 3px rgba(56,214,255,.15); }
.rlt.rlt :where(a), .rlt-drawer.rlt-drawer :where(a) { color: var(--cy); text-decoration: none; }
.rlt :focus-visible, .rlt-drawer :focus-visible { outline: 2px solid var(--cy); outline-offset: 2px; }
.rlt.rlt :where(img), .rlt-drawer.rlt-drawer :where(img) { max-width: 100%; border: 0; border-radius: 0; box-shadow: none; }

.rlt-boot { display: flex; align-items: center; gap: 12px; justify-content: center; padding: 120px 0; font-family: var(--fm); letter-spacing: .14em; text-transform: uppercase; color: var(--mu); }
.rlt-spin { width: 18px; height: 18px; border: 2px solid var(--ln2); border-top-color: var(--cy); border-radius: 50%; animation: rlt-spin .8s linear infinite; }
@keyframes rlt-spin { to { transform: rotate(360deg); } }

/* header */
.rlt .hd { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; }
.rlt .eyebrow { font-family: var(--fm); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--cy); }
.rlt .title { font-family: var(--fd); font-weight: 900; font-size: clamp(30px, 5vw, 56px); letter-spacing: .04em; text-transform: uppercase; line-height: 1; margin-top: 8px; }
.rlt .title span { color: transparent; -webkit-text-stroke: 1.5px var(--cy); }
.rlt .status { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rlt .pill { font-family: var(--fm); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 6px 10px; border: 1px solid var(--ln2); background: var(--p); border-radius: 2px; color: #c7cedb; display: inline-flex; align-items: center; gap: 8px; }
.rlt .pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--gn); box-shadow: 0 0 10px var(--gn); }
.rlt .pill.warn i { background: var(--am); box-shadow: 0 0 10px var(--am); }

.rlt .bar { position: sticky; top: 92px; z-index: 5; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; padding: 8px; background: rgba(6,7,12,.88); backdrop-filter: blur(10px); border: 1px solid var(--ln); border-radius: 4px; margin-bottom: 22px; }
.rlt .tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.rlt .tabs::-webkit-scrollbar { display: none; }
.rlt .tab { font-family: var(--fd); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 10px 14px; color: var(--mu); border-radius: 2px; white-space: nowrap; }
.rlt .tab:hover { color: var(--tx); background: var(--p2); }
.rlt .tab[aria-selected="true"], .rlt .tab[aria-selected="true"]:hover { color: var(--v); background: var(--cy); }
.rlt .sys { display: flex; gap: 4px; }

.rlt .chip, .rlt-drawer .chip { font-family: var(--fm); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 7px 11px; border: 1px solid var(--ln2); background: var(--p2); color: #c7cedb; border-radius: 2px; }
.rlt .chip:hover, .rlt-drawer .chip:hover { border-color: var(--cy); color: var(--tx); background: var(--p2); }
.rlt .chip[aria-pressed="true"], .rlt .chip[aria-pressed="true"]:hover, .rlt-drawer .chip[aria-pressed="true"] { background: var(--am); border-color: var(--am); color: var(--v); }

.rlt .btn, .rlt-drawer .btn { font-family: var(--fd); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding: 11px 18px; border: 1px solid var(--cy); color: var(--cy); background: transparent; border-radius: 2px; display: inline-flex; gap: 8px; align-items: center; justify-content: center; white-space: nowrap; }
.rlt .btn:hover, .rlt-drawer .btn:hover { background: rgba(56,214,255,.12); color: var(--cy); }
.rlt .btn.hot, .rlt-drawer .btn.hot { background: var(--rd); border-color: var(--rd); color: #fff; }
.rlt .btn.hot:hover, .rlt-drawer .btn.hot:hover { background: #ff3d46; color: #fff; box-shadow: 0 0 24px rgba(227,38,47,.45); }
.rlt .btn.sm, .rlt-drawer .btn.sm { padding: 7px 11px; font-size: 10.5px; }

/* panels & layout */
.rlt .panel, .rlt-drawer .panel { background: var(--p); border: 1px solid var(--ln); border-radius: 4px; backdrop-filter: blur(6px); }
.rlt .pad { padding: 20px; }
.rlt .grid { display: grid; gap: 16px; }
.rlt .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rlt .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rlt .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rlt .side { grid-template-columns: 340px minmax(0, 1fr); align-items: start; }
.rlt .sec-t, .rlt-drawer .sec-t { font-family: var(--fd); font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.rlt .sec-t small, .rlt-drawer .sec-t small { font-family: var(--fm); font-weight: 400; color: var(--mu); letter-spacing: .1em; font-size: 11px; }
.rlt .kpi { padding: 18px 20px; position: relative; overflow: hidden; }
.rlt .kpi::after { content: ""; position: absolute; right: -30px; top: -30px; width: 100px; height: 100px; background: radial-gradient(circle, rgba(56,214,255,.18), transparent 70%); }
.rlt .kpi b { display: block; font-family: var(--fd); font-weight: 900; font-size: 26px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.rlt .kpi small { display: block; color: var(--mu); font-size: 12px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rlt .lbl, .rlt-drawer .lbl { display: block; font-family: var(--fm); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--mu); margin-bottom: 6px; }
.rlt .form { display: grid; gap: 14px; }
.rlt .row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rlt .check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #c7cedb; cursor: pointer; }
.rlt .check input { width: 16px; height: 16px; min-height: 0; padding: 0; accent-color: var(--cy); }
.rlt .hint, .rlt-drawer .hint { font-size: 12px; color: var(--mu); }
.rlt .toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.rlt .toolbar > * { flex: 1 1 180px; }
.rlt .toolbar .chips { flex: 0 1 auto; display: flex; gap: 4px; flex-wrap: wrap; }
.rlt .empty, .rlt-drawer .empty { padding: 36px 20px; text-align: center; color: var(--mu); border: 1px dashed var(--ln2); border-radius: 4px; }
.rlt .note { font-size: 12px; color: var(--mu); margin-top: 10px; }
.rlt .credit { margin-top: 28px; font-family: var(--fm); font-size: 11px; letter-spacing: .08em; color: var(--di); text-align: center; }

/* tables */
.rlt .tw, .rlt-drawer .tw { overflow-x: auto; border-radius: 4px; }
.rlt table.t, .rlt-drawer table.t { width: 100%; border-collapse: collapse; font-size: 13px; }
.rlt .t th, .rlt-drawer .t th { font-family: var(--fm); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--mu); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--ln2); white-space: nowrap; position: sticky; top: 0; background: rgba(13,16,24,.97); }
.rlt .t th[data-k] { cursor: pointer; }
.rlt .t th[data-k]:hover { color: var(--tx); }
.rlt .t th.on::after { content: " ▾"; color: var(--cy); }
.rlt .t th.on.asc::after { content: " ▴"; }
.rlt .t td, .rlt-drawer .t td { padding: 10px 12px; border-bottom: 1px solid rgba(34,42,61,.6); vertical-align: middle; }
.rlt .t tr.click { cursor: pointer; }
.rlt .t tr.click:hover td { background: rgba(56,214,255,.05); }
.rlt .num, .rlt-drawer .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--fm); font-size: 13.5px; white-space: nowrap; }
.rlt .t .num, .rlt-drawer .t .num { text-align: right; }
.rlt .nm, .rlt-drawer .nm { font-weight: 600; color: var(--tx); }
.rlt .sub, .rlt-drawer .sub { display: block; font-size: 11.5px; color: var(--mu); }
.c-b { color: var(--cy) !important; } .c-s { color: var(--gn) !important; } .c-p { color: var(--am) !important; } .c-r { color: #ff6b72 !important; } .c-m { color: var(--mu) !important; } .c-pu { color: var(--pu) !important; }
.rlt .tag, .rlt-drawer .tag { display: inline-block; font-family: var(--fm); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 2px 7px; border: 1px solid var(--ln2); color: #b7bfcf; border-radius: 2px; margin: 1px 4px 1px 0; white-space: nowrap; }
.rlt .tag.r, .rlt-drawer .tag.r { color: #ff6b72; border-color: rgba(227,38,47,.5); }
.rlt .tag.a, .rlt-drawer .tag.a { color: var(--am); border-color: rgba(255,180,58,.5); }
.rlt .tag.g, .rlt-drawer .tag.g { color: var(--gn); border-color: rgba(110,231,160,.45); }
.rlt .tag.c, .rlt-drawer .tag.c { color: var(--cy); border-color: rgba(56,214,255,.45); }
.rlt .meter, .rlt-drawer .meter { height: 5px; width: 80px; background: var(--ln); border-radius: 3px; overflow: hidden; display: inline-block; vertical-align: middle; }
.rlt .meter i, .rlt-drawer .meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--cy), var(--gn)); }
.rlt .age-old, .rlt-drawer .age-old { color: var(--am); }
.rlt .age-dead, .rlt-drawer .age-dead { color: #ff6b72; }

/* route cards */
.rlt .routes { display: grid; gap: 10px; }
.rlt .rc { display: grid; grid-template-columns: 44px minmax(0, 1.2fr) 30px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 16px; background: var(--p); border: 1px solid var(--ln); border-radius: 4px; transition: border-color .2s, transform .2s; }
.rlt .rc:hover { border-color: var(--cy); }
.rlt .rc .rk { font-family: var(--fd); font-weight: 900; font-size: 18px; color: var(--di); text-align: center; }
.rlt .rc .loc .nm { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rlt .rc .arrow { color: var(--cy); font-size: 18px; text-align: center; }
.rlt .rc .money b { display: block; font-family: var(--fd); font-weight: 900; font-size: 20px; color: var(--gn); font-variant-numeric: tabular-nums; }
.rlt .rc .money.neg b { color: #ff6b72; }
.rlt .rc .cm { font-family: var(--fd); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--am); }
.rlt .rc .more { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; padding-top: 12px; border-top: 1px dashed var(--ln2); }
.rlt .rc .more div b { display: block; font-family: var(--fm); font-size: 14px; color: var(--tx); font-weight: 400; }

/* ships */
.rlt .ships { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.rlt .sh { text-align: left; background: var(--p); border: 1px solid var(--ln); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s, transform .2s; }
.rlt .sh:hover { border-color: var(--cy); transform: translateY(-3px); }
.rlt .sh .ph { aspect-ratio: 16/9; background: linear-gradient(135deg, #0b1530, #1a0b24); position: relative; overflow: hidden; }
.rlt .sh .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rlt .sh .ph::before { content: ""; position: absolute; inset: 0; background: radial-gradient(1px 1px at 20% 30%, #fff8, transparent), radial-gradient(1px 1px at 70% 60%, #fff6, transparent), radial-gradient(1.5px 1.5px at 85% 20%, #7fe3ff, transparent), radial-gradient(1px 1px at 40% 80%, #fff5, transparent), radial-gradient(60% 80% at 100% 100%, rgba(34,211,238,.18), transparent 70%); }
.rlt .sh .ph::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--cy, #22d3ee), transparent); opacity: .6; }
.rlt .sh .ph .ph-x { position: absolute; inset: auto 14px 14px 14px; top: auto; left: 14px; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.rlt .sh .ph .ph-x b { font-family: Orbitron, sans-serif; font-size: clamp(18px, 2vw, 26px); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px rgba(127,227,255,.55); line-height: 1.05; }
.rlt .sh .ph .ph-x i { font-style: normal; font-family: "Share Tech Mono", monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(127,227,255,.6); }
.rlt .sh .ph span { position: absolute; left: 8px; top: 8px; }
.rlt .sh .bd { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.rlt .sh .bd .nm { font-family: var(--fd); font-size: 14px; letter-spacing: .03em; }
.rlt .sh .specs { display: flex; gap: 12px; flex-wrap: wrap; font-family: var(--fm); font-size: 12px; color: #c7cedb; }
.rlt .sh .specs em { font-style: normal; color: var(--mu); }

/* drawer */
.rlt-drawer { position: fixed; inset: 0; z-index: 100000; display: flex; justify-content: flex-end; background: rgba(2,3,6,.6); backdrop-filter: blur(3px); }
.rlt-drawer[hidden] { display: none; }
.rlt-drawer .dp { width: min(860px, 100%); height: 100%; overflow-y: auto; background: #070910; border-left: 1px solid var(--ln2); padding: 26px 24px 40px; box-shadow: -30px 0 80px rgba(0,0,0,.6); display: flex; flex-direction: column; gap: 18px; }
.rlt-drawer .dh { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.rlt-drawer .dh h2 { font-family: var(--fd); font-weight: 900; font-size: 26px; text-transform: uppercase; letter-spacing: .03em; line-height: 1.1; }
.rlt-drawer .x { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--ln2); border-radius: 2px; color: var(--mu); font-size: 18px; }
.rlt-drawer .x:hover { color: var(--tx); border-color: var(--cy); }
.rlt-drawer .kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.rlt-drawer .kv div { background: var(--p); border: 1px solid var(--ln); border-radius: 3px; padding: 10px 12px; }
.rlt-drawer .kv b { display: block; font-family: var(--fm); font-weight: 400; font-size: 15px; margin-top: 2px; }
.rlt-drawer .hero { width: 100%; aspect-ratio: 16/8; object-fit: cover; border-radius: 4px; border: 1px solid var(--ln); }
.rlt-drawer .chips { display: flex; gap: 4px; flex-wrap: wrap; }
html.rlt-lock, html.rlt-lock body { overflow: hidden; }

@media (max-width: 1100px) {
  .rlt .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rlt .g3 { grid-template-columns: minmax(0, 1fr); }
  .rlt .side { grid-template-columns: minmax(0, 1fr); }
  .rlt .rc { grid-template-columns: 32px minmax(0, 1fr) 24px minmax(0, 1fr); }
  .rlt .rc .money { grid-column: span 2; }
}
@media (max-width: 760px) {
  .rlt .bar { top: 64px; }
  .rlt .g2, .rlt .g4, .rlt .row2 { grid-template-columns: minmax(0, 1fr); }
  .rlt .rc { grid-template-columns: minmax(0, 1fr); }
  .rlt .rc .rk, .rlt .rc .arrow { display: none; }
  .rlt .rc .money { grid-column: auto; }
  .rlt .sys { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .rlt *, .rlt-drawer * { transition: none !important; animation: none !important; } }

/* long ship names: keep cards tidy */
.rlt .sh .nm { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rlt .sh .ph .ph-x b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.rlt .sh .ph .ph-x i { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }