/* SEARCH·SURFACE (701) — full-screen search experience (D-386/D-403/D-406/D-423).
 * Deterministic, no AI in search (AI = the Chat tab, Caïa); acute red-flags caught
 * BEFORE search runs; a miss always lands on something useful (never a blank result).
 * SINGLE SOURCE for the .ssf-* prefix (card-dev mirror, check 16) — imported by BOTH
 * web/index.html (app view web/js/views/search.js) AND the WB card page
 * (workbench/search/surface.html). Prefix: ssf.
 */

.ssf { position: relative; min-height: 100%; background: var(--surface-ground); display: flex; flex-direction: column; padding: 0 var(--space-16) var(--space-24); }
.ssf * { box-sizing: border-box; }

/* top row — back folded into the pill (no wasted chevron column) */
/* match the resting HOME·SEARCH (103) pill exactly: same padding/height, so the field
   doesn't grow when the surface opens (the <input> would otherwise add its own chrome) */
.ssf-top { display: flex; align-items: center; gap: var(--space-12); background: var(--surface-card); border-radius: var(--radius-pill); box-shadow: var(--shadow-card); padding: var(--space-12) var(--space-16); margin: var(--space-12) 0 var(--space-16); }
.ssf-top:focus-within { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.ssf-back { flex: none; width: var(--size-20); height: var(--size-20); color: var(--text-secondary); font-size: var(--size-20); line-height: var(--size-20); text-align: center; background: 0; border: 0; cursor: pointer; padding: 0; }
.ssf-field { flex: 1; display: flex; align-items: center; gap: var(--space-12); min-width: 0; }
.ssf-input { flex: 1; min-width: 0; height: var(--size-20); min-height: var(--size-20); line-height: var(--size-20); margin: 0; padding: 0; border: 0; background: 0; font-family: var(--font-body); font-size: var(--size-15); color: var(--text-primary); -webkit-appearance: none; appearance: none; }
/* beat app.css's global input touch-target min-height (specificity 0,3,1) so the field
   matches the resting HOME·SEARCH pill height — the whole pill is the tap target */
.ssf-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) { min-height: var(--size-20); }
.ssf-input:focus { outline: 0; }
.ssf-input::-webkit-search-cancel-button, .ssf-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.ssf-input::placeholder { color: var(--text-tertiary); }
.ssf-mic { flex: none; width: var(--size-20); height: var(--size-20); color: var(--accent); background: 0; border: 0; cursor: pointer; padding: 0; }
.ssf-mic svg { width: 100%; height: 100%; display: block; }
.ssf-clear { flex: none; width: var(--size-20); height: var(--size-20); border-radius: var(--radius-round); background: var(--surface-sunken); color: var(--text-secondary); font: 700 12px/20px var(--font-body); text-align: center; border: 0; cursor: pointer; } /* token-exception */
.ssf-div { width: 1px; height: var(--size-18); background: var(--border-hairline); flex: none; } /* token-exception */

