/* ============================================================
   FEEDBACK OVERLAY
   Intentionally NOT the site's design language. Light chrome,
   system font, square corners, hard shadows — it should read as
   scaffolding bolted on top, never as part of the product.
   ============================================================ */

/* The bar is fixed, so the page needs to start below it. Height is
   measured at runtime (it wraps to two rows on a phone) and written
   back as --gpfb-top; 46px is the desktop fallback. */
:root.gpfb-shift body { padding-top: var(--gpfb-top, 46px); }

#gpfb-bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 2147483000;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 14px;
  background: #f4f4f5;
  border-bottom: 2px solid #18181b;
  color: #18181b;
  font: 13px/1.3 -apple-system, "Segoe UI", system-ui, sans-serif;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}
#gpfb-bar.gpfb-active { background: #fef3c7; border-bottom-color: #b45309; }

.gpfb-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gpfb-left strong { font-weight: 700; }
.gpfb-sub { color: #52525b; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gpfb-dot { width: 9px; height: 9px; background: #a1a1aa; flex: none; }
#gpfb-bar.gpfb-active .gpfb-dot { background: #dc2626; }

.gpfb-right { display: flex; align-items: center; gap: 7px; flex: none; }
#gpfb-name {
  font: inherit; padding: 6px 9px; width: 130px;
  border: 1px solid #a1a1aa; background: #fff; color: #18181b;
}
#gpfb-name:focus { outline: 2px solid #2563eb; outline-offset: -1px; }

