/* Owned states, bundles (study started 7 October 2026). Loaded only by compare/bundle-owned-states-live.html, never by the shop.
   Start every rule from the study's own wrapper class so nothing here can reach the rest of the shop.
   Phone rules first (the designs are made at 390px wide); laptop rules go under one @media(min-width:601px) block. */

/* Round two, phone (7 October 2026): a bundle the buyer owns whole. Three designs: same, quiet, slim.
   Greens, black and white only. Owned is quiet, green and visible; what is still for sale stays the loudest. */
.bs-i{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* "You own it": the sheet rows' own badge, green words in a green line with a tick. */
.bs-own{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:5px 10px;border:1.5px solid var(--green);border-radius:7px;color:var(--green);font:700 13.5px/1.3 var(--sans);white-space:nowrap}
.bs-price{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.bs-price small{display:block}
/* Same card: on a dark card the badge is white. */
.bs-same.fcl-lead .bs-own,.subject-bundle.bs-same .bs-own{border-color:#ffffff8c;color:#fff}
.subject-bundle.bs-same .bs-price{margin-bottom:12px}
/* Quiet card and One line: the card gives up its colour, its picture and its price. */
#smart article:is(.bs-quiet,.bs-slim),#shop .subject-bundle:is(.bs-quiet,.bs-slim){display:block;min-height:0;padding:18px 20px;border:1px solid var(--line-strong);border-radius:14px;background:#fff;color:var(--ink);box-shadow:none;overflow:visible}
#smart article:is(.bs-quiet,.bs-slim)::before,#smart article:is(.bs-quiet,.bs-slim)::after,#shop .subject-bundle:is(.bs-quiet,.bs-slim)::before,#shop .subject-bundle:is(.bs-quiet,.bs-slim)::after{content:none}
:is(.bs-quiet,.bs-slim) h3{margin:0;color:var(--ink);font:600 21px/1.2 var(--serif);letter-spacing:-.01em}
:is(.bs-quiet,.bs-slim) .bs-meta{margin:4px 0 0;font-size:14px;line-height:1.4;color:var(--muted)}
.bs-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--green);font:700 15px/1.3 var(--sans);text-decoration:none;white-space:nowrap}
.bs-quiet .bs-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.bs-quiet .bs-own{align-self:center}
.bs-quiet .bs-inside{min-height:36px;margin-top:2px;padding:0;font-size:14px;color:var(--muted)}
#smart article.bs-slim,#shop .subject-bundle.bs-slim{display:flex;align-items:center;gap:12px;padding:12px 16px}
.bs-slim h3{font-size:17px}
.bs-slim .bs-words{flex:1;min-width:0}
.bs-dot{display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--mint);color:var(--green)}
.bs-dot .bs-i{width:16px;height:16px}
/* The Smart Bundle cards' own rules are longer than these, so the redrawn cards insist. */
#smart article.fcl-card:is(.bs-quiet,.bs-slim){display:block!important;min-height:0!important;height:auto!important;padding:18px 20px!important;border:1px solid var(--line-strong)!important;border-radius:14px!important;background:#fff!important;color:var(--ink)!important;box-shadow:none!important}
#smart article.fcl-card.bs-slim{display:flex!important;align-items:center;gap:12px;padding:12px 16px!important}
#smart article.fcl-card:is(.bs-quiet,.bs-slim)::before,#smart article.fcl-card:is(.bs-quiet,.bs-slim)::after{content:none!important;display:none!important}
#smart article.fcl-card:is(.bs-quiet,.bs-slim) header{display:block!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important}
#smart article.fcl-card:is(.bs-quiet,.bs-slim) h3,#shop .subject-bundle:is(.bs-quiet,.bs-slim) h3{margin:0!important;color:var(--ink)!important;font:600 21px/1.2 var(--serif)!important;letter-spacing:-.01em!important}
#smart article.fcl-card.bs-slim h3,#shop .subject-bundle.bs-slim h3{font-size:17px!important}
#smart article.fcl-card:is(.bs-quiet,.bs-slim) .bs-meta{color:var(--muted)!important}

