/* ============================================================
   بوابة البحث العلمي — Research Portal design system
   Scoped under .rp so it coexists with the legacy app_layout CSS.
   Identity: IUM navy / cyan, light theme, Arabic-first RTL.
   ============================================================ */

.rp {
  /* —— colour: IUM identity, OKLCH, light theme —— */
  --ink:          oklch(0.27 0.046 248);
  --ink-soft:     oklch(0.36 0.05 248);
  --brand:        oklch(0.47 0.105 252);
  --brand-deep:   oklch(0.40 0.10 252);
  --accent:       oklch(0.71 0.128 233);
  --accent-deep:  oklch(0.50 0.092 240);
  --accent-ring:  oklch(0.71 0.128 233 / 0.20);

  --paper:        oklch(0.995 0.003 248);
  --paper-sink:   oklch(0.977 0.006 248);
  --bg-tint:      oklch(0.955 0.009 248);
  --line:         oklch(0.915 0.013 248);
  --line-firm:    oklch(0.84 0.02 248);

  --text:         oklch(0.30 0.03 248);
  --text-soft:    oklch(0.45 0.028 248);
  --text-faint:   oklch(0.55 0.022 248);
  --on-ink:       oklch(0.965 0.007 248);
  --on-ink-soft:  oklch(0.80 0.028 240);

  --ok:           oklch(0.50 0.115 158);
  --ok-bg:        oklch(0.955 0.032 158);
  --warn:         oklch(0.49 0.094 64);
  --warn-bg:      oklch(0.957 0.045 78);
  --danger:       oklch(0.51 0.16 28);
  --danger-bg:    oklch(0.955 0.035 32);
  --info:         oklch(0.47 0.083 240);
  --info-bg:      oklch(0.955 0.034 233);

  /* —— spacing: 4pt scale —— */
  --sp-2xs: 4px;  --sp-xs: 8px;   --sp-sm: 12px;  --sp-md: 16px;
  --sp-lg: 24px;  --sp-xl: 32px;  --sp-2xl: 48px; --sp-3xl: 72px;

  /* —— radius —— */
  --r-sm: 7px; --r-md: 12px; --r-lg: 20px;

  /* —— type —— */
  --f-display: 'Noto Kufi Arabic', 'Segoe UI', system-ui, sans-serif;
  --f-body: 'Noto Kufi Arabic', 'Segoe UI', system-ui, sans-serif;

  /* —— elevation: navy-tinted, restrained —— */
  --shadow-sheet: 0 1px 2px oklch(0.27 0.046 248 / 0.05),
                  0 18px 44px -20px oklch(0.27 0.046 248 / 0.30);
  --shadow-soft:  0 1px 2px oklch(0.27 0.046 248 / 0.06),
                  0 6px 18px -10px oklch(0.27 0.046 248 / 0.16);

  --ease: cubic-bezier(0.25, 1, 0.5, 1);

  max-width: 1240px;
  margin-inline: auto;
  padding-block: var(--sp-xs) var(--sp-md);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  text-align: start;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}

.rp *, .rp *::before, .rp *::after { box-sizing: border-box; }
.rp p { margin: 0; }
.rp a:not([class]) {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.15s var(--ease);
}
.rp a:not([class]):hover { color: var(--brand-deep); }
.rp :focus-visible {
  outline: 2.5px solid var(--accent-deep);
  outline-offset: 3px;
  border-radius: 3px;
}

/* —— the document "sheet" —————————————————————————————— */
.rp-sheet {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sheet);
  overflow: hidden;
}

