*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scrollbar-gutter: stable;
}

[x-cloak] {
    display: none !important;
}

body {
    font-family: var(--ds-font-family), 'Inter', sans-serif;
    font-feature-settings: 'cv05' 1;
    background: var(--ds-color-neutral-background-tinted);
    color: var(--ds-color-neutral-text-default);
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Lik container-bredde for header, content og footer – som i index.html / bevisporten */
.page-container {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: var(--ds-size-6);
}

@media (width < 900px) {
    .page-container {
        padding-inline: var(--ds-size-4);
    }
}

/* Header – sticky 75px som i index.html: gap var(--ds-size-8), li margin-left var(--ds-size-7), logo var(--ds-size-10) */
header {
    position: sticky;
    top: 0;
    z-index: 10;
    height: 75px;
    background-color: var(--ds-color-neutral-background-default);
    border-block-end: var(--ds-border-width-default) solid var(--ds-color-neutral-border-subtle);
    display: flex;
    align-items: center;
}

.header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-size-8);
    width: 100%;
    height: 100%;
}

.header__brand {
    display: flex;
    align-items: center;
    align-self: center;
    gap: var(--ds-size-3);
    color: var(--ds-color-neutral-text-default);
    text-decoration: none;
    font-weight: var(--ds-font-weight-medium);
}

.header__brand svg {
    display: block;
    width: var(--ds-size-7);
    height: var(--ds-size-7);
}

.header__brand span {
    line-height: 1;
    display: flex;
    align-items: center;
}

.header__nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-size-2);
    color: var(--ds-color-neutral-text-default);
    cursor: pointer;
}

.header__nav-toggle svg {
    display: block;
}

@media (max-width: 359px) {
    .header__nav-toggle-label {
        display: none;
    }
}

.header__nav {
    display: none;
    flex-direction: column;
    gap: var(--ds-size-3);
    width: 100%;
}

.header__nav--open {
    display: flex;
}

.header__nav-link {
    /* Referanse: svarte lenker, enkel hover med border-bottom 3px – ikke ds-link underline */
    --dsc-link-color: var(--ds-color-neutral-text-default);
    --dsc-link-color--hover: var(--ds-color-neutral-text-default);
    --dsc-link-color--visited: var(--ds-color-neutral-text-default);
    --dsc-link-color--active: var(--ds-color-neutral-text-default);
    --dsc-link-background--active: transparent;
    --dsc-link-background--focus: transparent;
    --dsc-link-color--focus: var(--ds-color-neutral-text-default);
    color: var(--ds-color-neutral-text-default);
    text-decoration: none !important;
    text-decoration-line: none !important;
    padding-bottom: var(--ds-size-2);
    border-bottom: 3px solid transparent;
    transition: border-color 0.1s ease-out;
    font-weight: var(--ds-font-weight-regular);
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.header__nav-link:visited {
    color: var(--ds-color-neutral-text-default);
}

.header__nav-link:hover,
.header__nav-link:focus-visible {
    color: var(--ds-color-neutral-text-default);
    background: transparent;
    border-color: var(--ds-color-neutral-border-subtle);
    text-decoration: none;
}

.header__nav-link:focus-visible {
    box-shadow: var(--dsc-focus-boxShadow);
    outline: var(--dsc-focus-outline);
    outline-offset: var(--ds-border-width-focus);
}

.header__nav-link[aria-current="page"] {
    border-color: var(--ds-color-neutral-border-strong);
    font-weight: var(--ds-font-weight-medium);
}

@media (max-width: 767px) {
    header {
        height: auto;
        min-height: 75px;
        padding-block: var(--ds-size-3);
        align-items: center;
    }

    .header__inner {
        height: auto;
        gap: var(--ds-size-3);
    }

    .header__brand {
        flex: 1 1 0;
        min-width: 0;
    }

    .header__brand span:last-child {
        flex: 1;
        min-width: 0;
        overflow-wrap: anywhere;
        hyphens: auto;
        line-height: 1.2;
    }

    .header__nav-toggle {
        flex: 0 0 auto;
        margin-left: auto;
        align-self: center;
    }

    .header__nav {
        flex-basis: 100%;
        width: 100%;
        gap: var(--ds-size-2);
        padding-block-start: var(--ds-size-3);
        border-block-start: var(--ds-border-width-default) solid var(--ds-color-neutral-border-subtle);
        margin-left: auto;
    }

    .header__nav-link {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: var(--ds-size-12);
        padding-block: var(--ds-size-2);
        font-size: var(--ds-body-lg-font-size);
    }
}

@media (min-width: 768px) {
    .header__nav-toggle {
        display: none;
    }

    .header__nav {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: auto;
        gap: var(--ds-size-7);
    }
}

/* Hovudinnhald – same max-bredde som header/footer, spacing som i index.html section */
main {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-block: var(--ds-size-10);
    padding-inline: var(--ds-size-6);
    display: flex;
    flex-direction: column;
    gap: var(--ds-size-8);
}

.page-intro {
    display:flex;
    flex-direction:column;
    gap:var(--ds-size-2);
    max-width:720px;
}

main > * {
    width: 100%;
}

@media (min-width: 768px) {
    main {
        padding-block: var(--ds-size-12);
        gap: var(--ds-size-10);
    }
}

@media (width < 900px) {
    main {
        padding-inline: var(--ds-size-4);
    }
}

/* Kort-container – gap var(--ds-size-8) som composite__grid i referansen */
.flex-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    gap: var(--ds-size-8);
}

