/* ── THE ESTATE ────────────────────────────────────────────────────────────
   Hers, 14 Oct 2026: spacious, walkable, and laid out by its owner.
   ─────────────────────────────────────────────────────────────────────── */
.estate-page { padding: 0 0 7rem; }
.estate-top { max-width: 54rem; margin: 0 auto; padding: 3.5rem 1.4rem 2rem; }
.estate-top h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.02; margin: .3rem 0 1rem; }
.estate-top h1 em { color: var(--signal); font-style: italic; }
.estate-top .lede { font-size: clamp(1.02rem, 2.2vw, 1.2rem); line-height: 1.6; max-width: 40rem; color: var(--ink); }

.estate-holder { position: relative; max-width: 96rem; margin: 0 auto; padding: 0 1.4rem; }

#estate {
	position: relative;
	width: 100%;
	height: min(74vh, 720px);
	min-height: 420px;
	border-radius: 1.4rem;
	overflow: hidden;
	background: #9FDFF7;
	cursor: grab;
	touch-action: none;
}
#estate:active { cursor: grabbing; }
#estate[data-mode="plan"] { cursor: crosshair; }
#estate canvas { display: block; width: 100%; height: 100%; }

#estate-names { position: absolute; inset: 0; pointer-events: none; }
/* ── THE NAMES ──────────────────────────────────────────────────────────────
   Hers, 21 October 2026: "Labels are terrible. I can't see anything."
   And she was right — eighteen solid white chips were sitting ON her garden,
   so the garden was the thing you could not see. A name is not a button. It is
   type lying on the land, the way a good map names a place: her own ink, a
   white halo so it holds over grass or stone, and a fine line to a pin. The
   garden shows straight through it. ─────────────────────────────────────── */
.estate-name {
	position: absolute;
	transform: translate(var(--tx, 0), -50%) scale(var(--near, 1));
	transform-origin: var(--ox, 0) 50%;
	pointer-events: auto;
	border: 0;
	background: none;
	padding: .2rem .3rem;
	color: var(--ink);
	font: 700 .76rem/1.1 var(--name);
	letter-spacing: .01em;
	text-shadow:
		0 0 3px #fff, 0 0 3px #fff, 0 0 6px rgba(255,255,255,.95),
		0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
	cursor: pointer;
	white-space: nowrap;
	max-width: 13rem;
	transition: color .16s ease, transform .16s ease;
}
.estate-name.on-right { --tx: 0;     --ox: 0;    }
.estate-name.on-left  { --tx: -100%; --ox: 100%; }

/* the fine line out to the pin standing on the thing itself */
.estate-name::after {
	content: '';
	position: absolute; top: 50%;
	width: var(--lead-len, 22px); height: 1px;
	transform-origin: 0 50%;
	transform: rotate(var(--lead-ang, 180deg));
	background: color-mix(in srgb, var(--ink) 38%, transparent);
	box-shadow: 0 0 0 .9px rgba(255,255,255,.85);
	pointer-events: none;
}
.estate-name.on-right::after { left: .1rem; }
.estate-name.on-left::after  { left: calc(100% - .1rem); }

.estate-name::before {
	content: '';
	position: absolute; top: 50%;
	width: .42rem; height: .42rem;
	margin: -.21rem 0 0 -.21rem;
	border-radius: 50%;
	background: var(--signal);
	box-shadow: 0 0 0 1.6px #fff, 0 1px 4px rgba(14,52,34,.4);
	transform-origin: .21rem 50%;
	transform: rotate(var(--lead-ang, 180deg)) translateX(var(--lead-len, 22px)) rotate(calc(-1 * var(--lead-ang, 180deg)));
	pointer-events: none;
}
.estate-name.on-right::before { left: .1rem; }
.estate-name.on-left::before  { left: calc(100% - .1rem); }

