/* [ctx:projects-tools-studio-engine-engine-review-review-overlay-css|v:2|status:trial|format-rules:css|realm:tool-studio-engine|purpose:The comment layer's own furniture. Deliberately written WITHOUT the project cascade so a client's site cannot restyle the review UI and the review UI cannot leak into the site|why:the overlay renders on top of somebody's design, and a bar inheriting the client's h1 font is how a review tool looks broken on the one site it was built for] */
/* workspace-dependency:: @ctx:projects-tools-studio-engine-workbench-docs-modules-review-comment-layer@1 */

/* [#NOT-ONE-PROJECT-TOKEN-IS-READ-HERE]
   Every value is literal. Reading var(--primary) would mean the overlay changes colour per
   client, and on a dark site the comment box would render dark text on dark. The one thing
   this UI must always be is legible on a page it has never seen. */

[data-review-ui="bar"] {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 2147483000;          /* above a sticky header, a cookie bar and a lightbox */
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #101418;
  color: #fff;
  font: 500 14px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.28);
}

[data-review-ui="bar"] button {
  all: unset;                    /* the page's own button rules do not reach in */
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 999px;
  background: #2f7ef7;
  color: #fff;
  font: inherit;
}
[data-review-ui="bar"] button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
[data-review-ui="count"] { opacity: 0.75; font-size: 13px; }

/* the element under the pointer while comment mode is on */
[data-review-ui="hover"] {
  position: absolute;
  z-index: 2147482000;
  display: none;
  pointer-events: none;          /* it must never eat the click it is describing */
  border: 2px solid #2f7ef7;
  border-radius: 3px;
  background: rgb(47 126 247 / 0.10);
}

/* [#the-CURSOR-is-the-only-honest-signal-that-a-CLICK-does-something-else]
   In comment mode a click comments instead of navigating. Without this a client clicks a
   menu item, nothing happens, and he concludes the site is broken. */
body.review-on, body.review-on * { cursor: crosshair !important; }
body.review-on [data-review-ui], body.review-on [data-review-ui] * { cursor: default !important; }

[data-review-ui="box"] {
  position: absolute;
  z-index: 2147483001;
  width: 320px;
  padding: 14px;
  border-radius: 10px;
  background: #fff;
  color: #101418;
  font: 400 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  box-shadow: 0 10px 40px rgb(0 0 0 / 0.30);
}
[data-review-ui="quote"] {
  margin: 0 0 8px;
  color: #5a6470;
  font-size: 13px;
  font-style: italic;
  /* a long paragraph would otherwise push the buttons off the bottom of the box */
  max-height: 4.5em;
  overflow: hidden;
}
[data-review-ui="box"] textarea {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
  padding: 8px;
  border: 1px solid #c4ccd6;
  border-radius: 6px;
  font: inherit;
  resize: vertical;
}
[data-review-ui="box"] button {
  all: unset;
  cursor: pointer;
  margin-right: 8px;
  padding: 7px 14px;
  border-radius: 6px;
  font: inherit;
}
[data-review-ui="box"] button:first-of-type { background: #2f7ef7; color: #fff; }
[data-review-ui="box"] button:last-of-type  { color: #5a6470; }
[data-review-ui="box"] button:focus-visible { outline: 2px solid #101418; outline-offset: 2px; }

[data-review-ui="pin"] {
  position: absolute;
  z-index: 2147482500;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f7a52f;
  color: #101418;
  font: 700 12px/1 system-ui, sans-serif;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.3);
}

/* a pin the list is pointing at, so a jump-to lands somewhere visible rather than leaving
   the reader to find which of nine orange circles was meant */
[data-review-ui="pin"] { cursor: pointer; }
[data-review-ui="pin"].flash {
  animation: review-flash 1.3s ease-out;
  outline: 3px solid #f7a52f;
  outline-offset: 3px;
}
@keyframes review-flash {
  0%, 100% { transform: scale(1); }
  30%      { transform: scale(1.5); }
}

/* ---- reading one comment ------------------------------------------------- */
[data-review-ui="pop"] {
  position: absolute;
  z-index: 2147483002;          /* above the box, which it replaces */
  width: 300px;
  padding: 14px;
  border-radius: 10px;
  background: #fff;
  color: #101418;
  font: 400 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  box-shadow: 0 10px 40px rgb(0 0 0 / 0.30);
}
[data-review-ui="pop-num"]  { margin: 0 0 6px; color: #8a94a0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
[data-review-ui="pop-text"] { margin: 0 0 10px; white-space: pre-wrap; word-break: break-word; }
[data-review-ui="pop"] button {
  all: unset;
  cursor: pointer;
  margin-right: 8px;
  padding: 7px 14px;
  border-radius: 6px;
  font: inherit;
  background: #2f7ef7;
  color: #fff;
}
[data-review-ui="pop"] button[data-review-ui="danger"] { background: none; color: #c0392b; }
[data-review-ui="pop"] button:focus-visible { outline: 2px solid #101418; outline-offset: 2px; }

/* ---- the list ------------------------------------------------------------ */
/* hidden until comment mode is on: a client reading the site should see the site, and a
   panel of notes over it is the review tool asserting itself on a page that is meant to
   be judged as a finished design */
[data-review-ui="panel"] { display: none; }
body.review-on [data-review-ui="panel"] {
  display: flex;
  flex-direction: column;
  position: fixed;
  right: 16px;
  bottom: 72px;                  /* clear of the bar, which is 16 + its own height */
  z-index: 2147483000;
  width: 300px;
  max-height: 46vh;
  border-radius: 10px;
  background: #fff;
  color: #101418;
  font: 400 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  box-shadow: 0 10px 40px rgb(0 0 0 / 0.28);
  overflow: hidden;
}
[data-review-ui="panel-head"] {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid #e4e9ef;
  font-weight: 600;
}
[data-review-ui="panel-count"] { color: #8a94a0; font-weight: 400; }
[data-review-ui="panel"] ul { margin: 0; padding: 0; overflow-y: auto; list-style: none; }
[data-review-ui="panel"] li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 14px;
  border-bottom: 1px solid #f0f3f7;
  cursor: pointer;
}
[data-review-ui="panel"] li:hover { background: #f5f8fc; }
[data-review-ui="panel"] li[data-review-ui="empty"] { color: #8a94a0; cursor: default; }
[data-review-ui="panel"] li[data-review-ui="empty"]:hover { background: none; }
[data-review-ui="n"] {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #f7a52f;
  font: 700 11px/1 system-ui, sans-serif;
}
/* two lines then ellipsis -- the list is for RECOGNISING a note, the popover is for reading it */
[data-review-ui="tx"] {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

[data-review-ui="toast"] {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(12px);
  z-index: 2147483010;
  padding: 10px 18px;
  border-radius: 999px;
  background: #101418;
  color: #fff;
  font: 500 14px/1.3 system-ui, sans-serif;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
[data-review-ui="toast"].show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* [#the-REVIEW-FURNITURE-NEVER-PRINTS]
   A client printing the page to mark it up by hand is a real thing, and pins over the text
   make that worse rather than better. */
@media print { [data-review-ui] { display: none !important; } }