/* Stage 7a: SearchBox, ExampleChip and search result cards. Loaded only by home/ai. */
:where([data-page="home"], [data-page="ai"]) {
  --control-line:var(--muted); --control-line-on-navy:var(--on-navy-faint);
  --search-caption-size:12.5px; --search-small-size:13.5px; --search-detail-size:14.5px;
  --search-card-title-size:22px; --search-circle:50%; --search-input-size:18px;
  --search-text-1:17px; --search-text-2:13px; --search-text-3:15px; --search-text-16:12.5px;
  --search-radius-1:var(--r-pill); --search-radius-2:var(--r-l); --search-radius-3:50%;
}
.ai-form { display:flex; align-items:center; gap:8px; padding:6px; border:1.5px solid var(--navy); border-radius:var(--r-m); background:var(--surface); box-shadow:var(--shadow-search); }
.ai-form:focus-within { outline:2px solid var(--focus-ring); outline-offset:2px; }
.ai-input { min-width:0; width:100%; flex:1; min-height:60px; padding:8px 22px; border:0; border-radius:var(--r-pill); background:transparent; color:var(--ink); font-size:var(--search-input-size); }
.ai-search .ai-input:focus-visible { outline:none; } /* The SearchBox retains its whole-box focus ring. */
.ai-input::placeholder { color:var(--muted); opacity:1; }
.send { flex-shrink:0; min-height:60px; padding:16px 30px; border-radius:var(--r-s); color:var(--navy); background:var(--lime); font-size:var(--frame-text-17); font-weight:600; }
.examples { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:16px; }
.example, .s2x-part, .ai-part { max-width:100%; min-height:var(--tap-min); padding:8px 16px; border:1px solid var(--control-line); border-radius:var(--r-pill); background:var(--surface); color:var(--ink-2); font-size:var(--frame-text-14); line-height:1.6; text-align:left; }
.ai-part { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.ai-part small { color:var(--muted); font:var(--text-caption); font-variant-numeric:tabular-nums; }
.ai-part .arrow { display:none; }
.ai-part[aria-pressed="true"] { border-color:var(--navy); background:var(--tint); color:var(--navy); font-weight:600; }
.ai-part[aria-pressed="true"] small { color:var(--navy); }
@media (hover:hover) {
  .ai-search .send:hover { background:var(--lime-hover); }
  .ai-search .example:hover, .ai-part:hover { border-color:var(--navy); color:var(--navy); }
  .s2x-part:hover { background:var(--band); }
}
@media (max-width:600px) {
  .ai-form { gap:0; padding:5px; }
  .ai-input { min-height:52px; padding-inline:12px; font-size:var(--frame-text-16); }
  .send { min-height:52px; padding:8px 18px; font-size:var(--frame-text-16); }
  .examples { justify-content:flex-start; }
}
.ai-result { margin-top:24px; padding:24px 32px; border:1px solid var(--line); border-radius:var(--search-radius-2); background:var(--band); text-align:left; font-size:var(--search-text-1); }
.result-message { color:var(--ink); font:var(--text-body); overflow-wrap:anywhere; }
.result-message-title { display:block; font:var(--text-title-sub); font-weight:600; }
.result-message-body { display:block; margin-top:8px; }
[data-hh-result-message="safety"] #pain-figure,
[data-hh-result-message="safety"] .ai-body,
[data-hh-result-message="safety"] .s2x-teaser,
[data-hh-result-message="safety"] .body-controls,
[data-hh-result-message="safety"] .body-label,
[data-hh-result-message="safety"] .body-sides,
[data-hh-result-message="safety"] .ai-hint,
body:has([data-hh-result-message="safety"]) [data-cond] { display:none; }

.hh-out-k { display:block; margin-bottom:8px; font-size:var(--search-text-2); color:var(--muted); }

.hh-out-n { display:block; margin-top:8px; font-size:var(--search-text-3); color:var(--muted); }

.ai-result i { margin-inline:4px; font-style:normal; color:var(--muted); }

.hh-fix { min-height:var(--tap-min); margin-left:8px; padding:8px; background:transparent; font-size:var(--search-text-2); text-decoration:underline; text-underline-offset:4px; }

.ai-note { margin-top:16px; color:var(--muted); font-size:var(--search-text-2); }

@media (max-width:600px) {
.ai-result { padding:16px; font-size:var(--search-text-3); }
.ai-note { text-align:left; }
}
.s2-say-k { display:block; margin-bottom:2px; font-size:var(--search-text-2); opacity:.7; }

.s2x-next { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:16px; }

.s2x-next[hidden] { display:none; }

.s2x-next-k { width:100%; font-size:var(--search-text-2); opacity:.66; }

.s2x-next button { min-height:var(--tap-min); padding:6px 16px; border:1px solid var(--lime); border-radius:var(--search-radius-1); background:transparent; color:inherit; font-size:var(--search-text-3); }

@media (hover:hover) {
.s2x-next button:hover { background:var(--lime); color:var(--ink); }
}
.s2c { margin-top:16px; padding-top:16px; border-top:1px solid var(--line-on); }

.s2c.is-in { animation:s2c-in .7s cubic-bezier(.2,.7,.2,1) both; }

.s2c-k { display:block; margin-bottom:10px; font-size:var(--search-text-2); opacity:.7; }

.s2c-row { display:flex; flex-wrap:wrap; gap:8px; }

.s2c-chip { display:inline-flex; align-items:center; gap:8px; min-height:var(--tap-min); padding:8px 16px 8px 14px; border:1px solid var(--control-line-on-navy); border-radius:var(--search-radius-1); font-size:var(--search-text-3); transition:background-color .25s ease; }

.s2c-chip i { width:7px; height:7px; border-radius:var(--search-radius-3); background:var(--coral); }

.s2c-chip span { opacity:.6; transition:transform .25s ease; }

@media (hover:hover) {
.s2c-chip:hover { background:var(--on-navy-line); }
}
@media (hover:hover) {
.s2c-chip:hover span { transform:translateX(3px); }
}
.s2c-n { display:block; margin-top:10px; font-size:var(--search-text-16); opacity:.62; }

/* Standalone result variant: RowCard links and the same selectable chips. */
.ai-answer { display:grid; gap:20px; min-width:0; padding-block:18px; border-top:1px solid var(--line); }
.ai-answer:has([data-hh-out][hidden]) { display:none; }
.ai-tool .s2x-next { margin:0; }
.ai-tool .s2x-next-k, .ai-tool .s2c-k { color:var(--muted); opacity:1; }
.ai-tool .s2x-next button { min-height:var(--tap-min); padding:8px 16px; border-color:var(--control-line); background:var(--surface); color:var(--navy); }
.ai-tool .s2x-next button[aria-pressed="true"] { border-color:var(--navy); background:var(--tint); font-weight:600; }
.ai-tool .s2c { margin:0; padding:0; border:0; }
.ai-tool .s2c-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 32px; }
.ai-tool .s2c-chip { min-height:64px; padding:18px 0; border:0; border-top:1px solid var(--line); border-radius:var(--frame-square); color:var(--navy); font:var(--text-list); font-weight:500; }
.ai-tool .s2c-chip i { display:none; }
.ai-tool .s2c-chip span { margin-left:auto; opacity:1; }
.ai-tool .s2c-n { color:var(--muted); opacity:1; }
.ai-tool .hh-recover { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.ai-tool .hh-recover button, .ai-tool .hh-recover a { display:inline-flex; align-items:center; min-height:var(--tap-min); padding:8px 14px; border:1px solid var(--control-line); border-radius:var(--r-pill); background:var(--surface); color:var(--navy); font:var(--text-caption); }
@media (hover:hover) {
  .ai-tool .s2c-chip:hover { background:none; text-decoration:underline; text-underline-offset:4px; }
  .ai-tool .s2c-chip:hover span { transform:none; }
  .ai-tool .s2x-next button:hover { border-color:var(--navy); }
}
@media (max-width:860px) { .ai-tool .s2c-row { grid-template-columns:minmax(0,1fr); } }
@media (prefers-reduced-motion:reduce) { .ai-tool .s2c.is-in { animation:none; } }

.cond-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; }