.estate-name:hover,
.estate-name.is-picked { color: var(--signal); }
.estate-name:hover { transform: translate(var(--tx, 0), -50%) scale(calc(var(--near, 1) * 1.07)); }
.estate-name.is-picked::before { background: #fff; box-shadow: 0 0 0 2.2px var(--signal), 0 1px 5px rgba(14,52,34,.45); }
.estate-name.is-picked::after { background: var(--signal); }

@media (prefers-reduced-motion: reduce) {
	.estate-name { transition: none; }
	.estate-name:hover { transform: translate(var(--tx, 0), -50%) scale(var(--near, 1)); }
}

.estate-ways {
	display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
	justify-content: space-between; margin: .9rem 0 .4rem;
}
.estate-modes { display: flex; gap: .4rem; flex-wrap: wrap; }
.estate-modes button, .estate-plant {
	border: 1.5px solid color-mix(in srgb, var(--ink) 18%, transparent);
	background: #fff;
	color: var(--ink);
	font: 600 .88rem/1 var(--body);
	padding: .62rem 1.05rem;
	border-radius: 999px;
	cursor: pointer;
}
.estate-modes button[aria-pressed="true"] { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }
.estate-plant { border-color: var(--signal); color: var(--signal); }
.estate-plant:hover { background: var(--signal); color: var(--on-signal); }

.estate-how { max-width: 48rem; margin: .5rem 0 0; font-size: .9rem; color: color-mix(in srgb, var(--ink) 62%, transparent); line-height: 1.5; }
.estate-how strong { color: var(--ink); }

.estate-adder {
	display: grid; gap: .5rem;
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	margin: 1rem 0 0;
	padding: 1rem;
	background: #fff;
	border: 1.5px solid color-mix(in srgb, var(--ink) 18%, transparent);
	border-radius: 1.1rem;
}
.estate-sort {
	display: block; text-align: left;
	border: 1.5px solid color-mix(in srgb, var(--ink) 15%, transparent);
	background: #FDFCFA;
	border-radius: .8rem;
	padding: .7rem .85rem;
	cursor: pointer;
	font-family: inherit;
}
.estate-sort:hover { border-color: var(--signal); background: #fff; }
.estate-sort strong { display: block; font-size: .95rem; color: var(--ink); }
.estate-sort span { display: block; font-size: .8rem; color: color-mix(in srgb, var(--ink) 62%, transparent); margin-top: .18rem; line-height: 1.35; }

.estate-panel {
	position: absolute; right: 2.2rem; bottom: 6.4rem;
	width: min(21rem, calc(100% - 3rem));
	background: #fff;
	border-radius: 1.1rem;
	box-shadow: 0 18px 50px rgba(20,60,40,.2);
	padding: 1.15rem 1.2rem 1.1rem;
	z-index: 4;
}
.estate-kind-say { margin: 0 0 .5rem; font: 600 .74rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--signal); }
.estate-field { display: block; margin: 0 0 .8rem; }
.estate-field > span { display: block; font-size: .84rem; color: color-mix(in srgb, var(--ink) 62%, transparent); margin-bottom: .3rem; }
.estate-field input[type="text"] {
	width: 100%; border: 0; border-bottom: 2px solid var(--signal);
	font: 500 1.08rem/1.3 var(--body); color: var(--ink);
	padding: .3rem 0; background: transparent;
}
.estate-field input[type="text"]:focus { outline: none; }
.estate-field input[type="range"] { width: 100%; accent-color: var(--signal); }
.estate-hint { margin: -.4rem 0 .9rem; font-size: .82rem; color: color-mix(in srgb, var(--ink) 62%, transparent); line-height: 1.4; }
.estate-panel-ways { display: flex; gap: .5rem; }
.estate-panel-ways .press { flex: 1; border-radius: 999px; padding: .62rem 1rem; font: 600 .88rem/1 var(--body); cursor: pointer; border: 1.5px solid transparent; }
.press-go { background: var(--signal); color: var(--on-signal); }
.press-quiet { background: #fff; border-color: color-mix(in srgb, var(--ink) 18%, transparent); color: color-mix(in srgb, var(--ink) 62%, transparent); }

.estate-said { max-width: 44rem; margin: 3.4rem auto 0; padding: 0 1.4rem; }
.estate-said h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.12; margin: 0 0 .7rem; }
.estate-said p { line-height: 1.65; color: var(--ink); }

@media (max-width: 760px) {
	#estate { height: 62vh; min-height: 380px; border-radius: 1rem; }
	.estate-panel { right: 1.4rem; left: 1.4rem; bottom: 1rem; width: auto; }
	.estate-ways { justify-content: flex-start; }
}

/* ── THE TOOL SHED ─────────────────────────────────────────────────────────
   Hers, 14 Oct 2026: "Give them the tools in the tool shed."
   ─────────────────────────────────────────────────────────────────────── */
.estate-shed {
	position: absolute; inset: 1.4rem;
	background: #fff;
	border-radius: 1.3rem;
	box-shadow: 0 24px 70px rgba(20,60,40,.26);
	z-index: 6;
	display: flex; flex-direction: column;
	overflow: hidden;
}
.estate-shed-top {
	position: relative;
	padding: 1.5rem 1.6rem 1.1rem;
	border-bottom: 1.5px solid color-mix(in srgb, var(--ink) 15%, transparent);
}
.estate-shed-top h2 { margin: 0 0 .3rem; font-size: clamp(1.4rem, 3.2vw, 2rem); line-height: 1.1; }
.estate-shed-top p { margin: 0; max-width: 38rem; color: color-mix(in srgb, var(--ink) 62%, transparent); line-height: 1.5; font-size: .95rem; }
.estate-shut {
	position: absolute; top: 1.1rem; right: 1.2rem;
	border: 1.5px solid color-mix(in srgb, var(--ink) 18%, transparent); background: #fff; color: var(--ink);
	font: 600 .82rem/1 var(--body);
	padding: .5rem .95rem; border-radius: 999px; cursor: pointer;
}
.estate-shut:hover { border-color: var(--signal); color: var(--signal); }
.estate-shed-list {
	overflow-y: auto;
	padding: 1.2rem 1.6rem 1.8rem;
	display: grid; gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}
.estate-tool {
	border: 1.5px solid color-mix(in srgb, var(--ink) 15%, transparent);
	border-radius: 1rem;
	padding: 1rem 1.1rem 1.1rem;
	background: #FDFCFA;
}
.estate-tool h3 { margin: 0 0 .22rem; font-size: 1.08rem; line-height: 1.2; color: var(--ink); }
.estate-tool-for { margin: 0 0 .6rem; font: 600 .74rem/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--signal); }
.estate-tool-is { margin: 0 0 .55rem; font-size: .93rem; line-height: 1.5; color: var(--ink); }
.estate-tool-do { margin: 0; font-size: .9rem; line-height: 1.55; color: color-mix(in srgb, var(--ink) 68%, transparent); padding-left: .8rem; border-left: 3px solid var(--signal); }
@media (max-width: 760px) {
	.estate-shed { inset: .8rem; }
	.estate-shed-list { grid-template-columns: 1fr; padding: 1rem 1.1rem 1.4rem; }
}

