/* GlobalRoute v0.2 additions on top of style.css (same tokens). */
input:not([type]), input[list] {
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 4px; padding: 7px 9px; color: var(--ink); width: 100%;
}
input:not([type]):hover, input[list]:hover { border-color: var(--ink-3); }
.inline { display: inline; margin: 0; }
a.ghost { text-decoration: none; display: inline-block; }
body[data-role=analyst] .approver-only { display: none !important; }
.lane { grid-template-columns: 1fr 18px 1fr; }

/* header additions */
.who { font: 12px var(--mono); color: var(--ink-3); white-space: nowrap; align-self: center; margin-inline-end: 4px; }
.who b { color: var(--ink-2); font-weight: 500; }
.sig-badge { background: var(--risk-dim); color: var(--risk); border: 1px solid var(--risk); border-radius: 4px; padding: 5px 10px;
  font: 600 12px var(--mono); white-space: nowrap; }
.sig-badge:hover { background: var(--risk); color: #1a1000; }
.grid { grid-template-columns: 330px minmax(0, 1fr) 390px; }

/* chokepoint groups */
.cp-group { border-top: 1px solid var(--line); padding: 8px 0 4px; }
.cp-group:first-child { border-top: 0; padding-top: 0; }
.cp-group summary { cursor: pointer; color: var(--ink-2); font-size: 12.5px; padding: 2px 0 6px; list-style-position: inside; }
.cp-group summary em { font-style: normal; color: var(--closed); font-family: var(--mono); font-size: 11.5px; margin-inline-start: 6px; }
.cp-group summary em.risk { color: var(--risk); }
.cp-group .cp-controls { margin-bottom: 6px; }
.cp-row .eta { display: block; font: 11px var(--mono); color: var(--risk); }
.cp-row .eta button { background: none; border: 0; padding: 0; color: var(--signal); font: inherit; text-decoration: underline; cursor: pointer; }
.open-box { border: 0; padding: 0; margin-top: 14px; }
.open-box .sub-h { margin-top: 0; }
#port-controls { margin-top: 8px; }
.samples { margin-top: 10px; }
.samples summary { cursor: pointer; color: var(--ink-3); font-size: 12px; }
.samples[open] summary { margin-bottom: 8px; }

/* right column tabs */
.right { padding: 0; }
.tabs { display: grid; grid-template-columns: 1.2fr 1fr 1fr; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); z-index: 2; }
.tab { background: none; border: 0; padding: 12px 8px; color: var(--ink-3); font-size: 13px; border-bottom: 2px solid transparent; white-space: nowrap; }
.tab b { font: 600 11px var(--mono); color: var(--signal); }
.tab em { font-style: normal; font: 600 11px var(--mono); color: #1a1000; background: var(--risk); border-radius: 8px; padding: 0 6px; }
.tab em:empty { display: none; }
.tab.on { color: var(--ink); border-bottom-color: var(--signal); }
.tabpane .verdict { margin-top: 0; }

/* signals */
.signal { border: 1px solid var(--line-2); border-radius: 4px; padding: 12px; margin-bottom: 10px; background: var(--panel-2); }
.signal.closed { border-inline-start: 3px solid var(--closed); }
.signal.high_risk { border-inline-start: 3px solid var(--risk); }
.signal.open { border-inline-start: 3px solid var(--signal); }
.sg-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.sg-title { font-weight: 600; }
.sg-title .to { font: 600 12px var(--mono); margin-inline-start: 6px; }
.sg-title .to.closed { color: var(--closed); } .sg-title .to.high_risk { color: var(--risk); } .sg-title .to.open { color: var(--signal); }
.sg-meta { font: 11px var(--mono); color: var(--ink-3); white-space: nowrap; }
.sg-conf { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; margin: 8px 0 4px; font-size: 12px; color: var(--ink-2); }
.bar { height: 4px; background: var(--line-2); position: relative; }
.bar i { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--signal); }
.bar i.low { background: var(--risk); }
.sg-items { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; }
.sg-items li { font-size: 12.5px; color: var(--ink-2); border-inline-start: 2px solid var(--line-2); padding-inline-start: 8px; }
.sg-items a { color: var(--ink); text-decoration: none; }
.sg-items a:hover { text-decoration: underline; }
.sg-items small { color: var(--ink-3); }
.dur { margin: 8px 0; }
.dur-bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 4px; }
.dur-bars div { font: 11px var(--mono); color: var(--ink-3); }
.dur-bars div span { display: block; height: 18px; background: var(--line); position: relative; margin-bottom: 3px; }
.dur-bars div span i { position: absolute; inset-inline-start: 0; inset-block: 0; background: var(--risk); opacity: .75; }
.dur p { margin: 4px 0 0; font-size: 12px; color: var(--ink-2); }
.dur p.ref { color: var(--ink-3); }
.sg-rule { font-size: 12px; color: var(--ink-2); margin: 8px 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.eye { font: 600 11px var(--mono); padding: 2px 6px; border-radius: 3px; border: 1px solid var(--risk); color: var(--risk); }
.eye.one { border-color: var(--signal); color: var(--signal); }
.sg-actions { display: flex; gap: 8px; margin-top: 10px; }
.sg-actions .primary { flex: 1; }
.sg-actions .ghost { flex: 0 0 auto; }
.sg-why { font-size: 11.5px; color: var(--ink-3); margin-top: 6px; }
.mini-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mini-list li { font-size: 12.5px; color: var(--ink-2); padding-inline-start: 9px; border-inline-start: 2px solid var(--line-2); }
.mini-list li time { font: 11px var(--mono); color: var(--ink-3); margin-inline-end: 6px; }
.mini-list li a { color: var(--ink); text-decoration: none; }
.mini-list li a:hover { text-decoration: underline; }
.mini-list li.confirmed { border-color: var(--signal); }
.mini-list li.rejected { border-color: var(--closed); }
.chip { display: inline-block; font: 11px var(--mono); padding: 0 5px; border-radius: 3px; border: 1px solid var(--line-2); color: var(--ink-3); margin-inline-start: 4px; }
.chip.closed { border-color: var(--closed); color: var(--closed); } .chip.high_risk { border-color: var(--risk); color: var(--risk); } .chip.open { border-color: var(--signal); color: var(--signal); }
.feed-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.feed-head .hint { margin: 0; }
.audit li { font-size: 12px; }

/* map extras */
.lanes-all { fill: none; stroke: #263a4b; stroke-width: 1; vector-effect: non-scaling-stroke; }
.lanes-cp.closed { fill: none; stroke: var(--closed); stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-dasharray: 4 3; }
.lanes-cp.high_risk { fill: none; stroke: var(--risk); stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-dasharray: 4 3; }
.port-dot { fill: #4a6273; }
.port-dot.major { fill: #7f97a8; }
.truck-l { stroke: var(--truck); stroke-opacity: .6; stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 5 3; fill: none; }
.alt.truckleg { stroke-dasharray: 3 3; }

/* login */
.login-page { display: grid; place-items: center; min-height: 100vh; padding: 16px;
  background: radial-gradient(ellipse at 50% 30%, #0b1822 0%, var(--bg) 70%); }
.login { width: min(380px, 100%); background: var(--panel); border: 1px solid var(--line-2); border-radius: 6px; padding: 28px; }
.login .brand { margin-bottom: 22px; }
.login-form { display: grid; gap: 14px; }
.login-form label { display: grid; gap: 5px; font-size: 12.5px; color: var(--ink-3); }
.login-form input { background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 4px; padding: 9px 10px; color: var(--ink); font: inherit; }
.login-form .primary { padding: 10px; margin-top: 4px; }
.login-error { margin: 0; color: var(--closed); font-size: 13px; }
.login .hint { margin-top: 18px; }
.login code { font-family: var(--mono); color: var(--ink-2); }

@media (max-width: 1280px) { .grid { grid-template-columns: 300px minmax(0, 1fr) 340px; } .who { display: none; } }
@media (max-width: 1000px) { .grid { grid-template-columns: 1fr; } }
.cp-row.flash { outline: 1px solid var(--signal); outline-offset: 3px; transition: outline-color 1s; }

/* one-screen console on desktop: no page scroll, columns scroll on their own */
@media (min-width: 1001px) {
  html, body { overflow: hidden; }
  .bar { flex-wrap: nowrap; overflow: hidden; }
  .threat { min-width: 0; flex: 1 1 auto; justify-content: flex-end; }
  .threat span, .threat { text-overflow: ellipsis; }
  .grid { height: calc(100vh - 54px); }
}
.bar { height: 54px; }
.controls { flex: none; }
.lane { grid-template-columns: 1fr; gap: 8px; }
.lane-arrow { display: none; }
.lanes-all { stroke: #1f3140; }
[dir=rtl] .cp-row .eta, [dir=rtl] .chip, [dir=rtl] .sg-meta, [dir=rtl] .eye, [dir=rtl] .dur-bars div,
[dir=rtl] .mini-list li time, [dir=rtl] .who, [dir=rtl] .cp-group summary em, [dir=rtl] .ranked .eff { font-family: var(--ui); }
[dir=rtl] .tab { font-size: 12px; padding-inline: 4px; }

/* searchable dropdown */
.combo { position: relative; }
.combo input { width: 100%; }
.combo-list {
  position: absolute; z-index: 30; top: calc(100% + 3px); left: 0; right: 0; max-height: 300px; overflow-y: auto;
  margin: 0; padding: 4px 0; list-style: none; background: #0b131b; border: 1px solid var(--line-2); border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.combo-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 10px; cursor: pointer; font-size: 13px; color: var(--ink); }
.combo-list li small { color: var(--ink-3); font: 11px var(--mono); white-space: nowrap; }
.combo-list li.act, .combo-list li:hover { background: var(--signal-dim); }
.combo-list li.hub span { color: var(--signal); }
.combo-list li.none { color: var(--ink-3); cursor: default; white-space: normal; }
.combo-list .maj { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-2); vertical-align: middle; margin-inline-start: 4px; }
[dir=rtl] .combo-list li small { font-family: var(--ui); }