.cond-grid.n3 { grid-template-columns:repeat(3,minmax(0,1fr)); }

.cond-grid.n2 { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:860px; }

.cond-grid.n1 { grid-template-columns:minmax(0,1fr); max-width:420px; }

.cond-card { display:flex; flex-direction:column; min-width:0; color:var(--ink); }

.cond-art { position:relative; display:block; aspect-ratio:4/5; overflow:hidden; border-radius:var(--r-card); background:var(--band); }

.cond-art img { width:100%; height:100%; object-fit:cover; object-position:var(--expand-pos,center); }

.cond-pill { position:absolute; top:12px; left:12px; padding:2px 10px; border-radius:var(--r-pill); background:var(--surface); color:var(--navy); font-size:var(--frame-text-12); font-weight:600; white-space:nowrap; box-shadow:0 1px 0 var(--line); }

.cond-txt { display:flex; flex:1; flex-direction:column; gap:2px; padding:18px 2px 0; }

.cond-txt small { color:var(--muted); font-size:var(--search-caption-size); }

.cond-txt b { font-size:var(--search-card-title-size); font-weight:500; letter-spacing:-.03em; }

.cond-line { margin-top:8px; color:var(--ink-2); font-size:var(--search-detail-size); line-height:1.6; }

.cond-more { margin-top:auto; padding-top:14px; color:var(--navy); font-size:var(--frame-text-14); font-weight:600; }

.cond-more i { font-style:normal; }

@media (hover:hover) {
.cond-card:hover .cond-txt b { text-decoration:underline; text-underline-offset:6px; }
}
.cond-card:focus-visible { outline:2px solid var(--focus-ring); outline-offset:6px; border-radius:var(--r-card); }

@media (max-width:860px) {
.cond-grid { display:flex; max-width:none; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; }
.cond-grid.n1 { display:flex; max-width:none; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; }
.cond-grid.n2 { display:flex; max-width:none; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; }
.cond-grid.n3 { display:flex; max-width:none; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; }
.cond-grid:not(.n1)::after { content:''; flex:0 0 calc(28% - 12px); }
.cond-card { flex:0 0 72%; scroll-snap-align:start; }
.cond-grid.n1 .cond-card { flex-basis:100%; }
.cond-art { aspect-ratio:1; border-radius:var(--r-m); }
.cond-txt { padding:14px 2px 0; }
.cond-txt b { font-size:var(--search-input-size); }
.cond-line { font-size:var(--search-small-size); }
.cond-more { display:none; }
}

/* ImageCard results use RowCard on compact screens, keeping every item visible. */
@media (max-width:860px) {
  .ai-conditions .cond-grid { display:grid; grid-template-columns:minmax(0,1fr); max-width:none; gap:0; overflow:visible; }
  .ai-conditions .cond-grid::after { display:none; }
  .ai-conditions .cond-card { flex-direction:row; align-items:flex-start; gap:16px; padding:18px 0; border-top:1px solid var(--line); }
  .ai-conditions .cond-art { flex:0 0 88px; width:88px; height:88px; aspect-ratio:auto; border-radius:var(--r-thumb); }
  .ai-conditions .cond-txt { padding:0; }
  .ai-conditions .cond-txt b { font-size:var(--ai-row-size); }
}