/* nousspace site search (assets/search.js): the header button and the search panel.
   Reader pages (Blog, Feed, Learn, About) pass their theme colours in; the home page has no reader
   theme, so the panel uses the dark palette there. The panel is solid (no backdrop blur). */
.ns-search, .ns-search-btn {
  --s-bg: var(--bg, #121110); --s-bg2: var(--bg-2, #1B1A18); --s-ink: var(--ink, #ECE6DA);
  --s-ink2: var(--ink-2, rgba(236, 230, 218, .78)); --s-muted: var(--muted, rgba(236, 230, 218, .55));
  --s-line: var(--line, rgba(236, 230, 218, .14)); --s-chip: var(--chip, rgba(236, 230, 218, .07));
  --s-accent: var(--accent, #DCEF6A); --s-accent-soft: var(--accent-soft, rgba(220, 239, 106, .12));
  --s-sans: var(--sans, "Schibsted Grotesk", system-ui, sans-serif); --s-serif: var(--serif, "Newsreader", Georgia, serif);
  --s-mono: var(--mono, "Space Mono", ui-monospace, monospace);
}
html:not([data-theme]) .ns-search {
  --s-bg: #121110; --s-bg2: #1B1A18; --s-ink: #ECE6DA; --s-ink2: rgba(236, 230, 218, .78); --s-muted: rgba(236, 230, 218, .55);
  --s-line: rgba(236, 230, 218, .14); --s-chip: rgba(236, 230, 218, .07); --s-accent: #DCEF6A; --s-accent-soft: rgba(220, 239, 106, .12);
}

/* The header button: a magnifier, plus the word "Search" where there is room. */
.ns-search-btn { display: inline-flex; align-items: center; gap: .4rem; height: 32px; padding: 0 .7rem 0 .62rem; border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 28%, transparent); border-radius: 999px; background: transparent; color: inherit; font: 500 12.5px/1 var(--s-sans); cursor: pointer; transition: background .2s, border-color .2s; }
.ns-search-btn:hover { background: color-mix(in srgb, currentColor 10%, transparent); border-color: color-mix(in srgb, currentColor 45%, transparent); }
.ns-search-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ns-search-btn kbd { padding: 1px 5px; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); border-radius: 5px; font: 400 11px/1.2 var(--s-mono); opacity: .7; }
.ns-search-btn kbd { display: none; } /* the shortcut is in the tooltip; the button stays compact */
@media (max-width: 760px) { .ns-search-btn { width: 34px; height: 34px; padding: 0; justify-content: center; } .ns-search-btn .ns-search-word { display: none; } }

