/* ============================================================================
 * Medlemsområdet (medlemsskallet) — håndskrevet CSS.
 *
 * Lastes KUN i member-header.php, etter Bootstrap og commonviews/style.css.
 * Alt er prefikset .ms- og scopet under body.member-shell, så ingenting her
 * lekker inn på hjemmesiden. Designtokens fra designhandoff (README.md).
 *
 * Fonter og ikoner er selvhostet (assets/fonts, assets/material-symbols) —
 * ingen kall til Google.
 * ========================================================================== */

/* ---------- Fonter ---------- */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../assets/fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../assets/fonts/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../assets/fonts/onest-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../assets/fonts/onest-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 300 600;
  font-display: block;
  src: url('../assets/material-symbols/MaterialSymbolsRounded-subset.woff2') format('woff2');
}

/* ---------- Tokens ---------- */
body.member-shell {
  --ms-bg: #F6F4EF;
  --ms-canvas: #E4E0D8;
  --ms-card: #FFFFFF;
  --ms-line: #E7E3DA;
  --ms-divider: #F0EDE6;
  --ms-ink: #14233A;
  --ms-muted: #5B6576;
  --ms-body: #2E3A4E;
  --ms-primary: #0F6E6A;
  --ms-primary-dark: #0B5A56;
  --ms-primary-light: #E2F0EE;
  --ms-accent: #C4622D;
  --ms-accent-light: #F8E7DC;
  --ms-accent-ink: #9A4519;
  --ms-blue-light: #E6EAF2;
  --ms-blue-ink: #23395E;
  --ms-tile: #EFEDE8;
  --ms-input: #F3F1EC;
  --ms-segment: #EAE6DE;
  --ms-btn-border: #DCD7CC;
  --ms-danger: #B3261E;
  --ms-r-pill: 999px;
  --ms-r-card: 20px;
  --ms-r-tile: 12px;
  --ms-r-img: 16px;
  --ms-shadow-panel: 0 24px 48px -20px rgba(20, 35, 58, .35);
  --ms-shadow-card: 0 1px 2px rgba(20, 35, 58, .04);
  --ms-font-head: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ms-font-body: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ms-topbar-h: 64px;
  --ms-appbar-h: 56px;
  --ms-tabbar-h: 68px;

  margin: 0;
  background: var(--ms-bg);
  color: var(--ms-ink);
  font-family: var(--ms-font-body);
  font-size: 15.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 32px;
}
body.member-shell.ms-level-top { padding-bottom: calc(var(--ms-tabbar-h) + env(safe-area-inset-bottom, 0px) + 16px); }
@media (min-width: 992px) {
  body.member-shell, body.member-shell.ms-level-top { padding-bottom: 48px; }
}

/* ---------- Bootstrap-overstyringer (gjelder bare i skallet) ---------- */
body.member-shell h1, body.member-shell h2, body.member-shell h3,
body.member-shell h4, body.member-shell h5, body.member-shell h6,
body.member-shell .h1, body.member-shell .h2, body.member-shell .h3, body.member-shell .h4, body.member-shell .h5 {
  font-family: var(--ms-font-head);
  font-weight: 600;
  color: var(--ms-ink);
  letter-spacing: -.01em;
}
body.member-shell h1, body.member-shell .h1 { font-size: 2rem; letter-spacing: -.02em; }
body.member-shell p, body.member-shell li, body.member-shell td, body.member-shell label { color: var(--ms-body); }
body.member-shell a { text-decoration: none; }
body.member-shell a:not([class*="ms-"]):not(.btn) { color: var(--ms-primary); }
body.member-shell a:not([class*="ms-"]):not(.btn):hover { color: var(--ms-primary-dark); }
body.member-shell [hidden] { display: none !important; }
body.member-shell .text-muted { color: var(--ms-muted) !important; }

/* Grunnstil for alle .btn: hvit pille med ramme, så en knapp uten (eller med
   ukjent, f.eks. btn-default/btn-rounded) variant alltid er synlig. Variantene
   under overstyrer. */
body.member-shell .btn { border-radius: var(--ms-r-pill); font-weight: 600; padding: .55rem 1.1rem; font-family: var(--ms-font-body);
  --bs-btn-bg: #fff; --bs-btn-border-color: var(--ms-btn-border); --bs-btn-color: var(--ms-ink);
  --bs-btn-hover-bg: var(--ms-tile); --bs-btn-hover-border-color: var(--ms-btn-border); --bs-btn-hover-color: var(--ms-ink);
  --bs-btn-active-bg: var(--ms-tile); --bs-btn-active-border-color: var(--ms-btn-border); --bs-btn-active-color: var(--ms-ink);
  --bs-btn-disabled-bg: #fff; --bs-btn-disabled-border-color: var(--ms-btn-border); --bs-btn-disabled-color: var(--ms-muted);
  background-color: var(--bs-btn-bg); border-color: var(--bs-btn-border-color); color: var(--bs-btn-color); }
body.member-shell .btn-default { --bs-btn-bg: var(--ms-primary); --bs-btn-border-color: var(--ms-primary); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--ms-primary-dark); --bs-btn-hover-border-color: var(--ms-primary-dark); --bs-btn-hover-color: #fff;
  background-color: var(--ms-primary); border-color: var(--ms-primary); color: #fff; }
body.member-shell .btn-info { --bs-btn-bg: var(--ms-blue-light); --bs-btn-border-color: var(--ms-blue-light); --bs-btn-color: var(--ms-blue-ink);
  --bs-btn-hover-bg: #d9dfeb; --bs-btn-hover-border-color: #d9dfeb; --bs-btn-hover-color: var(--ms-blue-ink);
  background-color: var(--ms-blue-light); border-color: var(--ms-blue-light); color: var(--ms-blue-ink); }
body.member-shell .btn-link { --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-color: var(--ms-primary);
  --bs-btn-hover-bg: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: var(--ms-primary-dark);
  background-color: transparent; border-color: transparent; color: var(--ms-primary); }
