/* Mappings: three columns — sources › work tree › destinations (mappings.js; the same component in the web app) */
.mp_layout {display: grid; grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.4fr) minmax(260px, 1fr); gap: 16px; align-items: start; font-size: 13px; }
.mp_col {border: 1px solid var(--line); border-radius: 8px; background: var(--panel); min-width: 0; }
.mp_head {display: flex; align-items: baseline; gap: 8px; padding: 10px 12px 8px; border-bottom: 1px solid var(--line-soft); }
.mp_head .hint, .mp_col .hint {color: var(--muted); font-size: 12px; }
.mp_col p.hint {margin: 6px 0; }
.mp_empty {padding: 8px 12px; }
/* sections */
details.mp_src, details.mp_dst {border-bottom: 1px solid var(--line-soft); }
details.mp_src > summary, details.mp_dst > summary {list-style: none; cursor: pointer; display: grid; grid-template-columns: 22px 1fr; column-gap: 6px; padding: 8px 12px; align-items: center; }
details.mp_src > summary::-webkit-details-marker, details.mp_dst > summary::-webkit-details-marker {display: none; }
details.mp_src > summary .ico, details.mp_dst > summary .ico {color: var(--accent_color); text-align: center; grid-row: 1 / span 2; }
details.mp_src > summary .nm, details.mp_dst > summary .nm {font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details.mp_src > summary small, details.mp_dst > summary small {grid-column: 2; color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details.mp_src > summary .new {color: var(--accent_color); font-weight: 600; }
details.mp_src[open] > summary, details.mp_dst[open] > summary {background: var(--select_active); }
details.mp_src.plus > summary .ico {color: var(--muted); }
details.mp_dst.off {opacity: .6; }
.mp_body {padding: 4px 12px 12px; }
.mp_sub {color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.mp_items, .mp_maps {list-style: none; margin: 0 0 4px; padding: 0; border: 1px solid var(--line-soft); border-radius: 6px; max-height: 28vh; overflow: auto; }
.mp_items li, .mp_maps li {display: flex; align-items: center; gap: 6px; padding: 3px 8px; border-bottom: 1px solid var(--line-soft); }
.mp_items li:last-child, .mp_maps li:last-child {border-bottom: 0; }
.mp_items li.off .nm {color: var(--muted); text-decoration: line-through; }
.mp_items label {display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; cursor: pointer; }
.mp_items input {margin: 0; }
.mp_items .nm, .mp_maps .nm {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.mp_items small, .mp_maps small {color: var(--muted); font-size: 11px; white-space: nowrap; }
.mp_items small.in {color: #1b5e20; }
.mp_arrow {text-align: center; color: var(--accent_color); font-weight: 700; margin: 8px 0 4px; letter-spacing: 2px; }
.mp_arrow span {font-weight: 600; font-size: 12px; letter-spacing: 0; text-transform: uppercase; }
.mp_sel {display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: end; margin: 4px 0; }
.mp_sel label {display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; color: var(--muted); min-width: 0; }
.mp_sel select {font: inherit; font-size: 12.5px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); color: var(--text); max-width: 100%; }
.mp_target {margin: 6px 0; padding: 6px 9px; border-radius: 6px; font-size: 12.5px; }
.mp_target.ok {background: var(--select_active); border: 1px solid var(--line); }
.mp_target.pick {border: 1px dashed var(--accent_color); color: var(--accent_color); animation: mp_pulse 1.6s ease-in-out infinite; }
@keyframes mp_pulse {50% {background: var(--light_accent); } }
.mp_field {display: block; margin: 6px 0 4px; color: var(--muted); font-size: 12px; }
.mp_field input {display: block; width: 100%; margin-top: 3px; font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); color: var(--text); }
.mp_check {display: flex; align-items: center; gap: 6px; margin: 6px 0; font-size: 12.5px; cursor: pointer; }
.mp_check input {margin: 0; }
.mp_sync {display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12.5px; color: var(--muted); margin: 8px 0; }
.mp_sync .on {color: var(--text); font-weight: 700; }
.mp_apply {display: flex; align-items: center; gap: 10px; }
.mp_msg {font-size: 12px; color: var(--muted); }
.mp_stop {margin-top: 8px; }
.mp_earlier {margin: 10px 12px; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: 6px; font-size: 12px; color: var(--muted); }
.mp_tools {display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.mp_tool {border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 14px; padding: 4px 12px; cursor: pointer; font: inherit; }
.mp_tool.sel {border-color: var(--accent_color); background: var(--select_active); }
.mp_tool.off {opacity: .5; cursor: not-allowed; }
.mp_tool small {color: var(--muted); }
/* the tree */
.mp_nodes {padding: 6px 8px 10px; }
.mp_pickbar {margin: 8px 12px 0; padding: 6px 9px; border: 1px dashed var(--accent_color); border-radius: 6px; color: var(--accent_color); font-size: 12.5px; display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.mp_node {display: flex; align-items: center; gap: 5px; padding: 3px 6px 3px calc(6px + var(--d) * 18px); border-radius: 5px; min-height: 26px; }
.mp_node:hover {background: var(--light_accent); }
.mp_node.plan {margin-top: 6px; background: var(--panel-2, var(--light_accent)); }
.mp_node.plan .title {font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .02em; }
.mp_node.plan .ico {color: var(--accent_color); }
.mp_node .caret {width: 14px; color: var(--muted); cursor: pointer; font-size: 10px; text-align: center; }
.mp_node .caret.leaf {cursor: default; }
.mp_node .title {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; min-width: 0; }
.mp_node.thread .title {color: var(--muted); }
.mp_node .cnt {color: var(--muted); font-size: 11px; }
.mp_node .mk {font-size: 11px; padding: 1px 6px; border-radius: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42%; }
.mp_node .mk.src {background: var(--select_active); border: 1px solid var(--line); }
.mp_node .mk.dst {background: var(--light_accent); border: 1px solid var(--accent_color); color: var(--accent_color); }
.mp_node.pickable {outline: 1px dashed var(--accent_color); outline-offset: -1px; }
.mp_node .btn.pick {margin-left: auto; border-color: var(--accent_color); color: var(--accent_color); }
.mp_node.sel {background: var(--select_active); box-shadow: inset 3px 0 0 var(--accent_color); }
/* destinations */
.mp_gate {padding: 12px; font-size: 13px; }
.mp_gate p {margin: 0 0 8px; }
@media (max-width: 1100px) {
  .mp_layout {grid-template-columns: minmax(0, 1fr); }
}