/* section labels + browse chips */
.ssf-sec { font-family: var(--font-label); font-size: var(--size-11); font-weight: var(--weight-700); letter-spacing: var(--tracking-05); text-transform: uppercase; color: var(--text-tertiary); margin: var(--space-16) var(--space-4) var(--space-8); }
.ssf-chips { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.ssf-chip { font-family: var(--font-label); font-size: var(--size-13); font-weight: var(--weight-600); color: var(--text-secondary); background: var(--surface-card); box-shadow: var(--shadow-card); border-radius: var(--radius-pill); padding: var(--space-8) var(--space-12); border: 0; cursor: pointer; }
.ssf-chip.ssf-recent::before { content: "\21BB  "; color: var(--text-tertiary); }
.ssf-chip.ssf-sugg { background: var(--teal-100); color: var(--accent); }
.ssf-chip:active { opacity: 0.7; }

/* type-ahead suggestion rows */
.ssf-sug { display: flex; align-items: center; gap: var(--space-12); width: 100%; padding: var(--space-12) var(--space-4); border: 0; border-bottom: 1px solid var(--border-hairline); background: 0; text-align: left; cursor: pointer; } /* token-exception */
.ssf-kx { flex: none; padding: var(--space-4) var(--space-8); border-radius: var(--radius-pill); font-family: var(--font-label); font-size: var(--size-10); font-weight: var(--weight-700); letter-spacing: var(--tracking-05); text-transform: uppercase; }
.ssf-t { flex: 1; min-width: 0; font-size: var(--size-15); color: var(--text-primary); }
.ssf-go { flex: none; color: var(--text-tertiary); font-size: var(--size-16); }
.ssf-k-read { background: var(--kind-read-fill); color: var(--kind-read-icon); }
.ssf-k-do { background: var(--kind-do-fill); color: var(--kind-do-icon); }
.ssf-k-watch { background: var(--kind-watch-fill); color: var(--kind-watch-icon); }
.ssf-k-track { background: var(--kind-track-fill); color: var(--kind-track-icon); }
.ssf-sug:active { background: var(--surface-card-hover); }

/* results */
.ssf-rhead { display: flex; align-items: baseline; justify-content: space-between; margin: var(--space-16) var(--space-4) var(--space-12); }
.ssf-rh { font-family: var(--font-display); font-weight: var(--weight-600); font-size: var(--size-17); color: var(--text-primary); }
.ssf-rn { font-family: var(--font-label); font-size: var(--size-12); color: var(--text-tertiary); }
.ssf-fchips { display: flex; gap: var(--space-8); margin-bottom: var(--space-12); overflow-x: auto; }
.ssf-fchip { font-family: var(--font-label); font-size: var(--size-12); font-weight: var(--weight-600); color: var(--text-secondary); background: var(--surface-card); border-radius: var(--radius-pill); padding: var(--space-4) var(--space-12); white-space: nowrap; border: 0; cursor: pointer; }
.ssf-fchip.ssf-on { background: var(--teal-700); color: var(--text-on-accent); }
.ssf-card { display: block; width: 100%; text-align: left; background: var(--surface-card); border: 0; border-radius: var(--radius-card-lg); box-shadow: var(--shadow-card); padding: var(--space-16); margin-bottom: var(--space-12); cursor: pointer; }
.ssf-card .ssf-kx { display: inline-block; margin-bottom: var(--space-8); }
.ssf-cq { font-family: var(--font-display); font-weight: var(--weight-600); font-size: var(--size-17); color: var(--text-primary); margin-bottom: var(--space-4); }
.ssf-cs { font-size: var(--size-14); color: var(--text-secondary); }
.ssf-cmeta { font-family: var(--font-label); font-size: var(--size-12); color: var(--text-tertiary); margin-top: var(--space-8); }

/* 🔴 THE GATE ON A PULLED RESULT — D-494/D-524.
 * She searched "swaddling"; her baby has started rolling. We show the answer (she asked) and we
 * show WHY IT NO LONGER APPLIES. This is not a footnote: for the parent who went looking, this
 * banner IS the answer, and the article behind it is the context.
 * Amber, not red — red is reserved for the acute net (.ssf-safe), and if everything is an
 * emergency then nothing is. */
.ssf-cgate { display: block; margin-top: var(--space-12); padding: var(--space-12); border-radius: var(--radius-12); background: var(--surface-warning); border-left: var(--dim-4) solid var(--warning); }
.ssf-cgate-h { display: block; font-family: var(--font-label); font-size: var(--size-13); font-weight: var(--weight-600); color: var(--text-primary); }
.ssf-cgate-b { display: block; font-size: var(--size-13); color: var(--text-secondary); margin-top: var(--space-4); }

.ssf-card:active { opacity: 0.9; }

/* voice overlay */
.ssf-voice { position: absolute; inset: 0; background: var(--surface-ground); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-16); padding: var(--space-24); }
.ssf-ring { width: 96px; height: 96px; border-radius: var(--radius-round); background: var(--teal-100); display: grid; place-items: center; box-shadow: 0 0 0 12px rgba(21,94,82,.08), 0 0 0 26px rgba(21,94,82,.04); } /* token-exception */
.ssf-ring svg { width: 40px; height: 40px; color: var(--accent); } /* token-exception */
.ssf-lbl { font-family: var(--font-label); font-size: var(--size-13); font-weight: var(--weight-700); letter-spacing: var(--tracking-05); text-transform: uppercase; color: var(--text-tertiary); }
.ssf-tr { font-family: var(--font-display); font-weight: var(--weight-500); font-size: var(--size-22); color: var(--text-primary); text-align: center; }
.ssf-tr .ssf-dim { color: var(--text-tertiary); }
.ssf-stop { font-family: var(--font-label); font-size: var(--size-13); font-weight: var(--weight-600); color: var(--text-secondary); background: 0; border: 0; cursor: pointer; }

/* acute safety panel */
.ssf-safe { background: var(--clay-100); border-radius: var(--radius-card-lg); padding: var(--space-20); margin-top: var(--space-8); }
.ssf-tag { display: inline-block; font-family: var(--font-label); font-size: var(--size-11); font-weight: var(--weight-700); letter-spacing: var(--tracking-05); text-transform: uppercase; color: var(--clay-700); }
.ssf-safe-h { font-family: var(--font-display); font-weight: var(--weight-600); font-size: var(--size-20); color: var(--text-primary); margin: var(--space-8) 0 var(--space-8); }
.ssf-safe-p { font-size: var(--size-15); color: var(--text-secondary); margin: 0 0 var(--space-16); }
.ssf-call { display: flex; align-items: center; justify-content: center; gap: var(--space-8); width: 100%; background: var(--clay-600); color: var(--text-on-accent); border: 0; border-radius: var(--radius-12); padding: var(--space-16); font-family: var(--font-body); font-size: var(--size-16); font-weight: var(--weight-700); cursor: pointer; }
.ssf-link { display: block; text-align: center; margin-top: var(--space-12); font-family: var(--font-label); font-size: var(--size-13); font-weight: var(--weight-600); color: var(--clay-700); background: 0; border: 0; cursor: pointer; }

/* miss → handover */
.ssf-miss { text-align: center; padding: var(--space-20) var(--space-8) var(--space-8); }
.ssf-miss-h { font-family: var(--font-display); font-weight: var(--weight-600); font-size: var(--size-18); line-height: var(--leading-115); color: var(--text-primary); margin-bottom: var(--space-8); }
.ssf-miss-s { font-size: var(--size-14); color: var(--text-secondary); }
.ssf-ask { display: flex; align-items: center; justify-content: center; gap: var(--space-8); width: 100%; background: var(--teal-700); color: var(--text-on-accent); border: 0; border-radius: var(--radius-12); padding: var(--space-16); font-family: var(--font-body); font-size: var(--size-15); font-weight: var(--weight-600); cursor: pointer; }
.ssf-caveat { text-align: center; font-size: var(--size-14); color: var(--text-secondary); margin-top: var(--space-16); line-height: var(--leading-140); }

.ssf-ask:active, .ssf-call:active, .ssf-back:active { opacity: 0.8; }
.ssf-back:focus-visible, .ssf-sug:focus-visible, .ssf-card:focus-visible, .ssf-chip:focus-visible, .ssf-ask:focus-visible, .ssf-call:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--radius-8); }