/* Local slider previews leave canonical inline styles intact until commit. */
[data-task-strength-preview] { --task-finish-strength:var(--task-finish-preview-strength)!important; }
[data-task-speed-preview] { --task-finish-duration:var(--task-finish-preview-speed)!important; }
/* Each card clips only its decorative light, leaving controls and tooltips free. */
.task-card-backdrop, .task-card-light { display:none; }
/* Resolve theme ink before individual cards replace their local ink palette. */
:is(.planner-shell,.custom-preview-viewport,.task-details-layer,.task-appearance-picker,.board-color-popover) { --task-theme-ink:var(--ink,#262823); }
.task-card-use-theme-ink:not([data-task-background-preview]),
[data-task-background-preview="theme"] { --task-color-ink:var(--task-theme-ink,#262823)!important; }
.task-card-has-picture { --task-picture-color:initial; --task-picture-ink:initial; }
.task-card-picture { display:block; position:absolute; inset:0; z-index:0; overflow:hidden; border-radius:inherit; pointer-events:none; background:#15171b; }
.task-card-picture > .appearance-picture-media { opacity:var(--task-picture-intensity,.55); }
.task-card-picture .appearance-picture-media { display:block; position:absolute; inset:0; overflow:hidden; border-radius:inherit; pointer-events:none; }
.task-card-picture .appearance-picture-media img { display:block; width:100%; height:100%; object-fit:var(--picture-fit,cover); object-position:var(--picture-x,50%) var(--picture-y,50%); }
/* Pictures and finishes have independent opacity, so either can be adjusted. */
.task-card-finish.task-card-finish--picture > .task-card-backdrop > .task-card-light,
.task-card-finish.task-card-finish--solid > .task-card-backdrop > .task-card-light { display:none; }
/* Keep the saved flat color until a picture has decoded, and restore it on failure. */
.task-card-has-picture:has(> .task-card-backdrop > .task-card-picture > .appearance-picture-media img[data-picture-ready]) { --task-picture-color:#15171b; --task-picture-ink:#fff;
    --task-picture-text-shadow:0 0 1px rgb(0 0 0 / .55),0 1px 4px rgb(0 0 0 / .45),0 0 12px rgb(0 0 0 / .2);
    --task-picture-icon-shadow:drop-shadow(0 0 1px rgb(0 0 0 / .6)) drop-shadow(0 1px 3px rgb(0 0 0 / .4));
}
.task-card-picture:not(:has(> .appearance-picture-media img[data-picture-ready])) { display:none; }
/* White ink must stay readable over any picture, including bright or animated
   ones, without sampling pixels. Two static layers do it, and neither repaints
   when a GIF advances a frame or the intensity slider moves:
   1. A shade inside the picture's own opacity group. It strengthens with
      intensity (base shade x intensity) and follows the slider for free.
      Cards use a compositor brightness filter so they add no extra layer.
   2. A soft dark halo on the white text and icons (painted once). */
.task-card-picture .appearance-picture-media img { filter:brightness(.84); }
.task-details-dialog > .task-card-backdrop > .task-card-picture .appearance-picture-media img { filter:none; }
/* The editor darkens most behind its header controls and footer. */
.task-details-dialog > .task-card-backdrop > .task-card-picture > .appearance-picture-media::after {
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(180deg,rgb(0 0 0 / .46) 0,rgb(0 0 0 / .26) 110px,rgb(0 0 0 / .16) 220px,rgb(0 0 0 / .16) calc(100% - 96px),rgb(0 0 0 / .28) 100%);
}
.task-details-dialog.task-card-has-picture > header,
.task-details-dialog.task-card-has-picture .task-details-scroll,
.task-card-has-picture:not(.task-details-dialog) { text-shadow:var(--task-picture-text-shadow,none); }
/* Form controls reset text-shadow in the browser stylesheet. */
:is(.task-details-dialog.task-card-has-picture > header,.task-details-dialog.task-card-has-picture .task-details-scroll,.task-card-has-picture:not(.task-details-dialog)) :is(input,textarea,button,select) { text-shadow:inherit; }
:is(.task-details-dialog.task-card-has-picture > header,.task-details-dialog.task-card-has-picture .task-details-scroll,.task-card-has-picture:not(.task-details-dialog)) svg { filter:var(--task-picture-icon-shadow,none); }
/* The editor can be styled once before its borrowed picture is marked ready. Its
   picture palette settles instantly while the editor is hidden or opening, and in the
   frame a later picture becomes ready, instead of fading in from the plain task color. */
.task-details-dialog:is([data-task-details-pending],[data-task-details-animating],[data-picture-settling]) :is(header button,header select,.task-details-title-row > .task-check,.task-timing-trigger,.task-focus-action,[data-description-checklist],.checklist-title-input,.checklist-row > button,.checklist-row > input[type="checkbox"]),
.task-details-dialog:is([data-task-details-pending],[data-task-details-animating],[data-picture-settling]) .checklist-row > input[type="checkbox"]::before { transition:none; }
/* Phones rasterize every picture card and the whole editor with these shadows.
   The wide 12px glow and a second icon shadow tripled that raster cost; a tight
   1px outline keeps text and icons readable over bright pictures. */
@media (max-width: 700px), (hover: none), (pointer: coarse) {
    .task-card-has-picture:has(> .task-card-backdrop > .task-card-picture > .appearance-picture-media img[data-picture-ready]) {
        --task-picture-text-shadow:0 0 1px rgb(0 0 0 / .55),0 1px 4px rgb(0 0 0 / .45);
        --task-picture-icon-shadow:drop-shadow(0 0 1px rgb(0 0 0 / .8));
    }
}
.task-appearance-picture { margin-top:0; padding-top:.75rem; border-top:1px solid var(--line); }
.task-appearance-picture h4 { margin:0 0 .75rem; color:var(--ink); font-size:.9rem; }
.task-card-finish { --task-background-opacity:1; --task-background-preview-opacity:initial; position:relative; isolation:isolate; color:var(--task-color-ink,inherit); }
/* Only this decorative layer fades. Controls, text and icons are siblings. */
.task-card-finish > .task-card-backdrop,
[data-task-background-preview] > .task-card-backdrop { display:block; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; background:var(--task-color,transparent); opacity:var(--task-background-preview-opacity,var(--task-background-opacity,1)); }
.task-card-finish.task-card-finish,
[data-task-background-preview] { background:transparent!important; isolation:isolate; }
.task-details-dialog > .task-card-backdrop { background:var(--task-color,var(--surface,#fffdf8)); }
.planner-task:not(.is-colored):hover:where(:not([data-touch-input] *)) > .task-card-backdrop { background:color-mix(in srgb,var(--surface,#fffdf8) 55%,transparent); }
:is(.planner-shell,.custom-preview-viewport):has(> .theme-picture-background) .planner-task:not(.is-colored) > .task-card-backdrop { background:color-mix(in srgb,var(--paper,#f8f5ee) 90%,transparent); }
.task-card-is-transparent.task-card-is-transparent,
[data-task-background-preview] { border-color:color-mix(in srgb,var(--task-color,var(--line,#dcd8ce)) calc(var(--task-background-preview-opacity,var(--task-background-opacity,1)) * 100%),transparent); }
.task-card-finish .task-more { background:transparent; }
[data-task-background-preview] .task-more { background:transparent!important; box-shadow:none; }

.task-card-finish > .task-card-backdrop > .task-card-light { display:block; position:absolute; inset:0; z-index:1; overflow:hidden; border-radius:inherit; pointer-events:none; opacity:var(--task-finish-strength,.55); }
.task-card-light::before,
.task-card-light::after { content:""; position:absolute; inset:-55%; pointer-events:none; background-repeat:no-repeat; }
/* Keep the finish visible while its complete editor surface moves. Independently
   animating large gradients/masks during that scale competes for raster work. */
.task-details-dialog[data-task-details-pending] > .task-card-backdrop > .task-card-light::before,
.task-details-dialog[data-task-details-pending] > .task-card-backdrop > .task-card-light::after,
.task-details-dialog[data-task-details-animating] > .task-card-backdrop > .task-card-light::before,
.task-details-dialog[data-task-details-animating] > .task-card-backdrop > .task-card-light::after,
body:has(.task-details-layer) .planner-shell .task-card-light::before,
body:has(.task-details-layer) .planner-shell .task-card-light::after { animation-play-state:paused; }
.task-card-finish--glow {
    --task-glow-color:var(--task-color);
    --task-glow-edge:color-mix(in srgb,var(--task-glow-color) 65%,#fff);
    --task-glow-shadow:var(--task-glow-elevation,0 0 0 transparent),
        0 0 0 1px color-mix(in srgb,var(--task-glow-edge) calc(var(--task-finish-strength,.55) * var(--task-background-preview-opacity,var(--task-background-opacity,1)) * 100%),transparent),
        0 0 var(--task-glow-near,8px) 1px color-mix(in srgb,var(--task-glow-color) calc(var(--task-finish-strength,.55) * var(--task-background-preview-opacity,var(--task-background-opacity,1)) * 100%),transparent),
        0 0 var(--task-glow-far,20px) var(--task-glow-spread,2px) color-mix(in srgb,var(--task-glow-color) calc(var(--task-finish-strength,.55) * var(--task-background-preview-opacity,var(--task-background-opacity,1)) * 75%),transparent);
}
/* Glow keeps the flat surface intact; only the host's outer shadow emits light. */
.task-card-finish--glow > .task-card-backdrop > .task-card-light { display:none; }
.task-card-finish--flow > .task-card-backdrop > .task-card-light::before { inset:-95% -35%; background:conic-gradient(from 35deg at 48% 52%,var(--task-color),var(--task-finish-accent) 20%,var(--task-finish-glint) 35%,var(--task-color) 48%,var(--task-finish-depth) 68%,var(--task-finish-accent) 84%,var(--task-color)); animation:task-flow-turn var(--task-finish-duration,24s) linear infinite; }
.task-card-finish--flow > .task-card-backdrop > .task-card-light::after { inset:0; background:radial-gradient(ellipse at 18% 80%,var(--task-color),transparent 72%); }
.task-card-finish--shimmer > .task-card-backdrop > .task-card-light::before { inset:0; background:linear-gradient(125deg,var(--task-finish-depth),var(--task-color) 35%,var(--task-finish-accent) 72%,var(--task-color)); }
.task-card-finish--shimmer > .task-card-backdrop > .task-card-light::after { inset:-30% -70%; background:linear-gradient(112deg,transparent 31%,var(--task-finish-accent) 40%,var(--task-finish-glint) 48%,var(--task-finish-accent) 53%,transparent 63%); transform:translateX(-35%); animation:task-shimmer-sweep var(--task-finish-duration,24s) ease-in-out infinite; }

/* New finishes use the same contrast-checked palette as Flow and Shimmer.
   Only the two clipped decorative layers move; task geometry never changes. */
.task-card-finish--bubbles > .task-card-backdrop > .task-card-light::before {
    inset:-12px -8%;
    background:
        radial-gradient(circle at 32% 27%,var(--task-finish-glint) 0 3%,transparent 12%) 84% 18% / 62px 62px,
        radial-gradient(circle,color-mix(in srgb,var(--task-finish-accent) 18%,transparent) 0 46%,var(--task-finish-accent) 49%,var(--task-finish-glint) 53%,transparent 58%) 84% 18% / 62px 62px,
        radial-gradient(circle at 32% 27%,var(--task-finish-glint) 0 3%,transparent 12%) 12% 95% / 40px 40px,
        radial-gradient(circle,color-mix(in srgb,var(--task-finish-accent) 20%,transparent) 0 44%,var(--task-finish-glint) 49%,var(--task-finish-accent) 53%,transparent 59%) 12% 95% / 40px 40px,
        radial-gradient(circle at 32% 27%,var(--task-finish-glint) 0 3%,transparent 12%) 49% 5% / 26px 26px,
        radial-gradient(circle,transparent 0 43%,var(--task-finish-accent) 47%,var(--task-finish-glint) 52%,transparent 61%) 49% 5% / 26px 26px,
        radial-gradient(circle,transparent 0 43%,var(--task-finish-glint) 49%,var(--task-finish-accent) 54%,transparent 61%) 95% 95% / 22px 22px,
        radial-gradient(circle,transparent 0 43%,var(--task-finish-glint) 48%,var(--task-finish-accent) 54%,transparent 61%) 31% 66% / 16px 16px;
    background-repeat:no-repeat;
    transform:translate3d(0,0,0);
    animation:task-bubbles-float calc(var(--task-finish-duration,24s) * .55) ease-in-out infinite;
}
.task-card-finish--bubbles > .task-card-backdrop > .task-card-light::after {
    inset:-12px -8%;
    background:
        radial-gradient(circle at 32% 27%,var(--task-finish-glint) 0 3%,transparent 12%) 64% 76% / 44px 44px,
        radial-gradient(circle,color-mix(in srgb,var(--task-finish-accent) 18%,transparent) 0 46%,var(--task-finish-accent) 49%,var(--task-finish-glint) 53%,transparent 58%) 64% 76% / 44px 44px,
        radial-gradient(circle at 32% 27%,var(--task-finish-glint) 0 3%,transparent 12%) 25% 22% / 32px 32px,
        radial-gradient(circle,transparent 0 43%,var(--task-finish-accent) 47%,var(--task-finish-glint) 52%,transparent 61%) 25% 22% / 32px 32px,
        radial-gradient(circle,transparent 0 43%,var(--task-finish-glint) 49%,var(--task-finish-accent) 54%,transparent 61%) 43% 88% / 22px 22px,
        radial-gradient(circle,transparent 0 43%,var(--task-finish-glint) 49%,var(--task-finish-accent) 54%,transparent 61%) 74% 12% / 18px 18px,
        radial-gradient(circle,transparent 0 43%,var(--task-finish-glint) 49%,var(--task-finish-accent) 54%,transparent 61%) 8% 42% / 16px 16px,
        radial-gradient(circle,transparent 0 43%,var(--task-finish-glint) 49%,var(--task-finish-accent) 54%,transparent 61%) 91% 58% / 12px 12px,
        radial-gradient(circle,transparent 0 43%,var(--task-finish-glint) 49%,var(--task-finish-accent) 54%,transparent 61%) 55% 38% / 14px 14px;
    background-repeat:no-repeat;
    animation:task-bubbles-drift calc(var(--task-finish-duration,24s) * .4) ease-in-out infinite;
    animation-delay:calc(var(--task-finish-duration,24s) * -.17);
}

/* Galaxy replaces Water while retaining its persisted style identity. A softly
   turning nebula and luminous core sit behind an independent, fine star field. */
.task-card-finish--water > .task-card-backdrop > .task-card-light {
    container-type:size;
    /* Give low and medium intensity enough exposure to reveal the spiral.
       Zero still removes the finish, and full intensity uses the safe palette. */
    opacity:calc(var(--task-finish-strength,.55) * (2 - var(--task-finish-strength,.55)));
    background:
        radial-gradient(ellipse at 74% 44%,color-mix(in srgb,var(--task-finish-accent) 30%,transparent),transparent 64%),
        linear-gradient(145deg,var(--task-finish-depth),var(--task-color) 44%,var(--task-finish-depth));
}
.task-card-finish--water > .task-card-backdrop > .task-card-light::before {
    inset:calc(-50% - 64px) -32% calc(-50% - 64px) 8%;
    inset:calc(-50% - 15cqw) -32% calc(-50% - 15cqw) 8%;
    background:
        radial-gradient(ellipse at 52% 50%,var(--task-finish-glint) 0 3%,transparent 24%),
        linear-gradient(122deg,var(--task-finish-accent) 18%,var(--task-finish-glint) 50% 54%,var(--task-finish-accent) 84%);
    /* Match the color field to the mask's 640:400 disk, including tall editors. */
    background-size:100% 77.5cqw;
    background-position:center;
    mask-image:url("images/task-galaxy-nebula.svg");
    mask-size:100% auto;
    mask-position:center;
    mask-repeat:no-repeat;
    transform-origin:52% 50%;
    transform:translate3d(-2%,1%,0) rotate(-7deg) scale(1.04);
    animation:task-galaxy-orbit calc(var(--task-finish-duration,24s) * 1.8) ease-in-out infinite;
}
.task-card-finish--water > .task-card-backdrop > .task-card-light::after {
    inset:-16px;
    background:var(--task-finish-glint);
    mask-image:url("images/task-galaxy-stars.svg");
    mask-size:420px 280px;
    mask-repeat:repeat;
    transform:translate3d(-5px,3px,0);
    animation:task-galaxy-parallax calc(var(--task-finish-duration,24s) * 2.4) ease-in-out infinite;
}

/* Cel shading: a lit upper face, a calm midtone, and a grounded lower shadow.
   The legacy anime selector keeps saved cards and presets compatible. */
.task-card-finish--anime > .task-card-backdrop > .task-card-light::before {
    inset:0;
    background:linear-gradient(180deg,
        var(--task-finish-glint) 0 16%,
        color-mix(in srgb,var(--task-finish-glint) 40%,var(--task-color)) 16% 28%,
        var(--task-color) 28% 76%,
        var(--task-finish-depth) 76% 100%);
}
.task-card-finish--anime > .task-card-backdrop > .task-card-light::after {
    inset:0;
    border-radius:inherit;
    box-shadow:inset 0 1px 0 var(--task-finish-glint),inset 0 -2px 0 var(--task-finish-depth);
}

/* Anime blush: two feathered cheeks anchored to the outer edges. The mask
   carries exactly three rounded strokes per cheek, with no moving layers. */
.task-card-finish--blush { --task-blush-width:56px; --task-blush-height:36px; }
.task-card-finish--blush > .task-card-backdrop > .task-card-light::before,
.task-card-finish--blush > .task-card-backdrop > .task-card-light::after {
    inset:auto;
    top:50%;
    width:var(--task-blush-width,56px);
    height:var(--task-blush-height,36px);
    background:var(--task-finish-accent);
    mask:url("images/task-anime-blush.svg") center / 100% 100% no-repeat;
    transform:translateY(-50%);
}
/* Fixed dimensions keep narrow cards from shrinking the cheeks. The full
   editor has room for a larger version, independent of the viewport width. */
.task-details-dialog.task-card-finish--blush {
    --task-blush-width:144px;
    --task-blush-height:92px;
}
/* Overlay the finish without changing layout or intercepting completion clicks.
   Blush stays above the completed fill; the checkmark remains crisp above it. */
.task-card-finish--blush > .task-card-backdrop > .task-card-light {
    z-index:1;
    /* Give the soft mask enough coverage at normal intensity. Zero still hides it. */
    opacity:calc(var(--task-finish-strength,.55) * (2 - var(--task-finish-strength,.55)));
}
.planner-task.task-card-finish--blush .task-check svg { position:relative; z-index:2; }
/* Keep ink above the stronger tint without moving the content. */
.planner-task.task-card-finish--blush > .task-content,
.task-details-dialog.task-card-finish--blush .task-description-editor { position:relative; z-index:2; }
/* A fine base-colored outline protects ink where the bright cheek passes
   behind it, without turning the decoration into a dark shadow. */
.planner-task.task-card-finish--blush > .task-content,
.task-details-dialog.task-card-finish--blush :is(.task-description-editor,.task-details-title-row) {
    text-shadow:-1px 0 var(--task-color),1px 0 var(--task-color),
        0 -1px var(--task-color),0 1px var(--task-color);
}
.task-card-finish--blush > .task-card-backdrop > .task-card-light::before { left:-4px; }
.task-card-finish--blush > .task-card-backdrop > .task-card-light::after { right:-4px; }

/* Whiskers turns the card into a cat face: rounded ears rise from the top edge
   in the card color, a pink nose sits in the middle, and tapered whiskers reach
   in from both side edges. The card keeps its size and position; the ears may
   overlap the task above, and the face never intercepts pointer input and stays
   behind text. The whiskers stay inside the card: anything past its sides would
   be cut by list edges and would make lists scrollable sideways, which also
   forces those lists onto extra compositor layers. */
:is(.planner-task,.month-mobile-task,.suggestion,.timeline-unscheduled-task,.task-details-dialog,.task-appearance-sample).task-card-finish--whiskers { overflow:visible; }
.task-card-finish--whiskers > .task-card-backdrop { overflow:visible; }
.task-card-finish--whiskers > .task-card-backdrop > .task-card-light::before,
.task-card-finish--whiskers > .task-card-backdrop > .task-card-light::after { display:none; }
/* Only the whiskers (card ink) and the ears (card color) need masks, and each
   is one element with a mask layer per side and no transform. The fixed-color
   nose and inner ears are plain background images, so a card adds two paint
   chunks rather than one per shape. */
.task-card-whiskers-face {
    --whiskers-width:36px; --whiskers-height:22px; --whiskers-reach:-3px;
    --whiskers-ear-width:30px; --whiskers-ear-height:26px; --whiskers-ear-inset:max(10px,12%);
    --whiskers-nose-width:14px; --whiskers-nose-height:10px; --whiskers-nose-y:50%;
    position:absolute; inset:0; z-index:2; pointer-events:none;
    background:url("images/task-whisker-nose-pink.svg?v=1") 50% var(--whiskers-nose-y) / var(--whiskers-nose-width) var(--whiskers-nose-height) no-repeat;
}
.task-card-whiskers-face::before {
    content:""; position:absolute; left:calc(var(--whiskers-reach) * -1); right:calc(var(--whiskers-reach) * -1);
    top:calc(50% - var(--whiskers-height) / 2); height:var(--whiskers-height);
    background:var(--task-color-ink,#262823);
    mask:url("images/task-whiskers.svg?v=6") left center / var(--whiskers-width) 100% no-repeat,
        url("images/task-whiskers-right.svg?v=1") right center / var(--whiskers-width) 100% no-repeat;
    opacity:var(--task-finish-strength,.55);
}
/* The ears overlap the card by 1 px so they sit flush on its top edge. */
.task-card-whiskers-ears {
    position:absolute; left:0; right:0; top:calc(1px - var(--whiskers-ear-height)); height:var(--whiskers-ear-height);
    background:url("images/task-whisker-ear-inner-pink.svg?v=1") left var(--whiskers-ear-inset) top 0 / var(--whiskers-ear-width) 100% no-repeat,
        url("images/task-whisker-ear-inner-pink-right.svg?v=1") right var(--whiskers-ear-inset) top 0 / var(--whiskers-ear-width) 100% no-repeat,
        var(--task-color,#f3dccb);
    mask:url("images/task-whisker-ear.svg?v=4") left var(--whiskers-ear-inset) top 0 / var(--whiskers-ear-width) 100% no-repeat,
        url("images/task-whisker-ear-right.svg?v=1") right var(--whiskers-ear-inset) top 0 / var(--whiskers-ear-width) 100% no-repeat;
}
/* Picker tiles have little padding, so the sample face stays compact. The
   sample gives up 10 px of height for its ears, keeping the tile its usual
   size, and the nose sits below the placeholder lines. */
.task-appearance-choice .task-appearance-sample.task-card-finish--whiskers { margin-top:10px; min-height:58px; }
.task-appearance-sample.task-card-finish--whiskers .task-card-whiskers-face {
    --whiskers-width:26px; --whiskers-height:16px; --whiskers-reach:-2px;
    --whiskers-ear-width:14px; --whiskers-ear-height:12px; --whiskers-ear-inset:18%;
    --whiskers-nose-width:10px; --whiskers-nose-height:7px; --whiskers-nose-y:74%;
}
/* The editor has room around it, so its larger whisker tips may pass its edges. */
.task-details-dialog.task-card-finish--whiskers .task-card-whiskers-face {
    --whiskers-width:64px; --whiskers-height:40px; --whiskers-reach:10px;
    --whiskers-ear-width:64px; --whiskers-ear-height:56px; --whiskers-ear-inset:14%;
}
.task-details-dialog.task-card-finish--whiskers .task-card-whiskers-face { background:none; }
@media (max-width:800px) {
    .task-card-whiskers-face { --whiskers-width:30px; --whiskers-height:19px; --whiskers-reach:-2px; --whiskers-ear-width:23px; --whiskers-ear-height:20px; }
    .task-details-dialog.task-card-finish--whiskers .task-card-whiskers-face { --whiskers-width:58px; --whiskers-height:36px; --whiskers-ear-width:46px; --whiskers-ear-height:40px; }
}
/* Saved-preset swatches are built by script without a face, so their tiny
   whiskers stay on the light layer. They sit beside the swatch, on the menu
   surface, so they use its ink, captured above the cards because colored cards
   replace --ink. */
:is(body,.planner-shell,.custom-preview-viewport,.task-details-layer,.task-appearance-picker) { --whiskers-page-ink:var(--ink,#262823); }
.board-saved-color-swatch.task-card-finish--whiskers > .task-card-backdrop > .task-card-light { overflow:visible; }
.board-saved-color-swatch.task-card-finish--whiskers > .task-card-backdrop > .task-card-light::before,
.board-saved-color-swatch.task-card-finish--whiskers > .task-card-backdrop > .task-card-light::after {
    display:block; inset:auto; top:50%; width:16px; height:16px;
    background:var(--whiskers-page-ink,#262823);
    mask:url("images/task-whiskers.svg?v=6") center / contain no-repeat;
    filter:drop-shadow(0 0 .6px var(--task-color-ink,#262823));
    transform:translateY(-50%);
}
.board-saved-color-swatch.task-card-finish--whiskers > .task-card-backdrop > .task-card-light::before { left:-6px; }
.board-saved-color-swatch.task-card-finish--whiskers > .task-card-backdrop > .task-card-light::after { right:-6px; transform:translateY(-50%) scaleX(-1); }
.board-saved-color-swatch.task-card-finish--whiskers .task-card-whiskers-face { display:none; }

/* Broad aurora ribbons, with light following their curved edges. */
.task-card-finish--aurora > .task-card-backdrop > .task-card-light::before {
    inset:-70% -18%;
    background:
        radial-gradient(ellipse at 50% 112%,transparent 36%,var(--task-finish-depth) 42%,var(--task-finish-accent) 51%,var(--task-finish-glint) 54%,transparent 65%),
        radial-gradient(ellipse at 8% -12%,transparent 27%,var(--task-finish-accent) 38%,var(--task-finish-glint) 42%,transparent 55%);
    transform:translate3d(-3%,0,0) rotate(-12deg);
    animation:task-aurora-ribbon var(--task-finish-duration,24s) ease-in-out infinite;
}
.task-card-finish--aurora > .task-card-backdrop > .task-card-light::after {
    inset:-25% -10%;
    background:linear-gradient(112deg,transparent 22%,color-mix(in srgb,var(--task-finish-accent) 55%,transparent) 39%,var(--task-finish-glint) 43%,transparent 51% 64%,var(--task-finish-accent) 73%,transparent 88%);
    opacity:.4;
    transform:translate3d(3%,0,0) rotate(6deg);
    animation:task-aurora-veil calc(var(--task-finish-duration,24s) * 1.4) ease-in-out infinite;
}

/* Two star fields drift and twinkle at different speeds behind the task text. */
.task-card-finish--stardust > .task-card-backdrop > .task-card-light::before {
    inset:-8px;
    background:
        radial-gradient(circle at 12% 52%,var(--task-finish-glint) 0 1px,transparent 1.7px),
        radial-gradient(circle at 25% 18%,var(--task-finish-glint) 0 .8px,transparent 1.4px),
        radial-gradient(circle at 32% 83%,var(--task-finish-glint) 0 1.2px,transparent 1.9px),
        radial-gradient(circle at 42% 43%,var(--task-finish-glint) 0 .7px,transparent 1.3px),
        radial-gradient(circle at 52% 14%,var(--task-finish-glint) 0 1px,transparent 1.6px),
        radial-gradient(circle at 61% 57%,var(--task-finish-glint) 0 .8px,transparent 1.4px),
        radial-gradient(circle at 76% 86%,var(--task-finish-glint) 0 1.1px,transparent 1.8px),
        radial-gradient(circle at 89% 45%,var(--task-finish-glint) 0 .8px,transparent 1.4px),
        radial-gradient(ellipse at 85% 20%,var(--task-finish-accent),transparent 62%),
        radial-gradient(ellipse at 5% 100%,var(--task-finish-accent),transparent 48%),
        linear-gradient(135deg,var(--task-finish-depth),var(--task-color) 65%,var(--task-finish-depth));
    opacity:.45;
    animation:task-stardust-drift calc(var(--task-finish-duration,24s) * .6) ease-in-out infinite;
    animation-delay:calc(var(--task-finish-duration,24s) * -.21);
}
.task-card-finish--stardust > .task-card-backdrop > .task-card-light::after {
    inset:-6px;
    background:
        radial-gradient(ellipse 1px 5px at 45% 61%,var(--task-finish-glint) 20%,transparent),
        radial-gradient(ellipse 5px 1px at 45% 61%,var(--task-finish-glint) 20%,transparent),
        radial-gradient(ellipse 1px 4px at 69% 32%,var(--task-finish-glint) 20%,transparent),
        radial-gradient(ellipse 4px 1px at 69% 32%,var(--task-finish-glint) 20%,transparent),
        radial-gradient(circle at 5% 70%,var(--task-finish-glint) 0 .8px,transparent 1.4px),
        radial-gradient(circle at 29% 54%,var(--task-finish-glint) 0 1px,transparent 1.6px),
        radial-gradient(circle at 48% 29%,var(--task-finish-glint) 0 .7px,transparent 1.3px),
        radial-gradient(circle at 80% 68%,var(--task-finish-glint) 0 .9px,transparent 1.5px),
        radial-gradient(ellipse 1.5px 8px at 84% 26%,var(--task-finish-glint) 20%,transparent),
        radial-gradient(ellipse 8px 1.5px at 84% 26%,var(--task-finish-glint) 20%,transparent),
        radial-gradient(ellipse 1.2px 5px at 18% 78%,var(--task-finish-glint) 20%,transparent),
        radial-gradient(ellipse 5px 1.2px at 18% 78%,var(--task-finish-glint) 20%,transparent),
        radial-gradient(circle at 8% 24%,var(--task-finish-glint) 0 1px,transparent 1.5px),
        radial-gradient(circle at 36% 12%,var(--task-finish-glint) 0 .9px,transparent 1.5px),
        radial-gradient(circle at 56% 77%,var(--task-finish-glint) 0 .6px,transparent 1.2px),
        radial-gradient(circle at 72% 57%,var(--task-finish-glint) 0 .8px,transparent 1.3px),
        radial-gradient(circle at 95% 80%,var(--task-finish-glint) 0 1px,transparent 1.6px),
        radial-gradient(circle at 65% 8%,var(--task-finish-accent) 0 1px,transparent 1.5px);
    opacity:.85;
    animation:task-stardust-breathe calc(var(--task-finish-duration,24s) * .35) ease-in-out infinite;
}

/* Two broad glass planes turn around different vertices. The facet colors and
   their boundaries move together, creating refraction as the planes intersect. */
.task-card-finish--prism > .task-card-backdrop > .task-card-light { container-type:size; }
.task-card-finish--prism > .task-card-backdrop > .task-card-light::before {
    /* Overscan both axes to cover rotated corners on shallow and tall cards. */
    inset:calc(-50% - 96px) calc(-20% - 48px);
    inset:calc(-50% - 22cqw) calc(-20% - 14cqh);
    background:conic-gradient(from 24deg at 62% 50%,
        var(--task-finish-accent) 0deg 58deg,
        var(--task-color) 58deg 136deg,
        var(--task-finish-depth) 136deg 198deg,
        var(--task-finish-glint) 198deg 254deg,
        var(--task-color) 254deg 312deg,
        var(--task-finish-accent) 312deg);
    transform-origin:62% 50%;
    transform:translate3d(-4%,1%,0) rotate(-9deg);
    animation:task-prism-turn var(--task-finish-duration,24s) ease-in-out infinite;
}
.task-card-finish--prism > .task-card-backdrop > .task-card-light::after {
    inset:calc(-50% - 96px) calc(-20% - 48px);
    inset:calc(-50% - 22cqw) calc(-20% - 14cqh);
    background:conic-gradient(from 68deg at 32% 50%,
        transparent 0deg 62deg,
        color-mix(in srgb,var(--task-finish-glint) 64%,transparent) 62deg 124deg,
        color-mix(in srgb,var(--task-finish-accent) 38%,transparent) 124deg 184deg,
        transparent 184deg 242deg,
        color-mix(in srgb,var(--task-finish-depth) 32%,transparent) 242deg 306deg,
        color-mix(in srgb,var(--task-finish-glint) 46%,transparent) 306deg);
    transform-origin:32% 50%;
    transform:translate3d(3%,-1%,0) rotate(11deg);
    animation:task-prism-refract var(--task-finish-duration,24s) ease-in-out infinite;
}
/* Premium: the Premium menu's still deep space on a task (premium-space.css),
   painted once on the backdrop. The light layer stays empty, and a soft shadow
   keeps white ink crisp where a long title reaches the planet's glow. */
.task-card-finish--premium > .task-card-backdrop > .task-card-light { display:none; }
.task-card-finish--premium { text-shadow:0 1px 3px rgb(0 0 0 / .55); }
.planner-task.task-card-finish .task-more { background:transparent; }
.task-card-finish.is-still > .task-card-backdrop > .task-card-light::before,
.task-card-finish.is-still > .task-card-backdrop > .task-card-light::after,
.task-card-finish.is-complete > .task-card-backdrop > .task-card-light::before,
.task-card-finish.is-complete > .task-card-backdrop > .task-card-light::after { animation:none; }
.task-card-finish.is-still.task-card-finish--shimmer > .task-card-backdrop > .task-card-light::after { transform:translateX(8%); }
@keyframes task-flow-turn { from { transform:rotate(0deg) scale(1.2); } to { transform:rotate(360deg) scale(1.2); } }
@keyframes task-shimmer-sweep { 0%,12% { transform:translateX(-35%); } 62%,100% { transform:translateX(35%); } }
/* Separate rhythms give the large and small bubbles a gentle, lively parallax. */
@keyframes task-bubbles-float {
    0%,100% { transform:translate3d(-1%,6px,0); }
    35% { transform:translate3d(2%,-12px,0); }
    70% { transform:translate3d(-2%,-4px,0); }
}
@keyframes task-bubbles-drift {
    0%,100% { transform:translate3d(2%,-8px,0); }
    30% { transform:translate3d(-2%,8px,0); }
    65% { transform:translate3d(1%,-16px,0); }
}
@keyframes task-galaxy-orbit { 0%,100% { transform:translate3d(-2%,1%,0) rotate(-7deg) scale(1.04); } 50% { transform:translate3d(2%,-1%,0) rotate(6deg) scale(.98); } }
@keyframes task-galaxy-parallax { 0%,100% { transform:translate3d(-5px,3px,0); } 50% { transform:translate3d(5px,-3px,0); } }
@keyframes task-aurora-ribbon { 0%,100% { transform:translate3d(-3%,0,0) rotate(-12deg); } 50% { transform:translate3d(3%,5%,0) rotate(-5deg); } }
@keyframes task-aurora-veil { 0%,100% { transform:translate3d(3%,0,0) rotate(6deg); } 50% { transform:translate3d(-4%,0,0) rotate(-2deg); } }
@keyframes task-stardust-breathe {
    0%,100% { opacity:.85; transform:translate3d(-2px,2px,0); }
    30% { opacity:.4; transform:translate3d(2px,-1px,0); }
    60% { opacity:1; transform:translate3d(4px,-4px,0); }
    80% { opacity:.6; transform:translate3d(0,-2px,0); }
}
@keyframes task-stardust-drift {
    0%,100% { opacity:.5; transform:translate3d(3px,-3px,0); }
    40% { opacity:.85; transform:translate3d(-3px,3px,0); }
    75% { opacity:.35; transform:translate3d(-5px,-1px,0); }
}
@keyframes task-prism-turn { 0%,100% { transform:translate3d(-4%,1%,0) rotate(-9deg); } 50% { transform:translate3d(4%,-1%,0) rotate(12deg); } }
@keyframes task-prism-refract { 0%,100% { transform:translate3d(3%,-1%,0) rotate(11deg); } 50% { transform:translate3d(-3%,1%,0) rotate(-13deg); } }
@media (prefers-reduced-motion:reduce) {
    .task-card-finish > .task-card-backdrop > .task-card-light::before,
    .task-card-finish > .task-card-backdrop > .task-card-light::after { animation:none; }
    .task-card-finish--shimmer > .task-card-backdrop > .task-card-light::after { transform:translateX(8%); }
}
@media (forced-colors:active) {
    .task-card-backdrop, .task-card-light, .task-card-picture { display:none!important; }
    .task-card-has-picture { --task-picture-text-shadow:none!important; --task-picture-icon-shadow:none!important; }
    .task-card-finish.task-card-finish, [data-task-background-preview] { background:Canvas!important; color:CanvasText!important; --ink:CanvasText; --ink-soft:CanvasText; --muted:CanvasText; --task-color-ink:CanvasText!important; border-color:CanvasText!important; }
}
@media print {
    .task-card-backdrop, .task-card-light, .task-card-picture { display:none!important; }
    .task-card-has-picture { --task-picture-text-shadow:none!important; --task-picture-icon-shadow:none!important; }
    .task-card-finish.task-card-finish, [data-task-background-preview] { --task-color-ink:#000!important; --ink:#000; --ink-soft:#000; --muted:#000; color:#000!important; background:#fff!important; border-color:#888!important; box-shadow:none!important; text-shadow:none!important; }
    .task-card-finish .task-content, .task-card-finish :is(.task-description-editor,.task-details-title-row) { text-shadow:none!important; }
}