/* Proposal at a glance, and the full text as collapsible parts. */
.glance { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: -6px 0 24px; }
.glance-card {
  --tone: var(--accent);
  position: relative;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 16px 16px 14px;
  border-radius: var(--radius-panel);
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--rule) 70%, transparent);
  box-shadow: var(--shadow-2);
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  transition: transform 220ms var(--ease-spring), box-shadow 220ms;
}
.glance-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--tone); }
.glance-card:hover { transform: translateY(-3px) rotateX(3deg); box-shadow: var(--shadow-3); }
.glance-exact-change { --tone: var(--accent); }
.glance-expected-impact { --tone: var(--good); }
.glance-risk { --tone: var(--bad); }
.glance-success-metric { --tone: var(--kind-decision); } /* #7b3fe4 was 3.0:1 on the dark surface */
.glance-head { font: 720 15px/1.2 var(--display); color: var(--tone); }
.glance-lead {
  font-size: 15.5px;
  line-height: 1.45;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.glance-more { font-size: 13px; font-weight: 700; color: var(--ink-3); }

/* The full text as named, collapsible parts. */
.parts-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 8px; }
.parts-head .section-title { margin: 0; }
.parts { display: grid; gap: 8px; }
.part {
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid transparent;
  transition: background-color 200ms, border-color 200ms, box-shadow 200ms;
}
.part[open] { background: var(--surface); border-color: var(--rule); box-shadow: var(--shadow-1); }
.part:target { animation: part-flash 1.4s var(--ease-out); }
@keyframes part-flash { 0%, 40% { box-shadow: 0 0 0 4px var(--marker); } }
.part > summary {
  display: grid;
  grid-template-columns: minmax(110px, 170px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  cursor: pointer;
  list-style: none;
}
.part > summary::-webkit-details-marker { display: none; }
.part > summary::after {
  content: "";
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  width: 8px;
  height: 8px;
  margin-left: 30px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(-45deg);
  transition: transform 220ms var(--ease-out);
}
.part[open] > summary::after { transform: rotate(45deg); }
.part-label { font: 720 16px/1.25 var(--display); color: var(--ink); }
.part-preview { font-size: 15px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.part[open] .part-preview { visibility: hidden; }
.part-count { grid-column: 3; grid-row: 1; justify-self: start; min-width: 24px; padding: 2px 8px; border-radius: 999px; background: var(--surface-3); font: 700 12.5px/1.4 var(--body); color: var(--ink-2); text-align: center; }
.part-body { padding: 0 18px 16px; }
.part-body > :first-child { margin-top: 0; }
.part::details-content { block-size: 0; overflow: clip; transition: block-size 300ms var(--ease-out), content-visibility 300ms allow-discrete; }
.part[open]::details-content { block-size: auto; }
.part-exact-change .part-label { color: var(--accent); }
.part-risk .part-label, .part-rollback .part-label { color: var(--bad); }
@media (max-width: 639px) {
  .part > summary { grid-template-columns: minmax(0, 1fr) auto; }
  .part-preview { grid-column: 1 / -1; grid-row: 2; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .part[open] .part-preview { display: none; }
  .part > summary::after, .part-count { grid-column: 2; }
}
.parts-intro { margin: 0; font-size: 14.5px; color: var(--ink-3); font-weight: 600; }