/* The watermark stays (the owner, 7 October 2026). On the white owned cards it is pale green, in the middle of the card's
   right edge, and the link moves beside the badge so nothing to press sits over it. */
#smart article.fcl-card:is(.bs-quiet,.bs-slim),#shop .subject-bundle:is(.bs-quiet,.bs-slim){position:relative!important;overflow:hidden!important}
:is(.bs-quiet,.bs-slim)>:is(header,.bs-foot,.bs-inside,.bs-words,.bs-link,.bs-dot){position:relative;z-index:1}
.bs-quiet .bs-foot{justify-content:flex-start;gap:16px}
#smart article.fcl-card:is(.bs-quiet,.bs-slim) .fcl-publisher{position:static!important;display:block!important;width:0!important;height:0!important;margin:0!important;padding:0!important;border:0!important}
#smart article.fcl-card:is(.bs-quiet,.bs-slim) .fcl-publisher::before,#shop .subject-bundle:is(.bs-quiet,.bs-slim) .bundle-glyph{content:'';display:block!important;position:absolute!important;z-index:0!important;top:50%!important;bottom:auto!important;right:-44px!important;width:168px!important;aspect-ratio:1318/1338;transform:translateY(-50%)!important;background:var(--mint)!important;-webkit-mask:url(smartnote-mark.svg) center/contain no-repeat;mask:url(smartnote-mark.svg) center/contain no-repeat}
/* One line: a smaller mark in room of its own at the end of the row, so "Open" is not over it. */
#smart article.fcl-card.bs-slim,#shop .subject-bundle.bs-slim{padding-right:74px!important}
#smart article.fcl-card.bs-slim .fcl-publisher::before,#shop .subject-bundle.bs-slim .bundle-glyph{right:-30px!important;width:96px!important}
/* The pale mark has to be seen on white: a shade deeper than the palest green, and never clipped by its holder. */
#smart article.fcl-card:is(.bs-quiet,.bs-slim) .fcl-publisher{overflow:visible!important;visibility:visible!important;opacity:1!important;clip-path:none!important}
#smart article.fcl-card:is(.bs-quiet,.bs-slim) .fcl-publisher::before,#shop .subject-bundle:is(.bs-quiet,.bs-slim) .bundle-glyph{background:var(--mint-deep,#d3e6d9)!important;opacity:.75!important;visibility:visible!important}
/* A fixed height: the shop's own rule for the mark leaves it none once the card is redrawn. */
#smart article.fcl-card:is(.bs-quiet,.bs-slim) .fcl-publisher::before,#shop .subject-bundle:is(.bs-quiet,.bs-slim) .bundle-glyph{height:171px!important}
#smart article.fcl-card.bs-slim .fcl-publisher::before,#shop .subject-bundle.bs-slim .bundle-glyph{height:98px!important}
/* The redrawn cards draw the mark with their own element (.bs-mark), so it sits at the right edge whatever the shop's
   rules for its own mark say. The rules above for .fcl-publisher and .bundle-glyph no longer match anything there. */
.bs-mark{position:absolute;z-index:0;top:50%;right:-44px;width:168px;height:171px;transform:translateY(-50%);background:var(--mint-deep);opacity:.7;pointer-events:none;-webkit-mask:url(smartnote-mark.svg) center/contain no-repeat;mask:url(smartnote-mark.svg) center/contain no-repeat}
.bs-slim .bs-mark{right:-30px;width:96px;height:98px}
/* A little smaller and further right, so the link beside the badge ends before the mark begins. */
.bs-quiet .bs-mark{right:-52px;width:150px;height:152px}
/* Same card must be the same card: the badge sits inside the price's own element and the line inside the saving's, so the
   card is as tall as it is for sale, and everything under them stays put, at every width. */
