/* ——— Feedback (feedback.js): a page of Preferences, as its parts' are (cards.css's .prefs-page:
   sliding in from the right, "‹ Preferences" over its name, in the head). Then its way to it:
   Preferences' row. ——— */
/* (its box, glass, head and ways in and out: Preferences', in cards.css) */
/* (as Preferences': quiet words lit by what's behind) */
dialog.sheet.prefs .fb-page :is(.fb-intro, .fb-email-note, .fb-thanks-words) { mix-blend-mode: plus-lighter; color: rgba(255, 255, 255, 0.6); }
/* (its foot the page's own: Send's bar, stuck to it, right on the page's edge, not the parts' 28px over it) */
.prefs .prefs-page.fb-page { padding-bottom: 0; }

.fb-form, .fb-thanks { display: grid; gap: 22px; padding: 0 0 24px; } /* (the page's sides its own) */
.fb-intro { margin: 0 4px -4px; font-size: 0.8rem; line-height: 1.45; color: var(--ink-soft); text-wrap: pretty; }

/* ——— the words: one roomy field, its label the question ——— */
.fb-field { display: grid; gap: 8px; }
.fb-label { padding: 0 4px; font-size: 1.02rem; font-weight: 650; letter-spacing: -0.01em; color: var(--ink); }
.fb-label-small { font-size: 0.86rem; font-weight: 600; }
.fb-optional { margin-left: 6px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.fb-box {
  position: relative; border-radius: 15px;
  background: rgba(0, 0, 0, 0.28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: box-shadow .2s, background .2s;
}
/* focused: the search bar's Horizon, a thin accent glow along its foot */
.fb-box::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 1px; border-radius: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0; transition: opacity .3s var(--ease);
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--accent) 60%, transparent);
}
.fb-box:focus-within { background: rgba(0, 0, 0, 0.36); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, rgba(255, 255, 255, 0.1)); }
.fb-box:focus-within::after { opacity: 0.9; }
.fb-box.problem { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--full-sold) 70%, transparent); }
.fb-box.problem::after { opacity: 0; }
.fb-page textarea, .fb-page input[type=email] {
  display: block; width: 100%; margin: 0; border: 0; background: none; color: var(--ink);
  font: inherit; font-size: 16px; line-height: 1.5; /* (16px: iOS doesn't zoom into it) */
  caret-color: var(--accent);
}
.fb-page textarea { min-height: 136px; max-height: 40svh; padding: 13px 16px 16px; resize: none; field-sizing: content; }
.fb-page :is(textarea, input)::placeholder { color: rgba(244, 241, 234, 0.36); }
.fb-page :is(textarea, input):focus { outline: none; }
.fb-count { position: absolute; right: 14px; bottom: 8px; margin: 0; font-size: 0.72rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.fb-problem { margin: 0 4px; min-height: 0; font-size: 0.8rem; color: #ff8a80; }
.fb-problem:empty { display: none; }
.fb-wobble { animation: fb-wobble .38s ease; }
@keyframes fb-wobble { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* ——— a reply: asked for, its field opens ——— */
.fb-reply { margin-top: -6px; }
.fb-reply-open { margin: 0 4px; font-size: 0.84rem; font-weight: 600; text-decoration: none; }
@media (hover: hover) { .fb-reply-open:hover { text-decoration: underline; } }
.fb-reply-field { display: grid; gap: 8px; }
.fb-page input[type=email] { padding: 11px 16px; border-radius: 13px; background: rgba(0, 0, 0, 0.28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); transition: box-shadow .2s; }
.fb-page input[type=email]:focus { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); }
.fb-page input[type=email][aria-invalid=true] { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--full-sold) 70%, transparent); }
.fb-email-note { margin: 0 4px; font-size: 0.76rem; line-height: 1.4; color: var(--ink-faint); }

