/* ============================================================
   Reve Creative Partner hub — styles on top of styles.css.
   Base tokens/fonts/buttons/inputs come from the shared Reve
   design system; everything here is CP-specific.
   Layout language borrows from Campus Leader HQ: sticky 64px
   header, centered column, mono overlines, filled cards.
   ============================================================ */

:root {
  --cp-col: 880px;
  --cp-pad-x: clamp(20px, 5vw, 44px);
  --cp-card: light-dark(#f4f4f4, #171717);
  --cp-card-pad: clamp(18px, 2.6vw, 24px);
  /* tighter rhythm than the shared defaults */
  --hq-header-gap: 18px;
  --hq-stack-gap: 14px;
  --hq-grid-gap: 14px;
}

/* denser main column */
.main { padding: 26px 32px 56px; }
@media (max-width: 900px) { .main { padding: 18px 16px 44px; } }

/* ---------------- Login: logo + button, nothing else ---------------- */

.cp-login-card {
  width: min(380px, calc(100vw - 32px));
  align-items: center;
  gap: 26px;
  padding: 44px 32px 38px;
}
.cp-login-card .login-brand { justify-content: center; }

.cp-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 46px;
  border-radius: var(--rv-radius-full);
  font-weight: 600;
  font-size: var(--rv-font-size-small);
}
.cp-google-g { width: 18px; height: 18px; flex: none; }

/* ============================================================
   Hub — sidebar shell (shared app grid) + module column
   ============================================================ */

.cp-avatar-wrap { position: relative; }
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

/* centered reading column inside the app shell's main area */
.cp-col {
  width: 100%;
  max-width: var(--cp-col);
  margin: 0 auto;
}

.cp-hero { padding: 8px 0 30px; }
.cp-hero .over { margin-bottom: 10px; }
.cp-hero h1 {
  font-family: var(--rv-font-display);
  font-weight: 500;
  font-size: clamp(28px, 4.5vw, 36px);
  letter-spacing: -.02em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}
.cp-hero-lede {
  font-size: 15.5px;
  color: var(--rv-font-color-light);
  line-height: 1.55;
  max-width: 560px;
  margin: 12px 0 0;
}
.cp-hero-status {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 18px;
  margin-top: 18px;
}
.cp-hero-status span {
  font: 550 .6875rem/1.6 var(--rv-font-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--rv-font-color-lighter);
}
.cp-hero-status b { color: var(--rv-font-color-normal); font-weight: 550; }

.over {
  font: var(--rv-microlabel);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rv-font-color-lighter);
}

/* ---- modules ---- */

.cp-modules { display: flex; flex-direction: column; gap: 14px; }

a.btn { color: var(--rv-font-color-normal); }
a.btn.btn-primary { color: var(--rv-color-neutral-0); }

.module {
  background: var(--rv-color-panel);
  border: 1px solid var(--rv-color-panel-border);
  border-radius: var(--rv-radius-l);
  padding: var(--cp-card-pad);
  scroll-margin-top: 20px;
}
.module-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.module-top .spacer { margin-left: auto; }
.module h2 {
  font-family: var(--rv-font-display);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: -.015em;
  line-height: 1.15;
  margin: 0 0 5px;
}
.module-lede {
  color: var(--rv-font-color-light);
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 62ch;
  margin: 0 0 12px;
}
.module-note {
  font: 550 .625rem/1.7 var(--rv-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rv-font-color-lighter);
  margin-top: 14px;
}
.module-note a { color: inherit; text-underline-offset: 3px; }
.module-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* inverted "poster" module — the weekly prompt */
.module--ink {
  background: var(--rv-color-alpha-1000);
  color: var(--rv-color-neutral-0);
}
.module--ink .over,
.module--ink .module-note { color: color-mix(in srgb, var(--rv-color-neutral-0) 55%, transparent); }
.module--ink .module-lede { color: color-mix(in srgb, var(--rv-color-neutral-0) 78%, transparent); }
.module--ink h2 { font-size: clamp(24px, 3.6vw, 30px); }
.module--ink .btn {
  background: var(--rv-color-neutral-0);
  color: var(--rv-color-alpha-1000);
  border-color: var(--rv-color-neutral-0);
}
.module--ink .btn:hover:not(:disabled) { opacity: .85; }
.module--ink .btn-ghost {
  background: transparent;
  color: var(--rv-color-neutral-0);
  border: 1px solid color-mix(in srgb, var(--rv-color-neutral-0) 45%, transparent);
}
.module--ink .btn-ghost:hover { border-color: var(--rv-color-neutral-0); opacity: 1; }

/* success state */
.cp-done {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.55;
}
.cp-done svg { flex: none; width: 16px; height: 16px; margin-top: 3px; }
.cp-done .mono { display: block; margin-top: 2px; }

/* ---- Just shipped rows ---- */

.ship-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--rv-color-panel-border);
}
.ship-row:first-of-type { border-top: 0; padding-top: 2px; }
.ship-date {
  flex: none;
  width: 58px;
  font: 550 .6875rem/1.9 var(--rv-font-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--rv-font-color-lighter);
}
.ship-main { flex: 1; min-width: 0; }
.ship-name { font-weight: 600; font-size: 14.5px; }
.ship-sub { color: var(--rv-font-color-light); font-size: 13.5px; line-height: 1.5; margin-top: 1px; }
.ship-row .btn { flex: none; }

/* ---- forms inside modules ---- */

.cp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cp-form-grid .full { grid-column: 1 / -1; }
@media (max-width: 620px) {
  .cp-form-grid { grid-template-columns: 1fr; }
  .cp-form-grid .full { grid-column: auto; }
}
.module .entry-input,
.module textarea.entry-input { width: 100%; }
textarea.entry-input {
  min-height: 92px;
  padding-top: 10px;
  resize: vertical;
  line-height: 1.55;
  font-family: var(--rv-font-sans);
}
.cp-inline-form { display: flex; gap: 10px; }
.cp-inline-form .entry-input { flex: 1; min-width: 0; }
@media (max-width: 560px) {
  .cp-inline-form { flex-direction: column; }
}

/* ---- Refer module ---- */

.cp-link-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.cp-link {
  flex: 1;
  min-width: 0;
  font: 500 .82rem/1 var(--rv-font-mono);
  border: 1px solid var(--rv-color-panel-border);
  background: var(--rv-color-gray-50);
  border-radius: var(--rv-radius-m);
  padding: 13px 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 560px) { .cp-link-row { flex-direction: column; align-items: stretch; } }

.cp-ticks { display: flex; gap: 4px; }
.cp-tick {
  flex: 1;
  height: 20px;
  border-radius: 5px;
  background: var(--rv-color-gray-50);
  border: 1px solid var(--rv-color-panel-border);
}
.cp-tick.used { background: var(--rv-color-alpha-1000); border-color: var(--rv-color-alpha-1000); }
.cp-ticks-caption {
  margin-top: 9px;
  font: 550 .6875rem/1.6 var(--rv-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rv-font-color-lighter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cp-ticks-caption .btn {
  font-family: var(--rv-font-sans);
  font-size: .75rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rv-font-color-light);
}

/* ---- Book time (embedded Google Calendar appointment schedule) ---- */

.cp-embed {
  border: 1px solid var(--rv-color-panel-border);
  border-radius: var(--rv-radius-m);
  overflow: hidden;
  background: #fff;
  height: 540px;
}
.cp-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 640px) { .cp-embed { height: 460px; } }

/* ---- home footer line ---- */

.cp-home-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 26px 4px 8px;
}
.cp-home-foot .mono { color: var(--rv-font-color-lighter); letter-spacing: .08em; text-transform: uppercase; font-size: 10.5px; }
.cp-home-foot a { color: inherit; text-decoration: none; }
.cp-home-foot a:hover { color: var(--rv-font-color-normal); }

/* ---- Help page (student-help-center style: search + category cards) ---- */

.cp-help-search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  max-width: 520px;
  border: 1.5px solid var(--rv-color-alpha-1000);
  border-radius: var(--rv-radius-full);
  padding: 0 20px;
  background: var(--rv-color-panel);
  margin-bottom: 18px;
}
.cp-help-search svg { width: 17px; height: 17px; opacity: .5; flex: none; }
.cp-help-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: 400 15px/1 var(--rv-font-sans);
  color: var(--rv-font-color-normal);
}
.cp-help-search:focus-within { outline: var(--rv-focus-ring); outline-offset: 2px; }

.cp-help-cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}
.cp-help-cat {
  text-align: left;
  background: var(--rv-color-panel);
  border: 1px solid var(--rv-color-panel-border);
  border-radius: 14px;
  padding: 16px 16px 14px;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
}
.cp-help-cat:hover { border-color: var(--rv-color-alpha-1000); transform: translateY(-2px); }
.cp-help-cat .icsq {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--rv-color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 11px;
}
.cp-help-cat .icsq svg { width: 18px; height: 18px; stroke: var(--rv-font-color-normal); }
.cp-help-cat h3 {
  font-family: var(--rv-font-display);
  font-weight: 500;
  font-size: 15.5px;
  letter-spacing: -.01em;
  margin: 0 0 3px;
}
.cp-help-cat .cnt {
  font: 550 .625rem/1 var(--rv-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rv-font-color-lighter);
}