/* ── the shed, read in bands ───────────────────────────────────────────── */
.estate-shed-list { display: block; padding: 1.4rem 1.8rem 2.4rem; }
.estate-band { margin: 0 0 2.2rem; }
.estate-band:last-child { margin-bottom: 0; }
.estate-band-say {
	margin: 0 0 .3rem;
	font-family: var(--head);
	font-size: clamp(1.25rem, 2.6vw, 1.6rem);
	line-height: 1.15;
	color: var(--ink);
}
.estate-band-why {
	margin: 0 0 1rem;
	max-width: 44rem;
	font-size: .95rem;
	line-height: 1.55;
	color: color-mix(in srgb, var(--ink) 68%, transparent);
}
.estate-band-list {
	display: grid; gap: .9rem;
	grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
}
.estate-tool h4 {
	margin: 0 0 .22rem;
	font-family: var(--head);
	font-size: 1.22rem; line-height: 1.18; color: var(--ink);
}
.estate-tool-is { font-size: .96rem; line-height: 1.58; }
.estate-tool-do { font-size: .94rem; line-height: 1.62; }

/* `display` on a class beats the hidden attribute, so the shed and the planting
   menu both opened themselves the moment the page loaded. */
.estate-shed[hidden], .estate-adder[hidden], .estate-panel[hidden] { display: none; }

