/* My CARE, participant pages and public pages — white edition.
   A clean white header carries the CARE logo, the space switcher (Events /
   My CARE / Admin console) and the page title over a faint wash of the logo
   colours. Built phone-first. */

body.my { font-size: 15px; background: var(--ground); }

/* Shared light "mesh": the CARE logo colours at a whisper, plus a fine construction grid. */
.my-top, .home-hero, .signin-art, .auth-art { --mesh:
  radial-gradient(42% 90% at 100% 0%, rgba(136, 188, 77, .16), transparent 70%),
  radial-gradient(38% 80% at 78% 100%, rgba(55, 156, 158, .12), transparent 70%),
  radial-gradient(34% 70% at 0% 0%, rgba(0, 123, 159, .10), transparent 70%); }

/* ---------- Header ---------- */
.my-top { position: relative; background: var(--surface); color: var(--navy); border-bottom: 1px solid var(--line); isolation: isolate; }
.my-top::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--mesh); }
.my-top::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(0,87,147,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(0,87,147,.045) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(70% 120% at 100% 0%, #000 10%, transparent 65%); mask-image: radial-gradient(70% 120% at 100% 0%, #000 10%, transparent 65%); }
.my-top .inner { position: relative; max-width: var(--page-max); margin: 0 auto; padding: 6px var(--gutter) 0; }

/* In-space navigation: quiet pills, the current one filled */
.my-nav { display: flex; gap: 4px; margin-top: 16px; padding-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.my-nav::-webkit-scrollbar { display: none; }
.my-nav a { position: relative; padding: 9px 15px; color: var(--text-2); text-decoration: none; font-weight: 560; font-size: 14px; white-space: nowrap; display: inline-flex; gap: 8px; align-items: center; border-radius: 99px; transition: color .15s, background .15s; }
.my-nav a:hover { color: var(--navy); background: var(--surface-3); }
.my-nav a.active { color: #fff; background: var(--brand-navy); }
.my-nav a.active .i { color: var(--brand-lime); }
.my-nav .count-pill { background: var(--amber-fill); color: #fff; }
.my-nav a.active .count-pill { background: var(--brand-lime); color: #10243A; }

.my-hero { width: 100%; max-width: none; min-height: 182px; padding: 26px 0 38px; display: flex; flex-direction: column; justify-content: flex-start; }
.my-hero h1 { color: var(--navy); font-size: clamp(32px, 4.4vw, 52px); line-height: 1.04; letter-spacing: -0.035em; }
.my-hero p { width: 100%; max-width: none; color: var(--text-2); margin-top: 12px; font-size: 16px; line-height: 1.6; }
.my-top.has-rail .my-hero { padding-bottom: 38px; }
.my-hello h1 { font-size: 32px; line-height: 1.15; }
.my-hello p { width: 100%; max-width: none; color: var(--text-2); margin-top: 6px; }

.my-main { max-width: var(--page-max); margin: 0 auto; padding: 36px var(--gutter) 40px; }
.my-main > .rail:first-child { margin-top: 0; position: relative; }

/* ---------- Journey rail ---------- */
.rail { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 14px; margin: 0 0 32px; }
.rail a { position: relative; display: flex; flex-direction: column; padding: 20px 22px 19px; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lift); transition: transform .2s var(--ease), box-shadow .2s var(--ease); overflow: hidden; }
.rail a:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.rail a::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--line-strong); }
.rail a.done::before { background: var(--brand-moss); }
.rail a.todo::before { background: var(--amber-fill); }
.rail a.info::before { background: var(--brand-blue); }
.rail .r-label { font-size: 13px; color: var(--text-2); font-weight: 550; display: flex; gap: 8px; align-items: center; }
.rail .r-value { font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--navy); margin-top: 10px; line-height: 1.12; letter-spacing: -0.02em; }
.rail a.todo .r-value { color: var(--amber); }
.rail a.done .r-value { color: var(--navy); }
.rail .r-sub { font-size: 13px; color: var(--text-3); margin-top: 4px; }
@media (max-width: 900px) { .rail { grid-template-columns: 1fr 1fr; gap: 10px; } }
@media (max-width: 760px) { .rail a { padding: 16px 16px 15px; border-radius: var(--r-lg); } .rail .r-value { font-size: 20px; margin-top: 6px; } }

/* ---------- My CARE overview ---------- */
body[data-my-section="overview"] .my-hero { max-width: none; }
.overview-hello .eyebrow { margin-bottom: 8px; }

.rail a[data-workflow] .r-label .i { width: 16px; height: 16px; }
.rail a[data-workflow="onboarding"] .r-label .i { color: var(--care-ra2); }
.rail a[data-workflow="agreements"] .r-label .i { color: var(--care-ra3-ink); }
.rail a[data-workflow="events"] .r-label .i { color: var(--care-ra4-ink); }
.rail a[data-workflow="feedback"] .r-label .i { color: var(--lime-ink); }

.overview-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .85fr); gap: 18px; align-items: stretch; margin-top: 2px; }
.overview-panel { height: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-card); padding: 24px; min-width: 0; }
.overview-panel-head, .overview-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.overview-panel-head { margin-bottom: 18px; }
.overview-panel-head h2, .overview-section-head h2 { margin: 2px 0 0; font-size: 22px; letter-spacing: -.02em; }
.overview-kicker { color: var(--text-3); font-size: 11.5px; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; }
.overview-count { min-width: 32px; height: 32px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; border-radius: 99px; background: var(--amber-wash); border: 1px solid var(--amber-line); color: var(--amber); font-weight: 700; font-size: 13px; }
.overview-ok { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 99px; background: var(--moss-wash); color: var(--moss); font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.overview-head-icon { width: 22px; height: 22px; color: var(--care-ra2); }

.overview-attention .todo-list { gap: 10px; }
.overview-attention .todo-item { box-shadow: none; padding: 16px 16px 16px 19px; }
.overview-attention .todo-item[data-kind="onboarding"]::before { background: var(--care-ra2); }
.overview-attention .todo-item[data-kind="agreement"]::before { background: var(--care-ra3); }
.overview-attention .todo-item[data-kind="feedback"]::before { background: var(--care-ra5); }
.overview-attention .todo-item[data-kind="onboarding"] .t-icon { background: color-mix(in srgb, var(--care-ra2) 12%, var(--surface)); color: var(--care-ra2); }
.overview-attention .todo-item[data-kind="agreement"] .t-icon { background: color-mix(in srgb, var(--care-ra3) 12%, var(--surface)); color: var(--care-ra3-ink); }
.overview-attention .todo-item[data-kind="feedback"] .t-icon { background: color-mix(in srgb, var(--care-ra5) 16%, var(--surface)); color: var(--lime-ink); }
.overview-attention .todo-item .btn { flex: 0 0 auto; }
.overview-clear { min-height: 116px; display: flex; align-items: center; gap: 16px; border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--surface-2); padding: 20px; }
.overview-clear > .i { width: 28px; height: 28px; color: var(--moss); flex: 0 0 auto; }
.overview-clear strong { color: var(--navy); }
.overview-clear p { margin: 4px 0 0; color: var(--text-2); line-height: 1.55; }

