/* Animated search palette mockups that mirror the app's palette view:
   a Liquid Glass panel, a CDE Find dialog, and a Windows 95 Find window.
   Metrics follow CDESearchPaletteView: 26px title bar, 58/60px field row,
   26px section headers, 50px rows, 30px footer, 680px wide. */

.search-demo {
  margin: 0;
  min-width: 0;
}

.search-demo .sd-window {
  --sd-bg: #c0c0c0;
  --sd-text: #000000;
  --sd-subtext: rgba(0, 0, 0, 0.72);
  --sd-card: #d6d6d6;
  --sd-muted-card: #b3b3b3;
  --sd-control: #d6d6d6;
  --sd-selection: #a3c9f0;
  --sd-selection-text: #ffffff;
  --sd-header: #000080;
  --sd-header-text: #ffffff;
  --sd-icon: #000000;
  --sd-highlight: rgba(255, 255, 255, 0.96);
  --sd-shadow: rgba(128, 128, 128, 0.82);
  --sd-results-height: 430px;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  overflow: hidden;
  color: var(--sd-text);
  background: var(--sd-bg);
  font-size: 13px;
  line-height: 1.25;
  text-align: left;
}

.search-demo figcaption {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  max-width: 680px;
  margin: 12px auto 0;
  font-size: .78rem;
  color: var(--muted);
}

.search-demo figcaption strong { color: var(--text); }

.sd-titlebar,
.sd-field-row,
.sd-group,
.sd-row,
.sd-footer,
.sd-hint {
  display: flex;
  align-items: center;
  min-width: 0;
}

.sd-titlebar { flex: 0 0 26px; gap: 8px; padding: 0 8px; color: var(--sd-header-text); background: var(--sd-header); font-weight: 700; font-size: 12px; }
.sd-title-glyph { font-size: 12px; font-weight: 900; }
.sd-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-title-button { display: inline-flex; align-items: center; height: 16px; padding: 0 6px; color: var(--sd-text); background: var(--sd-control); font-size: 11px; font-weight: 700; box-shadow: inset 1px 1px 0 var(--sd-highlight), inset -1px -1px 0 var(--sd-shadow); }

.sd-field-row { flex: 0 0 58px; gap: 10px; padding: 0 12px; }
.sd-label { flex: 0 0 auto; font-size: 12px; }
.sd-field-glyph { flex: 0 0 auto; color: var(--sd-subtext); font-size: 20px; font-weight: 600; }
.sd-field { position: relative; flex: 1; display: inline-flex; align-items: center; min-width: 0; height: 26px; padding: 0 6px; background: var(--sd-card); box-shadow: inset 1px 1px 0 var(--sd-shadow), inset -1px -1px 0 var(--sd-highlight); font-size: 15px; white-space: nowrap; overflow: hidden; }
.sd-query { white-space: pre; }
.sd-query:empty + .sd-caret::after { content: attr(data-placeholder); }
.sd-caret { display: inline-block; width: 1px; height: 17px; margin-left: 1px; background: currentColor; animation: sd-blink 1s steps(1) infinite; }
.sd-clear { flex: 0 0 auto; color: var(--sd-subtext); font-size: 15px; line-height: 1; }
.sd-window.is-empty .sd-clear { visibility: hidden; }
.sd-placeholder { color: var(--sd-subtext); opacity: .6; }
/* Source chip for a typed prefix such as "sn ": selection colours, square on retro themes. */
.sd-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; padding: 2px 7px; color: var(--sd-selection-text); background: var(--sd-selection); font-size: 11px; font-weight: 600; line-height: 1.2; }
.sd-chip-glyph { font-size: 10px; }
.search-demo-liquid .sd-chip { border-radius: 6px; font-size: 12px; font-weight: 500; }