/* ── THE MAGIC SHED'S ONE QUESTION A MONTH ─────────────────────────────────
   Hers, 14 Oct 2026: "Once a month they should be able to walk the brain,
   because that's a paid thing. They can't do it all the time."
   ─────────────────────────────────────────────────────────────────────── */
.shed-ask {
	margin: 0;
	padding: 1.3rem 1.8rem 1.5rem;
	background: color-mix(in srgb, var(--signal) 10%, transparent);
	border-bottom: 1.5px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.shed-when { margin: 0 0 .7rem; max-width: 44rem; font-size: .95rem; line-height: 1.5; color: color-mix(in srgb, var(--ink) 72%, transparent); }
.shed-ask-row { display: flex; gap: .6rem; max-width: 46rem; }
.shed-ask-row input {
	flex: 1; min-width: 0;
	border: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent);
	border-radius: .7rem; background: #fff;
	padding: .8rem .95rem;
	font: 500 1.02rem/1.4 var(--body); color: var(--ink);
}
.shed-ask-row input:focus { outline: none; border-color: var(--signal); }
.shed-ask-row input::placeholder { color: color-mix(in srgb, var(--ink) 42%, transparent); }
.shed-ask-row button {
	flex: 0 0 auto; border: 0; cursor: pointer;
	background: var(--signal); color: var(--on-signal);
	font: 600 .95rem/1 var(--body);
	padding: 0 1.5rem; border-radius: .7rem;
}
.shed-ask.is-spent .shed-ask-row { opacity: .4; pointer-events: none; }

.shed-a { padding: 1.5rem 1.8rem 0; }
.shed-lead {
	margin: 0 0 .5rem;
	font-family: var(--head);
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	line-height: 1.32;
	color: var(--ink);
	max-width: 42rem;
}
.shed-order { margin: 0 0 1rem; font: 600 .76rem/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--signal-deep); }
.shed-picked { margin: 0; padding: 0 0 .4rem 1.3rem; display: grid; gap: 1rem; }
.shed-picked li { padding-left: .4rem; }
.shed-picked li::marker { color: var(--signal-deep); font-weight: 700; }
.shed-picked h4 { margin: 0 0 .3rem; font-family: var(--head); font-size: 1.2rem; line-height: 1.2; color: var(--ink); }
@media (max-width: 760px) {
	.shed-ask, .shed-a { padding-left: 1.1rem; padding-right: 1.1rem; }
	.shed-ask-row { flex-direction: column; }
	.shed-ask-row button { padding: .8rem 1.5rem; }
}

/* Whether the walk is due, said by the garden and by nothing else. */
.estate-due {
	display: flex; flex-wrap: wrap; align-items: center; gap: .7rem;
	margin: .9rem 0 0; padding: .7rem .95rem;
	border-radius: .8rem;
	background: color-mix(in srgb, var(--ink) 5%, transparent);
	font-size: .95rem; line-height: 1.45;
	color: color-mix(in srgb, var(--ink) 72%, transparent);
}
.estate-due.is-due { background: color-mix(in srgb, var(--signal) 12%, transparent); color: var(--ink); }
.estate-due a {
	margin-left: auto; text-decoration: none;
	background: var(--signal); color: var(--on-signal);
	font: 600 .85rem/1 var(--body);
	padding: .55rem 1.1rem; border-radius: 999px;
}
.estate-due a:hover { background: var(--signal-deep); color: #fff; }

/* ── THE WEEDER ─────────────────────────────────────────────────────────────
   Hers, 21 October 2026. It is a tool you pick up, so it reads as a tool and
   never as a delete button. ─────────────────────────────────────────────── */
.estate-weed {
	display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
	margin: .2rem 0 .5rem;
}
.estate-weed .press {
	border: 1.5px solid color-mix(in srgb, var(--ink) 18%, transparent);
	background: #fff; color: var(--ink);
	font: 600 .88rem/1 var(--body);
	padding: .62rem 1.05rem; border-radius: 999px; cursor: pointer;
}
.estate-weed .press:hover { border-color: var(--signal); color: var(--signal); }
.estate-weed-say {
	margin: 0; flex: 1 1 16rem; min-width: 12rem;
	font: 500 .9rem/1.45 var(--body);
	color: color-mix(in srgb, var(--ink) 70%, transparent);
}
body.holding-weeder #estate-weeder {
	background: var(--signal); border-color: var(--signal); color: var(--on-signal);
}
body.holding-weeder #estate canvas { cursor: cell; }
body.holding-weeder .estate-weed-say { color: var(--signal); font-weight: 600; }