/* —— navy letterhead band ——————————————————————————————— */
.rp-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(0.6rem, 0.45rem + 0.55vw, 0.95rem) clamp(1.1rem, 0.85rem + 1.4vw, 2.2rem);
  background:
     radial-gradient(130% 130% at 85% -30%, oklch(0.41 0.08 236) 0%, transparent 56%),
     var(--ink);
  color: var(--on-ink);
}
.rp-band::after {                       /* faint scholarly ring motif */
  content: "";
  position: absolute;
  top: -80px;
  inset-inline-end: -80px;
  width: 220px; height: 220px;
  background: repeating-radial-gradient(circle at center,
     transparent 0 24px,
     oklch(0.71 0.128 233 / 0.13) 24px 25.5px);
  -webkit-mask: radial-gradient(circle at center, #000 58%, transparent 73%);
          mask: radial-gradient(circle at center, #000 58%, transparent 73%);
  z-index: -1;
  pointer-events: none;
}
.rp-band__kicker {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--on-ink-soft);
  margin-bottom: var(--sp-2xs);
}
.rp-band__kicker svg { width: 16px; height: 16px; flex: none; }
.rp-band__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 0.95rem + 0.9vw, 1.6rem);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--on-ink);
  margin: 0;
  border: 0;
  padding: 0;
  text-align: start;
  max-width: none;
}
.rp-band__rule {
  margin-top: var(--sp-xs);
  width: 48px; height: 3px;
  border-radius: 3px;
  background: var(--accent);
}
.rp-band__lead {
  margin-top: var(--sp-md);
  max-width: 60ch;
  color: var(--on-ink-soft);
  font-size: 0.97rem;
  line-height: 1.7;
}

/* —— paper body —————————————————————————————————————————— */
.rp-body {
  padding: clamp(0.75rem, 0.55rem + 1vw, 1.4rem) clamp(1.1rem, 0.85rem + 1.4vw, 2.2rem);
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

/* —— prose ——————————————————————————————————————————————— */
.rp-prose { max-width: 72ch; }
.rp-prose p + p { margin-top: var(--sp-2xs); }
.rp-greeting {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
  margin-bottom: var(--sp-2xs);
}
.rp-lead { color: var(--text-soft); }

/* section heading inside the body */
.rp-heading {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
  margin: 0 0 var(--sp-xs);
  letter-spacing: -0.005em;
}
.rp-heading::before {
  content: "";
  width: 5px;
  height: 1.15em;
  background: var(--accent);
  border-radius: 3px;
  flex: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.rp-heading::after {
  content: "";
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(to left, var(--line-firm), transparent);
}

/* —— numbered clauses (guidelines) ——————————————————————— */
.rp-clauses {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: clause;
  border-top: 1px solid var(--line);
}
.rp-clause {
  counter-increment: clause;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--sp-sm);
  padding-block: var(--sp-xs);
  border-bottom: 1px solid var(--line);
}
.rp-clause::before {
  content: counter(clause);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--brand);
  width: 2rem; height: 2rem;
  display: grid;
  place-items: center;
  background: var(--info-bg);
  border-radius: 50%;
  align-self: start;
}
.rp-clause__text { padding-top: 0.2rem; color: var(--text); line-height: 1.55; }

/* —— template download affordance ———————————————————————— */
.rp-template {
  margin-top: var(--sp-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: 0.6rem 0.95rem;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: background 0.16s var(--ease), transform 0.16s var(--ease);
}
.rp-template:hover {
  background: var(--brand-deep);
  color: var(--on-ink);
  transform: translateY(-1px);
}
.rp-template svg { width: 17px; height: 17px; flex: none; }

/* —— buttons ————————————————————————————————————————————— */
.rp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  align-items: center;
}
.rp-btn {
  --bp-y: 0.85rem; --bp-x: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
  padding: var(--bp-y) var(--bp-x);
  font-family: var(--f-body);
  font-size: 0.97rem;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.16s var(--ease), transform 0.16s var(--ease),
              box-shadow 0.16s var(--ease), border-color 0.16s var(--ease);
}
.rp-btn svg { width: 18px; height: 18px; flex: none; }
.rp-btn--primary {
  background: var(--brand);
  color: var(--on-ink);
  box-shadow: var(--shadow-soft);
}
.rp-btn--primary:hover {
  background: var(--brand-deep);
  color: var(--on-ink);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px oklch(0.40 0.10 252 / 0.55);
}
.rp-btn--primary:active { transform: translateY(0); }
.rp-btn--ghost {
  background: var(--paper);
  color: var(--brand);
  border-color: var(--line-firm);
}
.rp-btn--ghost:hover {
  background: var(--info-bg);
  color: var(--brand-deep);
  border-color: var(--brand);
}
.rp-btn--lg { --bp-y: 1.02rem; --bp-x: 1.9rem; font-size: 1.05rem; }
.rp-btn--block { width: 100%; }

