/* Sureno search suggestions (assets/search-suggest.js): the list under a search box,
   and the full-screen sheet on phones. Uses the calm tokens from site.css. */

.ss-panel{position:fixed;z-index:1200;top:0;left:0;box-sizing:border-box;padding:8px;overflow:auto;overscroll-behavior:contain;
  background:var(--surface,#fffdf9);color:var(--ink,#1e2a2f);border:1px solid var(--line,#e6e0d5);border-radius:22px;
  box-shadow:0 2px 6px rgba(30,42,47,.06),0 30px 60px -24px rgba(30,42,47,.35);font:400 16px/1.4 var(--font,system-ui,sans-serif);
  -webkit-overflow-scrolling:touch;animation:ss-in .14s ease-out}
.ss-panel[hidden]{display:none}
@keyframes ss-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ss-panel{animation:none}}
.ss-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.ss-g{padding:2px 0 6px}
.ss-g+.ss-g,.ss-fix+.ss-g{border-top:1px solid var(--line,#e6e0d5);padding-top:6px}
.ss-gh{display:flex;align-items:center;gap:8px;margin:8px 12px 4px;font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted,#5f7178)}
.ss-n{font-weight:600;letter-spacing:0;color:var(--muted,#5f7178);background:var(--bg-2,#eef3ef);border-radius:999px;padding:1px 8px;text-transform:none;font-size:12px}
.ss-clear{margin-left:auto;min-height:32px;padding:4px 12px;border:0;border-radius:999px;background:none;color:var(--accent,#2f7a74);font:600 14px/1 var(--font,system-ui);cursor:pointer;text-transform:none;letter-spacing:0}
.ss-clear:hover{background:var(--accent-soft,#dcebe7)}

.ss-opt{display:flex;align-items:center;gap:14px;min-height:56px;padding:8px 12px;border-radius:16px;color:inherit;text-decoration:none;cursor:pointer;outline:none}
.ss-opt[aria-selected="true"]{background:var(--accent-soft,#dcebe7)}
.ss-opt:focus-visible{box-shadow:0 0 0 3px var(--accent,#2f7a74)}
.ss-vis{flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;overflow:hidden;
  color:var(--ic,#2f7a74);background:var(--accent-soft,#dcebe7);background:color-mix(in srgb,var(--ic,#2f7a74) 15%,var(--surface,#fff))}
.ss-vis svg{width:23px;height:23px}
.ss-vis.has-img{background:var(--bg-2,#eef3ef)}
.ss-vis img{width:44px;height:44px;object-fit:cover;display:block}
.ss-vis-plain{background:none;color:var(--muted,#5f7178);width:32px;height:32px}
.ss-vis-plain svg{width:20px;height:20px}
.ss-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ss-t{display:block;font-weight:600;font-size:17px;line-height:1.3;color:var(--ink,#1e2a2f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-t mark{background:none;color:var(--accent-2,#25635e);font-weight:800}
.ss-t b{font-weight:700}
.ss-d{display:block;font-size:14.5px;line-height:1.35;color:var(--muted,#5f7178);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-k{flex:none;max-width:9em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;font-weight:700;color:var(--accent,#2f7a74);
  background:var(--accent-soft,#dcebe7);border-radius:999px;padding:3px 10px}
.ss-go{flex:none;display:grid;place-items:center;width:30px;height:30px;color:var(--accent,#2f7a74)}
.ss-go svg{width:20px;height:20px}

/* The quick answer: the number or date large, the question small above it. */
.ss-ans.is-main{padding:12px;min-height:72px}
.ss-ans.is-main .ss-vis{width:52px;height:52px;border-radius:16px}
.ss-ans.is-main .ss-vis svg{width:27px;height:27px}
.ss-pre{font-size:14px}
.ss-big{display:block;font-family:var(--display,Georgia,serif);font-size:25px;line-height:1.2;font-weight:600;color:var(--ink,#1e2a2f);
  white-space:normal;overflow-wrap:anywhere}
.ss-ans.is-scoped .ss-t{font-weight:600}

.ss-fix{padding:4px 6px 8px}
.ss-fix-b{display:block;width:100%;text-align:left;min-height:44px;padding:8px 12px;border:0;border-radius:14px;background:var(--warm-soft,#f7e3d4);
  color:var(--ink,#1e2a2f);font:400 16px/1.3 var(--font,system-ui);cursor:pointer}
.ss-fix-b b{color:var(--accent-2,#25635e)}
.ss-more{min-height:44px;padding:6px 12px 6px 70px;font-size:15px;font-weight:600;color:var(--accent,#2f7a74)}
.ss-more span:first-child{flex:1}
.ss-all{margin-top:4px;border-top:1px solid var(--line,#e6e0d5);border-radius:0 0 16px 16px}
.ss-all .ss-vis-plain{width:44px}
.ss-none{margin:10px 14px 6px;color:var(--muted,#5f7178);font-size:15.5px}

/* ---------- phones: the search opens as a full-screen sheet ---------- */
html.ss-sheet-on,html.ss-sheet-on body{overflow:hidden!important;overscroll-behavior:none}
form.ss-sheet-form{width:auto!important;max-width:none!important;flex:1 1 auto;margin-left:0!important;margin-right:76px!important;
  box-shadow:0 0 0 4px var(--accent-soft,#dcebe7)!important}
.ss-cancel{position:fixed;top:14px;right:4px;z-index:1202;min-height:44px;min-width:76px;padding:8px 8px;border:0;border-radius:999px;background:var(--bg,#f6f4ef);
  color:var(--accent,#2f7a74);font:600 17px/1 var(--font,system-ui);cursor:pointer;box-shadow:0 0 0 6px var(--bg,#f6f4ef)}
.ss-panel.ss-in-sheet{left:0!important;right:0;width:100%!important;border:0;border-top:1px solid var(--line,#e6e0d5);border-radius:0;box-shadow:0 -12px 24px -18px rgba(30,42,47,.25);
  background:var(--bg,#f6f4ef);padding:4px 6px 24px;animation:none}
.ss-panel.ss-in-sheet .ss-opt{min-height:60px}
.ss-panel.ss-in-sheet .ss-g+.ss-g{border-top-color:var(--line,#e6e0d5)}
@media (max-width:640px){
  .ss-k{display:none}
  .ss-t{font-size:17.5px}
  .ss-big{font-size:24px}
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ss-panel{box-shadow:0 2px 6px rgba(0,0,0,.4),0 30px 60px -24px rgba(0,0,0,.8)}
}
:root[data-theme="dark"] .ss-panel{box-shadow:0 2px 6px rgba(0,0,0,.4),0 30px 60px -24px rgba(0,0,0,.8)}