/* Shared component styles for the client portal demos. Each demo sets the
 * tokens below and owns its page layout; components read only the tokens. */
@font-face { font-family: 'Satoshi'; src: url(assets/fonts/mj-satoshi-400.ttf) format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url(assets/fonts/mj-satoshi-500.ttf) format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url(assets/fonts/mj-satoshi-700.ttf) format('truetype'); font-weight: 700; font-display: swap; }

:root {
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f6f6f6; --surface-3: #efefef;
  --ink: #131313; --ink-2: #4f4f4f; --ink-3: #6b6b6b; --head: #0d0d0d;
  --line: #e6e6e6; --line-2: rgba(0,0,0,.12);
  --lime: #98fe02; --lime-soft: #e9fbc9; --lime-ink: #2f5c00;
  --amber: #ffa827; --amber-soft: rgba(255,168,39,.16); --amber-ink: #8a4f00;
  --red: #e84e4e;
  --stage: #f1f1ef;
  --r: 12px; --r-s: 8px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --shadow-pop: 0 2px 4px rgba(0,0,0,.06), 0 18px 48px rgba(0,0,0,.16);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: 'Satoshi', -apple-system, 'SF Pro Text', sans-serif; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.45; font-variant-numeric: tabular-nums; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

/* ---------- inbox ---------- */
.ib-row { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; margin-bottom: 8px; transition: transform .16s var(--ease), border-color .16s, box-shadow .16s; animation: rise .42s var(--ease) both; animation-delay: calc(var(--i) * 50ms); }
.ib-row:hover { border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-1px); }
.ib-row:active { transform: translateY(0) scale(.995); }
.ib-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; }
.ib-review .ib-dot { background: var(--lime); box-shadow: 0 0 0 0 rgba(152,254,2,.6); animation: ping 2.2s infinite; }
.ib-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ib-title { font-weight: 700; color: var(--head); }
.ib-sub { color: var(--ink-2); }
.ib-meta { color: var(--ink-3); font-size: 12px; }
.ib-go { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 13px; padding: 6px 10px; border-radius: 999px; background: var(--surface-2); transition: background .16s, gap .16s var(--ease); }
.ib-review .ib-go { background: var(--lime-soft); color: var(--lime-ink); }
.ib-row:hover .ib-go { gap: 9px; }

/* ---------- report ---------- */
.rp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.rp-kicker { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; font-weight: 500; }
.rp-title { margin: 2px 0 0; font-size: 22px; color: var(--head); letter-spacing: -.01em; }
.rp-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rp-seg { display: inline-flex; background: var(--surface-2); border-radius: 999px; padding: 3px; }
.rp-seg-b { border: 0; background: transparent; padding: 6px 12px; border-radius: 999px; font-size: 13px; color: var(--ink-2); transition: background .2s var(--ease), color .2s; }
.rp-seg-b:hover { color: var(--ink); }
.rp-seg-b.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); font-weight: 500; }
.rp-dl { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); background: var(--surface); padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; transition: background .16s, border-color .16s, transform .16s var(--ease); }
.rp-dl:hover { border-color: var(--ink); transform: translateY(-1px); }
.rp-dl.busy svg { animation: bob .6s infinite alternate var(--ease); }
.rp-dl.ok { background: var(--lime-soft); border-color: var(--lime); color: var(--lime-ink); }
.rp-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.rp-tile { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; min-height: 104px; overflow: hidden; animation: rise .5s var(--ease) both; animation-delay: calc(var(--i) * 60ms); transition: border-color .16s, transform .16s var(--ease), box-shadow .16s; }
.rp-tile:hover { border-color: var(--line-2); transform: translateY(-1px); box-shadow: var(--shadow); }
.rp-tl { font-size: 12px; color: var(--ink-3); font-weight: 500; }
.rp-tv { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin-top: 6px; color: var(--ink); }
.rp-delta { font-size: 12px; color: var(--ink-2); margin-top: 4px; }
.rp-tile.hero { border-color: var(--lime); box-shadow: inset 0 0 0 1px var(--lime); }
.rp-spark { position: absolute; left: 0; right: 0; bottom: 22px; width: 100%; height: 34px; }
.rp-spark-line { fill: none; stroke: var(--head); stroke-width: 1.6; stroke-dasharray: 400; stroke-dashoffset: 400; vector-effect: non-scaling-stroke; }
.rp-spark-fill { fill: var(--lime); opacity: 0; }
.rp-spark.draw .rp-spark-line { animation: draw 1s var(--ease) forwards; }
.rp-spark.draw .rp-spark-fill { animation: fadeTo .9s .3s var(--ease) forwards; }
.rp-live { position: absolute; left: 14px; bottom: 6px; font-size: 11px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.rp-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); animation: ping 2.2s infinite; }
.rp-table { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.rp-tr { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr 1fr; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); align-items: center; animation: rise .4s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms + 120ms); transition: background .14s; }
.rp-tr:not(.rp-th):hover { background: var(--surface-2); }
.rp-th { border-top: 0; font-size: 12px; color: var(--ink-3); font-weight: 500; animation: none; }
.rp-ch { font-weight: 500; }
.rp-leads { display: flex; align-items: center; gap: 10px; }
.rp-leads i { display: block; height: 6px; border-radius: 3px; background: var(--lime); width: var(--w); transform-origin: left; animation: grow .8s var(--ease) both; animation-delay: calc(var(--i) * 80ms + 200ms); }

