/* /feedback (v1.24.0) — the step-by-step feedback form. Tokens only. Phone first: every control ≥ 44 px, text fields 16 px+, one column; two columns from 700 px.
   The generic bottom action bar is hidden on this page (the form has its own Back / Next bar). */
@layer sections {
  .page-feedback .action-bar { display: none !important; }
  .fb { padding-block: var(--space-5) calc(var(--space-6) + 48px); }   /* the footer's curved top overlaps the section above it */
  .fb__wrap { max-width: 860px; }
  .fb-noscript { padding: var(--space-3); border-radius: var(--r-md); background: var(--sun-soft); font-weight: 700; }
  .fb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .fb-link { padding: .25rem 0; min-height: 32px; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .fb-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

  /* progress */
  .fb-progress { display: grid; gap: .45rem; margin-bottom: var(--space-4); }
  .fb-progress__bar { height: 10px; border-radius: 999px; background: var(--paper-2); overflow: hidden; border: 1px solid var(--line); }
  .fb-progress__bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--sun); transition: width var(--dur-2, .25s) var(--ease, ease); }
  .fb-progress__txt { margin: 0; font-weight: 800; color: var(--ink-2); font-size: .95rem; }
  .fb-resume { margin: 0 0 var(--space-3); padding: .55rem .9rem; border-radius: var(--r-md); background: var(--sage-tint); font-weight: 700; font-size: .95rem; }

  /* a step */
  .fb-step { display: grid; gap: var(--space-4); }
  .fb-step[hidden] { display: none; }
  .fb-step > h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.45rem, 1.15rem + 1.2vw, 2rem); line-height: 1.15; scroll-margin-top: 88px; }
  .fb-step > h2:focus, .fb-step > h2:focus-visible, .fb-thanks__card h2:focus-visible { outline: none; }
  .fb-sub { margin: -.4rem 0 0; color: var(--ink-2); max-width: 60ch; }
  .fb-grid { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 700px) { .fb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .fb-rows { display: grid; gap: var(--space-3); }

  /* a rating row: the thing, its stars, then liked / didn't like */
  .fb-row { display: grid; gap: .7rem; padding: var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--paper-3); box-shadow: var(--shadow-1); }
  .fb-row__head { display: grid; gap: .2rem; }
  .fb-row h3 { margin: 0; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.25; }
  .fb-row p { margin: 0; color: var(--ink-2); font-size: .95rem; line-height: 1.45; }
  .fb-row a { font-weight: 750; }
  .fb-stars { display: flex; align-items: center; flex-wrap: wrap; gap: .1rem .6rem; }
  .fb-stars__set { display: inline-flex; }
  .fb-star { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--ink-3); border-radius: 12px; }
  .fb-star svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; transition: transform var(--dur-1, .15s) var(--ease, ease); }
  .fb-star:hover svg { transform: scale(1.12); }
  .fb-star.is-on { color: var(--amber); }
  .fb-star.is-on svg { fill: var(--sun); stroke: var(--amber); }
  .fb-star:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; }
  .fb-stars__say { min-width: 8ch; font-weight: 800; color: var(--amber); font-size: .95rem; }
  .fb-notes { display: grid; gap: .7rem; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 700px) { .fb-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .fb-notes label { display: grid; gap: .3rem; font-weight: 750; font-size: .92rem; }
  .fb-notes textarea, .fb-step textarea { width: 100%; min-height: 72px; padding: .7rem .9rem; font: inherit; font-size: 1rem; font-weight: 600; line-height: 1.45; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line-strong); border-radius: 14px; resize: vertical; }
  .fb-notes textarea:focus, .fb-step textarea:focus { outline: none; border-color: var(--sage-deep); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sun) 55%, transparent); }
  .fb-count { display: block; margin-top: .3rem; font-size: .88rem; font-weight: 700; color: var(--ink-3); text-align: right; }
  .fb-count[hidden] { display: none; }
  .fb-count.is-full { color: var(--warn); text-align: left; }
  .fb-row.is-invalid { border-color: var(--err); animation: fb-glow 2.4s ease-in-out; }
  @keyframes fb-glow { 0%, 100% { box-shadow: var(--shadow-1); } 15%, 70% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--err) 28%, transparent); } }

  /* do you know this? */
  .fb-bulk { margin: 0; }
  /* 1.31.0: "which of these do you know?" — tick cards (name, host, one line); then a 30-second visit page per product they don't know */
  .fb-picks { display: grid; gap: .6rem; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 720px) { .fb-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .fb-pick { position: relative; display: block; cursor: pointer; }
  .fb-pick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .fb-pick__box { display: grid; gap: .15rem; min-height: 100%; padding: .8rem .9rem .8rem 2.9rem; border: 1.5px solid var(--line-strong); border-radius: var(--r-lg);
    background: var(--paper-3); transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); position: relative; }
  .fb-pick__box::before { content: ""; position: absolute; left: .9rem; top: .95rem; width: 1.3rem; height: 1.3rem; border-radius: 7px; border: 2px solid var(--line-strong); background: var(--paper); }
  .fb-pick input:checked + .fb-pick__box { background: var(--sun-soft); border-color: var(--sun); }
  .fb-pick input:checked + .fb-pick__box::before { border-color: var(--sun-ink); background: var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A2A22' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 80% no-repeat; }
  .fb-pick input:focus-visible + .fb-pick__box { outline: 3px solid var(--focus); outline-offset: 2px; }
  .fb-pick__t { font-weight: 850; font-size: 1.02rem; line-height: 1.25; }
  .fb-pick__h { font-size: .82rem; font-weight: 800; color: var(--amber); overflow-wrap: anywhere; }
  .fb-pick__d { font-size: .93rem; color: var(--ink-2); line-height: 1.4; }
  .fb-visit { display: grid; gap: .7rem; }
  .fb-visit__kick { margin: 0; font-size: .8rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); }
  .fb-visit h2 { margin: 0; }
  .fb-visit__host { margin: -.3rem 0 0; font-weight: 800; color: var(--sage-deep); overflow-wrap: anywhere; }
  .fb-visit__pitch { margin: 0; font-size: 1.1rem; line-height: 1.5; color: var(--ink); }
  .fb-visit__offers { margin: 0; padding: .8rem 1rem .8rem 2.2rem; border-radius: var(--r-lg); background: var(--paper-3); border: 1px dashed var(--line-strong); display: grid; gap: .35rem; }
  .fb-visit__offers li { line-height: 1.4; } .fb-visit__offers li::marker { content: "🐾  "; }
  .fb-visit__try { margin: 0; color: var(--ink-2); }
  .fb-visit__go { margin: .2rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
  .fb-visit__go .btn { white-space: normal; text-align: left; }
  .fb-visit__timer { font-weight: 800; color: var(--sage-deep); }
  .fb-visit__acts { display: grid; gap: .6rem; margin-top: .4rem; }
  @media (min-width: 640px) { .fb-visit__acts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .fb-visit__acts .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }
  .fb-know { display: grid; gap: .6rem; padding: var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--paper-3); }
  .fb-know.is-new { background: var(--paper); }
  .fb-know .chiprow { gap: .4rem; }
  .fb-know .chip span { min-height: 44px; padding: .45rem .9rem; font-size: .95rem; }

  /* last page */
  .fb-grid--wide { grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 700px) { .fb-grid--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .fb-nps .chiprow { gap: .35rem; }
  .fb-nps .chip span { min-width: 46px; justify-content: center; padding-inline: .5rem; }
  .fb-rankbox { display: grid; gap: .5rem; padding: var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--paper-3); }
  .fb-rankbox h3 { margin: 0; font-family: var(--font-display); font-size: 1.2rem; }
  .fb-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; counter-reset: rank; }
  .fb-rank li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .35rem .5rem .35rem .45rem; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--paper); }
  .fb-rank__n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sun); color: var(--sun-ink); font-weight: 850; font-size: .9rem; }
  .fb-rank__t { min-width: 0; font-weight: 750; line-height: 1.25; overflow-wrap: anywhere; }
  .fb-rank__t small { display: block; color: var(--ink-3); font-weight: 650; font-size: .8rem; }
  .fb-rank__mv { display: inline-flex; gap: .2rem; }
  .fb-rank__mv button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--paper-3); color: var(--ink); cursor: pointer; font-size: 1rem; line-height: 1; }
  .fb-rank__mv button:disabled { opacity: .3; cursor: default; }
  .fb-rank__mv button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  .fb-rank li.is-new .fb-rank__t { color: var(--ink-3); }

  /* back / next bar */
  .fb-nav { position: sticky; bottom: 0; z-index: 4; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .6rem 1rem; margin-top: var(--space-5); padding: .8rem 0 calc(.8rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, var(--paper) 78%, transparent); }
  .fb-nav [data-fb-back] .i { transform: rotate(180deg); }
  .fb-nav [data-fb-next] { margin-left: auto; }
  .fb-skip { margin-right: auto; }
  .form-err { margin: var(--space-3) 0 0; color: var(--err); font-weight: 800; }

  /* thank you */
  .fb-thanks { padding-block: var(--space-4); }
  .fb-thanks[hidden] { display: none; }
  .fb-thanks__card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); justify-items: start; padding: var(--space-5) var(--space-4); border: 1.5px solid var(--sun-deep, var(--sun)); border-radius: var(--r-xl, 28px); background: linear-gradient(160deg, var(--sun-soft), var(--paper-3)); box-shadow: var(--shadow-2, var(--shadow-1)); }
  .fb-thanks__card h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); line-height: 1.15; scroll-margin-top: 88px; }
  .fb-thanks__card h2:focus { outline: none; }
  .fb-thanks__card p { margin: 0; max-width: 56ch; }
  .fb-thanks__code-l { font-weight: 800; color: var(--ink-2); font-size: .9rem; letter-spacing: .04em; text-transform: uppercase; }
  .fb-thanks__code { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; }
  .fb-thanks__code b { padding: .35rem .9rem; border-radius: 14px; border: 2px dashed var(--amber); background: var(--paper-3); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.3rem); letter-spacing: .08em; color: var(--ink); user-select: all; }
  .fb-thanks__act { max-width: 100%; }
  .fb-thanks__act .btn { gap: .6rem; max-width: 100%; white-space: normal; text-align: center; justify-content: center; }
  @media (prefers-reduced-motion: reduce) { .fb-progress__bar i, .fb-star svg, .fb-row.is-invalid { transition: none; animation: none; } }

  /* ---- 1.25.0: the embedded Google Form ---- */
  .fbg { display: grid; gap: var(--space-4); }
  .fbg[hidden] { display: none; }
  .fbg-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; grid-template-columns: minmax(0, 1fr); counter-reset: fbg; }
  @media (min-width: 760px) { .fbg-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .fbg-steps li { position: relative; display: grid; gap: .2rem; padding: .85rem 1rem .9rem 3.4rem; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--paper-3); box-shadow: var(--shadow-1); counter-increment: fbg; }
  .fbg-steps li::before { content: counter(fbg); position: absolute; left: .9rem; top: .85rem; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--sun); color: var(--sun-ink); font-weight: 850; }
  .fbg-steps b { font-family: var(--font-display); font-size: 1.12rem; line-height: 1.2; }
  .fbg-steps span { color: var(--ink-2); font-size: .93rem; line-height: 1.45; }
  .fbg-code { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .7rem; margin: 0; padding: .7rem 1rem; border-radius: var(--r-md); background: var(--sage-tint); }
  .fbg-code__l { font-weight: 800; color: var(--ink-2); font-size: .85rem; letter-spacing: .05em; text-transform: uppercase; }
  .fbg-code b { padding: .15rem .6rem; border-radius: 10px; border: 2px dashed var(--amber); background: var(--paper-3); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 1.15rem; letter-spacing: .08em; }
  .fbg-code__h { color: var(--ink-2); font-size: .9rem; }
  /* the form sits in a paper card with two cat ears — the BilluBnB card corner */
  .fbg-frame { position: relative; margin-top: 14px; padding: 10px; border: 1.5px solid var(--line-strong); border-radius: var(--r-xl, 28px); background: var(--paper-3); box-shadow: var(--shadow-2, var(--shadow-1)); }
  .fbg-ear { position: absolute; top: -15px; width: 34px; height: 30px; background: var(--paper-3); border: 1.5px solid var(--line-strong); border-bottom: 0; border-right: 0; border-radius: 6px 0 0 0; transform: rotate(45deg) skew(8deg, 8deg); z-index: 0; }
  .fbg-ear--l { left: 34px; } .fbg-ear--r { right: 34px; }
  .fbg-iframe { position: relative; z-index: 1; display: block; width: 100%; height: clamp(560px, calc(100svh - 170px), 1080px); border: 0; border-radius: calc(var(--r-xl, 28px) - 10px); background: #fff; }
  .fbg-loading { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; margin: 0; font-weight: 800; color: var(--ink-2); pointer-events: none; }
  .fbg-loading[hidden] { display: none; }
  .fbg-loading .i { margin-right: .4rem; animation: fbg-beat 1.2s ease-in-out infinite; }
  @keyframes fbg-beat { 50% { transform: scale(1.18); } }
  .fbg-after { display: grid; justify-items: start; gap: .5rem; }
  .fbg-after .btn { white-space: normal; text-align: left; }
  .fbg-msg { margin: 0; min-height: 1.4em; font-weight: 700; color: var(--ink-2); }
  @media (max-width: 480px) { .fbg-frame { padding: 6px; margin-inline: calc(var(--space-2, 8px) * -1); } .fbg-iframe { height: calc(100svh - 120px); min-height: 520px; } }
  @media (prefers-reduced-motion: reduce) { .fbg-loading .i { animation: none; } }
}