/* sites/talk.css — talk.billubnb.in only: speech-bubble hero art, the swipe deck (cards + topic chips + controls), the two
   consultation cards and the community band. Phone-first (base = 390 px): one card per screen with the next one peeking; 2 per view from
   720 px, 3 from 1100 px. Card surfaces are the verified soft tints with ink text (DESIGN.md §4/§11). */
@layer sections {
  /* ---- hero: three speech bubbles (the first three questions, decorative) ---------------------------------------- */
  .bubbles { position: relative; display: grid; gap: var(--space-3); padding: var(--space-2) 0; }
  .bubble { position: relative; margin: 0; max-width: 88%; padding: .8rem 1rem .85rem 3.1rem; border-radius: 22px 22px 22px 6px;
    background: var(--paper-3); box-shadow: var(--shadow-1); font-family: var(--font-display); font-variation-settings: "SOFT" 100;
    font-weight: 650; font-size: 1.08rem; line-height: 1.25; }
  .bubble span { position: absolute; left: .8rem; top: .7rem; font-size: 1.4rem; line-height: 1; }
  .bubble--2 { justify-self: end; border-radius: 22px 22px 6px 22px; background: var(--sun-soft); }
  .bubble--3 { margin-left: 8%; background: var(--blush-soft); }
  @media (prefers-reduced-motion: no-preference) {
    .bubble { animation: bub-in .7s var(--ease-out) both; }
    .bubble--2 { animation-delay: .12s; } .bubble--3 { animation-delay: .24s; }
    @keyframes bub-in { from { transform: translateY(18px) scale(.96); } to { transform: none; } }
  }
  @media (max-width: 899px) { .site-hero--talk .site-hero__art { display: none; } .site-hero--talk { padding-bottom: calc(var(--space-5) + var(--sheet-r)); } }

  /* ---- deck toolbar: topic chips + shuffle ------------------------------------------------------------------------ */
  .deck { position: relative; }
  /* one row at every width (a sideways scroll when it doesn't fit): wrapping would change height when the web font swaps in (CLS) */
  .deck__bar { margin-bottom: var(--space-2); }
  .deck__cats { display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; padding: 4px 2px;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overscroll-behavior-x: contain; position: relative; }
  .deck__cats::-webkit-scrollbar { display: none; }
  .deck__chip { flex: none; display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .35rem .95rem; border-radius: var(--r-pill);
    border: 1.5px solid var(--line-strong); background: var(--paper-3); color: var(--ink); font: inherit; font-weight: 800; font-size: .95rem; cursor: pointer;
    transition: background-color var(--dur-2), border-color var(--dur-2), transform var(--dur-1) var(--ease); }
  .deck__chip .i { width: 17px; height: 17px; }
  .deck__chip span { font-size: .8rem; font-weight: 800; color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .deck__chip:hover { background: var(--sun-soft); }
  .deck__chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  .deck__chip[aria-pressed="true"] span { color: var(--paper); }
  .deck__chip:active { transform: scale(.96); }
  @media (min-width: 720px) { .deck__cats { margin-inline: 0; padding-inline: 2px; } }

  /* ---- the track + cards -------------------------------------------------------------------------------------------- */
  .deck__track { --cw: min(86%, 380px); position: relative; display: flex; gap: var(--space-4); align-items: stretch; list-style: none; margin: 0;
    margin-inline: calc(var(--gutter) * -1); padding: var(--space-5) var(--gutter) var(--space-6); overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .deck__track::-webkit-scrollbar { display: none; }
  .deck__track:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: var(--r-md); }
  @media (min-width: 720px) { .deck__track { --cw: calc((100% - var(--space-4)) / 2 - 1px); margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; } }
  @media (min-width: 1100px) { .deck__track { --cw: calc((100% - var(--space-4) * 2) / 3 - 1px); } }

  .tkc { --tc: var(--paper-3); flex: 0 0 var(--cw); min-width: 0; scroll-snap-align: start; scroll-margin-top: calc(var(--header-h) + 90px); }
  .tkc--cute { --tc: var(--blush-soft); } .tkc--behaviour { --tc: var(--sun-soft); } .tkc--health { --tc: var(--sage-tint); }
  .tkc--home { --tc: var(--paper-3); } .tkc--life { --tc: var(--apricot); }
  .tkc__in { position: relative; display: flex; flex-direction: column; gap: var(--space-3); height: 100%; min-height: 360px; padding: var(--space-5) var(--space-5) var(--space-4);
    border-radius: var(--r-lg); background: var(--tc); color: var(--ink); border: 1px solid var(--line);
    box-shadow: 0 1px 1px rgba(58, 42, 34, .06), 0 16px 30px -18px rgba(58, 42, 34, .4); }
  .tkc__in::before { content: ""; position: absolute; inset: 10px; border-radius: calc(var(--r-lg) - 8px); border: 1.5px dashed color-mix(in srgb, var(--ink) 16%, transparent);
    pointer-events: none; }
  .tkc__in:focus { outline: none; } .tkc__in:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
  .tkc__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: 0; }
  .tkc__cat { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .7rem; border-radius: var(--r-pill); background: var(--paper-3);
    font-size: .82rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
  .tkc__cat .i { width: 15px; height: 15px; }
  .tkc--home .tkc__cat { background: var(--paper-2); }
  .tkc__emoji { font-size: 2.3rem; line-height: 1; transform: rotate(8deg); }
  .tkc__q { margin: var(--space-2) 0 0; font-size: clamp(1.45rem, 1.2rem + 1vw, 1.75rem); line-height: 1.15; text-wrap: balance; }
  .tkc__a { margin: 0; font-size: 1.04rem; line-height: 1.55; color: var(--ink); }
  .tkc__vet { display: flex; gap: .5rem; align-items: flex-start; margin: 0; padding: .65rem .8rem; border-radius: var(--r-sm);
    background: var(--paper-3); font-size: .95rem; font-weight: 700; line-height: 1.45; }
  .tkc__vet .i { width: 18px; height: 18px; flex: none; margin-top: .12rem; color: var(--err); }
  .tkc__src { margin-top: auto; display: inline-flex; align-items: center; gap: .3rem; align-self: flex-start; min-height: 44px; padding-top: var(--space-2);
    font-size: .9rem; font-weight: 700; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
  a.tkc__src:hover { color: var(--ink); }
  .tkc__src .i { width: 14px; height: 14px; }
  .tkc.is-hl .tkc__in { outline: 4px solid var(--sun); outline-offset: 3px; }
  @media (prefers-reduced-motion: no-preference) {
    .tkc.is-hl .tkc__in { animation: hl 1.6s var(--ease-out); }
    @keyframes hl { 0% { transform: scale(.97); } 30% { transform: scale(1.015); } 100% { transform: none; } }
    .deck__track.is-dealt .tkc { animation: deal .45s var(--ease-out) both; }
    .deck__track.is-dealt .tkc:nth-child(2) { animation-delay: .05s; } .deck__track.is-dealt .tkc:nth-child(3) { animation-delay: .1s; }
    @keyframes deal { from { transform: translateX(40px) rotate(3deg); } to { transform: none; } }
  }

  /* ---- controls: ‹ 3 of 25 [meter] › ---------------------------------------------------------------------------------- */
  .deck__ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-2);
    visibility: hidden; }
  .deck.is-ready .deck__ctl { visibility: visible; }
  .deck__nav { display: flex; align-items: center; gap: var(--space-3); }
  .deck__nav [data-prev] .i { transform: rotate(180deg); }
  .deck__prog { display: grid; justify-items: center; gap: .35rem; min-width: 9.5rem; }
  .deck__count { font-weight: 800; font-size: .95rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .deck__meter { display: block; width: 100%; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 14%, transparent); overflow: hidden; }
  .deck__meter i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--sun-deep); transition: width var(--dur-2) var(--ease); }
  .deck__note { margin-top: var(--space-5); }

  .deck__index { margin-top: var(--space-4); border-radius: var(--r-md); background: var(--paper-3); border: 1px solid var(--line); }
  .deck__index summary { list-style: none; display: flex; align-items: center; gap: .6rem; min-height: 52px; padding: .6rem 1rem; cursor: pointer; font-weight: 800; }
  .deck__index summary::-webkit-details-marker { display: none; }
  .deck__index summary .i { width: 20px; height: 20px; flex: none; }
  .deck__index summary span { flex: 1; }
  .deck__index[open] summary .i:last-child { transform: rotate(180deg); }
  .deck__index ol { margin: 0; padding: 0 1rem 1rem 2.6rem; display: grid; gap: .1rem; columns: 1; }
  .deck__index li { padding-left: .2rem; }
  .deck__index a { display: inline-block; padding: .45rem 0; min-height: 24px; color: var(--ink); font-weight: 650; }
  @media (min-width: 900px) { .deck__index ol { display: block; columns: 2; column-gap: var(--space-7); } .deck__index li { break-inside: avoid; } }

  .deck-empty { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-5); border-radius: var(--r-lg); background: var(--paper-3); }
  .deck-empty p { margin: 0; }

  /* ---- consultation cards -------------------------------------------------------------------------------------------- */
  .consults { list-style: none; margin: 0; padding: 18px 0 0; display: grid; gap: var(--space-6) var(--space-4); }
  @media (min-width: 720px) { .consults { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .consult { --ear-bg: var(--paper-3); display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5) var(--space-4) var(--space-4); }
  .consult--free { --ear-bg: var(--paper-2); }
  .consult__head { display: flex; gap: var(--space-3); align-items: flex-start; }
  .consult__head > div { flex: 1; min-width: 0; }
  .consult__head h3 { margin: 0; font-size: 1.35rem; line-height: 1.15; }
  .consult__min { display: flex; align-items: center; gap: .3rem; margin: .3rem 0 0; font-weight: 700; font-size: .92rem; color: var(--ink-2); }
  .consult__min .i { width: 15px; height: 15px; }
  .consult__price { margin: 0; }
  .consult__price strong { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-size: 1.6rem; font-weight: 800; line-height: 1; }
  .consult__ask { font-size: 1.2rem !important; }
  .consult__text { margin: 0; color: var(--ink); line-height: 1.5; }
  .consult__pick { align-self: flex-start; margin-top: auto; }
  .consult__pick.is-picked { background: var(--sun-soft); }
  .consult-form { margin-top: var(--space-6); max-width: 820px; margin-inline: auto; }

  /* ---- community band -------------------------------------------------------------------------------------------- */
  .community { display: grid; gap: var(--space-4); align-items: center; justify-items: start; }
  .community h2 { margin: 0; font-size: var(--step-2); }
  .community .lead { margin: var(--space-2) 0 0; }
  @media (min-width: 900px) { .community { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-6); } }
}