/*
 * Norm columns and legend on the result page (norm system redesign).
 * All class names use the npick_ prefix (project rule: no generic class names).
 * Palette per design_overview: primary #4279BC, text #2c3e50/#495057, borders
 * #e9ecef/#dee2e6, bg #f8f9fa.
 *
 * The picker this file was named after (bar, panel, group multi-select) was removed on
 * 13.08.2026 - which norms are shown is decided by the engine's selection hierarchy,
 * see docs/norm-system-redesign/norm-selection-hierarchy.md.
 */

/* ------------------------------------------------ norm columns in the scales table */

/*
 * Two-row head with placeholders ("Norm 1"), decided 12.08.2026 - see the mockup
 * at /design_overview/normwerte-darstellung (Variante A). The placeholders are
 * resolved by the legend below the table.
 */
.npick_norm_head {
    text-align: center;
    font-size: var(--text-size-90);
    line-height: 1.25;
    white-space: nowrap;
}

.npick_type_th,
.npick_type_head {
    text-align: center;
    font-size: var(--text-size-90);
    color: #4279BC;
    font-weight: 600;
    white-space: nowrap;
}

/* Norm values are short - they scroll rather than break into two lines */
.npick_norm_cell {
    white-space: nowrap;
}

/* Stronger line where a new reference group starts */
.npick_group_start {
    border-left: 2px solid #c9d4e2;
}

.npick_cell_empty {
    color: #9aa0a6;
}

/*
 * Many norms make the table wide (accepted, no responsive special case): it then
 * scrolls sideways inside its own frame while the legend below stays put, and the
 * scale column stays visible.
 *
 * The scales table sits in a layout table inside a flex column, and both of those
 * would rather grow than let anything scroll - `contain: inline-size` is what stops
 * the table width from propagating outwards. norm_picker.js switches the frame on
 * only when the table really is wider than the page area, so every normal-width
 * table keeps hugging its content the way it does without norm columns.
 */
.npick_scales_scroll {
    overflow-x: auto;
}

.npick_scroll_active {
    contain: inline-size;
    max-width: 100%;
}

.npick_scroll_active .sc_cr_hd_left {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 1;
    /* Keeps the scale names readable instead of letting them collapse to two
       characters per line. */
    min-width: 150px;
}

/* ------------------------------------------------------------ legend */

.npick_legend_box {
    margin-top: var(--sp-m);
    padding: var(--sp-s) var(--sp-m);
    background: #f8f9fa;
    border-radius: 4px;
    font-size: var(--text-size-90);
    color: #495057;
}

/*
 * Aufklappbare Legende (13.08.2026): mit vielen Normen wird die Legende lang und
 * schiebt alles Weitere nach unten, obwohl sie nur einmal gelesen wird. Zugeklappt
 * bleibt deshalb nur die Zeile "Legende" stehen.
 *
 * Natives <details>/<summary> nach dem Vorbild von .infoelem--collapsible
 * (global/1_info-element.css): kein Skript, Tastatur und Screenreader kommen vom
 * Browser. Bewusst NICHT das Info-Element selbst - die Legende ist kein Hinweiskasten
 * und behaelt ihren rahmenlosen grauen Kasten ohne Symbol.
 *
 * Der Leerzustand ("keine passenden Normen") bleibt ein normaler .npick_legend_box
 * ohne Toggle: eine Begruendung, die niemand aufklappt, waere keine.
 */
.npick_legend_details {
    /* Der Innenabstand wandert in Kopf und Koerper, sonst laesst sich der Kopf
       nicht bis zum Rand anklicken. */
    padding: 0;
}

.npick_legend_summary {
    padding: var(--sp-s) var(--sp-m);
    cursor: pointer;
    /* Das Standard-Dreieck weicht dem eigenen Chevron - zwei Marker waeren doppelt. */
    list-style: none;
}

.npick_legend_summary::-webkit-details-marker {
    display: none;
}

.npick_legend_summary:focus-visible {
    outline: 2px solid #4279BC;
    outline-offset: -2px;
    border-radius: 4px;
}

/* Eigene Zeile statt display:flex auf dem summary selbst: aeltere Safari-Versionen
   verlieren mit einem umdefinierten summary den Aufklapp-Mechanismus. */
.npick_legend_summary_row {
    display: flex;
    align-items: center;
    gap: var(--sp-s);
}

.npick_legend_summary_title {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    color: #2c3e50;
}

.npick_legend_chevron {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: #6c757d;
    transition: transform 0.2s ease;
}

.npick_legend_chevron svg {
    width: 18px;
    height: 18px;
}

.npick_legend_details[open] .npick_legend_chevron {
    transform: rotate(180deg);
}

.npick_legend_body {
    padding: 0 var(--sp-m) var(--sp-s);
}

/*
 * Shared part of a reference group, stated once above its norm rows so that
 * "Allgemein, männlich" does not repeat on every line.
 */
.npick_legend_context {
    font-weight: 600;
    color: #2c3e50;
    padding: 2px 0;
}

/* Norm rows that sit under a context line are indented under it. */
.npick_legend_row_sub {
    padding-left: var(--sp-m);
}

.npick_legend_row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0;
}

.npick_legend_empty {
    color: #495057;
}

.npick_legend_key {
    font-weight: 600;
    color: #2c3e50;
    white-space: nowrap;
}

.npick_legend_text {
    padding-left: var(--sp-xs);
}

.npick_legend_sel {
    color: #495057;
}

.npick_legend_signs {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--sp-xs);
    padding-top: var(--sp-xs);
    border-top: 1px solid #e9ecef;
    font-size: var(--text-size-80);
    color: #6c757d;
}