create-pmos 0.53.0 → 0.53.2

package/workspace/public/pm/components.css

@@ -1977,12 +1977,55 @@
   background: var(--sidebar);
 }
 .fr-dock {
-  width: clamp(360px, 36vw, 640px);
+  width: var(--fr-dock-w, clamp(360px, 36vw, 640px));
+  max-width: calc(100vw - 280px);
   border-left: 1px solid var(--border);
 }
+/* 0.53.1: while the dock is open its rail is a thin grip on the dock's left edge that resizes it (dock.js dockGrip). */
+.fr-dock-grip {
+  display: none;
+}
 .fr-body[data-fr-dock="open"] > .fr-dock-rail {
+  width: 6px;
+  padding: 0;
+  border-left: 0;
+  align-items: stretch;
+  background: transparent;
+}
+.fr-body[data-fr-dock="open"] > .fr-dock-rail > :not(.fr-dock-grip) {
   display: none;
 }
+.fr-body[data-fr-dock="open"] .fr-dock-grip {
+  display: block;
+  flex: 1;
+  cursor: col-resize;
+  touch-action: none;
+  outline: none;
+}
+/* The grip shows a 1px line without hover (a touch screen has none); a press, a drag or the keyboard focus fills it. */
+.fr-body[data-fr-dock="open"] .fr-dock-grip {
+  border-left: 1px solid var(--border);
+}
+.fr-dock-grip:focus-visible,
+.fr-dock-grip[data-dragging] {
+  background: var(--ring);
+}
+@media (hover: hover) {
+  .fr-dock-grip:hover {
+    background: var(--ring);
+  }
+}
+/* 0.53.1 Focus: the dock has the whole window; the page, the detail and the rail step aside (they stay mounted). */
+.fr-body[data-fr-dock="max"] > .fr-main,
+.fr-body[data-fr-dock="max"] > .fr-detail,
+.fr-body[data-fr-dock="max"] > .fr-dock-rail {
+  display: none;
+}
+.fr-body[data-fr-dock="max"] > .fr-dock {
+  width: auto;
+  max-width: none;
+  border-left: 0;
+}
 .fr-body[data-fr-dock="rail"] > .fr-dock {
   display: none !important;
 }
@@ -2054,6 +2097,7 @@
   .fr-detail,
   .fr-dock {
     width: auto;
+    max-width: none;
     border-left: 0;
   }
   .fr-set {
@@ -2104,6 +2148,43 @@
   flex-direction: column;
   gap: 8px;
 }
