/* map view: rules scoped from the former map.html; the shared base is app.css */
:root[data-theme="dark"] #view-map .tile.others {background: var(--panel-2); color: var(--text); border: 0; }
#view-map .chip.sig {background: transparent; border: 1px solid var(--line-soft); }
#view-map .chip.clue {background: transparent; color: var(--muted); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1100px) {
#view-map .chip.clue {display: none; }
}
:root[data-theme="dark"] #view-map .tile.unsorted {background: var(--panel-2); color: var(--text); }
#view-map section {margin-bottom: 22px; }
#view-map section h2 {font-size: 13px; font-weight: 700; color: #2c3e50; margin: 0 0 8px; padding: 6px 12px; background: var(--header_bg); border-radius: 4px; display: flex; align-items: center; gap: 8px; }
#view-map section h2 .count {background: rgba(255,255,255,.7); border-radius: 4px; padding: 0 8px; font-size: 11.5px; font-weight: 600; }
#view-map section.unsorted h2 {background: var(--beige); }
#view-map section.done h2 {background: #d6f5d0; }
#view-map .tree {background: var(--panel); border: 1px solid var(--line-soft); border-radius: 8px; box-shadow: var(--shadow); overflow: hidden; }
#view-map .row {display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 0; border-bottom: 1px solid var(--line-soft); min-height: 36px; position: relative; }
#view-map .row:last-child {border-bottom: 0; }
#view-map .row:hover {background: var(--panel-2); }
#view-map .row.branch {font-weight: 500; }
#view-map .row.branch .title {color: var(--title); font-size: 14.5px; min-width: 250px; }
#view-map .row.detail {color: var(--muted); font-size: 13px; min-height: 28px; }
#view-map .row.detail .title {font-style: italic; }
#view-map .row.dragover {outline: 2px dashed var(--accent_color); outline-offset: -2px; background: var(--light_accent); }
#view-map .row.dragging {opacity: .45; }
#view-map .row .indent {display: inline-flex; align-items: stretch; flex: none; align-self: stretch; }
#view-map .row .indent i {display: block; width: 22px; border-left: 1px solid var(--tree); }
#view-map .row .indent i.last {border-left: 0; }
#view-map .row .caret {width: 18px; flex: none; text-align: center; cursor: pointer; color: var(--muted); font-size: 11px; user-select: none; }
#view-map .row .caret.leaf {cursor: default; visibility: hidden; }
#view-map .row .ico {width: 20px; flex: none; text-align: center; font-size: 13px; color: var(--muted); }
#view-map .row.project .ico, #view-map .row.topic .ico {color: var(--accent_color); }
#view-map .row .title {flex: 1; min-width: 160px; cursor: text; border-radius: 4px; padding: 1px 4px; margin: -1px -4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-map .row .title:hover {background: var(--bg); }
#view-map .row .title[contenteditable="true"] {background: var(--beige); color: #000; outline: 1px solid var(--accent_color); white-space: normal; }
#view-map .row.detail .title {cursor: default; }
#view-map .row.detail .title:hover {background: transparent; }
#view-map .row.done .title {color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line); }
#view-map .chip {font-size: 11px; color: #2c3e50; background: var(--light_blue); border-radius: 4px; padding: 1px 7px; white-space: nowrap; flex: none; }
#view-map .chip.src {background: var(--beige); }
#view-map .chip.cat {background: transparent; border: 1px solid var(--line-soft); color: var(--muted); }
#view-map .chip.auto {background: transparent; color: var(--muted); border: 1px dashed var(--line); cursor: help; }
#view-map .st {display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; flex: none; min-width: 150px; }
#view-map .st .dot {width: 14px; height: 14px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; flex: none; background: var(--grey); }
#view-map .st.needs_you .dot {background: var(--accent_color); }
#view-map .st.needs_you {color: var(--accent_color); font-weight: 600; }
#view-map .st.running .dot {background: #7aa1d2; }
#view-map .st.waiting_for_you .dot {background: #e5c96b; color: #2c3e50; }
#view-map .st.waiting_others .dot {background: #ffffff; color: #5f6f80; border: 1px solid #c9d4e3; }
#view-map .st.ongoing .dot {background: #5cc24a; }
#view-map .st.ongoing {color: #2e7d32; }
:root[data-theme="dark"] #view-map .st.ongoing {color: #9be37f; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) #view-map .st.ongoing {color: #9be37f; }
}
#view-map .st.done .dot {background: #5cc24a; }
#view-map .st.stale .dot {background: var(--light_pink); }
#view-map .metrics {font-size: 11.5px; color: var(--muted); white-space: nowrap; flex: none; min-width: 120px; text-align: right; font-variant-numeric: tabular-nums; display: inline-flex; gap: 10px; justify-content: flex-end; }
#view-map .metrics b {color: var(--text); font-weight: 600; }
#view-map .metrics .t {color: var(--text); }
#view-map .metrics .t small {color: var(--muted); margin-left: 3px; font-size: 10px; }
#view-map .metrics .t.p {color: var(--title); }
#view-map .metrics .t.ai {color: var(--muted); }
#view-map .metrics .t.pam {color: #2e7d32; }
#view-map .chip.priv {background: #ece4f7; color: #5b3a8a; }
#view-map .chip.pam {background: #d6f5d0; color: #1b5e20; }
#view-map #togglePrivate.active {background: #ece4f7; border-color: #5b3a8a; }
#view-map .periodsel {display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
#view-map .periodsel select, #view-map .periodsel input {padding: 3px 6px; font-size: 12px; border: 1px dashed var(--title); border-radius: 5px; background: var(--panel-2); color: var(--text); font-family: inherit; }
:root[data-theme="dark"] #view-map .tile.goals {background: var(--panel-2); color: var(--text); border: 0; }
#view-map .goal {position: relative; display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 10px; font-size: 11px; color: var(--text); background: var(--panel-2); border: 1px solid var(--line-soft); overflow: hidden; flex: none; margin-left: 6px; white-space: nowrap; }
#view-map .goal .bar {position: absolute; left: 0; top: 0; bottom: 0; width: var(--r, 0%); background: var(--light_blue); opacity: .8; }
#view-map .goal.met .bar {background: var(--primary_green); }
#view-map .goal .lbl {position: relative; z-index: 1; }
#view-map .goal small {color: var(--muted); margin: 0 2px; }
#view-map .goalform {display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }
#view-map .goalform input[type=number] {width: 64px; padding: 3px 6px; font-size: 12px; border: 1px solid var(--primary_blue); border-radius: 4px; background: var(--bg); color: var(--text); font-family: inherit; }
#view-map .prio {display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); white-space: nowrap; flex: none; }
#view-map .prio input[type=range] {width: 76px; height: 4px; accent-color: var(--accent_color); cursor: pointer; margin: 0; }
#view-map .prio.inherited input[type=range] {accent-color: var(--primary_blue); }
#view-map .prio .pv {display: inline-block; min-width: 16px; text-align: right; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
#view-map .prio.inherited .pv {font-weight: 400; font-style: italic; color: var(--muted); }
#view-map .prio .pv.hot {color: var(--accent_color); }
#view-map .prio .reset {cursor: pointer; color: var(--muted); border: 0; background: none; font-size: 12px; padding: 0 2px; font-family: inherit; }
#view-map .prio .reset:hover {color: var(--accent_color); }
#view-map .acts {display: inline-flex; gap: 4px; flex: none; opacity: 0; transition: opacity .12s; }
#view-map .row:hover .acts, #view-map .row.menu .acts {opacity: 1; }
#view-map .acts .btn.small {padding: 1px 7px; }
#view-map .acts select {max-width: 160px; }
#view-map .donebar {display: flex; align-items: center; gap: 8px; padding: 3px 10px 3px 0; color: var(--muted); font-size: 12px; cursor: pointer; border-bottom: 1px solid var(--line-soft); }
#view-map .donebar:hover {background: var(--panel-2); }
#view-map .empty {color: var(--muted); font-size: 13px; padding: 14px; border: 1px dashed var(--line); border-radius: 8px; }
#view-map .hint {color: var(--muted); font-size: 12.5px; margin: 0 0 10px; }
#view-map details.raw {margin-top: 28px; }
#view-map details.raw summary {cursor: pointer; color: var(--muted); font-size: 13px; }
#view-map details.raw p {color: var(--muted); font-size: 12.5px; }
#view-map code {font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; background: var(--panel-2); padding: 0 4px; border-radius: 4px; }
@media (max-width: 760px) {
#view-map .metrics, #view-map .hide-sm {display: none; }
#view-map .st {min-width: 0; }
#view-map .acts {opacity: 1; }
}
/* a collapsed thread: obvious, with what lies under it */
#view-map .row.folded { background: var(--light_accent, #eef3fb); box-shadow: inset 3px 0 0 var(--primary_blue, #4a6fa5); }
#view-map .row.folded .caret { color: var(--primary_blue, #4a6fa5); font-weight: 700; }
#view-map .chip.fold { background: transparent; border: 1px solid var(--primary_blue, #4a6fa5); color: var(--primary_blue, #4a6fa5); font-weight: 600; }
#view-map .chip.fold.mine { background: #b3261e; border-color: #b3261e; color: #fff; }
#view-map .chip.fold b { font-weight: 700; }
#view-map .row .caret:not(.leaf):hover { background: rgba(0,0,0,.08); border-radius: 4px; }
#view-map .notice {position: sticky; top: 0; z-index: 5; margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--line); border-left: 3px solid #d97706; border-radius: 6px; background: var(--card, var(--bg)); color: var(--ink, inherit); font-size: 13px; }
#view-map .confirm {font-size: 12.5px; color: var(--muted); white-space: nowrap; }
#view-map .btn.danger {background: #b42318; border-color: #b42318; color: #fff; }
/* ---- features that came from the former "Threads in flight" screen ---- */
#view-map .filter_row {display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 10px 14px; margin-bottom: 18px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
#view-map .filter_row label {display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
#view-map .filter_row select, #view-map .filter_row input[type=text] {border: 1px dashed var(--title); border-radius: 5px; background: var(--panel-2); font-size: 12px; color: var(--text); min-width: 130px; padding: 5px 8px; max-width: 220px; }
#view-map .filter_row select.on, #view-map .filter_row input[type=text].on {border-style: solid; background: var(--beige); color: #000; }
#view-map .filter_row .hint {color: var(--muted); font-size: 12px; }
#view-map .chip.focus {background: var(--light_accent); color: #a4113a; font-weight: 600; }
#view-map .chip.ok {background: #d6f5d0; color: #1b5e20; }
#view-map .stars {display: inline-flex; gap: 1px; }
#view-map .stars span {cursor: pointer; color: var(--line); font-size: 15px; line-height: 1; }
#view-map .stars span.on, #view-map .stars span.hover {color: var(--accent_color); }
#view-map .rowinfo {margin: -2px 0 4px 64px; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view-map .rowinfo .k {font-weight: 700; margin: 0 4px 0 10px; }
#view-map .rowinfo .k:first-child {margin-left: 0; }
#view-map .rowinfo b {color: var(--text); font-weight: 600; }
#view-map label.psync {display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--muted); cursor: pointer; }
#view-map label.psync input {margin: 0; }
#view-map table.events {width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; font-variant-numeric: tabular-nums; }
#view-map table.events td {padding: 3px 8px 3px 0; border-top: 1px solid var(--line-soft); vertical-align: top; }
#view-map table.events td.t {color: var(--muted); white-space: nowrap; }
:root[data-theme="dark"] #view-map .tile.switches {background: var(--panel-2); color: var(--text); border: 0; }
/* ---- the analytical plans at the top of the tree ---- */
#view-map .map_main {min-width: 0; }
#view-map .row.plan {background: var(--panel-2, var(--light_accent)); border-radius: 6px; margin-top: 6px; }
#view-map .row.plan .title.plan {font-weight: 700; letter-spacing: .02em; text-transform: uppercase; font-size: 12px; cursor: default; }
#view-map .row.plan .ico {color: var(--accent_color); }
/* PA switch (same pill as the web app) */
.switch {position: relative; display: inline-block; width: 48px; height: 20px; flex: none; }
.switch input {opacity: 0; width: 0; height: 0; margin: 0; }
.slider2 {position: absolute; cursor: pointer; left: 0; right: 0; top: 0; bottom: 0; background-color: #ccc; transition: .3s; }
.slider2.round {border-radius: 12px; }
.slider2:before {position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: #fff; transition: .3s; border-radius: 50%; }
input:checked + .slider2 {background-color: var(--primary_blue); }
input:checked + .slider2:before {transform: translateX(28px); }
input:focus-visible + .slider2 {outline: 2px solid var(--accent_color); outline-offset: 2px; }
#views.views_row {max-width: 460px; }
/* the line's actions float over its right end while the pointer is on it (the sources panel narrows the tree) */
#view-map .row .acts {position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: none; opacity: 1; background: var(--panel); border: 1px solid var(--line-soft); border-radius: 6px; padding: 2px 4px; box-shadow: var(--shadow); z-index: 3; align-items: center; }
#view-map .row:hover .acts, #view-map .row:focus-within .acts, #view-map .row.menu .acts, #view-map .row.actsopen .acts {display: inline-flex; }
#view-map .row .pickbtn {flex: none; }
@media (max-width: 760px) {
#view-map .row .acts {position: static; transform: none; display: inline-flex; box-shadow: none; border: 0; padding: 0; }
}
#view-map .row.pickable .acts {right: 92px; }
/* automatic priority, due dates and efforts (AI_priority.go) */
#view-map .prio .zap {color: var(--accent_color); font-size: 12px; cursor: help; }
#view-map .prio.auto .pv {color: var(--accent_color); font-weight: 700; font-style: normal; }
#view-map .chip.due {background: transparent; border: 1px solid var(--line); color: var(--text); }
#view-map .chip.due.soon {border-color: var(--accent_color); color: var(--accent_color); }
#view-map .chip.due.past {background: var(--accent_color); border-color: var(--accent_color); color: #fff; }
#view-map .chip.due.hint {border-style: dashed; cursor: help; }
#view-map .chip.due.inh {border-style: dotted; color: var(--muted); }
#view-map .chip.effort {background: transparent; border: 1px solid var(--line-soft); color: var(--muted); }
#view-map .dueform input[type=date] {padding: 3px 6px; font-size: 12px; border: 1px solid var(--primary_blue); border-radius: 4px; background: var(--bg); color: var(--text); font-family: inherit; }
#view-map .dueform label {font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 3px; }
#view-map .tile.lowprio {background: var(--beige); }
#view-map .tile.lowprio .value {color: var(--accent_color); }
#view-map .tile .tile_link {color: inherit; text-decoration: underline dotted; }
/* quiet threads (nothing in a week, nothing waiting): folded under one line */
#view-map .donebar.quiet {color: var(--muted); font-style: italic; }
#view-map .donebar.quiet .ico {color: var(--muted); }
/* "why is it here?": the question mark next to the auto chip, and the explanation line with the verdict */
#view-map .chip.why {background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 50%; width: 18px; height: 18px; padding: 0; line-height: 16px; text-align: center; cursor: pointer; font-weight: 700; }
#view-map .chip.why:hover, #view-map .chip.why.on {color: var(--text); border-color: var(--text); }
#view-map .rowinfo.why {white-space: normal; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; border-left: 3px solid var(--line); background: color-mix(in srgb, var(--light_blue) 35%, transparent); border-radius: 0 6px 6px 0; }
#view-map .rowinfo.why .whyacts {display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
#view-map .rowinfo.why .hint {font-size: 11px; color: var(--muted); }
#view-map .row .from {font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; flex: none; }