/* Live product demonstration embedded in the hero.
   Every colour comes from the site's theme tokens, so the dashboard turns
   dark with the page — something a recorded video could never do. */

/* The window always fits its column — it is never clipped and never bleeds past
   the screen edge. Because that column is ~1000px beside the hero copy but the
   full shell when stacked, the layout inside responds to the WINDOW's own width
   (container queries), not the viewport's. A viewport query cannot tell the two
   apart and was collapsing a roomy window into its phone layout. */
.dash-wrap {
  position: relative; width: 100%; margin: 0;
  container-type: inline-size; container-name: dash;
}
/* fit-to-width (set by dash.js on phones and tablets): the window is built at
   its design width and scaled down whole, so nothing reflows and nothing is
   cut off. container-type goes back to normal here — the reflow tiers below
   must not fire, since the window really is 1040px wide inside the scale.
   Those tiers stay as the no-JS fallback. */
.dash-wrap.fit { container-type: normal; }
.dash-wrap.fit .dash {
  width: var(--fit-w, 1040px);
  transform: scale(var(--fit-s, 1));
  transform-origin: top left;
}
/* phone tier: the sidebar's 260px would cost more than it is worth once every
   pixel of design width is paid for twice over by the scale */
.dash-wrap.fit.compact .d-side { display: none; }

.dash {
  position: relative; isolation: isolate;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface); overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,          /* top highlight — the "brightening" */
    0 30px 70px -20px rgba(var(--sh), .22),
    0 8px 24px -12px rgba(var(--sh), .14);
}
:root[data-theme="dark"] .dash {
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 30px 70px -20px rgba(0,0,0,.7),
    0 8px 24px -12px rgba(0,0,0,.5);
}
/* soft sheen across the top of the window */
.dash::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 180px; z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, var(--brand-soft), transparent 70%);
  opacity: .5;
}

/* ── window chrome ──────────────────────────────────────────────────── */
.d-bar {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 14px;
  height: 44px; padding: 0 14px;
  border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.d-dots { display: flex; gap: 7px; }
.d-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.d-dots i:nth-child(1) { background: #ff5f57; }
.d-dots i:nth-child(2) { background: #febc2e; }
.d-dots i:nth-child(3) { background: #28c840; }
.d-url {
  flex: 1; max-width: 380px; padding: 5px 12px; border-radius: 7px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: 11.5px; color: var(--muted);
}
.d-url b { color: var(--ink); font-weight: 600; }
.d-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 600; color: var(--muted);
}
.d-live i {
  width: 7px; height: 7px; border-radius: 50%; background: #27b062;
  box-shadow: 0 0 0 0 rgba(39,176,98,.55); animation: pulse 2.2s infinite;
}
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(39,176,98,0); } 100% { box-shadow: 0 0 0 0 rgba(39,176,98,0); } }
.d-play {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); font: inherit; font-size: 11.5px; font-weight: 600;
}
.d-play:hover { border-color: var(--line-strong); }
.d-play svg { width: 11px; height: 11px; fill: currentColor; }
.d-play .ic-play { display: none; }
.d-play[aria-pressed="false"] .ic-pause { display: none; }
.d-play[aria-pressed="false"] .ic-play { display: block; }

.d-body { position: relative; z-index: 1; display: flex; min-height: 470px; }

/* ── sidebar ────────────────────────────────────────────────────────── */
.d-side {
  width: 208px; flex: none; padding: 14px 10px;
  border-right: 1px solid var(--line); background: var(--surface);
}
.d-ws { display: flex; align-items: center; gap: 9px; padding: 4px 8px 14px; }
.d-mark {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 800;
}
.d-wsn { font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.d-wsn em { display: block; font-style: normal; font-size: 10.5px; font-weight: 400; color: var(--muted); }
.d-nav { display: grid; gap: 2px; }
.d-nav button {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 9px; border: 0; border-radius: 8px; cursor: pointer;
  background: none; color: var(--muted); font: inherit; font-size: 12.5px; text-align: left;
  transition: background .2s, color .2s;
}
.d-nav button:hover { background: var(--hover); color: var(--ink); }
.d-nav button[aria-selected="true"] { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.d-nav .mi { width: 18px; height: 18px; border-radius: 5px; background: none; }
.d-nav .mi::after { inset: 1px; background: currentColor; }
.d-nav button b { margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--faint); }
.d-sh {
  margin: 16px 9px 6px; font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); font-weight: 700;
}