.sd-results { flex: 0 0 var(--sd-results-height); min-height: 0; padding: 0 8px 4px; overflow: hidden; }
.sd-list { margin: 0; padding: 0; list-style: none; }
.sd-group { height: 26px; gap: 6px; padding: 0 10px; color: var(--sd-subtext); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.sd-group-glyph { font-size: 10px; }
.sd-row { height: 50px; gap: 10px; padding: 0 10px; opacity: 0; transform: translateY(4px); animation: sd-appear .18s ease-out forwards; }
.sd-row.is-selected { color: var(--sd-selection-text); background: var(--sd-selection); animation-duration: .01s; }
.sd-row.is-activated { opacity: 1; transform: none; animation: sd-flash .16s steps(2) 2; }
.sd-icon { flex: 0 0 30px; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: var(--sd-icon); font-size: 17px; font-weight: 600; }
.sd-icon::before { content: attr(data-glyph); }
.sd-row.is-selected .sd-icon { color: inherit; }
.sd-row[data-source="Applications"] .sd-icon::before { content: ""; width: 24px; height: 24px; border-radius: 6px; background: linear-gradient(135deg, #5ac8fa, #0a84ff 60%, #1b3a8a); }
.sd-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sd-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-sub { font-size: 11px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-action { flex: 0 0 auto; font-size: 10px; font-weight: 700; opacity: .9; white-space: nowrap; }
.sd-more { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 10px; font-weight: 700; line-height: 1; opacity: .9; }
.sd-row:not(.is-selected) .sd-action,
.sd-row:not(.is-selected) .sd-more { display: none; }
.sd-index { flex: 0 0 26px; text-align: center; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "Segoe UI", sans-serif; font-size: 10px; font-weight: 500; opacity: .45; }
.sd-row.is-selected .sd-index { opacity: .9; }

.sd-footer { flex: 0 0 30px; gap: 12px; padding: 0 14px; color: var(--sd-subtext); font-size: 10px; white-space: nowrap; overflow: hidden; }
.sd-hint { gap: 3px; }
.sd-hint kbd { display: inline-block; padding: 1px 4px; border: 0; background: var(--sd-control); color: inherit; font: inherit; }
.sd-gear { margin-left: auto; font-size: 12px; }

@keyframes sd-blink { 50% { opacity: 0; } }
@keyframes sd-appear { to { opacity: 1; transform: none; } }
@keyframes sd-flash { 50% { filter: brightness(.82); } }

/* Windows 95: Find: Files or Folders. Black 2.5px stroke, raised bevel inside, the
   list sits on a sunken card, the footer counts results on the muted card. */
.search-demo-win95 .sd-window {
  font-family: "Segoe UI", Selawik, Tahoma, "MS Sans Serif", Arial, sans-serif;
  border: 2.5px solid #000;
  box-shadow: inset 1px 1px 0 var(--sd-highlight), inset -1px -1px 0 var(--sd-shadow), 4px 4px 0 rgba(0, 0, 0, 0.34);
}
.search-demo-win95 .sd-results { margin: 0 6px; padding: 0 2px 4px; background: var(--sd-card); box-shadow: inset 1px 1px 0 var(--sd-shadow), inset -1px -1px 0 var(--sd-highlight); }
.search-demo-win95 .sd-footer { background: var(--sd-muted-card); }

/* CDE: Motif Find dialog. Black title bar, warm grey surfaces, Charter type. */
.search-demo-cde .sd-window {
  --sd-bg: #cfd1c7;
  --sd-text: #1a1a1a;
  --sd-subtext: #333634;
  --sd-card: #e3e3d9;
  --sd-muted-card: #a9ada9;
  --sd-control: #f2ebdb;
  --sd-selection: #a8c7db;
  --sd-selection-text: #000000;
  --sd-header: #000000;
  --sd-header-text: #f0ede0;
  --sd-icon: #1a1a1a;
  --sd-highlight: rgba(255, 255, 255, 0.72);
  --sd-shadow: rgba(93, 102, 115, 0.58);
  font-family: Charter, "Charter BT", Georgia, "Times New Roman", serif;
  border: 2px solid #000;
  box-shadow: inset 1px 1px 0 var(--sd-highlight), inset -1px -1px 0 var(--sd-shadow), 7px 7px 0 rgba(17, 27, 41, 0.38);
}

/* Liquid Glass: no title bar, a tall field, rounded selection, glass surface. */
.search-demo-liquid .sd-window {
  --sd-bg: rgba(245, 247, 250, 0.82);
  --sd-text: #1a1a1f;
  --sd-subtext: rgba(61, 61, 66, 0.76);
  --sd-card: transparent;
  --sd-muted-card: transparent;
  --sd-control: rgba(255, 255, 255, 0.6);
  --sd-selection: #007aff;
  --sd-selection-text: #ffffff;
  --sd-icon: #007aff;
  --sd-highlight: transparent;
  --sd-shadow: transparent;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  border: 1px solid rgba(61, 61, 66, 0.28);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: saturate(170%) blur(22px);
  backdrop-filter: saturate(170%) blur(22px);
}
.search-demo-liquid .sd-field-row { flex-basis: 60px; padding: 0 18px; }
.search-demo-liquid .sd-field { height: auto; padding: 0; box-shadow: none; font-size: 22px; }
.search-demo-liquid .sd-caret { height: 24px; }
.search-demo-liquid .sd-results { padding: 0 10px 4px; }
.search-demo-liquid .sd-group { font-size: 11px; font-weight: 600; letter-spacing: .6px; }
.search-demo-liquid .sd-row.is-selected { border-radius: 10px; }
.search-demo-liquid .sd-name { font-size: 14px; font-weight: 500; }
.search-demo-liquid .sd-sub { font-size: 12px; }
.search-demo-liquid .sd-action { font-size: 11px; font-weight: 500; }
.search-demo-liquid .sd-footer { font-size: 10.5px; font-weight: 500; }
.search-demo-liquid .sd-hint kbd { border-radius: 4px; }

/* One stage shows the variant that matches the site theme. */
.search-demo-stage .search-demo { display: none; }
html[data-theme="liquid"] .search-demo-stage .search-demo-liquid,
html[data-theme="cde"] .search-demo-stage .search-demo-cde,
html[data-theme="win95"] .search-demo-stage .search-demo-win95 { display: block; }

@media (prefers-reduced-motion: reduce) {
  .sd-caret { animation: none; }
  .sd-row { opacity: 1; transform: none; animation: none; }
  .sd-row.is-activated { animation: none; }
}

@media (max-width: 700px) {
  .search-demo .sd-window { --sd-results-height: 356px; }
  .sd-row { height: 42px; }
  .sd-group { height: 22px; }
  .sd-field-row { flex-basis: 50px; }
  .search-demo-liquid .sd-field-row { flex-basis: 52px; }
  .search-demo-liquid .sd-field { font-size: 18px; }
  .sd-action { display: none !important; }
}