/*******************************************************
Story rubric "Filter" panel (WS-224)

The left-column tile that narrows and re-sorts the rubric's single ranked list
(StoryRanking, §8.20). Image mode, three category checkbox groups and a sort order;
public/js/stories/filter.js reads the controls and reloads the content feed. Styling
mirrors the homepage feed filter (feedFilter.css) so both tiles read as one system.
*******************************************************/

.storyFilter__group {
    margin-bottom: 12px;
}

/* Feld-Look (Pill/Rahmen/Fokus) kommt zentral aus .inputField (WS-313); hier
   bleibt nur die filterspezifische Breite. */
.storyFilter__search {
    width: 100%;
    box-sizing: border-box;
}

/* Auto-collapse of the category groups (WS-230): filter.js toggles is-hidden on the
   inactive options and on the expand button. */
.storyFilter__item.is-hidden,
.storyFilter__expand.is-hidden {
    display: none;
}

.storyFilter__expand {
    margin-top: 2px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.85em;
    color: var(--ws-theme-flyout-item-text);
    cursor: pointer;
}

/* WS-916: Hinlink zur klassischen Kategorie-Ansicht, unterhalb der Suche. */
.storyFilter__switch a {
    font-size: 0.85em;
    color: var(--ws-theme-link);
}

.storyFilter__groupHeading {
    margin: 8px 0 4px;
    font-size: 0.95em;
    font-weight: bold;
    color: var(--ws-theme-filter-heading);
}

/* storyFilter__itemLabel ist das Label der Info-Zeile, deren äusserer Rahmen ein <div> ist
   (ein <button> darf nicht in einem <label> stehen, siehe filterpanel.phtml). Es trägt
   dieselbe Zeilen-Anordnung, aber keinen eigenen Innenabstand — den hält die Zeile. */
.storyFilter__item,
.storyFilter__itemLabel {
    display: flex;
    align-items: baseline;
    gap: 6px;
    cursor: pointer;
}

.storyFilter__item {
    padding: 2px 0;
}

.storyFilter__all,
.storyFilter__category,
.storyFilter__image,
.storyFilter__sort {
    flex-shrink: 0;
    cursor: pointer;
}

.storyFilter__label {
    font-size: 0.9em;
    color: var(--ws-theme-filter-text);
}

/* WS-426: Unter der Default-Sortierung "Für dich empfohlen" spannt die Empfehlungs-Engine
   immer alle Kategorien; die drei Facetten-Gruppen sind wirkungslos und werden deshalb
   ausgeblendet statt ausgegraut (WS-303) — ein deaktiviertes Feld, das man nicht bedienen
   kann, erklärt sich nicht selbst. filter.js setzt storyFilter--recommended.
   Die Suche und der Bild-Modus bleiben aktiv (WS-311, Pkt. 2). */
.storyFilter--recommended .storyFilter__group--collapsible {
    display: none;
}

/* Der stehende Hinweistext gehört allein der Mobile View (responsive.css blendet ihn im
   Filter-Flyout ein): auf Desktop trägt das Info-Icon hinter der Sortier-Option denselben
   Satz im Hover-Tooltip. */
.storyFilter__recommendedNote {
    display: none;
    margin: 0 0 12px;
    padding: 8px 10px;
    font-size: 0.85em;
    line-height: 1.4;
    color: var(--ws-theme-tile-text-muted);
    background: var(--ws-theme-notice-surface);
    border-radius: 4px;
}

/* Info-Icon hinter "Für dich empfohlen" samt Tooltip. Anker ist die Options-Zeile, nicht
   das Icon: die Sidebar-Spalte ist nur 245px breit und schneidet Überhänge ab
   (#col2 overflow:hidden), ein an der Zeile ausgerichteter Tooltip bleibt dagegen immer
   im Rahmen. Sichtbar wird er bei Hover über dem Icon und solange die Schaltfläche den
   Fokus hält — das deckt Tastatur und Touch ab, wo es kein Hover gibt. */
.storyFilter__item--info {
    position: relative;
    /* In dieser Zeile schalten nur Label und Icon, nicht die ganze Zeile — der geerbte
       Zeiger versprach eine Bedienbarkeit, die der Rest der Zeile nicht hat. */
    cursor: default;
}

.storyFilter__info {
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.9em;
    line-height: 1;
    color: var(--ws-theme-flyout-accent);
    cursor: help;
}

/* Der Tooltip liegt in der Schaltfläche (siehe filterpanel.phtml) und erbt von ihr sonst
   die Button-Zentrierung; er ist aber mehrzeiliger Fließtext. */
.storyFilter__infoText {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 2;
    padding: 8px 10px;
    text-align: left;
    white-space: normal;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.12s ease-in;
    font-size: 0.85em;
    line-height: 1.4;
    color: var(--ws-theme-notice-text);
    background: var(--ws-theme-notice-surface);
    border: 1px solid var(--ws-theme-notice-edge);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.storyFilter__info:hover .storyFilter__infoText,
.storyFilter__info:focus .storyFilter__infoText {
    visibility: visible;
    opacity: 1;
}

/* WCAG 1.4.13: Der Tooltip muss sich auch wegdrücken lassen, ohne den Zeiger zu bewegen —
   filter.js setzt die Klasse auf ESC und nimmt sie zurück, sobald Zeiger oder Fokus die
   Schaltfläche verlassen. Steht hinter den Hover-Regeln, um sie bei gleicher Spezifität
   zu überstimmen. */
.storyFilter__info.is-dismissed .storyFilter__infoText {
    visibility: hidden;
    opacity: 0;
}