/**
 * Command palette / site-wide search — ports design-lab search.html, on-brand.
 * Trigger lives in the masthead; the panel is a fixed dropdown (full-width on
 * mobile). Colours use the theme tokens with the design's literals as fallback.
 */

/* ---- masthead trigger ---- */
.td-search-trigger {
	display: flex; align-items: center; gap: 10px;
	width: clamp(180px, 26vw, 330px); height: 40px; padding: 0 12px 0 14px;
	border: 1.5px solid var(--td-ink, #1A1A1B); border-radius: 3px; background: #fff;
	box-sizing: border-box;
}
.td-search-trigger:focus-within { border-color: var(--td-accent, #BE531B); }
.td-search-ico { flex: none; color: var(--td-ink, #1A1A1B); }
.td-search-input {
	flex: 1; min-width: 0; border: 0; outline: none; background: none; padding: 0;
	font-family: var(--td-sans, "Geist"), sans-serif; font-size: 14px; color: var(--td-ink, #1A1A1B);
}
.td-search-input::placeholder { color: #9a948a; }
.td-search-kbd {
	flex: none; font-family: var(--td-mono, "Geist Mono"), monospace; font-size: 10px;
	letter-spacing: .04em; color: #9a948a; border: 1px solid #e0dace; border-radius: 3px; padding: 2px 5px;
}
@media (max-width: 600px) { .td-search-kbd { display: none; } }

/* ---- overlay + panel ---- */
.tds-overlay[hidden] { display: none; }
/* Click-through container: only the panel is interactive, so the click that
   opens the palette (on the masthead input) doesn't land on a backdrop and
   close it. Outside-click closing is handled by the document listener. */
.tds-overlay { position: fixed; inset: 0; z-index: 1000; pointer-events: none; }
.tds-backdrop { position: absolute; inset: 0; background: transparent; pointer-events: none; }
.tds-panel {
	pointer-events: auto;
	position: absolute; width: min(600px, calc(100vw - 24px)); max-height: min(78vh, 660px); overflow-y: auto;
	background: #fff; border: 1px solid var(--td-hairline, #e7e3da); border-radius: 4px;
	box-shadow: 0 26px 60px -30px rgba(26,26,27,.45), 0 6px 16px -12px rgba(26,26,27,.16);
}
.tds-panel.is-loading { cursor: progress; }
.tds-panel.is-loading::before {
	content: ""; position: sticky; top: 0; left: 0; display: block; height: 2px;
	background: linear-gradient(90deg, transparent, var(--td-accent, #BE531B), transparent);
	animation: tds-load 1s linear infinite; background-size: 40% 100%; background-repeat: no-repeat;
}
@keyframes tds-load { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) { .tds-panel.is-loading::before { animation: none; } }
.tds-body { padding: 6px 14px 10px; }

/* ---- group headers ---- */
.tds-grp { display: flex; align-items: center; gap: 11px; padding: 13px 4px 8px; }
.tds-grp-l { font-family: var(--td-mono, "Geist Mono"), monospace; font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--td-ink-3, #6E6A62); }
.tds-grp-rule { flex: 1; height: 1px; background: #ece8e0; }
.tds-grp-n { font-family: var(--td-mono, "Geist Mono"), monospace; font-size: 9.5px; color: #b3aca1; }

/* ---- shared item ---- */
.tds-item { display: block; text-decoration: none; border-radius: 3px; color: inherit; }
.tds-item.is-active, .tds-item:hover { background: #F6F3EC; }
.tds-arrow { flex: none; color: #cfc8ba; align-self: center; }
.tds-hl { background: rgba(190,83,27,.14); color: #9a4216; border-radius: 2px; padding: 0 2px; }
.tds-chg.is-up, .tds-sent.is-up { color: var(--td-up, #167C3C); }
.tds-chg.is-down, .tds-sent.is-down { color: var(--td-down, #C73B3B); }
.tds-chg.is-flat { color: var(--td-ink-3, #6E6A62); }

/* ---- ticker ---- */
.tds-ticker { padding: 11px 12px; }
.tds-ticker-top { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; }
.tds-ticker-name { display: flex; align-items: baseline; gap: 9px; }
.tds-sym { font-family: var(--td-mono, "Geist Mono"), monospace; font-size: 16px; font-weight: 500; color: var(--td-ink, #1A1A1B); }
.tds-co { font-family: var(--td-sans, "Geist"), sans-serif; font-size: 13.5px; color: var(--td-ink-2, #5C5C5A); }
.tds-ticker-meta { margin-top: 5px; font-family: var(--td-mono, "Geist Mono"), monospace; font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--td-ink-3, #6E6A62); }
.tds-spark { display: block; flex: none; overflow: visible; }
.tds-ticker-px { text-align: right; }
.tds-px { font-family: var(--td-mono, "Geist Mono"), monospace; font-size: 15px; color: var(--td-ink, #1A1A1B); }
.tds-chg { margin-top: 3px; font-family: var(--td-mono, "Geist Mono"), monospace; font-size: 12px; font-weight: 500; }
.tds-ticker-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 11px; padding-top: 10px; border-top: 1px solid #efece4; }
.tds-sent-wrap { display: flex; align-items: center; gap: 9px; }
.tds-k { font-family: var(--td-mono, "Geist Mono"), monospace; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--td-ink-3, #6E6A62); }
.tds-sent { font-family: var(--td-mono, "Geist Mono"), monospace; font-size: 12px; font-weight: 500; }
.tds-men { font-family: var(--td-mono, "Geist Mono"), monospace; font-size: 11px; color: var(--td-ink-3, #6E6A62); }

/* ---- topic / market ---- */
.tds-topic { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 10px 12px; }
.tds-badge { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--td-hairline, #e7e3da); border-radius: 3px; font-family: var(--td-mono, "Geist Mono"), monospace; font-size: 11px; font-weight: 500; letter-spacing: .04em; color: var(--td-ink-3, #6E6A62); }
.tds-topic-name { font-family: var(--td-serif, "Fraunces"), serif; font-weight: 600; font-size: 16.5px; color: var(--td-ink, #1A1A1B); letter-spacing: -.01em; }
.tds-topic-meta { margin-top: 3px; font-family: var(--td-mono, "Geist Mono"), monospace; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--td-ink-3, #6E6A62); }

/* ---- article ---- */
.tds-article { display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: baseline; padding: 11px 12px; }
.tds-article + .tds-article { border-top: 1px solid #f2efe9; }
.tds-date { font-family: var(--td-mono, "Geist Mono"), monospace; font-size: 11px; letter-spacing: .03em; color: var(--td-accent, #BE531B); padding-top: 2px; }
.tds-article-title { font-family: var(--td-serif, "Fraunces"), serif; font-weight: 600; font-size: 15.5px; line-height: 1.28; letter-spacing: -.01em; color: var(--td-ink, #1A1A1B); }
.tds-article-meta { margin-top: 5px; font-family: var(--td-mono, "Geist Mono"), monospace; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--td-ink-3, #6E6A62); }

/* ---- glossary ---- */
.tds-glossary { display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: baseline; padding: 11px 12px; }
.tds-term { font-family: var(--td-mono, "Geist Mono"), monospace; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--td-accent, #BE531B); padding-top: 3px; }
.tds-gloss-name { font-family: var(--td-serif, "Fraunces"), serif; font-weight: 600; font-size: 15.5px; line-height: 1.25; letter-spacing: -.01em; color: var(--td-ink, #1A1A1B); }
.tds-gloss-def { margin-top: 4px; font-family: var(--td-sans, "Geist"), sans-serif; font-size: 12.5px; line-height: 1.45; color: var(--td-ink-2, #5C5C5A); }

/* ---- note + footer ---- */
.tds-note { font-family: var(--td-sans, "Geist"), sans-serif; font-size: 12.5px; line-height: 1.5; color: var(--td-ink-2, #5C5C5A); padding: 12px 6px 8px; border-bottom: 1px solid #f4f1ea; }
.tds-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-top: 1px solid #ece8e0; background: var(--td-canvas, #FBFBF9); position: sticky; bottom: 0; }
.tds-foot-l { font-family: var(--td-mono, "Geist Mono"), monospace; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--td-ink-3, #6E6A62); }
.tds-foot-r { font-family: var(--td-mono, "Geist Mono"), monospace; font-size: 10.5px; letter-spacing: .06em; color: var(--td-accent, #BE531B); }
.tds-foot-all { font-family: var(--td-mono, "Geist Mono"), monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--td-accent, #BE531B); text-decoration: none; border-bottom: 1px solid #e3b89c; padding-bottom: 2px; }
.tds-empty { font-family: var(--td-sans, "Geist"), sans-serif; font-size: 13.5px; color: var(--td-ink-2, #5C5C5A); padding: 22px 8px; text-align: center; }

/* ---- empty state: trending / chips / jump ---- */
.tds-trend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tds-trend-card { padding: 10px 12px; border: 1px solid #efece4; border-radius: 3px; }
.tds-trend-card.is-active, .tds-trend-card:hover { border-color: #e3cdbf; background: #F6F3EC; }
.tds-trend-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tds-trend-top .tds-sym { font-size: 13px; }
.tds-trend-top .tds-chg { margin-top: 0; font-size: 11px; }
.tds-trend-bot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 7px; }
.tds-trend-px { font-family: var(--td-mono, "Geist Mono"), monospace; font-size: 9.5px; letter-spacing: .06em; color: var(--td-ink-3, #6E6A62); }
.tds-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 2px; }
.tds-chip { font-family: var(--td-mono, "Geist Mono"), monospace; font-size: 11.5px; letter-spacing: .04em; color: var(--td-ink, #1A1A1B); text-decoration: none; border: 1px solid #ddd7cc; border-radius: 999px; padding: 6px 13px; }
.tds-chip.is-active, .tds-chip:hover { border-color: var(--td-ink, #1A1A1B); background: var(--td-ink, #1A1A1B); color: #fff; }
.tds-jump { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px 16px; padding: 0 2px; }
.tds-jump-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 4px; font-family: var(--td-sans, "Geist"), sans-serif; font-size: 13px; color: var(--td-ink, #1A1A1B); text-decoration: none; border-bottom: 1px solid #f2efe9; }
.tds-jump-link.is-active, .tds-jump-link:hover { color: var(--td-accent, #BE531B); }
.tds-jump-arrow { color: #cfc8ba; font-family: var(--td-mono, "Geist Mono"), monospace; }

/* ---- mobile ---- */
@media (max-width: 640px) {
	.tds-panel { position: fixed !important; left: 8px !important; right: 8px !important; top: 64px !important; width: auto !important; max-height: calc(100vh - 80px); }
	.tds-trend, .tds-jump { grid-template-columns: 1fr; }
	.tds-ticker-top { grid-template-columns: 1fr auto; }
	.tds-ticker-top .tds-spark { display: none; }
}