.cp-help-section { margin-top: 28px; scroll-margin-top: 16px; }
.cp-help-section > h2 {
  font-family: var(--rv-font-display);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: -.015em;
  margin: 6px 0 2px;
}

.cp-faq { border-top: 1px solid var(--rv-color-panel-border); }
.cp-faq:first-of-type { border-top: 0; }
.cp-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 13px 0;
  font-weight: 550;
  font-size: 14.5px;
}
.cp-faq summary::-webkit-details-marker { display: none; }
.cp-faq summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--rv-font-mono);
  color: var(--rv-font-color-lighter);
  transition: rotate .15s ease;
}
.cp-faq[open] summary::after { rotate: 45deg; }
.cp-faq-body {
  padding: 0 0 14px;
  color: var(--rv-font-color-light);
  font-size: 14px;
  line-height: 1.6;
  max-width: 62ch;
}
.cp-faq-body p { margin: 0; }
.cp-faq-body strong { color: var(--rv-font-color-normal); font-weight: 550; }

.cp-help-empty { padding: 40px 0; }

/* ============================================================
   Onboarding
   ============================================================ */

.ob-stage {
  position: fixed;
  inset: 0;
  background: var(--rv-color-canvas);
  overflow: hidden;
}

/* brand header ties onboarding to the app shell */
.ob-brand {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  height: var(--rv-header-height);
  display: flex;
  align-items: center;
  padding: 0 24px;
}

.ob-skip {
  position: fixed;
  top: 20px;
  right: 24px;
  z-index: 6;
  background: none;
  border: none;
  cursor: pointer;
  font: var(--rv-microlabel);
  letter-spacing: var(--rv-microlabel-tracking);
  text-transform: uppercase;
  color: var(--rv-font-color-lighter);
  padding: 8px 10px;
  opacity: 0;
  transition: opacity .3s ease;
}
.ob-skip.show { opacity: 1; }
.ob-skip:hover { color: var(--rv-font-color-normal); }
@media (max-width: 640px) {
  .ob-skip { top: calc(var(--rv-header-height) - 6px); right: 16px; }
}

/* scene transitions match the app's view-enter: short, precise */
.ob-scene {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: calc(var(--rv-header-height) + 8px) 20px 28px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .32s ease, transform .32s ease, visibility 0s linear .32s;
}
.ob-scene.active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .32s ease, transform .32s ease;
}

/* ---- Scene 1: the seal ---- */

.ob-seal-wrap { text-align: center; cursor: pointer; }
.ob-seal {
  position: relative;
  width: 116px;
  height: 116px;
  margin: 0 auto;
}
.ob-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ob-seal svg circle {
  fill: none;
  stroke: var(--rv-color-alpha-1000);
  stroke-width: 1.5;
  stroke-dasharray: 346;
  stroke-dashoffset: 346;
  transform: rotate(-90deg);
  transform-origin: center;
  animation: ob-ring-draw 1.3s cubic-bezier(.4, 0, .2, 1) .25s forwards;
}
@keyframes ob-ring-draw { to { stroke-dashoffset: 0; } }
.ob-seal-core {
  position: absolute;
  inset: 13px;
  border-radius: var(--rv-radius-full);
  background: var(--rv-color-alpha-1000);
  color: var(--rv-color-neutral-0);
  display: grid;
  place-items: center;
  font-family: var(--rv-font-display);
  font-weight: 500;
  font-size: 38px;
  opacity: 0;
  transform: scale(.72);
  animation: ob-core-in .5s cubic-bezier(.2, .9, .3, 1.15) .95s forwards;
}
@keyframes ob-core-in { to { opacity: 1; transform: scale(1); } }
.ob-kicker {
  margin-top: 30px;
  font: var(--rv-microlabel);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rv-font-color-light);
  opacity: 0;
  transform: translateY(6px);
  animation: ob-fade-up .5s ease 1.5s forwards;
}
@keyframes ob-fade-up { to { opacity: 1; transform: none; } }

/* ---- Scene 2: the letter ---- */

.ob-letter {
  width: min(560px, 92vw);
  max-height: 82vh;
  overflow: auto;
  background: var(--rv-color-panel);
  border: 1px solid var(--rv-color-panel-border);
  border-radius: var(--rv-radius-l);
  padding: 36px 40px;
}
@media (max-width: 640px) { .ob-letter { padding: 28px 24px; } }

/* letter content sets itself line by line, same stagger as view-enter */
.ob-letter > * { opacity: 0; transform: translateY(7px); }
.ob-scene.active .ob-letter > * { animation: ob-fade-up .4s ease forwards; }
.ob-scene.active .ob-letter > :nth-child(1) { animation-delay: .15s; }
.ob-scene.active .ob-letter > :nth-child(2) { animation-delay: .27s; }
.ob-scene.active .ob-letter > :nth-child(3) { animation-delay: .39s; }
.ob-scene.active .ob-letter > :nth-child(4) { animation-delay: .51s; }
.ob-scene.active .ob-letter > :nth-child(5) { animation-delay: .66s; }

.ob-letter-overline {
  font: var(--rv-microlabel);
  letter-spacing: var(--rv-microlabel-tracking);
  text-transform: uppercase;
  color: var(--rv-font-color-lighter);
}
.ob-letter-title {
  font-family: var(--rv-font-display);
  font-weight: 500;
  font-size: clamp(28px, 5vw, 36px);
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 14px 0 16px;
}
.ob-letter-body {
  color: var(--rv-font-color-light);
  font-size: 14.5px;
  line-height: 1.65;
}
.ob-letter-body p + p { margin-top: 12px; }
.ob-letter-sig {
  margin-top: 22px;
  font-family: var(--rv-font-display);
  font-size: 17px;
}
.ob-letter-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
}
.ob-letter .microlabel { color: var(--rv-font-color-lighter); }

/* ---- Scenes 3-5: step panels, structured like the app's panels ---- */

.ob-panel {
  width: min(600px, 94vw);
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ob-panel--wide { width: min(780px, 94vw); }

.ob-segments {
  display: flex;
  gap: 4px;
  height: 3px;
  flex: none;
}
.ob-segments span { flex: 1; background: var(--rv-color-gray-100); }
.ob-segments span.on { background: var(--rv-color-alpha-1000); }

.ob-body {
  padding: 20px var(--hq-pad-x) 22px;
  overflow: auto;
}
.ob-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px var(--hq-pad-x);
  border-top: 1px solid var(--rv-color-hairline);
  flex: none;
}
.ob-foot .spacer { margin-left: auto; }

.ob-sub {
  color: var(--rv-font-color-light);
  font-size: var(--rv-font-size-small);
  line-height: 1.55;
  margin: 0 0 18px;
}

.ob-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ob-grid .full { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .ob-grid { grid-template-columns: 1fr; }
  .ob-grid .full { grid-column: auto; }
}

/* role chooser cards */
.cp-role-cards { display: flex; gap: 12px; }
@media (max-width: 560px) { .cp-role-cards { flex-direction: column; } }
.cp-role-card {
  flex: 1;
  text-align: left;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--rv-color-panel-border);
  background: var(--rv-color-panel);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.cp-role-card:hover { border-color: var(--rv-color-gray-400); }
.cp-role-card.on { border-color: var(--rv-color-alpha-1000); background: var(--rv-color-gray-50); }
.cp-role-name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.cp-role-name::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--rv-radius-full);
  border: 1.5px solid var(--rv-color-gray-400);
  flex: none;
  transition: background .15s ease, border-color .15s ease;
}
.cp-role-card.on .cp-role-name::before { background: var(--rv-color-alpha-1000); border-color: var(--rv-color-alpha-1000); }
.cp-role-sub { color: var(--rv-font-color-lighter); font-size: 12.5px; line-height: 1.5; margin-top: 3px; }

.cp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-chip {
  padding: 8px 15px;
  border-radius: var(--rv-radius-full);
  border: 1px solid var(--rv-color-panel-border);
  background: var(--rv-color-panel);
  color: var(--rv-font-color-light);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.cp-chip:hover { border-color: var(--rv-color-gray-400); }
.cp-chip.on {
  background: var(--rv-color-alpha-1000);
  color: var(--rv-color-neutral-0);
  border-color: var(--rv-color-alpha-1000);
}

.ob-error {
  color: var(--rv-color-red-strong);
  font-size: var(--rv-font-size-x-small);
  margin-top: 10px;
}

/* card step: canvas centered in the body */
.ob-card-body { display: grid; justify-items: center; gap: 14px; }
.ob-card-body .cp-card-frame { width: 100%; box-shadow: none; margin: 0; }

/* ---- Avatar picker ---- */

.cp-avatar-tabs { display: flex; gap: 8px; margin-bottom: 18px; }

.cp-avatar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.cp-avatar-cell {
  aspect-ratio: 1;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--rv-color-panel-border);
  padding: 0;
  background: var(--rv-color-panel);
  cursor: pointer;
  transition: transform .15s ease;
}
.cp-avatar-cell:hover { transform: translateY(-2px); }
.cp-avatar-cell.on {
  outline: 2px solid var(--rv-color-alpha-1000);
  outline-offset: 2px;
}
.cp-avatar-cell canvas,
.cp-avatar-cell img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.cp-avatar-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.cp-drop {
  border: 1.5px dashed var(--rv-color-gray-300);
  border-radius: 16px;
  padding: 36px 20px;
  text-align: center;
  cursor: pointer;
  color: var(--rv-font-color-light);
  font-size: var(--rv-font-size-small);
  transition: border-color .15s ease, background .15s ease;
}
.cp-drop:hover, .cp-drop.dragover {
  border-color: var(--rv-color-alpha-1000);
  background: var(--rv-color-gray-50);
}
.cp-drop-preview {
  width: 116px;
  height: 116px;
  border-radius: var(--rv-radius-full);
  object-fit: cover;
  display: block;
  margin: 0 auto 14px;
  border: 1px solid var(--rv-color-panel-border);
}