+/* today-goals (G6): the goals for today, above what is owed */
+.td-goals {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px 12px;
+  border: 1px solid var(--border);
+  background: var(--card);
+}
+.td-goals__head { display: flex; align-items: center; }
+.td-goals__list, .td-goal__steps, .td-goal__ctx-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.td-goals__list { counter-reset: goal; }
+.td-goal { display: flex; flex-direction: column; gap: 4px; }
+.td-goal__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
+.td-goal__text { color: var(--foreground); font-weight: 500; }
+.td-goal__text::before { counter-increment: goal; content: counter(goal) ". "; color: var(--muted-foreground); }
+.td-goal--closed .td-goal__text { color: var(--muted-foreground); text-decoration: line-through; }
+.td-goal__ctrls { display: inline-flex; gap: 4px; margin-left: auto; }
+.td-goal__body { display: flex; flex-direction: column; gap: 4px; padding-left: 16px; }
+.td-goal__step { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
+.td-goal__step-title { color: var(--foreground); }
+.td-goal__meta, .td-goal__ctx, .td-goal__none, .td-goals__note, .td-goal__prep-text {
+  color: var(--muted-foreground);
+  font-size: 12px;
+  line-height: 16px;
+  margin: 0;
+}
+.td-goal__prep { display: inline-flex; align-items: center; gap: 8px; }
+.td-goals__bar { display: flex; gap: 8px; }
+.td-goals__sub { margin: 4px 0 0; font-size: 12px; font-weight: 600; color: var(--muted-foreground); }
 .td-card {
   display: flex;
   flex-direction: column;
@@ -2937,6 +3018,789 @@
   opacity: 0;
 }
 
+/* the slides (Run 6): the PM-OS biweekly canvas, 1280 × 720, drawn the same in both themes. Rules that start with
+ * .rp-slide may use the slide type sizes (10px and 24px beside the R27 scale) and rounded corners: the slide is a
+ * printed page that matches the PM-OS deck, not workspace chrome (conformance-gate.js SLIDE_CANVAS). */
+.rp-deck {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  max-width: none;
+  height: 100dvh;
+  max-height: none;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: var(--slide-stage);
+  color: var(--foreground);
+}
+.rp-deck[open] {
+  display: flex;
+  flex-direction: column;
+}
+.rp-deck::backdrop {
+  background: var(--slide-stage);
+}
+.rp-deck__stage {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+.rp-deck__frame {
+  position: relative;
+  width: calc(1280px * var(--rp-scale, 1));
+  height: calc(720px * var(--rp-scale, 1));
+}
+.rp-deck__frame > .rp-slide {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: scale(var(--rp-scale, 1));
+  transform-origin: top left;
+}
+.rp-deck__empty {
+  margin: 0;
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--slide-bg);
+}
+.rp-deck__bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  border-top: 1px solid var(--border);
+  background: var(--background);
+}
+.rp-deck__label {
+  flex: 1 1 auto;
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  font-size: 12px;
+  line-height: 16px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: var(--muted-foreground);
+}
+.rp-deck__count {
+  min-width: 48px;
+  margin: 0;
+  font-family: var(--mono);
+  font-size: 12px;
+  line-height: 16px;
+  text-align: center;
+}
+.rp-slides {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.rp-slides__card {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  box-shadow: 0 0 0 1px var(--border);
+}
+.rp-slides__card > .rp-slide {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: scale(var(--rp-scale, 0.5));
+  transform-origin: top left;
+}
+.rp-slide {
+  position: relative;
+  box-sizing: border-box;
+  width: 1280px;
+  height: 720px;
+  overflow: hidden;
+  background: var(--slide-bg);
+  color: var(--slide-fg);
+  font-family: var(--sans);
+  font-size: 14px;
+  line-height: 20px;
+  font-variant-numeric: tabular-nums;
+}
+/* the slide's own reset: :where() keeps it at the weight of one class, so every .rp-slide__ rule below wins */
+.rp-slide :where(p),
+.rp-slide :where(h2),
+.rp-slide :where(h3),
+.rp-slide :where(h4),
+.rp-slide :where(ul),
+.rp-slide :where(ol) {
+  margin: 0;
+  padding: 0;
+}
+.rp-slide :where(ul),
+.rp-slide :where(ol) {
+  list-style: none;
+}
+.rp-slide__header {
+  position: absolute;
+  top: 25px;
+  left: 33px;
+  right: 33px;
+  display: flex;
+  height: 48px;
+}
+.rp-slide__num {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 48px;
+  height: 48px;
+  border: 1px solid var(--slide-border);
+  border-right: 0;
+  background: var(--slide-bg);
+  color: var(--slide-brand);
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: 800;
+}
+.rp-slide__band {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  min-width: 0;
+  height: 48px;
+  padding: 0 20px;
+  background: var(--slide-brand);
+}
+.rp-slide__title {
+  min-width: 0;
+  overflow: hidden;
+  font-size: 24px;
+  line-height: 32px;
+  font-weight: 700;
+  letter-spacing: -0.6px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: var(--slide-bg);
+}
+.rp-slide__body {
+  position: absolute;
+  top: 93px;
+  left: 33px;
+  right: 33px;
+  bottom: 47px;
+  display: flex;
+  flex-direction: column;
+}
+.rp-slide__footer {
+  position: absolute;
+  top: 681px;
+  left: 33px;
+  right: 33px;
+  display: flex;
+  justify-content: space-between;
+  padding-top: 9px;
+  border-top: 1px solid var(--slide-rule);
+  font-size: 11px;
+  line-height: 16.5px;
+  letter-spacing: 0.275px;
+  color: var(--slide-foot);
+}
+.rp-slide__meta {
+  min-width: 0;
+  overflow: hidden;
+  padding-left: 16px;
+  white-space: pre;
+  text-overflow: ellipsis;
+}
+.rp-slide__empty {
+  margin-top: 8px;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--slide-muted);
+}
+.rp-slide__dash {
+  color: var(--slide-muted);
+}
+.rp-slide__gantt {
+  display: flex;
+  width: 1212px;
+  height: 573px;
+  margin-left: 1px;
+  overflow: hidden;
+  border-radius: 4px;
+  background: var(--slide-secondary);
+}
+.rp-slide__gnames {
+  flex: none;
+  width: 300px;
+  border-right: 1px solid color-mix(in oklab, var(--slide-border) 50%, transparent);
+  background: color-mix(in oklab, var(--slide-bg) 90%, transparent);
+}
+.rp-slide__ghead {
+  display: flex;
+  align-items: flex-end;
+  gap: 10px;
+  box-sizing: border-box;
+  height: 60px;
+  padding: 0 10px 11px;
+}
+.rp-slide__gissues,
+.rp-slide__gdur,
+.rp-slide__glabel {
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 500;
+  color: var(--slide-muted);
+}
+.rp-slide__gissues {
+  flex: 1 1 auto;
+}
+.rp-slide__glabel {
+  box-sizing: border-box;
+  height: 52px;
+  padding: 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.rp-slide__gname {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: 52px;
+  padding: 0 10px;
+  border-bottom: 1px solid color-mix(in oklab, var(--slide-border) 50%, transparent);
+}
+.rp-slide__gchev {
+  display: flex;
+  flex: none;
+  color: var(--slide-muted);
+}
+.rp-slide__gchev svg {
+  width: 12px;
+  height: 12px;
+}
+.rp-slide__ldot {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  margin: 0 6px 0 8px;
+  border-radius: 50%;
+  background: var(--slide-now);
+}
+.rp-slide__ldot--next {
+  background: var(--slide-next);
+}
+.rp-slide__ldot--later {
+  background: var(--slide-later);
+}
+.rp-slide__gtitle {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 500;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.rp-slide__glanes {
+  position: relative;
+  flex: 1 1 auto;
+  overflow: hidden;
+}
+.rp-slide__gcol {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: var(--rp-x);
+  width: var(--rp-w);
+  border-left: 1px solid color-mix(in oklab, var(--slide-border) 60%, transparent);
+}
+.rp-slide__gyear {
+  position: absolute;
+  top: 8px;
+  left: 10px;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--slide-muted);
+}
+.rp-slide__gmonth {
+  position: absolute;
+  top: 37px;
+  left: 0;
+  right: 0;
+  font-size: 12px;
+  line-height: 16px;
+  text-align: center;
+}
+.rp-slide__grows {
+  position: absolute;
+  top: 60px;
+  left: 0;
+  right: 0;
+}
+.rp-slide__gline {
+  position: relative;
+  height: 52px;
+}
+.rp-slide__gbar {
+  position: absolute;
+  top: 2px;
+  left: var(--rp-x);
+  width: var(--rp-w);
+  height: 48px;
+  border-radius: 4px;
+  background: var(--slide-bg);
+  box-shadow: 0 0 0 1px var(--slide-border), 0 1px 2px color-mix(in oklab, var(--slide-fg) 8%, transparent);
+}
+.rp-slide__gseg {
+  --rp-tone: var(--slide-ph-other);
+  position: absolute;
+  top: 14px;
+  left: var(--rp-x);
+  width: var(--rp-w);
+  height: 20px;
+  box-sizing: border-box;
+  border-radius: 2px;
+  background: color-mix(in oklab, var(--rp-tone) 25%, transparent);
+}
+.rp-slide__gseg--intake {
+  --rp-tone: var(--slide-ph-intake);
+}
+.rp-slide__gseg--spec {
+  --rp-tone: var(--slide-ph-spec);
+}
+.rp-slide__gseg--build {
+  --rp-tone: var(--slide-ph-build);
+}
+.rp-slide__gseg--evaluate {
+  --rp-tone: var(--slide-ph-evaluate);
+}
+.rp-slide__gseg--handoff {
+  --rp-tone: var(--slide-ph-handoff);
+}
+.rp-slide__gseg--est {
+  border: 1px dashed color-mix(in oklab, var(--rp-tone) 70%, transparent);
+  background: repeating-linear-gradient(-45deg, color-mix(in oklab, var(--rp-tone) 45%, transparent) 0 3px, color-mix(in oklab, var(--rp-tone) 15%, transparent) 3px 7px);
+}
+.rp-slide__table {
+  overflow: hidden;
+  border-radius: 12px;
+  background: var(--slide-bg);
+  box-shadow: 0 0 0 1px var(--slide-border), 0 1px 2px color-mix(in oklab, var(--slide-fg) 5%, transparent);
+}
+.rp-slide__tr {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 140px 380px 110px;
+  align-items: center;
+  box-sizing: border-box;
+  min-height: 49px;
+  padding: 0 12px;
+  column-gap: 12px;
+  border-top: 1px solid var(--slide-border);
+}
+.rp-slide__tr--head {
+  min-height: 48px;
+  border-top: 0;
+}
+.rp-slide__th {
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 500;
+  letter-spacing: 0.6px;
+  color: var(--slide-muted);
+}
+.rp-slide__th--caps {
+  text-transform: uppercase;
+}
+.rp-slide__td {
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.rp-slide__td--name {
+  font-weight: 500;
+}
+.rp-slide__badge {
+  font-size: 10px;
+  line-height: 15px;
+  font-weight: 600;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+.rp-slide__badge--early {
+  color: var(--slide-muted);
+}
+.rp-slide__mstitle,
+.rp-slide__msdue {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.rp-slide__msdue {
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 500;
+  color: var(--slide-muted);
+}
+.rp-slide__msdue--late,
+.rp-slide__mswhen--late {
+  color: var(--slide-overdue);
+}
+.rp-slide__empty--list {
+  padding: 12px;
+}
+.rp-slide__itop {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 32px;
+}
+.rp-slide__prog {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.rp-slide__track {
+  width: 176px;
+  height: 10px;
+  overflow: hidden;
+  border-radius: 9999px;
+  background: var(--slide-track);
+}
+.rp-slide__fill {
+  width: var(--rp-pct, 0%);
+  height: 100%;
+  border-radius: 9999px;
+  background: var(--slide-primary);
+}
+.rp-slide__pct {
+  font-size: 24px;
+  line-height: 32px;
+  font-weight: 700;
+}
+.rp-slide__msline {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin-top: 15px;
+  padding: 8px 0;
+  border-top: 1px solid var(--slide-border);
+  border-bottom: 1px solid var(--slide-border);
+}
+.rp-slide__mslabel {
+  flex: none;
+  font-size: 12px;
+  line-height: 16px;
+  letter-spacing: 0.3px;
+  text-transform: uppercase;
+  color: var(--slide-muted);
+}
+.rp-slide__mslabel--rel {
+  margin-left: 24px;
+}
+.rp-slide__msname,
+.rp-slide__mswhen {
+  font-weight: 500;
+  white-space: nowrap;
+}
+.rp-slide__cycles {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 32px;
+  margin-top: 15px;
+  min-height: 0;
+}
+.rp-slide__ccol {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.rp-slide__chead {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid var(--slide-border);
+}
+.rp-slide__ctitle {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+}
+.rp-slide__crange {
+  flex: none;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--slide-muted);
+}
+.rp-slide__items {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 8px;
+}
+.rp-slide__item {
+  display: flex;
+  gap: 8px;
+}
+.rp-slide__mark {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 10px;
+  height: 16px;
+  margin-top: 1px;
+}
+.rp-slide__mark--ms::before {
+  content: "";
+  width: 7px;
+  height: 7px;
+  background: var(--slide-ph-spec);
+  transform: rotate(45deg);
+}
+.rp-slide__mark--open::before {
+  content: "";
+  box-sizing: border-box;
+  width: 9px;
+  height: 9px;
+  border: 1.5px solid var(--slide-open);
+  border-radius: 50%;
+}
+.rp-slide__mark--done {
+  color: var(--slide-done);
+}
+.rp-slide__mark--done svg {
+  width: 12px;
+  height: 12px;
+}
+.rp-slide__itext {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+.rp-slide__ititle,
+.rp-slide__isub {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.rp-slide__ititle {
+  line-height: 19.25px;
+}
+.rp-slide__item--ms .rp-slide__ititle {
+  font-weight: 500;
+}
+.rp-slide__isub {
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--slide-muted);
+}
+.rp-slide__subms {
+  font-weight: 500;
+  color: var(--slide-ph-spec);
+}
+.rp-slide__more {
+  margin-top: 0;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 500;
+  color: var(--slide-primary);
+}
+.rp-slide__note {
+  margin-top: auto;
+  padding: 10px 12px;
+  border: 1px solid var(--slide-border);
+  border-radius: 6px;
+  background: color-mix(in oklab, var(--slide-track) 60%, var(--slide-bg));
+}
+.rp-slide__note--info {
+  border-color: color-mix(in oklab, var(--slide-note-info) 30%, transparent);
+  background: color-mix(in oklab, var(--slide-note-info) 6%, var(--slide-bg));
+}
+.rp-slide__note--warning {
+  border-color: color-mix(in oklab, var(--slide-note-warning) 35%, transparent);
+  background: color-mix(in oklab, var(--slide-note-warning) 7%, var(--slide-bg));
+}
+.rp-slide__notehead {
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+  text-transform: uppercase;
+  color: var(--slide-muted);
+}
+.rp-slide__note--info .rp-slide__notehead {
+  color: var(--slide-note-info);
+}
+.rp-slide__note--warning .rp-slide__notehead {
+  color: var(--slide-note-warning);
+}
+.rp-slide__notelist {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-top: 4px;
+}
+.rp-slide__noteli {
+  padding-left: 14px;
+  text-indent: -14px;
+}
+.rp-slide__noteli::before {
+  content: "\2022";
+  display: inline-block;
+  width: 14px;
+  text-indent: 0;
+  color: var(--slide-muted);
+}
+.rp-slide__month {
+  padding: 4px;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  color: var(--slide-muted);
+}
+.rp-slide__mcount {
+  margin-left: 8px;
+  font-weight: 400;
+  color: color-mix(in oklab, var(--slide-muted) 70%, transparent);
+}
+.rp-slide__timeline {
+  display: flex;
+  flex-direction: column;
+  margin: 8px 0 20px;
+}
+.rp-slide__entry {
+  --rp-tone: var(--slide-launch);
+  --rp-wash: var(--slide-launch-bg);
+  position: relative;
+  padding: 0 4px 28px 32px;
+}
+.rp-slide__entry:last-child {
+  padding-bottom: 0;
+}
+.rp-slide__entry:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  top: 22px;
+  bottom: -2px;
+  left: 11px;
+  width: 2px;
+  background: var(--slide-primary);
+}
+.rp-slide__entry--improvement {
+  --rp-tone: var(--slide-improvement);
+  --rp-wash: var(--slide-improvement-bg);
+}
+.rp-slide__entry--fix {
+  --rp-tone: var(--slide-fix);
+  --rp-wash: var(--slide-fix-bg);
+}
+.rp-slide__entry--security {
+  --rp-tone: var(--slide-security);
+  --rp-wash: var(--slide-security-bg);
+}
+.rp-slide__entry--deprecation {
+  --rp-tone: var(--slide-deprecation);
+  --rp-wash: var(--slide-deprecation-bg);
+}
+.rp-slide__entry--beta {
+  --rp-tone: var(--slide-beta);
+  --rp-wash: var(--slide-beta-bg);
+}
+.rp-slide__edot {
+  position: absolute;
+  top: 4px;
+  left: 6px;
+  box-sizing: border-box;
+  width: 12px;
+  height: 12px;
+  border: 2px solid var(--rp-tone);
+  border-radius: 50%;
+  background: var(--rp-tone);
+}
+.rp-slide__erow {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.rp-slide__pill {
+  padding: 2px 10px;
+  border-radius: 9999px;
+  background: var(--rp-wash);
+  color: var(--rp-tone);
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 600;
+  letter-spacing: 1.2px;
+  text-transform: uppercase;
+}
+.rp-slide__area {
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 500;
+  letter-spacing: 1.2px;
+  text-transform: uppercase;
+  color: var(--slide-muted);
+}
+.rp-slide__edate {
+  margin-left: auto;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 500;
+  color: var(--slide-muted);
+}
+.rp-slide__eday {
+  color: color-mix(in oklab, var(--slide-muted) 70%, transparent);
+}
+.rp-slide__etitle {
+  margin-top: 6px;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 600;
+}
+.rp-slide__esum {
+  margin-top: 6px;
+  line-height: 22.75px;
+  color: color-mix(in oklab, var(--slide-fg) 80%, transparent);
+}
+.rp-slide__change {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin-top: 4px;
+}
+.rp-slide__kind {
+  flex: none;
+  font-size: 11px;
+  line-height: 16px;
+  font-weight: 700;
+  letter-spacing: 0.275px;
+  text-transform: uppercase;
+  color: var(--slide-improvement);
+}
+.rp-slide__kind--added {
+  color: var(--slide-launch);
+}
+.rp-slide__kind--fixed {
+  color: var(--slide-fix);
+}
+.rp-slide__kind--deprecated,
+.rp-slide__kind--removed {
+  color: var(--slide-deprecation);
+}
+.rp-slide__kind--security {
+  color: var(--slide-security);
+}
+.rp-slide__ctext {
+  color: color-mix(in oklab, var(--slide-fg) 90%, transparent);
+}
+
 @container (min-width: 720px) {
   .rp-cols {
     grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);