/* ── THE SUNDIAL'S FACE ─────────────────────────────────────────────────────
   Hers, 21 October 2026: the sundial looks like a sundial, and when you get to
   it you have the dial. ─────────────────────────────────────────────────── */
.estate-dial {
	position: fixed; inset: 0; z-index: 60;
	display: flex; align-items: center; justify-content: center;
	padding: 1.2rem;
	background: color-mix(in srgb, var(--ink) 34%, transparent);
	backdrop-filter: blur(2px);
}
.estate-dial[hidden] { display: none; }
.dial-in {
	pointer-events: auto;
	background: #fff;
	border: 1.5px solid color-mix(in srgb, var(--ink) 12%, transparent);
	border-radius: 1.4rem;
	box-shadow: 0 1.4rem 3rem -1rem color-mix(in srgb, var(--ink) 30%, transparent);
	padding: 1.2rem 1.4rem 1.3rem;
	max-width: 30rem; width: 100%;
	text-align: center;
}
.dial-eyebrow {
	margin: 0; font: 600 .7rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase;
	color: color-mix(in srgb, var(--ink) 48%, transparent);
}
.dial-head { margin: .35rem 0 .7rem; font: 400 1.9rem/1 var(--head); color: var(--ink); }
/* Gigi's own dial off 5or10.life, so the instrument is the same instrument in
   both worlds. Her rule, 21 Oct 2026: "real dials, not just buttons." */