.overview-profile-card { position: relative; overflow: hidden; }
.overview-profile-card::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--care-ra2); }
.overview-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.overview-facts > div { min-width: 0; }
.overview-facts span { display: block; color: var(--text-3); font-size: 11.5px; font-weight: 600; margin-bottom: 4px; }
.overview-facts strong { display: block; color: var(--navy); font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.overview-team { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.overview-team .tags { margin-top: 8px; }
.overview-text-link { display: inline-flex; align-items: center; gap: 6px; color: var(--blue); font-size: 13.5px; font-weight: 650; text-decoration: none; }
.overview-text-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.overview-profile-card > .overview-text-link { margin-top: 18px; }

.overview-events { margin-top: 40px; }
.overview-section-head { margin-bottom: 16px; align-items: flex-end; }
.overview-section-head p { margin: 5px 0 0; color: var(--text-2); font-size: 13.5px; }

@media (max-width: 980px) {
  .overview-grid { grid-template-columns: 1fr; }
  .overview-panel { height: auto; }
  .overview-profile-card { padding-top: 26px; }
}
@media (max-width: 640px) {
  .overview-panel { padding: 18px; border-radius: var(--r-lg); }
  .overview-panel-head, .overview-section-head { gap: 12px; }
  .overview-panel-head h2, .overview-section-head h2 { font-size: 20px; }
  .overview-attention .todo-item { padding: 15px; padding-left: 18px; }
  .overview-attention .todo-item .btn { width: 100%; }
  .overview-facts { grid-template-columns: 1fr; gap: 11px; }
  .overview-section-head { align-items: flex-start; }
  .overview-section-head > .overview-text-link { margin-top: 2px; white-space: nowrap; }
}

/* CARE workflow identity — exact colors from the supplied CARE palette. */
.my-nav a[data-key="onboarding"].active { background: var(--care-ra2); color: #fff; }
.my-nav a[data-key="agreements"].active { background: var(--care-ra3); color: #fff; }
.my-nav a[data-key="events"].active { background: var(--care-ra4); color: #fff; }
.my-nav a[data-key="feedback"].active { background: var(--care-ra5); color: #fff; }
.my-nav a[data-key="onboarding"].active .i,
.my-nav a[data-key="agreements"].active .i,
.my-nav a[data-key="events"].active .i { color: #fff; }
.my-nav a[data-key="feedback"].active .i { color: #fff; }
.my-nav a[data-key="profile"].active { background: var(--care-ra1); color: #fff; }
.my-nav a[data-key="profile"].active .i { color: #fff; }
.rail a[href="/my/onboarding"]::before { background: var(--care-ra2); }
.rail a[href="/my/agreements"]::before { background: var(--care-ra3); }
.rail a[href="/my/events"]::before { background: var(--care-ra4); }
.rail a[href="/my/feedback"]::before { background: var(--care-ra5); }

/* ---------- To-do cards ---------- */
.todo-list { display: grid; gap: 12px; }
.todo-item { position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 20px 18px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.todo-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--amber-fill); }
.todo-item .t-icon { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--amber-wash); color: var(--amber); flex: 0 0 auto; }
.todo-item .t-icon .i { width: 21px; height: 21px; }
.todo-item .t-main { flex: 1; min-width: 0; }
.todo-item .t-title { font-weight: 600; color: var(--navy); font-size: 15.5px; }
.todo-item .t-sub { font-size: 13.5px; color: var(--text-2); margin-top: 2px; }
@media (max-width: 560px) { .todo-item { flex-wrap: wrap; padding: 16px; } .todo-item .btn { width: 100%; } }

.t-icon.sq { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; background: var(--ground-2); color: var(--text-3); }
.t-icon.sq.ok { background: var(--moss-wash); color: var(--moss); }
.t-icon.sq.warn { background: var(--amber-wash); color: var(--amber); }

/* ---------- Event tiles ---------- */
.ev-tile { background: var(--surface); border: 1px solid var(--line); overflow: hidden; transition: box-shadow .2s var(--ease); }
.ev-tile-head { display: grid; gap: 18px; }
.ev-tile-head h3 { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.ev-tile-meta { font-size: 13.5px; color: var(--text-2); display: flex; flex-wrap: wrap; }
.ev-tile-body summary { display: inline-flex; gap: 7px; cursor: pointer; font-weight: 600; font-size: 13.5px; list-style: none; padding: 4px 0; }
.ev-tile-body summary::-webkit-details-marker { display: none; }
.ev-tile-body summary::before { content: ""; width: 7px; height: 7px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(-45deg); transition: transform .2s var(--ease); margin-right: 2px; }
.ev-tile-body details[open] summary::before { transform: rotate(45deg); }
.ev-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ev-day { border: 1px solid var(--line); padding: 12px 14px; background: var(--surface-2); }
.ev-day .d-title { font-weight: 600; font-size: 13.5px; color: var(--navy); }
.ev-day ul { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13.5px; }
.ev-day li { display: flex; gap: 7px; align-items: center; color: var(--text-2); padding: 2px 0; }
.ev-day li.yes { color: var(--text); }
.ev-day li .i { color: var(--moss); }
.ev-day li.no .i { color: var(--text-3); }
.ev-day li.wait { color: var(--text); } /* Round 6: waiting for a programme item */
.ev-day li.wait .i, .ev-day li .ev-wait { color: var(--text-2); }
.ev-tile-foot { display: flex; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--line); background: var(--surface-2); }
.ev-tile-foot .hint { font-size: 13px; color: var(--text-3); margin-right: auto; }
@media (max-width: 640px) {
  .ev-tile-head { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .ev-tile-head > .badge { grid-column: 2; justify-self: start; }
  .ev-tile-head h3 { font-size: 17px; }
  .ev-tile-body { padding: 0 16px 16px; }
  .ev-tile-foot { padding: 12px 16px; }
  .ev-tile-foot .hint { width: 100%; }
  .ev-tile-foot .btn { flex: 1 1 auto; }
}

.my-section { margin-top: 40px; }
.my-section > .row h2 { font-size: 23px; }
.my-section > .row { margin-bottom: 16px; }

/* ---------- Sign-in (My CARE and admin console) ---------- */
.signin {
  min-height: calc(100vh - var(--gbar-h, 64px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(440px, 1fr);
  align-items: stretch;
  background: var(--surface);
}
.signin-art {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--surface-2);
  color: var(--navy);
  padding: clamp(42px, 5vw, 76px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 34px;
  border-right: 1px solid var(--line);
}
.signin-art::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--mesh); }
.signin-art::after {
  content: "";
  position: absolute;
  width: min(48vw, 680px);
  aspect-ratio: 1;
  right: -28%;
  bottom: -38%;
  border-radius: 50%;
  z-index: -1;
  background: radial-gradient(circle, rgba(72,155,157,.12), rgba(139,188,81,.05) 48%, transparent 72%);
  filter: blur(2px);
}
.signin-art .grid-lines {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgba(42,122,158,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(42,122,158,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(105% 90% at 100% 0%, #000 16%, transparent 72%);
  mask-image: radial-gradient(105% 90% at 100% 0%, #000 16%, transparent 72%);
}
.signin-art > * { position: relative; }
.signin-story { width: min(100%, 560px); }
.signin-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--blue);
  font-size: 12px;
  line-height: 1;
  font-weight: 720;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.signin-kicker::before { content: ""; width: 22px; height: 3px; border-radius: 99px; background: var(--care-ra2); }
.signin-art h1 {
  color: var(--navy);
  font-size: clamp(40px, 4.6vw, 68px);
  line-height: .98;
  max-width: none;
  letter-spacing: -.045em;
  margin: 0;
}
.signin-art h1 span { white-space: nowrap; }
.signin-art .signin-story > p {
  color: var(--text-2);
  max-width: 52ch;
  margin: 22px 0 0;
  font-size: 16.5px;
  line-height: 1.65;
}
.signin-art p a { color: var(--blue); }
.signin-art .rail-demo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 34px;
  max-width: 580px;
}
.signin-art .rail-demo span {
  --journey: var(--line-strong);
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 11px;
  align-items: center;
  min-height: 78px;
  padding: 14px 15px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 90%, var(--journey) 10%);
  color: var(--text-2);
  box-shadow: var(--shadow-card);
}
.signin-art .rail-demo span::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--journey);
}
.signin-art .rail-demo .i {
  grid-row: 1 / span 2;
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 10px;
  color: var(--journey);
  background: color-mix(in srgb, var(--surface) 78%, var(--journey) 22%);
}
.signin-art .rail-demo b { align-self: end; color: var(--navy); font-size: 14px; line-height: 1.2; }
.signin-art .rail-demo small { align-self: start; margin-top: 3px; color: var(--text-3); font-size: 11.5px; line-height: 1.25; }
.signin-art .rail-demo span:nth-child(1) { --journey: var(--care-ra2); }
.signin-art .rail-demo span:nth-child(2) { --journey: var(--care-ra3); }
.signin-art .rail-demo span:nth-child(3) { --journey: var(--care-ra4); }
.signin-art .rail-demo span:nth-child(4) { --journey: var(--care-ra5); }
.signin-staff-note {
  width: min(100%, 560px);
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.62);
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.5;
}
.signin-staff-note .i { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; color: var(--care-ra1); }
.signin-staff-note strong { color: var(--navy); }

.signin-panel {
  position: relative;
  background: var(--surface);
  padding: clamp(32px, 5vw, 76px) clamp(28px, 5vw, 72px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.signin-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(42,122,158,.035), transparent 34%, rgba(139,188,81,.025));
}
.signin-card {
  position: relative;
  width: min(100%, 460px);
  padding: 34px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-lift);
}
.signin-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--care-ra2) 0 25%, var(--care-ra3) 25% 50%, var(--care-ra4) 50% 75%, var(--care-ra5) 75% 100%);
}
.signin-card > * + * { margin-top: 22px; }
.signin-card-head .signin-kicker { margin-bottom: 12px; }
.signin-card h2 { margin: 0; color: var(--navy); font-size: clamp(29px, 2.4vw, 36px); letter-spacing: -.025em; }
.signin-card-head p { margin: 10px 0 0; line-height: 1.6; }
.signin-card form { display: flex; flex-direction: column; gap: 18px; }
.signin-card .field label { font-weight: 650; color: var(--navy); }
.signin-card .input { min-height: 50px; font-size: 15px; }
.signin-field-hint { margin-top: 7px; color: var(--text-3); font-size: 12px; line-height: 1.4; }
.signin-submit { width: 100%; justify-content: center; gap: 8px; min-height: 50px; }
.signin-submit .i { width: 17px; height: 17px; }
.signin-meta {
  display: grid;
  gap: 9px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.45;
}
.signin-meta span { display: flex; align-items: flex-start; gap: 7px; }
.signin-meta .i { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 1px; color: var(--care-ra2); }
.signin-meta a { color: var(--blue); font-weight: 600; }
.signin-card .callout { border-radius: 12px; }

:root[data-theme="dark"] .signin-staff-note { background: rgba(16,29,41,.72); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .signin-staff-note { background: rgba(16,29,41,.72); }
}

@media (max-width: 1040px) {
  .signin { grid-template-columns: minmax(0, 1fr) minmax(390px, 1fr); }
  .signin-art { padding: 44px 36px; }
  .signin-panel { padding: 44px 32px; }
  .signin-card { padding: 28px; }
}
@media (max-width: 860px) {
  .signin { grid-template-columns: 1fr; }
  .signin-art { padding: 32px var(--gutter) 28px; gap: 24px; border-right: 0; border-bottom: 1px solid var(--line); align-items: stretch; }
  .signin-story { width: 100%; }
  .signin-art h1 { max-width: 14ch; font-size: clamp(34px, 8vw, 50px); }
  .signin-art h1 span { white-space: normal; }
  .signin-art .signin-story > p { max-width: 62ch; margin-top: 14px; font-size: 15px; }
  .signin-art .rail-demo { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; margin-top: 24px; gap: 8px; }
  .signin-art .rail-demo span { display: flex; min-height: 0; padding: 12px 10px 11px; flex-direction: column; align-items: flex-start; gap: 6px; }
  .signin-art .rail-demo .i { width: 28px; height: 28px; padding: 6px; }
  .signin-art .rail-demo small { display: none; }
  .signin-staff-note { max-width: none; }
  .signin-panel { padding: 34px var(--gutter) 52px; justify-content: center; }
  .signin-card { width: min(100%, 560px); }
}
@media (max-width: 560px) {
  .signin-art { padding-top: 24px; }
  .signin-kicker { font-size: 10.5px; }
  .signin-art h1 { font-size: 36px; }
  .signin-art .rail-demo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .signin-art .rail-demo span { flex-direction: row; align-items: center; }
  .signin-art .rail-demo b { font-size: 12.5px; }
  .signin-staff-note { padding: 11px 12px; }
  .signin-panel { padding-top: 24px; }
  .signin-card { padding: 24px 20px; border-radius: 18px; }
  .signin-card > * + * { margin-top: 18px; }
}

.participant-return { display: flex; align-items: center; margin: 0 0 18px; }
.participant-return[hidden] { display: none !important; }
.participant-return .btn { gap: 7px; }

/* ---------- Participant pages (onboarding, agreement, feedback) ---------- */
.p-hero h1 { color: var(--navy); font-size: clamp(30px, 4vw, 46px); line-height: 1.06; letter-spacing: -0.032em; margin-top: 26px; }
.p-hero p { color: var(--text-2); margin-top: 10px; max-width: 70ch; font-size: 15.5px; line-height: 1.6; }
.p-hero { padding-bottom: 34px; }
.p-main { max-width: var(--page-max); }
.p-foot { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter) 8px; }

/* Participant onboarding sections */
.step-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
.success-screen { text-align: center; padding: 56px 24px; }

/* ---------- Public pages ---------- */
.home-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--surface); color: var(--navy); border-bottom: 1px solid var(--line); }
.home-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--mesh); }
.home-hero .grid-lines { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(0,87,147,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(0,87,147,.045) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(70% 120% at 100% 0%, #000 10%, transparent 65%); mask-image: radial-gradient(70% 120% at 100% 0%, #000 10%, transparent 65%); }
.group-title { font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; margin: 44px 0 16px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; color: var(--navy); }
.group-title small { font-family: var(--font); font-size: 14px; color: var(--text-3); font-weight: 400; letter-spacing: 0; }

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  .my-top .inner { padding: 4px var(--gutter) 0; }
  .my-nav { display: none; }
  .my-hero { min-height: 0; padding: 18px 0 26px; }
  .my-hero p { font-size: 14.5px; }
  .my-top.has-rail .my-hero { padding-bottom: 26px; }
  .my-main { padding: 22px var(--gutter) 24px; }
  .my-main > .rail:first-child { margin-top: 0; }
  .my-section { margin-top: 32px; }
  .my-section > .row h2 { font-size: 20px; }
  .p-hero h1 { margin-top: 18px; }
  .p-foot { padding: 0 var(--gutter) 8px; }
  .step-panel { padding: 18px; }
}

/* ---------- My CARE · Onboarding ---------- */
body[data-my-section="onboarding"] .my-hero { max-width: none; }
.onboarding-hello .eyebrow { margin-bottom: 8px; }
.onboarding-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(290px, .72fr); gap: 18px; align-items: stretch; }
.onboarding-current,
.onboarding-empty { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-card); overflow: hidden; }
.onboarding-current::before,
.onboarding-empty::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--care-ra2); }
.onboarding-current { height: 100%; padding: 26px; }
.onboarding-current-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.onboarding-title-block { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.onboarding-icon { width: 44px; height: 44px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: color-mix(in srgb, var(--care-ra2) 12%, var(--surface)); color: var(--care-ra2); }
.onboarding-icon .i { width: 22px; height: 22px; }
.onboarding-current h2,
.onboarding-empty h2 { margin: 3px 0 0; font-size: 23px; letter-spacing: -.02em; color: var(--navy); }
.onboarding-note { margin: 0 0 18px; }
.onboarding-note strong { display: block; margin-bottom: 2px; }
.onboarding-action { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0 0; border-top: 1px solid var(--line-soft); }
.onboarding-action-copy { min-width: 0; }
.onboarding-action-copy strong { display: block; color: var(--navy); font-size: 14px; }
.onboarding-action-copy span { display: block; color: var(--text-2); font-size: 13px; margin-top: 3px; line-height: 1.45; }
.onboarding-action .btn { flex: 0 0 auto; }

.onboarding-empty { padding: 26px; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start; }
.onboarding-empty > span { width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--care-ra2) 12%, var(--surface)); color: var(--care-ra2); }
.onboarding-empty > span .i { width: 23px; height: 23px; }
.onboarding-empty p { margin: 7px 0 0; color: var(--text-2); line-height: 1.55; }

.onboarding-history { margin-top: 34px; }
.onboarding-history > .row { align-items: flex-end; }
.onboarding-history .row h2 { margin: 3px 0 0; }
.onboarding-history .list-item { min-height: 68px; }

@media (max-width: 980px) {
  .onboarding-layout { grid-template-columns: 1fr; }
  .onboarding-current { height: auto; }
}
@media (max-width: 700px) {
  .onboarding-current,
.onboarding-empty { border-radius: var(--r-lg); }
  .onboarding-current { padding: 19px; }
  .onboarding-current-head { gap: 12px; }
  .onboarding-title-block { gap: 11px; }
  .onboarding-icon { width: 40px; height: 40px; }
  .onboarding-current h2,
.onboarding-empty h2 { font-size: 20px; }
  .onboarding-action { align-items: stretch; flex-direction: column; gap: 14px; }
  .onboarding-action .btn { width: 100%; }
  .onboarding-empty { padding: 20px; grid-template-columns: 42px minmax(0, 1fr); }
  .onboarding-empty > span { width: 42px; height: 42px; }
  .onboarding-history .list-item { align-items: flex-start; }
  .onboarding-history .li-side { width: 100%; justify-content: flex-start; margin-top: 8px; }
}

/* ---------- CARE member onboarding form ---------- */
.onboarding-preview-context { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 18px; align-items: center; margin-bottom: 18px; padding: 17px 18px; border: 1px solid color-mix(in srgb, var(--care-ra2) 34%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--care-ra2) 6%, var(--surface)); }
.onboarding-preview-context-main { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: start; min-width: 0; }
.onboarding-preview-context-main > .i { width: 38px; height: 38px; padding: 9px; border-radius: 11px; background: var(--blue-wash); color: var(--care-ra2); }
.onboarding-preview-context-main strong { display: block; margin-top: 2px; color: var(--navy); font-size: 15px; }
.onboarding-preview-context-main p { margin: 3px 0 0; max-width: 70ch; color: var(--text-2); font-size: 12.5px; line-height: 1.45; }
body.onboarding-preview-page .onboarding-section input:disabled,
body.onboarding-preview-page .onboarding-section select:disabled,
body.onboarding-preview-page .onboarding-section textarea:disabled { opacity: 1; color: var(--text); -webkit-text-fill-color: var(--text); background: var(--surface-2); cursor: default; }
body.onboarding-preview-page .onboarding-section .check:has(input:disabled) { opacity: 1; }
.onboarding-section { scroll-margin-top: calc(var(--gbar-h, 64px) + 86px); overflow: hidden; }
.onboarding-section .card-head { position: relative; border-bottom: 1px solid var(--line-soft); background: var(--surface-2); }
.onboarding-section .card-head::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--care-ra2); }
.onboarding-section .card-head .eyebrow { color: var(--care-ra2); }
.onboarding-section .card-body { padding-top: 22px; }
.onboarding-section .form-grid { row-gap: 20px; }
.onboarding-section .field > label { font-weight: 620; color: var(--navy); }
.onboarding-section .field .hint { margin-top: 7px; line-height: 1.45; }
.onboarding-section .choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.onboarding-section .choice-grid .check { position: relative; margin: 0; padding: 11px 12px; min-height: 44px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); transition: border-color .15s, background .15s; }
.onboarding-section .choice-grid .check:hover { border-color: color-mix(in srgb, var(--care-ra2) 42%, var(--line)); background: var(--blue-wash); }
.onboarding-section .choice-grid .check:has(input:checked) { border-color: color-mix(in srgb, var(--care-ra2) 62%, var(--line)); background: var(--blue-wash); }
.onboarding-section .choice-grid .check input { margin-top: 2px; accent-color: var(--care-ra2); }
.onboarding-section .choice-grid .check span { line-height: 1.35; }
.choice-picker { display: grid; gap: 10px; }
.choice-filter { position: relative; max-width: 440px; }
.choice-filter .i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; z-index: 1; }
.choice-filter .input { padding-left: 38px; }
.onboarding-section .choice-grid-dense { max-height: 310px; overflow: auto; padding: 2px 4px 2px 2px; align-content: start; scrollbar-gutter: stable; }
@media (max-width: 900px) {
  .onboarding-preview-context { grid-template-columns: 1fr; align-items: stretch; }
  .onboarding-preview-context > .btn { justify-self: start; }
}
@media (max-width: 640px) {
  .onboarding-section .choice-grid { grid-template-columns: 1fr; }
  .onboarding-section .card-body { padding-top: 18px; }
  .onboarding-preview-context { padding: 15px; }
  .onboarding-preview-context > .btn { width: 100%; justify-content: center; }
}

/* ---------- My CARE · Agreements ---------- */
body[data-my-section="agreements"] .my-hero { max-width: none; }
.agreements-hello .eyebrow { margin-bottom: 8px; }
.agreements-overview { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .72fr); gap: 18px; align-items: stretch; }
.agreements-section { margin-top: 34px; }
.agreements-section .overview-section-head { margin-bottom: 14px; align-items: flex-end; }
.agreement-list { display: grid; gap: 10px; }
.agreement-item { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 17px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.agreement-item::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--care-ra3); }
.agreement-item[data-state="signed"]::before { background: var(--care-ra3); }
.agreement-item[data-state="withdrawn"]::before { background: var(--line-strong); }
.agreement-item[data-state="external"]::before { background: var(--care-ra2); }
.agreement-item-icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: color-mix(in srgb, var(--care-ra3) 10%, var(--surface)); color: var(--care-ra3-ink); }
.agreement-item[data-state="withdrawn"] .agreement-item-icon { background: var(--surface-3); color: var(--text-3); }
.agreement-item[data-state="external"] .agreement-item-icon { background: color-mix(in srgb, var(--care-ra2) 10%, var(--surface)); color: var(--care-ra2); }
.agreement-item-icon .i { width: 20px; height: 20px; }
.agreement-item-main { min-width: 0; }
.agreement-item-title-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.agreement-item h3 { margin: 0; color: var(--navy); font-size: 15px; line-height: 1.35; }
.agreement-required { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 99px; background: color-mix(in srgb, var(--care-ra3) 11%, var(--surface)); color: var(--moss); font-size: 12px; font-weight: 650; }
.agreement-item-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; color: var(--text-3); font-size: 12.5px; }
.agreement-item-meta span + span::before { content: "·"; margin-right: 12px; color: var(--line-strong); }
.agreement-item-side { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }

