/* Position lights trainer (js/lights.js): the canvas view, switches, and the sector plan view. */
.lt-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); gap: 16px; align-items: start; }
.lt-viewcol { position: sticky; top: calc(var(--bar) + 12px); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lt-viewcard { padding: 8px; overflow: hidden; }
.lt-cv { display: block; width: 100%; border-radius: var(--r-s); background: #03060d; touch-action: none; cursor: grab; }
.lt-cv:active { cursor: grabbing; }
.lt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 4px 4px; }
.lt-moon { margin-left: auto; }
.lt-hint { margin: 0 4px; }
.lt-seg { display: inline-flex; padding: 3px; border-radius: 99px; background: var(--canvas); border: 1px solid var(--line); }
.lt-seg button { height: 30px; padding: 0 13px; border: 0; border-radius: 99px; background: none; color: var(--ink-2); font: 700 .85rem var(--ui); cursor: pointer; }
.lt-seg button[aria-pressed="true"] { background: var(--sunrise); color: #fff; box-shadow: 0 3px 10px rgba(var(--accent-rgb), .3); }
.lt-ctl { display: grid; gap: 12px; }
.lt-presets { gap: 4px; }
.lt-presets .btn { height: 32px; padding: 0 10px; font-size: .85rem; }
.lt-range { display: grid; gap: 4px; font: 600 .88rem var(--ui); color: var(--ink-2); }
.lt-range b { color: var(--ink); font-weight: 700; }
.lt-range input { width: 100%; accent-color: var(--orange); }
/* the switch panel, like the airplane's rocker switches */
.lt-sws { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border-radius: var(--r-s); background: #11141b; }
.lt-sw { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; min-width: 62px; padding: 7px 8px 6px; border: 1px solid #333a47; border-radius: 8px; background: #1a1f29; color: #9ca3af; font: 800 .7rem var(--ui); letter-spacing: .04em; cursor: pointer; }
.lt-sw i { width: 14px; height: 22px; border-radius: 4px; background: linear-gradient(#4b5563 0 50%, #20252f 50%); box-shadow: inset 0 0 0 1px #000; }
.lt-sw[aria-pressed="true"] { color: #fde68a; border-color: #6b5a1f; }
.lt-sw[aria-pressed="true"] i { background: linear-gradient(#20252f 0 50%, #e5e7eb 50%); box-shadow: inset 0 0 0 1px #000, 0 0 8px rgba(253, 230, 138, .45); }
/* what you see */
.lt-readgrid { display: grid; grid-template-columns: minmax(150px, 200px) minmax(0, 1fr); gap: 14px; align-items: start; }
.lt-plancell { touch-action: none; cursor: pointer; }
.lt-seen { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .9rem; }
.lt-seen li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; align-items: start; line-height: 1.35; }
.lt-dot { width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); }
.lt-means { margin: 0 0 14px; padding: 10px 12px; border-radius: var(--r-s); background: var(--canvas); line-height: 1.5; font-size: .95rem; }
.lt-warn { color: var(--bad); font-weight: 600; }
.lt-about { line-height: 1.5; }
/* plan view */
.lt-plan { display: block; width: 100%; height: auto; }
.lt-sec { stroke: none; opacity: .28; }
.lt-sec.on { opacity: .6; }
.lt-sec.g { fill: var(--good); } .lt-sec.r { fill: var(--bad); } .lt-sec.w { fill: var(--line); }
.lt-slab { font: 700 10px var(--ui); text-anchor: middle; fill: var(--ink-2); }
.lt-ring { fill: none; stroke: var(--line); stroke-dasharray: 2 4; }
.lt-los { stroke: var(--orange); stroke-width: 1.5; stroke-dasharray: 4 3; }
.lt-ac { fill: var(--ink); }
.lt-eye circle { fill: var(--orange); }
.lt-eye text { fill: #fff; font: 800 8px var(--ui); text-anchor: middle; }
.lt-plab { font: 600 10px var(--ui); fill: var(--ink-3); text-anchor: middle; }
@media (max-width: 900px) {
  .lt-layout { grid-template-columns: minmax(0, 1fr); }
  .lt-viewcol { position: static; }
}
@media (max-width: 520px) {
  .lt-readgrid { grid-template-columns: minmax(0, 1fr); }
  .lt-plancell { max-width: 220px; margin: 0 auto; }
}
.lt-sel { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-weight: 600; }
.lt-sel select { height: 34px; padding: 0 8px; font-size: .88rem; }
.lt-tip { display: block; margin-top: 8px; color: var(--ink-2); }
.lt-bar2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; width: 100%; }
.lt-flight-controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;padding:12px 16px;border-top:1px solid var(--line);background:var(--surface)}
.lt-flight-controls label{display:flex;align-items:center;gap:7px;font-size:.82rem;color:var(--ink-2)}
.lt-flight-controls select{height:38px;font-size:.85rem;padding:0 8px}
.lt-flight-controls strong{margin-left:auto;font-size:.85rem;font-variant-numeric:tabular-nums}
.lt-flight-controls #ltFlightStatus{flex-basis:100%;font-size:.76rem}
@media(max-width:550px){.lt-flight-controls{padding:12px}.lt-flight-controls strong{margin-left:0}}