/* ---- Share card ---- */

.cp-card-frame {
  width: min(680px, 92vw);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--rv-color-panel-border);
  margin: 0 auto;
}
.cp-card-frame canvas { display: block; width: 100%; height: auto; }

.ob-card-scene { text-align: center; width: min(760px, 94vw); }
.ob-card-scene .ob-step-kicker, .ob-card-scene .ob-h2 { text-align: center; }
.ob-card-scene .ob-sub { text-align: center; }
.cp-card-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

/* ============================================================
   Page-layout additions (v3): calendar bits, directory, lists
   ============================================================ */

/* event dots (calendar + upcoming) */
.cp-ev-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--rv-radius-full);
  flex: none;
  background: var(--rv-color-gray-400);
}
.cp-ev-dot.call { background: var(--rv-color-alpha-1000); }
.cp-ev-dot.office { background: var(--rv-color-gray-500); border-radius: 2px; }
.cp-ev-dot.preview { background: transparent; border: 1.5px solid var(--rv-color-alpha-1000); }
.cp-ev-dot.community { background: var(--rv-color-gray-300); }
.cp-ev-dot.irl { background: var(--rv-color-alpha-1000); border-radius: 2px; transform: rotate(45deg) scale(.9); }

/* upcoming / agenda rows */
.cp-upnext-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px var(--hq-pad-x);
  border-bottom: 1px solid var(--rv-color-hairline);
}
.cp-upnext-row:last-child { border-bottom: none; }
.cp-upnext-date {
  flex: none;
  width: 44px;
  text-align: center;
  border: 1px solid var(--rv-color-panel-border);
  border-radius: 10px;
  padding: 5px 0 7px;
}
.cp-upnext-date .m { font: 550 .5625rem/1.4 var(--rv-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--rv-font-color-lighter); }
.cp-upnext-date .d { font-family: var(--rv-font-display); font-weight: 500; font-size: 1.1rem; line-height: 1.1; }
.cp-upnext-main { flex: 1; min-width: 0; }
.cp-upnext-title { font-weight: 600; font-size: .86rem; }
.cp-upnext-sub { color: var(--rv-font-color-lighter); font-size: .78rem; margin-top: 1px; }

/* referral history status chips */
.cp-status {
  font: 550 .625rem/1 var(--rv-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--rv-radius-full);
  border: 1px solid var(--rv-color-panel-border);
  color: var(--rv-font-color-lighter);
  white-space: nowrap;
}
.cp-status.joined { color: var(--rv-font-color-normal); border-color: var(--rv-color-gray-400); }
.cp-status.activated {
  background: var(--rv-color-alpha-1000);
  border-color: var(--rv-color-alpha-1000);
  color: var(--rv-color-neutral-0);
}

/* how-it-works steps */
.cp-steps { display: grid; grid-template-columns: repeat(3, 1fr); }
.cp-step { padding: 18px var(--hq-pad-x); border-right: 1px solid var(--rv-color-hairline); }
.cp-step:last-child { border-right: none; }
.cp-step-num { font: 550 .6875rem/1 var(--rv-font-mono); letter-spacing: .09em; color: var(--rv-font-color-lighter); }
.cp-step-title { font-weight: 600; font-size: .9rem; margin: 9px 0 3px; }
.cp-step-text { color: var(--rv-font-color-light); font-size: .82rem; line-height: 1.55; }
@media (max-width: 760px) {
  .cp-steps { grid-template-columns: 1fr; }
  .cp-step { border-right: none; border-bottom: 1px solid var(--rv-color-hairline); }
  .cp-step:last-child { border-bottom: none; }
}

/* directory */
.dir-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--hq-grid-gap);
}
.dir-card {
  background: var(--rv-color-panel);
  border: 1px solid var(--rv-color-panel-border);
  border-radius: var(--rv-radius-l);
  padding: 18px 18px 15px;
  transition: transform .15s ease, border-color .15s ease;
}
.dir-card:hover { transform: translateY(-2px); border-color: var(--rv-color-gray-400); }
.dir-avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--rv-radius-full);
  overflow: hidden;
  border: 1px solid var(--rv-color-panel-border);
  margin-bottom: 12px;
}
.dir-avatar canvas, .dir-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.dir-name {
  font-family: var(--rv-font-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -.01em;
}
.dir-meta {
  font: 550 .625rem/1.7 var(--rv-font-mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--rv-font-color-lighter);
  margin: 3px 0 10px;
}
.dir-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: .78rem;
}
.dir-links a { color: var(--rv-font-color-light); text-decoration: none; }
.dir-links a:hover { color: var(--rv-font-color-normal); }
.dir-tag {
  display: inline-block;
  font: 550 .5625rem/1 var(--rv-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid var(--rv-color-panel-border);
  color: var(--rv-font-color-lighter);
  border-radius: var(--rv-radius-full);
  padding: 4px 8px;
  margin-top: 12px;
}
.dir-tag.founding {
  background: var(--rv-color-alpha-1000);
  border-color: var(--rv-color-alpha-1000);
  color: var(--rv-color-neutral-0);
}

/* home columns: bulletin + rail */
.cp-columns {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--hq-grid-gap);
  align-items: start;
}
@media (max-width: 1100px) { .cp-columns { grid-template-columns: 1fr; } }
.cp-columns .panel + .panel { margin-top: var(--hq-stack-gap); }

.cp-bulletin-item {
  display: flex;
  gap: 16px;
  padding: 13px var(--hq-pad-x);
  border-bottom: 1px solid var(--rv-color-hairline);
  align-items: flex-start;
}
.cp-bulletin-item:last-child { border-bottom: none; }
.cp-bulletin-date {
  font: 550 .6875rem/1.9 var(--rv-font-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--rv-font-color-lighter);
  width: 56px;
  flex: none;
}
.cp-bulletin-main { flex: 1; min-width: 0; }
.cp-bulletin-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cp-bulletin-title { font-weight: 600; font-size: .9rem; }
.cp-bulletin-blurb {
  color: var(--rv-font-color-light);
  font-size: .82rem;
  line-height: 1.55;
  margin-top: 2px;
}
.cp-new {
  font: 700 .5625rem/1 var(--rv-font-mono);
  letter-spacing: .1em;
  padding: 3px 7px;
  border-radius: var(--rv-radius-full);
  background: var(--rv-color-alpha-1000);
  color: var(--rv-color-neutral-0);
}

.cp-perk {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px var(--hq-pad-x);
  border-bottom: 1px solid var(--rv-color-hairline);
  font-size: .85rem;
}
.cp-perk:last-child { border-bottom: none; }
.cp-perk svg { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.cp-perk-name { font-weight: 600; }
.cp-perk-sub { color: var(--rv-font-color-lighter); font-size: .78rem; margin-top: 1px; }

/* two-column layout (profile) */
.cp-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--hq-grid-gap);
  align-items: start;
}
@media (max-width: 1100px) { .cp-two { grid-template-columns: 1fr; } }

.cp-profile-avatar-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px var(--hq-pad-x);
  border-bottom: 1px solid var(--rv-color-hairline);
}
.cp-profile-avatar {
  width: 76px;
  height: 76px;
  border-radius: var(--rv-radius-full);
  object-fit: cover;
  border: 1px solid var(--rv-color-panel-border);
  background: var(--rv-color-gray-50);
}
.cp-panel-body { padding: 15px var(--hq-pad-x) 18px; }
.cp-panel-body .cp-card-frame { width: 100%; box-shadow: none; }
.cp-form-foot { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.cp-field .field-label { margin-bottom: 6px; display: block; }

/* simple record lists (your submissions / intros / notes) */
.cp-record {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px var(--hq-pad-x);
  border-bottom: 1px solid var(--rv-color-hairline);
  font-size: .84rem;
}
.cp-record:last-child { border-bottom: none; }
.cp-record-date {
  flex: none;
  width: 56px;
  font: 550 .6563rem/1.8 var(--rv-font-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--rv-font-color-lighter);
}
.cp-record-main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--rv-font-color-light); }
.cp-record-main b { color: var(--rv-font-color-normal); font-weight: 550; }