/* ── main + toolbar ─────────────────────────────────────────────────── */
.d-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.d-tools {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.d-crumb { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.d-crumb b { color: var(--ink); font-weight: 700; }
.d-filters { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.d-chip {
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); font: inherit; font-size: 11.5px; font-weight: 600;
  transition: all .18s;
}
.d-chip:hover { border-color: var(--line-strong); color: var(--ink); }
.d-chip[aria-pressed="true"] {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.d-view { flex: 1; min-height: 0; padding: 14px 16px 18px; overflow: hidden; }
.d-view.swap { animation: dswap .42s var(--ease) both; }
@keyframes dswap { from { opacity: 0; transform: translateY(6px); } }

/* ── board ──────────────────────────────────────────────────────────── */
.d-board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; height: 100%; }
.d-col { display: flex; flex-direction: column; min-width: 0; }
.d-ch { display: flex; align-items: center; gap: 7px; padding: 0 3px 9px; }
.d-pill {
  font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 5px; white-space: nowrap;
}
.d-cnt { font-size: 10.5px; font-weight: 700; color: var(--faint); }
.d-cards { display: flex; flex-direction: column; gap: 8px; }
.d-card {
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 11px;
  background: var(--surface); transition: border-color .2s, box-shadow .2s, transform .2s var(--ease);
  animation: dcard .34s var(--ease) both;
}
@keyframes dcard { from { opacity: 0; transform: translateY(6px) scale(.99); } }
.d-card:hover {
  border-color: var(--line-strong); transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(var(--sh), .22);
}
.d-tag { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.d-tag i { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.d-tag span { font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.d-dept {
  margin-left: auto; font-size: 9px; font-weight: 800; letter-spacing: .05em;
  padding: 2px 5px; border-radius: 4px;
}
.d-t { font-size: 12px; line-height: 1.35; font-weight: 500; color: var(--ink); margin: 0 0 8px; }
.d-meter { height: 3px; border-radius: 2px; background: var(--line-soft); overflow: hidden; margin-bottom: 8px; }
.d-meter i { display: block; height: 100%; border-radius: 2px; background: var(--brand); transition: width .7s var(--ease); }
.d-foot { display: flex; align-items: center; gap: 6px; }
.d-due { font-size: 10px; color: var(--muted); background: var(--surface-2); padding: 3px 7px; border-radius: 5px; }
.d-av { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; margin-left: auto; border: 1.5px solid var(--surface); }

/* ── rows (mentorship / publications) ───────────────────────────────── */
.d-rows { display: flex; flex-direction: column; gap: 8px; }
.d-row {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px;
  background: var(--surface); transition: border-color .2s, box-shadow .2s;
  animation: dcard .34s var(--ease) both;
}
.d-row:hover { border-color: var(--line-strong); box-shadow: 0 8px 20px -10px rgba(var(--sh), .2); }
.d-who { display: flex; align-items: center; gap: 9px; width: 190px; flex: none; }
.d-who img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.d-wn { font-size: 12px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.d-wn em { display: block; font-style: normal; font-size: 10.5px; font-weight: 400; color: var(--muted); }
.d-rt { flex: 1; min-width: 0; font-size: 12px; color: var(--ink); }
.d-rt em { display: block; font-style: normal; font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.d-badge {
  font-size: 10px; font-weight: 700; padding: 4px 9px; border-radius: 999px; white-space: nowrap;
}
.d-prog { width: 108px; flex: none; }

/* ── training cards ─────────────────────────────────────────────────── */
.d-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.d-tc {
  border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--surface);
  animation: dcard .34s var(--ease) both;
}
.d-tc h4 { margin: 8px 0 4px; font-size: 13px; font-weight: 700; color: var(--ink); }
.d-tc p { margin: 0 0 12px; font-size: 11px; color: var(--muted); line-height: 1.45; }
.d-seats { display: flex; align-items: center; justify-content: space-between; font-size: 10.5px; color: var(--muted); }
.d-seats b { color: var(--ink); font-weight: 700; }

/* ── analytics ──────────────────────────────────────────────────────── */
.d-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.d-kpi { border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px; background: var(--surface); }
.d-kpi .k { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.d-kpi .v { font-size: 24px; font-weight: 700; margin-top: 5px; letter-spacing: -.02em; color: var(--ink); }
.d-kpi .d { font-size: 10.5px; font-weight: 600; color: #27b062; margin-top: 2px; }
.d-panes { display: grid; grid-template-columns: 1.5fr 1fr; gap: 10px; }
.d-pane { border: 1px solid var(--line); border-radius: 11px; padding: 14px; background: var(--surface); }
.d-pane h5 { margin: 0 0 12px; font-size: 12px; font-weight: 700; color: var(--ink); }
.d-chart { display: flex; align-items: flex-end; gap: 9px; height: 128px; }
/* chart column — renamed from .d-bar, which collided with the window title bar */
.d-bcol { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.d-bg { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.d-bv {
  width: 100%; border-radius: 4px 4px 2px 2px; height: 0;
  background: linear-gradient(180deg, var(--brand-2), var(--brand));
  transition: height .8s var(--ease);
}
.d-bl { font-size: 9.5px; color: var(--faint); font-weight: 600; }
.d-split { display: grid; gap: 9px; }
.d-sr { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); }
.d-sr i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.d-sr b { margin-left: auto; color: var(--ink); font-weight: 700; }

/* ── empty state when a filter matches nothing ──────────────────────── */
.d-empty {
  grid-column: 1 / -1; display: grid; place-items: center;
  padding: 40px 0; color: var(--faint); font-size: 12.5px;
}

/* ── ghost cursor for the auto-demo ─────────────────────────────────── */
.d-cursor {
  position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none;
  display: flex; align-items: flex-start; opacity: 0;
  transition: opacity .3s;
}
.d-cursor.on { opacity: 1; }
.d-cursor svg { width: 17px; height: 17px; filter: drop-shadow(0 2px 4px rgba(var(--sh), .3)); }
.d-cursor span {
  margin: 10px 0 0 -2px; padding: 3px 9px; border-radius: 999px;
  background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .d-card, .d-row, .d-tc, .d-view.swap { animation: none; }
  .d-live i { animation: none; }
}

/* ── overlay: everything in motion is clipped to the window ──────────── */
.d-fx { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; border-radius: 16px; }
.d-cur { position: absolute; left: 0; top: 0; display: flex; align-items: flex-start; z-index: 40; }
.d-cur svg { width: 17px; height: 17px; flex: none; filter: drop-shadow(0 2px 4px rgba(var(--sh), .35)); }
.d-cur span {
  margin: 10px 0 0 -2px; padding: 3px 9px 3px 3px; border-radius: 999px;
  color: #fff; font-size: 10.5px; font-weight: 700; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
  box-shadow: 0 4px 12px rgba(var(--sh), .28);
}
.d-cur span img { width: 15px; height: 15px; border-radius: 50%; object-fit: cover; }
.d-rip { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid currentColor; }

/* card in flight + the gap it leaves and the gap it lands in */
.d-card.drag { position: absolute; z-index: 30; margin: 0; box-shadow: 0 20px 44px -12px rgba(var(--sh), .34); }
.d-ph {
  border-radius: 10px; background: var(--surface-2); border: 1.5px dashed var(--line-strong);
  height: 0; overflow: hidden; flex: none;
  transition: height .3s var(--ease), opacity .26s;
}
.d-col.target .d-pill { box-shadow: 0 0 0 3px var(--brand-soft); }
.d-card.hov, .d-row.hov, .d-tc.hov { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.d-chip.hov { border-color: var(--brand); color: var(--brand); }
.d-nav button.hov { background: var(--hover); color: var(--ink); }

/* ── session scoring ────────────────────────────────────────────────── */
.d-stars { display: flex; gap: 3px; width: 92px; flex: none; }
.d-star { width: 14px; height: 14px; }
.d-star path { fill: var(--line-strong); transition: fill .28s var(--ease); }
.d-star.on path { fill: #f5a524; }

/* ── cohort enrolment chip ──────────────────────────────────────────── */
.d-enrol {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 11px;
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line);
  font-size: 10.5px; font-weight: 700; color: var(--muted);
  transition: all .3s var(--ease);
}
.d-enrol i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--line-strong); transition: all .3s; }
.d-enrol.on { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.d-enrol.on i { background: var(--brand); border-color: var(--brand); }

/* keep the board from ever clipping a column */
.d-body { min-height: 512px; }
.d-view { overflow: visible; }

/* ── inert: a demonstration, not a control surface ──────────────────── */
.d-body, .d-fx, .d-toasts { pointer-events: none; user-select: none; }
.d-play { pointer-events: auto; }          /* the one real control: play / pause */

/* ── advanced chrome ────────────────────────────────────────────────── */
.d-search {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 8px; min-width: 0;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 11.5px; color: var(--faint); white-space: nowrap; overflow: hidden;
}
.d-search svg { width: 13px; height: 13px; flex: none; }
.d-search kbd {
  margin-left: 6px; padding: 1px 5px; border-radius: 4px;
  border: 1px solid var(--line); background: var(--surface);
  font: inherit; font-size: 10px; color: var(--muted);
}
.d-presence { display: flex; }
.d-presence img {
  width: 22px; height: 22px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--surface); margin-left: -7px;
}
.d-presence img:first-child { margin-left: 0; }
.d-bell { position: relative; color: var(--muted); display: inline-flex; }
.d-bell svg { width: 16px; height: 16px; }
.d-bell i {
  position: absolute; top: -5px; right: -6px; min-width: 14px; height: 14px;
  border-radius: 99px; background: var(--brand); color: #fff;
  font-size: 9px; font-weight: 800; font-style: normal;
  display: grid; place-items: center; padding: 0 3px;
}

/* ── activity feed + capacity ───────────────────────────────────────── */
.d-feed { list-style: none; margin: 0; padding: 0 4px; display: grid; gap: 9px; }
.d-feed li {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 10.5px; line-height: 1.4; color: var(--muted);
  animation: dfeed .4s var(--ease) both;
}
@keyframes dfeed { from { opacity: 0; transform: translateY(-4px); } }
.d-feed img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex: none; margin-top: 1px; }
.d-feed b { color: var(--ink); font-weight: 600; }
.d-usage { margin: 16px 4px 0; }
.d-ul { display: flex; justify-content: space-between; font-size: 10px; color: var(--faint); margin-bottom: 5px; }
.d-ul b { color: var(--ink); font-weight: 700; }

/* ── toasts ─────────────────────────────────────────────────────────── */
.d-toasts { position: absolute; right: 14px; bottom: 14px; z-index: 20; display: grid; gap: 8px; justify-items: end; }
.d-toast {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px 9px 10px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 12px 30px -10px rgba(var(--sh), .32);
  font-size: 11.5px; color: var(--ink); white-space: nowrap;
  animation: dtoast .4s var(--ease) both;
}
.d-toast img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.d-toast em { font-style: normal; color: var(--muted); }
@keyframes dtoast { from { opacity: 0; transform: translateX(14px) scale(.97); } }
.d-toast.out { animation: dtout .34s ease-in both; }
@keyframes dtout { to { opacity: 0; transform: translateX(10px) scale(.98); } }

/* nav is display-only now */
.d-nav span[data-view] {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 9px; border-radius: 8px;
  color: var(--muted); font-size: 12.5px;
  transition: background .25s, color .25s;
}
.d-nav span[aria-selected="true"] { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.d-nav span b { margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--faint); }
.d-nav span[aria-selected="true"] b { color: var(--brand); }
.d-chip { cursor: default; }

/* ── manuscript card round line ─────────────────────────────────────── */
.d-round { margin: 0 0 8px; font-size: 10.5px; color: var(--muted); font-weight: 600; }

/* ── journal cards ──────────────────────────────────────────────────── */
.d-jt { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.d-jm { width: 38px; height: 38px; border-radius: 9px; flex: none; display: grid; place-items: center;
  color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .02em; }
.d-jn { font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.d-jn em { display: block; font-style: normal; font-size: 10.5px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.d-jstats { display: flex; gap: 18px; margin-bottom: 12px; }
.d-jstats span { display: block; font-size: 9px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.d-jstats b { display: block; font-size: 16px; font-weight: 700; color: var(--ink); margin-top: 2px; }

/* ── co-author cards ────────────────────────────────────────────────── */
.d-ac { display: flex; align-items: center; gap: 13px; }
.d-aav { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; }
.d-ainfo { min-width: 0; }
.d-ac h4 { margin: 0; font-size: 13px; font-weight: 700; color: var(--ink); }
.d-ac p { margin: 2px 0 0; font-size: 10.5px; color: var(--muted); }
.d-amet { display: flex; gap: 14px; margin-top: 8px; }
.d-amet div { font-size: 9.5px; color: var(--faint); }
.d-amet b { display: block; font-size: 14px; color: var(--ink); font-weight: 700; }
.d-chk { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 12px;
  opacity: 0; transform: scale(.4); transition: opacity .3s, transform .4s cubic-bezier(.34,1.42,.64,1); }
.d-ac.sel { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.d-ac.sel .d-chk { opacity: 1; transform: none; }

/* ── responsive ─────────────────────────────────────────────────────────
   Last in the file on purpose: these must beat every base rule above.
   Keyed to the WINDOW's own width, so the same window looks right whether it
   sits in the hero's right column or spans the full shell below 1600px.
   Every tier keeps all five stages — narrower ones wrap them onto more rows
   rather than hiding any, so no manuscript ever disappears. */

/* keep the sidebar as long as it can pay for itself — narrow it first, and only
   drop it once the board would be starved either way */
@container dash (max-width: 1199px) {
  .d-side { width: 168px; }
  .d-nav button { gap: 7px; padding: 8px 7px; }
}
@container dash (max-width: 959px) {
  .d-side { display: none; }
}
@container dash (max-width: 899px) {
  .d-grid3, .d-panes { grid-template-columns: 1fr; }
  .d-who { width: 140px; }
  .d-prog { display: none; }
}
@container dash (max-width: 719px) {
  .d-board { grid-template-columns: repeat(3, 1fr); }
  .d-kpis { grid-template-columns: repeat(2, 1fr); }
}
@container dash (max-width: 619px) {
  .d-url, .d-search { display: none; }
  .d-view { padding: 12px 12px 14px; }
  .d-tools { padding: 10px 12px; gap: 8px; }
  .d-rt em { display: none; }          /* submission ids are noise at this size */
  /* the review row's four fixed tracks leave the title ~14px here — break it
     into two lines instead: reviewer + status, then paper + score */
  .d-row { flex-wrap: wrap; gap: 9px 10px; }
  .d-who { width: auto; flex: 1 1 auto; min-width: 0; }
  .d-badge { order: 2; }
  .d-rt { order: 3; flex: 1 1 calc(100% - 102px); }
  .d-stars { order: 4; }
}
@container dash (max-width: 499px) {
  .d-board { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .d-kpis { grid-template-columns: 1fr; }
  .d-body { min-height: 380px; }
}