:root {
    --green: #0F6E56;
    --green-dark: #0B5442;
    --green-tint: #EAF4F1;

    --page: #F6F7F6;
    --surface: #FFFFFF;
    --line: #E6E8E6;
    --line-soft: #F0F1F0;

    --ink: #16211D;
    --ink-2: #47534E;
    --muted: #7A857F;

    --danger: #B3261E;
    --danger-tint: #FDECEA;
    --warn: #8A5A00;
    --warn-tint: #FBF3E0;

    --radius: 10px;
    --radius-sm: 7px;
    --sidebar: 248px;

    --shadow: 0 1px 2px rgba(22, 33, 29, .05), 0 1px 3px rgba(22, 33, 29, .04);
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    background: var(--page);
    color: var(--ink);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

.shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar);
    flex: 0 0 var(--sidebar);
    background: var(--surface);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px 20px 24px;
    font-size: 24px;
    font-weight: 650;
    letter-spacing: -.01em;
    text-decoration: none;
}

/* Høyden settes, bredden følger. Merket er dobbelt så høyt som bredt, så en
   kvadratisk boks ville enten klemt treet flatt eller latt det svinne inn i
   midten av all lufta rundt. */
.brand .mark {
    height: 46px;
    width: auto;
    flex: none;
}

.nav {
    padding: 0 12px;
    overflow-y: auto;
    flex: 1;
}

.nav-group {
    margin-bottom: 22px;
}

.nav-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0 10px;
    margin-bottom: 6px;
}

.nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 2px;
    border-radius: var(--radius-sm);
    color: var(--ink-2);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.nav a:hover, .nav a.is-active {
    background: var(--green-tint);
    color: var(--green);
}

/* Sida du står på blir stående tent. Uthevingen er det som skiller den fra
   det du bare holder pekeren over — ellers ser to punkter like ut samtidig,
   og «hvor er jeg» får to svar. */
.nav a.is-active {
    font-weight: 600;
}

/* Stripa ligger i venstrekanten av selve pilla. Den arver pillas runding på
   venstre side og er rett på høyre, så den leses som en del av flaten og ikke
   som en strek ved siden av. */
.nav a:hover::before, .nav a.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    background: var(--green);
}

.nav a:hover .ico, .nav a.is-active .ico {
    opacity: 1;
}

.sidebar-foot {
    padding: 14px 20px 18px;
    border-top: 1px solid var(--line-soft);
}

.main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 28px;
    position: sticky;
    top: 0;
    z-index: 5;
}

/* Tittel og brukerblokk på samme rad. Stripen var før nesten tom, mens
   overskriften lå nede i innholdet og konkurrerte med sidens egne
   mellomtitler. */
.page-head {
    min-width: 0;
}

.page-head h1 {
    font-size: 26px;
    font-weight: 680;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin: 0;
}

.page-head .sub {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--muted);
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
}

.who {
    display: flex;
    align-items: center;
    gap: 10px;
}

.who .avatar {
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 50%;
    background: var(--green-tint);
    color: var(--green);
    display: grid;
    place-items: center;
    font-size: 13.5px;
    font-weight: 650;
    letter-spacing: .02em;
    line-height: 1;
}

/* Navn over tittel. Egen kolonne i stedet for <br>, så linja under kan
   utebli — på min side har brukeren ingen tittel. */