/* ============================================================
   v4: consolidated home, live data, Reve AI helper
   ============================================================ */

/* two-up action modules on home */
.cp-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--hq-grid-gap);
  align-items: start;
}
@media (max-width: 700px) { .cp-grid2 { grid-template-columns: 1fr; } }
.cp-grid2 .module h2 { font-size: 18px; }
.cp-grid2 textarea.entry-input { min-height: 68px; }

/* smart digest (ink poster) */
.dg-text {
  font-family: var(--rv-font-display);
  font-weight: 500;
  font-size: clamp(17px, 2.4vw, 21px);
  letter-spacing: -.012em;
  line-height: 1.4;
  margin: 0;
  max-width: 56ch;
}
.dg-try {
  margin: 12px 0 0;
  font: 550 .6875rem/1.6 var(--rv-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--rv-color-neutral-0) 62%, transparent);
}
.dg-loading { animation: dg-pulse 1.6s ease-in-out infinite; }
@keyframes dg-pulse { 0%, 100% { opacity: .45; } 50% { opacity: .9; } }

/* expandable rows (what's new + up next details) */
.x-row { border-bottom: 1px solid var(--rv-color-hairline); }
.x-row:last-child { border-bottom: none; }
.x-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: 100%;
  padding: 12px var(--hq-pad-x);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.x-head:hover .x-title { text-decoration: underline; text-underline-offset: 3px; }
.x-date {
  flex: none;
  width: 52px;
  font: 550 .6563rem/1.9 var(--rv-font-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--rv-font-color-lighter);
}
.x-main { flex: 1; min-width: 0; }
.x-title { font-weight: 600; font-size: .9rem; }
.x-blurb { color: var(--rv-font-color-light); font-size: .8rem; line-height: 1.5; margin-top: 1px; }
.x-chev {
  flex: none;
  font-family: var(--rv-font-mono);
  color: var(--rv-font-color-lighter);
  transition: rotate .15s ease;
}
.x-row.open .x-chev { rotate: 45deg; }
.x-exp { padding: 2px calc(var(--hq-pad-x) + 66px) 16px; }
.x-exp p { margin: 0 0 8px; color: var(--rv-font-color-light); font-size: .84rem; line-height: 1.6; max-width: 58ch; }
.x-exp ol { margin: 0 0 10px; padding-left: 17px; }
.x-exp li { color: var(--rv-font-color-light); font-size: .82rem; line-height: 1.55; margin: 3px 0; }
.x-exp li::marker { color: var(--rv-font-color-lighter); font-family: var(--rv-font-mono); font-size: .7rem; }
.x-src {
  font: 550 .625rem/1.7 var(--rv-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rv-font-color-light);
  text-decoration: none;
}
.x-src:hover { color: var(--rv-font-color-normal); }
.x-loading {
  font: 550 .625rem/1.7 var(--rv-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rv-font-color-lighter);
  animation: dg-pulse 1.4s ease-in-out infinite;
}
@media (max-width: 640px) { .x-exp { padding: 2px var(--hq-pad-x) 16px; } }

/* ---- Reve AI helper (floating overlay — shadows allowed here, like menus) ---- */

.ai-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 18px;
  border: none;
  border-radius: var(--rv-radius-full);
  background: var(--rv-color-alpha-1000);
  color: var(--rv-color-neutral-0);
  font: 600 13px/1 var(--rv-font-sans);
  cursor: pointer;
  box-shadow: var(--rv-shadow-dialog);
  transition: transform .15s ease;
}
.ai-fab:hover { transform: translateY(-2px); }
.ai-fab svg { width: 15px; height: 15px; flex: none; }

.ai-panel {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 95;
  width: min(360px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  max-height: min(520px, calc(100dvh - 90px));
  background: var(--rv-color-panel);
  border: 1px solid var(--rv-color-panel-border);
  border-radius: var(--rv-radius-l);
  box-shadow: var(--rv-shadow-dialog);
  overflow: hidden;
}
.ai-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rv-color-hairline);
  flex: none;
}
.ai-head .spacer { margin-left: auto; }
.ai-close {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: var(--rv-font-color-lighter);
  padding: 4px 6px;
}
.ai-close:hover { color: var(--rv-font-color-normal); }

.ai-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 120px;
}
.ai-msg {
  max-width: 86%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ai-msg.user {
  align-self: flex-end;
  background: var(--rv-color-alpha-1000);
  color: var(--rv-color-neutral-0);
  border-bottom-right-radius: 5px;
}
.ai-msg.bot {
  align-self: flex-start;
  background: var(--rv-color-gray-100);
  border-bottom-left-radius: 5px;
}
.ai-msg.busy { animation: dg-pulse 1.4s ease-in-out infinite; }

.ai-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 14px 10px;
  flex: none;
}
.ai-suggest button {
  border: 1px solid var(--rv-color-panel-border);
  background: var(--rv-color-panel);
  color: var(--rv-font-color-light);
  border-radius: var(--rv-radius-full);
  padding: 6px 11px;
  font: 500 11.5px/1 var(--rv-font-sans);
  cursor: pointer;
}
.ai-suggest button:hover { border-color: var(--rv-color-gray-400); color: var(--rv-font-color-normal); }

.ai-inputrow {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--rv-color-hairline);
  flex: none;
}
.ai-inputrow .entry-input { flex: 1; min-width: 0; height: 38px; }
.ai-inputrow .btn { flex: none; height: 38px; padding: 0 14px; }

/* ---- v5 density + polish pass ---- */
:root { --hq-panel-header-h: 48px; --cp-card-pad: clamp(16px, 2.2vw, 20px); }
.stat-tile { padding: 14px 16px; }
.module--digest { padding: 18px var(--cp-card-pad) 16px; }
.module--digest .module-top { margin-bottom: 8px; }
.x-head { padding: 10px var(--hq-pad-x); }
.x-blurb {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.x-title .tag { margin-left: 8px; vertical-align: 1px; }
.x-divider {
  padding: 9px var(--hq-pad-x) 5px;
  font: var(--rv-microlabel);
  letter-spacing: var(--rv-microlabel-tracking);
  text-transform: uppercase;
  color: var(--rv-font-color-lighter);
  border-bottom: 1px solid var(--rv-color-hairline);
}
.cp-grid2 .module h2, #rail-actions .module h2 { font-size: 17px; margin-bottom: 10px; }
#rail-actions textarea.entry-input { min-height: 60px; }

/* markdown in Reve AI bubbles */
.ai-msg b { font-weight: 650; }
.ai-msg ul { margin: 4px 0 2px; padding-left: 16px; }
.ai-msg li { margin: 2px 0; }


/* right-rail actions: column beside the feed; 2-up when columns collapse */
.cp-rail { display: flex; flex-direction: column; gap: var(--hq-stack-gap); }
@media (max-width: 1100px) {
  .cp-rail { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (max-width: 700px) {
  .cp-rail { grid-template-columns: 1fr; }
}

/* boxed date chips inside expandable rows + digest actions */
.x-head { align-items: center; }
.x-head .cp-upnext-date { flex: none; }
.x-exp { padding-left: calc(var(--hq-pad-x) + 56px); }
@media (max-width: 640px) { .x-exp { padding-left: var(--hq-pad-x); } }
.dg-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* ---- v6: skeletons, typing, tagged digest, rail panels ---- */
.sk-row { display: flex; gap: 14px; align-items: center; padding: 12px var(--hq-pad-x); }
.sk {
  display: block;
  border-radius: 6px;
  background: linear-gradient(100deg, var(--rv-color-gray-100) 30%, var(--rv-color-gray-50) 50%, var(--rv-color-gray-100) 70%);
  background-size: 200% 100%;
  animation: sk-wave 1.3s linear infinite;
}
@keyframes sk-wave { to { background-position: -200% 0; } }
.sk-chip { width: 44px; height: 44px; border-radius: 10px; flex: none; }
.sk-line { height: 10px; margin: 5px 0; }

.dg-tag {
  display: inline-block;
  vertical-align: 3px;
  font: 700 .5625rem/1 var(--rv-font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--rv-color-neutral-0);
  color: var(--rv-color-alpha-1000);
  padding: 4px 8px;
  border-radius: var(--rv-radius-full);
  margin-right: 10px;
}

.x-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }

.cp-rail { margin-top: var(--hq-stack-gap); }
.cp-rail .panel { margin-top: 0 !important; }
.cp-rail textarea.entry-input { min-height: 60px; }

.ai-mark {
  width: 24px;
  height: 24px;
  border-radius: var(--rv-radius-full);
  background: var(--rv-color-alpha-1000);
  color: var(--rv-color-neutral-0);
  display: grid;
  place-items: center;
  flex: none;
}
.ai-mark svg { width: 12px; height: 12px; }
.ai-panel { width: min(380px, calc(100vw - 32px)); }
.ai-typing { display: inline-flex; gap: 4px; padding: 3px 0; }
.ai-typing i {
  width: 6px;
  height: 6px;
  border-radius: var(--rv-radius-full);
  background: currentColor;
  opacity: .35;
  animation: ai-tp 1.1s ease-in-out infinite;
}
.ai-typing i:nth-child(2) { animation-delay: .18s; }
.ai-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes ai-tp { 0%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* ---- v7: notifications, unread, action bar, modal ---- */
.nf-nav { height: 30px; padding: 0 12px; font-size: 14px; }
.x-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: var(--rv-radius-full);
  background: var(--rv-color-alpha-1000);
  margin-right: 8px;
  vertical-align: 2px;
}
.x-row:not(.unread) .x-title { font-weight: 500; }
.x-row.unread .x-title { font-weight: 650; }

.cp-actionbar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hq-grid-gap);
  margin-top: var(--hq-stack-gap);
}
@media (max-width: 700px) { .cp-actionbar { grid-template-columns: 1fr; } }
.cp-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  background: var(--rv-color-panel);
  border: 1px solid var(--rv-color-panel-border);
  border-radius: var(--rv-radius-l);
  font: 600 14px/1 var(--rv-font-sans);
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
}
.cp-action:hover { border-color: var(--rv-color-alpha-1000); transform: translateY(-2px); }
.cp-action svg { width: 17px; height: 17px; flex: none; }