/* ---------- review ---------- */
.rv-stage-wrap { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.rv-stage { position: relative; flex: 1; min-height: 0; background: var(--stage); border-radius: var(--r); display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: crosshair; }
.rv-media { position: relative; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; padding: 20px; }
.rv-media img, .rv-media video { max-height: 100%; max-width: 100%; display: block; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.12), 0 24px 60px rgba(0,0,0,.18); user-select: none; }
.rv-media.in img, .rv-media.in video { animation: mediaIn .38s var(--ease) both; }
.rv-pins { position: absolute; pointer-events: none; }
.rv-pin { position: absolute; pointer-events: auto; width: 26px; height: 26px; margin: -26px 0 0 -2px; border-radius: 13px 13px 13px 2px; background: var(--ink); color: #fff; border: 2px solid #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0,0,0,.28); transition: transform .18s var(--ease), background .16s, opacity .2s; transform-origin: 2px 24px; padding: 0; }
.rv-pin:hover, .rv-pin.hl { transform: scale(1.15); }
.rv-pin.on { background: var(--lime); color: #0b0b0b; }
.rv-pin.done { background: #fff; color: var(--ink-3); border-color: var(--line-2); }
.rv-pin.ghost { background: var(--lime); color: #0b0b0b; animation: ghost 1.4s infinite var(--ease); }
.rv-pin.drop { animation: drop .5s var(--ease) both; }
.rv-pin.far { opacity: .25; transform: scale(.8); }
.rv-pop { position: absolute; z-index: 5; width: 280px; background: var(--surface); color: var(--ink); border-radius: var(--r); box-shadow: var(--shadow-pop); padding: 12px; cursor: default; border: 1px solid var(--line); }
.rv-pop.in { animation: popIn .2s var(--ease) both; }
.rv-pop-h { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); margin-bottom: 8px; }
.rv-pop-n { font-weight: 700; color: var(--head); }
.rv-pop textarea { width: 100%; resize: none; border: 1px solid var(--line); border-radius: var(--r-s); padding: 9px 10px; font: inherit; background: var(--surface-2); color: var(--ink); outline: none; transition: border-color .16s, background .16s; }
.rv-pop textarea:focus { border-color: var(--ink); background: var(--surface); }
.rv-pop textarea.shake { animation: shake .3s; border-color: var(--red); }
.rv-pop-f { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.rv-pop-f button { border: 0; border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 500; transition: background .14s, transform .14s var(--ease); }
.rv-pop-x { background: transparent; color: var(--ink-2); }
.rv-pop-x:hover { background: var(--surface-2); }
.rv-pop-ok { background: var(--ink); color: #fff; }
.rv-pop-ok:hover { transform: translateY(-1px); }
.rv-hint { position: absolute; left: 14px; top: 14px; font-size: 12px; color: var(--ink-2); background: rgba(255,255,255,.86); backdrop-filter: blur(8px); padding: 6px 12px; border-radius: 999px; pointer-events: none; transition: opacity .2s; white-space: nowrap; }
.rv-stage.placing .rv-hint { opacity: 0; }
.rv-hint.nudge { animation: nudge .5s var(--ease); color: var(--amber-ink); background: #fff4e0; }
.rv-stage.stamp::after { content: 'APPROVED'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-8deg); font-weight: 700; font-size: 44px; letter-spacing: .12em; color: #0b0b0b; background: var(--lime); padding: 6px 22px; border-radius: 8px; animation: stamp .9s var(--ease) forwards; pointer-events: none; }

.rv-vbar { display: flex; align-items: center; gap: 12px; padding: 12px 4px 0; }
.rv-play { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; display: grid; place-items: center; flex: none; transition: transform .14s var(--ease); }
.rv-play:hover { transform: scale(1.06); }
.rv-play .ic-pause { display: none; }
.rv-vbar.playing .ic-play { display: none; }
.rv-vbar.playing .ic-pause { display: inline; }
.rv-track { position: relative; flex: 1; height: 28px; cursor: pointer; }
.rv-track::before { content: ''; position: absolute; left: 0; right: 0; top: 12px; height: 4px; border-radius: 2px; background: var(--surface-3); }
.rv-fill { position: absolute; left: 0; top: 12px; height: 4px; border-radius: 2px; background: var(--ink); width: 0; }
.rv-head { position: absolute; top: 7px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); left: 0; pointer-events: none; }
.rv-mark { position: absolute; top: 0; width: 12px; height: 12px; margin-left: -6px; border-radius: 6px 6px 6px 1px; background: var(--lime); border: 1.5px solid var(--ink); padding: 0; transition: transform .16s var(--ease); }
.rv-mark:hover { transform: translateY(-2px) scale(1.2); }
.rv-mark.done { background: #fff; border-color: var(--ink-3); }
.rv-time { font-size: 12px; color: var(--ink-2); min-width: 78px; text-align: right; }

.rv-strip { display: flex; gap: 8px; padding-top: 12px; overflow-x: auto; }
.rv-th { position: relative; width: 64px; height: 92px; flex: none; border: 2px solid transparent; border-radius: 10px; padding: 0; overflow: hidden; background: var(--surface-2); transition: border-color .16s, transform .16s var(--ease); }
.rv-th img, .rv-th video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-th:hover { transform: translateY(-2px); }
.rv-th.on { border-color: var(--ink); }
.rv-th-l { position: absolute; left: 0; right: 0; bottom: 0; font-size: 10px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.6)); padding: 10px 4px 3px; text-align: left; }
.rv-th-c { position: absolute; top: 4px; left: 4px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; }
.rv-th-s { position: absolute; top: 5px; right: 5px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff; background: var(--ink-3); }
.rv-th.st-approved .rv-th-s { background: var(--lime); }
.rv-th.st-changes .rv-th-s { background: var(--amber); }
.rv-th-play { position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-left: 10px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; transform: translateX(2px); }

.rv-side { display: flex; flex-direction: column; min-height: 0; }
.rv-post-k { font-size: 12px; color: var(--ink-3); }
.rv-post-t { margin: 4px 0 8px; font-size: 20px; color: var(--head); letter-spacing: -.01em; line-height: 1.25; }
.rv-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); transition: background .25s, color .25s; }
.rv-chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rv-chip.st-needs-review { background: var(--lime-soft); color: var(--lime-ink); }
.rv-chip.st-needs-review i { animation: ping 2.2s infinite; background: var(--lime); }
.rv-chip.st-approved { background: var(--ink); color: var(--lime); }
.rv-chip.st-changes { background: var(--amber-soft); color: var(--amber-ink); }
.rv-cap { white-space: pre-line; color: var(--ink-2); margin: 12px 0 4px; font-size: 13.5px; }
.rv-th-h { display: flex; justify-content: space-between; align-items: baseline; margin: 16px 0 8px; font-weight: 700; color: var(--head); }
.rv-th-n { font-weight: 500; font-size: 12px; color: var(--ink-3); }
.rv-threads { flex: 1; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 6px; padding-right: 2px; }
.rv-empty { color: var(--ink-3); font-size: 13px; padding: 14px; border: 1px dashed var(--line-2); border-radius: var(--r); }
.rv-c { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; background: var(--surface); transition: border-color .16s, box-shadow .16s, transform .16s var(--ease); cursor: pointer; animation: rise .3s var(--ease) both; }
.rv-c:hover, .rv-c.hl { border-color: var(--line-2); box-shadow: var(--shadow); }
.rv-c.on { border-color: var(--ink); box-shadow: inset 3px 0 0 var(--lime); }
.rv-c.done { opacity: .6; }
.rv-c.done .rv-c-x { text-decoration: line-through; text-decoration-color: var(--ink-3); }
.rv-c-h { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.rv-c-n { width: 20px; height: 20px; border-radius: 10px 10px 10px 2px; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: none; }
.rv-c.on .rv-c-n { background: var(--lime); color: #0b0b0b; }
.rv-c-who { font-weight: 700; }
.rv-c-t { border: 0; background: var(--lime-soft); color: var(--lime-ink); font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.rv-c-t:hover { background: var(--lime); color: #0b0b0b; }
.rv-c-when { margin-left: auto; color: var(--ink-3); }
.rv-c-x { margin-top: 6px; }
.rv-c-f { margin-top: 6px; display: flex; justify-content: flex-end; }
.rv-c-done { border: 0; background: transparent; color: var(--ink-3); font-size: 12px; padding: 2px 6px; border-radius: 6px; }
.rv-c-done:hover { color: var(--ink); background: var(--surface-2); }
.rv-decide { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; padding-top: 12px; }
.rv-decide button { border-radius: 999px; padding: 11px 14px; font-weight: 700; font-size: 13.5px; border: 1px solid var(--line-2); background: var(--surface); transition: transform .14s var(--ease), background .2s, border-color .2s, color .2s; position: relative; overflow: hidden; }
.rv-decide button:hover { transform: translateY(-1px); border-color: var(--ink); }
.rv-changes.done { background: var(--amber-soft); border-color: var(--amber); color: var(--amber-ink); }
.rv-approve { background: var(--ink) !important; color: #fff; border-color: var(--ink) !important; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.rv-approve .rv-tick { display: none; }
.rv-approve.done { background: var(--lime) !important; color: #0b0b0b; border-color: var(--lime) !important; }
.rv-approve.done .rv-tick { display: inline; animation: popIn .3s var(--ease); }
.rv-approve.hold::before { content: ''; position: absolute; inset: 0; background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform .2s var(--ease-in); }
.rv-approve.hold.holding::before { transform: scaleX(1); transition: transform .65s linear; }
.rv-approve.hold.holding { color: #0b0b0b; }
.rv-approve > * { position: relative; }
.rv-approve.burst { animation: burst .5s var(--ease); }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(152,254,2,.55); } 70% { box-shadow: 0 0 0 7px rgba(152,254,2,0); } 100% { box-shadow: 0 0 0 0 rgba(152,254,2,0); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadeTo { to { opacity: .18; } }
@keyframes grow { from { transform: scaleX(0); } }
@keyframes bob { to { transform: translateY(2px); } }
@keyframes mediaIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ghost { 0%, 100% { box-shadow: 0 0 0 0 rgba(152,254,2,.7); } 50% { box-shadow: 0 0 0 8px rgba(152,254,2,0); } }
@keyframes drop { 0% { transform: translateY(-14px) scale(.6); opacity: 0; } 60% { transform: translateY(2px) scale(1.08); opacity: 1; } 100% { transform: none; } }
@keyframes popIn { from { opacity: 0; transform: translateY(4px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes nudge { 30% { transform: translateY(-4px); } }
@keyframes stamp { 0% { opacity: 0; transform: translate(-50%,-50%) rotate(-8deg) scale(1.6); } 25% { opacity: 1; transform: translate(-50%,-50%) rotate(-8deg) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) rotate(-8deg) scale(.96); } }
@keyframes burst { 40% { box-shadow: 0 0 0 8px rgba(152,254,2,.35); } 100% { box-shadow: 0 0 0 16px rgba(152,254,2,0); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }
@media (max-width: 900px) { .rp-tiles { grid-template-columns: repeat(2, minmax(0,1fr)); } .rp-tile.hero { grid-column: span 2; order: -1; } .rp-tr { grid-template-columns: 1.4fr 1fr 1fr; } .rp-tr > :nth-child(3), .rp-tr > :nth-child(5) { display: none; } }

.rv-vbar[hidden], .rv-pop[hidden], .rv-ver[hidden] { display: none !important; }

/* versions + compare */
.rv-ver { position: absolute; right: 12px; top: 12px; display: flex; gap: 2px; padding: 3px; background: rgba(255,255,255,.9); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 999px; z-index: 4; cursor: default; }
.rv-ver-b { border: 0; background: transparent; color: var(--ink-2); font: 500 12px/1 inherit; font-family: inherit; padding: 7px 11px; border-radius: 999px; transition: background .13s, color .13s; }
.rv-ver-b:hover { color: var(--ink); background: var(--surface-2); }
.rv-ver-b.on { background: #0b0b0b; color: #fff; }
.rv-ver-b.cmp.on { background: var(--lime); color: #0b0b0b; }
.rv-ver-b.cmp { border-left: 1px solid var(--line); border-radius: 0 999px 999px 0; margin-left: 2px; }
.rv-stage.readonly { cursor: default; }
.rv-cmp { position: absolute; z-index: 3; cursor: ew-resize; touch-action: none; border-radius: 6px; overflow: hidden; outline: none; }
.rv-cmp-new { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; user-select: none; pointer-events: none; }
.rv-cmp-h { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--lime); box-shadow: 0 0 0 1px rgba(0,0,0,.25); pointer-events: none; }
.rv-cmp-h i { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: var(--lime); box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.rv-cmp-h i::before, .rv-cmp-h i::after { content: ''; position: absolute; top: 10px; border: 5px solid transparent; }
.rv-cmp-h i::before { left: 3px; border-right-color: #0b0b0b; }
.rv-cmp-h i::after { right: 3px; border-left-color: #0b0b0b; }
.rv-cmp-l, .rv-cmp-r { position: absolute; bottom: 10px; font-size: 11px; font-weight: 700; letter-spacing: .08em; padding: 4px 9px; border-radius: 999px; pointer-events: none; }
.rv-cmp-l { left: 10px; background: rgba(0,0,0,.6); color: #fff; }
.rv-cmp-r { right: 10px; background: var(--lime); color: #0b0b0b; }

/* replies */
.rv-r { margin: 8px 0 0 26px; padding: 8px 10px; border-left: 2px solid var(--line); background: var(--surface-2); border-radius: 0 8px 8px 0; animation: rise .25s var(--ease) both; }
.rv-r-h { display: flex; gap: 8px; align-items: baseline; font-size: 12px; }
.rv-r-who { font-weight: 700; color: var(--ink); }
.rv-r-who.team::after { content: 'TEAM'; margin-left: 6px; font-size: 9px; letter-spacing: .1em; background: var(--lime); color: #0b0b0b; padding: 2px 5px; border-radius: 4px; vertical-align: 1px; }
.rv-r-x { font-size: 13px; margin-top: 3px; color: var(--ink-2); line-height: 1.45; }
.rv-r-box { margin: 8px 0 0 26px; }
.rv-r-box[hidden] { display: none; }
.rv-r-box textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13px; resize: vertical; background: var(--surface); color: var(--ink); }
.rv-r-box textarea:focus { outline: 2px solid var(--lime); outline-offset: 0; }
.rv-r-f { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.rv-r-f button { border: 0; border-radius: 8px; padding: 7px 12px; font: 600 12px/1 inherit; font-family: inherit; }
.rv-r-cancel { background: transparent; color: var(--ink-2); }
.rv-r-ok { background: #0b0b0b; color: #fff; }
.rv-c-f { gap: 4px; }
.rv-c-reply { border: 0; background: transparent; color: var(--ink-3); font-size: 12px; padding: 2px 6px; border-radius: 6px; margin-right: auto; }
.rv-c-reply:hover { color: var(--ink); background: var(--surface-2); }

/* touch targets on small screens */
@media (max-width: 640px) {
  .rv-c-done, .rv-c-reply { min-height: 36px; padding: 6px 10px; }
  .rv-pin::before { content: ''; position: absolute; inset: -6px; }
  .rv-ver-b { padding: 10px 12px; }
  .rv-hint { top: auto; bottom: 10px; }
}

/* approve all */
.rv-chip-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rv-all { border: 1px solid var(--line-2, #d9d9d9); background: transparent; color: var(--ink); font: 600 12px/1 inherit; font-family: inherit; padding: 7px 11px; border-radius: 999px; transition: background .13s, border-color .13s; }
.rv-all:hover { background: var(--lime); border-color: var(--lime); color: #0b0b0b; }
.rv-all[hidden] { display: none; }
@media (max-width: 640px) { .rv-all { min-height: 36px; } }

/* @mention picker and highlighted tags */
.rv-pop, .rv-r-box { position: relative; }
.rv-pop { position: absolute; }
.rv-at-box { position: absolute; z-index: 8; min-width: 210px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-pop); padding: 4px; display: grid; gap: 2px; animation: rvAtIn .13s var(--ease); }
@keyframes rvAtIn { from { opacity: 0; transform: translateY(-4px); } }
.rv-at-i { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; border-radius: 8px; padding: 6px 8px; text-align: left; color: inherit; cursor: pointer; min-height: 40px; }
.rv-at-i.on, .rv-at-i:hover { background: #e9fbc9; }
.rv-at-i b { display: block; font-size: 13px; font-weight: 600; }
.rv-at-i small { display: block; font-size: 11px; color: var(--ink-2); }
.rv-at-av { width: 26px; height: 26px; border-radius: 50%; background: #0b0b0b; color: var(--lime); font-size: 10px; font-weight: 700; display: grid; place-items: center; flex: none; }
.rv-at { background: #e9fbc9; color: #0a3d22; border-radius: 5px; padding: 0 3px; font-weight: 600; }
.dark .rv-at-box { background: #2a2a2a; border-color: rgba(152,254,2,.25); color: #fff; }
.dark .rv-at-i.on, .dark .rv-at-i:hover { background: rgba(152,254,2,.14); }
.dark .rv-at-i small { color: rgba(255,255,255,.6); }
.dark .rv-at { background: rgba(152,254,2,.18); color: var(--lime); }

/* Live (already posted) - view only */
.rv-stage.live { cursor: default; }
.rv-decide.live button { opacity: .5; cursor: not-allowed; }
.rv-decide.live .rv-approve { opacity: 1; }

/* final file download, shown under the decision once a frame is approved */
.rv-final { display: flex; align-items: center; gap: 8px; padding-top: 10px; flex-wrap: wrap; }
.rv-final[hidden] { display: none; }
.rv-dl { flex: 1 1 200px; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center; padding: 9px 12px; border: 1px dashed var(--line-2); border-radius: 12px; color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 600; transition: border-color .2s, background .2s; }
.rv-dl:hover { border-style: solid; border-color: var(--ink); }
.rv-dl svg { grid-row: span 2; }
.rv-dl-n { color: var(--ink-3); font-size: 11.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-dl-all { border: 0; background: none; color: var(--ink-2); font-size: 12.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding: 6px 2px; }
.rv-dl-all:hover { color: var(--ink); }
.rv-dl-all:disabled { opacity: .6; text-decoration: none; }

/* Next call card on Today (links to Meetings) */
.nc { display: flex; align-items: center; gap: 14px; width: 100%; margin: 14px 0 22px; padding: 14px 16px; min-height: 64px; border: 1px solid var(--line); border-radius: 14px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .13s, transform .13s; }
.nc:hover { border-color: var(--ink-3); }
.nc:active { transform: scale(.995); }
.nc:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.nc-i { flex: none; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--lime-soft); color: inherit; }
.nc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nc-k { font-size: 12px; color: var(--ink-3); font-weight: 500; }
.nc-t b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-w { font-size: 13px; color: var(--ink-2); }
.nc-go { flex: none; font-size: 13px; font-weight: 500; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 999px; }
@media (max-width: 420px) { .nc-go { display: none; } }

/* Touch targets at phone width (a11y audit 11/10): every tappable control reaches 44px */
@media (max-width: 600px) {
  body button:not(.rv-pin):not(.rv-mark), body a.as-dl, body select { min-height: 44px; }
  body #menu, body .cal-nb, body .as-vb, body .rv-ver-b { min-width: 44px; }
}

/* Files from the admin dashboard that are not images or video: a file card on the stage */
.rv-docwrap { display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(340px, 86%); padding: 32px 24px; background: #fff; color: #131313; border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,.12), 0 24px 60px rgba(0,0,0,.18); text-align: center; }
.rv-docwrap svg { color: #131313; }
.rv-docwrap b { font-size: 15px; font-weight: 600; word-break: break-word; }
.rv-docwrap small { font-size: 12px; color: #6b6b6b; }
.rv-doc-open { margin-top: 6px; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: #131313; color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; }
.rv-doc-open:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.rv-th-doc { position: absolute; inset: 0; display: grid; place-items: center; background: #f1f1ef; color: #131313; font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.rv-nothing .rv-decide, .rv-nothing .rv-chip-row, .rv-nothing .rv-th-h, .rv-nothing .rv-ver { display: none; }
.pg-empty { padding-top: 8px; }
.pg-empty h1 { font-size: 28px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 18px; }
.pg-empty-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 24px; border: 1px dashed var(--line); border-radius: 16px; text-align: center; color: var(--ink-2); }
.pg-empty-card svg { color: var(--ink-3); margin-bottom: 4px; }
.pg-empty-card b { color: var(--ink); font-size: 15px; font-weight: 600; }
.pg-empty-card span { font-size: 13px; color: #6b6b6b; max-width: 360px; }

.rv-c-del { border: 0; background: transparent; color: var(--ink-3); font-size: 12px; padding: 2px 6px; border-radius: 6px; }
.rv-c-del:hover { color: #b3261e; background: var(--surface-2); }
.rv-del-box { margin: 8px 0 0 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.rv-del-box[hidden] { display: none; }
.rv-del-box span { flex: 1 1 100%; }
.rv-del-box button { border: 0; border-radius: 8px; padding: 7px 12px; font: 600 12px/1 inherit; font-family: inherit; }
.rv-del-cancel { background: transparent; color: var(--ink-2); }
.rv-del-ok { background: #b3261e; color: #fff; }
@media (max-width: 700px) { .rv-c-del, .rv-del-box button { min-height: 36px; } }