.ft__pick { display: flex; align-items: baseline; justify-content: center; gap: clamp(.6rem,3vw,1.4rem); line-height: .85; }
.ft__n {
	appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
	font-family: var(--name); font-size: clamp(4.6rem, 15vw, 8.4rem);
	color: var(--ink); opacity: .18; letter-spacing: -.04em;
	transition: opacity .35s, color .35s, transform .35s;
}
.ft__n.is-on { opacity: 1; color: var(--signal); transform: translateY(-.02em); }
.ft__n:focus-visible { outline: 2px solid var(--signal); outline-offset: 8px; border-radius: .2em; }
.ft__or { font-family: var(--head); font-style: italic; font-size: clamp(1.2rem,3.4vw,2rem); color: var(--ink); opacity: .6; }
/* HERS, 21 OCTOBER 2026: "Need actual dials." Round, and it turns. */
.dial-face { width: min(82vw, 20.5rem); margin: .2rem auto .1rem; }
.dl { width: 100%; height: auto; display: block; touch-action: none; cursor: grab; }
.dl:active { cursor: grabbing; }
.dl:focus-visible { outline: 2px solid var(--signal); outline-offset: 6px; border-radius: 50%; }
.dl-rim { fill: none; stroke: color-mix(in srgb, var(--ink) 16%, transparent); stroke-width: 1.5; }
.dl-tick { stroke: color-mix(in srgb, var(--ink) 30%, transparent); stroke-width: 2; stroke-linecap: round; transition: stroke .2s ease, stroke-width .2s ease; }
.dl-tick.is-on { stroke: var(--signal); stroke-width: 4; }
.dl-mark {
	font-family: var(--body); font-size: 11px; font-weight: 600;
	letter-spacing: .14em; fill: color-mix(in srgb, var(--ink) 52%, transparent);
	transition: fill .2s ease;
}
.dl-mark.is-on { fill: var(--signal); }
.dl-hand { transition: transform .45s cubic-bezier(.3,1.3,.4,1); }
.dl-hand line { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; opacity: .55; }
.dl-knob { fill: var(--signal); stroke: #fff; stroke-width: 3; filter: drop-shadow(0 2px 5px rgba(14,52,34,.35)); }
.dl-pin { fill: var(--ink); opacity: .75; }
.dl-stop {
	margin: -.2rem 0 .7rem;
	font: italic 400 clamp(1.5rem, 5vw, 2.2rem)/1.1 var(--head);
	color: var(--ink);
}
.dl-mark, .dl-tick { cursor: pointer; }
@media (max-width: 420px) { .dl-mark { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .dl-hand { transition: none; } }
.dial-what { margin: 0 0 .25rem; font: 600 1.05rem/1.3 var(--name); color: var(--signal); }
.dial-line { margin: 0 0 1rem; font: 400 .95rem/1.5 var(--body); color: color-mix(in srgb, var(--ink) 76%, transparent); }
.dial-ways { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.dial-ways .press {
	border: 1.5px solid color-mix(in srgb, var(--ink) 18%, transparent);
	background: #fff; color: var(--ink); text-decoration: none;
	font: 600 .88rem/1 var(--body); padding: .62rem 1.05rem; border-radius: 999px; cursor: pointer;
}
.dial-ways .press-go { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }

@media (prefers-reduced-motion: reduce) { .ft__n { transition: none; } }

/* ── PLANTING WHAT IS YOURS ─────────────────────────────────────────────────
   Hers, 21 October 2026: "It's got to grow whatever they want to grow."
   Eighty-five of them, in families, so nobody is scrolling a list. ───────── */
.estate-pick {
	position: fixed; inset: 0; z-index: 60;
	display: flex; align-items: center; justify-content: center;
	padding: 1rem;
	background: color-mix(in srgb, var(--ink) 36%, transparent);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}
.estate-pick[hidden] { display: none; }
.pick-in {
	background: #fff;
	border-radius: 1.4rem;
	box-shadow: 0 1.6rem 3.4rem -1rem color-mix(in srgb, var(--ink) 38%, transparent);
	padding: 1.2rem 1.3rem 1.1rem;
	width: 100%; max-width: 40rem;
	max-height: 88vh; display: flex; flex-direction: column;
}
.pick-eyebrow {
	margin: 0; font: 600 .7rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase;
	color: color-mix(in srgb, var(--ink) 48%, transparent);
}
.pick-head { margin: .3rem 0 .2rem; font: 400 1.8rem/1.05 var(--head); color: var(--ink); }
.pick-note { margin: 0 0 .8rem; font: 400 .9rem/1.4 var(--body); color: color-mix(in srgb, var(--ink) 66%, transparent); }
.pick-fams { display: flex; flex-wrap: wrap; gap: .32rem; margin-bottom: .9rem; }
.pick-fam {
	border: 1.5px solid color-mix(in srgb, var(--ink) 15%, transparent);
	background: #fff; color: var(--ink);
	font: 600 .78rem/1 var(--body);
	padding: .46rem .72rem; border-radius: 999px; cursor: pointer;
}
.pick-fam[aria-pressed="true"] { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }
.pick-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr));
	gap: .5rem; overflow-y: auto; padding: .15rem; min-height: 8rem;
	overscroll-behavior: contain;
}
.pick-one {
	display: flex; flex-direction: column; align-items: center; gap: .28rem;
	border: 1.5px solid color-mix(in srgb, var(--ink) 11%, transparent);
	background: #fff; border-radius: .9rem;
	padding: .6rem .35rem .5rem; cursor: pointer;
	font: 600 .68rem/1.25 var(--body); color: color-mix(in srgb, var(--ink) 78%, transparent);
	text-align: center;
	transition: border-color .14s ease, transform .14s ease;
}
.pick-one:hover { border-color: var(--signal); transform: translateY(-2px); }
.pick-one[aria-pressed="true"] {
	border-color: var(--signal);
	box-shadow: inset 0 0 0 2px var(--signal);
	color: var(--signal);
}
.pick-ways { display: flex; justify-content: flex-end; padding-top: .9rem; }
.pick-ways .press {
	border: 1.5px solid var(--signal); background: var(--signal); color: var(--on-signal);
	font: 600 .88rem/1 var(--body); padding: .62rem 1.15rem; border-radius: 999px; cursor: pointer;
}
@media (prefers-reduced-motion: reduce) { .pick-one { transition: none; } .pick-one:hover { transform: none; } }