/* Agreement reader / signer */
.agreement-signing-stages { position: sticky; top: calc(var(--gbar-h, 64px) + 8px); z-index: 85; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 8px 24px -20px rgba(42,147,114,.42); }
.agreement-signing-stages .stage { background: var(--surface); }
.agreement-signing-stages .stage.current { border-color: color-mix(in srgb, var(--care-ra3) 42%, var(--line)); background: color-mix(in srgb, var(--care-ra3) 8%, var(--surface)); }
.agreement-signing-stages .stage.current::before,
.agreement-signing-stages .stage.done::before { background: var(--care-ra3); }
.agreement-summary-card,
.agreement-reader-card,
.agreement-sign-card,
.agreement-receipt { overflow: hidden; }
.agreement-summary-card { border-top: 4px solid var(--care-ra3); }
.agreement-reader-card .card-head,
.agreement-sign-card .card-head,
.agreement-receipt .card-head { background: var(--surface-2); }
.agreement-reader-card .card-head { border-left: 4px solid var(--care-ra3); }
.agreement-sign-card .card-head { border-left: 4px solid var(--care-ra3); }
.agreement-receipt { border-top: 4px solid var(--care-ra3); }
.agreement-reader-card .doc { max-width: 82ch; margin: 0 auto; font-family: var(--font-serif); font-size: 15.5px; line-height: 1.75; color: var(--text); }
.agreement-reader-card .doc h3 { margin-top: 1.8em; color: var(--navy); font-family: var(--font); font-size: 16px; line-height: 1.45; }
.agreement-reader-card .doc p { margin: 0 0 1em; }
.agreement-sign-card .check { align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--surface-2); }
.agreement-sign-card .check:has(input:checked) { border-color: color-mix(in srgb, var(--care-ra3) 35%, var(--line)); background: color-mix(in srgb, var(--care-ra3) 6%, var(--surface)); }
.agreement-sign-card input[type="checkbox"] { accent-color: var(--care-ra3); }
.agreement-receipt h2 { color: var(--navy); }
.agreement-receipt h2 .i { color: var(--care-ra3-ink); }