.who .who-lines {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.who .who-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

.who .who-role {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.2;
}

.logout {
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}

.logout:hover {
    background: var(--line-soft);
    color: var(--ink);
}

.content {
    padding: 26px 24px 48px;
    max-width: 1180px;
    width: 100%;
}

h2 {
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -.005em;
    margin: 30px 0 12px;
}

.lede {
    color: var(--muted);
    margin: 0 0 16px;
}

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

th, td {
    text-align: left;
    padding: 16px 18px;
}

th {
    background: #FAFBFA;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

td {
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
}

tbody tr:last-child td {
    border-bottom: none;
}

tbody tr {
    position: relative;
}

tbody tr:hover {
    background: #FBFCFB;
}

/* Hele raden klikkbar. Selve navigasjonen ligger i row-links.js — et
   CSS-overlegg ville dekket knappene som står inne i flere av radene. */
tr:has(.row-link) {
    cursor: pointer;
}

td a {
    color: var(--green);
    text-decoration: none;
    font-weight: 550;
}

td a:hover {
    text-decoration: underline;
}

.badge {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .01em;
    padding: 3px 9px;
    border-radius: 999px;
    background: #F1F3F1;
    color: var(--ink-2);
    white-space: nowrap;
}

.badge.active {
    background: var(--green-tint);
    color: var(--green);
}

.badge.inactive {
    background: #F1F3F1;
    color: var(--muted);
}

.badge.warn {
    background: var(--warn-tint);
    color: var(--warn);
}

.btn, .btn-danger, .btn-quiet {
    display: inline-block;
    padding: 7px 13px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 560;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.btn {
    background: var(--green);
    color: #fff;
}

.btn:hover {
    background: var(--green-dark);
}

.btn-danger {
    background: var(--danger);
    color: #fff;
}

.btn-danger:hover {
    filter: brightness(.92);
}

.btn-quiet {
    background: var(--surface);
    color: var(--ink-2);
    border: 1px solid var(--line);
}

.btn-quiet:hover {
    background: var(--line-soft);
    color: var(--ink);
}

.btn-quiet.is-off, .btn-quiet.is-off:hover {
    background: var(--surface);
    color: var(--muted);
    opacity: .55;
    cursor: default;
}

.pager {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
}

.pager-count {
    font-size: 13px;
    color: var(--muted);
}

td form {
    display: inline;
}

td .btn, td .btn-danger, td form {
    margin-right: 4px;
}

.cancel {
    margin-left: 12px;
    color: var(--muted);
    font-size: 13px;
    text-decoration: none;
}

.cancel:hover {
    text-decoration: underline;
}

.back {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 13px;
    text-decoration: none;
}

.back:hover {
    color: var(--ink);
}

.card-form {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px 24px 24px;
    max-width: 520px;
}

.card-form label {
    display: block;
    font-size: 12.5px;
    font-weight: 550;
    color: var(--ink-2);
    margin: 16px 0 5px;
}

.card-form label:first-of-type {
    margin-top: 0;
}

.card-form input, .card-form select {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid #D5D9D7;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    color: var(--ink);
    background: var(--surface);
}

.card-form input:focus, .card-form select:focus,
.searchbar input:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(15, 110, 86, .12);
}

.card-form button {
    margin-top: 20px;
}

.searchbar {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
}

.searchbar input {
    padding: 8px 12px;
    border: 1px solid #D5D9D7;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    min-width: 280px;
    background: var(--surface);
}

/* Handlingsrad over en liste: primærknapp til venstre, søk til høyre.
   Eget kort, slik at knappen ikke ser ut til å høre til tabellen under. */
.toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px 18px;
}

.toolbar .searchbar {
    margin-bottom: 0;
    flex: 1;
    min-width: 260px;
}

.toolbar .searchbar input {
    flex: 1;
    min-width: 0;
    padding: 11px 12px 11px 38px;
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A857F' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 13px center;
    background-size: 16px 16px;
}

/* Større enn .btn, som brukes tett inne i tabellrader. */
.btn-lg {
    padding: 12px 20px;
    font-size: 14px;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-icon svg {
    width: 16px;
    height: 16px;
}

.toolbar .spacer {
    flex: 1;
}

/* Handlingene på en post: primærhandlingen til venstre i verktøylinja, alt som
   endrer tilstand eller sletter samlet til høyre. Tettere enn verktøylinjas
   egen gap, så de leses som én gruppe og ikke som løse knapper. */
.toolbar-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.toolbar-actions form {
    display: contents;
}

.detail-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px 24px;
    margin-bottom: 26px;
}

.detail-card dl {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 10px 20px;
    margin: 0;
}

.detail-card dt {
    color: var(--muted);
    font-size: 13px;
}

.detail-card dd {
    margin: 0;
    font-size: 14px;
}

.ok, .err {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    margin-bottom: 16px;
}

.ok {
    background: var(--green-tint);
    color: var(--green);
}

.err {
    background: var(--danger-tint);
    color: var(--danger);
}

.card-form .err {
    padding: 0;
    background: none;
    margin: 5px 0 0;
    font-size: 12.5px;
}

.empty {
    padding: 40px 24px;
    text-align: center;
    color: var(--muted);
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    font-size: 14px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 8px;
}

.stat {
    display: block;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px 18px 14px;
    text-decoration: none;
    color: inherit;
}

.stat:hover {
    border-color: #D3D8D5;
}

.stat-label {
    font-size: 12.5px;
    color: var(--muted);
    font-weight: 550;
}

.stat-value {
    font-size: 30px;
    font-weight: 650;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin: 4px 0 2px;
}

.stat-note {
    font-size: 12px;
    color: var(--muted);
}

.stat.is-warn .stat-value {
    color: var(--warn);
}

.nav a .ico {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    opacity: .75;
}

.support-icon {
    width: 12px;
    height: 12px;
    flex: 0 0 18px;
    opacity: .75;
}

.checklist {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    font-size: 14px;
    color: var(--ink);
    font-weight: 400;
}

.check input {
    width: auto;
}

ul.plain {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
}

ul.plain li {
    padding: 8px 0;
    border-bottom: 1px solid var(--line-soft);
}

body.centered {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}

.card-form.standalone {
    width: 100%;
    max-width: 380px;
}

/* Innloggingsbredden er satt for et skjema med to felt. Løpende tekst brekker
   stygt i den. */
.card-form.standalone.wide {
    max-width: 560px;
}

.fine {
    margin-top: 16px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--muted);
}