/* —— guidance note ——————————————————————————————————————— */
.rp-note {
  display: flex;
  gap: var(--sp-sm);
  padding: var(--sp-md) var(--sp-md);
  background: var(--info-bg);
  border: 1px solid oklch(0.71 0.128 233 / 0.28);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: 0.94rem;
  line-height: 1.7;
}
.rp-note svg {
  width: 20px; height: 20px;
  flex: none;
  color: var(--info);
  margin-top: 2px;
}

/* —— form ———————————————————————————————————————————————— */
.rp-form { display: flex; flex-direction: column; gap: var(--sp-xl); }
.rp-field { display: flex; flex-direction: column; gap: var(--sp-xs); }
.rp-label {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--ink);
  margin: 0;
  display: flex;
  gap: 0.4ch;
  align-items: baseline;
}
.rp-label__req { color: var(--accent-deep); font-size: 0.82rem; font-weight: 500; }
.rp .rp-input {
  width: 100%;
  font-family: var(--f-body);
  font-size: 1rem;
  color: var(--text);
  background: var(--paper);
  border: 1.5px solid var(--line-firm);
  border-radius: var(--r-sm);
  padding: 0.8rem 0.95rem;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.rp-input::placeholder { color: var(--text-faint); }
.rp-input:hover { border-color: var(--accent-deep); }
.rp-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--accent-ring);
}
.rp-hint { font-size: 0.85rem; color: var(--text-faint); }
.rp-field.has-error .rp-input { border-color: var(--danger); }
.rp-field.has-error .rp-input:focus {
  box-shadow: 0 0 0 4px oklch(0.51 0.16 28 / 0.16);
}
.rp-error {
  display: flex;
  align-items: center;
  gap: 0.45ch;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--danger);
}
.rp-error svg { width: 15px; height: 15px; flex: none; }

/* —— file dropzone —————————————————————————————————————— */
.rp-drop {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-lg);
  background: var(--paper-sink);
  border: 1.5px dashed var(--line-firm);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease);
}
.rp-drop:hover { border-color: var(--brand); background: var(--info-bg); }
.rp-drop__file {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.rp-drop__icon {
  width: 46px; height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--info-bg);
  color: var(--info);
}
.rp-drop__icon svg { width: 22px; height: 22px; }
.rp-drop__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rp-drop__title { font-weight: 600; color: var(--ink); }
.rp-drop__sub { font-size: 0.85rem; color: var(--text-faint); }
.rp-drop__name {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rp-drop.is-filled {
  border-style: solid;
  border-color: var(--ok);
  background: var(--ok-bg);
}
.rp-drop.is-filled .rp-drop__icon { background: oklch(0.50 0.115 158 / 0.14); color: var(--ok); }
.rp-drop[hidden] { display: none; }

/* —— flash messages —————————————————————————————————————— */
.rp-flash {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--r-md);
  font-size: 0.94rem;
  font-weight: 500;
  border: 1px solid;
}
.rp-flash svg { width: 19px; height: 19px; flex: none; }
.rp-flash--success {
  background: var(--ok-bg); color: var(--ok);
  border-color: oklch(0.50 0.115 158 / 0.32);
}
.rp-flash--notice {
  background: var(--warn-bg); color: var(--warn);
  border-color: oklch(0.49 0.094 64 / 0.32);
}

/* —— plan summary (tracking) ————————————————————————————— */
.rp-summary { display: flex; flex-direction: column; gap: var(--sp-md); }
.rp-summary__top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm) var(--sp-md);
  align-items: flex-start;
  justify-content: space-between;
}
.rp-summary__title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
  border: 0;
  padding: 0;
  text-align: start;
  max-width: 38ch;
}
.rp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs) var(--sp-lg);
}
.rp-meta__item { display: flex; flex-direction: column; gap: 2px; }
.rp-meta__k {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-faint);
}
.rp-meta__v {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 0.4ch;
}
.rp-meta__v svg { width: 16px; height: 16px; }

