/* Partly owned bundles (study started 8 October 2026). The designs are listed at the top of partown-studies.js.
   Loaded only by compare/partly-owned-bundles-live.html. Colours are the shop's own: forest, the greens, mint, white. */
.po-card{--po-ring:64px}
.po-card :is(.bundle-buy,footer){position:relative!important}
/* The ring: the owned card's, part filled. */
.po-ring{position:absolute;right:0;z-index:2;width:var(--po-ring);height:var(--po-ring);display:grid;place-items:center;pointer-events:none;color:#fff}
.po-ring svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke-width:6}
.po-ring .po-track{stroke:currentColor;opacity:.22}
.po-ring .po-arc{stroke:currentColor;stroke-linecap:round}
.po-ring b{position:relative;font:700 calc(var(--po-ring)*.27)/1 var(--sans);letter-spacing:-.01em;color:inherit}
.po-card:is(.po-k-ring,.po-k-mint) :is(.bundle-caption,.sbx-price small){padding-right:calc(var(--po-ring) + 12px)}
/* On a white Smart Bundle card the ring is forest. */
#smart article.fcl-companion.po-card .po-ring{color:var(--forest)}
#smart article.fcl-companion.po-card .po-track{opacity:.16}

/* Like fully owned: the owned card's surface (pale mint, no watermark, forest words) with a price and a solid button. */
#smart article.fcl-card.po-k-mint{background:var(--mint)!important;border-color:var(--mint-deep)!important;color:var(--forest)!important}
#shop .subject-bundle.po-k-mint{background:var(--mint)!important;color:var(--forest)!important;box-shadow:none!important}
#shop .subject-bundle.po-k-mint::after{content:'';position:absolute;inset:0;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--mint-deep);pointer-events:none}
#smart article.fcl-lead.po-k-mint .fcl-publisher::before,#shop .subject-bundle.po-k-mint .bundle-glyph{display:none!important}
:is(#smart article.fcl-card,#shop .subject-bundle).po-k-mint :is(h2,h3,.price){color:var(--forest)!important}
:is(#smart article.fcl-card,#shop .subject-bundle).po-k-mint :is(.fcl-meta,.bundle-meta,.fcl-contents li,.bundle-caption,.sbx-price small,del){color:var(--muted)!important}
:is(#smart article.fcl-card,#shop .subject-bundle).po-k-mint .fcl-contents li::after{color:var(--line-strong)!important}
#smart article.fcl-card.po-k-mint footer{border-color:transparent!important}
:is(#smart article.fcl-card,#shop .subject-bundle).po-k-mint .text-button{color:var(--green-hover)!important;text-decoration-color:var(--green)!important;border-color:var(--green)!important}
:is(#smart article.fcl-card,#shop .subject-bundle).po-k-mint button.button[data-add]{background:var(--forest)!important;border-color:var(--forest)!important;color:#fff!important}
:is(#smart article.fcl-card,#shop .subject-bundle).po-k-mint .po-ring{color:var(--forest)}
:is(#smart article.fcl-card,#shop .subject-bundle).po-k-mint .po-track{opacity:.16}
/* "Add the other 5" stays on one line, the number with its words (audit V-400, 9 October 2026). On a very narrow screen
   the button used to be squeezed and left the number alone on a second line. It keeps its natural width while it fits. With enlarged text the actions can stack and the label can wrap,
   keeping "other 5" together. The text is not made smaller. */
#shop .subject-bundle.po-card .actions{flex-wrap:wrap}
#shop .subject-bundle.po-card .actions>button[data-add]{flex:none;max-width:100%;white-space:normal}
/* In the cart: the buttons keep the height this study's own card had before the press (see the script). */
.po-held .actions{min-height:var(--po-acts)!important}

/* Round two. Owned badge: the sheets' own "You own it" badge, on the card: a tick and the count in a line, beside the price. */
.po-pill{position:absolute;right:0;z-index:2;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px;border:1.5px solid currentColor;border-radius:10px;font:600 14.5px/1 var(--sans);color:#fff;white-space:nowrap;pointer-events:none}
.po-pill svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
#smart article.fcl-companion.po-card .po-pill{color:var(--green);background:#fff}
/* Bar: one part for each sheet in the line under the price, the owned ones lit. */
.po-card .po-barline{display:flex!important;align-items:center;gap:12px}
.po-barline span{flex:none}
.po-bar{flex:1;min-width:0;display:flex;gap:3px;height:6px;color:#fff}
.po-bar i{flex:1;border-radius:3px;background:currentColor;opacity:.24}
.po-bar i.on{opacity:1}
#smart article.fcl-companion.po-card .po-bar{color:var(--green)}
/* More than 24 sheets: one bar, filled to the share owned (never thinner than 6px, so a small share still shows). */
.po-bar.po-solid{gap:0;border-radius:3px;overflow:hidden;background:color-mix(in srgb,currentColor 24%,transparent)}
.po-bar.po-solid i.on{flex:none;min-width:6px;border-radius:3px}

/* Round three. Ring fills: in the cart the rest of the ring is drawn in the cart's green, behind the white owned part. */
.po-ring .po-add{stroke:var(--green);stroke-linecap:round}
.po-ring.po-go .po-add{animation:po-fill .5s cubic-bezier(.22,.8,.3,1) both}
.po-ring.po-back .po-add{animation:po-unfill .2s ease-in both}
@keyframes po-fill{from{stroke-dashoffset:var(--po-len)}to{stroke-dashoffset:0}}
@keyframes po-unfill{from{stroke-dashoffset:0;opacity:1}90%{opacity:1}to{stroke-dashoffset:var(--po-len);opacity:0}}
/* Fills, then a tick: a green tick on the ring's corner, landing as the ring closes. */
.po-ring .po-tick{position:absolute;top:1%;right:1%;width:30%;height:30%;display:grid;place-items:center;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--forest)}
.po-ring .po-tick svg{position:static;width:58%;height:58%;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.po-ring.po-go .po-tick{animation:po-land .18s ease-out .44s both}
@keyframes po-land{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
#smart article.fcl-companion.po-card .po-tick{box-shadow:0 0 0 3px #fff}
@media (prefers-reduced-motion:reduce){.po-ring.po-go .po-add,.po-ring.po-go .po-tick{animation:none}.po-ring.po-back .po-add{animation:none;opacity:0}}

/* Round four. In the cart the watermark is blurred: its paint only, never its place or size. */
.po-blur-s{--po-blur:5px}
.po-blur-m{--po-blur:14px}
/* The blur is on a layer round the watermark (see soften() in the script): on the watermark itself its own shape cuts it off. */
/* The card lifts every child but the watermark above it (position and z-index), so the layer says its own, firmly. */
:is(#shop .subject-bundle,#smart article.fcl-lead) .po-soft{position:absolute!important;inset:0!important;z-index:0!important;margin:0!important;padding:0!important;pointer-events:none;transition:filter .3s ease-out}
.po-blur-on .po-soft{filter:blur(var(--po-blur))}
.po-blur-still .po-soft{transition:none}
#smart article.fcl-lead.po-soft-swap .fcl-publisher::before{display:none!important}
@media (prefers-reduced-motion:reduce){.po-soft{transition:none}}

/* Round five. Light fill: the part in the cart is drawn in the shop's light mint, which shows up far more on the dark card.
   On a white Smart Bundle card it stays green: light mint on white would hardly show. */
.po-ring.po-light .po-add{stroke:var(--mint-deep)}
#smart article.fcl-companion.po-card .po-ring.po-light .po-add{stroke:var(--green)}

/* Laptop, Carried over. The ring stands in the card's top right corner. The cards lift every child (position, z-index),
   so the ring says its own firmly. No room is kept for it beside the line under the price. */
:is(#sheetStudy .ss-hero,#smart article.fcl-card,#shop .subject-bundle)>.po-ring.po-corner{position:absolute!important;z-index:2!important;margin:0!important}
.po-card.po-pc{--po-ring:72px}
.po-card.po-pc :is(.bundle-caption,.sbx-price small,.ss-hero-save){padding-right:0!important}