.plan { --c: #2F7FCF; --c-fill: #2B74BD; --c-tint: #283443; --c-ink: #72A8DE; --plan-ink: #FFEFE2; --plan-ink-2: #E2CBC2; --plan-rule: #402738; --plan-done: #3F8A4A;
  --plan-paper: #21141F; --plan-raised: #2B1A28; --plan-chip: #FFE6D2; --plan-ok: #9FD48E; --plan-ok-wash: #2B3823;
  --plan-amber: #FFC870; --plan-amber-wash: #3D2324; --plan-red: #E68F8B; --plan-red-wash: #542821; --plan-red-fill: #C34843;
  position: absolute; box-sizing: border-box; width: 15.2em; margin: 0; padding: .54em .62em .6em; border-radius: .78em;
  background: var(--plan-paper); color: var(--plan-ink); font-family: var(--sans, "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif);
  font-weight: 500; line-height: 1.2; letter-spacing: -.01em; text-align: left; -webkit-font-smoothing: antialiased;
  box-shadow: 0 0 0 .035em var(--plan-rule), 0 .08em .2em rgba(0, 0, 0, .3), 0 1.1em 2.2em -.75em rgba(0, 0, 0, .7);
  transform-origin: 50% 100%; will-change: transform, opacity; pointer-events: none; }
.plan.amber { --c: #D98A1C; --c-fill: #9F6515; --c-tint: #543715; --c-ink: #E4AD60; }
.plan.plum { --c: #9A4B86; --c-fill: #9A4B86; --c-tint: #432730; --c-ink: #C293B6; }
.plan.sky { --c: #2F7FCF; --c-fill: #2B74BD; --c-tint: #283443; --c-ink: #72A8DE; }
.plan.green { --c: #3C8C55; --c-fill: #37804E; --c-tint: #2B3823; --c-ink: #7AB18B; }
.plan.coral { --c: #D8654B; --c-fill: #B5553F; --c-tint: #542E21; --c-ink: #E49685; }
.plan.violet { --c: #6D5BC8; --c-fill: #6D5BC8; --c-tint: #382B41; --c-ink: #A499DD; }
.plan.teal { --c: #23847F; --c-fill: #217E79; --c-tint: #24362E; --c-ink: #6EAEAB; }
.plan * { box-sizing: border-box; }
:where(.plan) :where(p, ul) { margin: 0; padding: 0; }

.plan-act { position: relative; display: grid; grid-template-columns: 1.5fr 1fr; gap: .34em; margin-top: .46em; }
.plan-btn { position: relative; display: flex; align-items: center; justify-content: center; height: 1.8em; border-radius: 999px;
  font-weight: 700; white-space: nowrap; will-change: transform, opacity; }
.plan-btn > b { position: relative; font-weight: 700; }
.plan-btn i { position: absolute; pointer-events: none; }
.plan-btn .ripw { inset: 0; border-radius: inherit; overflow: hidden; }
.plan-btn .rip { left: 50%; top: 50%; width: 2.6em; height: 2.6em; margin: -1.3em 0 0 -1.3em; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0) 0 36%, rgba(255, 255, 255, .55) 56%, rgba(255, 255, 255, .2) 66%, rgba(255, 255, 255, 0) 74%); }
.plan-btn .lit { inset: 0; border-radius: inherit; background: rgba(255, 255, 255, .22); opacity: 0; }
.plan-btn .glow { inset: 0; border-radius: inherit; opacity: 0;
  box-shadow: 0 0 0 .1em color-mix(in srgb, var(--c) 34%, transparent), 0 0 .8em .25em color-mix(in srgb, var(--c) 42%, transparent); }
.plan-btn.ok { padding-left: 1.4em; background: var(--c-fill); color: var(--c-on, #FFFFFF);
  box-shadow: 0 .04em .08em color-mix(in srgb, var(--c) 40%, transparent), 0 .36em .64em -.36em color-mix(in srgb, var(--c) 90%, transparent); }
.plan-btn.ok::before { content: ""; position: absolute; left: .22em; top: 50%; width: 1.3em; height: 1.3em; margin-top: -.65em; border-radius: 50%;
  background: var(--plan-chip) url("../mascot-face.webp") 50% -.07em / auto 1.55em no-repeat; box-shadow: 0 0 0 .07em rgba(255, 255, 255, .55); }
.plan-btn.edit { padding-left: 1.4em; background: var(--c-tint); color: var(--c-ink); }
.plan-btn.edit::before { content: ""; position: absolute; left: .22em; top: 50%; width: 1.3em; height: 1.3em; margin-top: -.65em; border-radius: 50%;
  background: var(--plan-chip) url("../mascot-face.webp") 50% -.07em / auto 1.55em no-repeat; box-shadow: 0 0 0 .07em color-mix(in srgb, var(--c) 30%, transparent); }
.plan-pill { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .36em; border-radius: 999px;
  background: var(--plan-ok-wash); color: var(--plan-ok); font-weight: 700; white-space: nowrap; opacity: 0; will-change: transform, opacity;
  box-shadow: inset 0 0 0 .06em rgba(47, 125, 59, .32); }
.plan-ring { position: relative; flex: none; width: 1.22em; height: 1.22em; border-radius: 50%; background: var(--plan-ok-wash); }
.plan-ring svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.plan-ring .tick { opacity: 0; fill: none; stroke: #FFFFFF; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.plan-say { position: relative; display: grid; }
.plan-say > span { grid-area: 1 / 1; will-change: transform, opacity; }
.plan-say .did { opacity: 0; }
.pd-tag { position: relative; }
.pd-sealed { position: absolute; right: 0; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 .65em; border-radius: 999px;
  background: var(--plan-ok-wash); color: var(--plan-ok); white-space: nowrap; opacity: 0; transform-origin: 100% 50%; will-change: transform, opacity; }
.plan-seal { position: absolute; top: 0; bottom: 0; right: calc(50% + .17em); display: flex; align-items: center; gap: .5em; margin: 0; padding: 0 1.05em 0 .3em;
  border-radius: 999px; background: var(--c-tint); color: var(--c-ink); white-space: nowrap; opacity: 0; transform-origin: 100% 50%; will-change: transform, opacity; }
.plan-seal i { flex: none; width: 1.85em; height: 1.85em; border-radius: 50%; background: var(--plan-chip) url("../mascot-face.webp") 50% -.1em / auto 2.2em no-repeat; }
.plan-seal b { font-weight: 700; }
.plan-seal small { margin-left: .35em; font-size: .86em; font-weight: 600; opacity: .8; }
.pd-ft .plan-seal { right: calc(50% + .225em); }

.plan.still .plan-btn { opacity: 0; }
.plan.still .plan-pill, .plan.still .plan-say .did, .plan.still .plan-ring .tick { opacity: 1; }
.plan.still .plan-say .doing { opacity: 0; }
.plan.still .plan-ring { background: var(--plan-done); }

.plan.doc { --pd-ground: var(--plan-raised); --pd-line: var(--plan-rule); --pd-ink-2: var(--plan-ink-2); --pd-ink-3: #B59C9A;
  display: flex; flex-direction: column; width: 30.6em; padding: 0; font-size: 17px; line-height: 1.28; border-radius: .9em; overflow: hidden; }
.plan.doc svg.pi { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.plan.doc .fill { fill: currentColor; stroke: none; }
.pd-hd { flex: none; display: flex; align-items: center; gap: .55em; padding: .8em 1.1em .7em; border-bottom: .06em solid var(--pd-line); background: var(--plan-paper); }
.pd-hd .pd-app { flex: none; display: block; width: 1.85em; height: 1.85em; padding: .36em; border-radius: .55em; background: var(--plan-chip); box-shadow: 0 0 0 .06em rgba(0, 0, 0, .3), 0 .08em .2em rgba(0, 0, 0, .3); }
.pd-hd .pd-title { min-width: 0; font-size: 1.22em; font-weight: 750; letter-spacing: -.018em; white-space: nowrap; }
.pd-hd .pd-tag { margin-left: auto; flex: none; display: flex; align-items: center; gap: .3em; padding: .2em .6em .22em .45em; border-radius: 999px; background: var(--c-tint); color: var(--c-ink); font-size: .88em; font-weight: 700; }
.pd-hd .pd-tag i { display: block; width: 1em; height: 1em; }
.pd-body { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: var(--plan-paper); }
.pd-scroll { position: relative; padding: .2em 1.1em 1.1em; will-change: transform; }
.pd-body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.8em; pointer-events: none; opacity: var(--pd-more, 0);
  background: linear-gradient(transparent, var(--plan-paper)); }
.pd-sec { margin-top: .95em; }
.pd-h { display: flex; align-items: center; gap: .4em; margin-bottom: .5em; font-size: .88em; font-weight: 700; color: var(--pd-ink-2); }
.pd-h i { flex: none; display: block; width: 1.15em; height: 1.15em; color: var(--c); }
.pd-goal { padding: .62em .8em .66em; border-radius: .6em; background: color-mix(in srgb, var(--c-tint) 55%, var(--plan-paper)); box-shadow: inset .22em 0 0 var(--c);
  font-size: 1.05em; font-weight: 650; letter-spacing: -.012em; text-wrap: balance; }
.pd-found { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em; }
.pd-chip { position: relative; min-width: 0; padding: .55em .6em .6em; border-radius: .7em; background: var(--pd-ground); box-shadow: inset 0 0 0 .06em var(--pd-line); }
.pd-chip.wide { grid-column: span 2; }
.pd-chip .row { display: flex; align-items: center; gap: .36em; min-width: 0; }
.pd-chip .mk { flex: none; display: block; width: 1.3em; height: 1.3em; padding: .2em; border-radius: .38em; background: var(--plan-chip); box-shadow: 0 0 0 .06em rgba(0, 0, 0, .3); }
.pd-chip .t { font-size: .88em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-chip .s { font-size: .88em; color: var(--pd-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-chip .big { margin-top: .12em; font-size: 1.5em; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.pd-chip .due { display: inline-block; margin-top: .3em; padding: .12em .45em .14em; border-radius: 999px; background: var(--plan-amber-wash); color: var(--plan-amber); font-size: .88em; font-weight: 700; white-space: nowrap; }
.pd-days { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25em; margin-top: .45em; }
.pd-days span { display: grid; justify-items: center; gap: .02em; padding: .3em 0 .32em; border-radius: .45em; background: var(--plan-paper); box-shadow: inset 0 0 0 .06em var(--pd-line); }
.pd-days small { font-size: .88em; color: var(--pd-ink-3); font-weight: 600; }
.pd-days b { font-size: 1.15em; font-weight: 800; }
.pd-days span.open { background: var(--plan-ok-wash); box-shadow: inset 0 0 0 .08em rgba(147, 196, 123, .45); }
.pd-days span.open small { color: var(--plan-ok); }
.pd-open { margin-top: .32em; font-size: .88em; font-weight: 700; color: var(--plan-ok); }
.pd-bars { display: grid; gap: .3em; margin-top: .42em; }
.pd-bar { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0 .4em; font-size: .88em; }
.pd-bar b { font-weight: 800; }
.pd-bar span { color: var(--pd-ink-2); white-space: nowrap; }
.pd-bar i { grid-column: 1 / -1; display: block; height: .5em; border-radius: 99px; background: var(--plan-rule); }
.pd-bar.this i { background: var(--c); }
.pd-delta { position: absolute; right: .55em; top: .5em; padding: .08em .4em .1em; border-radius: 999px; background: var(--plan-ok-wash); color: var(--plan-ok); font-size: .88em; font-weight: 800; }
.pd-chip .t.wrap { white-space: normal; text-wrap: balance; }
.pd-thumb { display: block; width: 100%; aspect-ratio: 16 / 9; margin-bottom: .4em; border-radius: .45em; object-fit: cover; }
.pd-faces { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3em .26em; margin-top: .45em; }
.pd-face { position: relative; display: block; width: 100%; aspect-ratio: 1; }
.pd-face img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 .07em var(--plan-paper); }
.pd-face.q img { box-shadow: 0 0 0 .1em var(--plan-paper), 0 0 0 .22em var(--c); }
.pd-face.q i { position: absolute; right: -.18em; top: -.18em; width: .95em; height: .95em; padding: .12em; border-radius: 50%; background: var(--c-fill); color: var(--c-on, #FFFFFF); box-shadow: 0 0 0 .08em var(--plan-paper); }
.pd-legend { display: flex; flex-wrap: wrap; gap: .1em .9em; margin-top: .5em; font-size: .88em; color: var(--pd-ink-2); }
.pd-legend span { display: flex; align-items: center; gap: .35em; white-space: nowrap; }
.pd-legend b { color: var(--plan-ink); font-weight: 800; }
.pd-legend i { display: block; width: .78em; height: .78em; border-radius: 50%; }
.pd-legend .lq i { background: var(--plan-paper); box-shadow: inset 0 0 0 .16em var(--c); }
.pd-legend .lc i { color: var(--plan-red); }
.pd-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.pd-step { position: relative; display: grid; grid-template-columns: 1.7em minmax(0, 1fr) auto; align-items: center; gap: .65em; padding: .5em .45em; margin: 0 -.45em; border-radius: .6em; }
.pd-step + .pd-step::before { content: ""; position: absolute; left: 2.6em; right: .45em; top: 0; height: .06em; background: var(--pd-line); }
.pd-step .lit { position: absolute; inset: 0; border-radius: inherit; background: color-mix(in srgb, var(--c-tint) 60%, transparent); opacity: 0; }
.pd-step .n { position: relative; display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--c-tint); color: var(--c-ink); font-size: .88em; font-weight: 800; }
.pd-step .w { position: relative; font-weight: 600; text-wrap: pretty; }
.pd-step .pc { position: relative; display: flex; align-items: center; gap: .45em; padding: .32em .55em .32em .34em; border-radius: .6em; background: var(--plan-paper); box-shadow: 0 0 0 .06em var(--pd-line), 0 .08em .2em -.06em rgba(0, 0, 0, .5); }
.pd-step .pc .ic { flex: none; display: block; width: 1.8em; height: 1.8em; padding: .38em; border-radius: .5em; background: var(--c-tint); color: var(--c-ink); }
.pd-step .pc .ic.red { background: var(--plan-red-wash); color: var(--plan-red); }
.pd-step .pc .ic.amber { background: var(--plan-amber-wash); color: var(--plan-amber); }
.pd-step .pc .ic.green { background: var(--plan-ok-wash); color: var(--plan-ok); }
.pd-step .pc .tx { display: grid; line-height: 1.12; }
.pd-step .pc .tx b { font-size: .88em; font-weight: 800; white-space: nowrap; }
.pd-step .pc .tx span { font-size: .88em; color: var(--pd-ink-2); white-space: nowrap; }
.pd-step .pc .cal { flex: none; display: grid; width: 2.3em; border-radius: .42em; overflow: hidden; text-align: center; background: var(--plan-paper); box-shadow: 0 0 0 .06em var(--pd-line); }
.pd-step .pc .cal small { display: block; padding: .05em 0 .08em; background: var(--plan-red-fill); color: #FFFFFF; font-size: .88em; font-weight: 800; line-height: 1.1; }
.pd-step .pc .cal b { display: block; padding: .04em 0 .1em; font-size: 1.1em; font-weight: 800; line-height: 1.1; }
.pd-step .pc .up { display: flex; align-items: center; gap: .25em; font-size: .88em; font-weight: 800; white-space: nowrap; }
.pd-step .pc .up s { text-decoration: none; color: var(--pd-ink-3); font-weight: 700; }
.pd-step .pc .up i { display: block; width: .9em; height: .9em; color: var(--plan-ok); }
.pd-mail { border-radius: .7em; background: var(--plan-paper); box-shadow: 0 0 0 .06em var(--pd-line), 0 .1em .3em -.1em rgba(0, 0, 0, .45); overflow: hidden; }
.pd-mail .hd { display: grid; gap: .1em; padding: .5em .8em .48em; border-bottom: .06em solid var(--pd-line); background: var(--pd-ground); font-size: .88em; }
.pd-mail .hd span { color: var(--pd-ink-2); }
.pd-mail .hd b { color: var(--plan-ink); font-weight: 700; }
.pd-mail .bd { display: grid; gap: .16em; padding: .65em .8em .75em; }
.pd-mail .bd p { position: relative; display: grid; }
.pd-mail .bd p > span { grid-area: 1 / 1; }
.pd-replies { display: grid; gap: .55em; }
.pd-reply { display: grid; grid-template-columns: 1.9em minmax(0, 1fr); gap: .1em .55em; align-items: start; }
.pd-reply img { grid-row: span 2; display: block; width: 1.9em; height: 1.9em; border-radius: 50%; object-fit: cover; }
.pd-reply img.lg { box-sizing: border-box; padding: .38em; border-radius: .55em; object-fit: contain; background: var(--plan-chip); box-shadow: 0 0 0 .06em rgba(0, 0, 0, .3); }
.pd-reply .qq { min-width: 0; font-size: .88em; color: var(--pd-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-reply .qq b { color: var(--plan-ink); font-weight: 700; }
.pd-reply .aa { justify-self: start; max-width: 100%; padding: .32em .65em .36em; border-radius: .9em .9em .9em .25em; background: var(--c-tint); color: var(--c-ink); font-weight: 650; }
.pd-ft { flex: none; padding: .7em 1.1em .85em; border-top: .06em solid var(--pd-line); background: var(--plan-paper); }
.pd-ft .plan-act { margin-top: 0; grid-template-columns: 1fr 1fr; gap: .45em; }
.pd-ft .plan-btn { height: 2.45em; }
.pd-ft .plan-btn:is(.ok, .edit) { padding: 0 .7em 0 2.25em; }
.pd-ft .plan-btn:is(.ok, .edit)::before { left: .3em; width: 1.85em; height: 1.85em; margin-top: -.925em; background-size: auto 2.2em; background-position: 50% -.1em; }
.pd-ft .plan-ring { width: 1.5em; height: 1.5em; }

.plan.doc.wide { width: auto; }
.plan.doc.wide .pd-hd { padding: .75em 1.25em .65em; }
.plan.doc.wide .pd-scroll { padding: 0 1.25em 1.05em; }
.plan.doc.wide .pd-sec { margin-top: .85em; }
.plan.doc.wide .pd-goal { display: inline-block; padding-right: 1.4em; }
.plan.doc.wide .pd-found { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65em; }
.plan.doc.wide .pd-chip:has(> .pd-thumb) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .75em; align-content: center; }
.plan.doc.wide .pd-thumb { grid-row: span 2; width: auto; height: 4.6em; aspect-ratio: 16 / 9; margin-bottom: 0; }
.plan.doc.wide .pd-thumb ~ .t { align-self: end; }
.plan.doc.wide .pd-thumb ~ .s { align-self: start; }
.plan.doc.wide .pd-faces { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .3em; }
.plan.doc.wide .pd-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 1.6em; align-items: start; }
.plan.doc.wide .pd-ft { display: flex; justify-content: flex-end; padding: .65em 1.25em .75em; }
.plan.doc.wide .pd-ft .plan-act { width: 29em; }