/* —— status badge ———————————————————————————————————————— */
.rp-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  padding: 0.42rem 0.8rem;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 600;
  white-space: nowrap;
}
.rp-status::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.rp-status--review   { background: var(--info-bg);   color: var(--info); }
.rp-status--revisions{ background: var(--warn-bg);   color: var(--warn); }
.rp-status--seminar  { background: var(--accent-ring); color: var(--accent-deep); }
.rp-status--approved { background: var(--ok-bg);     color: var(--ok); }
.rp-status--rejected { background: var(--danger-bg); color: var(--danger); }

/* —— stage timeline —————————————————————————————————————— */
.rp-track { list-style: none; margin: 0; padding: 0; }
.rp-step {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: var(--sp-md);
  padding-bottom: var(--sp-xl);
}
.rp-step:last-child { padding-bottom: 0; }
.rp-step::before {                      /* connector */
  content: "";
  position: absolute;
  top: 2.75rem;
  bottom: 0;
  inset-inline-start: calc(1.375rem - 1.25px);
  width: 2.5px;
  background: var(--line-firm);
  border-radius: 3px;
}
.rp-step:last-child::before { display: none; }
.rp-step.is-done::before { background: var(--brand); }

.rp-step__node {
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.02rem;
  position: relative;
  z-index: 1;
}
.rp-step__node svg { width: 19px; height: 19px; }
.rp-step.is-done .rp-step__node { background: var(--brand); color: var(--on-ink); }
.rp-step.is-current .rp-step__node {
  background: var(--accent);
  color: var(--ink);
  box-shadow: 0 0 0 6px var(--accent-ring);
}
.rp-step.is-upcoming .rp-step__node {
  background: var(--paper);
  color: var(--text-faint);
  border: 2px solid var(--line-firm);
}
.rp-step__body { padding-top: 0.42rem; display: flex; flex-direction: column; gap: 3px; }
.rp-step__label {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.04rem;
  color: var(--text-faint);
}
.rp-step.is-done .rp-step__label { color: var(--ink); }
.rp-step.is-current .rp-step__label { color: var(--ink); }
.rp-step__meta { font-size: 0.85rem; color: var(--text-faint); }
.rp-step.is-current .rp-step__meta { color: var(--accent-deep); font-weight: 600; }

/* —— panels: seminar / supervisor / thesis / revisions / rejected —— */
.rp-panel {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper-sink);
  overflow: hidden;
}
.rp-panel__head {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.rp-panel__ic {
  width: 32px; height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--info-bg);
  color: var(--brand);
}
.rp-panel__ic svg { width: 18px; height: 18px; }
.rp-panel__body {
  padding: var(--sp-md);
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  font-size: 0.95rem;
}
.rp-panel--accent .rp-panel__ic { background: var(--accent-ring); color: var(--accent-deep); }
.rp-panel--ok     .rp-panel__ic { background: var(--ok-bg); color: var(--ok); }
.rp-panel--warn   { background: var(--warn-bg); border-color: oklch(0.49 0.094 64 / 0.30); }
.rp-panel--warn   .rp-panel__head { background: var(--warn-bg); border-color: oklch(0.49 0.094 64 / 0.24); }
.rp-panel--warn   .rp-panel__ic { background: oklch(0.49 0.094 64 / 0.16); color: var(--warn); }
.rp-panel--danger { background: var(--danger-bg); border-color: oklch(0.51 0.16 28 / 0.28); }
.rp-panel--danger .rp-panel__head { background: var(--danger-bg); border-color: oklch(0.51 0.16 28 / 0.22); }
.rp-panel--danger .rp-panel__ic { background: oklch(0.51 0.16 28 / 0.14); color: var(--danger); }

.rp-deflist { display: flex; flex-direction: column; gap: var(--sp-sm); }
.rp-deflist__row { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; align-items: center; }
.rp-deflist__k { font-weight: 600; color: var(--text-soft); min-width: 8ch; }
.rp-deflist__v { color: var(--text); font-weight: 500; }

/* —— clickable contact pills: email + WhatsApp —————————— */
.rp-contact {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.75rem;
  background: var(--info-bg);
  color: var(--info);
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--info) 18%, transparent);
  transition: background 0.16s var(--ease), color 0.16s var(--ease),
              transform 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.rp-contact:hover,
