/* ===== Full-site search =================================================
   The results are drawn by Google's Programmable Search element, whose markup
   is tables, inline styles and 2011 blue. Everything below `.site-search__results`
   is therefore an override of a DOM we do not own: neutralise the table, then
   redraw each hit as the same card the rest of the site uses. Kept in one file
   so a Google markup change has one place to be repaired.
   ====================================================================== */

.site-search {
  margin: 0 auto;
  max-width: 860px;
  padding: 0 18px 40px;
}

.site-search__head {
  padding: 32px 0 4px;
  text-align: center;
}

.site-search__title {
  color: #4e0d0d;
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0;
}

.site-search__lede {
  color: #8a7a6a;
  font-size: 0.92rem;
  margin: 6px 0 0;
}

/* ----- The box is ours ------------------------------------------------- */

.site-search__form {
  align-items: center;
  background: #fff;
  border: 1px solid #c3b596;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(62, 47, 25, 0.1);
  display: flex;
  gap: 8px;
  margin: 22px auto 0;
  max-width: 620px;
  padding: 5px 5px 5px 18px;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.site-search__form:focus-within {
  border-color: #a58b4f;
  box-shadow: 0 8px 26px rgba(62, 47, 25, 0.18);
}

.site-search__icon {
  color: #a58b4f;
  flex: 0 0 auto;
}

.site-search__input {
  background: transparent;
  border: none;
  flex: 1 1 auto;
  font-size: 1em;
  min-width: 0;
  padding: 10px 0;
}

/* The ring belongs on the pill, not on a borderless input inside it. */
.site-search__input:focus,
.site-search__input:focus-visible {
  border: none;
  outline: none;
}

.site-search__submit {
  background: #4e0d0d;
  border: none;
  border-radius: 999px;
  color: #f5efdf;
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 1em;
  padding: 10px 24px;
  white-space: nowrap;
}

.site-search__submit:hover {
  background: #6b1414;
}

/* ----- Empty state ----------------------------------------------------- */

.site-search__empty {
  margin: 26px auto 0;
  max-width: 620px;
  text-align: center;
}

.site-search__empty-hint {
  color: #8a7a6a;
  font-size: 0.9rem;
  margin: 0 0 10px;
}

.site-search__examples {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.site-search__example {
  background: #fff;
  border: 1px solid #d9c7a0;
  border-radius: 999px;
  color: #4e0d0d;
  font-size: 0.9rem;
  padding: 5px 14px;
  text-decoration: none;
  transition:
    background 160ms ease,
    border-color 160ms ease;
}

.site-search__example:hover {
  background: #f6efdd;
  border-color: #b99c60;
  color: #4e0d0d;
  text-decoration: none;
}

.site-search__note {
  color: #8a7a6a;
  font-size: 0.82rem;
  line-height: 1.6;
  margin: 22px 0 0;
  text-align: left;
}

.site-search__note i {
  color: #a58b4f;
  margin-right: 4px;
}

/* ===== 智能搜索: the site's own passages =================================
   A card of its own above Google's results, never inside them: the
   Programmable Search terms forbid mixing the two. Same paper and ink as the
   rest of the page; the shelves are plain lists, a passage a quiet row.
   ====================================================================== */

.smart-card {
  background: #fffdf8;
  border: 1px solid #d9c7a0;
  border-radius: 10px;
  margin: 26px auto 0;
  padding: 16px 18px 18px;
}

.smart-card__head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.smart-card__title {
  color: #4e0d0d;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin: 0;
}

.smart-card__sub,
.smart-card__hint,
.smart-card__door {
  color: #8a7a6a;
  font-size: 0.85rem;
  margin: 0;
}

.smart-card__ask {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 12px;
}

.smart-card__button {
  background: #fff;
  border: 1px solid #b99c60;
  border-radius: 999px;
  color: #4e0d0d;
  cursor: pointer;
  font-size: 0.95rem;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: 7px 16px;
  text-align: left;
}

.smart-card__button:hover:not(:disabled) {
  background: #f6efdd;
}

.smart-card__button:focus-visible,
.smart-card__more:focus-visible,
.smart-card__source:focus-visible {
  outline: 2px solid #a58b4f;
  outline-offset: 2px;
}

.smart-card__button:disabled {
  cursor: default;
  opacity: 0.6;
}

.smart-card__door {
  margin-top: 10px;
}

.smart-card__status {
  color: #6f5f4d;
  font-size: 0.88rem;
  margin: 10px 0 0;
}

.smart-card__status:empty {
  display: none;
}

.smart-card__status--working::before {
  animation: smart-card-pulse 1.4s ease-in-out infinite;
  background: #a58b4f;
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 7px;
  margin-right: 8px;
  vertical-align: middle;
  width: 7px;
}

@keyframes smart-card-pulse {
  50% {
    opacity: 0.25;
  }
}

@media (prefers-reduced-motion: reduce) {
  .smart-card__status--working::before {
    animation: none;
  }
}

.smart-card__status--failed {
  color: #a53a2a;
}

.smart-card__shelves {
  display: grid;
  gap: 14px;
  margin-top: 6px;
}

.smart-card__shelves:empty {
  display: none;
}

.smart-card__shelf-name {
  border-bottom: 1px solid #eadfc6;
  color: #4e0d0d;
  display: flex;
  font-size: 0.95rem;
  font-weight: 600;
  gap: 8px;
  margin: 8px 0 0;
  padding-bottom: 4px;
}

.smart-card__count {
  color: #8a7a6a;
  font-size: 0.8rem;
  font-weight: 400;
}

.smart-card__rows {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.smart-card__source {
  color: #4e0d0d;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.smart-card__book {
  color: #6f5f4d;
}

.smart-card__heading {
  color: #8a7a6a;
  font-size: 0.8rem;
  margin-left: 8px;
}

.smart-card__text {
  color: #3b3128;
  font-size: 0.9rem;
  line-height: 1.7;
  margin: 3px 0 0;
}

.smart-card__none {
  color: #8a7a6a;
  font-size: 0.85rem;
  margin: 6px 0 0;
}

.smart-card__more {
  background: none;
  border: none;
  color: #8a6a2f;
  cursor: pointer;
  font-size: 0.85rem;
  margin-top: 6px;
  padding: 0;
}

/* ===== Google's element, restyled ======================================
   Every selector below is prefixed `.site-search .site-search__results` rather
   than the class alone. Google's stylesheet is appended to <head> at runtime, so
   it is later in the cascade than ours and takes every specificity tie; the extra
   ancestor class is what makes these rules win without `!important` on each one.
   ====================================================================== */

.site-search .site-search__results {
  margin-top: 26px;
}

/* The element ships a fixed-width table; let it be a block that fills the column. */
.site-search .site-search__results .gsc-control-cse {
  background: transparent;
  border: none;
  font-family: inherit;
  padding: 0;
}

.site-search .site-search__results .gsc-control-cse *,
.site-search .site-search__results .gsc-control-cse *::before,
.site-search .site-search__results .gsc-control-cse *::after {
  box-sizing: border-box;
}

/* Google hard-codes 700px on this chain, which leaves the results narrower than
   the search box above them and visibly off-centre in the column. */
.site-search .site-search__results .gsc-control-wrapper-cse,
.site-search .site-search__results .gsc-results-wrapper-nooverlay,
.site-search .site-search__results .gsc-wrapper,
.site-search .site-search__results .gsc-resultsbox-visible,
.site-search .site-search__results .gsc-resultsRoot,
.site-search .site-search__results .gsc-results,
.site-search .site-search__results .gsc-expansionArea,
.site-search .site-search__results .gsc-above-wrapper-area,
.site-search .site-search__results .gsc-webResult.gsc-result {
  /* `max-width` and not only `width`: the 700px cap lives on .gsc-wrapper as a
       max-width, so a width of 100% resolves to 700px and nothing appears to change. */
  max-width: none;
  width: 100%;
}

/* Only the two tables that hold layout: the bar above the results and the result
   rows themselves. It used to be every table in the widget, which also flattened the
   sort menu - that control is nested inline-blocks with an 18px SVG arrow positioned
   against them, and as stacked blocks it renders as an empty box with an arrow in it. */
.site-search .site-search__results .gsc-above-wrapper-area-container,
.site-search .site-search__results .gsc-above-wrapper-area-container > tbody,
.site-search .site-search__results .gsc-above-wrapper-area-container > tbody > tr > td,
.site-search .site-search__results .gsc-table-result,
.site-search .site-search__results .gsc-table-result > tbody,
.site-search .site-search__results .gsc-table-result > tbody > tr,
.site-search .site-search__results .gsc-table-result > tbody > tr > td {
  border: none;
  display: block;
  padding: 0;
  width: auto;
}

/* Google hides its own search box in the results-only element, but the wrappers
   it leaves behind still reserve height. */
.site-search .site-search__results .gsc-search-box,
.site-search .site-search__results .gsc-input-box,
.site-search .site-search__results .gsc-search-button,
.site-search .site-search__results .gsc-branding,
.site-search .site-search__results .gcsc-more-maybe-branding-root,
.site-search .site-search__results .gsc-adBlock,
.site-search .site-search__results .gsc-refinementsArea {
  display: none !important;
}

/* ----- Result count + sort bar -----------------------------------------
   Deliberately light-handed. This is Google's most fragile widget - a custom
   dropdown of nested inline-blocks - and every geometric override tried here broke
   it in a different way. Colours and the row direction only.
   -------------------------------------------------------------------- */

.site-search .site-search__results .gsc-above-wrapper-area {
  border-bottom: 1px solid #e2d7bd;
  margin-bottom: 14px;
  padding: 0 2px 10px;
}

.site-search .site-search__results .gsc-result-info {
  color: #8a7a6a;
  font-size: 0.85rem;
  padding: 0;
}

/* The bar is one <tr> with two cells: the result count and the sort menu. Turning
   every table part into a block stacks them, so this row stays a flex line - and it
   is deliberately not in the reset above, because the `> tbody > tr` selector there
   is more specific than a bare `tr` and would win. */
.site-search .site-search__results .gsc-above-wrapper-area-container > tbody > tr {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

/* Both cells are 100%-wide blocks by default, which pushes the sort off the line. */
.site-search .site-search__results .gsc-result-info-container,
.site-search .site-search__results .gsc-orderby-container {
  flex: 0 1 auto;
  min-width: 0;
  width: auto;
}

/* Google's own 24px right padding hangs the menu off the edge of the column. */
.site-search .site-search__results .gsc-orderby-container {
  padding-right: 0;
}

.site-search .site-search__results .gsc-orderby-container,
.site-search .site-search__results .gsc-orderby {
  align-items: center;
  display: flex;
  gap: 6px;
}

.site-search .site-search__results .gsc-orderby-label,
.site-search .site-search__results .gsc-selected-option-container {
  color: #8a7a6a;
  font-size: 0.85rem;
}

/* Google renders this container holding nothing but an 18px arrow - there is no
   element for the option currently in force, in any language, so the control reads
   as a stray glyph and the current sort is only visible once the menu is open. The
   script on the page copies the checked option's text into `data-selected`; this
   draws it, and gives the arrow a box so it reads as a menu. */
.site-search .site-search__results .gsc-selected-option-container {
  align-items: center;
  background: #fff;
  border: 1px solid #d9c7a0;
  border-radius: 6px;
  display: inline-flex;
  gap: 2px;
  padding: 3px 4px 3px 10px;
}

.site-search .site-search__results .gsc-selected-option-container::before {
  color: #4e0d0d;
  content: attr(data-selected);
  font-size: 0.85rem;
  white-space: nowrap;
}

.site-search .site-search__results .gsc-option {
  color: #4e0d0d;
}

.site-search .site-search__results .gsc-option-menu {
  background: #fff;
  border: 1px solid #d9c7a0;
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(62, 47, 25, 0.18);
}

.site-search .site-search__results .gsc-option-menu-item-highlighted {
  background: #f6efdd;
}

/* ----- One hit, one card ----------------------------------------------- */

.site-search .site-search__results .gsc-webResult.gsc-result {
  background: #fff;
  border: 1px solid #d9c7a0;
  border-left: 4px solid #a53a2a;
  border-radius: 6px;
  margin: 0 0 12px;
  padding: 14px 16px;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.site-search .site-search__results .gsc-webResult.gsc-result:hover {
  border-color: #b99c60;
  border-left-color: #a53a2a;
  box-shadow: 0 8px 20px rgba(62, 47, 25, 0.15);
  transform: translateY(-2px);
}

.site-search .site-search__results .gsc-webResult .gsc-webResult {
  padding: 0;
}

.site-search .site-search__results .gs-result .gs-title,
.site-search .site-search__results .gs-result .gs-title * {
  font-size: 1.05rem;
  font-weight: 600;
  height: auto;
  line-height: 1.45;
  text-decoration: none;
}

/* :link and :visited spelled out, and the inner <b> with them: Google colours the
   anchor through both pseudo-classes, so anything less specific loses. */
.site-search .site-search__results a.gs-title:link,
.site-search .site-search__results a.gs-title:visited,
.site-search .site-search__results a.gs-title:link b,
.site-search .site-search__results a.gs-title:visited b {
  color: #4e0d0d;
}

.site-search .site-search__results a.gs-title:hover,
.site-search .site-search__results a.gs-title:hover b {
  color: #a53a2a;
  text-decoration: underline;
}

.site-search .site-search__results a.gs-title:focus-visible {
  outline: 3px solid #14756d;
  outline-offset: 2px;
}

/* Google marks the matched words with <b>; keep the emphasis, drop the shout. */
.site-search .site-search__results .gs-result .gs-title b,
.site-search .site-search__results .gs-snippet b {
  color: inherit;
  font-weight: 700;
}

.site-search .site-search__results .gs-webResult div.gs-visibleUrl {
  color: #7d8f5a;
  font-size: 0.78rem;
  margin-top: 2px;
  word-break: break-all;
}

.site-search .site-search__results .gs-snippet {
  color: #29251f;
  font-size: 0.9rem;
  line-height: 1.65;
  margin-top: 6px;
}

/* The thumbnail column is a table cell in Google's markup, so the block reset
   above stacks it on top of the text. Float it back beside the snippet. */
.site-search .site-search__results .gsc-table-cell-thumbnail {
  display: none;
}

.site-search .site-search__results .gsc-thumbnail-inside,
.site-search .site-search__results .gsc-url-top {
  padding: 0;
}

/* ----- Nothing found --------------------------------------------------- */

.site-search .site-search__results .gs-no-results-result .gs-snippet,
.site-search .site-search__results .gs-error-result .gs-snippet {
  background: #fff;
  border: 1px dashed #d9c7a0;
  border-radius: 6px;
  color: #8a7a6a;
  margin: 0;
  padding: 22px 16px;
  text-align: center;
}

/* ----- Pager ----------------------------------------------------------- */

.site-search .site-search__results .gsc-cursor-box {
  border-top: 1px solid #e2d7bd;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 18px 0 0;
  padding-top: 16px;
}

.site-search .site-search__results .gsc-cursor-page {
  background: #fff;
  border: 1px solid #d9c7a0;
  border-radius: 6px;
  color: #4e0d0d;
  display: inline-block;
  min-width: 36px;
  padding: 6px 10px;
  text-align: center;
  text-decoration: none;
}

.site-search .site-search__results .gsc-cursor-page:hover {
  background: #f6efdd;
  border-color: #b99c60;
  text-decoration: none;
}

.site-search .site-search__results .gsc-cursor-current-page {
  background: #4e0d0d;
  border-color: #4e0d0d;
  color: #f5efdf;
}

@media screen and (max-width: 640px) {
  .site-search {
    padding: 0 12px 32px;
  }

  .site-search__form {
    padding-left: 14px;
  }

  .site-search__submit {
    padding: 10px 16px;
  }

  .site-search__title {
    font-size: 1.4rem;
  }
}

/* ── 智能搜索 v2 (2026-11-07): options row, one-line invite, the card's rows ──
   Off by default; the card keeps a fixed height while it waits so Google's
   results under it do not jump. Small text is #6f5f4d, not #8a7a6a: the lighter
   one is about 4:1 on #fffdf8, short of 4.5. */
.site-search {
  --ss-ink: #3b3128;
  --ss-maroon: #4e0d0d;
  --ss-muted: #6f5f4d;
  --ss-line: #d9c7a0;
  --ss-line-soft: #eadfc6;
  --ss-gold: #a58b4f;
  --ss-paper: #fffdf8;
  --ss-row-h: 104px;
}

.ss-opts {
  color: var(--ss-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.88rem;
  gap: 6px 20px;
  justify-content: center;
  margin: 12px auto 0;
  max-width: 620px;
}

.ss-opt {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  gap: 8px;
  min-height: 44px;
}

.ss-opt input {
  accent-color: var(--ss-maroon);
  cursor: pointer;
  height: 18px;
  width: 18px;
}

.ss-opt input:focus-visible {
  outline: 2px solid var(--ss-gold);
  outline-offset: 2px;
}

.ss-opt__name {
  color: var(--ss-maroon);
  font-weight: 600;
}

.smart-invite {
  align-items: center;
  background: var(--ss-paper);
  border: 1px dashed var(--ss-line);
  border-radius: 10px;
  display: flex;
  gap: 8px 14px;
  margin: 22px auto 0;
  padding: 10px 48px 10px 16px;
  position: relative;
}

.smart-invite__icon {
  color: var(--ss-gold);
  flex: 0 0 auto;
}

.smart-invite__text {
  color: var(--ss-ink);
  flex: 1 1 240px;
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
}

.smart-invite__text b {
  color: var(--ss-maroon);
}

.smart-invite__close {
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--ss-muted);
  cursor: pointer;
  height: 40px;
  position: absolute;
  right: 4px;
  top: 4px;
  width: 40px;
}

.smart-invite__close:hover {
  background: #f3ecdc;
}

.smart-invite button:focus-visible,
.smart-card__off:focus-visible,
.smart-card__jump:focus-visible,
.ss-chip:focus-visible,
.ss-more:focus-visible,
.ss-row__src:focus-visible {
  outline: 2px solid var(--ss-gold);
  outline-offset: 2px;
}

.smart-card__badge {
  background: #f6efdd;
  border-radius: 999px;
  color: #8a6a2f;
  font-size: 0.75rem;
  padding: 2px 8px;
}

.smart-card__off {
  background: none;
  border: none;
  color: var(--ss-muted);
  cursor: pointer;
  font-size: 0.82rem;
  margin-left: auto;
  min-height: 36px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.smart-card__jump {
  background: none;
  border: none;
  color: var(--ss-muted);
  cursor: pointer;
  font-size: 0.82rem;
  margin-left: auto;
  min-height: 36px;
}

.smart-card__jump + .smart-card__off {
  margin-left: 0;
}

/* Put away when Google did not open (view_htmls_by_search.html): the close button
   takes the right-hand place back. */
.smart-card__jump[hidden] + .smart-card__off {
  margin-left: auto;
}

.smart-card__note {
  color: var(--ss-muted);
  font-size: 0.8rem;
  margin: 10px 0 0;
}

.ss-chips {
  display: flex;
  gap: 6px;
  margin: 12px 0 0;
  min-height: 38px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.ss-chip {
  background: #fff;
  border: 1px solid var(--ss-line);
  border-radius: 999px;
  color: var(--ss-maroon);
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 0.85rem;
  min-height: 36px;
  padding: 4px 12px;
  white-space: nowrap;
}

.ss-chip[aria-pressed="true"] {
  background: var(--ss-maroon);
  border-color: var(--ss-maroon);
  color: #f5efdf;
}

.ss-chip--skel {
  background: #f1e9d8;
  border-color: transparent;
  width: 84px;
}

.ss-chip__n {
  font-size: 0.78rem;
  margin-left: 4px;
  opacity: 0.75;
}

.ss-preview {
  align-content: start;
  display: grid;
  gap: 10px;
  /* Without this a grid row is as wide as its longest unbroken line (a title
     set to nowrap), and the page scrolls sideways on a phone. */
  grid-template-columns: minmax(0, 1fr);
  list-style: none;
  margin: 10px 0 0;
  min-height: calc(var(--ss-row-h) * 3 + 20px);
  padding: 0;
}

.ss-preview--zone {
  min-height: 0;
}

.ss-row {
  min-width: 0;
  border-bottom: 1px solid var(--ss-line-soft);
  padding-bottom: 8px;
}

.ss-row__top {
  align-items: baseline;
  display: flex;
  gap: 8px;
  min-width: 0;
}

.ss-row__n {
  color: var(--ss-muted);
  flex: 0 0 auto;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.ss-row__shelf {
  border: 1px solid var(--ss-line-soft);
  border-radius: 4px;
  color: var(--ss-muted);
  flex: 0 0 auto;
  font-size: 0.72rem;
  padding: 0 5px;
}

.ss-row__src {
  color: var(--ss-maroon);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ss-row__src:hover {
  text-decoration: underline;
}

.ss-row__where {
  color: var(--ss-muted);
  font-size: 0.8rem;
  margin: 2px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ss-row__text {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--ss-ink);
  display: -webkit-box;
  font-size: 0.92rem;
  line-height: 1.7;
  margin: 4px 0 0;
  overflow: hidden;
}

.ss-row--expanded .ss-row__text {
  -webkit-line-clamp: 4;
}

.ss-row__text mark {
  background: #f6e8c4;
  color: inherit;
  padding: 0 1px;
}

.ss-row__also {
  color: var(--ss-muted);
  font-size: 0.8rem;
  margin: 4px 0 0;
}

.ss-row__also a {
  color: #8a6a2f;
}

.ss-zone {
  background: #fbf6ea;
  border-left: 3px solid var(--ss-gold);
  border-radius: 6px;
  margin: 12px 0 0;
  padding: 8px 12px;
}

.ss-zone__title {
  color: #8a6a2f;
  font-size: 0.8rem;
  font-weight: 600;
  margin: 0;
}

.ss-zone .ss-row:last-child,
.ss-zone .ss-row--last {
  border-bottom: none;
}

.ss-skel {
  height: var(--ss-row-h);
}

.ss-skel span {
  animation: ss-shimmer 1.4s linear infinite;
  background: linear-gradient(90deg, #f1e9d8 0%, #f8f2e6 50%, #f1e9d8 100%);
  background-size: 200% 100%;
  border-radius: 4px;
  display: block;
  height: 14px;
  margin-top: 8px;
}

.ss-skel span:first-child {
  margin-top: 4px;
  width: 42%;
}

.ss-skel span:nth-child(2) {
  width: 96%;
}

.ss-skel span:nth-child(3) {
  width: 78%;
}

@keyframes ss-shimmer {
  to {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-skel span {
    animation: none;
  }
}

.ss-foot {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 10px;
}

.ss-more {
  background: none;
  border: 1px solid var(--ss-line);
  border-radius: 999px;
  color: #8a6a2f;
  cursor: pointer;
  font-size: 0.88rem;
  min-height: 40px;
  padding: 4px 14px;
}

.ss-msg {
  color: var(--ss-ink);
  font-size: 0.9rem;
  line-height: 1.7;
  margin: 10px 0 0;
}

.ss-msg button {
  background: none;
  border: 1px solid var(--ss-line);
  border-radius: 999px;
  color: #8a6a2f;
  cursor: pointer;
  font-size: 0.85rem;
  margin-left: 6px;
  min-height: 36px;
  padding: 2px 12px;
}

.ss-web-head {
  border-top: 1px solid #e2d7bd;
  color: var(--ss-muted);
  font-size: 0.85rem;
  font-weight: normal;
  margin: 28px 0 0;
  padding-top: 12px;
}

.ss-web-elsewhere {
  color: var(--ss-muted);
  font-size: 0.92rem;
  margin: 10px 0 0;
}

.ss-web-elsewhere a {
  color: var(--ss-maroon);
}

.ss-web-head b {
  color: var(--ss-maroon);
  font-size: 0.95rem;
  margin-right: 8px;
}

@media screen and (max-width: 640px) {
  .ss-opts {
    justify-content: flex-start;
    padding: 0 4px;
  }

  .smart-invite {
    flex-wrap: wrap;
    padding: 10px 44px 12px 12px;
  }

  .smart-invite__icon {
    display: none;
  }

  .ss-row__shelf {
    display: none;
  }
}

/* The second pass, beside the count under the title (smart-search.js stage). */
.ss-stage {
  border-radius: 999px;
  display: inline-block;
  font-size: 0.84rem;
  margin-left: 10px;
  padding: 1px 10px;
}

.ss-stage--working {
  background: #f6ecd2;
  color: #6b5320;
}

.ss-stage--working::before {
  animation: smart-card-pulse 1.4s ease-in-out infinite;
  background: #a58b4f;
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 7px;
  margin-right: 6px;
  vertical-align: 1px;
  width: 7px;
}

.ss-stage--done {
  background: #e8f1e4;
  color: #3d6b35;
}

.ss-stage--offer {
  background: #f6ecd2;
  color: #6b5320;
}

.ss-stage__go {
  background: none;
  border: 0;
  color: #8a5a00;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  margin-left: 6px;
  padding: 0;
  text-decoration: underline;
}

.ss-stage__go:focus-visible {
  outline: 2px solid var(--ss-gold);
  outline-offset: 2px;
}

/* A thin bar along the card's top edge while the order may still change. */
.smart-card--refining {
  position: relative;
}

.smart-card--refining::before {
  animation: ss-refining 1.6s linear infinite;
  background: linear-gradient(90deg, transparent, #c9a95c, transparent);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  border-radius: 10px 10px 0 0;
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

@keyframes ss-refining {
  from {
    background-position: -50% 0;
  }
  to {
    background-position: 150% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-stage--working::before,
  .smart-card--refining::before {
    animation: none;
  }

  .smart-card--refining::before {
    background: #c9a95c;
    opacity: 0.5;
  }
}

.ss-row__text--more {
  border-left: 2px solid var(--ss-line-soft);
  padding-left: 8px;
}

.ss-row__jump {
  color: #8a6a2f;
  font-size: 0.8rem;
}

/* ----- AI 综合: asked for, never by default ---------------------------- */

.ss-summary {
  background: #fdfaf3;
  border: 1px dashed var(--ss-line);
  border-radius: 6px;
  margin: 12px 0 0;
  padding: 10px 12px;
}

.ss-summary--offer {
  align-items: center;
  background: none;
  border: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 0;
}

.ss-summary__go {
  background: none;
  border: 1px solid var(--ss-line);
  border-radius: 999px;
  color: #8a6a2f;
  cursor: pointer;
  font-size: 0.88rem;
  min-height: 40px;
  padding: 4px 14px;
}

.ss-summary__hint,
.ss-summary__label {
  color: var(--ss-muted);
  font-size: 0.8rem;
}

.ss-summary__head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.ss-summary__badge {
  color: #8a6a2f;
  font-size: 0.8rem;
  font-weight: 600;
}

.ss-summary__text,
.ss-summary__msg {
  color: var(--ss-ink);
  font-size: 0.92rem;
  line-height: 1.8;
  margin: 6px 0 0;
}

.ss-summary--working .ss-summary__msg {
  color: var(--ss-muted);
}

.ss-summary__again {
  background: none;
  border: 1px solid var(--ss-line);
  border-radius: 999px;
  color: #8a6a2f;
  cursor: pointer;
  font-size: 0.85rem;
  min-height: 32px;
  padding: 2px 12px;
}

.ss-cite {
  background: #f6efdd;
  border: none;
  border-radius: 4px;
  color: #8a6a2f;
  cursor: pointer;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  margin: 0 1px;
  min-width: 22px;
  padding: 0 4px;
  vertical-align: 0.15em;
}

.ss-cite:hover {
  background: #eedfb8;
}

.ss-cite:focus-visible,
.ss-summary__go:focus-visible,
.ss-summary__again:focus-visible {
  outline: 2px solid var(--ss-gold);
  outline-offset: 2px;
}

.ss-row--flash {
  animation: ss-flash 1.6s ease-out;
}

@keyframes ss-flash {
  from {
    background: #f6e8c4;
  }
  to {
    background: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-row--flash {
    animation: none;
    outline: 2px solid var(--ss-gold);
  }
}

/* Flex boxes drawn or hidden by smart-search.js: `hidden` must win over `display`. */
.ss-opts[hidden],
.ss-opt[hidden],
.smart-invite[hidden],
.ss-summary[hidden],
.ss-zone[hidden] {
  display: none;
}

.ss-cites {
  white-space: nowrap;
}

/* ----- 直达: the 本典 or the part of the site a query names (2026-11-08) ---
   Above 智能搜索's card, drawn with the page. One quiet block per name: the
   name is the link, the line under it says what the 本典 holds, and up to three
   courses are a tap away. */

.site-direct {
  display: grid;
  gap: 10px;
  margin: 22px auto 0;
}

.site-direct + .smart-card {
  margin-top: 14px;
}

.sd-item {
  background: #fff;
  border: 1px solid var(--ss-line);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(62, 47, 25, 0.06);
  min-width: 0;
  padding: 12px 16px 14px;
}

.sd-head {
  align-items: baseline;
  color: inherit;
  display: flex;
  gap: 4px 10px;
  min-height: 36px;
  min-width: 0;
  text-decoration: none;
}

.sd-head:hover .sd-title,
.sd-head:hover .sd-go {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sd-head:focus-visible,
.sd-meta__link:focus-visible,
.sd-pick:focus-visible {
  outline: 2px solid var(--ss-gold);
  outline-offset: 2px;
}

.sd-kicker {
  background: #f6efdd;
  border-radius: 999px;
  color: #8a6a2f;
  flex: 0 0 auto;
  font-size: 0.75rem;
  padding: 2px 8px;
}

.sd-title {
  color: var(--ss-maroon);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-go {
  color: #8a6a2f;
  flex: 0 0 auto;
  font-size: 0.85rem;
  margin-left: auto;
  white-space: nowrap;
}

.sd-meta {
  color: var(--ss-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.85rem;
  gap: 2px 0;
  margin: 4px 0 0;
}

/* The dot ends an item rather than starting the next, so a wrapped line
   never begins with one. */
.sd-meta__item {
  white-space: nowrap;
}

.sd-meta__item:not(:last-child)::after {
  color: var(--ss-line);
  content: "·";
  /* inline-block: a link's underline does not run under the dot. */
  display: inline-block;
  padding: 0 8px;
}

.sd-meta__link {
  color: #8a6a2f;
}

.sd-meta__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sd-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.sd-picks li {
  max-width: 100%;
  min-width: 0;
}

.sd-pick {
  align-items: baseline;
  background: var(--ss-paper);
  border: 1px solid var(--ss-line);
  border-radius: 999px;
  color: var(--ss-maroon);
  display: inline-flex;
  font-size: 0.88rem;
  gap: 6px;
  max-width: 100%;
  min-height: 38px;
  padding: 7px 14px;
  text-decoration: none;
  transition:
    background 150ms ease,
    border-color 150ms ease;
}

.sd-pick:hover {
  background: #f6efdd;
  border-color: var(--ss-gold);
}

.sd-pick__form {
  color: #8a6a2f;
  flex: 0 0 auto;
  font-size: 0.75rem;
}

.sd-pick__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-pick__who {
  color: var(--ss-muted);
  flex: 0 0 auto;
  font-size: 0.78rem;
}

.sd-head--link {
  flex-wrap: wrap;
}

.sd-note {
  color: var(--ss-muted);
  flex: 1 1 200px;
  font-size: 0.85rem;
}

.sd-head--link .sd-go {
  font-size: 1.1rem;
  margin-left: 0;
}

@media screen and (max-width: 640px) {
  .sd-item {
    padding: 10px 12px 12px;
  }

  /* The action (从第153课读, 本典页) drops under the title rather than shrinking. */
  .sd-head {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sd-pick {
    transition: none;
  }
}