/* 开卷 — the daily opening cover (gift.js; docs/lead-plan-2026-10-09.md TOP 2). Ink & Paper tokens of app.css,
   with literal fallbacks so the first paint never depends on another file. Only transform and opacity move. */
#cover{position:fixed;inset:0;z-index:10050;overflow:hidden;background:#F4EFE4 var(--fibre);color:var(--ink,#1D1A16);
  font-family:var(--font,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif);font-variant-numeric:tabular-nums;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;cursor:default;
  transition:transform .42s cubic-bezier(.2,.8,.2,1),opacity .42s cubic-bezier(.2,.8,.2,1);
  /* Failsafe: if gift.js never runs, the cover moves out of the way by itself (gift.js adds .live). */
  animation:coverFailsafe 0s linear 12.5s forwards}
#cover.live{animation:none}
@keyframes coverFailsafe{to{opacity:0;transform:translate3d(0,-120vh,0)}}
#cover.lifting{opacity:0;transform:translate3d(0,-24px,0);pointer-events:none}
/* The words go first, then the paper lifts: no ghost text over the keys while it fades. */
#cover.lifting>:not(.coverStaff){opacity:0;transition:opacity .18s ease-out}
/* auth.css hides every child of body but the login overlay while body.cloudLocked; the cover sits above it. */
body.cloudLocked>#cover#cover#cover#cover{visibility:visible!important;pointer-events:auto!important}
body>#cover.lifting#cover#cover#cover{pointer-events:none!important}
/* …except for the tap that lifted it, until that tap's click has landed on the paper (gift.js .catching). */
body>#cover.lifting.catching#cover#cover#cover{pointer-events:auto!important}
/* gift.js never ran (a slip while editing its words, a failed download): the cover still gives way at once to the
   unlocked app, the login form, the reconnect button and the anomaly panel, not only to the 12.5 s failsafe. Two
   rules, so a browser without :has() keeps the first. */