.ds-card:where(a, button, [role="button"]) {
    --dsc-card-border-color: #000000;
}
.ds-card:where(a, button, [role="button"]):hover {
    border-color: #000000;
    box-shadow: 0 0 0 1px #000000;
}
.ds-card:where(a, button, [role="button"]):active {
    border-color: #000000;
    box-shadow: 0 0 0 1px #000000;
    background: var(--dsc-card-background--active);
}

@media (min-width: 640px) {
    main .flex-container {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* Skjema-grupper */
.form-container {
    display: flex;
    flex-direction: column;
    gap: var(--ds-size-4);
}

.form-container .button-group {
    display: flex;
    gap: var(--ds-size-4);
    flex-wrap: wrap;
}

.form-container .button-group > * {
    width: fit-content;
}

main > h1 + *,
main > nav + h1 {
    margin-block-start: var(--ds-size-2);
}

.table-wrapper {
    overflow-x: auto;
    border: var(--ds-border-width-default) solid var(--ds-color-neutral-border-subtle);
    border-radius: var(--ds-border-radius-md);
    background: var(--ds-color-neutral-surface-default);
}

/* Designsystemet: ds-table har transparent bakgrunn som default – på tinted body blir den grå.
   Sett eksplisitt hvit bakgrunn per docs (surface-default) så tabell skiller seg fra sidens tinted bakgrunn.
   Wrapper tar ytre ramme (hel rundt), tabellens ytre border fjernes for å unngå dobbel/klippet border ved scroll.
   Øk celle-luft fra default var(--ds-size-2) var(--ds-size-3) til 3/4 for romsligere lesing – alle tabeller i appen. */
.ds-table {
    --dsc-table-background: var(--ds-color-neutral-surface-default);
    --dsc-table-header-background: var(--ds-color-neutral-surface-default);
    --dsc-table-padding: var(--ds-size-3) var(--ds-size-4);
}

/* Header-rad fortsatt trang – gi lik men luftigere padding rundt skrift (forrige 2/3 var kneftet) */
.ds-table > thead > tr > :is(th, td),
.ds-table > * > tr > th[scope="col"] {
    padding: var(--ds-size-4) var(--ds-size-4) !important;
}

.table-wrapper > .ds-table[data-border] {
    border: 0;
    --dsc-table-border-width: 0;
}

/* Tab-fokus i tabell: ds-link får mørk bakgrunn (focus-outer) – sikrer kvit tekst og luft så den ikke drukner i kvit tabell */
.ds-table a.ds-link:focus-visible {
    background: var(--ds-color-focus-outer) !important;
    color: var(--ds-color-focus-inner) !important;
    text-decoration: none;
    border-radius: var(--ds-border-radius-sm);
    outline: none;
}

/* Accordion/detaljer: DS har padding var(--ds-size-5) (~20px) – opplevdes kneftet etter fjerning av dobbel wrapper.
   Øk til var(--ds-size-6) for luftig topp/bunn i tråd med composite-eksempelet, behold gap innad. */
.ds-details > :not(summary, u-summary) {
    padding: var(--ds-size-6) !important;
}

/* Footer – mørk øy data-color-scheme="dark" som i index.html:1573, gap var(--ds-size-8) */
footer {
    width: 100%;
    margin-top: auto;
}

footer[data-color-scheme="dark"] {
    background-color: var(--ds-color-neutral-background-default);
    color: var(--ds-color-neutral-text-default);
}

.footer__inner {
    display: grid;
    gap: var(--ds-size-8);
    grid-template-columns: 1fr;
    padding-block: var(--ds-size-10);
}

.footer__inner > div {
    min-width: 16rem;
}

@media (min-width: 768px) {
    .footer__inner {
        grid-template-columns: 1.2fr 1fr 1fr;
        justify-content: space-between;
        padding-block: var(--ds-size-10);
    }

    .footer__inner > div {
        max-width: none;
    }
}

.footer__link {
    --dsc-link-color--visited: var(--dsc-link-color);
    margin-block-end: var(--ds-size-4);
    display: flex;
    align-items: center;
    gap: var(--ds-size-2);
    width: fit-content;
    border-block-end: var(--ds-border-width-default) solid transparent;
    text-decoration: none;
}

.footer__link::before {
    content: "";
    width: 0.4em;
    height: 0.4em;
    flex: 0 0 auto;
    border-inline-end: var(--ds-border-width-default) solid currentColor;
    border-block-end: var(--ds-border-width-default) solid currentColor;
    rotate: -45deg;
}

.footer__link:hover {
    border-block-end-color: currentColor;
}

footer h2 {
    margin-block-end: var(--ds-size-5);
}

footer ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

@media (width < 900px) {
    main {
        padding-block: var(--ds-size-6);
        gap: var(--ds-size-6);
    }
}

/* Skip-link – støtt både ds-skip-link (hyphen, v1.22 / skill) og ds-skiplink (vendored v1.0.8 / index.css) – ingen JS nødvendig, kun CSS + tabindex på main */
.ds-skip-link,
.ds-skiplink {
    --dsc-skiplink-padding: var(--ds-size-4) var(--ds-size-4) var(--ds-size-5) var(--ds-size-4);
    --dsc-skiplink-background: var(--ds-color-surface-hover);
    --dsc-skiplink-color: var(--ds-color-text-default);
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.ds-skip-link:focus,
.ds-skiplink:focus {
    height: auto;
    margin: inherit;
    outline: 0;
    overflow: visible;
    place-items: center;
    position: static;
    width: auto;
    clip: auto;
    background: var(--dsc-skiplink-background);
    box-sizing: border-box;
    clip-path: none;
    color: var(--dsc-skiplink-color);
    padding: var(--dsc-skiplink-padding);
    text-decoration: underline;
    text-decoration-thickness: max(1px, .0625rem);
    text-underline-offset: max(5px, .25rem);
    white-space: inherit;
    z-index: 999;
}

.ds-skip-link:focus:not([hidden]),
.ds-skiplink:focus:not([hidden]) {
    display: grid;
}

/* Sørg for at sticky header (75px) ikke dekker hoppet mål – uten JS, ren CSS */
main[id] {
    scroll-margin-block-start: 84px;
}

main:focus {
    outline: none;
}

main:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--dsc-focus-boxShadow);
}

.index-search {
    max-width: 720px;
}

.index-search__box {
    align-items: center;
    background: var(--ds-color-neutral-surface-default);
    border: var(--ds-border-width-default) solid var(--ds-color-neutral-border-subtle);
    border-radius: var(--ds-border-radius-default);
    display: flex;
    gap: var(--ds-size-2);
    padding: var(--ds-size-1);
    transition: border-color 0.1s ease-out;
}

.index-search__box:focus-within {
    border-color: var(--ds-color-neutral-border-strong);
    box-shadow: var(--dsc-focus-boxShadow);
}

.index-search__icon {
    color: var(--ds-color-neutral-text-subtle);
    flex: 0 0 auto;
    margin-inline-start: var(--ds-size-2);
}

.index-search__input {
    border: 0;
    box-shadow: none;
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--ds-size-2) 0;
}