.bs-slot{display:flex!important;align-items:center}
.bs-slot .bs-own{align-self:center;letter-spacing:0}
/* The price's element keeps the height of one line of its own (large) type, though the badge inside it is smaller. */
.bs-slot{min-height:1lh;box-sizing:border-box}

/* ---- Round four: the hero card recoloured once it is owned. Same card's size and places; only the colour changes.
   The hero cards are the lead Smart Bundle card and the subject bundle card. Greens, black and white only. ---- */
/* Mint and White: a light card with dark green words. */
#smart article.fcl-lead:is(.bs-same-mint,.bs-same-white),#shop .subject-bundle:is(.bs-same-mint,.bs-same-white){color:var(--forest)!important}
/* The line round the card must not change its size: the lead card recolours the border it has, the subject card (which has none) draws its line inside. */
#smart article.fcl-lead.bs-same-mint{background:var(--mint)!important;border-color:var(--mint-deep)!important}
#shop .subject-bundle.bs-same-mint{background:var(--mint)!important;box-shadow:inset 0 0 0 1px var(--mint-deep)!important}
#smart article.fcl-lead.bs-same-white{background:#fff!important;border-color:var(--green)!important}
#shop .subject-bundle.bs-same-white{background:#fff!important;box-shadow:inset 0 0 0 1.5px var(--green)!important}
:is(#smart article.fcl-lead,#shop .subject-bundle):is(.bs-same-mint,.bs-same-white) :is(h3,p,li,small,span,del,.text-button,.owned-action){color:var(--forest)!important}
:is(#smart article.fcl-lead,#shop .subject-bundle):is(.bs-same-mint,.bs-same-white) :is(.fcl-meta,.bundle-meta,small,.bundle-caption){color:var(--muted)!important}
:is(#smart article.fcl-lead,#shop .subject-bundle):is(.bs-same-mint,.bs-same-white) li::after{color:var(--line-strong)!important}
:is(#smart article.fcl-lead,#shop .subject-bundle):is(.bs-same-mint,.bs-same-white) :is(footer,.sbx-price,.bundle-buy){border-color:var(--mint-deep)!important}
:is(#smart article.fcl-lead,#shop .subject-bundle):is(.bs-same-mint,.bs-same-white) .bs-own{border-color:var(--green)!important;color:var(--green)!important}
:is(#smart article.fcl-lead,#shop .subject-bundle):is(.bs-same-mint,.bs-same-white) .bs-own *{color:inherit!important}
:is(#smart article.fcl-lead,#shop .subject-bundle):is(.bs-same-mint,.bs-same-white) .text-button{text-decoration-color:var(--green)!important;border-color:var(--green)!important}
#shop .subject-bundle:is(.bs-same-mint,.bs-same-white) .actions a.button{background:#fff!important;border:1px solid var(--line-strong)!important;color:var(--forest)!important}
#shop .subject-bundle.bs-same-white .actions a.button{background:var(--mint)!important;border-color:var(--mint-deep)!important}
/* The watermark, a shade deeper than the card. */
#smart article.fcl-lead.bs-same-mint .fcl-publisher::before,#shop .subject-bundle.bs-same-mint .bundle-glyph{background:var(--mint-deep)!important}
#smart article.fcl-lead.bs-same-white .fcl-publisher::before,#shop .subject-bundle.bs-same-white .bundle-glyph{background:var(--mint)!important}
/* Green: the shop's brighter green in place of the dark forest; the words stay white. */
#smart article.fcl-lead.bs-same-green,#shop .subject-bundle.bs-same-green{background:var(--green)!important;border-color:var(--green)!important}
#smart article.fcl-lead.bs-same-green .fcl-publisher::before,#shop .subject-bundle.bs-same-green .bundle-glyph{background:var(--green-hover)!important}

/* ---- Round five: the owned hero card, three ways that stay rich (the pale ones looked washed out). The rules above for
   same-mint, same-white and same-green no longer match anything. Size and places are untouched. ---- */
/* Deep green: between the dark card and the bright green. */
#smart article.fcl-lead.bs-same-deep,#shop .subject-bundle.bs-same-deep{background:var(--green-hover)!important;border-color:var(--green-hover)!important}
#smart article.fcl-lead.bs-same-deep .fcl-publisher::before,#shop .subject-bundle.bs-same-deep .bundle-glyph{background:var(--forest)!important;opacity:.38}
/* Green mark: the card stays dark; its watermark lights up in the shop's green. */
#smart article.fcl-lead.bs-same-mark .fcl-publisher::before,#shop .subject-bundle.bs-same-mark .bundle-glyph{background:var(--green)!important}
/* Solid badge: the card stays dark; "You own it" is a solid white badge with dark green words. */
:is(#smart article.fcl-lead,#shop .subject-bundle).bs-same-solid .bs-own{background:#fff!important;border-color:#fff!important;color:var(--forest)!important}

/* ---- Rounds six and seven: Count in a ring (.bs-pic), the owner's picture of an owned card, on a choice of surfaces
   (.bs-sf-…). One large plain statement where the price was, a ring holding the count, a solid "Open library" button.
   The card keeps the size and the places it has for sale: the shop's own price lines stay, unseen, and the statement lies
   over them. Seven of seven and Tick watermark were deleted in round seven. ---- */
.bs-ghost{visibility:hidden!important}
.bs-pic{--ring:84px;--bs-ink:var(--forest);--bs-sub:var(--muted);--bs-sep:var(--line-strong);--bs-link:var(--green-hover);--bs-link-line:var(--green);--bs-btn:var(--forest);--bs-btn-ink:#fff;--bs-lw:1px}
#smart article.fcl-companion.bs-pic{--ring:60px}
#shop .subject-bundle.bs-pic{--ring:80px}
/* The surface: Pale mint with no watermark, the owner's pick (round nine; every other surface is deleted). The card, its
   line and its inks are variables, so a later change is one line. */
.bs-sf-pale-plain{--bs-bg:var(--mint);--bs-line:var(--mint-deep)}
#smart article.fcl-card.bs-pic{background:var(--bs-bg)!important;border-color:var(--bs-line)!important;color:var(--bs-ink)!important}
/* The smaller cards have a 1px line; where the line is 2px a second pixel inside makes it so without changing the size. */
#smart article.fcl-companion.bs-pic{box-shadow:inset 0 0 0 calc(var(--bs-lw) - 1px) var(--bs-line)!important}
/* The subject card has no line for sale, so its line is drawn inside, on a layer over everything in the card. */
#shop .subject-bundle.bs-pic{background:var(--bs-bg)!important;color:var(--bs-ink)!important;box-shadow:none!important}
#shop .subject-bundle.bs-pic::after{content:'';position:absolute;inset:0;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 var(--bs-lw) var(--bs-line);pointer-events:none}
/* No watermark on an owned card. */
#smart article.fcl-lead.bs-pic .fcl-publisher::before,#shop .subject-bundle.bs-pic .bundle-glyph{display:none!important}
/* Words: the card's ink; the facts and the subjects a step quieter. */
:is(#smart article.fcl-card,#shop .subject-bundle).bs-pic :is(h2,h3,.bs-words,.bs-ring){color:var(--bs-ink)!important}
:is(#smart article.fcl-card,#shop .subject-bundle).bs-pic :is(.fcl-meta,.bundle-meta,.fcl-contents li){color:var(--bs-sub)!important}
:is(#smart article.fcl-card,#shop .subject-bundle).bs-pic .fcl-contents li::after{color:var(--bs-sep)!important}
#smart article.fcl-card.bs-pic footer{border-color:transparent!important}
:is(#smart article.fcl-card,#shop .subject-bundle).bs-pic .text-button{color:var(--bs-link)!important;text-decoration-color:var(--bs-link-line)!important;border-color:var(--bs-link-line)!important}
/* The button: solid, the strongest thing on the card. */
:is(#smart article.fcl-card,#shop .subject-bundle).bs-pic :is(.owned-action,.actions a.button){display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:0!important;min-width:140px;padding:8px 20px!important;border:0!important;border-radius:10px!important;background:var(--bs-btn)!important;color:var(--bs-btn-ink)!important;font:600 16px/1.25 var(--sans)!important;text-decoration:none!important;box-shadow:none!important}
.bs-pic .owned-action svg{display:none!important}
#smart article.fcl-companion.bs-pic .owned-action{min-width:128px;font-size:15px!important}
/* The statement, over the price's own lines. */
.bs-pic .sbx-price,.bs-pic footer,.bs-pic .bundle-buy{position:relative!important}
.bs-say{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;margin:0}
.bundle-buy>.bs-say{inset:auto 0 auto 0}
.bs-st-ring .bs-say{padding-right:calc(var(--ring) + 20px)}
.bs-words{margin:0;font:700 24px/1.1 var(--sans);letter-spacing:-.015em}
.fcl-companion .bs-words{font-size:21px}
.bs-disc{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--forest);color:#fff}
.bs-pic .bs-disc{background:var(--bs-ink);color:var(--bs-bg)}
.bs-disc .bs-i{width:16px;height:16px;stroke-width:2.8}
/* The ring: just above the buttons, at the right. It holds the count. */
.bs-ring{position:absolute;right:8px;width:var(--ring);height:var(--ring);display:grid;place-items:center;pointer-events:none}
.bs-ring>svg:first-child{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:5}
.bs-ring b{position:relative;font:700 21px/1 var(--sans);letter-spacing:-.01em}
.fcl-companion .bs-ring b{font-size:16px}
.bs-ring .bs-disc{position:absolute;top:0;right:0;width:24px;height:24px;box-shadow:0 0 0 3px var(--bs-bg)}
.bs-ring .bs-disc .bs-i{width:14px;height:14px}
.fcl-companion .bs-ring .bs-disc{top:-2px;right:-2px;width:20px;height:20px}
.fcl-companion .bs-ring .bs-disc .bs-i{width:12px;height:12px}
/* ---- v2 (round nine): "What's inside" is gone, "Open library" stands in its place, and the ring takes the right side.
   The card keeps its size: the row keeps the height of the button it had. ---- */
.bs-pic.bs-v2{--ring:124px}
#smart article.fcl-companion.bs-pic.bs-v2{--ring:100px}
#shop .subject-bundle.bs-pic.bs-v2{--ring:124px}
.bs-pic.bs-v2 :is(.sbx-actions,.actions)>.text-button{display:none!important}
.bs-pic.bs-v2 :is(.sbx-actions,.actions){justify-content:flex-start!important}
/* "Open library" is the link "What's inside" was: the same size, weight, colour and underline, in the same place. Only the
   words differ (the owner, round ten). It keeps the button's own height, so the row and the card stay the size they were. */
:is(#smart article.fcl-card,#shop .subject-bundle).bs-pic.bs-v2 :is(.owned-action,.actions a.button){min-width:0!important;padding:8px 0!important;border-radius:0!important;background:transparent!important;color:var(--bs-link)!important;justify-content:flex-start!important;font:600 14px/1.5 var(--sans)!important;text-decoration:underline!important;text-decoration-color:var(--bs-link-line)!important;text-underline-offset:5px}
/* The ring: on the foot of the card at its right edge; its count and tick grow with it. */
.bs-v2 .bs-ring{right:0}
.bs-v2 .bs-say{padding-right:calc(var(--ring) + 14px)}
.bs-v2 .bs-ring>svg:first-child{stroke-width:4.6}
.bs-v2 .bs-ring b,.fcl-companion.bs-v2 .bs-ring b{font-size:calc(var(--ring)*.25)}
.bs-v2 .bs-ring .bs-disc,.fcl-companion.bs-v2 .bs-ring .bs-disc{top:3.5%;right:3.5%;width:27%;height:27%}
.bs-v2 .bs-ring .bs-disc .bs-i,.fcl-companion.bs-v2 .bs-ring .bs-disc .bs-i{width:58%;height:58%}
/* Round eleven: the statement on one line (v2 only). */
.bs-pic .bs-one{white-space:nowrap}
/* "owned" inside the ring, under the count. */
.bs-v2-line-ring .bs-ring{align-content:center;row-gap:2px}
.bs-v2-line-ring .bs-ring b{font-size:calc(var(--ring)*.24)}
.bs-under{position:relative;font:600 calc(var(--ring)*.118)/1 var(--sans);color:var(--bs-ink)}
/* ---- Laptop, round one (pc-own, "Carried over"): the phone's pick on the laptop's three cards. Compare only. ---- */
.bs-gone{display:none!important}
.bs-pc .bs-say{inset:auto 0 auto 0}
.bs-pc .bs-ring{right:0}
.bs-pic.bs-pc{--ring:116px}
#smart article.fcl-lead.bs-pic.bs-pc{--ring:146px}
#smart article.fcl-companion.bs-pic.bs-pc{--ring:100px}
#shop .subject-bundle.bs-pic.bs-pc{--ring:100px}
.bs-pc .bs-ring>svg:first-child{stroke-width:4.6}
.bs-pc .bs-ring b,.fcl-companion.bs-pc .bs-ring b{font-size:calc(var(--ring)*.25)}
.bs-pc .bs-ring .bs-disc,.fcl-companion.bs-pc .bs-ring .bs-disc{top:3.5%;right:3.5%;width:27%;height:27%}
.bs-pc .bs-ring .bs-disc .bs-i,.fcl-companion.bs-pc .bs-ring .bs-disc .bs-i{width:58%;height:58%}
.bs-pc .bs-words{font-size:26px}
#smart article.fcl-lead.bs-pc .bs-words{font-size:30px}
#smart article.fcl-companion.bs-pc .bs-words{font-size:22px}
/* The old button stays, unseen, at the width the button for sale has, so the columns do not move. */
:is(#smart article.fcl-card,#shop article.subject-bundle,#sheetStudy article.ss-hero).bs-pc .bs-held{min-width:0!important;padding:0!important}
#smart article.fcl-companion.bs-pc .bs-held{width:108px!important}
#smart article.fcl-lead.bs-pc .bs-held{width:82px!important}
#sheetStudy article.ss-hero.bs-pc .bs-held{width:138px!important}
.bs-pc .ss-hero-cost{position:relative}
.bs-pc .bs-open{justify-content:flex-start}
/* The lead card: the cover's logo gives its place to the ring. */
#smart article.fcl-lead.bs-pc .fcl-publisher{visibility:hidden!important}
/* The bundle card of the Cards view. */
#sheetStudy .ss-hero.bs-pic{background:var(--bs-bg)!important;border-color:var(--bs-line)!important;color:var(--bs-ink)!important;box-shadow:inset 0 0 0 1px var(--bs-line)!important}
#sheetStudy .ss-hero.bs-pic .ss-hero-mark{display:none!important}
#sheetStudy .ss-hero.bs-pic :is(.ss-hero-title,.bs-words,.bs-ring){color:var(--bs-ink)!important}
#sheetStudy .ss-hero.bs-pic .ss-hero-meta{color:var(--bs-sub)!important}
#sheetStudy .ss-hero.bs-pic .text-button{color:var(--bs-link)!important;text-decoration-color:var(--bs-link-line)!important}
/* The Dev panel's group in the shop. */
.dev-bundlestates .dev-segment button{text-align:center;padding:8px 4px}

/* Two-digit counts (16 October 2026, the owner on "96/96" running over the ring: "fix this cycle thing please"). "96/96" is
   five characters, sized for "3/3"; a count of 10 or more is drawn smaller and tighter so it sits inside the circle. */
.bs-ring b.bs-long,.bs-v2 .bs-ring b.bs-long,.bs-pc .bs-ring b.bs-long,.fcl-companion .bs-ring b.bs-long{font-size:13px!important;letter-spacing:-.02em}