.gpfb-btn {
  font: inherit; font-size: 12.5px; cursor: pointer;
  padding: 6px 11px; border: 1px solid #18181b; background: #fff; color: #18181b;
}
.gpfb-btn:hover { background: #e4e4e7; }
.gpfb-primary { background: #18181b; color: #fff; }
.gpfb-primary:hover { background: #3f3f46; }
.gpfb-quiet { border-color: #a1a1aa; color: #52525b; padding: 6px 8px; }
.gpfb-btn b { font-variant-numeric: tabular-nums; }

/* the whole page becomes clickable targets */
:root.gpfb-picking * { cursor: crosshair !important; }
:root.gpfb-picking #gpfb-bar,
:root.gpfb-picking #gpfb-bar * { cursor: default !important; }
:root.gpfb-picking body *:hover {
  outline: 2px solid rgba(220, 38, 38, 0.55);
  outline-offset: -1px;
}

/* pins */
#gpfb-layer { position: absolute; inset: 0; pointer-events: none; z-index: 2147482000; }
.gpfb-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  width: 24px; height: 24px;
  border-radius: 50% 50% 50% 2px;
  background: #dc2626;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  font: 700 11px/1 -apple-system, "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
}
.gpfb-pin.gpfb-done { background: #16a34a; }

/* comment form */
.gpfb-form {
  position: absolute;
  z-index: 2147483100;
  width: 300px;
  background: #fff;
  border: 2px solid #18181b;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35);
  padding: 10px;
  font: 13px/1.4 -apple-system, "Segoe UI", system-ui, sans-serif;
  color: #18181b;
}
.gpfb-ctx {
  font-size: 11px; color: #52525b; background: #f4f4f5;
  border: 1px solid #e4e4e7; padding: 4px 6px; margin-bottom: 7px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gpfb-form textarea {
  width: 100%; font: inherit; padding: 7px; border: 1px solid #a1a1aa; resize: vertical;
}
.gpfb-form textarea:focus { outline: 2px solid #2563eb; outline-offset: -1px; }
.gpfb-frow { display: flex; gap: 6px; margin-top: 7px; }

/* panel */
#gpfb-panel {
  position: fixed;
  top: var(--gpfb-top, 46px); right: 0; bottom: 0;
  width: 320px;
  z-index: 2147483050;
  background: #fff;
  border-left: 2px solid #18181b;
  color: #18181b;
  font: 13px/1.45 -apple-system, "Segoe UI", system-ui, sans-serif;
  overflow-y: auto;
}
#gpfb-panel[hidden] { display: none; }
#gpfb-panel header {
  position: sticky; top: 0;
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; background: #f4f4f5; border-bottom: 1px solid #d4d4d8;
}
#gpfb-panel header strong { font-weight: 700; }
#gpfb-panel header span { color: #52525b; font-size: 12px; margin-right: auto; }
.gpfb-pg h4 {
  margin: 0; padding: 7px 12px; background: #fafafa;
  border-bottom: 1px solid #e4e4e7; font-size: 11px; color: #52525b; font-weight: 600;
}
.gpfb-item { padding: 10px 12px; border-bottom: 1px solid #e4e4e7; }
.gpfb-item.gpfb-focus { background: #fef3c7; }
.gpfb-item.gpfb-done { opacity: 0.55; }
.gpfb-item.gpfb-done p { text-decoration: line-through; }
.gpfb-meta { display: flex; gap: 8px; align-items: baseline; margin-bottom: 3px; }
.gpfb-meta b { font-size: 12px; }
.gpfb-meta span { font-size: 11px; color: #71717a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gpfb-item p { margin: 0 0 6px; font-size: 13px; }
.gpfb-actions { display: flex; gap: 10px; }
.gpfb-link {
  font: inherit; font-size: 11.5px; background: none; border: 0; padding: 0;
  color: #2563eb; cursor: pointer; text-decoration: underline;
}
.gpfb-link.gpfb-del { color: #b91c1c; }
.gpfb-empty { padding: 18px 12px; color: #71717a; font-size: 12.5px; }

@media (max-width: 720px) {
  #gpfb-bar { height: auto; flex-wrap: wrap; padding: 8px 10px; gap: 8px; }
  .gpfb-sub { display: none; }
  #gpfb-panel { top: 0; width: 100%; }

  /* Everything shrinks to fit rather than pushing the bar wider than
     the phone. Sticky offsets are measured from the bar, so a taller
     bar just moves the page down, but a wider one scrolls sideways. */
  .gpfb-right { flex: 1 1 100%; flex-wrap: wrap; gap: 6px; }
  #gpfb-name { width: auto; flex: 1 1 90px; min-width: 0; }
  .gpfb-btn { flex: 0 1 auto; min-width: 0; padding: 6px 8px; }
  .gpfb-form { width: min(300px, calc(100vw - 20px)); }
}

/* Sync state. Grey means the tracker took it; red means we are holding
   comments locally and retrying. */
.gpfb-dot { transition: background .15s; }
.gpfb-dot.gpfb-off { background: #dc2626; box-shadow: 0 0 0 2px rgba(220,38,38,.25); }
.gpfb-pin.gpfb-pending { opacity: .55; border-style: dashed; }

/* ============================================================
   THREADS, FILTERS AND STACKED PINS
   ============================================================ */
#gpfb-who {
  font: inherit; font-size: 12.5px; padding: 6px 7px; max-width: 150px;
  border: 1px solid #a1a1aa; background: #fff; color: #18181b;
}
#gpfb-res[aria-pressed="true"] { background: #18181b; color: #fff; border-color: #18181b; }

/* A pin carrying more than one comment. The count is the whole point —
   a hundred notes on a page has to stay readable. */
.gpfb-pin.gpfb-stack {
  border-radius: 4px;
  background: #7c3aed;
  box-shadow: 0 1px 5px rgba(0,0,0,.5), 2px 2px 0 #fff, 2px 2px 0 1px #7c3aed;
}
.gpfb-pin.gpfb-open { outline: 3px solid #facc15; outline-offset: 1px; }
.gpfb-pin:hover { transform: translate(-50%, -50%) scale(1.15); }

/* threads */
.gpfb-when { font-size: 11px; color: #71717a; }
.gpfb-badge {
  font-size: 10px; background: #fef3c7; border: 1px solid #d4a72c;
  padding: 0 4px; color: #92400e;
}
.gpfb-item .gpfb-ctx { margin: 2px 0 5px; }

.gpfb-replies {
  margin: 6px 0 4px; padding-left: 9px; border-left: 2px solid #e4e4e7;
  display: grid; gap: 7px;
}
.gpfb-reply b { font-size: 12px; margin-right: 6px; }
.gpfb-reply p { margin: 1px 0 0; font-size: 12.5px; }
.gpfb-reply .gpfb-link { font-size: 11px; }

.gpfb-replybox { display: flex; gap: 5px; margin: 6px 0 5px; }
.gpfb-replybox input {
  flex: 1; min-width: 0; font: inherit; font-size: 12.5px;
  padding: 5px 7px; border: 1px solid #d4d4d8; background: #fafafa; color: #18181b;
}
.gpfb-replybox input:focus { outline: 2px solid #2563eb; outline-offset: -1px; background: #fff; }
.gpfb-replybox button { padding: 5px 9px; font-size: 12px; }

@media (max-width: 720px) {
  #gpfb-who { max-width: 110px; }
}

/* Handle to bring the bar back after ✕. Without it, hiding the overlay
   was a one-way trip that needed a page reload to undo. */
#gpfb-restore {
  position: fixed; right: 14px; bottom: 14px;
  z-index: 2147483000;
  width: 40px; height: 40px;
  font-size: 17px; line-height: 1; cursor: pointer;
  background: #f4f4f5; color: #18181b;
  border: 2px solid #18181b;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .35);
}
#gpfb-restore[hidden] { display: none; }
#gpfb-restore:hover { background: #e4e4e7; }

#gpfb-pins[aria-pressed="false"] { background: #18181b; color: #fff; border-color: #18181b; }