/* Topic and sort pills: one definition for Artikler, Videoer and Forskning. "Emner: <chosen>" opens the
   topic dialog; the sort and topic choices are pills too. At least 44px tall, label DM Sans Black 15px
   (the label text style). The chosen one takes the Mountain Red tint and an underline, so it never relies
   on colour alone; a chosen topic (.topic-x) is tinted and removes itself. Scoped to #main so page link
   colours do not override it. Layout (rows, dialogs, wrapping long names) stays with each page. */
#main .topic { flex: none; box-sizing: border-box; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--orange-light); border-radius: 999px; background: var(--bg); color: var(--text); font: var(--weight-strong) 15px/1.3 var(--font-sans); text-decoration: none; white-space: nowrap; transition: background-color 120ms cubic-bezier(.2, 0, 0, 1), border-color 120ms cubic-bezier(.2, 0, 0, 1); }
#main .topic[hidden] { display: none; }
/* Without JavaScript the topics are a plain list in the page (type.css), so the "Emner" button would do nothing. */
html:not(.js) #main .topic-picker:not(.is-ready) [data-topics-open] { display: none; }
#main button.topic:not(:disabled) { cursor: pointer; }
#main .topic:hover { border-color: var(--orange); }
#main .topic:is([aria-current], [aria-pressed="true"]) { background: var(--orange-tint); border-color: var(--orange); text-decoration: underline; text-underline-offset: 4px; }
#main :is(.topic-open, .topic-x) { gap: 6px; }
#main .topic-x { background: var(--orange-tint); border-color: var(--orange); }
.topic-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.topic-chips:empty { display: none; } /* no gap or empty row before any topic is chosen */
@media (prefers-reduced-motion: reduce) { #main .topic { transition: none; } }