.rp-contact:focus-visible {
  background: var(--info);
  color: var(--on-ink);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -8px var(--info);
}
.rp-contact svg { width: 15px; height: 15px; flex: none; }

.rp-contact--wa {
  background: oklch(0.95 0.055 158);
  color: oklch(0.42 0.13 154);              /* WhatsApp-leaning green */
  border-color: oklch(0.42 0.13 154 / 0.22);
}
.rp-contact--wa:hover,
.rp-contact--wa:focus-visible {
  background: oklch(0.55 0.16 152);
  color: oklch(0.99 0.01 158);
  box-shadow: 0 6px 14px -8px oklch(0.55 0.16 152);
}

/* —— contact stack: pill + adjacent copy button —————————— */
.rp-contact-stack {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

/* —— small "copy" affordance next to a contact pill —————— */
.rp-copy-btn {
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  padding: 0;
  background: var(--paper);
  color: var(--text-soft);
  border: 1px solid var(--line-firm);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease),
              border-color 0.15s var(--ease), transform 0.15s var(--ease);
  position: relative;
}
.rp-copy-btn:hover,
.rp-copy-btn:focus-visible {
  background: var(--info-bg);
  color: var(--info);
  border-color: color-mix(in oklch, var(--info) 26%, transparent);
  transform: translateY(-1px);
}
.rp-copy-btn svg {
  width: 15px; height: 15px;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
.rp-copy-btn .rp-copy-btn__ok {
  position: absolute;
  opacity: 0;
  transform: scale(0.6);
  color: var(--ok);
}
.rp-copy-btn.is-copied .rp-copy-btn__ic { opacity: 0; transform: scale(0.6); }
.rp-copy-btn.is-copied .rp-copy-btn__ok { opacity: 1; transform: scale(1); }
.rp-copy-btn.is-copied {
  border-color: color-mix(in oklch, var(--ok) 35%, transparent);
  background: var(--ok-bg);
}

/* —— add-to-calendar CTA — sits next to the seminar date —— */
.rp-gcal-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: var(--sp-xs);
  padding: 0.45rem 0.85rem;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: background 0.16s var(--ease), transform 0.16s var(--ease),
              box-shadow 0.16s var(--ease);
  width: max-content;
}
.rp-gcal-btn:hover,
.rp-gcal-btn:focus-visible {
  background: var(--brand-deep);
  color: var(--on-ink);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -10px var(--brand);
}
.rp-gcal-btn svg { width: 16px; height: 16px; color: var(--accent); flex: none; }

/* —— floating confirmation toast (copy feedback) ————————— */
.rp-toast {
  position: fixed;
  top: 1.25rem;
  inset-inline-end: 1.25rem;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 0.92rem;
  border-radius: var(--r-md);
  box-shadow: 0 18px 44px -20px oklch(0.27 0.046 248 / 0.45),
              0 1px 2px oklch(0.27 0.046 248 / 0.18);
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
  pointer-events: none;
}
.rp-toast.is-visible { opacity: 1; transform: translateY(0); }
.rp-toast svg {
  width: 18px; height: 18px;
  color: oklch(0.74 0.18 152);
  flex: none;
}
@media (prefers-reduced-motion: reduce) {
  .rp-toast { transition: opacity 0.12s ease; transform: none; }
  .rp-toast.is-visible { transform: none; }
}

.rp-panel__notes {
  color: var(--text);
  line-height: 1.8;
  white-space: pre-line;
}
.rp-panel__hint { color: var(--text-soft); font-size: 0.9rem; }
.rp-seminar-date {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.12rem;
  color: var(--ink);
}
.rp-seminar-date svg { width: 20px; height: 20px; color: var(--accent-deep); }

/* —— empty state ————————————————————————————————————————— */
.rp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-sm);
  padding-block: var(--sp-xl) var(--sp-lg);
}
.rp-empty__art {
  width: 76px; height: 76px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: var(--info-bg);
  color: var(--brand);
  margin-bottom: var(--sp-xs);
}
.rp-empty__art svg { width: 36px; height: 36px; }
.rp-empty__title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.22rem;
  color: var(--ink);
}
.rp-empty__text { max-width: 46ch; color: var(--text-soft); }
.rp-empty .rp-actions { margin-top: var(--sp-sm); }