body:not(.cloudLocked)>#cover:not(.live){display:none}
body:has(#authForm:not([hidden]),#authRetry:not([hidden]),#anomalyPanel:not([hidden]))>#cover:not(.live){display:none}

/* Two faint staves, in the top and the bottom third, fading out towards the edges. */
.coverStaff{position:absolute;left:0;right:0;top:21%;height:33px;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(29,26,22,.075) 0 1px,transparent 1px 8px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.coverStaff.lower{top:auto;bottom:17%}

/* The centre column is anchored at the top, so lines that arrive later never move what is already there. */
.coverBody{position:absolute;left:50%;top:calc(50% - 178px);width:min(760px,calc(100% - 200px));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;text-align:center}
#cover .seal{display:block;width:104px;height:104px;flex:none;background:none;box-shadow:none;border-radius:0;color:var(--cinnabar,#B23A29);font:inherit;line-height:0}
#cover .seal svg{display:block;width:100%;height:100%;overflow:visible}
#cover .seal .sealRing{fill:none;stroke:#B8913F;stroke-width:2.2;opacity:0}
#cover .seal.festive .sealRing{opacity:.85}
.coverGreeting{margin:30px 0 0;padding-left:.12em;font-size:34px;font-weight:600;line-height:1.3;letter-spacing:.12em;color:var(--ink,#1D1A16);transition:opacity .15s ease-out}
.coverGreeting:empty{opacity:0}
/* The first open of the day (gift.js .debut): the ensō turns in like a brush stroke and the greeting rises. Fill mode
   backwards: once done, the normal style rules again, so the lift can fade the words. */
#cover.debut .seal{animation:coverSealIn .9s cubic-bezier(.2,.8,.2,1) backwards}
#cover.debut .coverGreeting{animation:coverRise .6s cubic-bezier(.2,.8,.2,1) .08s backwards}
#cover.debut .coverInscription{animation:coverFade 1.1s ease-out .2s backwards}
@keyframes coverSealIn{from{opacity:0;transform:rotate(-16deg) scale(.9)}to{opacity:1;transform:none}}
@keyframes coverRise{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
@keyframes coverFade{from{opacity:0}to{opacity:1}}
.coverMemory,.coverNight,.coverResume{max-width:100%;opacity:0;transform:translate3d(0,6px,0);transition:opacity .36s ease-out,transform .5s cubic-bezier(.2,.8,.2,1)}
.coverMemory.on,.coverNight.on,.coverResume.on{opacity:1;transform:none}
.coverMemory{margin:16px 0 0;font-size:18px;line-height:1.55;letter-spacing:.05em;color:var(--ink-2,#4A443B)}
.coverMemory b{font-weight:600;color:var(--jade-ink,#22604A);padding:0 .06em}
.coverNight{margin:6px 0 0;font-size:15px;line-height:1.5;letter-spacing:.08em;color:var(--ink-3,#736B5E)}
.coverResume{position:relative;margin:34px 0 0;padding-top:18px;font-size:14px;line-height:1.5;letter-spacing:.04em;color:var(--ink-3,#736B5E);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.coverResume::before{content:"";position:absolute;left:50%;top:0;width:28px;height:1px;margin-left:-14px;background:var(--rule-2,#CBBFAB)}
.coverResume .coverSong{font-weight:500;color:var(--ink-2,#4A443B)}
.coverResume .coverSep{margin:0 .55em;color:var(--ink-4,#B3AA9A)}

/* A vertical inscription at the right edge (题款): the current 节气, a hairline, the date in Chinese numerals. On
   the day a term begins, its line stands beside it in a second, quieter column. */
.coverInscription{position:absolute;top:calc(76px + env(safe-area-inset-top,0px));right:calc(58px + env(safe-area-inset-right,0px));margin:0;display:flex;flex-direction:column;align-items:center;color:var(--ink-3,#736B5E);transition:opacity .15s ease-out}
.coverInscription:has(#coverTerm:empty){opacity:0}
.coverInscription>b,.coverInscription>span,.coverTermLine{writing-mode:vertical-rl;-webkit-writing-mode:vertical-rl;text-orientation:mixed;white-space:nowrap;line-height:1}
.coverInscription>b{font-size:22px;font-weight:500;letter-spacing:.22em;color:var(--ink-2,#4A443B)}
.coverInscription>span{font-size:14px;letter-spacing:.36em}
.coverInscription>.coverDot{width:1px;height:18px;margin:10px 0 14px;background:var(--rule-2,#CBBFAB)}
.coverTermLine{position:absolute;margin:0;top:calc(76px + 92px + env(safe-area-inset-top,0px));right:calc(100px + env(safe-area-inset-right,0px));font-size:13px;letter-spacing:.3em;color:var(--ink-3,#736B5E);opacity:.9}

/* Footer: the login overlay's message, only when loading is slow. */
.coverStatus{position:absolute;left:0;right:0;bottom:calc(44px + env(safe-area-inset-bottom,0px));margin:0;padding-left:.12em;text-align:center;font-size:13px;line-height:1.5;letter-spacing:.12em;color:var(--ink-3,#736B5E);opacity:0;transition:opacity .3s ease-out}
.coverStatus.on{opacity:1}

/* The paper band that sweeps the score in from the left as the cover lifts (gift.js sweepInk). */
.coverInk{position:absolute;inset:0;z-index:4;overflow:hidden;pointer-events:none}
.coverInk i{position:absolute;top:0;bottom:0;left:-120px;width:calc(100% + 120px);background:linear-gradient(90deg,rgba(255,253,247,0),var(--sheet,#FFFDF7) 120px);
  animation:coverInk .65s cubic-bezier(.42,0,.24,1) forwards;will-change:transform}
@keyframes coverInk{from{transform:translate3d(0,0,0)}to{transform:translate3d(100%,0,0)}}

@media (max-height:700px){.coverBody{top:calc(50% - 150px)}#cover .seal{width:84px;height:84px}.coverGreeting{margin-top:22px}.coverResume{margin-top:24px}}

/* Reduced motion: a 200 ms crossfade, nothing moves, no band. */
@media (prefers-reduced-motion:reduce){
  #cover{transition:opacity .2s linear}
  #cover.lifting{transform:none}
  #cover.debut .seal,#cover.debut .coverGreeting,#cover.debut .coverInscription{animation:none}
  .coverMemory,.coverNight,.coverResume{transform:none;transition:opacity .3s linear}
  .coverInk{display:none}
}
html[data-test-motion=off] #cover{transition:opacity .2s linear}
html[data-test-motion=off] #cover.lifting{transform:none}
html[data-test-motion=off] #cover.debut .seal,html[data-test-motion=off] #cover.debut .coverGreeting,html[data-test-motion=off] #cover.debut .coverInscription{animation:none}
html[data-test-motion=off] .coverInk{display:none}