.cp-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: light-dark(rgb(0 0 0 / .32), rgb(0 0 0 / .6));
  display: grid;
  place-items: center;
  padding: 20px;
}
.cp-modal {
  width: min(480px, 100%);
  box-shadow: var(--rv-shadow-dialog);
}
.cp-ref-stat { display: flex; align-items: baseline; gap: 10px; }

/* ---- v8: wordmark-draw intro, card reveal, top action bar ---- */
.cp-actionbar--top { grid-template-columns: repeat(4, 1fr); margin: 0 0 var(--hq-stack-gap); }
@media (max-width: 900px) { .cp-actionbar--top { grid-template-columns: repeat(2, 1fr); } }

.ob-draw-wrap { text-align: center; cursor: pointer; color: var(--rv-color-alpha-1000); }
.ob-wordmark { width: min(300px, 64vw); margin: 0 auto; }
.ob-wordmark svg { width: 100%; height: auto; display: block; }
.ob-stamp {
  display: inline-block;
  margin-top: 22px;
  opacity: 0;
  transform: scale(1.6);
}
.ob-stamp.in {
  opacity: 1;
  transform: scale(1);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2, .9, .3, 1.2);
}

/* ceremonial card reveal (student-hub energy) */
#scene-card.active .cp-card-frame {
  animation: card-in .9s cubic-bezier(.2, .9, .3, 1) both;
}
@keyframes card-in {
  from { opacity: 0; transform: perspective(1000px) rotateX(16deg) translateY(34px) scale(.93); }
  to { opacity: 1; transform: none; }
}
#scene-card.active .cp-chips, #scene-card.active .ob-foot { animation: ob-fade-up .5s ease .45s both; }
@media (prefers-reduced-motion: reduce) {
  #scene-card.active .cp-card-frame, .ob-stamp.in { animation: none; transition: none; }
}

/* event overlay + clickable calendar rows */
.ev-meta {
  font: 550 .6875rem/1.6 var(--rv-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rv-font-color-lighter);
  margin-bottom: 10px;
}
#ev-modal-body p { color: var(--rv-font-color-light); font-size: .88rem; line-height: 1.6; margin: 0 0 10px; }
.cp-upnext-click { cursor: pointer; }
.cp-upnext-click:hover .cp-upnext-title { text-decoration: underline; text-underline-offset: 3px; }

/* ---- v9: bigger actions, view-all footer, poster polish ---- */
.cp-action { padding: 22px 16px; font-size: 15px; }
.cp-action svg { width: 19px; height: 19px; }
.cp-actionbar--top { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .cp-actionbar--top { grid-template-columns: 1fr; } }

.wn-foot { padding: 10px var(--hq-pad-x) 12px; border-top: 1px solid var(--rv-color-hairline); }
.wn-foot .btn { width: 100%; }

.module--digest .dg-text { font-size: clamp(19px, 2.6vw, 24px); margin-top: 2px; }
.nf-nav { height: 34px; width: 34px; padding: 0; font-size: 15px; }
#nf-actions { margin-top: 16px; }

/* past events greyed; right rail stretches to match the feed column */
.x-row.past { opacity: .55; }
.x-row.past:hover { opacity: .85; }
.cp-columns > div:last-child {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: var(--hq-stack-gap);
}
.cp-columns > div:last-child .panel { margin-top: 0 !important; }
.cp-columns > div:last-child .panel:last-child { flex: 1; }

/* poster blurb */
#nf-blurb { margin: 8px 0 0; max-width: 68ch; }
#nf-actions { margin-top: 18px; }

/* ---- v10: onboarding ceremony (campus-leader copy) ---- */
.ob-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 10;
  background: var(--rv-color-gray-100);
}
.ob-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--rv-color-alpha-1000);
  transition: width .6s cubic-bezier(.4, 0, .2, 1);
}

.ob-sign {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 420px);
  gap: var(--hq-grid-gap);
  width: min(1080px, 94vw);
  align-items: start;
}
@media (max-width: 980px) {
  .ob-sign { grid-template-columns: 1fr; width: min(620px, 94vw); }
}
.ob-sign .ob-panel { width: 100%; }
.ob-sign-card .cp-card-frame { width: 100%; }

.ob-cycle { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.ob-cycle .spacer { margin-left: auto; }
.ob-cycle-label {
  min-width: 92px;
  text-align: center;
  font: var(--rv-microlabel);
  letter-spacing: var(--rv-microlabel-tracking);
  text-transform: uppercase;
  color: var(--rv-font-color-light);
}

#scene-sign.active .cp-card-frame {
  animation: card-in .9s cubic-bezier(.2, .9, .3, 1) both;
}
.cp-card-frame.stamped { animation: card-in .7s cubic-bezier(.2, .9, .3, 1) both; }
@media (prefers-reduced-motion: reduce) {
  #scene-sign.active .cp-card-frame, .cp-card-frame.stamped { animation: none; }
}

/* ---- v11: layout rebalance, arrival, drama ---- */
.cp-left { display: flex; flex-direction: column; gap: var(--hq-stack-gap); }
.cp-left .module--digest { margin: 0; }
.cp-columns > div:last-child div.panel:last-of-type { flex: 1; }
.cp-columns > div:last-child .panel:last-child { flex: unset; }
.cp-actionbar--top { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .cp-actionbar--top { grid-template-columns: repeat(2, 1fr); } }

/* less crowded onboarding form */
.ob-panel .ob-body { padding: 24px var(--hq-pad-x) 26px; }
.ob-grid { gap: 16px 14px; }

/* dramatic stamp */
.cp-card-frame.stamped { animation: card-stamp 1.15s cubic-bezier(.2, .85, .25, 1) both; }
@keyframes card-stamp {
  0% { opacity: 0; transform: perspective(1300px) rotateY(65deg) scale(.72); }
  55% { opacity: 1; transform: perspective(1300px) rotateY(-7deg) scale(1.05); }
  75% { transform: perspective(1300px) rotateY(3deg) scale(.99); }
  100% { opacity: 1; transform: none; }
}

/* arrival: the hub assembles itself after onboarding */
body.arrive #view-home > * {
  opacity: 0;
  animation: arrive-in .55s cubic-bezier(.2, .8, .3, 1) forwards;
}
body.arrive #view-home > :nth-child(1) { animation-delay: .05s; }
body.arrive #view-home > :nth-child(2) { animation-delay: .18s; }
body.arrive #view-home > :nth-child(3) { animation-delay: .31s; }
body.arrive #view-home > :nth-child(4) { animation-delay: .44s; }
@keyframes arrive-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.arrive #view-home > *, .cp-card-frame.stamped { animation: none; opacity: 1; }
}

/* ---- v12: the real ceremony (Campus Leader port) ---- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

#scene-sign { transition: background .7s ease; }
/* flex like the campus gate: rc-cols' auto margins center it when space allows,
   and the top stays reachable by scroll when it does not */
#scene-sign.active { display: flex; flex-direction: column; justify-content: flex-start; overflow-y: auto; }
.rc-cols { display: grid; grid-template-columns: minmax(0, 410px) minmax(0, 380px); gap: 52px; align-items: center; justify-content: center; width: 100%; max-width: 920px; margin: auto; padding: 34px 0; }
.rc-cardcol { display: flex; flex-direction: column; align-items: center; gap: 15px; }
.rc-cardcol .rc-stage { width: clamp(300px, 36vw, 410px); }