/* —— prominent "current" step ————————————————————————————— */
.rp-step.is-current { isolation: isolate; }
.rp-step.is-current::after {
  content: "";
  position: absolute;
  top: -0.35rem;
  inset-inline: -0.85rem;
  bottom: var(--sp-sm);
  background:
    linear-gradient(90deg,
      color-mix(in oklch, var(--accent-ring) 90%, transparent) 0%,
      color-mix(in oklch, var(--accent-ring) 45%, transparent) 55%,
      transparent 92%);
  border: 1px solid color-mix(in oklch, var(--accent) 28%, transparent);
  border-radius: var(--r-md);
  z-index: -1;
  pointer-events: none;
}
.rp-step.is-current .rp-step__node {
  background: var(--accent);
  color: var(--ink);
  box-shadow:
    0 0 0 6px var(--accent-ring),
    0 0 0 12px color-mix(in oklch, var(--accent) 16%, transparent),
    0 10px 22px -8px color-mix(in oklch, var(--accent) 45%, transparent);
  animation: rp-current-pulse 2.4s ease-in-out infinite;
}
.rp-step.is-current .rp-step__label {
  font-size: 1.15rem;
  font-weight: 700;
}
.rp-step.is-current .rp-step__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 4px;
  padding: 3px 11px 3px 10px;
  background: var(--accent-deep);
  color: var(--on-ink);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  width: max-content;
}
.rp-step.is-current .rp-step__meta::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 35%, transparent);
  animation: rp-current-dot 1.4s ease-in-out infinite;
}
/* Connector from current down to next-upcoming fades from accent → neutral. */
.rp-step.is-current::before {
  background: linear-gradient(
    to bottom,
    var(--accent) 0%,
    var(--accent-ring) 40%,
    var(--line-firm) 100%);
}

@keyframes rp-current-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 6px var(--accent-ring),
      0 0 0 12px color-mix(in oklch, var(--accent) 16%, transparent),
      0 10px 22px -8px color-mix(in oklch, var(--accent) 45%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 8px var(--accent-ring),
      0 0 0 16px color-mix(in oklch, var(--accent) 10%, transparent),
      0 12px 26px -8px color-mix(in oklch, var(--accent) 55%, transparent);
  }
}
@keyframes rp-current-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.6); }
}

/* —— Side-by-side panels for the approved cluster (above-the-fold density) —— */
.rp-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-sm);
}
.rp-panel-grid .rp-panel--full { grid-column: 1 / -1; }
@media (max-width: 880px) { .rp-panel-grid { grid-template-columns: 1fr; } }

/* —— Tighter tracker rhythm so the approved view fits above the fold —— */
.rp-step               { padding-bottom: var(--sp-md); }
.rp-step::before       { top: 2.55rem; }
.rp-panel__head        { padding: var(--sp-xs) var(--sp-md); }
.rp-panel__body        { padding: var(--sp-sm) var(--sp-md); gap: var(--sp-xs); }
.rp-summary            { gap: var(--sp-sm); }

/* —— entrance motion ————————————————————————————————————— */
@keyframes rp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes rp-fade { from { opacity: 0; } to { opacity: 1; } }
.rp-reveal {
  animation: rp-rise 0.62s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 85ms);
}
.rp-step { animation: rp-rise 0.5s var(--ease) both; animation-delay: calc(0.2s + var(--s, 0) * 90ms); }

@media (prefers-reduced-motion: reduce) {
  .rp-reveal, .rp-step {
    animation: rp-fade 0.3s ease both;
    animation-delay: 0ms;
  }
  .rp-step.is-current .rp-step__node,
  .rp-step.is-current .rp-step__meta::before {
    animation: none;
  }
  .rp * { transition-duration: 0.01ms !important; }
}

/* —— responsive ——————————————————————————————————————————— */
@media (max-width: 560px) {
  .rp-summary__top { flex-direction: column; }
  .rp-clause { grid-template-columns: 2.2rem 1fr; gap: var(--sp-sm); }
  .rp-clause::before { width: 2.2rem; height: 2.2rem; font-size: 0.95rem; }
  .rp-drop { flex-direction: column; text-align: center; }
  .rp-btn--block-sm { width: 100%; }
}