@media (max-width: 980px) {
  .agreements-overview { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .agreement-item { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 15px; }
  .agreement-item-icon { width: 40px; height: 40px; }
  .agreement-item-side { grid-column: 2; justify-content: flex-start; }
  .agreement-item-side .btn { width: 100%; }
  .agreement-item-meta { gap: 3px 8px; }
  .agreement-item-meta span + span::before { margin-right: 8px; }
  .agreement-signing-stages { display: flex; overflow-x: auto; gap: 8px; scrollbar-width: none; }
  .agreement-signing-stages::-webkit-scrollbar { display: none; }
  .agreement-signing-stages .stage { flex: 0 0 min(72vw, 250px); }
  .agreement-reader-card .doc { font-size: 15px; line-height: 1.7; }
}

/* ---------- Agreement print document ---------- */
.print-only { display: none !important; }
.agreement-receipt-acceptance { margin-bottom: 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.agreement-receipt-acceptance p { margin: 5px 0 0; color: var(--text-2); line-height: 1.6; font-family: var(--font-serif); }

@media print {
  @page { size: A4 portrait; margin: 16mm 17mm 18mm; }

  html, body.agreement-page { background: #fff !important; color: #111 !important; }
  body.agreement-page { font-family: Arial, Helvetica, sans-serif !important; font-size: 10.5pt; line-height: 1.45; }
  body.agreement-page .gbar,
  body.agreement-page .my-top,
  body.agreement-page .p-foot,
  body.agreement-page [data-site-footer],
  body.agreement-page .participant-return,
  body.agreement-page [data-steps],
  body.agreement-page .agreement-summary-card,
  body.agreement-page .agreement-reader-card > .card-head,
  body.agreement-page .no-print { display: none !important; }

  body.agreement-page .print-only { display: block !important; }
  body.agreement-page .my-main.p-main {
    display: flex !important;
    flex-direction: column;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.agreement-page .agreement-print-head { order: 1; }
  body.agreement-page .agreement-reader-card { order: 2; }
  body.agreement-page .agreement-receipt { order: 3; }

  body.agreement-page .agreement-print-head {
    margin: 0 0 9mm;
    padding: 0 0 6mm;
    border-bottom: 0.8pt solid #2A9372;
    color: #111;
    break-inside: avoid;
  }
  body.agreement-page .agreement-print-brand {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12mm;
    padding-bottom: 6mm;
    border-bottom: 0.4pt solid #D8DEE3;
  }
  body.agreement-page .agreement-print-brand img { width: 58mm; height: auto; display: block; }
  body.agreement-page .agreement-print-brand > div { text-align: right; color: #4D5C66; font-size: 8pt; line-height: 1.35; }
  body.agreement-page .agreement-print-brand strong { display: block; color: #203050; font-size: 9pt; font-weight: 700; }
  body.agreement-page .agreement-print-brand span { display: block; margin-top: 1mm; }

  body.agreement-page .agreement-print-title { margin-top: 8mm; }
  body.agreement-page .agreement-print-kicker {
    margin-bottom: 2.5mm;
    color: #2A9372;
    font-size: 8pt;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  body.agreement-page .agreement-print-title h1 {
    margin: 0;
    color: #203050;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 21pt;
    line-height: 1.12;
    letter-spacing: -.015em;
  }
  body.agreement-page .agreement-print-title p { margin: 2mm 0 0; color: #4D5C66; font-size: 9.5pt; }

  body.agreement-page .agreement-print-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin: 7mm 0 0;
    border: 0.5pt solid #D8DEE3;
    border-radius: 0;
  }
  body.agreement-page .agreement-print-meta > div { padding: 3.2mm 4mm; min-width: 0; border-bottom: 0.5pt solid #D8DEE3; }
  body.agreement-page .agreement-print-meta > div:nth-child(odd) { border-right: 0.5pt solid #D8DEE3; }
  body.agreement-page .agreement-print-meta > div:nth-last-child(-n+2) { border-bottom: 0; }
  body.agreement-page .agreement-print-meta dt { margin: 0 0 1mm; color: #65737C; font-size: 7.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: .045em; }
  body.agreement-page .agreement-print-meta dd { margin: 0; color: #111; font-size: 9pt; font-weight: 600; overflow-wrap: anywhere; }

  body.agreement-page .agreement-print-fingerprint { margin-top: 3.5mm; color: #65737C; font-size: 7.5pt; }
  body.agreement-page .agreement-print-fingerprint span { display: block; margin-bottom: 1mm; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
  body.agreement-page .agreement-print-fingerprint code,
  body.agreement-page .agreement-receipt code {
    font-family: "Courier New", Courier, monospace !important;
    font-size: 7.5pt !important;
    color: #2E3940 !important;
    overflow-wrap: anywhere;
    word-break: break-all;
  }

  body.agreement-page .agreement-reader-card,
  body.agreement-page .agreement-receipt {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  body.agreement-page .agreement-reader-card .card-body { padding: 0 !important; }
  body.agreement-page .agreement-reader-card .doc {
    max-width: none !important;
    margin: 0 !important;
    color: #111 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 10.5pt !important;
    line-height: 1.58 !important;
  }
  body.agreement-page .agreement-reader-card .doc > p:first-child {
    margin-top: 0;
    color: #203050 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 10pt;
    font-weight: 700;
  }
  body.agreement-page .agreement-reader-card .doc h3 {
    break-after: avoid-page;
    page-break-after: avoid;
    margin: 6mm 0 2.5mm !important;
    color: #203050 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11pt !important;
    line-height: 1.3 !important;
    font-weight: 700;
  }
  body.agreement-page .agreement-reader-card .doc p {
    margin: 0 0 3.4mm !important;
    orphans: 3;
    widows: 3;
  }
  body.agreement-page .agreement-reader-card .card-body > .xsmall { margin: 7mm 0 0 !important; color: #77838A !important; font-size: 7.5pt !important; }

  body.agreement-page .agreement-receipt {
    margin-top: 11mm !important;
    padding-top: 6mm !important;
    border-top: 1.2pt solid #2A9372 !important;
    break-before: auto;
  }
  body.agreement-page .agreement-receipt .card-head {
    display: block !important;
    padding: 0 0 4mm !important;
    border: 0 !important;
    background: transparent !important;
  }
  body.agreement-page .agreement-receipt .overview-kicker { color: #2A9372 !important; font-size: 8pt !important; letter-spacing: .06em; text-transform: uppercase; }
  body.agreement-page .agreement-receipt h2 {
    margin: 1mm 0 1.5mm !important;
    color: #203050 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16pt !important;
  }
  body.agreement-page .agreement-receipt h2 .i { display: none !important; }
  body.agreement-page .agreement-receipt .card-head p { margin: 0 !important; color: #4D5C66 !important; font-size: 9pt !important; }
  body.agreement-page .agreement-receipt .card-body { padding: 0 !important; }

  body.agreement-page .agreement-receipt-acceptance {
    margin: 0 0 5mm !important;
    padding: 4mm 4.5mm !important;
    border: 0.5pt solid #BFD9CC !important;
    border-radius: 0 !important;
    background: #F5FAF7 !important;
    break-inside: avoid;
  }
  body.agreement-page .agreement-receipt-acceptance .small { color: #203050 !important; font-size: 8pt !important; text-transform: uppercase; letter-spacing: .04em; }
  body.agreement-page .agreement-receipt-acceptance p { margin: 1.5mm 0 0 !important; color: #111 !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 9.5pt !important; line-height: 1.5 !important; }

  body.agreement-page .agreement-receipt-meta {
    display: grid !important;
    grid-template-columns: 37mm minmax(0, 1fr) !important;
    gap: 0 !important;
    margin: 0 !important;
    border-top: 0.5pt solid #D8DEE3;
  }
  body.agreement-page .agreement-receipt-meta dt,
  body.agreement-page .agreement-receipt-meta dd {
    margin: 0 !important;
    padding: 2.6mm 0 !important;
    border-bottom: 0.5pt solid #E2E6EA;
    font-size: 8.5pt !important;
    line-height: 1.4;
  }
  body.agreement-page .agreement-receipt-meta dt { padding-right: 5mm !important; color: #65737C !important; font-weight: 700; }
  body.agreement-page .agreement-receipt-meta dd { color: #111 !important; overflow-wrap: anywhere; }

  body.agreement-page .agreement-print-certification {
    margin-top: 5mm;
    padding-top: 4mm;
    border-top: 0.5pt solid #D8DEE3;
    color: #4D5C66;
    font-size: 8pt;
    line-height: 1.45;
    break-inside: avoid;
  }
  body.agreement-page .agreement-print-certification strong { display: block; margin-bottom: 1mm; color: #203050; font-size: 8pt; text-transform: uppercase; letter-spacing: .045em; }
  body.agreement-page .agreement-print-certification p { margin: 0; }

  body.agreement-page a { color: #111 !important; text-decoration: none !important; }
  body.agreement-page * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ========================================================================== 
   My CARE · Events refinement
   Personal registration record; public event discovery stays on the Events site.
   ========================================================================== */
.events-hello .eyebrow::before { background: var(--care-ra4); }
.events-list { display: grid; gap: 14px; }

/* Registration card */
.ev-tile { position: relative; border-radius: var(--r-xl); box-shadow: var(--shadow-card); }
.ev-tile:hover { box-shadow: var(--shadow-lift); }
.ev-tile + .ev-tile { margin-top: 0; }
.ev-tile-accent { position: absolute; inset: 0 0 auto; height: 4px; background: var(--care-ra4); }
.ev-tile[data-event-state="past"] .ev-tile-accent { background: var(--line-strong); }
.ev-tile[data-event-state="cancelled"] .ev-tile-accent { background: var(--text-3); }
.ev-tile[data-event-state="current"] .ev-tile-accent { background: var(--care-ra3); }
.ev-tile-head { grid-template-columns: 60px minmax(0, 1fr); align-items: center; padding: 22px 22px 18px; }
.ev-tile-heading { min-width: 0; }
.ev-tile-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.ev-tile-title-row h3 { margin: 0; min-width: 0; }
.ev-tile-title-row .badge { flex: 0 0 auto; }
.ev-tile-meta { margin-top: 6px; gap: 5px 15px; }
.ev-tile-meta span { display: inline-flex; align-items: center; gap: 5px; }
.ev-tile-meta .i { width: 14px; height: 14px; color: var(--care-ra4-ink); }
.ev-tile-body { padding: 0 22px 18px 100px; }
.ev-tile-body summary { color: var(--teal); align-items: center; }
.ev-choice-count { display: inline-flex; padding: 3px 7px; border-radius: 999px; margin-left: 4px; background: color-mix(in srgb, var(--care-ra4) 10%, var(--surface)); color: var(--teal); font-size: 11.5px; font-weight: 650; }
.ev-day { border-radius: 12px; }
.ev-personal-note { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); color: var(--text-2); font-size: 12.5px; }
.ev-personal-note strong { color: var(--navy); }
.ev-tile-foot { gap: 14px; padding: 14px 22px; }
.ev-registration-meta { display: flex; flex-direction: column; flex: 1 1 260px; min-width: 0; }
.ev-registration-meta strong { color: var(--navy); font-size: 12.5px; }
.ev-registration-meta span { margin-top: 2px; color: var(--text-3); font-size: 12px; line-height: 1.4; }
.ev-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.ev-tile[data-event-state="cancelled"] { opacity: .84; }
.ev-tile[data-event-state="cancelled"] .datebox { opacity: .78; }

.events-cancelled-details { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-lg); overflow: hidden; }
.events-cancelled-details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 19px; }
.events-cancelled-details > summary::-webkit-details-marker { display: none; }
.events-cancelled-details > summary > span:first-child { display: flex; flex-direction: column; }
.events-cancelled-details > summary strong { color: var(--navy); font-size: 16px; margin-top: 2px; }
.events-history-count { min-width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-3); color: var(--text-2); font-size: 12px; font-weight: 650; }
.events-cancelled-details[open] > summary { border-bottom: 1px solid var(--line); }
.events-cancelled-details > .events-list { padding: 14px; }
@media (max-width: 760px) {
  .ev-tile-head { grid-template-columns: 52px minmax(0, 1fr); padding: 18px 16px 14px; }
  .ev-tile-title-row { flex-direction: column; gap: 7px; }
  .ev-tile-title-row .badge { align-self: flex-start; }
  .ev-tile-body { padding: 0 16px 15px; }
  .ev-tile-foot { padding: 12px 16px; }
  .ev-actions { width: 100%; justify-content: stretch; }
  .ev-actions .btn { flex: 1 1 calc(50% - 4px); justify-content: center; }
}
@media (max-width: 480px) {
  .ev-actions .btn { flex-basis: 100%; }
}

/* ========================================================================== 
   My CARE · Feedback refinement
   Personal feedback requests and the participant questionnaire share RA5.
   ========================================================================== */
.feedback-hello .eyebrow::before { background: var(--care-ra5); }
.feedback-overview { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(320px, .9fr); gap: 18px; align-items: stretch; }
.feedback-status-card,
.feedback-about-card { position: relative; min-width: 0; height: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-card); overflow: hidden; }
.feedback-status-card::before,
.feedback-about-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--care-ra5); }
.feedback-status-card { padding: 24px; }
.feedback-about-card { padding: 24px; display: flex; flex-direction: column; }
.feedback-status-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
.feedback-title-block { display: flex; gap: 14px; align-items: center; min-width: 0; }
.feedback-title-block h2,
.feedback-about-card h2 { margin: 2px 0 0; font-size: 22px; line-height: 1.2; }
.feedback-icon { width: 44px; height: 44px; border-radius: 13px; background: color-mix(in srgb, var(--care-ra5) 15%, var(--surface)); color: var(--lime-ink); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.feedback-icon .i { width: 21px; height: 21px; }
.feedback-count { min-width: 32px; height: 32px; padding: 0 9px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--care-ra5); color: #203050; font-size: 13px; font-weight: 700; }
.feedback-clear { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px; background: var(--moss-wash); color: var(--moss); font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.feedback-lead { color: var(--text-2); line-height: 1.6; margin: 18px 0 0; max-width: 74ch; }
.feedback-summary-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.feedback-summary-facts > div { padding: 13px 14px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 12px; }
.feedback-summary-facts span { display: block; color: var(--text-3); font-size: 12px; line-height: 1.25; }
.feedback-summary-facts strong { display: block; margin-top: 4px; color: var(--navy); font-family: var(--font-display); font-size: 23px; font-weight: 600; line-height: 1; }
.feedback-primary-action { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-top: 18px; padding: 14px; border: 1px solid color-mix(in srgb, var(--care-ra5) 34%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--care-ra5) 7%, var(--surface)); }
.feedback-primary-action > div { display: flex; flex-direction: column; min-width: 0; }
.feedback-primary-action strong { color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feedback-primary-action span { color: var(--text-2); font-size: 12.5px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feedback-about-list { display: grid; gap: 16px; margin-top: 20px; }
.feedback-about-list > div { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: start; }
.feedback-about-icon { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--care-ra5) 14%, var(--surface)); color: var(--lime-ink); }
.feedback-about-icon .i { width: 18px; height: 18px; }
.feedback-about-list strong { color: var(--navy); font-size: 13.5px; }
.feedback-about-list p { margin: 2px 0 0; color: var(--text-2); font-size: 12.5px; line-height: 1.45; }
.feedback-list { display: grid; gap: 12px; }
.feedback-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 20px 20px 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.feedback-item-accent { position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--care-ra5); }
.feedback-item[data-feedback-state="submitted"] .feedback-item-accent { background: var(--care-ra3); }
.feedback-item[data-feedback-state="closed"] .feedback-item-accent,
.feedback-item[data-feedback-state="withdrawn"] .feedback-item-accent { background: var(--line-strong); }
.feedback-item[data-feedback-state="upcoming"] .feedback-item-accent { background: var(--care-ra4); }
.feedback-item-main { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; min-width: 0; }
.feedback-item-icon { width: 44px; height: 44px; border-radius: 13px; background: color-mix(in srgb, var(--care-ra5) 14%, var(--surface)); color: var(--lime-ink); display: inline-flex; align-items: center; justify-content: center; }
.feedback-item-icon .i { width: 20px; height: 20px; }
.feedback-item-copy { min-width: 0; }
.feedback-item-top { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; }
.feedback-item-top h3 { margin: 2px 0 0; color: var(--navy); font-size: 17px; line-height: 1.25; }
.feedback-item-top .badge { flex: 0 0 auto; }
.feedback-item-meta { display: flex; flex-wrap: wrap; gap: 5px 14px; margin-top: 9px; color: var(--text-2); font-size: 12.5px; }
.feedback-item-meta span { display: inline-flex; align-items: center; gap: 5px; }
.feedback-item-meta .i { width: 14px; height: 14px; color: var(--lime-ink); }
.feedback-item-note { margin: 7px 0 0; color: var(--text-3); font-size: 12.5px; }
.feedback-item-actions { display: flex; justify-content: flex-end; }

/* Feedback questionnaire */
body.feedback-page .p-hero { border-bottom-color: color-mix(in srgb, var(--care-ra5) 30%, var(--line)); }
body.feedback-page .p-hero h1 { color: var(--navy); }
.feedback-form-intro { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 24px; box-shadow: var(--shadow-card); overflow: hidden; }
.feedback-form-intro::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--care-ra5); }
.feedback-form-intro-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.feedback-form-intro h2 { margin: 3px 0 0; font-size: 24px; line-height: 1.2; }
.feedback-form-description { margin: 14px 0 0; color: var(--text-2); line-height: 1.6; max-width: 78ch; }
.feedback-privacy { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 10px; font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.feedback-privacy.anonymous { background: var(--moss-wash); color: var(--moss); }
.feedback-privacy.identified { background: var(--blue-wash); color: var(--blue); }
.feedback-form-facts { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line-soft); color: var(--text-2); font-size: 12.5px; }
.feedback-form-facts span { display: inline-flex; align-items: center; gap: 6px; }
.feedback-form-facts .i { width: 14px; height: 14px; color: var(--lime-ink); }
.feedback-privacy-note { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; margin-top: 18px; padding: 14px; border-radius: 12px; background: color-mix(in srgb, var(--care-ra5) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--care-ra5) 22%, var(--line)); }
.feedback-privacy-note > .i { width: 20px; height: 20px; margin: 2px auto 0; color: var(--lime-ink); }
.feedback-privacy-note strong { color: var(--navy); font-size: 13.5px; }
.feedback-privacy-note p { margin: 2px 0 0; color: var(--text-2); font-size: 12.5px; line-height: 1.45; }
.feedback-progress-wrap { position: sticky; top: calc(var(--gbar-h, 64px) + 10px); z-index: 6; margin: 12px 0; }
body.feedback-page .fb-progress { position: static; margin: 0; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--care-ra5) 30%, var(--line)); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-card); -webkit-backdrop-filter: none; backdrop-filter: none; }
body.feedback-page .fb-progress .meter > span { background: var(--care-ra5) !important; }
.feedback-form { display: grid; gap: 14px; }
.feedback-question-list { display: grid; gap: 12px; }
.feedback-question { margin: 0; padding: 22px; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.feedback-question-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; color: var(--text-3); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.feedback-question-state { padding: 4px 7px; border-radius: 999px; text-transform: none; letter-spacing: 0; }
.feedback-question-state.required { background: var(--amber-wash); color: var(--amber); }
.feedback-question-state.optional { background: var(--surface-3); color: var(--text-3); }
.feedback-question-prompt { margin-bottom: 16px; color: var(--navy); font-size: 16.5px; font-weight: 650; line-height: 1.45; }
body.feedback-page .rating { gap: 7px; max-width: 420px; }
body.feedback-page .rating span { border-radius: 10px; box-shadow: none; }
body.feedback-page .rating label:hover span { border-color: var(--care-ra5); color: var(--navy); }
body.feedback-page .rating input:checked + span { background: var(--care-ra5); border-color: var(--care-ra5); color: #203050; }
.feedback-submit-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); }
.feedback-submit-bar > div { display: flex; flex-direction: column; }
.feedback-submit-bar strong { color: var(--navy); font-size: 13.5px; }
.feedback-submit-bar span { margin-top: 2px; color: var(--text-3); font-size: 12px; }
.feedback-receipt { max-width: 720px; margin: 34px auto; padding: 42px 34px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lift); }
.feedback-receipt-icon { width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--care-ra5) 15%, var(--surface)); color: var(--lime-ink); }
.feedback-receipt-icon .i { width: 28px; height: 28px; }
.feedback-receipt h2 { margin: 4px 0 8px; font-size: 28px; }
.feedback-receipt > p { max-width: 54ch; margin: 0 auto; color: var(--text-2); line-height: 1.6; }
.feedback-receipt-note { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; padding: 7px 10px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); font-size: 12.5px; }
.feedback-receipt .btn-row { justify-content: center; margin-top: 24px; }

@media (max-width: 1040px) {
  .feedback-overview { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .feedback-overview { gap: 12px; }
  .feedback-status-card, .feedback-about-card { padding: 18px; border-radius: var(--r-lg); }
  .feedback-status-head { gap: 10px; }
  .feedback-title-block { gap: 10px; align-items: flex-start; }
  .feedback-icon { width: 38px; height: 38px; border-radius: 11px; }
  .feedback-title-block h2, .feedback-about-card h2 { font-size: 19px; }
  .feedback-summary-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .feedback-summary-facts > div { padding: 10px; }
  .feedback-summary-facts span { font-size: 10.5px; }
  .feedback-summary-facts strong { font-size: 20px; }
  .feedback-primary-action { grid-template-columns: 1fr; }
  .feedback-primary-action .btn { width: 100%; }
  .feedback-item { grid-template-columns: 1fr; padding: 18px; }
  .feedback-item-actions { justify-content: stretch; padding-left: 58px; }
  .feedback-item-actions .btn { width: 100%; }
  .feedback-form-intro { padding: 19px; border-radius: var(--r-lg); }
  .feedback-form-intro-head { flex-direction: column; gap: 10px; }
  .feedback-form-intro h2 { font-size: 21px; }
  .feedback-progress-wrap { top: calc(var(--gbar-h, 56px) + 8px); }
  .feedback-question { padding: 18px; }
  .feedback-submit-bar { flex-direction: column; align-items: stretch; }
  .feedback-submit-bar .btn { width: 100%; }
  .feedback-receipt { padding: 32px 20px; margin: 20px auto; }
}
@media (max-width: 480px) {
  .feedback-summary-facts { grid-template-columns: 1fr; }
  .feedback-summary-facts > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .feedback-summary-facts strong { margin-top: 0; }
  .feedback-item-main { grid-template-columns: 38px minmax(0, 1fr); gap: 10px; }
  .feedback-item-icon { width: 38px; height: 38px; border-radius: 11px; }
  .feedback-item-top { flex-direction: column; gap: 7px; }
  .feedback-item-actions { padding-left: 48px; }
  .feedback-form-facts { display: grid; grid-template-columns: 1fr; }
  .feedback-question { padding: 16px; }
  body.feedback-page .rating { gap: 5px; }
  body.feedback-page .rating span { height: 44px; }
}

/* ---------- My CARE · Profile ---------- */
body[data-my-section="profile"] .my-hero { max-width: none; }
.profile-hello .eyebrow { margin-bottom: 8px; }
.profile-overview { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .85fr); gap: 18px; align-items: stretch; }
.profile-status-card,
.profile-about-card { position: relative; height: 100%; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-card); }
.profile-status-card::before,
.profile-about-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--care-ra1); }
.profile-status-card { padding: 26px; }
.profile-about-card { padding: 24px; }
.profile-status-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.profile-identity { display: flex; align-items: center; gap: 15px; min-width: 0; }
.profile-avatar { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: var(--care-ra1); color: #fff; font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.profile-identity h2,
.profile-about-card h2 { margin: 3px 0 0; color: var(--navy); font-size: 23px; letter-spacing: -.02em; }
.profile-identity p { margin: 3px 0 0; color: var(--text-2); font-size: 13px; overflow-wrap: anywhere; }
.profile-lead { margin: 20px 0 22px; max-width: 72ch; color: var(--text-2); line-height: 1.6; }
.profile-summary-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.profile-summary-facts > div { min-width: 0; padding: 13px 14px; border: 1px solid var(--line-soft); border-radius: 11px; background: var(--surface-2); }
.profile-summary-facts span { display: block; color: var(--text-3); font-size: 11.5px; font-weight: 600; }
.profile-summary-facts strong { display: block; margin-top: 3px; color: var(--navy); font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.profile-about-list { display: grid; gap: 16px; margin-top: 20px; }
.profile-about-list > div { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: start; }
.profile-about-list > div > span { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--care-ra1) 9%, var(--surface)); color: var(--care-ra1); }
.profile-about-list > div > span .i { width: 18px; height: 18px; }
.profile-about-list strong { display: block; color: var(--navy); font-size: 13.5px; }
.profile-about-list p { margin: 0; }
.profile-about-list small { display: block; margin-top: 2px; color: var(--text-2); font-size: 12.5px; line-height: 1.45; }
.profile-about-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.profile-about-foot a,
.profile-about-foot .linkish { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; }

.profile-request-card { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 14px; align-items: start; margin-top: 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.profile-request-card > .i { width: 22px; height: 22px; margin-top: 2px; color: var(--care-ra2); }
.profile-request-card.approved > .i { color: var(--moss); }
.profile-request-card.rejected > .i { color: var(--amber); }
.profile-request-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.profile-request-card p { margin: 4px 0 0; color: var(--text-2); font-size: 13px; line-height: 1.5; }
.profile-request-note { color: var(--text) !important; }

.profile-details-section,
.profile-record-section { margin-top: 34px; }
.profile-details-section .overview-section-head,
.profile-record-section .overview-section-head { margin-bottom: 14px; align-items: flex-end; }
.profile-details-section .overview-section-head p,
.profile-record-section .overview-section-head p { margin: 5px 0 0; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.profile-details-card,
.profile-record-card { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-card); }
.profile-details-card { border-top: 4px solid var(--care-ra1); }
.profile-form-group { padding: 24px; }
.profile-form-group + .profile-form-group { border-top: 1px solid var(--line-soft); }
.profile-form-group-head { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: center; margin-bottom: 18px; }
.profile-form-group-head > span { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--care-ra1) 8%, var(--surface)); color: var(--care-ra1); }
.profile-form-group-head strong { display: block; color: var(--navy); font-size: 14px; }
.profile-form-group-head small { display: block; margin-top: 2px; color: var(--text-2); font-size: 12.5px; }
.profile-identity-grid { grid-template-columns: minmax(110px, .48fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.profile-identity-grid .full { grid-column: 1 / -1; }
.profile-static-field { min-height: 44px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); color: var(--text); }
.profile-static-field > .i { color: var(--care-ra2); }
.profile-static-field span { min-width: 0; overflow-wrap: anywhere; }
.profile-static-field small { color: var(--text-3); font-size: 11.5px; white-space: nowrap; }
.profile-note-group > .field { max-width: 900px; }
.profile-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 24px; border-top: 1px solid var(--line); background: var(--surface-2); }
.profile-form-footer > span { color: var(--text-2); font-size: 12.5px; line-height: 1.45; }
.profile-form-footer .btn { flex: 0 0 auto; }

.profile-managed { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 99px; background: color-mix(in srgb, var(--care-ra1) 8%, var(--surface)); color: var(--care-ra1); font-size: 12px; font-weight: 650; white-space: nowrap; }
.profile-record-card { border-top: 4px solid var(--care-ra1); padding: 24px; }
.profile-record-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.profile-record-facts > div { min-width: 0; padding: 14px; border: 1px solid var(--line-soft); border-radius: 11px; background: var(--surface-2); }
.profile-record-facts span { display: block; color: var(--text-3); font-size: 11.5px; font-weight: 600; }
.profile-record-facts strong { display: block; margin-top: 4px; color: var(--navy); font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.profile-team-block { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.profile-team-head { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: center; }
.profile-team-head > span { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--care-ra2) 9%, var(--surface)); color: var(--care-ra2); }
.profile-team-head strong { display: block; color: var(--navy); font-size: 13.5px; }
.profile-team-head small { display: block; margin-top: 2px; color: var(--text-2); font-size: 12.5px; }
.profile-team-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.profile-team-tag { display: inline-flex; flex-direction: column; gap: 1px; min-width: 150px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.profile-team-tag b { color: var(--navy); font-size: 12.5px; font-weight: 650; }
.profile-team-tag small { color: var(--text-3); font-size: 10.5px; text-transform: capitalize; }
.profile-nonmember-overview .profile-status-card,
.profile-nonmember-overview .profile-about-card { min-height: 280px; }

@media (max-width: 1040px) {
  .profile-overview { grid-template-columns: 1fr; }
  .profile-status-card,
  .profile-about-card { min-height: 0; height: auto; }
}
@media (max-width: 760px) {
  .profile-status-card,
  .profile-about-card { padding: 18px; }
  .profile-status-head { flex-direction: column; gap: 12px; }
  .profile-avatar { width: 48px; height: 48px; font-size: 16px; }
  .profile-summary-facts,
  .profile-record-facts { grid-template-columns: 1fr 1fr; }
  .profile-form-group { padding: 18px; }
  .profile-form-footer { padding: 16px 18px; flex-direction: column; align-items: stretch; }
  .profile-form-footer .btn { width: 100%; }
  .profile-static-field { grid-template-columns: auto minmax(0, 1fr); }
  .profile-static-field small { grid-column: 2; white-space: normal; }
  .profile-request-card { grid-template-columns: 32px minmax(0, 1fr); }
  .profile-request-card > .btn { grid-column: 2; justify-self: start; }
}
@media (max-width: 480px) {
  .profile-summary-facts,
  .profile-record-facts { grid-template-columns: 1fr; }
  .profile-about-foot { align-items: flex-start; flex-direction: column; }
  .profile-team-tag { width: 100%; }
}

/* ========================================================================== 
   My CARE workspace geometry — shared across Overview + journey pages
   Keeps page-to-page card positions, widths and desktop heights stable.
   ========================================================================== */
body.my {
  --my-workspace-gap: 18px;
  --my-workspace-main: minmax(0, 1.55fr);
  --my-workspace-side: minmax(300px, .85fr);
  --my-summary-card-min-h: 320px;
  --my-summary-card-pad: 24px;
}

/* The KPI rail and all paired summary workspaces share the same outer box. */
.rail,
.overview-grid,
.onboarding-layout,
.agreements-overview,
.feedback-overview,
.profile-overview {
  width: 100%;
  min-width: 0;
}

/* One two-column system for every My CARE summary workspace. */
.overview-grid,
.onboarding-layout,
.agreements-overview,
.feedback-overview,
.profile-overview {
  grid-template-columns: var(--my-workspace-main) var(--my-workspace-side);
  gap: var(--my-workspace-gap);
  align-items: stretch;
}

/* The paired summary cards occupy the same desktop frame on every page. */
.overview-panel,
.onboarding-current,
.feedback-status-card,
.feedback-about-card,
.profile-status-card,
.profile-about-card {
  min-width: 0;
  min-height: var(--my-summary-card-min-h);
  height: 100%;
}

/* Standardized internal edge spacing keeps headings and content aligned too. */
.overview-panel,
.onboarding-current,
.feedback-status-card,
.feedback-about-card,
.profile-status-card,
.profile-about-card {
  padding: var(--my-summary-card-pad);
}

/* Heading scale is shared across the paired-card layer. */
.overview-panel-head h2,
.onboarding-current h2,
.feedback-title-block h2,
.feedback-about-card h2,
.profile-status-card h2,
.profile-about-card h2 {
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.02em;
}

/* Overview is the same workspace: KPI row above, paired cards below. */
body[data-my-section="overview"] .rail { margin-bottom: 32px; }
body[data-my-section="overview"] .overview-grid { margin-top: 0; }

/* Once the cards stack, content should determine height naturally. */
@media (max-width: 1040px) {
  .overview-grid,
.onboarding-layout,
.agreements-overview,
.feedback-overview,
.profile-overview {
    grid-template-columns: 1fr;
  }

  .overview-panel,
.onboarding-current,
.feedback-status-card,
.feedback-about-card,
.profile-status-card,
.profile-about-card {
    min-height: 0;
    height: auto;
  }
}

@media (max-width: 760px) {
  body.my { --my-workspace-gap: 12px; --my-summary-card-pad: 18px; }
}

@media (max-width: 760px) {
  .overview-panel-head h2,
.onboarding-current h2,
.feedback-title-block h2,
.feedback-about-card h2,
.profile-status-card h2,
.profile-about-card h2 {
    font-size: 19px;
  }
}

@media (max-width: 760px) {
  .profile-identity-grid { grid-template-columns: minmax(0, 1fr); }
  .profile-identity-grid .full { grid-column: auto; }
}

/* Profile refinement: the official CARE record now lives in the CARE profile card. */
.profile-care-card .profile-status-head { align-items: flex-start; }
.profile-care-card .profile-managed { flex: 0 0 auto; }
.profile-care-card .profile-lead { margin-bottom: 18px; }
.profile-care-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.profile-care-assignments { margin-top: 18px; padding-top: 18px; }
.profile-team-empty { margin: 12px 0 0; }

@media (max-width: 760px) {
  .profile-care-facts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .profile-care-facts { grid-template-columns: 1fr; }
  .profile-care-card .profile-managed { align-self: flex-start; }
}
/* Verified event-day QR check-in */
.care-phone-checkin { padding:clamp(18px,3vw,28px);margin:0 0 22px;border:1px solid color-mix(in srgb,var(--care-ra4) 40%,var(--line));border-radius:16px;background:var(--surface); }
.care-phone-checkin h2 { margin:7px 0;color:var(--navy);font-size:clamp(21px,3vw,27px); }
.care-phone-checkin p { color:var(--text-2);line-height:1.6;margin:7px 0 14px; }
.care-phone-checkin .btn-row { display:flex;flex-wrap:wrap;gap:10px; }
@media(max-width:480px) { .care-phone-checkin .btn-row > * { width:100%;justify-content:center; } }
.attendance-member-pills {flex-wrap:wrap;gap:7px; }
.attendance-member-pill { display:inline-flex;gap:5px;align-items:center;padding:6px 9px;border:1px solid var(--line);border-radius:9px;color:var(--text-3);background:var(--surface);font-size:11px; }
.attendance-member-pill.present { border-color:color-mix(in srgb,var(--care-ra4) 30%,var(--line));color:var(--care-ra4-ink);background:color-mix(in srgb,var(--care-ra4) 6%,var(--surface)); }

/* CARE V1 · Visible attendee check-in path, separate from programme choices */
.my-event-checkin-guide { display:flex;align-items:flex-start;gap:11px;margin:0;padding:14px 18px;border-top:1px solid var(--line-soft);background:color-mix(in srgb,var(--care-ra4) 4%,var(--surface)); }
.my-event-checkin-guide-icon { width:31px;height:31px;display:grid;place-items:center;flex:0 0 auto;border-radius:10px;background:color-mix(in srgb,var(--care-ra4) 12%,var(--surface));color:var(--care-ra4-ink); }
.my-event-checkin-guide > div { min-width:0; }
.my-event-checkin-guide strong { display:block;color:var(--navy);font-size:13px;line-height:1.4; }
.my-event-checkin-guide p { color:var(--text-2);font-size:12px;line-height:1.55;margin:4px 0; }
.my-event-checkin-guide small { display:block;color:var(--text-3);font-size:11px;line-height:1.4;margin-top:5px; }
.my-event-checkin-guide.is-complete { background:color-mix(in srgb,var(--care-ra4) 7%,var(--surface)); }
.my-event-arrival-note { display:flex;gap:12px;align-items:flex-start;margin:12px 0 23px;padding:14px 17px;border-radius:13px;border:1px solid color-mix(in srgb,var(--care-ra4) 28%,var(--line));background:color-mix(in srgb,var(--care-ra4) 4%,var(--surface)); }
.my-event-arrival-note > .i { color:var(--care-ra4-ink);flex:0 0 auto; }
.my-event-arrival-note strong { display:block;color:var(--navy);font-size:13px; }
.my-event-arrival-note p { margin:5px 0 0;color:var(--text-2);font-size:12px;line-height:1.6; }
@media(max-width:480px) { .my-event-checkin-guide { padding:12px 14px; } .my-event-arrival-note { padding:12px; } }

/* Event-specific deep-link focus. */
.my-event-highlight{outline:2px solid var(--care-ra4,#319a86);outline-offset:3px;scroll-margin-top:85px}
@media(max-width:640px){.my-event-highlight{scroll-margin-top:65px}}

/* Public event journeys link into these always-visible, event-specific tasks. */
.my-event-next-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px 17px;border-top:1px solid var(--line-soft);background:var(--surface);}
.my-event-next-action{display:flex;flex-direction:column;justify-content:space-between;gap:12px;min-width:0;padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);}
.my-event-next-action strong{display:block;color:var(--navy);font-size:13px;line-height:1.3;}
.my-event-next-action small{display:block;color:var(--text-2);font-size:11.5px;line-height:1.5;margin-top:4px;}
.my-event-next-action .btn{align-self:flex-start;}
@media(max-width:720px){.my-event-next-actions{grid-template-columns:1fr;padding:10px 12px}.my-event-next-action{gap:8px}.my-event-next-action .btn{width:100%;justify-content:center}}

/* Attendee-first overview: the next event action remains discoverable between
   the summary rail and the long-form membership / task dashboards. */
.my-attendee-next {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  align-items: center;
  gap: 15px;
  margin: 18px 0;
  padding: 17px 19px;
  border: 1px solid color-mix(in srgb,var(--care-ra4) 27%,var(--line));
  border-radius: var(--r-lg);
  background: color-mix(in srgb,var(--care-ra4) 5%,var(--surface));
}
.my-attendee-next-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: color-mix(in srgb,var(--care-ra4) 12%,var(--surface));
  color: var(--care-ra4-ink);
}
.my-attendee-next-copy { min-width: 0; }
.my-attendee-next h2 { margin: 3px 0 0; color: var(--navy); font-size: 17px; line-height: 1.3; }
.my-attendee-next p { color: var(--text-2); line-height: 1.5; margin: 5px 0 0; font-size: 12.5px; }
.my-attendee-next > .btn { justify-self: end; white-space: normal; text-align: center; }
.my-event-target-note .btn { margin-top: 9px; }
.my-event-checkin-guide { scroll-margin-top: 88px; }
@media (max-width: 700px) {
  .my-attendee-next { grid-template-columns: 38px minmax(0,1fr); gap: 10px; padding: 14px; }
  .my-attendee-next-icon { width: 38px; height: 38px; }
  .my-attendee-next h2 { font-size: 15px; }
  .my-attendee-next > .btn { grid-column: 1 / -1; justify-self: stretch; width: 100%; justify-content: center; }
}

/* Attendee actions: explicit dark-mode contrast for buttons on tinted panels.
   Scoped to My CARE event/action surfaces, with no global button overrides. */
:root[data-theme="dark"] .my-attendee-next > .btn.btn-primary,
:root[data-theme="dark"] .my-event-next-action .btn.btn-primary {
  background: #78A4BE;
  border-color: #78A4BE;
  color: #0B1B2B;
}
:root[data-theme="dark"] .my-event-next-action .btn:not(.btn-primary),
:root[data-theme="dark"] .ev-actions .btn:not(.btn-primary):not(.btn-danger),
:root[data-theme="dark"] .my-event-target-note .btn:not(.btn-primary) {
  background: #193043;
  border-color: #456477;
  color: #EEF3F7;
}
:root[data-theme="dark"] .ev-actions .btn.btn-danger {
  background: #34262D;
  border-color: #96595C;
  color: #FFC1B2;
}
:root[data-theme="dark"] .my-attendee-next > .btn.btn-primary:hover,
:root[data-theme="dark"] .my-event-next-action .btn.btn-primary:hover {
  background: #94BCD1;
  border-color: #94BCD1;
  color: #0B1B2B;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .my-attendee-next > .btn.btn-primary,
  :root:not([data-theme="light"]) .my-event-next-action .btn.btn-primary { background:#78A4BE; border-color:#78A4BE; color:#0B1B2B; }
  :root:not([data-theme="light"]) .my-event-next-action .btn:not(.btn-primary),
  :root:not([data-theme="light"]) .ev-actions .btn:not(.btn-primary):not(.btn-danger),
  :root:not([data-theme="light"]) .my-event-target-note .btn:not(.btn-primary) { background:#193043; border-color:#456477; color:#EEF3F7; }
  :root:not([data-theme="light"]) .ev-actions .btn.btn-danger { background:#34262D; border-color:#96595C; color:#FFC1B2; }
}

/* Public-event deep links: the requested event is the first thing an attendee sees.
   Keep separate vertical breathing room between the event and overview cards. */
.my-event-focused { margin: 26px 0 32px; min-width: 0; }
.my-event-focused-heading { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:14px; }
.my-event-focused-heading h2 { margin:4px 0 0;color:var(--navy);font-size:clamp(19px,2.3vw,24px); }
.my-event-focused > .ev-tile { margin-top:0; }
.my-event-missing-registration {
  display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start;
  padding:22px;border:1px solid color-mix(in srgb,var(--care-ra4) 35%,var(--line));
  border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--shadow-card);
}
.my-event-lookup-icon { width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--care-ra4-ink);background:color-mix(in srgb,var(--care-ra4) 12%,var(--surface)); }
.my-event-lookup-content { min-width:0; }
.my-event-missing-registration h3 { margin:5px 0 0;color:var(--navy);font-size:clamp(18px,2vw,22px); }
.my-event-missing-registration p { margin:8px 0 0;font-size:13px;line-height:1.6;color:var(--text-2);overflow-wrap:anywhere; }
.my-event-lookup-meta { font-weight:550; }
.my-event-lookup-message { margin:16px 0 0;padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2); }
.my-event-lookup-message strong { color:var(--navy);font-size:13px; }
.my-event-lookup-message p { margin:5px 0 0; }
.my-event-lookup-instructions { display:flex;gap:8px;align-items:flex-start; }
.my-event-lookup-instructions .i { flex:0 0 auto;color:var(--care-ra4-ink); }
.my-event-lookup-closed { padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2); }
.my-event-lookup-actions { display:flex;flex-wrap:wrap;gap:9px;margin-top:18px; }
.my-event-lookup-actions .btn { max-width:100%; }
@media(max-width:640px) {
 .my-event-focused { margin:20px 0 25px; }
 .my-event-missing-registration { grid-template-columns:1fr;gap:11px;padding:16px; }
 .my-event-lookup-icon { width:38px;height:38px; }
 .my-event-lookup-actions { flex-direction:column; }
 .my-event-lookup-actions .btn { width:100%;justify-content:center; }
}

/* CARE Research / My CARE · responsive flat institutional surfaces */
.my-research{display:grid;gap:18px;min-width:0;margin:22px auto 32px;width:100%;max-width:var(--page-max,1280px)}

/* My CARE · Data Manager records (scoped to Research). */

/* My CARE · scroll-safe form dialogs (Research project and member editors).
   The dialog is height constrained, but its nested form must also be a
   shrinkable flex column. Otherwise its contents overflow a non-scrolling
   form and the dialog clips the final fields/actions on short screens. */
body.my .dialog > form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
body.my .dialog > form > .dialog-head,
body.my .dialog > form > .dialog-foot {
  flex: 0 0 auto;
}
body.my .dialog > form > .dialog-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

/* A4m · structured CARE DMP reader (read-only, responsive, flat surfaces). */
.dmp-workspace{display:grid;gap:12px;min-width:0;margin-top:16px;color:var(--text)}
.dmp-workspace-header{display:flex;align-items:start;justify-content:space-between;gap:10px;flex-wrap:wrap}
.dmp-workspace-header h4{margin:6px 0 4px;font-size:20px;color:var(--navy)}
.dmp-readonly-mark{font-size:11px;font-weight:700;letter-spacing:.01em;color:var(--text-2);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:7px 10px}
.dmp-workspace-summary{display:flex;gap:5px 10px;align-items:baseline;flex-wrap:wrap}
.dmp-workspace-summary strong{font-size:21px;color:var(--navy)}
.dmp-summary-meta{flex-basis:100%;font-size:12px;color:var(--text-2)}
.dmp-progress{width:100%;height:9px;accent-color:var(--navy);border-radius:8px}
.dmp-section-list{display:grid;gap:10px;min-width:0}
.dmp-section{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden;min-width:0}
.dmp-section>summary{display:flex;align-items:center;gap:10px;padding:14px;cursor:pointer;list-style:none;min-width:0}
.dmp-section>summary::-webkit-details-marker{display:none}
.dmp-section>summary::after{content:'⌄';color:var(--text-2);font-size:17px;flex:0 0 auto}
.dmp-section[open]>summary::after{transform:rotate(180deg)}
.dmp-section>summary strong{flex:1;min-width:0;color:var(--navy);font-size:13px;overflow-wrap:anywhere}
.dmp-section-index{display:grid;place-items:center;border-radius:7px;border:1px solid var(--line);font-size:11px;color:var(--text-2);min-width:27px;height:27px}
.dmp-section-count{font-size:11px;color:var(--text-2);white-space:nowrap}
.dmp-question-list{border-top:1px solid var(--line);padding:12px;display:grid;gap:10px;min-width:0}
.dmp-question{padding:12px;border:1px solid var(--line);border-radius:9px;min-width:0}
.dmp-question-top{display:flex;align-items:start;gap:12px;justify-content:space-between}
.dmp-question h5,.dmp-unmatched h5{font-size:13px;margin:0 0 5px;color:var(--navy);line-height:1.4}
.dmp-question-status{font-size:11px;color:var(--text-2);white-space:nowrap}
.dmp-answer-list{display:grid;gap:7px;margin-top:9px}
.dmp-answer-item{background:var(--surface-2,var(--surface));padding:10px 12px;border:1px solid var(--line);border-radius:8px;overflow-wrap:anywhere;white-space:pre-wrap;line-height:1.5;font-size:13px}
.dmp-unmatched{border:1px solid var(--line);padding:14px;border-radius:10px;display:grid;gap:8px}
@media(max-width:580px){.dmp-section>summary{flex-wrap:wrap}.dmp-section-count{order:3;flex-basis:100%;padding-left:37px}.dmp-question-top{flex-direction:column;gap:4px}.dmp-question-status{white-space:normal}}

/* Full-width reader and team workspace allow long, multilingual DMP prompts to wrap. */

/* CARE V1 A4n — project-scoped, review-only stewardship; flat visual hierarchy */
.dmp-review-title,.dmp-review-head,.dmp-review-card-top,.dmp-review-actions{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.dmp-review-list{display:grid;gap:12px;margin-top:14px}
.dmp-review-card{border:1px solid var(--line);border-radius:12px;padding:15px;background:var(--surface);min-width:0}
.dmp-review-card strong{color:var(--navy)}
.dmp-review-card p{overflow-wrap:anywhere;white-space:pre-wrap}
.dmp-review-head{border-top:1px solid var(--line);padding-top:14px}
.dmp-review-events{border-top:1px solid var(--line);margin-top:12px;padding-top:10px}
.dmp-review-events summary{cursor:pointer;font-size:13px;color:var(--navy);font-weight:600}
.dmp-review-event{margin-top:10px;padding:10px 12px;background:var(--surface-2,var(--surface));border-radius:8px;font-size:12px;overflow-wrap:anywhere}
.dmp-review-actions{justify-content:flex-start;margin-top:12px}
@media(max-width:600px){.dmp-review-title,.dmp-review-head{align-items:flex-start}.dmp-review-actions .btn{max-width:100%}}

/* Phase A4o CARE-only two-person review */
.dmp-review-cycle-panel{border-top:1px solid var(--line);padding-top:14px}
.dmp-review-cycle-panel .dmp-review-card{background:var(--surface)}
.dmp-review-cycle-panel .dmp-review-actions{gap:8px}
@media(max-width:600px){.dmp-review-cycle-panel .dmp-review-actions .btn{width:100%}}

/* UI simplification: one closed "How this works" section at the bottom of a
   My CARE page, and a plain empty state instead of explanation cards. */
.my-howto { margin-top: 28px; border: 1px solid var(--line); border-radius: var(--r-lg, 12px); background: var(--surface); }
.my-howto > summary { display: flex; align-items: center; gap: 8px; padding: 12px 16px; cursor: pointer; font-weight: 600; color: var(--navy); list-style: none; }
.my-howto > summary::-webkit-details-marker { display: none; }
.my-howto > summary::after { content: "+"; margin-left: auto; color: var(--text-3); font-weight: 500; }
.my-howto[open] > summary::after { content: "–"; }
.my-howto > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: inherit; }
.my-howto ul { list-style: none; margin: 0; padding: 0 16px 14px; display: grid; gap: 10px; }
.my-howto li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-2); font-size: 14px; }
.my-howto li strong { display: block; color: var(--text); font-weight: 600; }
.my-howto li .icon, .my-howto li svg { flex: none; margin-top: 2px; color: var(--teal); }
.my-empty { display: flex; gap: 14px; align-items: flex-start; padding: 22px; margin-top: 18px; }
.my-empty > svg, .my-empty > .icon { flex: none; color: var(--teal); }
.my-empty h2 { font-size: 18px; margin: 0 0 4px; }
.my-empty p { color: var(--text-2); margin: 0 0 12px; }
.onboarding-layout.onboarding-single { grid-template-columns: minmax(0, 1fr) !important; }
.profile-overview.profile-single { grid-template-columns: minmax(0, 1fr) !important; }
.profile-managed-line { display: flex; gap: 6px; align-items: flex-start; margin: 14px 0 0; }
.profile-managed-line svg { flex: none; margin-top: 2px; }
/* Compact page header: the heading and one line, then the content. */
@media (min-width: 761px) {
  .my-hero { min-height: 0; padding: 20px 0 28px; }
  .my-top.has-rail .my-hero { padding-bottom: 28px; }
  .my-main { padding-top: 28px; }
}
.my-main > .my-section:first-child, .my-main > section:first-child { margin-top: 0; }
@media (max-width: 760px) { .overview-profile-card .overview-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.onboarding-single .onboarding-current { min-height: 0; }

/* Onboarding V1: one compact progress line instead of three step boxes. */
.my-onb-steps { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin: 14px 0 18px; padding: 0; font-size: 14px; color: var(--text-3); }
.my-onb-steps li { display: inline-flex; align-items: center; gap: 8px; }
.my-onb-steps li + li::before { content: ""; width: 34px; height: 2px; margin: 0 10px; background: var(--line-strong); border-radius: 2px; }
.my-onb-steps li.done + li::before { background: var(--brand-moss, #009472); }
.my-onb-steps .dot { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); color: #fff; }
.my-onb-steps .dot .i { width: 12px; height: 12px; }
.my-onb-steps li.done { color: var(--text-2); }
.my-onb-steps li.done .dot { background: var(--brand-moss, #009472); border-color: var(--brand-moss, #009472); }
.my-onb-steps li.current { color: var(--navy); font-weight: 600; }
.my-onb-steps li.current .dot { border-color: #005793; box-shadow: 0 0 0 4px rgba(0, 87, 147, .15); }
@media (max-width: 520px) {
  .my-onb-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); font-size: 12.5px; text-align: center; }
  .my-onb-steps li { position: relative; flex-direction: column; gap: 5px; }
  .my-onb-steps li + li::before { position: absolute; top: 9px; left: calc(-50% + 14px); right: calc(50% + 14px); width: auto; margin: 0; }
}
/* Phones: the submit bar sits at the end of the form so it does not cover the fields (drafts save automatically). */
.agreement-steps { margin: 0 0 18px; }

/* My CARE V1 pass: open events on the Events page */
.my-open-events { margin-top: 24px; }
.my-open-list { display: grid; gap: 10px; margin-top: 10px; }
.my-open-event { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; color: inherit; text-decoration: none; }
.my-open-event:hover { border-color: var(--teal, #1e9a78); }
.my-open-main { display: grid; gap: 3px; min-width: 0; }
.my-open-main strong { color: var(--navy, #00305d); font-size: 16px; }
.my-open-main span { color: var(--text-2); font-size: 14px; }
.my-open-main small { color: var(--text-3); font-size: 13px; }
@media (max-width: 600px) {
  .my-open-event { grid-template-columns: auto minmax(0, 1fr); }
  .my-open-event .btn { grid-column: 1 / -1; justify-content: center; }
}
.profile-summary-facts strong.is-unset, .overview-facts strong.is-unset { color: var(--text-3); font-weight: 500; }
.overview-grid > :only-child { grid-column: 1 / -1; min-height: 0; }
.overview-grid:has(> :only-child) { align-items: start; }

/* Feedback form: choice options with a full-width tap target (44px+) */
.fb-options { display: grid; gap: 8px; }
.fb-options .fb-option { display: flex; align-items: center; gap: 12px; min-height: 46px; margin: 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; }
.fb-options .fb-option:hover { border-color: var(--teal, #2f7476); }
.fb-options .fb-option:has(input:checked) { border-color: var(--teal, #2f7476); background: color-mix(in srgb, var(--teal, #2f7476) 8%, var(--surface)); }
.fb-options .fb-option input { flex: none; width: 18px; height: 18px; margin: 0; }

/* ---- News from CARE ---- */
.my-news-strip { margin: 20px 0 22px; display: grid; gap: 10px; }
.my-news-strip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.my-news-strip-head h2 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; }
.my-news-card { display: grid; gap: 6px; padding: 16px 18px; border: 1px solid var(--line); border-left: 4px solid var(--care-ra4, #2f7476); border-radius: 14px; background: var(--surface); }
.my-news-card.is-pinned, .my-news-item.is-pinned { border-left-color: var(--care-yellow, #e4b500); }
.my-news-card h3 { margin: 0; font-size: 16.5px; color: var(--navy); }
.my-news-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.my-news-pin, .my-news-new { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 650; padding: 2px 8px; border-radius: 999px; }
.my-news-pin { background: color-mix(in srgb, var(--care-yellow, #e4b500) 22%, var(--surface)); color: var(--text); }
.my-news-new { background: color-mix(in srgb, var(--care-ra4, #2f7476) 16%, var(--surface)); color: var(--text); }
.my-news-body { font-size: 14.5px; line-height: 1.6; color: var(--text); overflow-wrap: anywhere; }
.my-news-body p { margin: 0 0 10px; }
.my-news-body p:last-child { margin-bottom: 0; }
.my-news-body ul, .my-news-body ol { margin: 0 0 10px 20px; padding: 0; }
.my-news-body a { color: var(--blue); }
.my-news-body.is-clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.my-news-list { display: grid; gap: 14px; }
.my-news-item { padding: 20px 22px; border-left: 4px solid var(--care-ra4, #2f7476); display: grid; gap: 8px; scroll-margin-top: 90px; }
.my-news-item h2 { margin: 0; font-size: 19px; }

/* ---- Resources ---- */
.my-view-body > * + * { margin-top: 18px; }
.my-res-manage-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; }
.my-res-callout { margin-top: 18px; }
.my-res-callout p { margin: 2px 0 0; }
.my-res-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 12px; }
.my-res-tools .search-input { flex: 1 1 260px; max-width: 380px; }
.my-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.my-chip { padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line-strong, var(--line)); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; font-weight: 560; cursor: pointer; }
.my-chip:hover { border-color: var(--navy); }
.my-chip[aria-pressed="true"] { background: #2F7476; border-color: #2F7476; color: #fff; }
.my-chip:focus-visible { outline: 2px solid var(--blue, #005793); outline-offset: 2px; }
.my-res-list { display: grid; gap: 10px; }
.my-res-item { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 16px 18px; scroll-margin-top: 90px; }
.my-res-item.needs-read { border-color: color-mix(in srgb, var(--care-yellow, #e4b500) 70%, var(--line)); }
.my-res-icon { display: grid; place-items: center; width: 48px; height: 56px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); font-size: 11px; font-weight: 750; letter-spacing: .02em; color: var(--navy); }
.my-res-main { display: grid; gap: 4px; min-width: 0; }
.my-res-main h3 { margin: 0; font-size: 16.5px; color: var(--navy); }
.my-res-main p { margin: 0; font-size: 14px; color: var(--text-2); }
.my-res-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.my-res-type { font-size: 12.5px; font-weight: 650; color: var(--text-3); }
.my-res-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--text-3); margin-top: 2px; }
.my-res-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.my-res-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.my-res-link { display: flex; gap: 14px; padding: 16px 18px; color: inherit; text-decoration: none; }
.my-res-link:hover { border-color: var(--care-ra4, #2f7476); }
.my-res-link strong { color: var(--navy); }
.my-res-link p { margin: 4px 0 6px; font-size: 14px; color: var(--text-2); }
.my-res-link-icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--surface-2); color: var(--care-ra4, #2f7476); }
.my-res-table .table-wrap { border: 0; }
@media (max-width: 720px) { .my-res-table { background: none; border: 0; box-shadow: none; } .my-res-table .cell-actions .btn-row { width: 100%; } .my-res-table .cell-actions .btn-row > .btn { flex: 1 1 auto; justify-content: center; } }
.my-res-h { margin: 0; font-size: 15px; }
.my-res-vis { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.my-res-vis .check { margin: 0; }
.my-res-history { margin: 0; padding-left: 18px; font-size: 14px; display: grid; gap: 4px; }
@media (max-width: 640px) {
  .my-res-item { grid-template-columns: 40px minmax(0, 1fr); }
  .my-res-icon { width: 40px; height: 48px; }
  .my-res-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
}

/* My CARE section menu in dark mode: same rules for an explicit dark choice
   and for the system setting, so the menu adapts either way. */
:root[data-theme="dark"] .my-top::after { background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); }
:root[data-theme="dark"] .my-nav a { color: #B9C7D3; }
:root[data-theme="dark"] .my-nav a .i { color: #93A6B6; }
:root[data-theme="dark"] .my-nav a:hover { color: #FFFFFF; background: rgba(255,255,255,.08); }
:root[data-theme="dark"] .my-nav a:hover .i { color: #D7E2EA; }
:root[data-theme="dark"] .my-nav a:focus-visible { outline: 2px solid #9CC7E4; outline-offset: 2px; }
:root[data-theme="dark"] .my-nav a.active, :root[data-theme="dark"] .my-nav a[data-key].active { background: #E8EFF5; color: #0B1B2B; box-shadow: inset 0 -3px 0 var(--nav-accent, #2A7A9E); }
:root[data-theme="dark"] .my-nav a.active .i { color: var(--nav-accent, #2A7A9E); }
:root[data-theme="dark"] .my-nav a.active .count-pill { background: #B26A00; color: #fff; }
:root[data-theme="dark"] .my-nav a[data-key=""] { --nav-accent: #2A7A9E; }
:root[data-theme="dark"] .my-nav a[data-key="onboarding"] { --nav-accent: #2A7A9E; }
:root[data-theme="dark"] .my-nav a[data-key="agreements"] { --nav-accent: #237A60; }
:root[data-theme="dark"] .my-nav a[data-key="research"] { --nav-accent: #4A5A8A; }
:root[data-theme="dark"] .my-nav a[data-key="events"] { --nav-accent: #2F7476; }
:root[data-theme="dark"] .my-nav a[data-key="feedback"] { --nav-accent: #4E7A22; }
:root[data-theme="dark"] .my-nav a[data-key="news"] { --nav-accent: #8A5A00; }
:root[data-theme="dark"] .my-nav a[data-key="resources"] { --nav-accent: #4A5A8A; }
:root[data-theme="dark"] .my-nav a[data-key="profile"] { --nav-accent: #242F4F; }
:root[data-theme="dark"] .my-nav .count-pill { background: #C77700; color: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .my-top::after { background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); }
  :root:not([data-theme="light"]) .my-nav a { color: #B9C7D3; }
  :root:not([data-theme="light"]) .my-nav a .i { color: #93A6B6; }
  :root:not([data-theme="light"]) .my-nav a:hover { color: #FFFFFF; background: rgba(255,255,255,.08); }
  :root:not([data-theme="light"]) .my-nav a:hover .i { color: #D7E2EA; }
  :root:not([data-theme="light"]) .my-nav a:focus-visible { outline: 2px solid #9CC7E4; outline-offset: 2px; }
  :root:not([data-theme="light"]) .my-nav a.active, :root:not([data-theme="light"]) .my-nav a[data-key].active { background: #E8EFF5; color: #0B1B2B; box-shadow: inset 0 -3px 0 var(--nav-accent, #2A7A9E); }
  :root:not([data-theme="light"]) .my-nav a.active .i { color: var(--nav-accent, #2A7A9E); }
  :root:not([data-theme="light"]) .my-nav a.active .count-pill { background: #B26A00; color: #fff; }
  :root:not([data-theme="light"]) .my-nav a[data-key=""] { --nav-accent: #2A7A9E; }
  :root:not([data-theme="light"]) .my-nav a[data-key="onboarding"] { --nav-accent: #2A7A9E; }
  :root:not([data-theme="light"]) .my-nav a[data-key="agreements"] { --nav-accent: #237A60; }
  :root:not([data-theme="light"]) .my-nav a[data-key="research"] { --nav-accent: #4A5A8A; }
  :root:not([data-theme="light"]) .my-nav a[data-key="events"] { --nav-accent: #2F7476; }
  :root:not([data-theme="light"]) .my-nav a[data-key="feedback"] { --nav-accent: #4E7A22; }
  :root:not([data-theme="light"]) .my-nav a[data-key="news"] { --nav-accent: #8A5A00; }
  :root:not([data-theme="light"]) .my-nav a[data-key="resources"] { --nav-accent: #4A5A8A; }
  :root:not([data-theme="light"]) .my-nav a[data-key="profile"] { --nav-accent: #242F4F; }
  :root:not([data-theme="light"]) .my-nav .count-pill { background: #C77700; color: #fff; }
}

/* CARE V1 · Light theme: section-coloured active items stay recognisable but deep enough for white text (WCAG AA).
   The dark theme keeps its own light pill with dark text. */
:root[data-theme="light"] .my-nav a[data-key="onboarding"].active { background: color-mix(in srgb, var(--care-ra2) 62%, #0F1B2A); }
:root[data-theme="light"] .my-nav a[data-key="agreements"].active { background: color-mix(in srgb, var(--care-ra3) 62%, #0F1B2A); }
:root[data-theme="light"] .my-nav a[data-key="events"].active { background: color-mix(in srgb, var(--care-ra4) 62%, #0F1B2A); }
:root[data-theme="light"] .my-nav a[data-key="feedback"].active { background: color-mix(in srgb, var(--care-ra5) 62%, #0F1B2A); }
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) .my-nav a[data-key="onboarding"].active { background: color-mix(in srgb, var(--care-ra2) 62%, #0F1B2A); }
:root:not([data-theme="dark"]) .my-nav a[data-key="agreements"].active { background: color-mix(in srgb, var(--care-ra3) 62%, #0F1B2A); }
:root:not([data-theme="dark"]) .my-nav a[data-key="events"].active { background: color-mix(in srgb, var(--care-ra4) 62%, #0F1B2A); }
:root:not([data-theme="dark"]) .my-nav a[data-key="feedback"].active { background: color-mix(in srgb, var(--care-ra5) 62%, #0F1B2A); }
}

/* CARE V1 · Ask to join CARE (/my/join) */
.signin-join .signin-card { width: min(100%, 600px); }
@media (min-width: 1101px) { .signin.signin-join { grid-template-columns: minmax(0, .9fr) minmax(560px, 1.1fr); } }
.signin-join .signin-card form.stack { gap: 18px; }
.join-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.join-grid .field.full { grid-column: 1 / -1; }
.join-spacer { min-height: 0; }
.join-trap { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.signin-join-cta a { font-weight: 650; }
@media (max-width: 560px) { .join-grid { grid-template-columns: 1fr; } .join-spacer { display: none; } }
.signin-join .signin-staff-note { display: none; }
.overview-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
@media (max-width: 900px) { .signin-join .rail-demo { display: none; } }

/* Overview: the Research card's top line uses the colour of the selected menu item. */
.rail a[data-workflow="research"]::before { background: var(--brand-navy); }
:root[data-theme="dark"] .rail a[data-workflow="research"]::before { background: #E8EFF5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rail a[data-workflow="research"]::before { background: #E8EFF5; } }

/* Event card: Check-in and Feedback side by side, each with status, when, how and who. */
.ev-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px 18px; border-top: 1px solid var(--line-soft); align-items: stretch; }
.ev-step { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); scroll-margin-top: 88px; }
.ev-step.is-done { background: color-mix(in srgb, var(--care-ra4, #319a86) 7%, var(--surface)); }
.ev-step-head { display: flex; align-items: center; gap: 10px; }
.ev-step-head h4 { flex: 1; margin: 0; font-size: 15px; color: var(--navy); }
.ev-step-icon { width: 30px; height: 30px; display: grid; place-items: center; flex: none; border-radius: 9px; background: var(--surface); border: 1px solid var(--line-soft); color: var(--navy); }
.ev-step-icon .i { width: 16px; height: 16px; }
.ev-step-lead { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text); }
.ev-step-facts { display: grid; gap: 7px; margin: 0; }
.ev-step-facts > div { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; }
.ev-step-facts dt { font-size: 12px; font-weight: 650; color: var(--text-3); padding-top: 1px; }
.ev-step-facts dd { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.ev-step .attendance-member-pills { margin-top: 2px; }
.ev-step-action { margin-top: auto; padding-top: 2px; }
@media (max-width: 720px) {
  .ev-steps { grid-template-columns: 1fr; padding: 12px; }
  .ev-step-facts > div { grid-template-columns: 1fr; gap: 2px; }
  .ev-step-action .btn { width: 100%; justify-content: center; }
}

/* Event journey: Registered → Check-in → Feedback, current step highlighted. */
.ev-journey { list-style: none; margin: 0; padding: 14px 18px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border-top: 1px solid var(--line-soft); counter-reset: none; }
.ev-journey li { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-soft); background: var(--surface); min-width: 0; }
.ev-journey-dot { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 12.5px; font-weight: 700; background: var(--surface-3); color: var(--text-2); }
.ev-journey-dot .i { width: 14px; height: 14px; }
.ev-journey-text { display: flex; flex-direction: column; min-width: 0; }
.ev-journey-text strong { font-size: 13.5px; color: var(--text); }
.ev-journey-text small { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-journey li.is-done .ev-journey-dot { background: color-mix(in srgb, var(--care-ra4, #319a86) 18%, var(--surface)); color: var(--care-ra4, #2f7476); }
.ev-journey li.is-current { border-color: var(--brand-navy); box-shadow: inset 0 0 0 1px var(--brand-navy); background: color-mix(in srgb, var(--brand-navy) 5%, var(--surface)); }
.ev-journey li.is-current .ev-journey-dot { background: var(--brand-navy); color: #fff; }
.ev-journey li.is-missed small, .ev-journey li.is-closed small { color: var(--text-3); }
:root[data-theme="dark"] .ev-journey li.is-current { border-color: #E8EFF5; box-shadow: inset 0 0 0 1px #E8EFF5; }
:root[data-theme="dark"] .ev-journey li.is-current .ev-journey-dot { background: #E8EFF5; color: #0B1B2B; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ev-journey li.is-current { border-color: #E8EFF5; box-shadow: inset 0 0 0 1px #E8EFF5; } :root:not([data-theme="light"]) .ev-journey li.is-current .ev-journey-dot { background: #E8EFF5; color: #0B1B2B; } }
/* The journey line and the step boxes are one section: no rule between them,
   and the boxes keep clear of the line above. */
.ev-journey + .ev-steps { border-top: 0; padding-top: 12px; }
@media (max-width: 720px) { .ev-journey { grid-template-columns: 1fr; padding: 12px 12px 0; gap: 6px; } .ev-journey + .ev-steps { padding-top: 10px; } }
.events-history-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.events-history-details > summary::-webkit-details-marker { display: none; }
.events-history-details > summary strong { font-size: 17px; color: var(--navy); }
/* News on the Overview */
.my-news-more { align-self: start; justify-self: start; padding-left: 0; }
.my-news-earlier > summary { cursor: pointer; font-weight: 600; color: var(--navy); padding: 6px 0; }
.my-news-earlier .my-news-list { display: grid; gap: 10px; margin-top: 8px; }

/* Sign-in page: the platform QR, to continue on a phone. White card in every
   theme so cameras read it. */
.signin-qr { width: min(100%, 560px); display: flex; align-items: center; gap: 22px; padding: 18px 20px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.72); color: var(--text-2); font-size: 13.5px; line-height: 1.45; box-shadow: 0 10px 30px -24px rgba(0,47,90,.35); }
.signin-qr[hidden] { display: none; }
.signin-qr-art { flex: none; width: 168px; height: 168px; padding: 8px; border-radius: 12px; background: #fff; border: 1px solid var(--line-soft); cursor: zoom-in; transition: transform .15s, box-shadow .15s; }
.signin-qr-art:hover { transform: scale(1.03); box-shadow: 0 8px 22px -14px rgba(0,47,90,.45); }
.signin-qr-art svg { width: 100%; height: 100%; display: block; }
.signin-qr strong { display: block; color: var(--navy); font-size: 17px; font-weight: 650; margin-bottom: 8px; }
.signin-qr ol { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 5px; }
.signin-qr-more { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--navy); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.signin-qr-more:hover { border-color: var(--care-ra2); }
@media (prefers-reduced-motion: reduce) { .signin-qr-art { transition: none; } .signin-qr-art:hover { transform: none; } }
:root[data-theme="dark"] .signin-qr { background: rgba(16,29,41,.72); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .signin-qr { background: rgba(16,29,41,.72); } }

/* ---- Member onboarding form: one step at a time ------------------------ */
.obx { max-width: 1080px; }
.obx-who { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 14px; }
.obx-who-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.obx-who-name strong { color: var(--navy); font-size: 15px; }
.obx-who-name span, .obx-who-status span { color: var(--text-3); font-size: 13px; }
.obx-who-status { display: flex; align-items: center; gap: 10px; }
.obx-note { margin: 0 0 16px; }
.obx-intro { max-width: 68ch; margin: 0 0 22px; color: var(--text-2); line-height: 1.55; }
.obx-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; }
.obx-rail { position: sticky; top: calc(var(--gbar-h, 64px) + 18px); }
.obx-steps { list-style: none; margin: 0; padding: 0; position: relative; }
.obx-steps li { position: relative; }
.obx-steps li + li::before { content: ""; position: absolute; left: 21px; top: -10px; height: 20px; width: 2px; background: var(--line); border-radius: 2px; }
.obx-steps li.is-done + li::before { background: var(--care-ra2); }
.obx-steps button { width: 100%; display: flex; align-items: flex-start; gap: 12px; margin: 0 0 4px; padding: 8px 10px 8px 8px; border: 0; border-radius: 12px; background: none; color: var(--text-2); font: inherit; text-align: left; cursor: pointer; }
.obx-steps button:hover { background: var(--surface-3); }
.obx-steps li.is-current button { background: var(--blue-wash); color: var(--navy); }
.obx-dot { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--line-strong, #CBD4DC); background: var(--surface); color: var(--text-3); font-size: 12.5px; font-weight: 700; }
.obx-steps li.is-done .obx-dot { border-color: var(--care-ra2); background: var(--care-ra2); color: #fff; }
.obx-steps li.is-current .obx-dot { border-color: var(--navy); background: var(--navy); color: var(--surface); }
.obx-steps li.is-current.is-done .obx-dot { border-color: var(--navy); background: var(--navy); }
.obx-step-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-top: 3px; }
.obx-step-text strong { font-size: 14px; font-weight: 620; line-height: 1.3; }
.obx-step-text small { font-size: 12.5px; color: var(--text-3); }
.obx-saved { margin: 14px 8px 0; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 12.5px; line-height: 1.45; color: var(--text-3); }
.obx-saved.is-warn { color: var(--amber); }
.obx-meter { display: none; }
.obx-card { overflow: hidden; }
.obx-card-head { padding: 24px 28px 18px; border-bottom: 1px solid var(--line-soft); }
.obx-count { margin: 0 0 4px; font-size: 13px; color: var(--text-3); }
.obx-card-head h2 { margin: 0; font-size: 26px; line-height: 1.2; color: var(--navy); outline: none; }
.obx-card-head h2 + p { max-width: 64ch; margin: 8px 0 0; color: var(--text-2); line-height: 1.5; }
.obx-card-body { padding: 24px 28px 26px; }
.obx-card .form-grid { row-gap: 22px; }
.obx-card .field > label { display: flex; align-items: baseline; gap: 6px; font-weight: 620; color: var(--navy); }
.obx-optional { font-size: 12px; font-weight: 450; color: var(--text-3); }
.obx-card .field .hint { margin-top: 7px; line-height: 1.45; }
.obx-card .choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.obx-card .choice-grid .check { margin: 0; padding: 11px 12px; min-height: 44px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.obx-card .choice-grid .check:hover { border-color: color-mix(in srgb, var(--care-ra2) 42%, var(--line)); }
.obx-card .choice-grid .check:has(input:checked) { border-color: var(--care-ra2); background: var(--blue-wash); }
.obx-card .choice-grid .check input { margin-top: 2px; accent-color: var(--care-ra2); }
.obx-card .choice-grid-dense { overflow: auto; padding: 2px 4px 2px 2px; align-content: start; }
.obx-card .choice-filter { position: relative; max-width: 320px; margin-bottom: 10px; }
.obx-picked { margin-top: 8px; font-size: 13px; color: var(--navy); line-height: 1.45; }
.obx-picked:empty { display: none; }
.obx-step-err { margin-top: 20px; }
.obx-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 28px; border-top: 1px solid var(--line-soft); background: var(--surface-2); }
.obx-nav .btn-primary { min-height: 42px; padding-inline: 18px; }
/* Check & submit */
.obx-sum + .obx-sum { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.obx-sum-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.obx-sum-head h3 { margin: 0; font-size: 16px; color: var(--navy); }
.obx-sum-head .btn { margin-left: auto; }
.obx-sum-flag { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--amber); }
.obx-sum dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.obx-sum dl > div { min-width: 0; }
.obx-sum dt { font-size: 12.5px; color: var(--text-3); }
.obx-sum dd { margin: 2px 0 0; color: var(--text); overflow-wrap: anywhere; line-height: 1.45; }
.obx-sum .is-missing dd { color: var(--amber); font-weight: 600; }
.obx-what-next { margin: 28px 0 0; padding: 18px 20px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line-soft); }
.obx-what-next h3 { margin: 0 0 12px; font-size: 15px; color: var(--navy); }
.obx-after { list-style: none; counter-reset: obx; margin: 0; padding: 0; display: grid; gap: 12px; }
.obx-after li { counter-increment: obx; display: grid; grid-template-columns: 26px 1fr; column-gap: 12px; }
.obx-after li::before { content: counter(obx); grid-row: span 2; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--blue-wash); color: var(--navy); font-size: 12.5px; font-weight: 700; }
.obx-after strong { font-size: 14px; color: var(--text); }
.obx-after span { font-size: 13px; color: var(--text-3); line-height: 1.45; }
.obx-confirm { margin: 22px 0 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; }
.obx-confirm:has(input:checked) { border-color: var(--care-ra2); background: var(--blue-wash); }
.obx-review #err { margin-top: 14px; }
.obx-locked .obx-card-body { padding-top: 22px; }
/* Sent */
.obx-done { max-width: 680px; margin: 0 auto; }
.obx-done-body { padding: 40px 32px 34px; text-align: center; }
.obx-done-mark svg { width: 44px; height: 44px; color: var(--care-ra2); }
.obx-done-body h2 { margin: 12px 0 8px; color: var(--navy); }
.obx-done-body > p { max-width: 52ch; margin: 0 auto 22px; color: var(--text-2); line-height: 1.55; }
.obx-next { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; margin: 0 0 14px; text-align: left; border: 1px solid var(--care-ra2); border-radius: 14px; background: var(--blue-wash); }
.obx-next div { display: flex; flex-direction: column; gap: 2px; }
.obx-next strong { color: var(--navy); }
.obx-next span { font-size: 13px; color: var(--text-2); }
@media (max-width: 900px) {
  .obx-layout { grid-template-columns: 1fr; gap: 12px; }
  .obx-rail { position: static; }
  .obx-steps { display: none; }
  .obx-saved { margin: 0; padding: 0; border: 0; }
  .obx-meter { display: block; margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--navy); }
  .obx-meter-bar { height: 6px; margin-top: 8px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
  .obx-meter-bar i { display: block; height: 100%; width: 0; background: var(--care-ra2); border-radius: 6px; transition: width .25s; }
  .obx-layout { display: flex; flex-direction: column-reverse; }
  .obx-rail { order: 0; }
}
@media (max-width: 640px) {
  .obx-card-head, .obx-card-body { padding-inline: 18px; }
  .obx-nav { padding: 14px 18px; }
  .obx-card-head h2 { font-size: 22px; }
  .obx-card .choice-grid, .obx-sum dl { grid-template-columns: 1fr; }
  .obx-nav .btn-primary { flex: 1; justify-content: center; }
  .obx-nav > span:empty { display: none; }
  .obx-next { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) { .obx-meter-bar i { transition: none; } }
.obx-card .choice-grid .check small { margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--text-3); }
.obx-other { margin-top: 12px; display: grid; gap: 10px; }
.obx-other-box { display: grid; gap: 6px; max-width: 560px; padding: 12px 14px; border: 1px dashed var(--line-strong, #CBD4DC); border-radius: 12px; }
.obx-other-box > label { font-weight: 620; color: var(--navy); font-size: 13.5px; }
/* Rows of a scrolling option list keep their full height (titles under short names wrap). */
.obx-card .choice-grid, .onboarding-section .choice-grid { grid-auto-rows: max-content; }
.obx-card .choice-grid .check > span { min-width: 0; overflow-wrap: anywhere; }
.obx-card .choice-grid-dense { max-height: 360px; }
/* Membership at a glance: teams grouped by type, names wrap inside the card. */
.overview-team { display: grid; gap: 10px; }
.overview-team-row { display: grid; gap: 6px; min-width: 0; }
.overview-team-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.overview-team-tags { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.overview-team-tag { max-width: 100%; padding: 4px 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line-soft); color: var(--navy); font-size: 13px; font-weight: 550; line-height: 1.35; overflow-wrap: anywhere; }
.profile-team-tag { max-width: 100%; }
.profile-team-tag b { overflow-wrap: anywhere; }

/* Onboarding: suggestions from the CARE research structure (never ticked automatically) */
.obx-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--care-ra2, #2f6f9f) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--care-ra2, #2f6f9f) 22%, var(--surface)); font-size: 13px; color: var(--text-2); }
.obx-suggest[hidden] { display: none; }
.obx-suggest > .i { color: var(--care-ra2, #2f6f9f); flex: none; }
.obx-suggest-text { font-weight: 600; color: var(--navy); }
.obx-suggest-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.obx-suggest-add { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 560; cursor: pointer; }
.obx-suggest-add:hover { border-color: var(--care-ra2, #2f6f9f); color: var(--navy); }
.obx-suggest-add:focus-visible { outline: 2px solid var(--care-ra2, #2f6f9f); outline-offset: 2px; }
.obx-suggest-add .i { width: 12px; height: 12px; }
.obx-suggest-all { padding: 4px 6px; border: 0; background: none; color: var(--navy); font: inherit; font-size: 12.5px; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.obx-suggest-all:focus-visible { outline: 2px solid var(--care-ra2, #2f6f9f); outline-offset: 2px; border-radius: 6px; }

/* Card actions fill their card: a button at the top or bottom of a card is as
   wide as the card, several buttons share the width equally, and on phones they
   stack. Card headers, empty states and rows of icon buttons keep their size. */
body.my :is(.card, .ev-step) :is(.btn-row, .ev-step-action):not(:has(.btn-icon)):not(.keep-inline):not(.card-head *):not(.empty *) { display: flex; flex-wrap: wrap; }
body.my :is(.card, .ev-step) :is(.btn-row, .ev-step-action):not(:has(.btn-icon)):not(.keep-inline):not(.card-head *):not(.empty *) > .btn { flex: 1 1 0; justify-content: center; }
@media (max-width: 600px) {
  body.my :is(.card, .p-main, .my-main) .btn-row:not(:has(.btn-icon)):not(.keep-inline) { flex-wrap: wrap; align-items: stretch; }
  body.my :is(.card, .p-main, .my-main) .btn-row:not(:has(.btn-icon)):not(.keep-inline) > :is(.btn, a.btn, button.btn) { flex: 1 1 auto; justify-content: center; }
}
/* Filter chips and check-in pills fill every row they wrap onto. */
.my-chips > *, .public-chips > * { flex: 1 1 auto; justify-content: center; }
.attendance-member-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.attendance-member-pills > :last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 360px) { .attendance-member-pills { grid-template-columns: 1fr; } }
.attendance-member-pills > * { justify-content: center; }
@media (max-width: 600px) {
  /* Section titles: title and count on one line, the explanation below. */
  .group-title { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 4px; }
  .group-title > small { grid-row: 2; grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  /* Status tiles: an odd last tile spans the row instead of standing alone. */
  .rail > a:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Single-task participant pages (check-in, feedback link): a reading-width
   column aligned with the page title, instead of a card across the screen. */
.my-main.p-narrow > * { max-width: 760px; }
/* Tablets: all My CARE sections fit on one line without a hidden scroll. */
@media (min-width: 761px) and (max-width: 940px) {
  .my-nav { gap: 2px; }
  .my-nav a { padding: 8px 12px; gap: 6px; }
  .my-nav a > .i { display: none; }
}
/* Four-section My CARE (2026-11-07): surveys and records are reached from Overview and Profile. */
.overview-surveys-link { margin: 12px 0 0; }
.overview-surveys-link a, .profile-records a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.profile-records { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 18px; }

/* Overview: seed funding (own applications, own reviews, announced calls) */
.overview-panel.overview-seed { min-height: 0; height: auto; margin-bottom: 16px; }
.overview-seed-h { margin: 6px 0 2px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.overview-seed-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; }
.overview-seed .overview-seed-list:last-child { margin-bottom: 0; }
.overview-seed-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.overview-seed-list li:first-child { border-top: 0; }
.overview-seed-list li > div { flex: 1 1 240px; display: grid; gap: 2px; min-width: 0; }
.overview-seed-list li span { font-size: var(--fs-sm); color: var(--text-2); }
/* My CARE › Grants (Early-Career Grants) */
.grants-list { list-style: none; margin: 0; padding: 0; display: grid; }
.grants-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.grants-list li:first-child { border-top: 0; padding-top: 0; }
.grants-list li > div:first-child { flex: 1 1 260px; display: grid; gap: 2px; min-width: 0; }
.grants-type { justify-self: start; padding: 1px 8px; border-radius: 999px; background: var(--accent-wash); color: var(--accent-ink); font-size: 12px; font-weight: 600; }
.grants-elig, .grants-calls { margin-bottom: 16px; }
/* My CARE › Committee (project reports to read) */
.cm-list, .cm-table { list-style: none; margin: 0; padding: 0; }
.cm-list li + li { border-top: 1px solid var(--line-soft); }
.cm-rounds .card-head { padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.cm-list a { display: grid; grid-template-columns: minmax(0, 1fr) 240px 150px 16px; align-items: center; gap: 8px 20px; padding: 14px 24px; color: inherit; text-decoration: none; }
.cm-list a:hover { background: var(--surface-2); }
.cm-main, .cm-proj { display: grid; gap: 2px; min-width: 0; }
.cm-main span, .cm-proj span, .cm-file small { font-size: var(--fs-sm); color: var(--text-2); }
.cm-progress { display: grid; gap: 4px; font-size: var(--fs-sm); color: var(--text-2); }
.cm-bar { display: block; height: 6px; border-radius: 999px; background: var(--line-soft); overflow: hidden; min-width: 80px; }
.cm-bar > span { display: block; height: 100%; background: var(--care-ra2); border-radius: inherit; }
.cm-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; font-weight: 600; }
.cm-head { margin-bottom: 16px; }
.cm-head .card-body { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
.cm-head-main { flex: 1 1 100%; }
.cm-head-main h2 { margin: 0 0 4px; }
.cm-head-main p { margin: 0; color: var(--text-2); white-space: pre-line; }
.cm-facts { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0; }
.cm-facts dt { font-size: 12.5px; color: var(--text-2); }
.cm-facts dd { margin: 2px 0 0; font-weight: 600; display: grid; gap: 6px; }
.cm-head .card-body > .btn { flex: 0 0 auto; }
.cm-filter { padding-bottom: 14px; }
.cm-list a > .badge { justify-self: start; }
.cm-n { color: var(--text-3); font-variant-numeric: tabular-nums; }
.cm-row { display: grid; grid-template-columns: minmax(0, 1.4fr) 170px minmax(0, 1fr) 120px; align-items: center; gap: 8px 20px; padding: 12px 24px; border-top: 1px solid var(--line-soft); }
.cm-state { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-act { display: flex; justify-content: flex-end; }
.my-chip[aria-pressed="true"] .cm-n { color: inherit; opacity: .75; }
.cm-file { display: grid; gap: 2px; min-width: 0; }
.cm-file a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; min-width: 0; }
.cm-file a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-none { padding: 16px 24px; border-top: 1px solid var(--line-soft); }
@media (max-width: 760px) {
  .cm-list a { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 16px; }
  .cm-list a > .badge { justify-self: end; }
  .cm-list a .cm-progress { grid-column: 1 / -1; grid-row: 2; }
  .cm-list a > .i { display: none; }
  .cm-row { grid-template-columns: minmax(0, 1fr); padding: 12px 16px; }
  .cm-act { justify-content: flex-start; }
}
.grants-calls .card-head { padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; }
.cm-filter .my-chips { flex-wrap: nowrap; overflow-x: auto; }
.cm-filter .my-chip { flex: 0 0 auto; }