/* Caveat Project Authors, SIL Open Font License; served locally for offline walks. */
@font-face{font-family:Caveat;src:url('./assets/fonts/caveat-latin.woff2') format('woff2');font-style:normal;font-weight:400 700;font-display:swap}

/* The transparent modal keeps the clipboard in the first-person foreground.
   Live writing stays accessible HTML on the top sheet, including long task lists. */
#taskListDialog{position:fixed;inset:0;box-sizing:border-box;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:clip;background:transparent;color:#304359;perspective:1200px}
#taskListDialog::backdrop{background:linear-gradient(transparent 40%,#14201526)}
.task-clipboard{--clipboard-pose:translateX(-50%) rotateX(7deg) rotateY(-9deg) rotateZ(-4deg);position:absolute;left:52%;bottom:28px;box-sizing:border-box;width:min(470px,calc(100vw - 86px));height:min(650px,calc(100dvh - 125px));padding:47px 20px 22px;border:2px solid #74522f;border-radius:14px 14px 18px 18px;background:repeating-linear-gradient(92deg,#ffffff06 0 1px,#56341909 2px 4px,transparent 5px 9px),linear-gradient(100deg,#87613c,#b98e56 18%,#9e7647 52%,#b48b56 85%,#856039);box-shadow:inset 0 1px 1px #ffe4ac88,inset -3px -3px 4px #51321880,3px 5px 0 #6e4a2c,5px 8px 0 #4f3524,12px 26px 36px #16201470;transform:var(--clipboard-pose);transform-origin:50% 85%}
#taskListDialog[open] .task-clipboard{animation:clipboard-raise .42s cubic-bezier(.2,.75,.25,1) both}
.clipboard-paper-stack{position:relative;height:100%;isolation:isolate;perspective:1200px}
.clipboard-paper-stack::before,.clipboard-paper-stack::after{content:"";position:absolute;inset:2px -1px -3px;background:#e9e4d4;border:1px solid #bcb6a4;box-shadow:0 2px 3px #45321d26;transform:rotate(1.3deg);z-index:-1}
.clipboard-paper-stack::after{inset:1px 0 -2px;background:#f3eedf;transform:rotate(-.7deg)}
.clipboard-sheet{position:absolute;inset:0;display:flex;flex-direction:column;box-sizing:border-box;height:100%;padding:35px 23px 15px 35px;border:1px solid #c5c1b0;background:linear-gradient(90deg,transparent 28px,#cc797850 28px 29px,transparent 29px),repeating-linear-gradient(0deg,transparent 0 27px,#8cabc02b 27px 28px),radial-gradient(ellipse at 10% 10%,#fffdf5,#f5f1e5 90%);background-position:0 0,0 9px,0 0;box-shadow:1px 3px 5px #4a372e40,inset 0 0 24px #c5b68d12;transform-origin:50% 0;transform-style:preserve-3d;font:400 23px/1.2 Caveat,'Bradley Hand','Segoe Print',cursive}
.clipboard-clip{position:absolute;top:9px;left:50%;width:132px;height:57px;overflow:visible;transform:translateX(-50%);filter:drop-shadow(0 2px 1px #1e2a3366);z-index:3;pointer-events:none}
.clipboard-sheet[hidden]{display:none}
.clipboard-sheet>*{backface-visibility:hidden;transform:translateZ(.1px)}
.clipboard-sheet-heading{position:relative;flex:none;padding-bottom:13px}
:is(#taskListTitle,#workProgressTitle,#currentAreaTitle){margin:7px 75px 0 0;font:700 39px/1 Caveat,'Bradley Hand','Segoe Print',cursive;transform:rotate(-1deg)}
#taskListClose{position:absolute;right:27px;top:48px;z-index:5;min-height:40px;padding:6px 5px;border:0;background:transparent;box-shadow:none;color:#586657;font:600 18px/1.1 Caveat,'Bradley Hand','Segoe Print',cursive;text-decoration:underline;text-decoration-color:#58665766;text-underline-offset:3px;cursor:pointer}
#taskListClose:hover{background:#e4dfc94d;color:#273c2a}
#taskListSummary{margin:9px 0 0;color:#62736d;font-size:19px}
.clipboard-controller-hint{display:none;position:absolute;bottom:-25px;left:0;width:100%;margin:0;text-align:center;color:#f5f1e5;text-shadow:0 1px 3px #142015;font:500 11px/1.4 var(--sign-font)}
body.gamepad-active .clipboard-controller-hint{display:block}
.clipboard-writing{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#acb0a066 transparent;padding-right:5px;margin-right:-5px;outline-offset:2px}
#taskListEmpty{margin:15px 0;color:#627169;font-size:23px;line-height:1.45;transform:rotate(-1deg)}
#taskListItems{list-style:none;margin:0;padding:0}
#taskListItems:empty{display:none}
.task-list-item{position:relative;margin:0;padding:12px 0 13px 29px;border-bottom:1px solid #748d9a22}
.task-list-item::before{content:"";position:absolute;top:16px;left:0;width:14px;height:15px;border:1.5px solid #3d5269;border-radius:2px 1px 3px 1px;transform:rotate(-5deg)}
.task-list-item:nth-child(even)::before{transform:rotate(3deg)}
.task-list-heading{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.task-list-heading strong{font-weight:600;overflow-wrap:anywhere}
.task-list-heading>span{flex:none;font-weight:600;transform:rotate(3deg)}
.task-list-item progress{display:block;box-sizing:border-box;width:100%;height:4px;margin-top:9px;border:0;border-radius:30% 60% 45% 20%;appearance:none;-webkit-appearance:none;overflow:hidden;background:#354c6612;color:#3c596d;accent-color:#3c596d}
.task-list-item progress::-webkit-progress-bar{background:#354c6612}
.task-list-item progress::-webkit-progress-value{background:#3c596d;border-radius:30% 60% 45% 20%}
.task-list-item progress::-moz-progress-bar{background:#3c596d}
.task-list-completed{margin:6px 0 0;color:#697b73;font-size:17px;line-height:1.1}
.task-complete::after{content:"✓";position:absolute;left:-3px;top:4px;color:#48634e;font-size:31px;transform:rotate(-8deg)}
.task-complete .task-list-heading strong{text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:#48634e88;color:#647764}
.task-complete progress{color:#58745a;accent-color:#58745a}
.task-complete progress::-webkit-progress-value{background:#58745a}
.task-complete progress::-moz-progress-bar{background:#58745a}
.task-list-note{flex:none;margin:13px 0 0;color:#6b776c;font-size:17px;line-height:1.1}
.clipboard-grip{position:absolute;bottom:-176px;width:142px;height:284px;min-height:0;padding:0;border:0;border-radius:0;overflow:visible;background:transparent;box-shadow:none;cursor:pointer;z-index:6;-webkit-tap-highlight-color:transparent}
.clipboard-grip svg{display:block;overflow:visible;width:100%;height:100%;filter:drop-shadow(2px 4px 3px #16201440);pointer-events:none}
.clipboard-grip:hover,.clipboard-grip:active{background:transparent;box-shadow:none}
.clipboard-grip:hover svg{filter:drop-shadow(0 0 5px #d9eaff90)}
.clipboard-grip:focus-visible{outline:0}.clipboard-grip:focus-visible svg{filter:drop-shadow(0 0 5px #fff4c7)}
.clipboard-grip-left{left:-58px}.clipboard-grip-left svg{transform:rotate(-12deg);transform-origin:60% 20%}
.clipboard-grip-right{right:-55px}.clipboard-grip-right svg{transform:scaleX(-1) rotate(-10deg);transform-origin:60% 20%}
@keyframes clipboard-raise{from{opacity:0;transform:translate(-50%,75vh) rotateX(28deg) rotateY(-16deg) rotateZ(-12deg)}to{opacity:1;transform:var(--clipboard-pose)}}
@media(max-width:600px){
  .task-clipboard{left:50%;bottom:40px;width:calc(100vw - 68px);height:min(650px,calc(100dvh - 145px));padding:43px 13px 18px;--clipboard-pose:translateX(-50%) rotateX(5deg) rotateY(-6deg) rotateZ(-3deg)}
  .clipboard-sheet{padding:32px 14px 14px 26px;background-position:-10px 0,0 9px,0 0;font-size:22px}
  :is(#taskListTitle,#workProgressTitle,#currentAreaTitle){font-size:36px}#taskListClose{top:46px;right:18px;font-size:17px}
  .task-list-item{padding-left:24px}.task-list-completed{font-size:16px}.task-list-note{font-size:16px}
  .clipboard-grip{width:112px;height:224px;bottom:-132px}.clipboard-grip-left{left:-47px}.clipboard-grip-right{right:-44px}
}
@media(max-height:500px){
  .task-clipboard{left:50%;bottom:15px;width:min(390px,calc(100vw - 90px));height:calc(100dvh - 80px);padding:34px 15px 14px;--clipboard-pose:translateX(-50%) rotateX(4deg) rotateY(-5deg) rotateZ(-3deg)}
  .clipboard-clip{top:3px;width:118px;height:43px}
  .clipboard-sheet{padding:24px 20px 11px 29px}.clipboard-sheet-heading{padding-bottom:5px}#taskListClose{top:35px;right:21px;font-size:16px}:is(#taskListTitle,#workProgressTitle,#currentAreaTitle){margin-top:4px;font-size:29px}#taskListSummary{margin-top:4px;font-size:17px}
  .task-list-item{padding-top:7px;padding-bottom:9px}.task-list-item::before{top:12px}.task-complete::after{top:0}
  .task-list-note{margin-top:7px;font-size:15px}.clipboard-grip{bottom:-196px}
}
@media(prefers-reduced-motion:reduce){#taskListDialog[open] .task-clipboard{animation:none}}

:is(#mowingTitle,#plowingTitle){margin:6px 0;font-size:27px;font-weight:600}
.mowing-note{margin:7px 0 12px;color:#627169;font-size:18px;line-height:1.2}
:is(#mowingMap,#plowingMap){display:block;width:100%;height:auto;border:1px solid #62716966;border-radius:3px;cursor:crosshair;background:#e5e4d5}
.mowing-legend{display:flex;flex-wrap:wrap;gap:5px 12px;margin:7px 0;font-size:16px}
.mowing-legend span::before{content:"";display:inline-block;width:9px;height:9px;margin-right:4px;border:1px solid #627169;background:#d7bd6f}
.mowing-legend span:nth-child(2)::before{background:#709e5e}.mowing-legend span:nth-child(3)::before{background:#4a844b}.mowing-legend span:nth-child(4)::before,.mowing-legend .map-player-key::before{display:none}
.mowing-selection{margin:9px 0;font-size:20px;font-weight:600;min-height:24px}
:is(#mowingAreas,#plowingAreas){margin:13px 0 18px}
:is(#mowingAreas,#plowingAreas) details{border-top:1px solid #748d9a44;padding:4px 0}
:is(#mowingAreas,#plowingAreas) summary{display:list-item;cursor:pointer;padding:5px 0;font-size:21px}
:is(#mowingAreas,#plowingAreas) summary span:last-child{float:right;color:#697b73;font-size:18px}
:is(#mowingAreas,#plowingAreas) ul{list-style:none;padding:0;margin:0}
.mowing-area{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;width:100%;box-sizing:border-box;min-height:44px;padding:9px 5px;border:0;border-radius:3px;background:transparent;color:#304359;text-align:left;font:400 20px/1.1 Caveat,'Bradley Hand',cursive;box-shadow:none;cursor:pointer}
.mowing-area[aria-pressed=true]{background:#698caa18;outline:1px solid #526e864d;outline-offset:-1px}
.mowing-area:hover{background:#698caa18}.mowing-area:focus-visible{outline:2px solid #304359}
.mowing-area progress{grid-column:1/-1;width:100%;height:4px;accent-color:#58745a}
.mowing-area small{grid-column:1/-1;font-size:16px;color:#697b73}
.mowing-area.mowing-complete>span::before{content:"✓ ";color:#48634e}
.plowing-legend span:first-child::before{background:#e2ecf4}.plowing-legend span:nth-child(2)::before{background:#62869c}

/* The sheets hinge at the wire while the working hand carries the lower edge. */
.task-clipboard{--clipboard-turn-travel:min(460px,calc(100dvh - 250px))}
.clipboard-turn-out,.clipboard-turn-in{z-index:2;pointer-events:none;will-change:transform;box-shadow:0 16px 22px #302c2440}
.clipboard-turn-out{animation:clipboard-sheet-up .66s ease-in-out both}
.clipboard-turn-in{animation:clipboard-sheet-down .66s ease-in-out both}
.task-clipboard[data-turning=next] .clipboard-grip-right{animation:clipboard-hand-next .66s ease-in-out both}
.task-clipboard[data-turning=previous] .clipboard-grip-left{animation:clipboard-hand-previous .66s ease-in-out both}
.task-clipboard[data-turning] .clipboard-turn-label{visibility:hidden}
.clipboard-turn-label{position:absolute;top:3px;left:25px;white-space:nowrap;font:600 19px/1 Caveat,'Bradley Hand',cursive;color:#304359;transform:rotate(3deg)}
.clipboard-grip-right .clipboard-turn-label{left:21px;transform:rotate(-3deg)}
.clipboard-page-number{flex:none;margin:10px 0 0;text-align:center;color:#627169;font-size:17px}
.clipboard-area-inspect{padding:4px 0;min-height:36px;border:0;background:transparent;box-shadow:none;color:#304359;font:600 21px/1.2 Caveat,'Bradley Hand',cursive;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.clipboard-area-inspect:hover{background:#698caa18}
.clipboard-area-name{margin:0;font-size:25px;font-weight:600}
.clipboard-area-map{display:block;width:100%;height:auto;border:1px solid #62716966;border-radius:3px;background:#e5e4d5}
.clipboard-area-percent{margin:7px 0 3px;font-size:23px;font-weight:600}
:is(#mowingCurrentProgress,#plowingCurrentProgress){display:block;width:100%;height:6px;accent-color:#58745a}
.clipboard-area-totals{display:flex;justify-content:space-between;gap:14px;margin:8px 0}
.clipboard-area-totals dt{font-size:16px;color:#627169}.clipboard-area-totals dd{margin:0;font-size:23px}
#currentAreaPage .mowing-note{margin:5px 0 8px;font-size:16px}
@keyframes clipboard-sheet-up{0%,12%{transform:rotateX(0deg)}50%{transform:rotateX(90deg)}85%,100%{transform:rotateX(166deg)}}
@keyframes clipboard-sheet-down{0%,12%{transform:rotateX(166deg)}50%{transform:rotateX(90deg)}85%,100%{transform:rotateX(0deg)}}
@keyframes clipboard-hand-next{0%,100%{transform:translate(0,0)}12%{transform:translate(-16px,-12px) rotate(-8deg)}50%,65%{transform:translate(-55px,calc(-1 * var(--clipboard-turn-travel))) rotate(-12deg)}}
@keyframes clipboard-hand-previous{0%,100%{transform:translate(0,0)}12%,50%{transform:translate(40px,calc(-1 * var(--clipboard-turn-travel))) rotate(12deg)}85%{transform:translate(16px,-20px) rotate(8deg)}}
@media(max-width:600px){.clipboard-turn-label{left:16px;font-size:17px}.clipboard-grip-right .clipboard-turn-label{left:12px}.clipboard-page-number{font-size:16px}}
@media(max-height:500px){.clipboard-turn-label{top:-12px}.clipboard-page-number{margin-top:5px;font-size:15px}}
@media(prefers-reduced-motion:reduce){.clipboard-turn-out,.clipboard-turn-in,.task-clipboard[data-turning] .clipboard-grip{animation:none}}