.fine-link {
    display: inline-block;
    margin-top: 6px;
    font-size: 11px;
    color: var(--muted);
    text-decoration: underline;
}

.fine-link:hover {
    color: var(--green);
}

.card-form.standalone .mark {
    height: 48px;
    width: auto;
    margin-bottom: 14px;
}

.card-form.standalone h1 {
    font-size: 19px;
    margin: 0 0 6px;
}

/* Innloggingssida har merkenavnet som overskrift, ikke en setning. Det er
   logoens tekst og skal stå deretter — på linje med merket, som i sidemenyen.
   Invitasjonssidene beholder logoen over overskriften: der er overskriften en
   hel setning og hører ikke sammen med merket på samme måte. */
.card-form.standalone .brand-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

/* Større enn på invitasjonssidene. Der er merket en avsender øverst på en
   beskjed; her er det det eneste som står på sida ved siden av skjemaet. */
.card-form.standalone .brand-row .mark {
    height: 72px;
    margin-bottom: 0;
}

.card-form.standalone h1.brand-name {
    font-size: 36px;
    letter-spacing: -.015em;
    margin: 0;
}

/* Beskjed til hele skjemaet, ikke til ett felt. «.card-form .err» flater ut
   feilmeldinger fordi de der hører til feltet rett over — denne hører til
   innlogginga som helhet og skal se ut som en beskjed. */
.card-form .notice {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    margin: 0 0 16px;
    background: var(--danger-tint);
    color: var(--danger);
}

.card-form .notice.is-ok {
    background: var(--green-tint);
    color: var(--green);
}

.card-form.standalone .lede {
    margin: 0 0 18px;
    font-size: 13.5px;
}

.tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--line);
}

