/* AA KPI Tree: margin comments, Google Docs style.
   No backend. Comments live in the browser only. Purely additive: the only change
   to the page is a right-hand gutter reserved via body padding. */

/* The page is a fixed 1620px inside a CENTRED FLEX body, so it already overflows a
   laptop viewport. Centred flex + an overflowing child makes a right gutter
   unreachable, so switch to block flow with auto margins: the page still centres
   when there is room, left-aligns when there is not, and the reserved gutter is
   always scrollable-to. */
body.cmt-on { position: relative; display: block !important; padding-right: 400px !important; }
body.cmt-on > .page { margin-left: auto !important; margin-right: auto !important; }

#cmt-layer { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 30; }
#cmt-layer > * { pointer-events: auto; }

/* connector lines from node to card */
#cmt-wires { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; z-index: 29; }
#cmt-wires path { fill: none; stroke: #e5a83b; stroke-width: 1.5; stroke-dasharray: 3 3; opacity: 0; transition: opacity 0.12s; }
#cmt-wires path.on { opacity: 0.9; }

/* ---------- the node side ---------- */
.cmt-host { position: relative; }
.cmt-host.commented { box-shadow: inset 0 0 0 2px #f0c14b, 0 0 0 3px rgba(240, 193, 75, 0.18); border-radius: 8px; }
.cmt-host.active-anchor { box-shadow: inset 0 0 0 2px #e5851b, 0 0 0 4px rgba(229, 133, 27, 0.22); border-radius: 8px; }

.cmt-add {
  position: absolute;
  top: 5px; right: 5px;
  z-index: 6;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 1px solid rgba(16, 24, 40, 0.14);
  border-radius: 50%;
  background: #fff;
  color: #667085;
  font: 700 13px/1 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s, color 0.12s, transform 0.12s;
  -webkit-user-select: none; user-select: none;
}
.cmt-host:hover > .cmt-add { opacity: 1; }
.cmt-add:hover { background: #101828; color: #fff; border-color: #101828; transform: scale(1.08); }
.cmt-add.has { opacity: 1; background: #fef0c7; color: #7a4b00; border-color: #f0c14b; width: auto; min-width: 24px; padding: 0 7px; border-radius: 12px; }
.nsm > .cmt-add { background: rgba(255,255,255,0.22); color: #fff; border-color: rgba(255,255,255,0.45); }
.nsm > .cmt-add:hover { background: #fff; color: #0b7a5b; }

/* ---------- the margin card ---------- */
.cmt-card {
  position: absolute;
  width: 336px;
  background: #fff;
  border: 1px solid #dfe3ea;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.07);
  padding: 12px 13px 11px;
  font: 400 13px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #16202e;
  transition: top 0.16s ease-out, box-shadow 0.12s, border-color 0.12s;
}
.cmt-card:hover, .cmt-card.active { border-color: #e5a83b; box-shadow: 0 4px 16px rgba(16, 24, 40, 0.13); }
.cmt-card.resolved { opacity: 0.55; background: #f7f8fa; }
.cmt-card .anchor {
  font: 700 10.5px/1.3 inherit;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #b08114;
  margin-bottom: 8px;
  cursor: pointer;
  display: flex; align-items: baseline; gap: 6px;
}
.cmt-card .anchor:hover { color: #7a4b00; text-decoration: underline; }
.cmt-card .anchor .rs { color: #1e6b45; letter-spacing: 0.6px; }

.cmt-note { padding: 8px 0; border-top: 1px solid #f1f2f5; }
.cmt-note:first-of-type { border-top: 0; padding-top: 0; }
.cmt-note .hd { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.cmt-note .av {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  font: 800 9.5px/1 inherit; color: #fff; letter-spacing: 0.3px;
}
.cmt-note .nm { font-weight: 700; font-size: 12.5px; color: #101828; }
.cmt-note .tm { font-size: 11px; color: #98a2b3; margin-left: auto; }
.cmt-note .bd { font-size: 13px; white-space: pre-wrap; word-break: break-word; color: #344054; padding-left: 29px; }
.cmt-note .del { font-size: 11px; color: #b42318; cursor: pointer; font-weight: 700; padding-left: 29px; margin-top: 4px; display: inline-block; }

.cmt-card .acts { display: flex; align-items: center; gap: 6px; margin-top: 9px; }
.cmt-card .acts button {
  font: 600 11.5px/1 inherit; padding: 6px 9px; border-radius: 6px;
  border: 1px solid #dfe3ea; background: #fff; color: #475467; cursor: pointer;
}
.cmt-card .acts button:hover { background: #f2f4f8; color: #101828; }
.cmt-card .acts .sp { flex: 1; }

.cmt-card textarea {
  width: 100%; min-height: 62px; resize: vertical; padding: 8px 9px;
  border: 1px solid #dfe3ea; border-radius: 7px; font: inherit; font-size: 13px; color: #16202e;
}
.cmt-card textarea:focus { outline: 2px solid #e5a83b; outline-offset: -1px; border-color: #e5a83b; }
.cmt-card .send {
  font: 700 12px/1 inherit; padding: 8px 13px; border-radius: 7px;
  border: 1px solid #101828; background: #101828; color: #fff; cursor: pointer;
}
.cmt-card .send[disabled] { opacity: 0.4; cursor: default; }
.cmt-card .ghost { background: #fff !important; color: #475467 !important; border-color: #dfe3ea !important; }

/* ---------- gutter header ---------- */
#cmt-head {
  position: absolute;
  width: 336px;
  top: 0;
  font: 400 12px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
#cmt-head .ttl { font: 800 13px/1.2 inherit; color: #101828; letter-spacing: 0.2px; }
#cmt-head .sub { color: #98a2b3; margin-top: 4px; font-size: 11.5px; line-height: 1.45; }
#cmt-head .bar { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
#cmt-head button {
  font: 600 11.5px/1 inherit; padding: 7px 10px; border-radius: 7px;
  border: 1px solid #dfe3ea; background: #fff; color: #344054; cursor: pointer;
}
#cmt-head button:hover { background: #f2f4f8; }
#cmt-head .me { margin-top: 8px; font-size: 11.5px; color: #667085; }
#cmt-head .me b { color: #101828; }
#cmt-head .me span { cursor: pointer; text-decoration: underline; color: #4759d6; margin-left: 5px; }

#cmt-empty {
  position: absolute; width: 336px;
  border: 1px dashed #dfe3ea; border-radius: 10px; padding: 14px;
  color: #98a2b3; font: 400 12.5px/1.55 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media print {
  body.cmt-on { padding-right: 48px !important; }
  #cmt-layer, #cmt-wires, .cmt-add { display: none !important; }
}

/* ---------- shared/local status (added for the KV-backed shared version) ---------- */
/* Live status line under the toolbar. Calm by default, muted red only on a transient
   send error. Never a full-width red banner: setup-pending must read as pending. */
#cmt-head .status { margin-top: 6px; font-size: 11px; line-height: 1.35; color: #667085; min-height: 0; }
#cmt-head .status:empty { margin-top: 0; }
#cmt-head .status.err { color: #b42318; }

/* When the KV namespace is not bound yet, the whole gutter header reads as a calm
   amber note ("sharing not connected yet"), so nobody mistakes pending for broken. */
#cmt-head.cmt-local .sub {
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  padding: 7px 9px;
  border-radius: 7px;
  margin-top: 6px;
}