/* momcited search, variant F (chosen 19 Oct; English showcase port 22 Oct): a centred composer on powder. Greeting, a message card for her own words with "for whom" and a round send button, four intent chips that open starter questions, suggestions from the base under the card. Tomato only for the chosen row, chip and pressed button. Uses the page tokens. */
.cmp,.srch-ov{--white:#FFFDF8;--mute:rgba(58,39,35,.6);--edge:rgba(58,39,35,.22)}
.cmp{background:var(--powder);color:var(--ink);text-align:center;padding-block:clamp(48px,6vw,88px) clamp(52px,6vw,92px)}
.cmp .greet{margin:0 auto 24px;font-weight:300;font-size:clamp(30px,3.4vw,48px);line-height:1.08;letter-spacing:-.035em;max-width:18ch;text-wrap:balance}
.cmp .cw{position:relative;max-width:820px;margin-inline:auto;text-align:left}
.cmp .card{background:rgba(255,253,248,.86);border-radius:26px;box-shadow:0 10px 36px rgba(58,39,35,.10),0 0 0 1px rgba(58,39,35,.07);padding:16px 14px 12px 22px;transition:box-shadow .2s ease}
.cmp .card:focus-within{box-shadow:0 16px 48px rgba(58,39,35,.14),0 0 0 1px rgba(58,39,35,.10)}
.cmp textarea{display:block;width:100%;resize:none;border:0;outline:none;background:none;padding:6px 8px 6px 0;margin:0;font:300 18px/1.45 var(--sans);color:var(--ink);caret-color:var(--tomato);height:56px;max-height:220px;overflow-y:auto}
.cmp textarea::placeholder{color:var(--mute)}
.cmp textarea:placeholder-shown{overflow:hidden}
/* filters: age first, then chips added through «+» (D-89 catalogue); a chosen value is tomato */
.cmp .tools{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:6px}
.cmp .pop,.cmp .chip{position:relative}
.cmp .chips{display:contents}
.cmp .pill,.cmp .chip{display:inline-flex;align-items:center;gap:9px;height:36px;border:1px solid var(--edge);background:var(--paper);border-radius:999px;padding:0 14px;font-size:14px;cursor:pointer;transition:color .15s ease,border-color .15s ease}
.cmp .pill::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.cmp .pill.set,.cmp .chip{color:var(--tomato);border-color:rgba(215,72,45,.35)}
.cmp .chip{gap:2px;padding:0 6px 0 14px}
.cmp .chip button{background:none;border:0;padding:0;color:inherit;font-size:14px;cursor:pointer}
.cmp .chip .cx{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:16px;line-height:1;color:rgba(215,72,45,.7)}
/* «+» (variant A, 20 Oct): the same fill and line as the age pill; the cross is two bars, centred by the box, never by a font */
.cmp .plus{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--edge);background:var(--paper);border-radius:50%;color:var(--ink);cursor:pointer;transition:color .15s ease,border-color .15s ease}
.cmp .plus span{position:relative;display:block;width:12px;height:12px;font-size:0}
.cmp .plus span::before,.cmp .plus span::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;border-radius:1px;transform:translate(-50%,-50%)}
.cmp .plus span::before{width:12px;height:1.5px}.cmp .plus span::after{width:1.5px;height:12px}
@media (hover:hover) and (pointer:fine){.cmp .pill:hover,.cmp .plus:hover{color:var(--label);border-color:rgba(184,56,31,.4)}.cmp .chip .cx:hover{color:var(--tomato)}}
.cmp .plus[aria-expanded="true"]{color:var(--tomato);border-color:rgba(215,72,45,.35)}
.cmp .menu{position:absolute;left:0;top:calc(100% + 8px);z-index:30;list-style:none;margin:0;padding:6px;background:var(--white);border-radius:16px;box-shadow:0 14px 40px rgba(58,39,35,.16),0 0 0 1px rgba(58,39,35,.06);min-width:250px;max-height:340px;overflow-y:auto}
.cmp .menu li button{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;text-align:left;background:none;border:0;padding:9px 12px;border-radius:10px;font-size:14px;color:var(--ink);cursor:pointer;white-space:nowrap}
.cmp .menu li button b{font-weight:300;color:var(--mute)}
.cmp .menu li button:hover{background:var(--paper)}
.cmp .menu li button[aria-checked="true"]{color:var(--tomato)}
.cmp .menu .back{color:var(--mute);font-size:13px}
.cmp .menu .grp{padding:12px 12px 4px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.cmp .menu .note{padding:6px 12px 4px;font-size:12px;line-height:1.4;color:var(--mute);white-space:normal;max-width:260px}
/* "We understood": what her words say, one tap turns it into a filter */
.cmp .read{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:2px 0 4px;font-size:13px;color:var(--mute)}
.cmp .read button{background:none;border:0;padding:0;font-size:13px;font-weight:500;color:var(--ink);cursor:pointer}
.cmp .read button::before{content:"+ ";font-weight:300}
@media (hover:hover) and (pointer:fine){.cmp .read button:hover{color:var(--label)}}
.cmp .read em{font-style:normal}
.cmp .read .clash{flex-basis:100%;color:var(--label)}
.cmp .send{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 6px;border:0;background:none;color:var(--ink);font-size:15px;font-weight:500;cursor:pointer;transition:color .15s ease}
.cmp .send span{transition:transform .2s var(--out)}
@media (hover:hover) and (pointer:fine){.cmp .send:not(:disabled):hover{color:var(--label)}.cmp .send:not(:disabled):hover span{transform:translateX(3px)}}
.cmp .send:active{color:var(--tomato)}
.cmp .send:disabled{color:rgba(58,39,35,.45);cursor:default}
.cmp .intents{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 32px;margin-top:22px}
.cmp .intents button{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:4px 0;font-size:15px;color:var(--ink);cursor:pointer;transition:color .12s ease}
@media (hover:hover) and (pointer:fine){.cmp .intents button:hover{color:var(--label)}}
.cmp .intents button[aria-pressed="true"]{color:var(--tomato)}
.cmp .intents button:active{color:var(--tomato)}
.cmp .intents i{width:16px;height:16px;flex:0 0 auto;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.cmp .starters{max-width:820px;margin:14px auto 0;text-align:left}
.cmp .drop{position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:20;background:var(--white);border-radius:20px;box-shadow:0 18px 44px rgba(58,39,35,.16),0 0 0 1px rgba(58,39,35,.06);padding:8px;animation:cmp-drop .18s var(--out) both}
@keyframes cmp-drop{from{transform:translateY(-4px)}to{transform:none}}
.cmp .drop p,.cmp .starters p{margin:6px 10px 4px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.cmp .drop ul,.cmp .starters ul{list-style:none;margin:0;padding:0}
.cmp .drop a,.cmp .starters button{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px;border-radius:12px;font-size:16px;line-height:1.3}
.cmp .drop a small,.cmp .starters small{font-size:12px;color:var(--mute);white-space:nowrap}
.cmp .drop a:hover{background:var(--paper)}
/* hints go into the field: plain rows, colour on hover, tomato for the one just placed */
.cmp .starters button{width:100%;background:none;border:0;text-align:left;color:var(--ink);cursor:pointer;transition:color .15s ease}
.cmp .starters p span{text-transform:none;letter-spacing:0;font-weight:300}
@media (hover:hover) and (pointer:fine){.cmp .starters button:hover{color:var(--label)}}
.cmp .starters button.on,.cmp .starters button:active{color:var(--tomato)}
.cmp mark{background:none;color:inherit;font-weight:500}
.cmp a.on{background:var(--tomato)!important;color:var(--cream)}
.cmp a.on small{color:var(--cream)}
.cmp .drop .none{margin:10px;font-size:15px;color:var(--ink);text-transform:none;letter-spacing:0;font-weight:300}
.cmp .foot{margin:22px auto 0;font-size:13px;color:var(--mute);max-width:56ch}

/* overlay on inner pages: the same composer on powder over the whole screen */
.srch-ov{position:fixed;inset:0;z-index:50;overflow-y:auto;background:var(--powder);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);animation:srch-in .22s var(--out) both}
.srch-ov .cmp{min-height:100%;padding-top:clamp(64px,10vh,120px)}
.srch-x{position:absolute;top:calc(env(safe-area-inset-top,0px) + 22px);right:max(24px,env(safe-area-inset-right,0px));background:none;border:0;padding:4px 0;cursor:pointer;color:var(--ink);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.srch-x:active{color:var(--tomato)}
html.srch-lock{overflow:hidden}
@keyframes srch-in{from{transform:translateY(-8px)}to{transform:none}}

/* the header button that opens it */
.srch-btn{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:4px 0;cursor:pointer;color:inherit;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.srch-btn::before{content:"";width:11px;height:11px;border:1.5px solid currentColor;border-radius:50%}
.srch-btn kbd{font:inherit;font-size:11px;border:1px solid currentColor;border-radius:5px;padding:1px 5px;opacity:.5}
.srch-btn:active{color:var(--tomato)}
@media (max-width:760px){
  .cmp .intents{gap:10px 22px}.cmp .intents button{font-size:14px}
  .cmp .drop a,.cmp .starters button{flex-direction:column;gap:2px}
  .cmp .starters small{white-space:normal}
  .cmp .pill,.cmp .chip,.cmp .chip button{font-size:13px}.cmp .pill,.cmp .chip{height:34px}.cmp .plus{width:34px;height:34px}
  .cmp .read em{display:none}
  .srch-btn kbd{display:none}
}
@media (pointer:coarse){.srch-btn kbd{display:none}}
@media (prefers-reduced-motion:reduce){.srch-ov,.cmp .drop{animation:none}}
.cmp [hidden],.srch-ov[hidden]{display:none!important}
/* nothing exact: no card, the closest answers as plain rows on the page, then one quiet line */
.cmp .drop.empty{position:static;margin-top:14px;padding:0;background:none;box-shadow:none;animation:none}
.cmp .drop.empty .none{margin:0 10px 2px;font-size:15px;color:var(--mute)}
.cmp .drop.empty a:hover{background:none;color:var(--label)}
.cmp .drop.empty a.on{background:none!important;color:var(--tomato)}
.cmp .drop.empty a.on small{color:var(--mute)}
.cmp .drop.empty .more{margin:6px 10px 0;font-size:14px;letter-spacing:0;text-transform:none;font-weight:300;color:var(--mute)}
.cmp .drop .wide{background:none;border:0;padding:0;font-size:14px;font-weight:500;color:var(--ink);cursor:pointer}
@media (hover:hover) and (pointer:fine){.cmp .drop .wide:hover{color:var(--label)}}
.cmp .drop .wide:active{color:var(--tomato)}
/* variant B (20 Oct): the closest answer written on pale in the field; the layer copies the textarea's box and type exactly */
.cmp .field{position:relative}
.cmp .ghost{position:absolute;inset:0;z-index:1;padding:6px 8px 6px 0;font:300 18px/1.45 var(--sans);white-space:pre-wrap;overflow-wrap:break-word;color:transparent;pointer-events:none}
.cmp .ghost u{text-decoration:none;color:rgba(58,39,35,.36)}
.cmp .ghost .take{pointer-events:auto;display:inline-grid;place-items:center;min-width:28px;height:22px;margin-left:10px;padding:0 7px;border:0;border-radius:6px;background:var(--paper);font:500 12px/1 var(--sans);color:var(--mute);vertical-align:2px;cursor:pointer;transition:color .15s ease}
@media (hover:hover) and (pointer:fine){.cmp .ghost .take:hover{color:var(--label)}}
.cmp .ghost .take:active{color:var(--tomato)}
.cmp .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}