/* ——— Send: centred at the foot, only as wide as its word ——— */
.fb-send-row {
  position: sticky; z-index: 1; bottom: 0; /* (at the foot of what scrolls: the page) */ display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 2px -20px -24px; padding: 12px 20px 20px; box-shadow: 0 -1px 0 transparent; transition: background-color .2s, box-shadow .2s;
}
.fb-page.more .fb-send-row { background: rgb(26, 24, 33); box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.08); } /* (rows under it: solid, as the header's when scrolled) */
/* Send and Done: the calls to action's look (cards.css's --cta: Book on VOX's), an arrow on, a tick */
.fb-send, .fb-done {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; box-sizing: border-box; cursor: pointer;
  padding: 0 8px 0 20px; border: 0; border-radius: 14px;
  background: var(--cta); color: var(--on-cta); font-size: 0.95rem; font-weight: 650; letter-spacing: 0.005em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 24px -14px color-mix(in srgb, var(--ink) 90%, transparent);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease), opacity .2s;
}
.fb-send::after, .fb-done::after {
  content: ""; flex: none; width: 32px; height: 32px; border-radius: 10px;
  background: var(--cta-on) 50% 50% / 15px no-repeat, var(--cta-tile);
  transition: background-position .35s var(--set-off), background-color .3s;
}
.fb-done::after { background-image: var(--cta-done); }
@media (hover: hover) {
  .fb-send:hover, .fb-done:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 14px 30px -12px var(--ink); }
  .fb-send:hover::after, .fb-done:hover::after { background-position: calc(50% + 4px) 50%, 0 0; background-color: var(--cta-tile-hover); }
}
.fb-send:active, .fb-done:active { transform: scale(0.975); transition-duration: .08s; background: var(--cta-pressed); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3); }
.sending .fb-send { opacity: 0.75; cursor: progress; }
.sending .fb-send::after { display: none; } /* (its arrow, while it's going: the spinner in its place) */
.sending .fb-send::before { content: ""; order: 2; margin: 0 9px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--on-cta) 30%, transparent); border-top-color: var(--on-cta); animation: fb-spin .8s linear infinite; }
@keyframes fb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sending .fb-send::before { animation: none; } }

/* ——— Thanks: calm, in the form's place: a ring drawn round, its tick, a word, Done ——— */
.fb-thanks-body { display: grid; justify-items: center; align-content: center; gap: 10px; padding: 4px 8px 40px; text-align: center; }
.fb-tick { width: 68px; height: 68px; margin-bottom: 8px; overflow: visible; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--accent) 45%, transparent)); }
.fb-tick-ring { fill: color-mix(in srgb, var(--accent) 10%, transparent); stroke: var(--accent); stroke-width: 2; stroke-dasharray: 183; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: center; }
.fb-tick-mark { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 36; stroke-dashoffset: 0; }
.thanked .fb-tick-ring { animation: fb-draw .7s var(--set-off) both; }
.thanked .fb-tick-mark { animation: fb-draw-mark .35s var(--ease) .55s both; }
.thanked .fb-thanks-body > :not(.fb-tick) { animation: fb-up .5s var(--ease) both; }
.thanked .fb-thanks-body > .fb-thanks-title { animation-delay: .25s; }
.thanked .fb-thanks-body > .fb-thanks-words { animation-delay: .32s; }
.thanked .fb-thanks-body > .fb-thanks-actions { animation-delay: .4s; }
@keyframes fb-draw { from { stroke-dashoffset: 183; fill-opacity: 0; } }
@keyframes fb-draw-mark { from { stroke-dashoffset: 36; } }
@keyframes fb-up { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .thanked :is(.fb-tick-ring, .fb-tick-mark, .fb-thanks-body > *) { animation: none !important; } }
.fb-page .fb-thanks-title { font-size: 1.45rem; }
.fb-thanks-words { max-width: 30ch; margin: 0 0 12px; font-size: 0.9rem; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; overflow-wrap: anywhere; }
.fb-thanks-actions { display: grid; justify-items: center; gap: 14px; }
.fb-again { font-size: 0.84rem; font-weight: 600; text-decoration: none; }
@media (hover: hover) { .fb-again:hover { text-decoration: underline; } }

