/* The portal's search pages, «Endringer i regelverket» (/endringer) and «Søk i kildene»
   (/kilder): the portal's skin (portal.html), with the bransje's colours set by sider.js. */
:root {
  --bg: #f2f5f1;
  --panel: #ffffff;
  --ink: #17251a;
  --muted: #5b6b5f;
  --accent: #2f6b3a;
  --accent-ink: #ffffff;
  --sidebar: #24402a;
  --border: #dbe3da;
  --border-soft: #e9eee8;
  --tint: #eaf2eb;
  --wrap: 1160px;
  --lt: #24508a;
  --lt-tint: #e8eef7;
  --warn: #9a5b00;
  --warn-tint: #fff5e0;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; } /* the bar stands still whether a page scrolls or not */
html.modal-open { overflow: hidden; } /* the page stands still behind an open dialog */
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--ink); line-height: 1.5; }
a { color: var(--accent); }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
mark { background: #fff1a8; color: inherit; border-radius: 2px; padding: 0 1px; }

/* --- top bar, with the portal's pages ---------------------------------------------- */
.top { background: var(--sidebar); color: #fff; }
.top-in { display: flex; align-items: center; gap: 22px; height: 60px; }
.brand { color: #fff; text-decoration: none; font-weight: 700; font-size: 19px; letter-spacing: 0.01em; white-space: nowrap; }
.brand span { font-weight: 400; opacity: 0.75; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { color: rgba(255, 255, 255, 0.82); text-decoration: none; font-size: 14px; font-weight: 550; padding: 7px 11px; border-radius: 8px; white-space: nowrap; }
.nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.nav a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, 0.14); }
.nav a.tool { border: 1px solid rgba(255, 255, 255, 0.35); margin-left: 6px; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: 14px; }
.top-link { color: rgba(255, 255, 255, 0.85); background: none; border: none; padding: 0; text-decoration: none; font-size: 14px; }
.top-link:hover { color: #fff; text-decoration: underline; }
.who { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.9); }
.avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.16); font-size: 12px; font-weight: 700; color: #fff; }

/* --- the page's head: title and search ------------------------------------------------ */
.head {
  background:
    radial-gradient(1200px 400px at 85% -10%, rgba(255, 255, 255, 0.08), transparent 60%),
    linear-gradient(180deg, var(--sidebar), color-mix(in srgb, var(--sidebar) 82%, #000));
  color: #fff;
  padding: 30px 0 32px;
}
.eyebrow { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
h1 { margin: 0; font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; }
.lead { margin: 10px 0 0; font-size: 15.5px; color: rgba(255, 255, 255, 0.82); max-width: 760px; }
.search { margin-top: 20px; display: flex; gap: 8px; background: #fff; border-radius: 14px; padding: 7px 7px 7px 16px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22); max-width: 820px; }
.search input { flex: 1; min-width: 0; border: none; outline: none; font: inherit; font-size: 16px; color: var(--ink); background: transparent; }
.search button { flex: none; border: none; border-radius: 10px; padding: 10px 20px; background: var(--accent); color: var(--accent-ink); font-weight: 650; font-size: 15px; }
.search button:hover { filter: brightness(1.08); }
.search:focus-within { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22), 0 0 0 3px rgba(255, 255, 255, 0.35); }
.examples { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; color: rgba(255, 255, 255, 0.7); }
.examples button { background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; padding: 3px 11px; font-size: 13px; }
.examples button:hover { background: rgba(255, 255, 255, 0.18); }

/* --- body: filters and results ---------------------------------------------------------- */
.body { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; padding-top: 26px; padding-bottom: 48px; align-items: start; }
.filters { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 16px; }
.filters summary { display: none; }
.f-group h3 { margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.f-hint { margin: -4px 0 6px; font-size: 12px; line-height: 1.35; color: var(--muted); }
.f-opt { display: flex; align-items: baseline; gap: 8px; width: 100%; background: none; border: none; text-align: left; padding: 4px 8px; margin: 0 -8px; border-radius: 7px; font-size: 14px; color: var(--ink); }
.f-opt:hover { background: var(--tint); }
.f-opt .n { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.f-opt[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.f-opt[aria-pressed="true"] .n { color: rgba(255, 255, 255, 0.8); }
.f-opt .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-more { background: none; border: none; padding: 2px 0; color: var(--accent); font-size: 13px; font-weight: 600; }
.f-dates { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); }
.f-dates input { width: 100%; min-width: 0; font: inherit; font-size: 13px; padding: 5px 6px; border: 1px solid var(--border); border-radius: 7px; color: var(--ink); background: #fff; }
.f-clear { background: none; border: none; padding: 0; color: var(--accent); font-weight: 600; font-size: 13.5px; text-align: left; }

.summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.summary b { color: var(--ink); }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: 2px 4px 2px 10px; font-size: 13px; color: var(--ink); }
.chip button { background: none; border: none; color: var(--muted); font-size: 15px; line-height: 1; padding: 0 4px; }
.chip button:hover { color: var(--ink); }
.pick { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; font-size: 13px; color: var(--muted); align-items: center; }
.pick button { background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: 3px 11px; font-size: 13px; color: var(--ink); }
.pick button:hover { border-color: var(--accent); color: var(--accent); }

.card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.card + .card { margin-top: 14px; }
.note { background: var(--panel); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 10px; padding: 12px 16px; font-size: 14px; margin-bottom: 14px; }
.empty { padding: 22px 18px; font-size: 14.5px; color: var(--muted); }
.more { display: block; margin: 14px auto 0; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 9px 18px; color: var(--accent); font-weight: 600; font-size: 14px; }
.more:hover { border-color: var(--accent); }

.tag { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--tint); color: var(--accent); white-space: nowrap; }
.tag.theme { background: #eef0ee; color: #4f5d52; }
.tag.lt { background: var(--lt-tint); color: var(--lt); }
.tag.warn { background: var(--warn-tint); color: var(--warn); }
.tag.grey { background: #eef0ee; color: #4f5d52; }

/* --- buttons in cards ---------------------------------------------------------------------- */
.actions { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 12px; }
.btn { border: none; border-radius: 8px; padding: 8px 14px; background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: 14px; text-decoration: none; }
.btn:hover { filter: brightness(1.08); }
.btn.quiet { background: var(--tint); color: var(--accent); }
.link { background: none; border: none; padding: 0; color: var(--accent); font-weight: 600; font-size: 14px; text-decoration: none; }
.link:hover { text-decoration: underline; }
.src-note { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }

/* --- the login, for a user not logged in ----------------------------------------------------- */
.login-card { max-width: 420px; padding: 20px 22px; }
.login-card h2 { margin: 0 0 4px; font-size: 18px; }
.login-card p { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.login { display: flex; flex-direction: column; gap: 10px; }
.login input { font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; color: var(--ink); }
.login input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.login button { border: none; border-radius: 8px; padding: 10px 14px; background: var(--accent); color: var(--accent-ink); font-weight: 650; }
.error { background: #fdecea; color: #8a1c1c; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; }

/* --- the dialog -------------------------------------------------------------------------------- */
.modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 90; padding: 16px; }
.modal-backdrop.open { display: grid; place-items: center; }
.modal { background: var(--panel); border-radius: 14px; width: 760px; max-width: 100%; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal-head h2 { margin: 0; font-size: 17px; color: var(--accent); line-height: 1.3; }
.modal-head .sub { margin: 3px 0 0; font-size: 13.5px; color: var(--muted); }
.modal-close { background: none; border: none; color: var(--muted); font-size: 24px; line-height: 1; padding: 0 4px; }
.modal-body { overflow-y: auto; padding: 14px 20px 20px; }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0 0 14px; font-size: 13.5px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }

/* Text of a rule: a paragraf, an announcement. */
.rule { font-size: 14.5px; line-height: 1.6; }
.rule p { margin: 0 0 8px; overflow-wrap: anywhere; }
.rule .instr { font-weight: 600; margin-top: 12px; }
.rule .rh { font-weight: 700; margin: 12px 0 4px; }
.rule .sec { font-weight: 700; text-align: center; margin: 14px 0 6px; color: var(--muted); }
.cut { margin: 10px 0 0; font-size: 13px; color: var(--muted); }

/* Lines before and now. */
.part { margin-bottom: 16px; }
.part h3 { margin: 0 0 6px; font-size: 14.5px; }
.diff { display: flex; flex-direction: column; gap: 2px; }
.dl { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.5; padding: 4px 10px; border-radius: 6px; overflow-wrap: anywhere; }
.dl b { flex: none; width: 26px; font-size: 11px; text-transform: uppercase; padding-top: 2px; }
.dl.same { color: var(--muted); }
.dl.del { background: #fdecea; color: #8a1c1c; }
.dl.add { background: #e6f4ea; color: #1e5c32; }
.dl.fold { color: var(--accent); background: none; border: none; text-align: left; font-weight: 600; font-size: 13px; padding-left: 46px; }

@media (max-width: 1000px) {
  .body { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .filters { position: static; display: block; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 0; }
  .filters summary { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; font-weight: 600; font-size: 14.5px; cursor: pointer; list-style: none; }
  .filters summary::-webkit-details-marker { display: none; }
  .filters summary::after { content: "▾"; color: var(--muted); }
  .filters[open] summary::after { content: "▴"; }
  .filters .f-in { display: flex; flex-direction: column; gap: 16px; padding: 4px 16px 16px; }
}
@media (min-width: 1001px) {
  /* The column stands beside the results as they scroll, and scrolls on its own when it is
     taller than the room it has, so the last filters are reached without scrolling the
     page to its end. It ends at the bottom of the screen wherever the page stands
     (sider.js sets max-height from where the column begins: under the dark head at the
     top of the page), and when it is scrolled to its end the page does not move on.
     The padding keeps the options' hover from being cut at the sides. */
  .filters .f-in {
    display: flex; flex-direction: column; gap: 18px;
    max-height: calc(100vh - 32px); overflow-y: auto;
    margin: 0 -10px 0 -8px; padding: 0 10px 8px 8px;
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
  }
  /* Only while it has more than fits: Chrome stops the page also over a column with nothing
     to scroll, and there the wheel should move the page. */
  .filters .f-in.scrolls { overscroll-behavior: contain; }
}

/* --- foot, as on the portal ----------------------------------------------------------------- */
.foot { border-top: 1px solid var(--border); padding: 18px 0 28px; font-size: 13px; color: var(--muted); }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 6px 18px; }
@media (max-width: 760px) {
  .top-in { height: auto; flex-wrap: wrap; gap: 4px 12px; padding-top: 10px; padding-bottom: 6px; }
  .nav { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 4px; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 6px 10px; }
  .who span:last-child { display: none; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  h1 { font-size: 24px; }
  .lead { font-size: 14.5px; }
  .head { padding: 22px 0 24px; }
  .search { padding-left: 12px; }
  .search button { padding: 10px 14px; }
  .modal-body { padding: 12px 14px 18px; }
  .modal-head { padding: 14px; }
}