/* CO2 & Air Fills page — only what bnt-sharpening.css doesn't already cover. */
.bnt-fill-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; border: 2px solid #fff; }
.bnt-fill-week li { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 20px 16px; border-right: 2px solid #fff; }
.bnt-fill-week li:last-child { border-right: 0; }
.bnt-fill-week__day { font-family: var(--head); font-size: clamp(28px, 3vw, 44px); line-height: .9; }
.bnt-fill-week__what { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #a1a1aa; }
.bnt-fill-week li.is-free { background: var(--orange); color: var(--ink); transform: translateY(-10px); box-shadow: 0 10px 0 var(--orange); }
.bnt-fill-week li.is-free .bnt-fill-week__what { color: var(--ink); }
.bnt-fill-week__note { margin: 0; font-family: var(--mono); font-size: 14px; color: #d4d4d8; }
@media (max-width: 640px) {
	.bnt-fill-week li { padding: 14px 4px; align-items: center; text-align: center; }
	.bnt-fill-week__what { font-size: 9px; letter-spacing: .04em; }
}

/* Live day badge + "You are here" in the week strip */
.bnt-shp-badge.is-today { animation: bnt-fill-pulse 1.6s ease-in-out infinite; }
@keyframes bnt-fill-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(246, 130, 31, .7); } 50% { box-shadow: 0 0 0 10px rgba(246, 130, 31, 0); } }
.bnt-fill-week li { position: relative; }
.bnt-fill-week li.is-today { outline: 3px solid #fff; outline-offset: -7px; }
.bnt-fill-week__here { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); white-space: nowrap; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); }
.bnt-fill-week__here::before { content: '▲ '; }
.bnt-fill-week { margin-bottom: 24px; }

/* Cold vapour puffs (Free tile + main button), the gas cousin of the sharpening sparks */
.bnt-fill-frosty { position: relative; }
.bnt-fill-puff { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(235,245,255,.6) 45%, rgba(235,245,255,0) 70%); opacity: 0; pointer-events: none; z-index: 3; }
.bnt-fill-puff:nth-of-type(1) { --dx: -70px; --dy: -40px; }
.bnt-fill-puff:nth-of-type(2) { --dx: 60px; --dy: -55px; }
.bnt-fill-puff:nth-of-type(3) { --dx: -30px; --dy: -75px; }
.bnt-fill-puff:nth-of-type(4) { --dx: 85px; --dy: -15px; }
.bnt-fill-puff:nth-of-type(5) { --dx: -90px; --dy: 5px; }
.bnt-fill-puff:nth-of-type(6) { --dx: 20px; --dy: -90px; }
.bnt-fill-frosty:hover .bnt-fill-puff { animation: bnt-fill-puff 1.1s ease-out var(--d, 0s) infinite; }
.bnt-fill-puff:nth-of-type(1) { --d: 0s; } .bnt-fill-puff:nth-of-type(2) { --d: .15s; } .bnt-fill-puff:nth-of-type(3) { --d: .3s; }
.bnt-fill-puff:nth-of-type(4) { --d: .45s; } .bnt-fill-puff:nth-of-type(5) { --d: .6s; } .bnt-fill-puff:nth-of-type(6) { --d: .75s; }
@keyframes bnt-fill-puff { 0% { opacity: .9; transform: translate(0, 0) scale(.3); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(2.6); } }

/* Hold to fill */
.bnt-fill-try { display: grid; grid-template-columns: auto 1fr; gap: 64px; align-items: center; }
.bnt-fill-cyl { width: 120px; justify-self: center; }
.bnt-fill-cyl__valve { width: 34px; height: 26px; margin: 0 auto; background: var(--ink); border-radius: 4px 4px 0 0; box-shadow: inset 0 -8px 0 #3f3f46; }
.bnt-fill-cyl__body { position: relative; height: 260px; border: 4px solid var(--ink); border-radius: 46px 46px 18px 18px; overflow: hidden; background: #fff; }
.bnt-fill-cyl__gas { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--lvl, 0) * 100%); background: repeating-linear-gradient(-45deg, var(--orange) 0 14px, #ff9a45 14px 28px); }
.bnt-fill-cyl__hiss { position: absolute; left: 50%; top: 40%; transform: translateX(-50%) rotate(-12deg); font-family: var(--head); font-size: 30px; color: var(--ink); opacity: 0; white-space: nowrap; }
.bnt-fill-cyl.is-filling .bnt-fill-cyl__hiss { opacity: 1; animation: bnt-fill-jitter .12s steps(2) infinite; }
.bnt-fill-cyl.is-filling .bnt-fill-cyl__gas { animation: bnt-fill-flow .6s linear infinite; }
@keyframes bnt-fill-jitter { 50% { transform: translate(-48%, 2px) rotate(-10deg); } }
@keyframes bnt-fill-flow { to { background-position: 0 -40px; } }
.bnt-fill-meter { display: flex; align-items: baseline; gap: 16px; margin: 8px 0 20px; }
.bnt-fill-meter__val { font-family: var(--head); font-size: 56px; line-height: 1; font-variant-numeric: tabular-nums; }
[data-bnt-fill-hold] { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
@media (max-width: 640px) {
	.bnt-fill-try { grid-template-columns: 76px 1fr; gap: 20px; align-items: end; }
	.bnt-fill-cyl { width: 76px; }
	.bnt-fill-cyl__valve { width: 24px; height: 18px; }
	.bnt-fill-cyl__body { height: 190px; border-width: 3px; border-radius: 30px 30px 12px 12px; }
	.bnt-fill-cyl__hiss { font-size: 20px; }
	.bnt-fill-meter__val { font-size: 44px; }
}

/* Pressure gauge: the needle swings to FULL as the section scrolls in */
.bnt-fill-gauge { width: 220px; flex: none; overflow: visible; }
.bnt-fill-gauge__track { fill: none; stroke: #3f3f46; stroke-width: 12; }
.bnt-fill-gauge__red { fill: none; stroke: var(--orange); stroke-width: 12; }
.bnt-fill-gauge__ticks line { stroke: #a1a1aa; stroke-width: 2; }
.bnt-fill-gauge text { fill: #d4d4d8; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.bnt-fill-gauge__needle { stroke: #fff; stroke-width: 4; stroke-linecap: round; transform-box: view-box; transform-origin: 100px 100px; transform: rotate(78deg); }
.bnt-fill-gauge__hub { fill: var(--orange); }
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.bnt-fill-gauge__needle { animation: bnt-fill-needle linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
	}
}
@keyframes bnt-fill-needle { 0% { transform: rotate(-88deg); } 80% { transform: rotate(84deg); } 90% { transform: rotate(74deg); } 100% { transform: rotate(78deg); } }

@media (prefers-reduced-motion: reduce) {
	.bnt-shp-badge.is-today, .bnt-fill-frosty:hover .bnt-fill-puff, .bnt-fill-cyl.is-filling .bnt-fill-cyl__hiss, .bnt-fill-cyl.is-filling .bnt-fill-cyl__gas { animation: none; }
}