body.member-shell .btn-outline-danger { --bs-btn-bg: #fff; --bs-btn-border-color: var(--ms-danger); --bs-btn-color: var(--ms-danger);
  --bs-btn-hover-bg: var(--ms-danger); --bs-btn-hover-border-color: var(--ms-danger); --bs-btn-hover-color: #fff;
  background-color: #fff; border-color: var(--ms-danger); color: var(--ms-danger); }
body.member-shell .btn-sm { padding: .35rem .85rem; font-size: .875rem; }
body.member-shell .btn-primary {
  --bs-btn-bg: var(--ms-primary); --bs-btn-border-color: var(--ms-primary); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--ms-primary-dark); --bs-btn-hover-border-color: var(--ms-primary-dark); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--ms-primary-dark); --bs-btn-active-border-color: var(--ms-primary-dark);
  background-color: var(--ms-primary); border-color: var(--ms-primary); color: #fff;
}
body.member-shell .btn-success {
  --bs-btn-bg: var(--ms-primary); --bs-btn-border-color: var(--ms-primary); --bs-btn-hover-bg: var(--ms-primary-dark); --bs-btn-hover-border-color: var(--ms-primary-dark);
  background-color: var(--ms-primary); border-color: var(--ms-primary);
}
body.member-shell .btn-secondary, body.member-shell .btn-outline-secondary, body.member-shell .btn-light {
  --bs-btn-bg: #fff; --bs-btn-border-color: var(--ms-btn-border); --bs-btn-color: var(--ms-ink);
  --bs-btn-hover-bg: var(--ms-tile); --bs-btn-hover-border-color: var(--ms-btn-border); --bs-btn-hover-color: var(--ms-ink);
  background-color: #fff; border-color: var(--ms-btn-border); color: var(--ms-ink);
}
body.member-shell .btn-dark { --bs-btn-bg: var(--ms-ink); --bs-btn-border-color: var(--ms-ink); --bs-btn-color: #fff; --bs-btn-hover-bg: #0b1627; --bs-btn-hover-border-color: #0b1627; --bs-btn-hover-color: #fff; background-color: var(--ms-ink); border-color: var(--ms-ink); color: #fff; }
body.member-shell .btn-outline-primary {
  --bs-btn-color: var(--ms-primary); --bs-btn-border-color: var(--ms-primary); --bs-btn-hover-bg: var(--ms-primary); --bs-btn-hover-color: #fff;
  color: var(--ms-primary); border-color: var(--ms-primary);
}
body.member-shell .btn-warning { --bs-btn-bg: var(--ms-accent-light); --bs-btn-border-color: var(--ms-accent-light); --bs-btn-color: var(--ms-accent-ink); --bs-btn-hover-bg: #f2d9c7; --bs-btn-hover-border-color: #f2d9c7; --bs-btn-hover-color: var(--ms-accent-ink); }
body.member-shell .btn-danger { --bs-btn-bg: var(--ms-danger); --bs-btn-border-color: var(--ms-danger); --bs-btn-color: #fff; --bs-btn-hover-bg: #8f1e18; --bs-btn-hover-border-color: #8f1e18; --bs-btn-hover-color: #fff; background-color: var(--ms-danger); border-color: var(--ms-danger); color: #fff; }

body.member-shell .card {
  border: 1px solid var(--ms-line); border-radius: var(--ms-r-card); box-shadow: var(--ms-shadow-card); background: var(--ms-card);
}
body.member-shell .card-header { background: transparent; border-bottom: 1px solid var(--ms-divider); font-family: var(--ms-font-head); font-weight: 600; }
/* Skjemafelt: hvit flate med tydelig ramme. Gjelder også rå <input>/<textarea>/
   <select> i eldre visninger. :where() holder spesifisiteten lav, så
   ms-komponentenes egne felt (søk i toppbar/panel) vinner. */
body.member-shell .form-control, body.member-shell .form-select,
body.member-shell :where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="range"]):not([type="color"])),
body.member-shell :where(textarea), body.member-shell :where(select) {
  background: #fff; border: 1px solid var(--ms-btn-border); border-radius: 12px; padding: .6rem .9rem; color: var(--ms-ink); font: inherit; line-height: 1.4;
}
body.member-shell .form-control:focus, body.member-shell .form-select:focus,
body.member-shell :where(input, textarea, select):focus {
  background: #fff; border-color: var(--ms-primary); box-shadow: 0 0 0 3px rgba(15, 110, 106, .15); outline: none;
}
body.member-shell .form-control::placeholder, body.member-shell :where(input, textarea)::placeholder { color: #8e96a3; }
body.member-shell .form-select { padding-right: 2.5rem; }
body.member-shell input[type="file"] { padding: .35rem .5rem; }
body.member-shell .input-group .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
body.member-shell .input-group .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
body.member-shell .form-check-input:checked { background-color: var(--ms-primary); border-color: var(--ms-primary); }
body.member-shell .form-switch .form-check-input { width: 2.6em; height: 1.45em; }
body.member-shell .alert { border-radius: 14px; border: 1px solid transparent; }
body.member-shell .alert-success { background: var(--ms-primary-light); color: var(--ms-primary-dark); }
body.member-shell .alert-warning { background: var(--ms-accent-light); color: var(--ms-accent-ink); }
body.member-shell .alert-info { background: var(--ms-blue-light); color: var(--ms-blue-ink); }
body.member-shell .breadcrumb { font-size: .85rem; margin: 0; }
body.member-shell .breadcrumb-item + .breadcrumb-item::before { color: var(--ms-muted); }
body.member-shell .breadcrumb-item.active { color: var(--ms-muted); }
body.member-shell .badge.bg-danger { background: var(--ms-accent) !important; }
body.member-shell .table { color: var(--ms-ink); }
body.member-shell .dropdown-menu { border: 1px solid var(--ms-line); border-radius: 16px; box-shadow: var(--ms-shadow-panel); padding: .5rem; }
body.member-shell .dropdown-item { border-radius: 10px; padding: .5rem .75rem; display: flex; align-items: center; gap: .6rem; color: var(--ms-ink); }
body.member-shell .dropdown-item:hover { background: var(--ms-tile); }
body.member-shell .modal-content { border-radius: 22px; border: 0; }
body.member-shell .nav-tabs .nav-link { color: var(--ms-muted); border: 0; }
body.member-shell .nav-tabs .nav-link.active { color: var(--ms-ink); border-bottom: 2px solid var(--ms-primary); background: transparent; }
body.member-shell .page-link { color: var(--ms-primary); }
body.member-shell .page-item.active .page-link { background: var(--ms-primary); border-color: var(--ms-primary); }

/* commonviews/style.css har en global button{}-regel (groenn, avrundet) og
   container-scopede farger. Skallet bruker ikke den containeren, og button
   nullstilles her (lastes etter) slik at .btn og ms-komponentene styler seg
   selv. Uklassede knapper i eldre visninger faar primaerstil. */
:where(body.member-shell) button { background: transparent; color: inherit; padding: 0; border: 0; border-radius: 0; cursor: pointer; font: inherit; }
:where(body.member-shell) button:not([class]) { background: var(--ms-primary); color: #fff; padding: .55rem 1.1rem; border-radius: var(--ms-r-pill); font-weight: 600; }
:where(body.member-shell) button:not([class]):disabled { background: #ccc; cursor: not-allowed; }
body.member-shell label { display: inline-block; margin-bottom: .3rem; font-weight: 500; }

/* Tema-hjelpeklasser som noen visninger bruker */
body.member-shell .mb70 { margin-bottom: 0; }
body.member-shell .pt50 { padding-top: 24px; }
body.member-shell .pb20 { padding-bottom: 12px; }

/* ---------- Ikoner ---------- */
.ms-ico {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 22px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  flex-shrink: 0;
}
.ms-ico--fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.ms-ico--sm { font-size: 18px; }
.ms-ico--lg { font-size: 28px; }
.ms-ico--xl { font-size: 36px; }

.ms-skip { position: absolute; left: -999px; top: 8px; background: #fff; padding: .5rem 1rem; border-radius: 8px; z-index: 2000; }
.ms-skip:focus { left: 8px; }

/* ---------- Toppbar (desktop) ---------- */
.ms-topbar { position: sticky; top: 0; z-index: 1030; background: #fff; border-bottom: 1px solid var(--ms-line); height: var(--ms-topbar-h); }
.ms-topbar__inner { max-width: 1280px; margin: 0 auto; height: 100%; display: flex; align-items: center; gap: 16px; padding: 0 24px; }
.ms-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ms-ink); font-family: var(--ms-font-head); font-weight: 700; font-size: 17px; white-space: nowrap; }
.ms-brand:hover { color: var(--ms-ink); }
.ms-brand__logo { height: 36px; width: auto; max-width: 140px; object-fit: contain; }
.ms-brand__mark { width: 36px; height: 36px; border-radius: 10px; background: var(--ms-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.ms-brand__name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.ms-topbar__nav { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.ms-pill { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--ms-r-pill); color: var(--ms-ink); font-weight: 500; font-size: 15px; position: relative; border: 1px solid transparent; background: transparent; }
.ms-pill:hover { background: var(--ms-tile); color: var(--ms-ink); }
.ms-pill.is-active { background: var(--ms-primary-light); color: var(--ms-primary-dark); }
.ms-pill .ms-ico { font-size: 20px; }
.ms-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--ms-accent); color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }
.ms-dot { position: absolute; top: -1px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--ms-accent); border: 2px solid #fff; }
.ms-menubtn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; margin-left: 6px; border-radius: var(--ms-r-pill); border: 1px solid var(--ms-btn-border); background: #fff; color: var(--ms-ink); font-weight: 600; font-size: 15px; cursor: pointer; }
.ms-menubtn:hover { background: var(--ms-tile); }
.ms-menubtn .ms-menubtn__close { display: none; }
.ms-menubtn[aria-expanded="true"] { background: var(--ms-ink); border-color: var(--ms-ink); color: #fff; }
.ms-menubtn[aria-expanded="true"] .ms-menubtn__open { display: none; }
.ms-menubtn[aria-expanded="true"] .ms-menubtn__close { display: inline-block; }
.ms-topbar__tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.ms-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--ms-ink); cursor: pointer; position: relative; }
.ms-iconbtn:hover { background: var(--ms-tile); color: var(--ms-ink); }
.ms-search { display: flex; align-items: center; }
.ms-search .ms-search__input, .ms-search .ms-search__input:focus { width: 0; opacity: 0; padding: 0; border: 0; box-shadow: none; border-radius: var(--ms-r-pill); background: var(--ms-input); height: 40px; transition: width .2s ease, opacity .2s ease, padding .2s ease; font-size: 15px; }
.ms-search.is-open .ms-search__input { width: 220px; opacity: 1; padding: 0 14px; }
.ms-avatarbtn { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 3px; border-radius: var(--ms-r-pill); border: 1px solid var(--ms-line); background: #fff; cursor: pointer; }
.ms-avatarbtn:hover { background: var(--ms-tile); }
.ms-avatarbtn__caret { font-size: 20px; color: var(--ms-muted); }
.ms-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ms-ink); color: #fff; font-weight: 700; font-size: 12px; letter-spacing: .02em; object-fit: cover; flex-shrink: 0; }
.ms-avatar--sm { width: 34px; height: 34px; }
.ms-avatar--md { width: 40px; height: 40px; font-size: 13px; }
.ms-avatar--lg { width: 56px; height: 56px; font-size: 17px; }
.ms-avatar--teal { background: var(--ms-primary); }
.ms-avatar--sand { background: #E6E1D6; color: var(--ms-ink); }
.ms-avatar--clay { background: var(--ms-accent-light); color: var(--ms-accent-ink); }
.ms-avatar--blue { background: var(--ms-blue-light); color: var(--ms-blue-ink); }
.ms-rolechip { font-size: 12px; font-weight: 600; background: var(--ms-primary-light); color: var(--ms-primary-dark); padding: 3px 8px; border-radius: 999px; }
.ms-dropdown { min-width: 260px; }
.ms-dropdown__head { padding: .5rem .75rem .75rem; display: flex; flex-direction: column; border-bottom: 1px solid var(--ms-divider); margin-bottom: .4rem; }
.ms-dropdown__head span { font-size: .85rem; color: var(--ms-muted); }
.ms-dropdown__form { margin: 0; }
.ms-dropdown__form .dropdown-item { background: transparent; border: 0; width: 100%; text-align: left; padding: .5rem .75rem; border-radius: 10px; font-weight: 400; }
.ms-dropdown .ms-ico { font-size: 20px; color: var(--ms-muted); }

/* ---------- Menypanel ---------- */
@media (max-width: 991.98px) { .ms-overlay, .ms-panel { display: none !important; } }
.ms-overlay { position: fixed; inset: var(--ms-topbar-h) 0 0 0; background: rgba(20, 35, 58, .35); z-index: 1025; }
.ms-panel { position: fixed; left: 0; right: 0; top: var(--ms-topbar-h); z-index: 1029; background: #fff; border-bottom-left-radius: 28px; border-bottom-right-radius: 28px; box-shadow: var(--ms-shadow-panel); max-height: calc(100vh - var(--ms-topbar-h)); overflow: auto; }
.ms-panel__inner { max-width: 1160px; margin: 0 auto; padding: 24px 24px 28px; }
.ms-panel__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.ms-panel__search { display: flex; align-items: center; gap: 10px; background: var(--ms-input); border-radius: var(--ms-r-pill); padding: 0 18px; height: 48px; width: 100%; max-width: 460px; }
.ms-panel__search .ms-ico { color: var(--ms-muted); }
.ms-panel__search input, .ms-panel__search input:focus { border: 0; box-shadow: none; background: transparent; width: 100%; font-size: 15px; outline: none; color: var(--ms-ink); }
.ms-viewas { display: flex; align-items: center; gap: 10px; margin: 0; }
.ms-viewas__label { color: var(--ms-muted); font-size: 14px; }
.ms-panel__groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 32px; }
.ms-panel__groups:has(> :nth-child(4)) { grid-template-columns: repeat(4, 1fr); }
.ms-panel__heading { font-family: var(--ms-font-body); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ms-muted); margin: 0 0 12px; }
.ms-panel__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ms-panel__item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; color: var(--ms-ink); }
.ms-panel__item:hover { background: var(--ms-tile); color: var(--ms-ink); }
.ms-panel__item.is-hidden { display: none; }
.ms-tile { width: 40px; height: 40px; border-radius: var(--ms-r-tile); display: inline-flex; align-items: center; justify-content: center; background: var(--ms-tile); color: var(--ms-ink); flex-shrink: 0; }
.ms-tile .ms-ico { font-size: 22px; }
.ms-tone-teal .ms-tile { background: var(--ms-primary-light); color: var(--ms-primary-dark); }
.ms-tone-sand .ms-tile { background: var(--ms-tile); color: var(--ms-ink); }
.ms-tone-ink .ms-tile { background: var(--ms-blue-light); color: var(--ms-blue-ink); }
.ms-tone-clay .ms-tile { background: var(--ms-accent-light); color: var(--ms-accent-ink); }
.ms-panel__text { display: flex; flex-direction: column; min-width: 0; }
.ms-panel__title { font-weight: 600; font-size: 15.5px; display: flex; align-items: center; gap: 8px; }
.ms-panel__desc { font-size: 13.5px; color: var(--ms-muted); }
.ms-panel__foot { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding: 16px 20px; border-radius: 18px; background: var(--ms-primary-light); color: var(--ms-ink); }
.ms-panel__foot:hover { color: var(--ms-ink); background: #d6e9e6; }
.ms-panel__foot > .ms-ico { color: var(--ms-primary-dark); font-size: 26px; }
.ms-panel__foottext { display: flex; flex-direction: column; }
.ms-panel__foottext span { font-size: 13.5px; color: var(--ms-muted); }
.ms-panel__footlink { margin-left: auto; font-weight: 600; color: var(--ms-primary-dark); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

/* ---------- AppBar + bunnmeny (mobil) ---------- */
.ms-appbar { position: sticky; top: 0; z-index: 1030; background: #fff; border-bottom: 1px solid var(--ms-line); height: var(--ms-appbar-h); display: flex; align-items: center; gap: 8px; padding: 0 12px 0 16px; padding-top: env(safe-area-inset-top, 0px); }
.ms-brand--app { font-size: 16px; }
.ms-brand--app .ms-brand__logo { height: 30px; }
.ms-brand--app .ms-brand__mark { width: 32px; height: 32px; font-size: 12px; }
.ms-brand--app .ms-brand__name { max-width: 180px; }
.ms-appbar__back { margin-left: -8px; }
.ms-appbar__title { font-size: 17px; margin: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ms-appbar__tools { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.ms-appbar__avatar { display: inline-flex; padding: 3px; }
.ms-appbar__avatar .ms-avatar--sm { width: 32px; height: 32px; }

.ms-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: #fff; border-top: 1px solid var(--ms-line); display: flex; height: calc(var(--ms-tabbar-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); }
.ms-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--ms-muted); font-size: 11.5px; font-weight: 500; }
.ms-tab__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 18px; border-radius: 999px; }
.ms-tab__icon .ms-ico { font-size: 24px; }
.ms-tab.is-active { color: var(--ms-primary-dark); }
.ms-tab.is-active .ms-tab__icon { background: var(--ms-primary-light); }
.ms-tab .ms-dot { top: 2px; right: 12px; }

.ms-bottombar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: #fff; border-top: 1px solid var(--ms-line); padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 12px; }
.ms-bottombar .btn { flex: 1; white-space: nowrap; }
body.member-shell.ms-has-bottombar { padding-bottom: 96px; }

/* ---------- Sidecontainer ---------- */
.ms-main { display: block; }
.ms-page { width: 100%; max-width: 1168px; margin: 0 auto; padding: 24px 24px 0; }
.ms-page--w8 { max-width: 768px; }
.ms-page--w10 { max-width: 1000px; }
.ms-page--w12 { max-width: 1168px; }
.ms-page__inner { width: 100%; }
.ms-page__content { width: 100%; }
.ms-pagehead { margin-bottom: 20px; }
.ms-pagehead__crumb { margin-bottom: 8px; }
.ms-pagehead h1 { margin: 0; font-size: 34px; line-height: 1.15; }
.ms-pagehead__lead { color: var(--ms-muted); margin: 6px 0 0; font-size: 16px; }
.ms-pagehead--row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ms-pagehead__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ms-flash { margin-top: 16px; }
@media (max-width: 991.98px) {
  .ms-page { padding: 16px 16px 0; }
  .ms-pagehead h1 { font-size: 26px; }
  .ms-pagehead__crumb { display: none; }
  /* Detaljsider: AppBar viser allerede tittelen */
  .ms-pagehead--detail > h1 { display: none; }
  .ms-pagehead--detail:not(:has(> *:not(h1):not(.ms-pagehead__crumb))) { margin-bottom: 0; }
}

/* ---------- Gjenbrukbare komponenter ---------- */
.ms-card { background: var(--ms-card); border: 1px solid var(--ms-line); border-radius: var(--ms-r-card); padding: 18px 20px; box-shadow: var(--ms-shadow-card); }
.ms-card--pad-sm { padding: 14px 16px; }
.ms-card--link { display: block; color: var(--ms-ink); transition: border-color .15s, transform .15s; }
.ms-card--link:hover { border-color: #cfc9bb; color: var(--ms-ink); }
.ms-card__title { font-family: var(--ms-font-head); font-weight: 600; font-size: 19px; margin: 0 0 6px; }
.ms-section { margin: 28px 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ms-section h2 { font-size: 19px; margin: 0; }
.ms-section a { font-weight: 600; font-size: 14px; }

.ms-segment { display: inline-flex; background: var(--ms-segment); border-radius: var(--ms-r-pill); padding: 4px; gap: 2px; }
.ms-segment > a, .ms-segment > button { border: 0; background: transparent; padding: 8px 18px; border-radius: var(--ms-r-pill); color: var(--ms-muted); font-weight: 600; font-size: 14.5px; white-space: nowrap; cursor: pointer; }
.ms-segment > a.is-active, .ms-segment > button.is-active { background: #fff; color: var(--ms-ink); box-shadow: 0 1px 2px rgba(20, 35, 58, .08); }
.ms-segment--sm > a, .ms-segment--sm > button { padding: 6px 14px; font-size: 13.5px; }
.ms-segment--full { display: flex; }
.ms-segment--full > a, .ms-segment--full > button { flex: 1; text-align: center; }

.ms-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; background: var(--ms-tile); color: var(--ms-ink); font-size: 13px; font-weight: 600; white-space: nowrap; }
.ms-chip .ms-ico { font-size: 16px; }
.ms-chip--teal { background: var(--ms-primary-light); color: var(--ms-primary-dark); }
.ms-chip--clay { background: var(--ms-accent-light); color: var(--ms-accent-ink); }
.ms-chip--blue { background: var(--ms-blue-light); color: var(--ms-blue-ink); }
.ms-chip--outline { background: #fff; border: 1px solid var(--ms-btn-border); }
a.ms-chip:hover { filter: brightness(.96); color: inherit; }

.ms-datetile { width: 50px; height: 50px; border-radius: 12px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; background: var(--ms-tile); color: var(--ms-ink); flex-shrink: 0; }
.ms-datetile__mon { font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.ms-datetile__day { font-size: 19px; font-weight: 700; font-family: var(--ms-font-head); margin-top: 2px; }
.ms-datetile--clay { background: var(--ms-accent-light); color: var(--ms-accent-ink); }
.ms-datetile--teal { background: var(--ms-primary-light); color: var(--ms-primary-dark); }
.ms-datetile--lg { width: 60px; height: 60px; }
.ms-datetile--lg .ms-datetile__day { font-size: 24px; }

.ms-progress { height: 6px; border-radius: 999px; background: var(--ms-tile); overflow: hidden; }
.ms-progress > span { display: block; height: 100%; background: var(--ms-accent); border-radius: 999px; }
.ms-progress--teal > span { background: var(--ms-primary); }

.ms-meta { font-size: 13.5px; color: var(--ms-muted); }
.ms-meta--row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ms-meta .ms-ico { font-size: 18px; }

.ms-list { list-style: none; margin: 0; padding: 0; }
.ms-list > li { border-top: 1px solid var(--ms-divider); }
.ms-list > li:first-child { border-top: 0; }
.ms-rowlink { display: flex; align-items: center; gap: 12px; padding: 12px 4px; color: var(--ms-ink); }
.ms-rowlink:hover { color: var(--ms-ink); background: var(--ms-bg); }
.ms-rowlink__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ms-rowlink__title { font-weight: 600; }
.ms-rowlink__meta { font-size: 13px; color: var(--ms-muted); }
.ms-rowlink > .ms-ico:last-child { color: var(--ms-muted); }

.ms-empty { text-align: center; padding: 40px 20px; color: var(--ms-muted); }
.ms-empty .ms-ico { font-size: 40px; color: #cfc9bb; margin-bottom: 8px; }

.ms-grid { display: grid; gap: 16px; }
.ms-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ms-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ms-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991.98px) { .ms-grid--3, .ms-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .ms-grid--2, .ms-grid--3, .ms-grid--4 { grid-template-columns: 1fr; } }

.ms-fab { position: fixed; right: 20px; bottom: calc(var(--ms-tabbar-h) + env(safe-area-inset-bottom, 0px) + 16px); width: 56px; height: 56px; border-radius: 50%; background: var(--ms-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px -8px rgba(15, 110, 106, .6); z-index: 1020; }
.ms-fab:hover { background: var(--ms-primary-dark); color: #fff; }
.ms-fab .ms-ico { font-size: 28px; }
/* Plass nederst så den flytende knappen ikke dekker siste rad */
@media (max-width: 991.98px) { body.member-shell:has(.ms-fab) .ms-main { padding-bottom: 88px; } }

/* Bottom sheet (mobil) — Bootstrap-modal som glir opp nedenfra */
@media (max-width: 991.98px) {
  .modal.ms-sheet .modal-dialog { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; max-width: none; transform: translateY(30%); transition: transform .25s ease; }
  .modal.ms-sheet.show .modal-dialog { transform: none; }
  .modal.ms-sheet .modal-content { border-radius: 24px 24px 0 0; max-height: 86vh; }
  .modal.ms-sheet .modal-body { overflow: auto; }
  .modal.ms-sheet .modal-content::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 2px; background: #DCD7CC; margin: 10px auto 0; }
}

/* Emnevelger */
.ms-emnevelger { border: 1px solid var(--ms-btn-border); border-radius: 14px; background: #fff; padding: 8px 10px; }
.ms-emnevelger.is-focus { border-color: var(--ms-primary); box-shadow: 0 0 0 3px rgba(15, 110, 106, .15); }
.ms-emnevelger__valgte { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 32px; }
.ms-emnevelger__valgte .ms-chip--teal button { border: 0; background: transparent; padding: 0; color: inherit; display: inline-flex; }
.ms-emnevelger__valgte .ms-chip--teal button .ms-ico { font-size: 16px; }
.ms-emnevelger__knapp { border: 0; background: transparent; color: var(--ms-muted); padding: 4px 6px; font-size: 14.5px; }
.ms-emnegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 575.98px) { .ms-emnegrid { grid-template-columns: repeat(2, 1fr); } }
.ms-emnegrid__item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--ms-btn-border); background: #fff; color: var(--ms-ink); cursor: pointer; text-align: left; font-weight: 500; font-size: 14.5px; }
.ms-emnegrid__item .ms-ico { color: var(--ms-muted); }
.ms-emnegrid__item.is-valgt { border-color: var(--ms-primary); background: #F2F8F7; }
.ms-emnegrid__item.is-valgt .ms-ico { color: var(--ms-primary); }
.ms-emnegrid__item.is-hidden { display: none; }
.ms-emnegrid__check { margin-left: auto; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #B9B4AA; display: inline-flex; align-items: center; justify-content: center; }
.ms-emnegrid__item.is-valgt .ms-emnegrid__check { background: var(--ms-primary); border-color: var(--ms-primary); color: #fff; }
.ms-emnegrid__item.is-valgt .ms-emnegrid__check::after { content: 'check'; font-family: 'Material Symbols Rounded'; font-size: 14px; line-height: 1; }

/* Ikonvelger (styret) */
.ms-ikongrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; max-height: 300px; overflow: auto; padding: 4px; }
.ms-ikongrid__item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 10px; border: 1px solid transparent; background: var(--ms-bg); cursor: pointer; font-size: 11px; color: var(--ms-muted); }
.ms-ikongrid__item .ms-ico { font-size: 26px; color: var(--ms-ink); }
.ms-ikongrid__item.is-valgt { border-color: var(--ms-primary); background: var(--ms-primary-light); color: var(--ms-primary-dark); }
.ms-ikongrid__item.is-hidden { display: none; }

/* Strøm-/oppslagskort (gjenbrukes av hjem, guide-emne) */
.ms-feedcard { background: #fff; border: 1px solid var(--ms-line); border-radius: var(--ms-r-card); padding: 18px 20px; margin-bottom: 16px; }
.ms-feedcard__pin { display: inline-flex; align-items: center; gap: 4px; color: var(--ms-primary-dark); font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.ms-feedcard__pin .ms-ico { font-size: 16px; }
.ms-feedcard__head { display: flex; align-items: center; gap: 10px; }
.ms-feedcard__who { display: flex; flex-direction: column; min-width: 0; }
.ms-feedcard__name { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ms-feedcard__time { font-size: 13px; color: var(--ms-muted); }
.ms-feedcard__kind { margin-left: auto; }
.ms-feedcard__title { font-family: var(--ms-font-head); font-weight: 600; font-size: 19px; margin: 12px 0 6px; }
.ms-feedcard__title a { color: var(--ms-ink); }
.ms-feedcard__body { color: var(--ms-body); }
.ms-feedcard__body p:last-child { margin-bottom: 0; }
.ms-feedcard__foot { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.ms-feedcard__foot .ms-meta { display: inline-flex; align-items: center; gap: 4px; }
.ms-feedcard__foot .ms-chip { margin-left: auto; }
.ms-feedcard--clamp .ms-feedcard__body { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Kommende-kort (hjem) */
.ms-upcoming { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 991.98px) { .ms-upcoming { display: flex; overflow-x: auto; gap: 12px; margin: 0 -16px; padding: 0 16px 6px; scroll-snap-type: x mandatory; } .ms-upcoming > * { min-width: 78%; scroll-snap-align: start; } }
.ms-upcoming__card { display: flex; flex-direction: column; gap: 10px; }
.ms-upcoming__top { display: flex; align-items: center; gap: 12px; }
.ms-upcoming__kind { font-size: 12.5px; color: var(--ms-muted); }
.ms-upcoming__title { font-weight: 600; font-size: 15.5px; color: var(--ms-ink); }
.ms-upcoming__meta { font-size: 13.5px; color: var(--ms-muted); }

.ms-greeting { margin-bottom: 20px; }
.ms-greeting__date { color: var(--ms-muted); font-size: 14px; margin-bottom: 2px; }
.ms-greeting h1 { font-size: 34px; margin: 0; }
@media (max-width: 991.98px) { .ms-greeting h1 { font-size: 28px; } }

/* Mobil meny-side */
.ms-profilecard { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.ms-profilecard__text { flex: 1; min-width: 0; }
.ms-profilecard__name { font-weight: 600; font-size: 17px; font-family: var(--ms-font-head); }
.ms-profilecard__meta { color: var(--ms-muted); font-size: 13.5px; }
.ms-menugrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ms-menugrid__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 84px; padding: 12px 6px; background: #fff; border: 1px solid var(--ms-line); border-radius: 16px; color: var(--ms-ink); font-size: 12.5px; font-weight: 600; text-align: center; position: relative; }
.ms-menugrid__item .ms-ico { font-size: 26px; }
.ms-menugrid__item .ms-badge { position: absolute; top: 8px; right: 8px; }
.ms-menugroup { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ms-muted); margin: 22px 0 10px; }

/* Innlogging (gjestemodus) */
.ms-login { max-width: 440px; margin: 40px auto; }
.ms-login .ms-card { padding: 28px; }
.ms-login h1 { font-size: 28px; margin-bottom: 18px; }
.ms-login .form-control { height: 48px; }
.ms-login__links { margin-top: 18px; font-size: 14.5px; display: flex; flex-direction: column; gap: 6px; }

/* Filliste */
.ms-files { list-style: none; margin: 0; padding: 0; }
.ms-files > li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--ms-divider); }
.ms-files > li:first-child { border-top: 0; padding-top: 0; }
.ms-files__icon { width: 36px; height: 36px; border-radius: 10px; background: var(--ms-accent-light); color: var(--ms-accent-ink); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ms-files__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ms-files__name { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ms-ink); }
.ms-files__meta { font-size: 12.5px; color: var(--ms-muted); }
.ms-files__dl { color: var(--ms-primary); }

/* A–Å-liste */
.d-contents { display: contents; }
.min-w-0 { min-width: 0; }
.ms-az [data-ms-letter].is-hidden { display: none; }
.ms-az { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 28px; }
@media (max-width: 991.98px) { .ms-az { grid-template-columns: 1fr; } }
.ms-az__row { display: flex; align-items: center; gap: 12px; }
.ms-az__letter { width: 20px; font-family: var(--ms-font-head); font-weight: 700; font-size: 20px; color: var(--ms-accent-ink); flex-shrink: 0; }
.ms-az__row.is-cont .ms-az__letter { visibility: hidden; }
.ms-az__card { flex: 1; display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #fff; border: 1px solid var(--ms-line); border-radius: 16px; color: var(--ms-ink); min-width: 0; }
.ms-az__card:hover { border-color: #cfc9bb; color: var(--ms-ink); }
.ms-az__card .ms-tile { background: var(--ms-primary-light); color: var(--ms-primary-dark); }
.ms-az__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ms-az__title { font-weight: 600; font-size: 15.5px; }
.ms-az__meta { font-size: 13px; color: var(--ms-muted); }
.ms-az__card > .ms-ico:last-child { color: var(--ms-muted); }
.ms-az__row.is-hidden { display: none; }
.ms-searchfield { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--ms-line); border-radius: var(--ms-r-pill); padding: 0 18px; height: 50px; max-width: 600px; }
.ms-searchfield .ms-ico { color: var(--ms-muted); }
.ms-searchfield input, .ms-searchfield input:focus { border: 0; box-shadow: none; background: transparent; width: 100%; font-size: 15.5px; outline: none; color: var(--ms-ink); }

/* Emneside */
.ms-emnehead { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.ms-emnehead .ms-tile { width: 64px; height: 64px; border-radius: 18px; background: var(--ms-primary-light); color: var(--ms-primary-dark); }
.ms-emnehead .ms-tile .ms-ico { font-size: 32px; }
.ms-emnehead h1 { margin: 0; font-size: 34px; }
.ms-emnehead__meta { color: var(--ms-muted); font-size: 14px; }
@media (max-width: 991.98px) { .ms-emnehead h1 { font-size: 26px; } .ms-emnehead .ms-tile { width: 52px; height: 52px; } }
.ms-prose { font-size: 16px; line-height: 1.6; color: var(--ms-body); }
.ms-prose h2, .ms-prose h3 { font-size: 20px; margin: 18px 0 8px; }
.ms-prose h2:first-child, .ms-prose h3:first-child { margin-top: 0; }
.ms-prose img { max-width: 100%; height: auto; border-radius: 12px; }
.ms-prose table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.ms-prose td, .ms-prose th { border: 1px solid var(--ms-line); padding: 6px 10px; }
.ms-prose dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; }
.ms-prose dt { font-weight: 600; }
.ms-twocol { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
@media (max-width: 991.98px) { .ms-twocol { grid-template-columns: 1fr; gap: 16px; } }
.ms-side > * + * { margin-top: 16px; }
.ms-responsible { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ms-responsible__text { display: flex; flex-direction: column; }
.ms-responsible__text strong { font-size: 15px; }
.ms-responsible__text span { font-size: 13px; color: var(--ms-muted); }
.ms-related { display: flex; flex-wrap: wrap; gap: 8px; }

/* Arrangement */
.ms-eventcard { background: #fff; border: 1px solid var(--ms-line); border-radius: var(--ms-r-card); overflow: hidden; display: flex; flex-direction: column; }
.ms-eventcard__img { position: relative; aspect-ratio: 16 / 10; background: repeating-linear-gradient(135deg, #EFEDE8 0 12px, #E9E5DC 12px 24px); }
.ms-eventcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-eventcard__img .ms-datetile { position: absolute; top: 12px; left: 12px; background: #fff; color: var(--ms-accent-ink); box-shadow: 0 2px 6px rgba(20, 35, 58, .12); }
.ms-eventcard__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ms-eventcard__title { font-family: var(--ms-font-head); font-weight: 600; font-size: 18px; color: var(--ms-ink); margin: 0; }
.ms-eventcard__meta { font-size: 13.5px; color: var(--ms-muted); }
.ms-eventcard__spots { font-size: 13px; color: var(--ms-muted); margin-top: 4px; }
.ms-eventcard__actions { margin-top: auto; padding-top: 10px; }
.ms-eventcard__actions .btn { width: 100%; }
.ms-eventrow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; border: 1px solid var(--ms-line); border-radius: 16px; margin-bottom: 10px; color: var(--ms-ink); }
.ms-eventrow__text { flex: 1; min-width: 0; display: flex; flex-direction: column; color: var(--ms-ink); }
.ms-eventrow__title { font-weight: 600; font-size: 15.5px; }
.ms-eventrow__meta { font-size: 13px; color: var(--ms-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-roundbtn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ms-btn-border); background: #fff; display: inline-flex; align-items: center; justify-content: center; color: var(--ms-ink); flex-shrink: 0; }
.ms-roundbtn.is-on { background: var(--ms-primary); border-color: var(--ms-primary); color: #fff; }
.ms-roundbtn:disabled { opacity: .5; }
.ms-hero { width: 100%; aspect-ratio: 21 / 9; border-radius: var(--ms-r-card); overflow: hidden; background: repeating-linear-gradient(135deg, #EFEDE8 0 12px, #E9E5DC 12px 24px); margin-bottom: 20px; }
.ms-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 991.98px) { .ms-hero { aspect-ratio: 16 / 10; border-radius: 16px; } }
.ms-signup { position: sticky; top: calc(var(--ms-topbar-h) + 24px); }
.ms-signup__big { font-family: var(--ms-font-head); font-size: 40px; font-weight: 700; line-height: 1; }
.ms-signup__big small { font-family: var(--ms-font-body); font-size: 15px; font-weight: 500; color: var(--ms-muted); margin-left: 6px; }
.ms-signup__deadline { background: var(--ms-bg); border-radius: 12px; padding: 12px 14px; font-size: 14px; display: flex; gap: 8px; align-items: center; margin: 14px 0; }
.ms-signup .btn { width: 100%; }
.ms-signup .btn + .btn { margin-top: 8px; }
.ms-signup__note { font-size: 13px; color: var(--ms-muted); text-align: center; margin-top: 10px; }
.ms-attendees { display: flex; align-items: center; gap: 12px; }
.ms-attendees__stack { display: flex; }
.ms-attendees__stack .ms-avatar { margin-left: -8px; border: 2px solid #fff; }
.ms-attendees__stack .ms-avatar:first-child { margin-left: 0; }
.ms-facts { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ms-facts li { display: flex; align-items: center; gap: 10px; color: var(--ms-body); }
.ms-facts .ms-ico { color: var(--ms-muted); font-size: 20px; }

/* Styret: admin-lister */
.ms-adminrow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #fff; border: 1px solid var(--ms-line); border-radius: 14px; margin-bottom: 8px; }
.ms-adminrow__text { flex: 1; min-width: 0; }
.ms-adminrow__title { font-weight: 600; }
.ms-adminrow__meta { font-size: 13px; color: var(--ms-muted); }
.ms-adminrow__actions { display: flex; gap: 6px; }
.ms-adminrow.is-inactive { opacity: .6; }

/* Skjul elementer som er ment for hjemmesiden */
body.member-shell .back-to-top { display: none !important; }
/* Forbedringsforslag-knappen (styret) kolliderer med bunnmenyen på mobil */
@media (max-width: 991.98px) { body.member-shell .feedback-fab { display: none !important; } }

/* ---------- Varslinger (bjellen) ---------- */
.ms-varselpanel { width: 400px; max-width: calc(100vw - 32px); padding: 0; overflow: hidden; }
.ms-varselpanel__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 10px; font-family: var(--ms-font-head); font-size: 18px; }
.ms-varselpanel__head .btn-link { font-size: 13.5px; font-weight: 600; }
.ms-varselpanel__gruppe { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ms-muted); padding: 8px 18px 4px; }
.ms-varselpanel .ms-rowlink { padding: 10px 18px; border-radius: 0; }
.ms-varselpanel__tom { text-align: center; padding: 28px 16px; color: var(--ms-muted); }
.ms-varselpanel__tom .ms-ico { font-size: 36px; color: #cfc9bb; }
.ms-varselpanel__alle { display: block; text-align: center; padding: 12px; border-top: 1px solid var(--ms-divider); font-weight: 600; color: var(--ms-primary); }
.ms-varsel.is-ulest { background: var(--ms-bg); }
.ms-varsel__tekst { font-size: 14.5px; line-height: 1.35; color: var(--ms-ink); }
.ms-varsel__tekst strong { font-weight: 700; }
.ms-delvalg .ms-rowlink { padding: 10px 4px; }

/* ---------- Meldinger: to kolonner / chat ---------- */
.ms-msg { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 991.98px) { .ms-msg { display: block; } }
.ms-msg-list__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ms-msg-list__title { font-size: 28px; margin: 0; }
.ms-msg-list__search { height: 44px; margin-bottom: 12px; max-width: none; }
.ms-msg-list__items > li { border-top: 0; }
.ms-msg-item { display: block; padding: 12px 14px; margin-bottom: 8px; border-radius: 16px; background: #fff; border: 1px solid var(--ms-line); color: var(--ms-ink); }
.ms-msg-item:hover { border-color: #cfc9bb; color: var(--ms-ink); }
.ms-msg-item.is-active { border-color: var(--ms-primary); box-shadow: 0 0 0 2px rgba(15, 110, 106, .12); }
.ms-msg-item.is-ulest .ms-msg-item__subject { font-weight: 700; }
.ms-msg-item__top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.ms-msg-item__subject { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-msg-item__date { font-size: 12.5px; color: var(--ms-muted); flex-shrink: 0; }
.ms-msg-item__preview { font-size: 13.5px; color: var(--ms-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-msg-item__foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; min-height: 16px; }
.ms-msg-item__assignee { font-size: 12.5px; color: var(--ms-muted); display: inline-flex; align-items: center; gap: 2px; }
.ms-msg-pane { background: #fff; border: 1px solid var(--ms-line); border-radius: var(--ms-r-card); display: flex; flex-direction: column; min-height: 560px; max-height: calc(100vh - var(--ms-topbar-h) - 48px); }
.ms-msg-pane > .ms-empty { margin: auto; }
.ms-msg-pane__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--ms-divider); }
.ms-msg-pane__subject { font-size: 20px; margin: 0 0 2px; }
.ms-msg-pane__detaljer { border-bottom: 1px solid var(--ms-divider); }
.ms-msg-pane__detaljer > .row { padding: 14px 20px; margin: 0; }
.ms-chat { flex: 1; overflow: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; background: #fff; }
.ms-chat__row { display: flex; flex-direction: column; align-items: flex-start; max-width: 78%; }
.ms-chat__row.is-meg { align-self: flex-end; align-items: flex-end; }
.ms-chat__meta { font-size: 12.5px; color: var(--ms-muted); margin-bottom: 4px; }
.ms-chat__bubble { background: var(--ms-bg); border: 1px solid var(--ms-line); border-radius: 16px 16px 16px 4px; padding: 10px 14px; color: var(--ms-ink); font-size: 15px; line-height: 1.45; }
.ms-chat__row.is-meg .ms-chat__bubble { background: var(--ms-primary); border-color: var(--ms-primary); color: #fff; border-radius: 16px 16px 4px 16px; }
.ms-chat__vedlegg { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.ms-chat__vedlegg a { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: underline; }
body.member-shell .ms-chat__row.is-meg .ms-chat__bubble a { color: #fff !important; }
body.member-shell .ms-chat__row:not(.is-meg) .ms-chat__bubble a { color: var(--ms-primary) !important; }
.ms-chatinput { display: flex; align-items: flex-end; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--ms-divider); flex-wrap: wrap; background: #fff; border-radius: 0 0 var(--ms-r-card) var(--ms-r-card); }
.ms-chatinput__attach { cursor: pointer; margin-bottom: 2px; }
.ms-chatinput__felt { flex: 1; min-width: 160px; resize: none; overflow-y: hidden; border-radius: 22px !important; padding: .65rem 1rem !important; max-height: 160px; }
.ms-chatinput__send { margin-bottom: 1px; }
.ms-chatinput__ekstra { flex-basis: 100%; }
.ms-chatinput--lukket { color: var(--ms-muted); align-items: center; gap: 6px; }
@media (max-width: 991.98px) {
  .ms-msg--view .ms-msg-pane { min-height: 0; max-height: none; border: 0; background: transparent; border-radius: 0; }
  .ms-msg-pane__head { padding: 0 0 12px; }
  .ms-chat { padding: 12px 0 100px; background: transparent; }
  .ms-chat__row { max-width: 88%; }
  .ms-chatinput { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; border-radius: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -8px 24px -16px rgba(20, 35, 58, .3); }
  .ms-chatinput--lukket { position: static; box-shadow: none; }
}

/* ---------- Oppslagstavlen i skallet (eksisterende markup, ny drakt) ---------- */
body.member-shell .bulletinboard-stream { column-count: 2; column-gap: 20px; }
@media (max-width: 991.98px) { body.member-shell .bulletinboard-stream { column-count: 1; } }
body.member-shell .bulletinboard-stream .post { break-inside: avoid; display: inline-block; width: 100%; border: 1px solid var(--ms-line); border-radius: var(--ms-r-card); padding: 18px 20px; margin: 0 0 20px; background: #fff; box-shadow: var(--ms-shadow-card); }
body.member-shell .post--pinned { border-color: #cfe0dd; }
body.member-shell .post .post-title { font-family: var(--ms-font-head); font-weight: 600; font-size: 19px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; }
body.member-shell .post .post-meta, body.member-shell .reply .reply-meta { font-size: 13px; color: var(--ms-muted); font-weight: 400; margin-bottom: 8px; }
body.member-shell .post .post-content { color: var(--ms-body); font-size: 15.5px; }
body.member-shell .post .delete-post, body.member-shell .reply .delete-reply { margin-left: auto; color: var(--ms-muted); font-size: 15px; background: transparent; padding: 4px; }
body.member-shell .post .delete-post:hover, body.member-shell .reply .delete-reply:hover { color: var(--ms-danger); }
body.member-shell .toggle-reply { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; color: var(--ms-primary); font-weight: 600; font-size: 14px; cursor: pointer; }
body.member-shell .toggle-reply::before { content: 'mode_comment'; font-family: 'Material Symbols Rounded'; font-size: 18px; }
body.member-shell .reply { border: 0; border-left: 3px solid var(--ms-primary-light); border-radius: 0 12px 12px 0; background: var(--ms-bg); padding: 10px 14px; margin: 10px 0 0; }
body.member-shell .reply-form { background: var(--ms-bg); border-radius: 14px; padding: 12px 14px; margin-top: 10px; }
body.member-shell .reply-form label { font-size: 13.5px; }
body.member-shell .bulletinboard-rolebadge { display: inline-block; font-size: 11.5px; font-weight: 600; background: var(--ms-primary-light); color: var(--ms-primary-dark); padding: 2px 8px; border-radius: 999px; margin-left: 4px; }
body.member-shell .toggle-new-post { background: #fff; border: 1px solid var(--ms-line); border-radius: var(--ms-r-card); padding: 20px 22px; margin: 0 0 20px; }
body.member-shell .toggle-new-post h3 { font-size: 21px; margin-bottom: 14px; }
body.member-shell .toggle-new-post .form-group { margin-bottom: 12px; }
body.member-shell .toggle-new-post .form-group > label { font-size: 14px; color: var(--ms-muted); }
body.member-shell .poll-builder, body.member-shell .embed-builder { background: var(--ms-bg); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; }
body.member-shell .poll-card { background: var(--ms-bg); border-radius: 14px; padding: 12px 14px; margin: 12px 0; }
body.member-shell .poll-option__bar { background: var(--ms-line); border-radius: 999px; height: 6px; overflow: hidden; display: block; }
body.member-shell .poll-option__bar > span { background: var(--ms-primary); display: block; height: 100%; }
body.member-shell #pagination-controls { text-align: left; margin: 8px 0 24px; display: flex; gap: 6px; flex-wrap: wrap; }
body.member-shell .pagination-link { background: #fff; border: 1px solid var(--ms-btn-border); border-radius: 999px; padding: 6px 12px; color: var(--ms-ink); font-weight: 600; font-size: 13.5px; }
body.member-shell .pagination-link.active { background: var(--ms-primary); border-color: var(--ms-primary); color: #fff; }
body.member-shell .bb-emnevalg { width: auto; min-width: 180px; border-radius: 999px !important; padding: .45rem 2.2rem .45rem 1rem !important; }
body.member-shell #message-container { position: fixed; top: calc(var(--ms-topbar-h) + 12px); right: 16px; z-index: 1050; max-width: 360px; }
body.member-shell hr { border-color: var(--ms-line); opacity: 1; }

/* ---------- Styre-dashbord ---------- */
.ms-handling { display: flex; align-items: center; gap: 14px; padding: 12px 20px; }
.ms-handling .btn { white-space: nowrap; }
@media (max-width: 575.98px) { .ms-handling { flex-wrap: wrap; } .ms-handling .btn { margin-left: 54px; } }

/* ---------- Innstillinger (styret) ---------- */
.ms-settings { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 991.98px) { .ms-settings { display: block; } }
.ms-settings__nav { position: sticky; top: calc(var(--ms-topbar-h) + 24px); }
.ms-settings__nav .ms-menugroup { margin-top: 0; }
.ms-settings__nav a { display: block; padding: 9px 14px; border-radius: 12px; color: var(--ms-ink); font-weight: 500; }
.ms-settings__nav a:hover { background: var(--ms-tile); color: var(--ms-ink); }
.ms-settings__nav a.is-active { background: var(--ms-primary-light); color: var(--ms-primary-dark); font-weight: 600; }
@media (max-width: 991.98px) { .ms-settings__nav { position: static; display: flex; gap: 6px; overflow-x: auto; margin: 0 -16px 16px; padding: 0 16px 6px; } .ms-settings__nav .ms-menugroup { display: none; } .ms-settings__nav a { white-space: nowrap; border: 1px solid var(--ms-line); background: #fff; border-radius: 999px; padding: 7px 14px; font-size: 14px; } }
.ms-settings h2 { font-size: 30px; margin: 0 0 16px; }
.ms-settings .ms-card { margin-bottom: 20px; scroll-margin-top: calc(var(--ms-topbar-h) + 16px); }
.ms-settings .ms-card__title { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.ms-settings .ms-card__title .ms-ico { color: var(--ms-muted); }
.ms-modulrad { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--ms-divider); }
.ms-modulrad:first-of-type { border-top: 0; padding-top: 0; }
.ms-modulrad .ms-ico { color: var(--ms-muted); font-size: 22px; }
.ms-modulrad__text { flex: 1; min-width: 0; }
.ms-modulrad__text strong { display: block; font-size: 15.5px; }
.ms-modulrad__text span { font-size: 13.5px; color: var(--ms-muted); }
.ms-modulrad.is-laast { opacity: .55; }
.ms-modulrad .form-check { margin: 0; min-height: 0; padding-left: 0; }
.ms-modulrad .form-check-input { margin: 0; float: none; }
.ms-valgkort { display: flex; gap: 12px; padding: 12px 14px; border: 1px solid var(--ms-btn-border); border-radius: 14px; margin-bottom: 8px; cursor: pointer; }
.ms-valgkort:has(input:checked) { border-color: var(--ms-primary); background: #F2F8F7; }
.ms-valgkort strong { display: block; font-size: 15px; }
.ms-valgkort span { font-size: 13.5px; color: var(--ms-muted); }
body.member-shell #pagination-controls .pagination-link { color: var(--ms-ink); padding: 6px 12px; margin: 0; background: #fff; }
body.member-shell #pagination-controls .pagination-link.active { background: var(--ms-primary); color: #fff; }
@media (max-width: 991.98px) { .ms-twocol { display: block; } .ms-twocol > .ms-side { margin-top: 16px; } }
@media (max-width: 575.98px) { .ms-handling .ms-rowlink__text { flex: 1 1 220px; } }
body.member-shell .bulletinboard-stream #pagination-controls { column-span: all; }

/* ---------- Bilde på oppslag ---------- */
.bb-bilde { display: block; margin: 12px 0 4px; border-radius: 14px; overflow: hidden; background: var(--ms-tile); }
.bb-bilde img { display: block; width: 100%; height: auto; }
.bb-bilde--full img { max-height: 70vh; width: auto; max-width: 100%; margin: 0 auto; }
.ms-feedcard__img { display: block; margin: 0 0 10px; border-radius: 12px; overflow: hidden; background: var(--ms-tile); }
.ms-feedcard__img img { display: block; width: 100%; height: auto; }
.bb-bildefelt__preview, .bb-bildefelt__naa { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.bb-bildefelt__preview img, .bb-bildefelt__naa img { width: 160px; height: 100px; object-fit: cover; border-radius: 10px; border: 1px solid var(--ms-line); }
/* Innleggssiden: samme svar-layout som tavla */
body.member-shell .bulletinboard-page--single .post { border: 1px solid var(--ms-line); border-radius: var(--ms-r-card); padding: 20px 22px; background: #fff; box-shadow: var(--ms-shadow-card); margin-bottom: 20px; }
body.member-shell .bulletinboard-page__sectiontitle { font-family: var(--ms-font-head); font-weight: 600; font-size: 19px; margin: 0 0 8px; }
body.member-shell .bulletinboard-page--single .replies { margin-bottom: 16px; }
body.member-shell .bulletinboard-page--single .reply { margin: 0 0 10px; }
body.member-shell .bulletinboard-page--single .reply-header { display: flex; align-items: center; gap: 8px; }
body.member-shell .bulletinboard-page__empty { color: var(--ms-muted); font-size: 14.5px; margin: 0 0 12px; }
body.member-shell .reply-form--single { background: #fff; border: 1px solid var(--ms-line); border-radius: var(--ms-r-card); padding: 16px 18px; margin: 0 0 20px; }
body.member-shell .bulletinboard-page__actions { margin-bottom: 24px; }
body.member-shell .bulletinboard-page--single .reply { background: #fff; border: 1px solid var(--ms-line); border-left: 3px solid var(--ms-primary-light); border-radius: 0 14px 14px 0; padding: 12px 16px; }
body.member-shell .bulletinboard-page--single .reply-header { flex-direction: row; justify-content: space-between; text-align: left; }
body.member-shell .bulletinboard-page--single .reply-header .reply-meta { margin: 0; flex: 1; }
body.member-shell .bulletinboard-page--single .reply-content { margin-top: 6px; }