/* ——— the ways in ——— */
.icon-fb { display: block; width: 100%; height: 100%; fill: currentColor; } /* (filled in the accent, as Send likes' thumb is filled) */
/* Preferences' last row: set apart, a speech bubble, a chevron, as a phone's settings end */
.fb-prefs-foot { margin: 0 -10px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.fb-prefs-row { width: 100%; grid-template-columns: 22px minmax(0, 1fr) auto; border: 0; background: none; text-align: left; color: inherit; font: inherit; }
.fb-row-icon { width: 22px; height: 22px; color: var(--accent); }
.fb-chevron { width: 8px; height: 8px; margin-right: 4px; border: solid var(--ink-faint); border-width: 1.75px 1.75px 0 0; transform: rotate(45deg); }

/* ——— Send likes (feedback.js): a row under Send feedback, as quiet as it is (its layout, a small
   thumbs up in its icon's place), the whole row the button. Its thumb filled, the ink into the
   accent, always (outlined till you'd liked, it read as broken: the owner's, 26 Oct 2026). A tap:
   the thumb springs up, a soft band of its light sweeps the row, a thumb floats up off it, and the
   glow behind it warms the more taps in a row. While likes wait to be sent, how many at the row's end, where feedback's chevron is; then
   how it went, a moment, in the blurb's place ——— */
.like-row {
  --like-a: #f4f1ea; --like-b: #a996ff; --like-pale: #ffffff; /* (its colours: the outline and the fill's first, the ink; the fill's last, the accent, which its glow and light take on too; and a white for some floating thumbs) */
  --like-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 10.5 10.9 4c.3-.6 1-.9 1.6-.7 1.2.4 1.8 1.6 1.5 2.8l-.7 3.4h5.1c1.4 0 2.4 1.3 2.1 2.7l-1.4 6.3c-.2.9-1 1.5-1.9 1.5H7.5ZM3.5 11.8c0-.7.6-1.3 1.3-1.3h1.7V20H4.8c-.7 0-1.3-.6-1.3-1.3Z'/%3E%3C/svg%3E"); /* (the thumb's shape, for the floating ones: cards.html's .like-icon) */
  touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.like-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.like-icon-box { position: relative; display: grid; place-items: center; width: 22px; height: 22px; }
.like-icon { position: relative; width: 22px; height: 22px; overflow: visible; transform-origin: 30% 85%; } /* (it bumps and tips from the wrist: feedback.js's bump) */
.like-line { fill: none; stroke: rgba(255, 255, 255, 0.3); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; } /* (a faint edge round its fill) */
.like-fill { fill: url(#like-fill); }
/* the warmth behind it: brighter the more taps in a row (--warmth, 0 to 1), cooling once they stop */
.like-glow {
  position: absolute; inset: -11px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--like-a) 50%, transparent), color-mix(in srgb, var(--like-b) 22%, transparent) 45%, transparent 70%);
  opacity: calc(var(--warmth, 0) * 0.9); transition: opacity 1.4s var(--ease);
}
.like-row.tapping .like-glow { transition-duration: .15s; }
/* the thumbs floating up, from the thumb's middle (made, played and gone: feedback.js's floatUp) */
.like-floats { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.like-float {
  position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; opacity: 0; pointer-events: none;
  background: var(--c, var(--like-a));
  -webkit-mask: var(--like-mask) center / contain no-repeat; mask: var(--like-mask) center / contain no-repeat;
}
/* the thumb's light sweeping the row: a band, not a fill (it passes, the row's left as it was) */
.like-wash { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.like-wave {
  position: absolute; left: 25px; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle closest-side, transparent 52%, color-mix(in srgb, var(--like-a) 16%, transparent) 76%, color-mix(in srgb, var(--like-b) 8%, transparent) 90%, transparent);
}
/* how many are waiting to be sent */
.like-end { justify-self: end; min-width: 3ch; margin-right: 4px; text-align: right; font-size: 0.8rem; font-weight: 650; color: var(--like-a); font-variant-numeric: tabular-nums; white-space: nowrap; }
.like-num { display: inline-block; } /* (ticks over) */
/* how the send went, a moment, in the blurb's place: sent, a tick drawn and words in its colour; kept, quietly */
.pref-blurb.like-said { display: flex; align-items: center; gap: 4px; color: var(--like-a); mix-blend-mode: normal; }
.pref-blurb.like-said.like-kept { color: var(--ink-faint); }
.like-tick { flex: none; width: 13px; height: 13px; fill: none; stroke: var(--like-a); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; }
#like-fill stop:first-child { stop-color: var(--like-a); }
#like-fill stop:last-child { stop-color: var(--like-b); }