/* Ideation review layer — shared by every direction prototype.
   Deliberately neutral (black, white, one highlighter yellow) so it never reads as part of a direction's design.
   Hidden entirely with ?clean in the URL; notes toggle with the N key or the bar button. */

:root {
  --ide-ink: #111214;
  --ide-paper: #ffffff;
  --ide-mark: #ffe14d;
  --ide-font: ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
}

.ide-bar {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 2147483000;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: var(--ide-ink);
  color: var(--ide-paper);
  font: 500 12px/1 var(--ide-font);
  letter-spacing: 0;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
  max-width: calc(100vw - 20px);
  white-space: nowrap;
}
.ide-bar a,
.ide-bar button {
  all: unset;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 999px;
  color: inherit;
}
.ide-bar a:hover,
.ide-bar button:hover { background: rgba(255, 255, 255, 0.12); }
.ide-bar a:focus-visible,
.ide-bar button:focus-visible { outline: 2px solid var(--ide-mark); outline-offset: 1px; }
.ide-bar .ide-title { padding: 8px 10px; opacity: 0.92; overflow: hidden; text-overflow: ellipsis; }
.ide-bar .ide-title b { font-weight: 700; }
.ide-bar .ide-toggle[aria-pressed="true"] { background: var(--ide-mark); color: var(--ide-ink); }
.ide-bar kbd { font: inherit; opacity: 0.6; margin-left: 4px; }
@media (max-width: 560px) {
  .ide-bar .ide-title span { display: none; }
  .ide-bar kbd { display: none; }
}

/* Notes: numbered pin on the element, card beside it. Positioned in document coordinates. */
.ide-notes-layer {
  position: absolute;
  inset: 0 auto auto 0;
  width: 0;
  height: 0;
  z-index: 2147482000;
  pointer-events: none;
}
.ide-pin {
  position: absolute;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background: var(--ide-mark);
  color: var(--ide-ink);
  font: 800 11px/22px var(--ide-font);
  text-align: center;
  box-shadow: 0 0 0 2px var(--ide-ink), 0 3px 8px rgba(0, 0, 0, 0.3);
}
.ide-card {
  position: absolute;
  width: max-content;
  max-width: 250px;
  padding: 9px 11px 10px;
  border-radius: 8px;
  background: var(--ide-ink);
  color: #f3f3f3;
  font: 400 12px/1.42 var(--ide-font);
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
}
.ide-card strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ide-mark);
  font-weight: 700;
  font-size: 11px;
}
.ide-card .ide-n {
  display: inline-block;
  min-width: 16px;
  margin-right: 5px;
  color: var(--ide-ink);
  background: var(--ide-mark);
  border-radius: 4px;
  text-align: center;
  font-weight: 800;
}
html.ide-notes-off .ide-notes-layer { display: none; }
html.ide-clean .ide-bar,
html.ide-clean .ide-notes-layer { display: none !important; }
@media print { .ide-bar, .ide-notes-layer { display: none !important; } }