/* review-panel.css — the whole panel's styling.
   Everything is driven by the --rv-* custom properties declared on :root below,
   so branding a new site means overriding those and nothing else. Defaults are a
   neutral dark panel; see references/theming.md for the light variant.
   Every selector is prefixed .rv- to keep it out of the host site's cascade. */
:root {
  --rv-panel:  #0e1013;
  --rv-raised: #15181d;
  --rv-line:   rgba(255,255,255,.10);
  --rv-line-2: rgba(255,255,255,.16);
  --rv-text:   #eef1f5;
  --rv-dim:    #98a1ae;
  --rv-faint:  #6c7480;
  --rv-accent: #d81114;
  --rv-accent-hi: #f0282b;
  --rv-ok:     #2ea043;
  --rv-sans:   ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --rv-mono:   ui-monospace, SFMono-Regular, Menlo, monospace;
  --rv-radius: 8px;
  --rv-dock-w: 380px;
  --rv-rail-w: 52px;
  --rv-z:      2147483000;
}

.rv-root, .rv-root * { box-sizing: border-box; }
:where(.rv-root) button { font: inherit; color: inherit; } /* :where keeps this below .rv-tab, .rv-post etc. */

/* ---- collapsed rail ---- */
.rv-rail {
  position: fixed; right: 0; top: 0; bottom: 0; width: var(--rv-rail-w);
  z-index: var(--rv-z); cursor: pointer; border: 0;
  background: var(--rv-accent);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding-top: 90px;
}
.rv-rail-label {
  margin-top: 6px; font: 500 9.5px/1 var(--rv-mono); letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.85); writing-mode: vertical-rl;
}

/* ---- dock ---- */
.rv-dock {
  position: fixed; right: 0; top: 0; bottom: 0; width: var(--rv-dock-w);
  z-index: var(--rv-z); background: var(--rv-panel);
  border-left: 1px solid var(--rv-line-2);
  display: flex; flex-direction: column; min-height: 0;
  box-shadow: -8px 0 40px rgba(0,0,0,.5);
  font-family: var(--rv-sans); color: var(--rv-text);
}
.rv-head {
  flex-shrink: 0; display: flex; align-items: center; gap: 10px;
  padding: 12px 10px 12px 16px; border-bottom: 1px solid var(--rv-line-2);
}
.rv-title { font: 700 12px/1 var(--rv-sans); letter-spacing: .04em; text-transform: uppercase; }
.rv-spacer { flex: 1; }
.rv-tabs { display: flex; gap: 2px; background: rgba(255,255,255,.05); border-radius: var(--rv-radius); padding: 3px; }
.rv-tab { border: 0; cursor: pointer; border-radius: 6px; padding: 5px 10px; background: transparent;
          color: var(--rv-dim); font: 600 11px/1 var(--rv-sans); white-space: nowrap; }
.rv-tab[aria-selected="true"] { background: rgba(255,255,255,.12); color: var(--rv-text); }
.rv-x { background: none; border: 0; cursor: pointer; padding: 4px; line-height: 0; flex-shrink: 0; }
.rv-list { flex: 1; overflow-y: auto; min-height: 0; }

/* ---- rows ---- */
.rv-row { padding: 13px 16px; border-bottom: 1px solid var(--rv-line); }
.rv-row.is-focus { background: color-mix(in srgb, var(--rv-accent) 12%, transparent); }
.rv-row.is-done { opacity: .6; }
.rv-row.is-failed { background: color-mix(in srgb, var(--rv-accent) 8%, transparent); }
.rv-el {
  display: flex; align-items: center; gap: 6px; margin-bottom: 7px;
  font: 500 9.5px/1.4 var(--rv-mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--rv-accent-hi);
}
.rv-el.is-lost { color: var(--rv-faint); }
.rv-el-dot { width: 5px; height: 5px; border-radius: 999px; background: currentColor; flex-shrink: 0; }
.rv-el-note { text-transform: none; letter-spacing: 0; color: var(--rv-faint); }
.rv-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.rv-who { font: 700 13px/1.2 var(--rv-sans); }
.rv-when { font: 400 11px/1.2 var(--rv-mono); color: var(--rv-faint); }
.rv-done-flag { margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
                font: 500 9.5px/1 var(--rv-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--rv-ok); }
