/* Combination-landscape matrix, tooltip, and detail panel. */
#landscape-matrix{overflow-x:auto;padding-bottom:8px}
#lsm{display:grid;gap:2px;min-width:680px}
#lsm .cell{aspect-ratio:1;min-width:15px;border-radius:2px}
#lsm .cell.diag{background:var(--panel2)}
#lsm .cell.field{background:rgba(108,197,255,var(--a,.3));cursor:pointer}
#lsm .cell.lab{background:var(--accent2);cursor:pointer}
#lsm .cell.open{background:rgba(255,255,255,.035);cursor:pointer}
#lsm .cell.open:hover{background:rgba(255,255,255,.12)}
#lsm .cell.field:hover,#lsm .cell.lab:hover{outline:1px solid #fff}
#lsm .rowlbl{font-size:11px;color:var(--muted);white-space:nowrap;text-align:right;padding-right:8px;
  display:flex;align-items:center;justify-content:flex-end}
#lsm .collbl{writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;color:var(--muted);
  white-space:nowrap;height:130px;display:flex;align-items:center;justify-content:flex-start}

.ls-legend{display:flex;gap:1.3rem;flex-wrap:wrap;margin:0 0 18px;font-size:.82rem;color:var(--muted)}
.ls-legend span{display:inline-flex;align-items:center;gap:.4rem}
.ls-legend .sw{width:13px;height:13px;border-radius:3px}

#ls-tip{position:fixed;z-index:60;pointer-events:none;display:none;max-width:280px;
  background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:.55rem .7rem;
  font-size:.8rem;box-shadow:0 8px 28px rgba(0,0,0,.45)}
#ls-tip b{color:var(--ink)}
#ls-tip .s{display:block;color:var(--muted);font-size:.72rem;margin-top:.25rem}
#ls-tip .s.lab{color:var(--accent2)}

#ls-panel{position:fixed;top:0;right:0;height:100%;width:min(430px,92vw);background:var(--bg2);
  border-left:1px solid var(--line);z-index:70;padding:56px 28px 40px;overflow-y:auto;
  transform:translateX(100%);transition:transform .2s;box-shadow:-18px 0 50px rgba(0,0,0,.5)}
#ls-panel.open{transform:none}
#ls-panel .x{position:absolute;top:16px;right:20px;background:none;border:none;color:var(--muted);font-size:1.7rem;cursor:pointer}
#ls-panel .x:hover{color:var(--ink)}
#ls-panel .tag{display:inline-block;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:.25rem .55rem;border-radius:999px;margin-bottom:.8rem}
#ls-panel .tag.field{background:#6cc5ff22;color:var(--accent)}
#ls-panel .tag.lab{background:#a98bff22;color:var(--accent2)}
#ls-panel .tag.open{background:#ffffff14;color:var(--muted)}
#ls-panel h3{font-size:1.2rem;margin:0 0 .3rem;line-height:1.3}
#ls-panel .c{color:var(--muted);font-size:.84rem;margin:0 0 1.1rem}
#ls-panel .art{display:block;padding:.6rem 0;border-top:1px solid rgba(39,48,74,.5);font-size:.85rem;line-height:1.4}
#ls-panel .art a{color:var(--ink);text-decoration:none}
#ls-panel .art a:hover{color:var(--accent)}
#ls-panel .art .meta{color:var(--faint);font-size:.74rem}
#ls-panel .cta{display:inline-block;margin-top:.4rem;padding:.55rem .9rem;border-radius:8px;background:var(--panel2);color:var(--accent);border:1px solid var(--line);text-decoration:none;font-size:.84rem}
#ls-panel .cta:hover{border-color:var(--accent)}