.index-search__input:focus-visible {
    outline: none;
}

/* Skjul nettlesaren sin eigen tøm-knapp på type="search" – vi har eigen
   .index-search__clear, så to kryss skal ikkje visast samtidig. */
.index-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.index-card__top {
    align-items: center;
    display: flex;
    gap: var(--ds-size-3);
    justify-content: space-between;
}

.index-card__chevron {
    color: var(--ds-color-neutral-text-subtle);
    flex: 0 0 auto;
}

.index-card__link {
    font-weight: var(--ds-font-weight-medium);
}

.index-card:is(a) :is(h1, h2, h3, h4, h5, h6) {
    text-decoration: none;
}

/* Kortet skal ha ein myk, nøytral kant i staden for den svarte standardkanten.
   Gjeld både ytterkanten og skiljet mellom innhald og bunnlenke. */
.index-card {
    --dsc-card-block-border-color: var(--ds-color-neutral-border-subtle);
    border-color: var(--ds-color-neutral-border-subtle);
}

.index-search__heading {
    align-items: center;
    display: flex;
    gap: var(--ds-size-3);
}

.index-search__clear {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--ds-border-radius-full);
    box-shadow: none;
    color: var(--ds-color-neutral-text-subtle);
    cursor: pointer;
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    padding: var(--ds-size-1);
    transition: background-color 0.1s ease-out, color 0.1s ease-out;
}

