.task-follow {
  grid-column: 1 / -1;
  min-width: 0;
  margin-top: clamp(22px, 3vw, 36px);
  overflow: hidden;
  border: 2px solid #243e37;
  border-radius: 14px;
  color: #172d28;
  background: #e6ede4;
  box-shadow: 7px 8px 0 #bdcbb6;
}
/* A saved task leads immediately. The public record decides whether a new
   current task leads or the made desk takes the first turn. */
.task-follow:is([data-task-view="loading"], [data-task-view="waiting"]) { display: none; }
.task-follow * { box-sizing: border-box; }
.task-follow :is(h2,h3,h4,p,a,button) { overflow-wrap: anywhere; }
.task-follow-top, .task-follow-slip-top, .task-follow-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font: 850 .67rem/1.4 ui-monospace, Menlo, monospace;
  letter-spacing: .07em;
}
.task-follow-top { min-height: 35px; padding: 7px clamp(17px, 2.5vw, 26px); color: #fafff4; background: #243e37; }
.task-follow-led { width: 10px; height: 10px; flex: none; border-radius: 50%; background: #e7c475; box-shadow: 0 0 0 4px #ffffff26; }
.task-follow-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .85fr); gap: clamp(15px, 3vw, 34px); padding: clamp(16px, 3vw, 30px); }
.task-follow-main, .task-follow-slip { min-width: 0; }
.task-follow-label { margin: 0 0 5px; color: #37624f; font: 850 .68rem/1.4 ui-monospace, Menlo, monospace; letter-spacing: .08em; }
.task-follow-main > h2 { max-width: 19ch; margin: 0; font-size: clamp(1.9rem, 3.5vw, 3.2rem); letter-spacing: -.055em; line-height: 1; }
.task-follow-main > p:not(.task-follow-label):not(.task-follow-feedback) { max-width: 62ch; margin: 10px 0 17px; font-size: .88rem; line-height: 1.5; }
.task-follow-card { min-width: 0; padding: clamp(15px, 2.2vw, 24px); border: 1px solid #688d77; border-radius: 8px; background: #fffef6; box-shadow: 4px 4px 0 #b8cdb6; }
.task-follow[data-task-view="return"] .task-follow-card { border-width: 2px; border-color: #245a49; box-shadow: 5px 6px 0 #97b49d; }
.task-follow-card-head { color: #3c6d55; }
.task-follow-card-head span:last-child { text-align: right; }
.task-follow-card h3 { margin: 13px 0 6px; font-size: clamp(1.35rem, 2.5vw, 2.1rem); letter-spacing: -.045em; line-height: 1.12; }
.task-follow-card > p:not(.task-follow-status) { max-width: 64ch; margin: 0; font-size: .86rem; line-height: 1.5; }
.task-follow-status { margin: 17px 0 0; padding: 11px 13px; border-left: 4px solid #4f8a66; background: #eaf2df; font-size: .83rem; line-height: 1.45; }
.task-follow[data-task-view="return"] .task-follow-status { border-color: #b17139; background: #fcf0d9; }
.task-follow-result { margin-top: 14px; padding: 12px 14px; border: 1px solid #9aba9e; background: #f0f6eb; }
.task-follow-result strong { color: #315943; font: 850 .64rem/1.4 ui-monospace, Menlo, monospace; letter-spacing: .08em; }
.task-follow-result p { margin: 5px 0 0; font-size: .86rem; line-height: 1.5; }
.task-follow-links, .task-follow-controls, .task-follow-guesses { display: flex; flex-wrap: wrap; gap: 8px; }
.task-follow-guesses[hidden] { display: none; }
.task-follow-links { margin-top: 13px; }
.task-follow-made-route { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 13px; padding: 13px 14px; border: 2px dashed #a96840; border-radius: 6px; background: #fff1d9; box-shadow: 3px 4px 0 #dfc9a5; }
.task-follow-made-route[data-made-state="fact"] { border-style: solid; background: #fff0d0; box-shadow: 4px 5px 0 #dfc9a5; }
.task-follow-made-route[hidden] { display: none; }
.task-follow-made-route-copy { min-width: 0; }
.task-follow-made-route-copy span { color: #7f482b; font: 850 .65rem/1.4 ui-monospace, Menlo, monospace; letter-spacing: .07em; }
.task-follow-made-route-copy p { margin: 4px 0 0; font-size: .8rem; line-height: 1.45; }
.task-follow .task-follow-made-route a { display: flex; align-items: center; justify-content: center; min-width: 150px; max-width: 260px; color: #fff9ed; background: #874e30; border-color: #874e30; text-align: center; }
.task-follow .task-follow-made-route a:hover { color: #fff9ed; background: #683a25; }
.task-follow :is(a,button) { min-height: 43px; padding: 9px 12px; border: 1px solid #315943; border-radius: 4px; color: #315943; background: transparent; font: 800 .75rem/1.35 Inter, ui-sans-serif, sans-serif; text-decoration: none; cursor: pointer; }
.task-follow :is(a,button):hover { background: #dbecda; }
.task-follow :is(a,button):focus-visible { outline: 3px solid #157e9a; outline-offset: 3px; }
.task-follow button:disabled { opacity: .57; cursor: wait; }
.task-follow button:disabled:hover { background: #315943; color: #fffef7; }
.task-follow-controls { margin-top: 13px; }
.task-follow-controls button { color: #fffef7; background: #315943; }
.task-follow-controls button:hover { color: #172d28; }
.task-follow-feedback { min-height: 1.5em; margin: 8px 0 0; color: #45654f; font-size: .74rem; line-height: 1.4; }
.task-follow-slip { position: relative; align-self: stretch; overflow: hidden; padding: 16px; border: 2px dashed #a66e3d; border-radius: 6px; background: #fff1d9; box-shadow: 4px 5px 0 #dfc9a5; }
.task-follow-slip::after { position: absolute; top: -11px; right: 32px; width: 46px; height: 24px; border: 1px solid #b8a98a; background: #f5f0dfb8; content: ""; transform: rotate(7deg); }
.task-follow-slip-top { color: #845335; }
.task-follow-seal { display: flex; align-items: center; gap: 12px; margin: 23px 0 16px; }
.task-follow-seal span { display: grid; width: 62px; height: 62px; flex: none; place-items: center; border: 3px double #a96840; border-radius: 50%; color: #a96840; font: 900 2rem/1 Georgia, serif; transform: rotate(-12deg); transition: transform 250ms ease; }
.task-follow-seal b { color: #a96840; font: 900 .83rem/1.1 ui-monospace, Menlo, monospace; letter-spacing: .08em; transform: rotate(4deg); }
.task-follow-slip[data-guess-state="folded"] .task-follow-seal span { transform: rotate(7deg); }
.task-follow-slip[data-guess-state="open"] .task-follow-seal span { transform: rotate(0) scale(1.07); border-color: #397b58; color: #397b58; }
.task-follow-slip h3 { margin: 0; font-size: clamp(1.25rem, 2vw, 1.8rem); letter-spacing: -.04em; }
.task-follow-slip > p { margin: 8px 0 0; font-size: .82rem; line-height: 1.48; }
.task-follow-guesses { margin-top: 17px; }
.task-follow-guesses button { flex: 1 1 130px; min-width: 0; text-align: left; }
.task-follow-guesses button[aria-pressed="true"] { color: #fffef7; background: #875438; }
.task-follow-slip-note { padding-top: 10px; border-top: 1px solid #d0ab7e; }
.task-follow-answer { margin-top: 14px; padding: 13px; border: 1px solid #83a88b; background: #eef4e8; animation: task-slip-open 260ms ease-out; }
.task-follow-answer strong { color: #315943; font-size: .8rem; }
.task-follow-answer p { margin: 6px 0 0; font-size: .82rem; line-height: 1.5; }
.task-follow-file { margin: 0 clamp(16px, 3vw, 30px) clamp(16px, 3vw, 30px); padding: 17px; border: 1px solid #58705e; border-radius: 8px; background: #cedbc9; }
.task-follow-file[hidden] { display: none; }
.task-follow-file-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.task-follow-file-head > span { display: grid; width: 35px; height: 35px; flex: none; place-items: center; border-radius: 50%; color: #f9f6e9; background: #315943; font-size: 1.2rem; }
.task-follow-file-head p, .task-follow-previous-tag { margin: 0; color: #315943; font: 850 .65rem/1.4 ui-monospace, Menlo, monospace; letter-spacing: .08em; }
.task-follow-file-head h3 { margin: 2px 0 0; font-size: clamp(1.15rem, 2vw, 1.55rem); letter-spacing: -.035em; }
#task-follow-previous-list { display: grid; gap: 13px; }
.task-follow-previous { position: relative; min-width: 0; padding: 17px; border: 1px solid #76947c; border-radius: 5px; background: #fffdf3; box-shadow: 3px 4px 0 #a3b7a2; }
.task-follow-previous::before { position: absolute; top: -9px; right: 16px; width: 68px; height: 9px; border: 1px solid #76947c; border-bottom: 0; border-radius: 4px 4px 0 0; background: #fffdf3; content: ""; }
.task-follow-previous[data-guess-state="open"] { border-color: #397b58; background: #f8fff3; }
.task-follow-previous h4 { margin: 8px 0 4px; font-size: clamp(1.05rem, 2vw, 1.35rem); }
.task-follow-previous > p:not(.task-follow-previous-tag) { margin: 8px 0 0; font-size: .82rem; line-height: 1.48; }
.task-follow-previous-status { padding: 9px 11px; background: #eef2e7; }
.task-follow-previous-guess { padding: 10px 12px; border: 1px dashed #a66e3d; border-radius: 4px; color: #70472f; background: #fff1d9; }
.task-follow-previous[data-guess-state="open"] .task-follow-previous-guess { border-style: solid; border-color: #397b58; color: #315943; background: #eaf5e6; }
.task-follow-previous-result { font-weight: 700; }
@keyframes task-slip-open { from { opacity: .4; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) {
  .task-follow { margin-top: 20px; box-shadow: 4px 5px 0 #bdcbb6; }
  .task-follow-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 15px; }
  .task-follow-main > h2 { font-size: clamp(1.8rem, 8vw, 2.6rem); }
  .task-follow-made-route { grid-template-columns: minmax(0, 1fr); }
  .task-follow .task-follow-made-route a { width: 100%; max-width: none; }
  .task-follow-slip { padding: 15px; }
  .task-follow-seal { margin: 15px 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .task-follow-seal span { transition: none; }
  .task-follow-answer { animation: none; }
}