/* the card stage */
.rc-stage { background: var(--rv-color-gray-100); border-radius: 32px; padding: 18px; display: flex; justify-content: center; transition: background .7s ease, padding .7s ease; }
.rc-float { width: 100%; transform-style: preserve-3d; }
.rc-wrap { position: relative; cursor: pointer; transition: transform 90ms cubic-bezier(.55, 0, 1, .45), box-shadow 90ms cubic-bezier(.55, 0, 1, .45); will-change: transform; }
.rc-flip { position: relative; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.35, .1, .22, 1); }
.rc-flip.flipped { transform: rotateY(180deg); }
.rc-face { border-radius: 14px; border: 1px solid var(--rv-color-panel-border); background: #fff; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 24px 60px rgba(0, 0, 0, .14); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.rc-face canvas { display: block; width: 100%; height: auto; border-radius: 13px; }
.rc-face.rc-back { position: absolute; inset: 0; transform: rotateY(180deg); }
.rc-face.rc-back canvas { height: 100%; }
.rc-wrap.press { transform: scale(.985) translateY(1px); box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 6px rgba(0, 0, 0, .18); }
.rc-wrap.set { animation: rc-set .28s cubic-bezier(.34, 1.4, .64, 1); }
@keyframes rc-set { 0% { transform: scale(.985) translateY(1px); } 55% { transform: scale(1.003); } 100% { transform: none; } }
.rc-wrap.live { transition: box-shadow .3s ease; }
.rc-glare { position: absolute; inset: 0; border-radius: 13px; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 26%, rgba(0, 0, 0, .04) 40%, rgba(255, 255, 255, .5) 50%, rgba(0, 0, 0, .04) 60%, rgba(255, 255, 255, 0) 74%);
  background-size: 260% 260%; background-repeat: no-repeat;
  background-position: calc(50% + var(--gx, 0%)) calc(50% + var(--gy, 0%)); }

/* the look cycler + flip hint */
.rc-cycle { display: inline-flex; align-items: center; border: 1px solid var(--rv-color-panel-border); border-radius: 999px; height: 38px; padding: 0 4px; }
.rc-cycle button { position: relative; min-width: 38px; height: 100%; border: 0; background: none; cursor: pointer; font-size: 16px; line-height: 1; color: var(--rv-font-color-light); border-radius: 999px; transition: color .15s ease, background .15s ease, transform .12s ease; }
.rc-cycle button::before { content: ""; position: absolute; inset: -4px; }
.rc-cycle button:hover { color: var(--rv-font-color-normal); background: var(--rv-color-gray-100); }
.rc-cycle button:active { transform: scale(.94); }
.rc-cyclelb { font: var(--rv-microlabel); letter-spacing: .12em; text-transform: uppercase; color: var(--rv-font-color-normal); min-width: 96px; text-align: center; }
.rc-fliphint { font: var(--rv-microlabel); letter-spacing: .12em; text-transform: uppercase; color: var(--rv-font-color-lighter); }

/* the art choices */
.rc-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rc-choice { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--rv-color-panel-border); border-radius: 13px; background: var(--rv-color-panel); cursor: pointer; text-align: left; font-family: inherit; color: inherit; transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease; }
.rc-choice:hover { border-color: var(--rv-color-gray-400); }
.rc-choice:active { transform: scale(.98); }
.rc-choice.on { border-color: var(--rv-color-alpha-1000); box-shadow: inset 0 0 0 1px var(--rv-color-alpha-1000); }
.rc-choice .cv { width: 42px; height: 42px; border-radius: 9px; flex: none; background: var(--rv-color-gray-100); color: var(--rv-font-color-normal); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.rc-choice .cv svg { width: 22px; height: 22px; display: block; }
.rc-choice .cv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-choice .cv canvas { width: 100%; height: 100%; display: block; }
.rc-choice .ct { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rc-choice .cl { font-size: 13.5px; font-weight: 500; color: var(--rv-font-color-normal); line-height: 1.15; }
.rc-choice .cs { font: var(--rv-microlabel); letter-spacing: .07em; text-transform: uppercase; color: var(--rv-font-color-light); }
.rc-choice .cu { margin-left: auto; flex: none; color: var(--rv-font-color-light); }
.rc-choice .cu svg { width: 16px; height: 16px; display: block; }
.rc-choice:hover .cu { color: var(--rv-font-color-normal); }

/* the side column */
.rc-side { text-align: left; min-width: 0; }
.rc-over { font: var(--rv-microlabel); letter-spacing: .16em; text-transform: uppercase; color: var(--rv-font-color-light); margin: 0 0 12px; }
.rc-h { font-family: var(--rv-font-display); font-weight: 500; font-size: clamp(26px, 3.4vw, 34px); letter-spacing: -.022em; line-height: 1.05; margin: 0 0 22px; text-wrap: balance; color: var(--rv-font-color-normal); }
.rc-h:focus { outline: none; }
.rc-field { position: relative; margin: 0 0 15px; }
.rc-field label { display: block; font: var(--rv-microlabel); letter-spacing: .1em; text-transform: uppercase; color: var(--rv-font-color-light); margin: 0 0 7px; }
.rc-field input { width: 100%; height: 48px; padding: 0 15px; border: 1px solid var(--rv-color-panel-border); border-radius: 11px; background: var(--rv-color-panel); color: var(--rv-font-color-normal); font-family: inherit; font-size: 15px; transition: border-color .15s ease, box-shadow .15s ease; }
.rc-field input:focus { outline: none; border-color: var(--rv-color-alpha-1000); box-shadow: 0 0 0 3px rgba(0, 0, 0, .06); }
.rc-actions { display: flex; align-items: center; gap: 14px; margin: 6px 0 0; flex-wrap: wrap; }
.rc-actions .btn { height: 46px; padding: 0 24px; font-size: 15px; }
.rc-actions .btn:disabled { opacity: .35; cursor: default; }
.rc-step[hidden] { display: none; }
.rc-done .rc-actions2 { display: flex; align-items: center; gap: 12px; margin: 20px 0 0; flex-wrap: wrap; }
.rc-done .rc-actions2 .btn { height: 46px; padding: 0 24px; font-size: 15px; }
.rc-more { margin: 20px 0 0; font: var(--rv-microlabel); letter-spacing: .06em; text-transform: uppercase; color: var(--rv-font-color-light); }
.rc-dl { position: relative; display: inline-block; }
.rc-dlmenu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 190px; background: var(--rv-color-panel); border: 1px solid var(--rv-color-panel-border); border-radius: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, .14); padding: 5px; z-index: 60; }
.rc-dlmenu[hidden] { display: none; }
.rc-dlmenu button { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 11px 13px; min-height: 40px; font-family: inherit; font-size: 13.5px; font-weight: 500; color: var(--rv-font-color-normal); cursor: pointer; transition: background .12s ease; }
.rc-dlmenu button:hover { background: var(--rv-color-gray-100); }
.rc-dlmenu button:active { transform: scale(.98); }

/* staggered enter, one-shot */
#scene-sign .rc-st, #scene-sign .rc-cardcol { opacity: 0; transform: translateY(12px); filter: blur(4px); }
#scene-sign.go .rc-cardcol { animation: rc-in .42s cubic-bezier(.22, 1, .36, 1) .12s forwards; }
#scene-sign.go .rc-st:nth-child(1) { animation: rc-in .38s cubic-bezier(.22, 1, .36, 1) .22s forwards; }
#scene-sign.go .rc-st:nth-child(2) { animation: rc-in .38s cubic-bezier(.22, 1, .36, 1) .32s forwards; }
#scene-sign.go .rc-st:nth-child(3) { animation: rc-in .38s cubic-bezier(.22, 1, .36, 1) .42s forwards; }
#scene-sign.go .rc-st:nth-child(4) { animation: rc-in .38s cubic-bezier(.22, 1, .36, 1) .52s forwards; }
#scene-sign.go .rc-st:nth-child(5) { animation: rc-in .38s cubic-bezier(.22, 1, .36, 1) .62s forwards; }
@keyframes rc-in { to { opacity: 1; transform: none; filter: none; } }
/* fill-forwards filter/transform would trap the download menu under later rows;
   .settled strips the entrance outright once it has played */
#scene-sign.settled .rc-st, #scene-sign.settled .rc-cardcol { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
#scene-sign #rcForm.out { opacity: 0; transform: translateY(6px); transition: opacity 160ms cubic-bezier(.4, 0, 1, 1), transform 160ms cubic-bezier(.4, 0, 1, 1); }
.rc-done .rc-st2 { opacity: 0; transform: translateY(10px); filter: blur(4px); }
#scene-sign.sealed .rc-st2:nth-child(1) { animation: rc-in .32s cubic-bezier(.22, 1, .36, 1) 0s forwards; }
#scene-sign.sealed .rc-st2:nth-child(2) { animation: rc-in .32s cubic-bezier(.22, 1, .36, 1) .06s forwards; }
#scene-sign.sealed .rc-st2:nth-child(3) { animation: rc-in .32s cubic-bezier(.22, 1, .36, 1) .12s forwards; }
#scene-sign.sealed .rc-st2:nth-child(4) { animation: rc-in .32s cubic-bezier(.22, 1, .36, 1) .28s forwards; }