.index-search__clear:hover {
    background: var(--ds-color-neutral-background-tinted);
    color: var(--ds-color-neutral-text-default);
}

.index-search__clear:focus-visible {
    outline: none;
    box-shadow: var(--dsc-focus-boxShadow);
}

.index-search__results {
    list-style: none;
    padding-inline: 0;
}

.index-card__body {
    align-items: center;
    display: flex;
    gap: var(--ds-size-3);
    justify-content: space-between;
}

.index-card__text {
    display: flex;
    flex-direction: column;
    gap: var(--ds-size-1);
    min-width: 0;
}

.index-card__title {
    font-weight: var(--ds-font-weight-medium);
}

.index-card__title-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-size-2);
}

.index-card__subtitle {
    color: var(--ds-color-neutral-text-subtle);
}

.lookup-page__lead {
    color: var(--ds-color-neutral-text-subtle);
}

.lookup-table--full-width {
    width: 100%;
}

.lookup-details,
.credential-details {
    max-width: 720px;
}

.lookup-details__summary,
.credential-details__summary {
    margin-block-end: var(--ds-size-8);
}

.lookup-details__sections,
.lookup-stack,
.credentials-catalogue,
.lookup-search-form {
    display: flex;
    flex-direction: column;
}

.lookup-details__sections,
.credentials-catalogue {
    gap: var(--ds-size-6);
}

.lookup-stack {
    gap: var(--ds-size-4);
}

.lookup-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-size-3);
}

.lookup-details__credential-link,
.credentials-catalogue__credential-link {
    font-weight: var(--ds-font-weight-medium);
}

.lookup-details__namespace {
    display: block;
    color: var(--ds-color-neutral-text-subtle);
}

.credentials-catalogue__filter {
    max-width: 32rem;
}

.credentials-catalogue__controls,
.lookup-search-form__controls {
    display: flex;
    align-items: center;
    gap: var(--ds-size-3);
}

.credentials-catalogue__search,
.lookup-search-form__search {
    flex: 1;
}

.lookup-search-form {
    gap: var(--ds-size-4);
}

.lookup-search-form__error {
    margin: 0;
}

.filter-dialog__description {
    margin-block-start: var(--ds-size-1);
}

.filter-dialog__synthetic {
    margin-block-start: var(--ds-size-4);
}

.filter-dialog__roles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-size-3);
    margin-block-start: var(--ds-size-3);
}

.filter-dialog__actions,
.filter-dialog__buttons {
    display: flex;
    gap: var(--ds-size-3);
}

.filter-dialog__actions {
    align-items: center;
}

.filter-dialog__buttons {
    margin-inline-start: auto;
}

.lookup-results__empty {
    margin-block-start: var(--ds-size-4);
}

.lookup-results__count {
    color: var(--ds-color-neutral-text-subtle);
    margin-block-end: var(--ds-size-4);
}

.lookup-results__list {
    margin: 0;
    padding-inline-start: var(--ds-size-4);
    font-size: var(--ds-font-size-minus-1);
}

.lookup-clickable-row {
    cursor: pointer;
}

.lookup-clickable-row:focus-visible {
    outline: var(--dsc-focus-outline);
    outline-offset: calc(-1 * var(--ds-border-width-focus));
}

.lookup-results__filtered {
    display: flex;
    align-items: center;
    gap: var(--ds-size-3);
    flex-wrap: nowrap;
    margin-block-start: var(--ds-size-6);
}

.lookup-results__filtered-text {
    flex: 1 1 auto;
    margin: 0;
}

.lookup-pagination {
    margin-block-start: var(--ds-size-12);
}

.lookup-pagination__list {
    justify-content: center;
}

.global-search__section {
    display: flex;
    flex-direction: column;
    gap: var(--ds-size-3);
}

.global-search__results {
    display: flex;
    flex-direction: column;
    gap: var(--ds-size-2);
}

@media (max-width: 480px) {
    .lookup-search-form__controls,
    .credentials-catalogue__controls {
        flex-wrap: wrap;
    }

    .lookup-search-form__search,
    .credentials-catalogue__search {
        flex-basis: 100%;
    }
}