/*
 * Sakslisten (/stortingsforslag, forslag.html).
 * Ett filterfelt øverst og én liste gruppert på dag. Farger og radier kommer
 * fra base.css; grønt og rødt betyr vedtatt og forkastet, som ellers på siden.
 */

.sl-skjult-tekst {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ── Toppen ───────────────────────────────────────────────────── */

.sl-perioder {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}
.sl-perioder a {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s;
}
.sl-perioder a:hover { background: rgba(255, 255, 255, 0.16); text-decoration: none; }
.sl-perioder a[aria-current="page"] {
    background: #fff;
    border-color: #fff;
    color: var(--primary);
    font-weight: 600;
}

/* ── Filterfeltet ─────────────────────────────────────────────── */

.sl-filter {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 18px 20px;
    margin-bottom: 14px;
    display: grid;
    /* minmax(0, …): ellers presser statusvalgene, som ikke brytes på mobil, siden ut. */
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}
.sl-filter-topp {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.sl-sok {
    position: relative;
    flex: 1 1 280px;
    min-width: 0;
}
.sl-sok svg {
    position: absolute;
    left: 13px;
    top: 50%;
    width: 17px;
    height: 17px;
    margin-top: -8.5px;
    color: var(--text-muted);
    pointer-events: none;
}
.sl-sok input,
.sl-velg {
    width: 100%;
    height: 42px;
    border: 1px solid #cbd5e1;
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--primary);
    font: inherit;
    font-size: 0.95rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.sl-sok input { padding: 0 14px 0 38px; }
.sl-sok input::placeholder { color: var(--text-muted); }
.sl-velg {
    flex: 0 1 230px;
    width: auto;
    min-width: 0;
    padding: 0 34px 0 12px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 18px;
    cursor: pointer;
}
.sl-sok input:focus,
.sl-velg:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.sl-visning {
    display: inline-flex;
    padding: 3px;
    border-radius: var(--radius-sm);
    background: #eef2f7;
    border: 1px solid var(--border);
    margin-left: auto;
}
.sl-visning a {
    padding: 0 14px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.sl-visning a:hover { color: var(--primary); text-decoration: none; }
.sl-visning a[aria-current="page"] {
    background: var(--surface);
    color: var(--primary);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.sl-filter-rad {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}
.sl-filter-navn {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.sl-valg {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.sl-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: var(--surface);
    color: var(--primary-muted);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.sl-chip small {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.sl-chip:hover { border-color: var(--accent); color: var(--accent); }
.sl-chip[aria-pressed="true"] {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.sl-chip[aria-pressed="true"] small { color: rgba(255, 255, 255, 0.75); }
.sl-chip:focus-visible,
.sl-parti:focus-visible,
.sl-knapp:focus-visible,
.sl-lenkeknapp:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.sl-parti {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.sl-parti img { width: 22px; height: 22px; object-fit: contain; }
.sl-parti:hover { border-color: var(--accent); }
.sl-parti[aria-pressed="true"] {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Når noe er valgt, trer de andre partiene tilbake. */
.sl-valg.har-valg .sl-parti[aria-pressed="false"] { opacity: 0.45; }
.sl-valg.har-valg .sl-parti[aria-pressed="false"]:hover { opacity: 1; }

/* ── Resultatlinjen ───────────────────────────────────────────── */

.sl-resultat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 32px;
    margin: 0 4px 8px;
    font-size: 0.9rem;
    color: var(--text-muted);
}
.sl-resultat strong { color: var(--primary); font-variant-numeric: tabular-nums; }
.sl-lenkeknapp {
    border: 0;
    background: none;
    padding: 4px 0;
    color: var(--accent);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}
.sl-lenkeknapp:hover { text-decoration: underline; }

/* ── Listen ───────────────────────────────────────────────────── */

.sl-liste {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    /* Dagsoverskriftene er sticky, så hjørnene må klippes uten overflow:hidden. */
    overflow: clip;
}
.sl-dag[hidden],
.sl-sak[hidden] { display: none; }

.sl-dag-tittel {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0;
    padding: 9px 22px;
    background: #f1f5f9;
    border-bottom: 1px solid var(--border);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--primary-muted);
}
.sl-dag + .sl-dag .sl-dag-tittel { border-top: 1px solid var(--border); }

.sl-saker {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sl-sak {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 18px;
    align-items: start;
    padding: 15px 22px;
    border-top: 1px solid var(--border);
    transition: background-color 0.12s;
}
.sl-sak:first-child { border-top: 0; }
.sl-sak:hover { background: #fafcff; }

.sl-sak-tittel {
    margin: 0 0 8px;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.sl-liste .sl-sak-tittel a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}
.sl-liste .sl-sak-tittel a:hover { color: var(--accent); text-decoration: underline; }

.sl-sak-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.sl-status,
.sl-liste .sl-komite,
.sl-liste .sl-tagg,
.sl-flere-tagger,
.sl-votering,
.sl-kommentarer {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
}
.sl-status { background: #f1f5f9; color: var(--primary-muted); border-color: #cbd5e1; }
.sl-status-vedtatt { background: var(--for-soft); color: var(--for-sterk); border-color: var(--for-linje); }
.sl-status-forkastet { background: var(--mot-soft); color: var(--mot-sterk); border-color: var(--mot-linje); }
.sl-status-delvis-vedtatt { background: var(--delt-soft); color: var(--delt); border-color: var(--delt-linje); }
.sl-status-venter-votering { background: var(--delt-soft); color: var(--delt); border-color: var(--delt-linje); }
.sl-status-til-behandling { background: var(--accent-soft); color: #1e40af; border-color: #bfdbfe; }
.sl-status-trukket { color: var(--text-muted); text-decoration: line-through; }

.sl-klokke { font-variant-numeric: tabular-nums; }

.sl-liste .sl-komite {
    padding: 0;
    height: auto;
    border-radius: 0;
    color: var(--primary-muted);
    font-size: 0.8rem;
    font-weight: 500;
    white-space: normal;
}
.sl-liste .sl-komite:hover { color: var(--accent); text-decoration: underline; }
.sl-prikk {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #94a3b8;
    flex-shrink: 0;
}

.sl-liste .sl-tagg {
    background: #f1f5f9;
    color: #475569;
    font-weight: 500;
}
.sl-liste .sl-tagg:hover { text-decoration: underline; }
.sl-liste .sl-tagg.tag-positiv { background: #dcfce7; color: #166534; }
.sl-liste .sl-tagg.tag-negativ { background: #fee2e2; color: #991b1b; }
.sl-tagg img { width: 15px; height: 15px; object-fit: contain; margin-left: -3px; }
.sl-tagger-ekstra { display: contents; }
.sl-tagger-ekstra[hidden] { display: none; }
.sl-flere-tagger {
    background: none;
    border-color: #cbd5e1;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
}
.sl-flere-tagger:hover { border-color: var(--accent); color: var(--accent); }

.sl-votering,
.sl-kommentarer {
    padding: 0;
    color: var(--text-muted);
    font-weight: 500;
}
/* Ikonene tegnes her og ikke i HTML-en: det sparer 250 tegn per rad. */
.sl-votering::before,
.sl-kommentarer::before {
    content: '';
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: var(--sl-ikon) center / contain no-repeat;
    mask: var(--sl-ikon) center / contain no-repeat;
}
.sl-votering {
    --sl-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E");
}
.sl-kommentarer {
    --sl-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E");
}

.sl-sak-partier {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
    max-width: 132px;
    padding-top: 1px;
}
.sl-sak-partier:empty { display: none; }
.sl-partilogo {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #dbe3ec;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.sl-partilogo img { width: 18px; height: 18px; object-fit: contain; }

/* ── Bunnen ───────────────────────────────────────────────────── */

.sl-tomt {
    margin: 0;
    padding: 44px 24px;
    text-align: center;
    color: var(--text-muted);
}
.sl-tomt[hidden] { display: none; }
.sl-tomt strong { display: block; margin-bottom: 6px; color: var(--primary); font-size: 1.05rem; }

.sl-bunn {
    display: flex;
    justify-content: center;
    padding: 20px 0 4px;
}
.sl-knapp {
    height: 44px;
    padding: 0 26px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: var(--surface);
    color: var(--primary);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.15s, color 0.15s;
}
.sl-knapp:hover { border-color: var(--accent); color: var(--accent); }
.sl-knapp[hidden] { display: none; }

/* ── Mobil ────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .sl-filter { padding: 14px; gap: 12px; }
    .sl-sok { flex-basis: 100%; }
    .sl-velg { flex: 1 1 100%; }
    .sl-visning { margin-left: 0; width: 100%; }
    .sl-visning a { flex: 1; justify-content: center; }
    .sl-filter-rad { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    /* Valgene ruller sidelengs i stedet for å ta flere linjer. */
    .sl-valg {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 0 -14px;
        padding: 4px 14px 6px;
        scrollbar-width: none;
    }
    .sl-valg::-webkit-scrollbar { display: none; }
    .sl-parti { flex-shrink: 0; }
    .sl-dag-tittel { padding: 8px 14px; }
    .sl-sak { padding: 13px 14px; gap: 6px 10px; }
    .sl-sak-tittel { font-size: 0.98rem; }
    .sl-sak-partier { max-width: 64px; }
    .sl-partilogo { width: 26px; height: 26px; }
    .sl-partilogo img { width: 16px; height: 16px; }
}