.progress-page {
  min-height: 100vh;
  background:
    repeating-linear-gradient(4deg, #8c5e3510 0 1px, transparent 1px 11px, #fff7eb55 12px 13px, transparent 14px 31px),
    linear-gradient(122deg, #f2e3cc, #e4c7a4);
}

.progress-page [aria-current="page"] {
  background: #e2e8d0;
  border-color: #7b8564;
  font-weight: 700;
}

.progress-content {
  width: min(100% - 44px, 1130px);
  margin: auto;
  padding-block: clamp(25px, 4vw, 52px) 48px;
}

.progress-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  align-items: center;
  gap: 36px;
  padding: clamp(22px, 4vw, 48px);
  border: 1px solid #c6a888;
  border-radius: 18px;
  background: #fff7eb;
  box-shadow: 0 5px 0 #d8b995, 0 9px 22px #5232191c;
}

.progress-intro .desk-ribbon { margin-bottom: 19px; }
.progress-intro p { max-width: 34em; }
.progress-lead { font-weight: 750; font-size: clamp(1.08rem, 2.25vw, 1.5rem); margin-bottom: 7px; }

.progress-paper-stack { position: relative; min-height: 155px; }
.progress-paper-stack span {
  position: absolute;
  inset: 11px 22px 14px;
  border-radius: 4px 5px 15px 5px;
  box-shadow: 2px 6px 9px #52321937;
}
.progress-paper-stack .progress-paper-back {
  background: #d5dfbb;
  transform: translate(13px, 7px) rotate(11deg);
}
.progress-paper-front {
  display: grid;
  place-content: center;
  text-align: center;
  font-weight: 750;
  color: #624729;
  background: #f6dfa2;
  transform: rotate(-8deg);
}
.progress-paper-front::before,
.progress-note::before {
  content: "";
  position: absolute;
  top: -8px;
  left: calc(50% - 23px);
  width: 46px;
  height: 17px;
  background: #fbf3dbb5;
  border: 1px solid #9b784b30;
  transform: rotate(5deg);
}

.progress-board {
  margin-top: 30px;
  padding: clamp(16px, 3vw, 32px);
  background: #f3e4d0;
  border: 5px solid #b99773;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px #916d4c, 0 6px 16px #52321924;
}
.progress-board-heading { margin-bottom: 18px; }
.progress-board-heading h2 { font-size: clamp(1.16rem, 2.3vw, 1.45rem); }
.progress-board-heading p { margin-top: 4px; }
.progress-board-layout {
  display: grid;
  grid-template-columns: minmax(240px, .85fr) minmax(0, 1.5fr);
  gap: clamp(16px, 3vw, 30px);
  align-items: start;
}
.progress-form {
  display: grid;
  gap: 8px;
  padding: clamp(14px, 2vw, 22px);
  border: 1px solid #c3a789;
  border-radius: 10px;
  background: #fff7eb;
  box-shadow: 1px 3px 6px #52321912;
}
.progress-form label { font-size: .88rem; font-weight: 700; }
.progress-form label span, #message-visibility, #message-status, #board-status { color: #5d4a37; font-size: .79rem; }
.progress-form input, .progress-form textarea {
  min-width: 0;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid #a4876a;
  border-radius: 6px;
  background: #fffdf7;
  color: inherit;
  font: inherit;
  font-size: .85rem;
}
.progress-form input { margin-bottom: 4px; }
.progress-form textarea { resize: vertical; }
.progress-form button {
  justify-self: start;
  gap: 10px;
  margin-top: 4px;
  padding-inline: 15px;
  background: #5b4d34;
  border-color: #5b4d34;
  color: #fff7eb;
  font-weight: 700;
  transition: transform 140ms ease, background-color 140ms ease;
}
.progress-form button:hover:enabled { background: #493c27; }
.progress-form button:active:enabled { transform: translateY(2px); }
#message-status:empty, #board-status:empty { margin: 0; min-height: 0; }
#board-status:not(:empty) { margin-top: 9px; }
#board-retry { margin-top: 10px; }
.progress-wall h3 { font-size: .95rem; }
.progress-notes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 8px;
  margin: 17px 0 0;
  padding: 9px 13px 22px;
  list-style: none;
  isolation: isolate;
}
.progress-note {
  position: relative;
  min-width: 0;
  width: fit-content;
  max-width: min(100%, 16rem);
  padding: 18px 17px 15px;
  border: 1px solid #8f694326;
  border-radius: 3px 5px 15px 4px;
  background: linear-gradient(155deg, #fff7e348, #9564340a), var(--note-paper, #f6dfa2);
  box-shadow: 1px 2px 2px #52321924, 3px 6px 10px #52321929;
  overflow-wrap: anywhere;
  translate: var(--note-x) var(--note-y);
  rotate: var(--note-angle);
  transition: rotate 180ms ease, box-shadow 180ms ease;
}
.progress-note[data-paper="1"] { --note-paper: #d5dfbb; }
.progress-note[data-paper="2"] { --note-paper: #ecd2dd; }
.progress-note::before { left: 18%; transform: rotate(-7deg); }
.progress-note[data-paper="1"]::before { left: 58%; transform: rotate(8deg); }
.progress-note[data-paper="2"]::before { left: 33%; transform: rotate(3deg); }
.progress-note:focus-within {
  z-index: 1;
  rotate: 0deg;
  box-shadow: 3px 7px 14px #52321939;
}
@media (hover: hover) {
  .progress-note:hover {
    z-index: 1;
    rotate: 0deg;
    box-shadow: 3px 7px 14px #52321939;
  }
}
.progress-note p {
  white-space: pre-wrap;
  line-break: strict;
  text-wrap: pretty;
  font-size: .9rem;
}
.progress-note footer { margin-top: 8px; font-size: .72rem; color: #514337; }
.progress-note time { white-space: nowrap; }
.progress-reaction-panel {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: var(--reaction-offset, 0px);
  z-index: 2;
  width: max-content;
  max-width: min(210px, 65vw);
  padding: 5px;
  border: 1px solid #b99773;
  border-radius: 9px;
  background: #fff7eb;
  box-shadow: 2px 5px 10px #52321932;
  visibility: hidden;
  opacity: 0;
  transition: opacity 140ms ease;
}
.progress-note:focus-within .progress-reaction-panel {
  visibility: visible;
  opacity: 1;
}
@media (hover: hover) {
  .progress-note:hover .progress-reaction-panel {
    visibility: visible;
    opacity: 1;
  }
}
.progress-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.progress-reactions button {
  min-width: 44px;
  padding: 3px 7px;
  gap: 4px;
  border-color: #8f694354;
  border-radius: 9px;
  background: #fff7eb65;
  font-size: .78rem;
}
.progress-reactions button[aria-pressed="true"] {
  border-color: #5c6945;
  background: #e3e9cf;
  box-shadow: inset 0 0 0 1px #5c6945;
}
.progress-reactions button span:empty { display: none; }
.progress-reactions[aria-busy="true"] button { cursor: wait; }
.progress-note .progress-reaction-status { font-size: .72rem; }
.progress-reaction-status:not(:empty) { margin-top: 6px; }
.progress-note.is-new { animation: progress-pin 420ms ease-out; }
@keyframes progress-pin {
  from { opacity: .2; transform: translateY(-9px) rotate(-2deg); }
  72% { transform: translateY(2px) rotate(.5deg); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 740px) {
  .progress-content { width: calc(100% - 28px); }
  .progress-intro, .progress-board-layout { grid-template-columns: minmax(0, 1fr); }
  .progress-paper-stack { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .progress-form button, .progress-note.is-new { animation: none; transition: none; }
  .progress-note { transition: none; }
  .progress-reaction-panel { transition: none; }
  .progress-form button:active:enabled { transform: none; }
}