/* Search shares the home page's paper, navigation and search controls.
   Only search-specific composition lives here; shared shore styles stay in splash.css. */
.sp-app {color-scheme:light;color:var(--ink);line-height:1.5}
.sp-app :is(a,button,input):focus-visible {outline:2px solid var(--sea);outline-offset:4px}
.sp-visually-hidden {position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;padding:0;margin:-1px;border:0}

.sp-main {position:relative;flex:1;display:block;width:100%;padding:clamp(30px,6vh,68px) var(--shore-gutter) clamp(26px,5vh,54px)}
.sp-content {width:100%;max-width:1440px;min-width:0;margin:0 auto;padding:0}
/* Plain AYYY paper: search does not use an illustrated or textured background. */
.shore-search::before {display:none}
.sp-intro h1 {margin:0;font:400 clamp(31px,2.8vw,42px)/1.2 Georgia,"Times New Roman",serif;letter-spacing:-.6px;color:var(--ink)}
.sp-lead {margin:5px 0 0;color:#687b79;font-size:13px;line-height:1.6}
.sp-workspace {margin-top:14px}
.sp-search-box input {color:var(--ink)}
.sp-search-submit {flex-shrink:0;white-space:nowrap}

.sp-modes {display:flex;flex-wrap:wrap;align-items:center;gap:5px 24px;margin-top:10px}
.sp-mode {position:relative;display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:5px 0 9px;background:transparent;color:#73817b;font-size:12px;white-space:nowrap}
.sp-mode svg {width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.sp-mode.is-active {color:var(--ink)}
.sp-mode.is-active::after {content:"";position:absolute;bottom:1px;left:0;right:0;height:3px;background:#e7aa66;border-radius:60% 30% 40% 50%;transform:rotate(-1deg)}
.sp-mode:hover {color:var(--sea)}
/* Provider tabs share the visual language of the search-type selector. */
.sp-providers {display:flex;flex-wrap:wrap;align-items:center;gap:3px 23px;min-width:0;border:0;padding:0;margin:5px 0 0}
.sp-provider-caption {font-size:10px;color:#94a19b;white-space:nowrap;margin-right:3px}
.sp-provider {position:relative;display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:5px 0 10px;border:0;border-radius:0;background:transparent;color:#73817b;font-size:12px;white-space:nowrap;text-align:left}
.sp-provider::after {content:"";position:absolute;left:0;right:0;bottom:1px;height:3px;border-radius:60% 30% 40% 50%;background:#e7aa66;transform:rotate(-1deg);opacity:0}
.sp-provider:hover:not(:disabled) {color:var(--sea)}
.sp-provider.is-active {color:var(--ink)}
.sp-provider.is-active::after {opacity:1}
.sp-provider:disabled {opacity:.42;cursor:not-allowed}
.sp-provider-icon {position:relative;flex:0 0 19px;display:grid;place-items:center;width:19px;height:19px;color:#49838d;font:700 15px "Trebuchet MS",sans-serif}
.sp-provider-icon.yandex {color:#c9692b}
.sp-provider-icon.duck {color:#6a9282}
.sp-provider-icon.bing {color:#5d8596}
.sp-provider-check {display:none}
.sp-hint {display:flex;align-items:flex-start;gap:7px;min-height:20px;margin:13px 0 0;color:#6c7c78;font-size:11px;line-height:1.6}
.sp-hint>svg {flex-shrink:0;margin-top:2px;color:#8a9c95}

.sp-content-grid {display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(22px,3vw,48px);margin-top:26px}
.sp-info-panel {padding-top:14px;min-width:0}
.sp-panel-heading {display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:32px;margin-bottom:9px}
.sp-panel-heading h2 {margin:0;font-size:15px;font-weight:600;letter-spacing:-.15px;color:var(--ink)}
.sp-icon-button {display:grid;place-items:center;width:32px;height:32px;flex:0 0 32px;padding:0;color:#7b8c85;background:transparent;border:1px solid transparent;border-radius:50%}
.sp-icon-button:hover:not(:disabled) {color:var(--sea);background:#f2f4ed;border-color:#dce1d7}
.sp-icon-button:disabled {opacity:.4;cursor:default}
.sp-history-list {display:flex;flex-direction:column;max-height:210px;overflow:auto;scrollbar-width:thin;scrollbar-color:#bbc8be transparent}
.sp-history-item {display:flex;align-items:center;gap:9px;width:100%;min-height:35px;padding:8px 2px;border-bottom:1px solid #e8e9e0;background:transparent;text-align:left;color:#4f6968;font-size:12px}
.sp-history-item:hover {background:#f5f6ee;color:var(--sea)}
.sp-history-item svg {flex-shrink:0;width:15px;height:15px;stroke-width:1.4}
.sp-history-item>span {flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-history-item>svg:last-child {color:#9baba2}
.sp-history-empty {padding:5px 0 12px;font-size:12px;line-height:1.7;color:#7a8881}
.sp-panel-footer {display:flex;justify-content:space-between;gap:10px;margin-top:14px;font-size:10px;color:#8b968b}
.sp-alternatives>p {max-width:330px;margin:0;color:#687b79;font-size:12px;line-height:1.75}
.sp-panel-actions {display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;margin-top:18px}
.sp-action {display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:37px;padding:7px 0;font-size:12px;color:var(--sea);white-space:nowrap}
.sp-action:hover {color:var(--ink)}
.sp-action-ai {padding:8px 12px;border:1px solid #e5c694;border-radius:6px 8px 6px 7px;background:#fcf2df;color:#855e32}
.sp-action-ai>svg {color:#ce8b41}
.sp-action-ai:hover {background:#f9e9cd;border-color:#cda56c}
.sp-command-tip {display:flex;align-items:center;gap:6px;margin:17px 0 0;color:#8b968b;font-size:10px}
.sp-command-tip>span {margin:0 7px}
.sp-command-tip kbd {font:inherit;border:1px solid #e0e2d9;border-radius:3px;padding:0 4px;color:#7c8987}


@media (max-width:1190px) {
  .sp-main {padding-top:clamp(23px,4vh,46px)}
  .sp-modes {gap:4px 17px}
  .sp-providers {gap:3px 18px}
  .sp-content-grid {gap:24px}
}
@media (max-width:900px) and (min-width:721px) {
  .sp-main {padding-inline:26px}
  .sp-providers {gap:3px 15px}
  .sp-provider {font-size:11px;gap:5px}
  .sp-provider-icon {font-size:13px;width:17px;flex-basis:17px}
  .sp-modes {gap:4px 14px}
  .sp-content-grid {grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
}
@media (max-width:720px) {
  .sp-main {padding:22px var(--shore-gutter) 25px}
  .sp-content {max-width:none}
  .sp-intro h1 {font-size:30px}
  .sp-lead {font-size:12px;margin-top:6px}
  .sp-workspace {margin-top:17px}
  .sp-search-box input {font-size:16px}
  .sp-modes {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 12px;margin-top:12px}
  .sp-mode {justify-content:center;min-height:36px;font-size:12px;gap:6px}
  .sp-mode.is-active::after {left:12%;right:12%}
  .sp-providers {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 12px;margin-top:7px}
  .sp-provider-caption {grid-column:1/-1;margin:0;font-size:10px}
  .sp-provider {justify-self:start;min-height:34px;padding:4px 0 8px;font-size:12px;gap:7px}
  .sp-hint {font-size:11px;margin-top:9px}
  .sp-content-grid {grid-template-columns:1fr;gap:19px;margin-top:22px}
  .sp-history-item {min-height:41px;font-size:13px}
  .sp-panel-heading h2 {font-size:15px}
  .sp-alternatives>p {max-width:none}
  .sp-panel-actions {margin-top:13px}
  .sp-command-tip {display:none}
}
@media (max-width:370px) {
  .sp-main {padding-left:16px;padding-right:16px}
  .sp-provider {gap:5px;font-size:11px}
  .sp-provider-caption {font-size:9px}
  .sp-providers {gap:2px 8px}
  .sp-modes {gap:4px 5px}
  .sp-mode {font-size:11px}
}
@media (min-width:721px) and (max-height:720px) {
  .sp-main {padding-top:18px;padding-bottom:16px}
  .sp-workspace {margin-top:12px}
  .sp-content-grid {margin-top:18px}
  .sp-command-tip {margin-top:11px}
}