/* the night stage. after the stamp the lights drop and the card floats */
body.ob-night .ob-stage { background: #000; transition: background .7s ease; }
body.ob-night .ob-bar { opacity: 0; }
#scene-sign.night { background: #000; }
#scene-sign.night .rc-stage { background: transparent; }
#scene-sign.night .rc-float { animation: rc-drift 7s ease-in-out 1.4s infinite; }
#scene-sign.night .rc-cardcol:hover .rc-float { animation-play-state: paused; }
@keyframes rc-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
#scene-sign.night .rc-face { border-color: rgba(255, 255, 255, .16); box-shadow: 0 2px 18px rgba(255, 255, 255, .10), 0 34px 90px -18px rgba(255, 255, 255, .16); }
#scene-sign.night .rc-over { color: rgba(255, 255, 255, .55); }
#scene-sign.night .rc-h { color: #fff; font-size: clamp(30px, 4.4vw, 46px); }
#scene-sign.night .rc-more { color: rgba(255, 255, 255, .5); }
#scene-sign.night .rc-fliphint { color: rgba(255, 255, 255, .35); }
#scene-sign.night .rc-cycle { border-color: rgba(255, 255, 255, .22); }
#scene-sign.night .rc-cycle button { color: rgba(255, 255, 255, .5); }
#scene-sign.night .rc-cycle button:hover { color: #fff; background: rgba(255, 255, 255, .1); }
#scene-sign.night .rc-cyclelb { color: #fff; }
#scene-sign.night .btn { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
#scene-sign.night .btn:hover:not(:disabled) { background: transparent; border-color: #fff; }
#scene-sign.night .btn-primary { background: #fff; color: #000; border-color: #fff; }
#scene-sign.night .btn-primary:hover:not(:disabled) { background: #fff; opacity: .88; }
#scene-sign.night .rc-dlmenu { background: #141414; border-color: rgba(255, 255, 255, .22); box-shadow: 0 14px 40px rgba(0, 0, 0, .6); }
#scene-sign.night .rc-dlmenu button { color: #fff; }
#scene-sign.night .rc-dlmenu button:hover { background: rgba(255, 255, 255, .09); }
#scene-sign.night :focus-visible { outline-color: #fff; }

@media (max-width: 719px) {
  .rc-cols { grid-template-columns: minmax(0, 1fr); gap: 26px; max-width: 420px; padding: 22px 0; }
  .rc-cardcol .rc-stage { width: min(76vw, 340px); }
  .rc-side { text-align: center; }
  .rc-actions, .rc-done .rc-actions2 { justify-content: center; }
  .rc-choices { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  #scene-sign .rc-st, .rc-done .rc-st2, #scene-sign .rc-cardcol { animation-delay: 0ms !important; }
  .rc-wrap { transition: none; }
  .rc-wrap.set { animation: none; }
  #scene-sign.night .rc-float { animation: none; }
  .rc-glare { display: none; }
  .rc-flip { transition: none; }
}

/* keep the underline off rail links */
a.cp-action { text-decoration: none; }

/* ---- v13: small-screen polish ---- */
#nf-count, #nf-over { white-space: nowrap; }
#nf-over { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) {
  .view-header { flex-wrap: wrap; row-gap: 10px; }
  .view-actions { flex-wrap: wrap; }
  #nf-actions { display: flex; flex-wrap: wrap; gap: 10px; }
}

/* ---- v14: quieter agreement + about-you, black-to-hub transition, rail polish ---- */

/* the two setup scenes speak the ceremony's language */
.ob-col { width: min(560px, 92vw); text-align: left; }
.ob-col .rc-h { margin-bottom: 26px; }
.ob-col .rc-field { margin-bottom: 24px; }
.ob-col .rc-actions { margin-top: 10px; }
.ob-perks { border-top: 1px solid var(--rv-color-panel-border); margin: 0 0 26px; }
.ob-perks .cp-perk { padding: 16px 0; border-bottom: 1px solid var(--rv-color-panel-border); }
.ob-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .ob-row2 { grid-template-columns: 1fr; } }
.rc-choice--stack { flex-direction: column; align-items: flex-start; gap: 5px; padding: 15px 16px; }
.rc-choice--stack .cl { font-size: 14.5px; }
.rc-choice--stack .cs2 { font-size: 13px; color: var(--rv-font-color-light); line-height: 1.35; }

/* leaving the night: the card lifts off, the side settles out */
#scene-sign.leave .rc-cardcol { animation: rc-card-leave .55s cubic-bezier(.55, .05, .55, .95) forwards; }
#scene-sign.leave .rc-side { animation: rc-side-leave .4s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes rc-card-leave { to { opacity: 0; transform: translateY(-28px) scale(1.06); filter: blur(8px); } }
@keyframes rc-side-leave { to { opacity: 0; transform: translateY(10px); filter: blur(5px); } }

/* arriving in the hub: a black veil lifts while home assembles beneath it */
body.arrive::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: #000;
  pointer-events: none;
  animation: arrive-veil .9s cubic-bezier(.4, 0, .2, 1) .05s forwards;
}
@keyframes arrive-veil { to { opacity: 0; } }
body.arrive #view-home > :nth-child(1) { animation-delay: .3s; }
body.arrive #view-home > :nth-child(2) { animation-delay: .45s; }
body.arrive #view-home > :nth-child(3) { animation-delay: .6s; }
body.arrive #view-home > :nth-child(4) { animation-delay: .75s; }
@media (prefers-reduced-motion: reduce) {
  body.arrive::after { display: none; }
  #scene-sign.leave .rc-cardcol, #scene-sign.leave .rc-side { animation: none; }
}

/* Upcoming: capped, scrollable, with a full-width View all footer */
.cp-columns > div:last-child div.panel:last-of-type { display: flex; flex-direction: column; }
#up-list { flex: 1; min-height: 0; max-height: 480px; overflow-y: auto; }

/* Book a call reads as the rail's primary action */
a.cp-action--ink {
  background: var(--rv-color-alpha-1000);
  color: var(--rv-color-neutral-0);
  border-color: var(--rv-color-alpha-1000);
}
a.cp-action--ink:hover { opacity: .86; border-color: var(--rv-color-alpha-1000); }

/* ---- v15: chat polish + dual Kyra actions + anchor role cards ---- */
.ai-msgs { display: flex; flex-direction: column; gap: 10px; padding: 16px 14px; }
.ai-msg { max-width: 86%; padding: 10px 14px; font-size: 14px; line-height: 1.5; border-radius: 16px; }
.ai-msg.user { align-self: flex-end; background: var(--rv-color-alpha-1000); color: var(--rv-color-neutral-0); border-bottom-right-radius: 6px; }
.ai-msg.bot { align-self: flex-start; background: var(--rv-color-gray-50); border: 1px solid var(--rv-color-panel-border); border-bottom-left-radius: 6px; }
.ai-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ai-actions .btn { background: var(--rv-color-panel); }
.ai-suggest { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 14px 10px; }
.ai-suggest button { border-radius: 999px; }
.ai-inputrow { border-top: 1px solid var(--rv-color-panel-border); padding: 10px 12px; gap: 8px; }
.ai-inputrow .entry-input { height: 40px; border-radius: 999px; padding: 0 16px; }
.ai-inputrow .btn { height: 40px; width: 40px; padding: 0; border-radius: 50%; flex: none; }
a.cp-role-card { text-decoration: none; color: inherit; display: block; }

/* ---- v16: the rail defers to the left column's height ----
   min-height:0 down the chain lets the Upcoming list shrink and scroll instead
   of stretching the row, so Book a call lands flush with What's new. */
.cp-columns { align-items: stretch; }
.cp-columns > div:last-child { min-height: 0; }
.cp-columns > div:last-child div.panel:last-of-type { min-height: 220px; }
#up-list { max-height: none; min-height: 0; }
@media (max-width: 1100px) {
  /* single column: no row to defer to — cap the list again */
  #up-list { max-height: 420px; }
}

/* ---- v17: cinematic arrival — the night lifts off the hub ----
   The head script sets html.arriving BEFORE first paint, so navigation from the
   black ceremony never flashes white. When the app boots (.arrive-go), the black
   sheet lifts upward with a feathered lower edge while the hub settles beneath. */
html.arriving { background: #000; }
html.arriving::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3000;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0) 0, #000 7%);
  /* no-JS / crashed-boot fallback: the veil still lifts, just later */
  animation: veil-lift 1.15s cubic-bezier(.76, 0, .24, 1) 3.5s forwards;
}
html.arriving.arrive-go::after {
  animation: veil-lift 1.15s cubic-bezier(.76, 0, .24, 1) .3s forwards;
}
@keyframes veil-lift { to { transform: translateY(-112%); } }

/* the old flat fade is superseded by the lifting sheet */
body.arrive::after { content: none; }

/* the hub rises gently into place as the night clears it */
body.arrive .app {
  animation: hub-settle 1.25s cubic-bezier(.22, 1, .36, 1) .35s both;
}
@keyframes hub-settle {
  from { opacity: .5; transform: translateY(16px) scale(.992); }
  to { opacity: 1; transform: none; }
}
body.arrive #view-home > :nth-child(1) { animation-delay: .5s; }
body.arrive #view-home > :nth-child(2) { animation-delay: .64s; }
body.arrive #view-home > :nth-child(3) { animation-delay: .78s; }
body.arrive #view-home > :nth-child(4) { animation-delay: .92s; }
@media (prefers-reduced-motion: reduce) {
  html.arriving { background: unset; }
  html.arriving::after { display: none; }
  body.arrive .app { animation: none; }
}

