/* Chain of Command — routing networks (field map in the line panel) and black-box lines (intercepts). */

/* ------------------------------------------------------------------ line panel: network levels */
.line-panel.is-net .line { display: block; padding: 8px 0 4px; overflow: visible; }
.net-wrap { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.net-board { position: relative; width: 100%; max-width: 640px; border-radius: 7px; }
.net-map { display: block; width: 100%; height: auto; overflow: visible; }
.net-wrap.no-route .net-board { box-shadow: 0 0 0 1px rgba(143, 191, 85, .45); }

@media (min-width: 1024px) {
  /* map on the left; route totals, road details and the tape stacked on the right */
  .line-panel.is-net {
    display: grid;
    grid-template-columns: minmax(0, 640px) minmax(280px, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: 'head head' 'map cap' 'map tape';
    column-gap: 18px;
  }
  .line-panel.is-net .line, .line-panel.is-net .net-wrap { display: contents; }
  .line-panel.is-net .line-head { grid-area: head; }
  .line-panel.is-net .net-board { grid-area: map; align-self: start; margin-top: 6px; max-width: none; }
  .line-panel.is-net .net-caption { grid-area: cap; margin-top: 6px; }
  .line-panel.is-net .tape-row { grid-area: tape; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'label' 'tape' 'note'; gap: 4px; margin-top: 8px; align-self: start; }
  .line-panel.is-net .tape { min-height: 46px; }
}

/* the map itself */
.net-bg { fill: #253019; stroke: rgba(216, 201, 155, .28); stroke-width: 1.5; }
.net-grid { fill: none; stroke: rgba(216, 201, 155, .07); stroke-width: 1; }
.net-river { fill: none; stroke: #2e5866; stroke-width: 18; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.net-river-hi { fill: none; stroke: #6f9fae; stroke-width: 2; stroke-dasharray: 10 14; stroke-linecap: round; opacity: .55; }

.net-link > path { fill: none; stroke-linecap: round; }
.lk-hit { stroke: transparent; stroke-width: 26; }
.lk-case { stroke: #11150c; stroke-width: 9; transition: stroke .2s, stroke-width .2s; }
.lk-road { stroke: #8f8768; stroke-width: 3.5; stroke-dasharray: 9 6; transition: stroke .2s; }
.lk-flow { stroke: var(--lamp); stroke-width: 3; stroke-dasharray: 3 13; opacity: 0; }
.net-link.on .lk-case { stroke: rgba(255, 210, 87, .3); stroke-width: 13; }
.net-link.on .lk-road { stroke: #e7c45a; stroke-dasharray: none; stroke-width: 4.5; }
.net-link.on .lk-flow { opacity: 1; stroke: #2a2110; animation: net-flow 1.1s linear infinite; }
.net-link.on.rev .lk-flow { animation-direction: reverse; }
@keyframes net-flow { to { stroke-dashoffset: -32; } }
.net-link.replay .lk-case { stroke: rgba(224, 160, 48, .35); stroke-width: 12; }
.net-link.replay .lk-road { stroke: var(--amber); stroke-dasharray: 4 4; }
.net-map.interactive .net-link { cursor: pointer; outline: none; }
/* plotting: roads that may extend the route glow; the rest fade back */
.net-map.interactive .net-link.off { cursor: not-allowed; }
.net-map.interactive .net-link.off .lk-road { stroke: #6a6550; }
.net-map.interactive .net-link.off .lk-relay, .net-map.interactive .net-link.off .lk-tag { opacity: .72; }
.net-map.interactive .net-link.next .lk-case { stroke: rgba(143, 191, 85, .45); stroke-width: 12; animation: net-next 1.4s ease-in-out infinite; }
.net-map.interactive .net-link.next .lk-road { stroke: #c9dd9c; }
@keyframes net-next { 50% { stroke: rgba(143, 191, 85, .85); stroke-width: 15; } }
.net-node.here .nd-ring, .net-node.here .net-shake { animation: net-here 1.4s ease-in-out infinite; }
@keyframes net-here { 50% { filter: drop-shadow(0 0 6px var(--ok)) drop-shadow(0 0 2px var(--ok)); } }
.net-map.interactive .net-link:hover .lk-case,
.net-map.interactive .net-link.hover .lk-case,
.net-map.interactive .net-link:focus-visible .lk-case { stroke: rgba(239, 230, 204, .55); stroke-width: 13; }
.net-map.interactive .net-link.on:hover .lk-case { stroke: rgba(255, 210, 87, .55); }

.lk-tag rect { fill: #11150c; stroke: rgba(216, 201, 155, .45); stroke-width: 1; }
.lk-tag text { fill: var(--khaki); font-family: var(--f-mono); font-size: 11.5px; text-anchor: middle; }
.net-link.on .lk-tag rect { stroke: var(--lamp); fill: #2a2110; }
.net-link.on .lk-tag text { fill: var(--lamp); }

.lk-relay .patch { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7)); }
.lk-chance { fill: #fff; font-family: var(--f-mono); font-size: 9.5px; text-anchor: start; paint-order: stroke; stroke: #8e2c1b; stroke-width: 3px; stroke-linejoin: round; }

.nd-ring { fill: #1b2113; stroke: #a89d78; stroke-width: 2; }
.g-stroke { fill: none; stroke: #d8c99b; stroke-width: 2.4; stroke-linecap: round; }
.g-thin { fill: none; stroke: #d8c99b; stroke-width: 1.5; stroke-linecap: round; }
.g-fill { fill: #b9ad86; }
.nd-label { fill: var(--khaki); font-family: var(--f-ui); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; paint-order: stroke; stroke: #141a0e; stroke-width: 3.5px; stroke-linejoin: round; }
.net-node.on .nd-ring { stroke: var(--lamp); }
.net-node.on .nd-label { fill: #fff3c4; }

.net-shake { transform-box: fill-box; transform-origin: center; transition: transform .2s, filter .2s; }
.lk-relay.active .net-shake, .net-node.active .net-shake { transform: scale(1.22); filter: drop-shadow(0 0 5px var(--lamp)) drop-shadow(0 0 2px var(--lamp)); }
.lk-relay.hit .net-shake, .net-node.hit .net-shake { animation: net-hit .55s ease-out; }
@keyframes net-hit {
  0% { transform: scale(1.3); filter: drop-shadow(0 0 8px var(--bad)) drop-shadow(0 0 3px var(--bad)); }
  20% { transform: scale(1.25) rotate(-10deg); }
  40% { transform: scale(1.25) rotate(9deg); }
  60% { transform: scale(1.22) rotate(-5deg); }
  100% { transform: scale(1.22); filter: drop-shadow(0 0 5px var(--lamp)); }
}

.net-env { opacity: 0; pointer-events: none; filter: drop-shadow(0 0 5px rgba(255, 210, 87, .9)); }
.net-env.moving { opacity: 1; }
.net-env rect { fill: #efe6cc; stroke: #1f2614; stroke-width: 1.4; }
.net-env path { fill: none; stroke: #1f2614; stroke-width: 1.4; }
.net-env circle { fill: #b5452f; }

/* caption: the chosen route, and what is on the road under the pointer */
.net-caption { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-family: var(--f-type); font-size: 12.5px; line-height: 1.35; color: var(--khaki-dim); }
.nc-route, .nc-detail { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; }
.nc-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; flex-basis: 100%; }
.nc-status { font-size: 12px; color: var(--ok); }
.nc-status.done { color: var(--lamp); }
.nc-ctl { display: inline-flex; gap: 5px; margin-left: auto; }
.nc-ctl .btn-chip { padding: 2px 8px; font-size: 11.5px; }
.nc-ctl .btn-chip:disabled { opacity: .4; cursor: default; }
.nc-stats { display: flex; flex-wrap: wrap; gap: 2px 12px; flex-basis: 100%; }
.nc-clean { font-family: var(--f-mono); font-size: 12.5px; color: var(--khaki-dim); }
.nc-why { flex-basis: 100%; color: var(--amber); }
.nc-detail { padding-top: 6px; border-top: 1px dashed rgba(216, 201, 155, .2); }
.nc-key { font-family: var(--f-stencil); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--lamp); }
.nc-path { font-family: var(--f-ui); font-weight: 600; font-size: 13.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--khaki); }
.nc-delay { font-family: var(--f-mono); font-size: 12.5px; color: var(--khaki); }
.nc-delay.over { color: var(--bad); }
.nc-none { color: var(--amber); }
.nc-relays { display: flex; flex-wrap: wrap; gap: 3px 10px; flex-basis: 100%; }
.nc-relays i { font-style: normal; color: var(--ok); }
.nc-relay, .nc-who { display: inline-flex; align-items: center; gap: 5px; }
.nc-relay .patch { width: 18px; height: 18px; flex: none; }
.nc-who { flex-basis: 100%; }
.nc-who .patch { width: 22px; height: 22px; flex: none; }
.nc-who b { font-family: var(--f-ui); font-weight: 600; letter-spacing: .06em; color: var(--khaki); }
.nc-who.empty { color: var(--ok); }
.nc-link b { font-family: var(--f-ui); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--khaki); }
.nc-tip { font-size: 12px; opacity: .8; }

/* ------------------------------------------------------------------ line panel: hidden (black-box) lines */
.line-panel.is-hidden .line { flex-wrap: wrap; row-gap: 10px; }
.station.dark-box {
  flex: 1 1 230px;
  border: 1px dashed rgba(216, 201, 155, .35);
  background:
    radial-gradient(ellipse at 30% 50%, rgba(255, 255, 255, .05), transparent 60%),
    repeating-linear-gradient(135deg, rgba(0, 0, 0, .35) 0 6px, rgba(0, 0, 0, .15) 6px 12px),
    #0c0f08;
}
.station.dark-box .st-name { color: #c8bd97; }
.clipboard {
  position: relative;
  flex: 0 1 auto;
  margin-left: 14px;
  padding: 14px 12px 8px;
  color: var(--ink);
  background: var(--noise), linear-gradient(180deg, #f1e9cf, #e2d6b2);
  border-radius: 3px;
  box-shadow: 0 0 0 4px #6b5532, 0 6px 14px rgba(0, 0, 0, .5);
}
.clipboard::before { content: ''; position: absolute; top: -9px; left: 50%; width: 46px; height: 14px; margin-left: -23px; background: linear-gradient(180deg, #b9b3a2, #77715f); border-radius: 3px 3px 5px 5px; box-shadow: 0 2px 2px rgba(0, 0, 0, .5); }
.cb-head { position: absolute; top: 3px; left: 10px; right: 10px; display: flex; align-items: center; justify-content: space-between; font-family: var(--f-stencil); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-red); }
.cb-open { padding: 2px 8px; border: 1px solid rgba(122, 31, 20, .55); border-radius: 3px; background: rgba(255, 255, 255, .4); color: var(--ink-red); font: 600 11px/1.2 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.cb-open:hover, .cb-open:focus-visible { background: rgba(255, 255, 255, .75); }
.clipboard { padding-top: 26px; }

/* ---- the intercept log: one column, a numbered position scale, lamps for lamp signals */
.intercepts { --ic-w: 24px; --ic-h: 24px; --ic-gap: 4px; --ic-lab: 7.2em; font-family: var(--f-ui); color: var(--ink); }
.intercepts .ic-scale, .intercepts .ic-line { display: grid; grid-template-columns: var(--ic-lab) max-content; align-items: center; column-gap: 8px; }
.intercepts .ic-cells { display: grid; grid-template-columns: repeat(var(--ic-cols), var(--ic-w)); gap: var(--ic-gap); }
.intercepts .ic-scale { position: sticky; top: 0; z-index: 1; padding: 2px 0 4px; background: inherit; }
.intercepts .ic-idx { text-align: center; font: 600 12px/1 var(--f-mono); color: #7a6f52; }
.intercepts .ic-lab { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #6d6550; white-space: nowrap; }
.intercepts .ic-lab b { font-family: var(--f-mono); font-size: 15px; color: var(--ink-red); letter-spacing: 0; margin-right: 4px; }
.intercepts .ic-block { padding: 6px 0 7px; border-top: 1px dashed rgba(42, 40, 31, .25); }
.intercepts .ic-line + .ic-line { margin-top: 4px; }
.intercepts .ic-cell { width: var(--ic-w); height: var(--ic-h); display: grid; place-items: center; }
.intercepts .ic-cell.ch { border-radius: 3px; background: #fbf6e6; border: 1px solid rgba(42, 40, 31, .35); font: 700 16px/1 var(--f-mono); color: #1d1b14; }
.intercepts .ic-cell.lamp { border-radius: 50%; border: 2px solid #2b2a20; background: radial-gradient(circle at 35% 30%, #5d5a48, #23231b 70%); }
.intercepts .ic-cell.lamp.lit { border-color: #8a6a12; background: radial-gradient(circle at 35% 30%, #fff6c2, var(--lamp) 45%, #c68d12 85%); box-shadow: 0 0 8px rgba(255, 210, 87, .75); }
.intercepts .ic-cell.chg { outline: 3px solid var(--red); outline-offset: 2px; }
.intercepts .ic-cell.ch.chg { border-radius: 3px; }

/* on the clipboard in the line panel: same layout, smaller, scrolls when the log is long */
.intercepts.compact { --ic-w: 17px; --ic-h: 17px; --ic-gap: 3px; --ic-lab: 6.2em; max-height: 150px; overflow-y: auto; padding-right: 4px; background: #ece3c6; }
.intercepts.compact .ic-lab { font-size: 11.5px; }
.intercepts.compact .ic-lab b { font-size: 13px; }
.intercepts.compact .ic-cell.ch { font-size: 12px; }

/* in the briefing / "Open log" dossier */
.intercepts.paper { --ic-w: 28px; --ic-h: 28px; --ic-gap: 5px; --ic-lab: 7.6em; margin: 8px 0 6px; padding: 6px 12px 4px; max-width: 100%; overflow-x: auto; background: rgba(255, 255, 255, .45); border-left: 3px solid rgba(168, 55, 31, .5); }
.intercepts.paper .ic-lab { font-size: 14px; }
.intercepts.paper .ic-cell.ch { font-size: 18px; }

.brief-net { margin: 4px 0 6px; }
.brief-net .net-map { border-radius: 5px; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.brief-roads { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.brief-road { display: flex; flex-direction: column; gap: 4px; }
.br-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 14px; }
.br-head b { font-family: var(--f-ui); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.br-head span { margin-left: auto; font-family: var(--f-mono); }
.brief-relay.empty span { font-style: italic; }
.br-quiet-head { margin: 10px 0 2px; }
.br-quiet { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 14px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; }
.br-quiet li { display: flex; gap: 6px; align-items: baseline; }
.br-quiet b { font-family: var(--f-ui); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.br-quiet span { margin-left: auto; font-family: var(--f-mono); }

@media (max-width: 640px) {
  .clipboard { flex-basis: 100%; margin: 6px 0 0; }
  .intercepts.compact { max-height: 190px; }
  .station.dark-box { flex: 1 1 110px; }
  .intercepts.paper { --ic-w: 22px; --ic-h: 22px; --ic-gap: 3px; --ic-lab: 6.4em; }
  .net-caption { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .net-link.on .lk-flow, .net-link.next .lk-case, .net-node.here .nd-ring, .net-node.here .net-shake { animation: none !important; }
}