/* The panel */
.ns-search { width: min(680px, 100vw - 24px); max-height: min(78vh, 720px); margin: 10vh auto auto; padding: 0; border: 1px solid var(--s-line); border-radius: 20px; background: var(--s-bg); color: var(--s-ink); box-shadow: 0 30px 80px rgb(0 0 0 / .35); overflow: hidden; }
.ns-search::backdrop { background: rgb(10 9 8 / .55); }
.ns-search[open] { display: flex; animation: ns-search-in .18s ease-out; }
@keyframes ns-search-in { from { opacity: 0; transform: translateY(-6px) scale(.99); } }
@media (prefers-reduced-motion: reduce) { .ns-search[open] { animation: none; } }
.ns-search-box { display: flex; flex-direction: column; width: 100%; min-height: 0; }
.ns-search-field { display: flex; align-items: center; gap: .7rem; padding: .9rem 1rem .9rem 1.15rem; border-bottom: 1px solid var(--s-line); }
.ns-search-field > svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--s-muted); stroke-width: 2; stroke-linecap: round; }
.ns-search-field input { flex: 1; min-width: 0; height: 40px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--s-ink); font: 400 18px/1.2 var(--s-sans); }
.ns-search-field input::placeholder { color: var(--s-muted); }
.ns-search-field input::-webkit-search-cancel-button { display: none; }
.ns-search-close { flex: none; padding: 4px 8px; border: 1px solid var(--s-line); border-radius: 7px; background: transparent; color: var(--s-muted); font: 400 11.5px/1.2 var(--s-mono); cursor: pointer; }
.ns-search-close:hover { color: var(--s-ink); }
.ns-search-chips { display: flex; gap: .4rem; padding: .7rem 1rem .2rem; overflow-x: auto; scrollbar-width: none; }
.ns-search-chips::-webkit-scrollbar { display: none; }
.ns-search-chips button { flex: none; min-height: 30px; padding: 0 .75rem; border: 1px solid var(--s-line); border-radius: 999px; background: transparent; color: var(--s-ink2); font: 500 12.5px var(--s-sans); cursor: pointer; white-space: nowrap; }
.ns-search-chips button:hover { color: var(--s-ink); border-color: color-mix(in srgb, var(--s-ink) 30%, transparent); }
.ns-search-chips button[aria-pressed="true"] { border-color: var(--s-ink); background: var(--s-ink); color: var(--s-bg); }
.ns-search-status { margin: 0; padding: .55rem 1.15rem .35rem; color: var(--s-muted); font: 400 12.5px/1.4 var(--s-sans); }
.ns-search-results { flex: 1; min-height: 0; margin: 0; padding: .2rem .5rem .6rem; overflow-y: auto; list-style: none; overscroll-behavior: contain; }
.ns-r { display: grid; grid-template-columns: minmax(0, 1fr); gap: .15rem; padding: .65rem .7rem; border-radius: 12px; color: inherit; text-decoration: none; }
.ns-r:hover, [aria-selected="true"] > .ns-r { background: var(--s-chip); }
[aria-selected="true"] > .ns-r { box-shadow: inset 2px 0 0 var(--s-accent); }
.ns-r-label { color: var(--s-accent); font: 400 10.5px/1.4 var(--s-mono); letter-spacing: .08em; text-transform: uppercase; }
.ns-r-title { font: 500 16px/1.3 var(--s-serif); }
.ns-r-title mark { padding: 0 1px; border-radius: 3px; background: var(--s-accent-soft); color: inherit; }
.ns-r-meta { overflow: hidden; color: var(--s-muted); font: 400 13px/1.4 var(--s-sans); white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 600px) {
  .ns-search { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; }
}
html.ns-search-open { overflow: hidden; }
.ns-search .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Personal Space: header link, "Add to Space" buttons and their toast (assets/space-save.js) ---------- */
.ns-space-link { display: inline-flex; align-items: center; gap: .4rem; height: 32px; padding: 0 .75rem 0 .55rem; border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 28%, transparent); border-radius: 999px; color: inherit; font: 500 12.5px/1 var(--s-sans, "Schibsted Grotesk", system-ui, sans-serif); text-decoration: none; white-space: nowrap; transition: background .2s, border-color .2s; }
.ns-space-link:hover { background: color-mix(in srgb, currentColor 10%, transparent); border-color: color-mix(in srgb, currentColor 45%, transparent); }
.ns-space-icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ns-space-initial { display: none; }
.ns-space-link.is-in { padding-left: 3px; }
.ns-space-link.is-in .ns-space-icon { display: none; }
.ns-space-link.is-in .ns-space-initial { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, currentColor 14%, transparent); font: 500 12px/1 var(--s-serif, Georgia, serif); }
@media (max-width: 760px) {
  .ns-space-link { width: 34px; height: 34px; padding: 0; justify-content: center; }
  .ns-space-link.is-in { padding: 0; }
  .ns-space-word { display: none; }
}
.ns-keep { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.ns-keep svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ns-keep .ns-keep-check { display: none; }
.ns-keep[aria-pressed="true"] .ns-keep-plus { display: none; }
.ns-keep[aria-pressed="true"] .ns-keep-check { display: block; }
.ns-keep[aria-pressed="true"] .ns-keep-shape { fill: color-mix(in srgb, currentColor 16%, transparent); }
.ns-keep:disabled { opacity: .6; cursor: progress; }
.ns-keep-byline { margin-left: auto; min-height: 34px; padding: 0 .9rem 0 .7rem; border: 1px solid var(--line, rgba(0,0,0,.12)); border-radius: 999px; background: transparent; color: var(--ink, inherit); font: 500 13px/1 var(--sans, system-ui); }
.ns-keep-byline:hover { background: var(--chip, rgba(0,0,0,.05)); }
.ns-keep-byline[aria-pressed="true"] { border-color: var(--accent, currentColor); color: var(--accent, inherit); }
.ns-toast { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 300; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; max-width: min(520px, 100vw - 24px); padding: .75rem 1.1rem; border-radius: 14px; background: var(--pop, #14130F); color: var(--pop-ink, #FFF9F1); box-shadow: 0 12px 40px rgb(0 0 0 / .28); font: 500 14px/1.4 var(--sans, "Schibsted Grotesk", system-ui, sans-serif); opacity: 0; transform: translate(-50%, 10px); pointer-events: none; transition: opacity .22s, transform .22s; }
.ns-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.ns-toast a { color: inherit; font-weight: 600; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .ns-toast { transition: none; } }
[data-density="compact"] .v-card .ns-keep-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Search is a small circle everywhere: just the magnifier. */
.ns-search-btn { width: 32px; padding: 0; justify-content: center; }
.ns-search-btn .ns-search-word { display: none; }
@media (max-width: 760px) { .ns-search-btn { width: 34px; } }