/* ---- v18: three actions; rail truly bound to the left column; veil slides DOWN ---- */

/* Introduce a team removed — three buttons across */
.cp-actionbar--top { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .cp-actionbar--top { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .cp-actionbar--top { grid-template-columns: 1fr; } }

/* contain:size stops the rail's own content from growing the grid row, so the
   row height comes from the LEFT column alone and the rail stretches to it —
   Book a call lands flush with What's new no matter how many events exist.
   Scoped to two-column widths; stacked mode must keep natural height. */
@media (min-width: 1101px) {
  .cp-columns > div:last-child { contain: size; }
}

/* the veil now slides DOWN so the reveal runs top-to-bottom, in the same order
   as the content stagger (upward lift uncovered the greeting LAST — glitchy).
   The feathered edge sits above the viewport at rest, so first paint is solid. */
html.arriving::after {
  inset: auto 0 0 0;
  top: -10%;
  height: 112%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000 8%);
}
@keyframes veil-lift { to { transform: translateY(114%); } }

/* ---- v19: the card files itself into Profile ----
   Arrival: the stamped card holds center stage on black, the hub fades in
   BLURRED behind it, then the card shrinks into the Profile nav item while
   the blur clears. Replaces the sliding-sheet veil and the home stagger. */
html.arriving::after { content: none; }
html.arriving { animation: arriving-relax .6s ease 4s forwards; }   /* no-JS fallback */
@keyframes arriving-relax { to { background: #fff0; } }
body.arrive .app { animation: none; filter: blur(16px) brightness(.92); transform: scale(1.015); }
body.arrive.arrive-clear .app { filter: none; transform: none; transition: filter .85s ease, transform .85s ease; }
body.arrive #view-home > * { animation: none !important; opacity: 1 !important; }

#arrive-stage {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  transition: background .7s ease;
}
#arrive-stage.dim { background: rgba(0, 0, 0, .38); }
#arrive-stage.clear { background: rgba(0, 0, 0, 0); pointer-events: none; }
.arrive-card {
  width: min(320px, 60vw);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 18px rgba(255, 255, 255, .10), 0 34px 90px -18px rgba(0, 0, 0, .55);
  transition: transform .8s cubic-bezier(.7, 0, .3, 1), opacity .8s cubic-bezier(.7, 0, .3, 1);
  will-change: transform;
}
.arrive-card canvas { display: block; width: 100%; height: auto; border-radius: 14px; }
.nav-item.pulse {
  background: var(--rv-color-gray-100);
  box-shadow: inset 0 0 0 1.5px var(--rv-color-alpha-1000);
  transition: box-shadow .2s ease, background .2s ease;
}

/* onboarding leave: the card glides (inline FLIP transform), the rest recedes */
#scene-sign.leave .rc-cardcol { animation: none; }
#scene-sign.leave .rc-float { animation: none; }
#scene-sign.leave .rc-glare { opacity: 0 !important; }
#scene-sign.leave .rc-cycle,
#scene-sign.leave .rc-fliphint { animation: rc-side-leave .35s cubic-bezier(.4, 0, .2, 1) forwards; }

/* ---- v20: the throw — banked arc, motion blur, ghost trail ---- */
#arrive-stage { display: grid; place-items: center; perspective: 1100px; }
#arrive-stage > * { grid-area: 1 / 1; }
.arrive-card { transition: none; }
.arrive-card.windup {
  transition: transform .18s cubic-bezier(.34, 1.3, .64, 1);
  transform: scale(1.04) rotate(1.8deg);
}
.arrive-ghost { pointer-events: none; box-shadow: none; opacity: var(--o, .25); }
.arrive-card.fly {
  animation: card-fly .92s forwards;
  transition: none;
}
@keyframes card-fly {
  0% {
    transform: scale(1.04) rotate(1.8deg);
    filter: blur(var(--b, 0px));
    opacity: var(--o, 1);
    animation-timing-function: cubic-bezier(.55, 0, .85, .38);   /* wind up → accelerate */
  }
  42% {
    transform: translate(calc(var(--dx) * .34), calc(var(--dy) * .34 - 46px))
               rotate(-7deg)
               scale(calc(1 - (1 - var(--k)) * .4));
    filter: blur(calc(var(--b, 0px) + 7px));                     /* peak velocity, heaviest smear */
    opacity: var(--o, 1);
    animation-timing-function: cubic-bezier(.16, .5, .28, 1);    /* decelerate into the slot */
  }
  100% {
    transform: translate(var(--dx), var(--dy)) rotate(-13deg) scale(var(--k));
    filter: blur(calc(var(--b, 0px) + 2px));
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .arrive-card.fly, .arrive-card.windup { animation: none; transition: none; transform: none; opacity: 0; }
}

/* ---- v21: transition de-glitch ----
   The unblur must interpolate — `filter: none` can snap instead of easing.
   And the card's rAF flight owns its own transitions (windup class is removed
   at launch in JS so its .18s transform transition can't rubber-band frames). */
body.arrive.arrive-clear .app {
  filter: blur(0px) brightness(1);
  transform: scale(1);
  transition: filter .85s ease, transform .85s ease;
}

/* ---- v22: depth of field — focus racks with the flight ----
   The unblur and the scrim fade run the same .95s as the card's travel, on the
   same accelerate-then-glide curve, so the world is exactly sharp at landing. */
body.arrive.arrive-clear .app {
  filter: blur(0px) brightness(1);
  transform: scale(1);
  transition: filter .95s cubic-bezier(.5, .05, .25, 1), transform .95s cubic-bezier(.5, .05, .25, 1);
}
#arrive-stage { transition: background .95s cubic-bezier(.5, .05, .25, 1); }

/* ---- v24: the hub loads in ---- */
/* every cold load eases in, top to bottom (the ceremony arrival supersedes this) */
body.boot:not(.arrive) #view-home > * { opacity: 0; animation: boot-in .5s cubic-bezier(.22, 1, .36, 1) forwards; }
body.boot:not(.arrive) #view-home > :nth-child(1) { animation-delay: .05s; }
body.boot:not(.arrive) #view-home > :nth-child(2) { animation-delay: .12s; }
body.boot:not(.arrive) #view-home > :nth-child(3) { animation-delay: .19s; }
body.boot:not(.arrive) #view-home > :nth-child(4) { animation-delay: .26s; }
@keyframes boot-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* the ink poster shimmers until the first data lands */
#notif-module.loading .dg-text { position: relative; color: transparent; user-select: none; }
#notif-module.loading .dg-text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  height: 64%;
  width: min(460px, 72%);
  border-radius: 9px;
  background: linear-gradient(100deg, rgba(255, 255, 255, .07) 30%, rgba(255, 255, 255, .16) 50%, rgba(255, 255, 255, .07) 70%);
  background-size: 200% 100%;
  animation: sk-wave 1.3s linear infinite;
}
#notif-module.loading #nf-over { position: relative; color: transparent; }
#notif-module.loading #nf-over::before {
  content: "";
  position: absolute;
  inset: -1px -2px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .09);
}

/* rows land softly instead of snapping in when data arrives */
#wn-list.loaded .x-row, #wnall-list.loaded .x-row, #up-list.loaded .x-row, #up-list.loaded .x-divider {
  animation: row-in .32s cubic-bezier(.22, 1, .36, 1) both;
}
#wn-list.loaded > :nth-child(1), #wnall-list.loaded > :nth-child(1), #up-list.loaded > :nth-child(1) { animation-delay: .02s; }
#wn-list.loaded > :nth-child(2), #wnall-list.loaded > :nth-child(2), #up-list.loaded > :nth-child(2) { animation-delay: .05s; }
#wn-list.loaded > :nth-child(3), #wnall-list.loaded > :nth-child(3), #up-list.loaded > :nth-child(3) { animation-delay: .08s; }
#wn-list.loaded > :nth-child(4), #wnall-list.loaded > :nth-child(4), #up-list.loaded > :nth-child(4) { animation-delay: .11s; }
#wn-list.loaded > :nth-child(5), #wnall-list.loaded > :nth-child(5), #up-list.loaded > :nth-child(5) { animation-delay: .14s; }
#wn-list.loaded > :nth-child(6), #wnall-list.loaded > :nth-child(6), #up-list.loaded > :nth-child(6) { animation-delay: .17s; }
#wn-list.loaded > :nth-child(7), #wnall-list.loaded > :nth-child(7), #up-list.loaded > :nth-child(7) { animation-delay: .2s; }
#wn-list.loaded > :nth-child(n+8), #wnall-list.loaded > :nth-child(n+8), #up-list.loaded > :nth-child(n+8) { animation-delay: .23s; }
@keyframes row-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  body.boot:not(.arrive) #view-home > *,
  #wn-list.loaded .x-row, #wnall-list.loaded .x-row, #up-list.loaded .x-row, #up-list.loaded .x-divider { animation: none; opacity: 1; }
  #notif-module.loading .dg-text::before, #notif-module.loading #nf-over::before { animation: none; }
}