.rv-body { font: 400 13.5px/1.55 var(--rv-sans); opacity: .92; white-space: pre-wrap; word-break: break-word; }
.rv-acts { margin-top: 8px; display: flex; align-items: center; gap: 12px; opacity: .42; transition: opacity .12s; }
.rv-row:hover .rv-acts, .rv-row.is-done .rv-acts { opacity: 1; }
.rv-link { background: none; border: 0; padding: 0; cursor: pointer; font: 600 11.5px/1 var(--rv-sans); }
.rv-link.t-ok { color: var(--rv-ok); }
.rv-link.t-dim { color: var(--rv-faint); }
.rv-link.t-accent { color: var(--rv-accent-hi); }

/* ---- All view grouping ---- */
.rv-sec {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; background: var(--rv-panel); border-bottom: 1px solid var(--rv-line-2);
  font: 500 9.5px/1 var(--rv-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--rv-accent-hi);
}
.rv-sec-n { margin-left: auto; color: var(--rv-faint); font-family: var(--rv-mono); font-size: 10px; }
.rv-page {
  display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--rv-text);
  padding: 9px 16px; background: var(--rv-raised); border-bottom: 1px solid var(--rv-line);
  border-left: 2px solid transparent; cursor: pointer;
}
.rv-page.is-here { background: color-mix(in srgb, var(--rv-accent) 10%, transparent); border-left-color: var(--rv-accent-hi); cursor: default; }
.rv-page-t { font: 600 12px/1.3 var(--rv-sans); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-here { font: 500 9.5px/1 var(--rv-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--rv-accent-hi); }
.rv-badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; flex-shrink: 0;
  background: var(--rv-accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font: 700 10px/1 var(--rv-mono);
}
.rv-badge.t-muted { background: rgba(255,255,255,.12); color: var(--rv-dim); }
.rv-badge.t-invert { background: #fff; color: var(--rv-accent); }
.rv-empty { padding: 26px 18px; font: 400 13px/1.6 var(--rv-sans); color: var(--rv-faint); text-align: center; }
.rv-subhead { padding: 9px 16px; background: var(--rv-raised); border-bottom: 1px solid var(--rv-line);
              font: 500 9.5px/1 var(--rv-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--rv-faint); }

/* ---- composer ---- */
.rv-comp { flex-shrink: 0; border-top: 1px solid var(--rv-line-2); background: var(--rv-panel); padding: 12px; }
.rv-field {
  width: 100%; background: rgba(255,255,255,.05); color: var(--rv-text);
  border: 1px solid var(--rv-line); border-radius: var(--rv-radius);
  outline: none; font: 400 13.5px/1.5 var(--rv-sans); padding: 10px 11px;
}
.rv-name-field { margin-bottom: 8px; padding: 9px 11px; font-weight: 600; font-size: 13px; }
.rv-as { margin-bottom: 8px; font: 400 11px/1 var(--rv-sans); color: var(--rv-faint); }
.rv-as strong { color: var(--rv-text); }
.rv-ta { resize: none; min-height: 64px; }
.rv-comp-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.rv-hint { font: 400 10px/1.3 var(--rv-mono); color: var(--rv-faint); flex: 1; letter-spacing: .04em; }
.rv-post {
  border: 0; border-radius: var(--rv-radius); padding: 9px 18px; flex-shrink: 0;
  background: var(--rv-accent); color: #fff; font: 700 12.5px/1 var(--rv-sans); cursor: pointer;
}
.rv-post[disabled] { background: rgba(255,255,255,.08); color: var(--rv-faint); cursor: default; }
.rv-pick {
  width: 100%; margin-bottom: 8px; cursor: pointer; padding: 8px 10px; border-radius: var(--rv-radius);
  background: rgba(255,255,255,.05); border: 1px dashed var(--rv-line); color: var(--rv-dim);
  font: 600 11px/1.3 var(--rv-sans); display: flex; align-items: center; justify-content: center; gap: 7px;
}
.rv-pick.is-armed { background: color-mix(in srgb, var(--rv-accent) 15%, transparent);
                    border-color: var(--rv-accent-hi); color: var(--rv-accent-hi); }
.rv-target {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 7px 9px;
  border-radius: var(--rv-radius);
  background: color-mix(in srgb, var(--rv-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--rv-accent) 35%, transparent);
}
.rv-target-l { font: 500 9.5px/1 var(--rv-mono); letter-spacing: .1em; text-transform: uppercase;
               color: var(--rv-accent-hi); flex-shrink: 0; }
.rv-target-t { font: 400 11px/1.3 var(--rv-sans); color: var(--rv-dim); flex: 1; min-width: 0;
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- picker overlay + pins ---- */
.rv-pick-overlay { position: fixed; inset: 0; z-index: calc(var(--rv-z) + 40); pointer-events: none; display: none; }
.rv-pick-box { position: absolute; border: 2px solid var(--rv-accent-hi); border-radius: 3px;
               background: color-mix(in srgb, var(--rv-accent) 10%, transparent); }
.rv-pick-chip {
  position: absolute; background: var(--rv-accent-hi); color: #fff;
  font: 600 11px/1 var(--rv-sans); padding: 5px 8px; border-radius: 4px;
  white-space: nowrap; max-width: 340px; overflow: hidden; text-overflow: ellipsis;
}
.rv-arm-bar {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: calc(var(--rv-z) + 45); display: flex; align-items: center; gap: 12px;
  padding: 9px 14px; border-radius: var(--rv-radius); background: var(--rv-accent);
  box-shadow: 0 8px 30px rgba(0,0,0,.55); font-family: var(--rv-sans); color: #fff;
}
.rv-arm-bar b { font: 600 11.5px/1 var(--rv-sans); }
.rv-arm-keys { font: 400 9.5px/1 var(--rv-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.rv-arm-cancel { background: rgba(0,0,0,.25); border: 0; cursor: pointer; border-radius: 5px;
                 padding: 4px 8px; color: #fff; font: 600 10.5px/1 var(--rv-sans); }
.rv-pin-layer { position: absolute; top: 0; left: 0; width: 0; height: 0;
                z-index: calc(var(--rv-z) + 30); pointer-events: none; }
.rv-pin {
  position: absolute; pointer-events: auto; cursor: pointer; border: 2px solid #fff;
  width: 24px; height: 24px; border-radius: 50% 50% 50% 2px;
  background: var(--rv-accent); color: #fff; font: 700 11px/1 var(--rv-mono);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.rv-pin.is-done { background: rgba(255,255,255,.35); }

/* ---- mobile ---- */
.rv-bubble {
  position: fixed; right: 14px; bottom: 18px; z-index: var(--rv-z);
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  background: var(--rv-accent); border: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.rv-bubble .rv-badge { position: absolute; top: -3px; right: -3px; background: #fff; color: var(--rv-accent); }
.rv-backdrop { position: fixed; inset: 0; z-index: var(--rv-z); background: rgba(0,0,0,.55); }
.rv-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--rv-z) + 1);
  background: var(--rv-panel); border-top: 1px solid var(--rv-line-2);
  border-radius: 14px 14px 0 0; max-height: 76vh;
  display: flex; flex-direction: column; box-shadow: 0 -24px 60px rgba(0,0,0,.6);
  font-family: var(--rv-sans); color: var(--rv-text);
}
.rv-grip { flex-shrink: 0; padding: 8px 0 0; display: flex; justify-content: center; }
.rv-grip span { width: 38px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.2); }

/* Goodlookers: pin-only commenting (CFG.requireAnchor) */
.rv-pick--req { border-style: solid; background: var(--rv-accent); color: #fff; font-weight: 700; padding-top: 12px; padding-bottom: 12px; }
.rv-pick--req:hover { background: var(--rv-accent-hi); color: #fff; }
.rv-req-note { font: 400 11.5px/1.45 var(--rv-sans); color: var(--rv-dim); margin-top: 8px; text-align: center; }