/* ——— Feedback (feedback.js): a sheet as Preferences is (makeSheet, dialog.sheet in cards.css), up
   from the bottom, no wider than a phone's on a wide screen; on a phone on its side, a panel in the
   middle. Then its way to it: Preferences' last row. ——— */
/* (its box, glass and ways in and out: Preferences', in cards.css's .prefs, .fb) */
.fb::-webkit-scrollbar { display: none; }
@media (orientation: portrait), (min-height: 500px) {
  /* (as Preferences': quiet words lit by what's behind) */
  dialog.sheet.fb :is(.fb-intro, .fb-kind-blurb, .fb-email-note, .fb-thanks-words) { mix-blend-mode: plus-lighter; color: rgba(255, 255, 255, 0.6); }
}
@media (prefers-reduced-motion: reduce) {
  .fb[open], .fb.closing, .fb[open]::backdrop, .fb.closing::backdrop { animation-duration: .01ms !important; }
}

.fb-form, .fb-thanks { display: grid; gap: 22px; padding: 0 20px 24px; }
.fb-head { margin-bottom: -10px; }
.fb h2 { margin: 0; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.fb h2:focus { outline: none; }
.fb-intro { margin: -8px 4px -4px; font-size: 0.8rem; line-height: 1.45; color: var(--ink-soft); text-wrap: pretty; }

/* ——— the kinds: a phone's settings rows, as Preferences' Ratings: an icon, the name, what it
   covers under it, and a check on the one picked, in the switches' blue ——— */
.fb-kinds { margin: 0 -10px; padding: 0; border: 0; min-width: 0; }
.fb-kind {
  position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  min-height: 58px; padding: 9px 14px; border-radius: 12px; cursor: pointer; -webkit-user-select: none; user-select: none;
  transition: background .2s;
}
.fb-kind input { position: absolute; opacity: 0; pointer-events: none; }
.fb-kind + .fb-kind::before { content: ""; position: absolute; top: 0; left: 50px; right: 14px; height: 1px; background: rgba(255, 255, 255, 0.07); }
@media (hover: hover) { .fb-kind:hover { background: rgba(255, 255, 255, 0.035); } }
.fb-kind:active { background: rgba(255, 255, 255, 0.06); transition-duration: .06s; }
.fb-kind-icon { width: 22px; height: 22px; color: var(--ink-faint); transition: color .2s; }
.fb-kind-icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fb-kind-text { display: grid; gap: 1px; }
.fb-kind-name { font-weight: 600; font-size: 0.94rem; letter-spacing: -0.005em; color: var(--ink-soft); transition: color .2s; }
.fb-kind-blurb { font-size: 0.76rem; line-height: 1.35; color: var(--ink-faint); }
.fb-kind:has(input:checked) .fb-kind-name { color: var(--ink); }
.fb-kind:has(input:checked) .fb-kind-icon { color: rgb(10, 132, 255); }
/* (its check: Preferences' Ratings', cards.css's .check) */

/* ——— the words: one roomy field, its label the question the kind asks ——— */
.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 textarea, .fb 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 textarea { min-height: 136px; max-height: 40svh; padding: 13px 16px 16px; resize: none; field-sizing: content; }
.fb :is(textarea, input)::placeholder { color: rgba(244, 241, 234, 0.36); }
.fb :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 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 input[type=email]:focus { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); }
.fb 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: the site's accent fill, as Showtimes', centred at the foot ——— */
.fb-send-row {
  position: sticky; z-index: 1; bottom: 0; /* (Chrome's sticky edge: the sheet's content box, over its glass's under-the-screen padding) */ 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.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) */
.fb-send, .fb-done {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 116px; cursor: pointer;
  padding: 12px 26px; border: 0; border-radius: 99px;
  background: var(--accent-grad); color: var(--on-accent); font-size: 0.92rem; font-weight: 600;
  box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--accent) 70%, transparent);
  transition: filter .2s, transform .2s var(--ease), opacity .2s;
}
@media (hover: hover) { .fb-send:hover, .fb-done:hover { filter: brightness(1.1); } }
.fb-send:active, .fb-done:active { transform: scale(0.97); transition-duration: .08s; }
@media (max-width: 777px) { .fb-send { flex: 1; } }
.sending .fb-send { opacity: 0.75; cursor: progress; }
.sending .fb-send::before { content: ""; width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; 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-head { margin-bottom: 0; }
.fb-thanks:not([hidden]) { grid-template-rows: auto 1fr; }
.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 .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: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* 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); }

/* a phone on its side: little height, so the field's a little shorter */
@media (orientation: landscape) and (max-height: 499px) { .fb textarea { min-height: 96px; } }