.tabs a {
    padding: 8px 14px;
    text-decoration: none;
    color: var(--muted);
    font-size: 14px;
    font-weight: 550;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.tabs a:hover {
    color: var(--ink);
}

.tabs a.is-active {
    color: var(--green);
    border-bottom-color: var(--green);
}

.inline-edit {
    display: flex;
    gap: 6px;
    align-items: center;
}

.inline-edit input {
    padding: 5px 9px;
    border: 1px solid #D5D9D7;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: inherit;
    width: 140px;
}

@media (max-width: 860px) {
    .shell {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        flex: none;
        height: auto;
        position: static;
        border-right: none;
        border-bottom: 1px solid var(--line);
    }

    .nav {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        padding: 0 12px 12px;
    }

    .nav-group {
        margin-bottom: 0;
        display: contents;
    }

    .nav-label {
        display: none;
    }

    .content {
        padding: 20px 16px 40px;
    }

    .detail-card dl {
        grid-template-columns: 1fr;
        gap: 2px 0;
    }

    .detail-card dd {
        margin-bottom: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}
/* Statuspillene får en prikk. Skiller dem fra .badge uten variant, som
   aktivitetsloggen bruker til handlingsnavn og ikke er en tilstand. */
.badge.active::before,
.badge.inactive::before,
.badge.warn::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background: currentColor;
    vertical-align: middle;
}

/* Pil ytterst i raden, til detaljsiden. Smal kolonne, høyrestilt. */
.row-arrow {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

.row-arrow span {
    display: inline-flex;
    color: var(--muted);
}

tr:hover .row-arrow span {
    color: var(--green);
}

.row-arrow svg {
    width: 18px;
    height: 18px;
}

.table-foot {
    margin-top: 14px;
    text-align: center;
    font-size: 13px;
    color: var(--muted);
}

/* Klikkbar kolonneoverskrift. Lenka fyller hele cella, så treffflaten er
   overskriften slik den ser ut — ikke bare bokstavene. */
th a.sort {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-decoration: none;
    white-space: nowrap;
}

th a.sort:hover {
    color: var(--ink);
}

/* Pila er der hele tiden, men usynlig til kolonnen er den aktive — ellers
   hopper overskriftene sidelengs når man bytter sortering. */
.sort-arrow {
    width: 12px;
    height: 12px;
    opacity: 0;
    transition: opacity .12s ease;
}

th.is-sorted a.sort {
    color: var(--green);
}

th.is-sorted .sort-arrow,
th a.sort:hover .sort-arrow {
    opacity: 1;
}

th a.sort:hover .sort-arrow {
    opacity: .45;
}

th.is-sorted a.sort .sort-arrow {
    opacity: 1;
}

/* Rullgardin under et felt som slår opp mens du skriver. Wrapperen legges
   rundt feltet av skriptet, så markeringen kan ligge absolutt uten at
   skjemaets øvrige felter flytter seg når lista åpner. */
.typeahead-wrap {
    position: relative;
}

/* Nedtrekket pakker feltet i en egen div. I søkelinja er det feltet som skal
   strekke seg, så flex-en må flytte med til pakka — ellers krymper søkefeltet
   til innholdet sitt idet lista kobles på. */
.searchbar .typeahead-wrap {
    flex: 1;
    min-width: 0;
}

.searchbar .typeahead-wrap input {
    width: 100%;
}

.typeahead {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 4px;
    list-style: none;
    max-height: 288px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(20, 32, 24, .12);
}

.typeahead li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.typeahead li strong {
    font-size: 14px;
    font-weight: 550;
    color: var(--ink);
}

.typeahead li span {
    font-size: 12.5px;
    color: var(--muted);
}

.typeahead li.is-active {
    background: var(--green-tint);
}

.typeahead li.is-active strong {
    color: var(--green);
}

/* ---- Min ringeklokke ------------------------------------------------- */

/* Enheten øverst: fakta til venstre, produktbildet til høyre. Bildet er der
   for gjenkjennelse — beboeren skal se at det er den samme dingsen som henger
   på veggen. */
.device-card {
    display: flex;
    align-items: center;
    gap: 28px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px 24px;
    margin-bottom: 8px;
}

.device-facts {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 16px;
    margin: 0;
}

.fact {
    display: flex;
    align-items: center;
    gap: 16px;
}

.fact dt {
    flex: none;
    width: 140px;
    color: var(--ink-2);
}

.fact dd {
    margin: 0;
    min-width: 0;
    /* Enhets-id-en er lang og har ingen mellomrom å brekke på. */
    overflow-wrap: anywhere;
}

.device-photo {
    flex: none;
    width: 104px;
    height: auto;
}

/* Rund ikonbrikke. Samme brikke foran et faktum og foran en rad, så de to
   listene under kortet leses som en fortsettelse av det. */
.fact-icon, .rowcard-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--green-tint);
    color: var(--green);
}

.fact-icon svg, .rowcard-icon svg {
    width: 18px;
    height: 18px;
}

/* Prikk foran en tilstand som står som ren tekst. .badge har sin egen — denne
   er for linja i kortet, der en pille ville ropt høyere enn verdien ved siden. */
.dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 9px;
    border-radius: 50%;
    background: var(--muted);
    vertical-align: middle;
}

.dot.is-on {
    background: var(--green);
}

/* Liste av kort i stedet for tabell. En tabell trenger kolonneoverskrifter for
   å gi mening, og her er det to felter per rad — navnet og hva det er. */
.rowcards {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.rowcard {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 15px 18px;
    text-decoration: none;
    color: inherit;
}

a.rowcard:hover {
    border-color: #D5D9D7;
    background: #FCFDFC;
}

.rowcard-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.rowcard-name {
    font-weight: 620;
    font-size: 14.5px;
    letter-spacing: -.005em;
}

.rowcard-sub {
    color: var(--muted);
}

.rowcard-meta {
    color: var(--muted);
    white-space: nowrap;
}

.rowcard-arrow {
    display: inline-flex;
    color: var(--muted);
}

.rowcard-arrow svg {
    width: 18px;
    height: 18px;
}

a.rowcard:hover .rowcard-arrow {
    color: var(--green);
}

/* Handlingen på en rad som ikke er en lenke — «Godkjenn» i lista over
   bedrifter du kan legge til. Skjemaet er bare en bærer for knappen, og
   nettleserens egen marg på <form> ville skjøvet raden skjev. */
.rowcard form {
    margin: 0;
}

/* «+ Legg til …» hører til lista over, ikke til overskriften under. */
.add-more {
    margin-bottom: 6px;
}

@media (max-width: 860px) {
    .device-card {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 18px;
    }

    .fact dt {
        width: 110px;
    }

    .rowcard-meta {
        display: none;
    }
}