/* The comparison is a directional reading between the two project cards. */
.pk-columns .pk-difference{
  --pk-accent:#365f70;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:transparent;
  color:var(--pk-accent);
  padding:12px 6px;
  gap:5px;
}
.pk-columns .pk-difference::before{display:none;order:2;font:750 34px/1 system-ui,sans-serif;color:var(--pk-accent)}
.pk-columns .pk-difference[data-leader=left]::before{content:"←";display:block}
.pk-columns .pk-difference[data-leader=right]::before{content:"→";display:block}
.pk-columns .pk-difference .pk-caption{order:1;color:inherit;opacity:.72;letter-spacing:.04em}
.pk-columns .pk-difference strong{order:3;color:inherit;font:750 clamp(16px,1.45vw,22px)/1.25 system-ui,sans-serif;overflow-wrap:anywhere}
.pk-columns .pk-difference p{order:4;color:inherit;opacity:.82;font:13px/1.4 system-ui,sans-serif;overflow-wrap:anywhere}
html[data-design=horse] .pk-columns .pk-difference{--pk-accent:#81502b}
html[data-design=forest] .pk-columns .pk-difference{--pk-accent:#315e47}
html[data-design=tech] .pk-columns .pk-difference{--pk-accent:#b4e3ed}

/* Admission periods are a disclosure inside the project card, not a second card. */
.detail-project-table>.detail-data-fold{border:0;border-radius:0;box-shadow:none;background:transparent;margin:7px 0 2px;padding:0}
.detail-project-table>.detail-data-fold>summary{padding:7px 0;color:inherit;font:650 13px/1.4 system-ui,sans-serif}
.detail-project-table>.detail-data-fold[open]{padding-bottom:0}

@media(max-width:680px){
  .pk-columns .pk-difference,.detail-view[data-quality=true] .pk-columns .pk-difference{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;justify-content:stretch;gap:1px 8px;padding:7px 3px!important;text-align:left}
  .pk-columns .pk-difference::before{grid-column:1;grid-row:1/4;font-size:23px;align-self:center}
  .pk-columns .pk-difference[data-leader=left]::before{content:"↑"}
  .pk-columns .pk-difference[data-leader=right]::before{content:"↓"}
  .pk-columns .pk-difference .pk-caption{grid-column:2;grid-row:1;font-size:10px;line-height:1.25}
  .pk-columns .pk-difference strong{grid-column:2;grid-row:2;font-size:16px;line-height:1.3}
  .pk-columns .pk-difference p{grid-column:2;grid-row:3;flex-basis:auto;margin:0;font-size:11px;line-height:1.35}
  .pk-columns .pk-difference:not([data-leader=left]):not([data-leader=right]){grid-template-columns:minmax(0,1fr)}
  .pk-columns .pk-difference:not([data-leader=left]):not([data-leader=right]) :is(.pk-caption,strong,p){grid-column:1}
}