/* RENGO SYS · Administration in the approved design (docs/briefs/admin-redesign.md): the customer-service system
   (web/cs-system.css) with a shade of its own per department. The hue, saturation and accent lightness of the page live on
   :root (set by web/admin.js from the tints in web/admin-areas.js); they are registered, so a change of department
   crossfades in ~250 ms. Low saturation and dark text everywhere; every accent keeps ≥ 4.5:1 on its tint. */
@property --dept-h{syntax:"<number>";inherits:true;initial-value:30}
@property --dept-s{syntax:"<number>";inherits:true;initial-value:34}
@property --dept-l{syntax:"<number>";inherits:true;initial-value:32}
:root{transition:--dept-h .25s ease,--dept-s .25s ease,--dept-l .25s ease;
  --ad3-bg:hsl(var(--dept-h) calc(var(--dept-s)*1.15%) 96.4%);--ad3-soft:hsl(var(--dept-h) calc(var(--dept-s)*1%) 94%);--ad3-line:hsl(var(--dept-h) calc(var(--dept-s)*.6%) 88%);
  --ad3-acc:hsl(var(--dept-h) calc(min(70,var(--dept-s) + 12)*1%) calc(var(--dept-l)*1%));
  --ad3-glow:hsl(var(--dept-h) calc(var(--dept-s)*1.5%) 72% / .30);--ad3-glow2:hsl(calc(var(--dept-h) + 24) calc(var(--dept-s)*1.2%) 74% / .20)}
html.c3-shot,html.c3-shot:root{transition:none}
@media (prefers-reduced-motion:reduce){:root{transition:none}}

/* ---------- the page and the shell around it, in the department's shade ---------- */
.shell:has(.ad3) .workspace,.shell:has(.ad3-dept) .workspace{background:var(--ad3-bg)}
.shell:has(.ad3) .topbar.c3-topbar,.shell:has(.ad3-dept) .topbar.c3-topbar{background:color-mix(in srgb,var(--ad3-bg) 84%,transparent)}
.c3.ad3{--bg:var(--ad3-bg);background:var(--ad3-bg)}
.ad3-wash{position:absolute;inset:0 0 auto;height:480px;-webkit-mask-image:linear-gradient(#000 45%,transparent);mask-image:linear-gradient(#000 45%,transparent);pointer-events:none;background:radial-gradient(760px 320px at 14% -80px,var(--ad3-glow),transparent 70%),radial-gradient(820px 340px at 88% -100px,var(--ad3-glow2),transparent 70%)}
.c3-topbar .c3-dsw-menu a[aria-current=page]{background:var(--ad3-soft);color:var(--ad3-acc)}
.shell:has(.c3:not(.ad3)) .c3-topbar .c3-dsw-menu a[aria-current=page]{background:var(--brand-soft);color:var(--brand-strong)}
/* the content slides in when the department changed */
/* (top, not transform: a transformed ancestor would carry the fixed ⓘ explanations and the sheet away from the screen) */
.ad3-enter .ad3-page{position:relative;animation:ad3in .36s cubic-bezier(.2,.8,.2,1)}
@keyframes ad3in{from{opacity:0;top:10px}to{opacity:1;top:0}}
/* a live refresh draws the page again without the first-time motion */
.ad3-still .c3-draw{animation:none;stroke-dashoffset:0}.ad3-still .c3-fadein{animation:none;opacity:1}.ad3-still .c3-cele{animation:none}

/* ---------- Oversikt ---------- */
.ad3 .c3-hero h1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ad3 .c3-hero h1 em{color:var(--text)}
.ad3-lead{margin:8px 0 0;color:var(--text-2);font-size:15px;max-width:620px}
.ad3-cd{width:8px;height:8px;border-radius:50%;flex:none}.ad3-cd.g-danger{background:var(--bad-ring)}.ad3-cd.g-warning{background:var(--warn-ring)}.ad3-cd.g-info{background:var(--brand)}
.ad3 .c3-plan .c3-prog i{background:linear-gradient(90deg,#3fa7f5,var(--brand-strong))}
.ad3 .c3-plan{box-shadow:var(--sh),inset 0 0 0 1px var(--ad3-line)}
/* «I dag»: one line each */
.ad3-today{margin-bottom:22px}
.ad3-tls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:0 8px 10px}
.ad3-tl{display:flex;gap:12px;align-items:center;padding:10px 10px 12px;min-width:0;border-inline-start:1px solid var(--line)}.ad3-tl:first-child{border-inline-start:0}
.ad3-tl b{display:block;font-size:15px;font-weight:700;line-height:1.3}.ad3-tl span:not(.c3-lead):not(.c3-num){display:block;font-size:13px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad3-tl .c3-btn{flex:none}
.ad3-cols{display:grid;grid-template-columns:420px minmax(0,1fr);gap:24px;align-items:start;margin-bottom:24px}
/* the departments' tiles are the first column: on the left in nb/en, on the right in ar (the grid follows the writing direction) */
.ad3-lcol,.ad3-rcol{min-width:0}.ad3-rcol{order:-1}
/* «Krever handling»: three groups, each with its count and ⓘ */
.ad3-grp{border-top:1px solid var(--line)}
.ad3-gh{display:flex;align-items:center;gap:10px;padding:12px 18px 8px}
.ad3-gh h3{margin:0;font-size:14px;font-weight:700;display:flex;align-items:center;gap:4px}
.ad3-gd{width:10px;height:10px;border-radius:50%}.g-danger .ad3-gd{background:var(--bad-ring)}.g-warning .ad3-gd{background:var(--warn-ring)}.g-info .ad3-gd{background:var(--brand)}
.ad3-grp.g-danger .ad3-gh{background:linear-gradient(90deg,var(--bad-soft),transparent 70%)}[dir=rtl] .ad3-grp.g-danger .ad3-gh{background:linear-gradient(270deg,var(--bad-soft),transparent 70%)}
.ad3-more{margin-inline-start:auto}
.ad3-grp .c3-row:first-child{border-top:1px solid var(--line)}
.ad3-area{display:inline-flex;align-items:center;gap:6px;flex:none;font-weight:650;color:var(--text-2);white-space:nowrap}
.ad3 .c3-ri .c3-r .c3-iconbtn{width:36px;height:36px;border-radius:10px}
.ad3 .c3-ri .c3-r .c3-iconbtn:hover{background:var(--ad3-soft);color:var(--ad3-acc)}
.ad3-live{gap:6px}.ad3 .c3-ch .c3-keys+.ad3-live{margin-inline-start:12px}
/* the departments as tiles, each in its own shade (--th, --ts, --tl set on the tile) */
.ad3-depts .c3-sech{margin-bottom:4px;row-gap:2px}.ad3-depts .c3-sech h2{white-space:nowrap}
.ad3-dhint{margin:0 0 12px;font-size:13px;color:var(--text-3)}
.ad3-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ad3-tile{--tbg:hsl(var(--th) calc(var(--ts)*1%) 96%);--tac:hsl(var(--th) calc(min(70,var(--ts) + 12)*1%) calc(var(--tl)*1%));position:relative;display:flex;flex-direction:column;gap:6px;padding:14px 14px 12px;min-width:0;color:var(--text)!important;text-decoration:none!important;
  background:linear-gradient(180deg,var(--tbg),#fff 62%);box-shadow:var(--sh),inset 0 0 0 1px hsl(var(--th) calc(var(--ts)*.6%) 90%)}
.ad3-tile:hover,.ad3-tile:focus-within{z-index:20;box-shadow:var(--sh-hi),inset 0 0 0 1.5px var(--tac)}
/* v1.66 one truth: the name is the tile's link and covers the card; the figure (its sources) and «åpne saker» lie above it */
.ad3-tlink{color:inherit!important;text-decoration:none!important;border-radius:inherit}.ad3-tlink::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
.ad3-tlink:focus-visible{outline:none}.ad3-tlink:focus-visible::after{outline:2px solid var(--tac);outline-offset:2px}
.ad3-tile .ad3-needb,.ad3-tile .ad3-kla{position:relative;z-index:2}
.ad3-needb{text-align:start;align-self:flex-start}.ad3-needb.ad3-tf{font-size:12.5px;font-weight:650;color:var(--text-2)}
.ad3-kla{color:var(--text-2)!important;text-decoration:underline dotted 1.5px!important;text-decoration-color:var(--line-2)!important;text-underline-offset:3px;align-self:flex-start}
.ad3-tfs{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px}.ad3-info{font-size:12.5px;color:var(--text-3,#6b6a75)}
.ad3-th{display:flex;align-items:center;gap:8px;min-width:0}.ad3-th .n{flex:1;font-size:14px;font-weight:700;min-width:0;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.ad3-th .c3-pill{flex:none}
.ad3-tv .c3-pill{margin-inline-start:auto;align-self:center}
.ad3-tv{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ad3-big{font-size:30px;font-weight:780;letter-spacing:-.03em;line-height:1.05}[dir=rtl] .ad3-big{letter-spacing:0}.ad3-big small{font-size:15px;font-weight:650;color:var(--text-2)}
.ad3-tv .l,.ad3-gl{font-size:13px;color:var(--text-2);font-weight:600}
.ad3-kl{font-size:12.5px;color:var(--text-3)}
/* docs/briefs/fin-home-tile.md: Økonomi's tile — the money now with its verdict, the lowest point, the open invoices (information) */
.ad3-fin{display:flex;flex-direction:column;gap:3px;min-width:0}.ad3-fin>span{overflow-wrap:anywhere}
.ad3-fv.ok{color:var(--ok,#11703f);font-weight:650}.ad3-fv.bad{color:var(--bad,#b8292b);font-weight:650}
.ad3-sp{display:block;min-height:34px;margin-top:2px}
.ad3-tf{font-size:12px;color:var(--text-3)}
.ad3-new{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--text-3);min-height:34px}
.ad3-tile .c3-stars{font-size:14px}
/* hover: the three most urgent things of the department */
.ad3-worst{position:absolute;top:calc(100% - 6px);inset-inline:8px;z-index:30;display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:14px;background:#fff;box-shadow:var(--sh-pop);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .18s,transform .3s var(--spring),visibility .18s;pointer-events:none}
.ad3-worst .h{font-size:12px;font-weight:700;color:var(--text-3)}
.ad3-worst .w{display:flex;gap:8px;align-items:baseline;font-size:13px;color:var(--text-2);line-height:1.4}.ad3-worst .w i{width:7px;height:7px;border-radius:50%;flex:none;transform:translateY(-1px)}
.ad3-worst .g-danger i{background:var(--bad-ring)}.ad3-worst .g-warning i{background:var(--warn-ring)}.ad3-worst .g-info i{background:var(--brand)}.ad3-worst .none{color:var(--text-3)}
@media (hover:hover){.ad3-tile:hover .ad3-worst,.ad3-tile:focus-visible .ad3-worst{opacity:1;visibility:visible;transform:none}}
/* arranging the departments, on the overview */
.ad3-depts .ad-nav.arranging{position:static;background:#fff;border:0;border-radius:var(--r);box-shadow:var(--sh)}
.ad3 .ad3-depts .ad-nav.arranging .btn{height:auto}
/* the database card (owner) keeps its own look inside the page */
.ad3-legacy{max-width:none}.ad3-legacy .panel{border-radius:var(--r);border-color:var(--line);box-shadow:var(--sh)}
.ad3 :where(.ad3-legacy,.ad-nav.arranging) button.btn{border:1px solid transparent}

/* ---------- the other departments: their own pages, in their shade ---------- */
.ad3-dept{position:relative;min-height:calc(100vh - 62px)}
.ad3-dept .ad3-page{position:relative}
.ad3-dept>.ad3-wash{inset:-30px 0 auto}
.main:has(>.ad3-dept){position:relative}
.ad3-dept .page-heading h1{display:flex;align-items:center;gap:10px}
.ad3-dept .eyebrow{color:var(--ad3-acc)}
.ad3-dept .hd-tab.on{background:var(--ad3-soft);color:var(--ad3-acc);box-shadow:inset 0 -2px 0 var(--ad3-acc)}
.ad3-dept .ad-kpi b{color:var(--text,#1c1a24)}
.ad3-dept .ad-kpi{box-shadow:inset 3px 0 0 var(--ad3-acc)}[dir=rtl] .ad3-dept .ad-kpi{box-shadow:inset -3px 0 0 var(--ad3-acc)}
.ad3-dept .panel{border-color:var(--ad3-line)}

/* ---------- smaller screens ---------- */
@media (max-width:1180px){.ad3-cols{grid-template-columns:minmax(0,1fr)}.ad3-rcol{order:0}.ad3-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:980px){.ad3-tls{grid-template-columns:minmax(0,1fr)}.ad3-tl{border-inline-start:0;border-top:1px solid var(--line)}.ad3-tl:first-child{border-top:0}.ad3-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .ad3 .c3-hero h1{font-size:25px}
  .ad3-tiles{gap:10px}.ad3-tile{padding:12px}.ad3-big{font-size:25px}.ad3-kl,.ad3-tf{display:none}.ad3-th .c3-pill{display:none}
  .ad3-dhint{display:none}
  .ad3-tl{padding:10px 6px}.ad3-tl .c3-btn{height:40px}
  .ad3 .c3-ch .ad3-live,.ad3-queue .c3-keys{display:none!important}
  .ad3-dept .ad3-page .page-heading{margin-top:4px}
}

/* ---------- v1.71 «Interne saker» on every department page (web/dept-internal.js) ---------- */
.di-sec .heading-actions{display:flex;align-items:center;gap:10px}
.di-count{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel,#fff);font-size:13.5px;color:var(--text-2)}
.di-count .c3-num{font-size:16px;font-weight:700;color:var(--text)}
.di-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.di-list li{margin:0}
.di-row{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel,#fff);text-align:start;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.di-row:hover,.di-row:focus-visible{border-color:var(--accent,#0a8cf0);box-shadow:0 1px 6px rgba(28,26,36,.08)}
.di-main{flex:1;min-width:0;display:grid;gap:2px}
.di-main b{font-weight:650;display:flex;gap:6px;align-items:baseline;min-width:0}
.di-main b bdi{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.di-main small{color:var(--text-2)}
.di-sub{margin:16px 0 8px;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-2)}
.di-closed .di-row{opacity:.75}
.di-b .in-card{margin-top:14px}
.di-b .di-meta{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.di-b .di-close{margin:12px 0}
/* v1.78.x site audit G1: the headline's period on a tile; «til info» beside the chips; Tilgang's section jumps */
.ad3-kl .ad3-per{color:var(--text-3);font-weight:500}.ad3-kl b{color:var(--text-2)}
.ad3 .ad3-infolink{align-self:center}
.ad-acc-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.ad-acc-people{display:grid;gap:16px;margin-bottom:16px}.ad-acc-ck{display:inline-flex;min-width:44px;min-height:44px;align-items:center;justify-content:center}
.ad-acc-roles{margin-top:16px}.ad-acc-roles>summary{cursor:pointer;font-weight:700;padding:10px 0;min-height:44px}

/* ---------- RENGO SYS · the app's frame on phones and tablets (v1.95.0, PM mobile shell audit; tests/mobile-shell.mjs).
   At the end of the last stylesheet, so the frame's rules win over a section's own sizes where it matters (kept in this
   file, not a new one: the first screen stays within perf's 20 static files). */

/* hidden means hidden, whatever display a class gives the element (e.g. .op-viewers{display:grid}) */
[hidden]{display:none!important}

/* contrast ≥ 4.5:1: muted text on the page and on cards, the main button, «SYS» under the logo, a calm «ok» line */
:root{--muted:#56708a}
.btn.primary{background:#0574aa}.btn.primary:hover{background:var(--blue-strong)}
.brand-copy span{color:#b54f06;font-size:10.5px;letter-spacing:.32em}
.ok{color:#1f7a3d}

/* dialogs: the dynamic viewport (the phone's address bar comes and goes), the notch and the home bar */
.modal-backdrop{padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.modal{max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
.modal:focus{outline:none}
.ms-ask .modal-backdrop{z-index:200}.ms-ask .modal{width:min(100%,440px)}.ms-ask .modal p{margin-bottom:14px}
.ms-ask .form-footer{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}

/* the search: on a touch screen no keyboard hints, and its own close button */
.c3-pal-x{display:none}
@media (hover:none),(pointer:coarse){
  .c3-kbd,.c3-pal .ft{display:none!important}
  .c3-pal-x{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;margin-inline-end:-10px;border-radius:12px;color:var(--text-2)}
  .c3-pal-x:active{background:var(--soft)}
}

/* a strip of tabs that scrolls fades where more tabs are (web/app.js sets data-more="start end") */
:is(.c3-tabs,.task-tabs,.hd-tabs,.fin .tabs)[data-more~=end]{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent)}
:is(.c3-tabs,.task-tabs,.hd-tabs,.fin .tabs)[data-more~=start]{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 40px),transparent)}
[dir=rtl] :is(.c3-tabs,.task-tabs,.hd-tabs,.fin .tabs)[data-more~=end]{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 40px),transparent)}
[dir=rtl] :is(.c3-tabs,.task-tabs,.hd-tabs,.fin .tabs)[data-more~=start]{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent)}
:is(.c3-tabs,.task-tabs,.hd-tabs,.fin .tabs)[data-more="start end"],[dir=rtl] :is(.c3-tabs,.task-tabs,.hd-tabs,.fin .tabs)[data-more="start end"]{-webkit-mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent)}

/* the top bar's language list as a small face, and «Logg ut» as an icon — only on a narrow phone */
.lang-face{display:none}
.topbar [data-action=logout] .icon{display:none}

@media (max-width:980px){
  /* iOS zooms into a field under 16 px: every field is at least 16 px (a bigger one keeps its size) */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]),select,textarea,[contenteditable]:not([contenteditable=false]){font-size:max(16px,1em)!important}
  [contenteditable].rt-s-l{font-size:18px!important}[contenteditable].rt-s-xl{font-size:22px!important}

  /* the notch, the rounded corners and the home bar (portrait and landscape) */
  /* a field or button scrolled to (focus, «scroll into view») stops above the bottom menu and under the top bar */
  html{scroll-padding-top:calc(72px + env(safe-area-inset-top));scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .topbar,.topbar.c3-topbar{padding-top:env(safe-area-inset-top);padding-left:max(12px,calc(env(safe-area-inset-left) + 8px));padding-right:max(12px,calc(env(safe-area-inset-right) + 8px))}
  .main{padding-bottom:calc(90px + env(safe-area-inset-bottom));padding-left:max(16px,calc(env(safe-area-inset-left) + 8px));padding-right:max(16px,calc(env(safe-area-inset-right) + 8px))}
  .c3-page{padding-bottom:calc(112px + env(safe-area-inset-bottom));padding-left:max(32px,calc(env(safe-area-inset-left) + 8px));padding-right:max(32px,calc(env(safe-area-inset-right) + 8px))}
  .mobile-nav{padding:4px max(8px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
  .c3-toast{bottom:calc(86px + env(safe-area-inset-bottom))}

  /* the bottom menu: 12 px labels on one line, each inside its own item (a long one ends in …) */
  .mobile-nav .nav-item{min-width:0;font-size:12px;padding:0 2px;gap:3px}
  .mobile-nav .nav-item>span:not(.nav-badge){display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}
  .mobile-nav .nav-item>span.nl-s{display:none}

  /* the top bar on a tablet: the page's name, the search and the buttons side by side, never on top of each other */
  .c3-bar{min-width:0}.top-actions{flex:none}
  .c3-bar>.c3-iconbtn,.c3-bar>.c3-tourbtn,.c3-bar>.c3-crumb{flex:none}
  .c3-live,.c3-tourbtn .c3-tl{display:none!important}
  .c3-tourbtn{width:44px;height:44px;padding:0;justify-content:center}
  .c3-cmdk{min-width:120px}
  .c3-crumb{min-height:44px}

  /* tap targets ≥ 44 px */
  .bell{width:44px;height:44px}
  .topbar [data-action=logout]{min-height:44px}
  .ad3-needb,.ad3-kla{min-width:44px;min-height:44px;display:inline-flex;align-items:center}
  .ix-btn{width:44px;height:44px;margin:-14px -12px}
  .c3-dots-b{min-width:44px;min-height:44px}
  .c3-dots-m .c3-mi,.c3-dots-m .c3-del,.c3-dots-m .c3-edit{min-height:44px}
  .so-send-btn{min-width:44px;min-height:44px}
  .lang-chip{min-height:44px;display:inline-flex;align-items:center}
  a.gl-title{display:block;padding-block:10px;margin-block:-10px}
  .gl-tools select{min-height:44px}
  .gs-menu>summary{min-width:44px;min-height:44px;display:inline-grid;place-items:center}
  /* (review of #320) Saker's search field keeps room for its placeholder */
  .ck-input{min-width:min(100%,240px)}
}

@media (max-width:760px){
  .c3-page{padding-left:max(16px,calc(env(safe-area-inset-left) + 8px));padding-right:max(16px,calc(env(safe-area-inset-right) + 8px))}
  .c3-sheet,.c3-sheet.wide{max-height:90dvh;padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  /* the page's name in the phone's top bar: one line, «…» when it is long, never under the search or the bell */
  .srx-here{overflow:hidden}
  .srx-here-n{white-space:nowrap;max-width:100%;padding:0 4px}
  .srx-here-n>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .c3-dsw{min-width:0;flex:0 1 auto}.c3-dsw>summary{max-width:100%}.c3-dsw>summary span{white-space:nowrap;min-width:0}
  .topbar.c3-topbar{gap:6px}
  /* what hangs under the top bar moves down with it when the notch adds space above it */
  .c3-tabs{top:calc(60px + env(safe-area-inset-top))}.c3-dsw-menu,.ntf-panel{top:calc(60px + env(safe-area-inset-top))}
}

@media (max-width:560px){
  .mobile-nav .nav-item>span.nl-f{display:none}
  .mobile-nav .nav-item>span.nl-s{display:block}
}

@media (max-width:420px){
  .topbar.c3-topbar.srx-topbar .lang.lang-faced{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;flex:none;border:1px solid var(--line);border-radius:10px;background:#fff}
  .topbar .lang-faced .lang-face{display:inline-flex;flex-direction:column;align-items:center;gap:1px;color:#36556b;line-height:1;pointer-events:none}
  .topbar .lang-faced .lang-face b{font-size:10px;font-weight:800}
  .topbar .lang-faced select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0}
  .topbar .lang-faced:focus-within{outline:3px solid var(--orange);outline-offset:2px}
  .topbar.c3-topbar [data-action=logout]{width:44px;height:44px;padding:0;justify-content:center;align-items:center}
  .topbar [data-action=logout] .icon{display:block;margin:0}
  .topbar [data-action=logout] .lo-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .top-actions{gap:4px}
}

/* ---------- Vedlikehold (docs/briefs/maintenance.md): the owner's window on the site's own state ----------
   Quiet everywhere but one place: the bench of screens, where each frame is the real page at its real size, scaled to
   the column it has, under a thin bezel with its size printed above it. */
.mt{display:grid;gap:16px;--mt-good:#22704a;--mt-good-bg:#e5f3eb;--mt-bad:#a8321f;--mt-bad-bg:#fbe9e5;--mt-unk:#5b6670;--mt-unk-bg:#eef0f2}
.mt .panel h2{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-size:18px}
.mt .panel h3{margin:18px 0 2px;font-size:15px}
.mt-help{margin:0 0 12px;color:var(--muted);max-width:68ch}
.mt-q{margin:0;color:var(--muted);font-weight:700}
.mt-answer{display:flex;align-items:flex-start;gap:10px;margin:6px 0 4px;font-size:clamp(19px,2.4vw,24px);line-height:1.3;font-weight:800;color:var(--mt-unk)}
.mt-answer .icon{flex:none;margin-top:.15em;width:1em;height:1em}
.mt-answer.good{color:var(--mt-good)}.mt-answer.bad{color:var(--mt-bad)}
.mt-ex .mt-answer{font-size:17px}
.mt-rule{margin:0 0 14px;color:var(--muted);font-size:13px;max-width:68ch}
.mt-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 10px}
.mt-fact{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background:var(--ad3-soft,#f2f4f6)}
.mt-fact span{font-size:12px;color:var(--muted);font-weight:700}
.mt-fact b{font-size:20px;font-variant-numeric:tabular-nums;color:var(--ink)}
.mt-fact small{color:var(--muted)}
.mt-fact.sev1 b{color:var(--mt-bad)}.mt-fact.sev2 b{color:#8a5a00}
.mt-meta{margin:0;color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.mt-jobs{margin-top:10px}.mt-jobs summary{cursor:pointer;font-weight:700;color:var(--ad3-acc,var(--blue))}
.mt-jobs ul,.mt-seen,.mt-set ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px}
.mt-jobs li{display:grid;grid-template-columns:18px minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid var(--ad3-line,var(--line))}
.mt-jobs li.good .icon{color:var(--mt-good)}.mt-jobs li.bad{color:var(--mt-bad)}.mt-jobs li small{color:var(--muted);font-variant-numeric:tabular-nums}
.mt-seen li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:6px 0;border-bottom:1px solid var(--ad3-line,var(--line))}
.mt-seen li b{font-variant-numeric:tabular-nums}.mt-seen li span{color:var(--muted)}
.mt-seen li em{font-style:normal;font-size:12px;font-weight:700;color:var(--mt-good);background:var(--mt-good-bg);border-radius:999px;padding:1px 8px}
/* the controls */
.mt-controls{display:grid;gap:10px;margin-bottom:14px}
.mt-pagefield{max-width:520px}.mt-pagefield select{width:100%}
.mt-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.mt-lbl{font-size:13px;font-weight:700;color:#3c6079;min-width:64px}
.mt-chip{border:1px solid var(--ad3-line,var(--line));background:#fff;color:var(--ink);border-radius:999px;padding:6px 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;min-height:34px}
.mt-chip:hover{border-color:var(--ad3-acc,var(--blue))}
.mt-chip[aria-pressed=true]{background:var(--ad3-acc,var(--blue));border-color:var(--ad3-acc,var(--blue));color:#fff}
.mt-chip:focus-visible,.mt-set a:focus-visible{outline:2px solid var(--ad3-acc,var(--blue));outline-offset:2px}
.mt-own .field{width:130px}
.mt-pairnote{margin:0}
.mt-open{justify-self:start}
/* the bench of screens */
.mt-frames{display:flex;flex-wrap:wrap;align-items:flex-start;gap:18px;padding:16px;border-radius:16px;background:hsl(var(--dept-h) calc(var(--dept-s)*.5%) 22%);margin:0 -4px}
.mt-frame{margin:0;flex:1 1 0;min-width:min(100%,220px);display:flex;flex-direction:column;gap:6px}
.mt-frame figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;color:hsl(var(--dept-h) 20% 88%);font-size:12px}
.mt-frame figcaption b{color:#fff;font-size:14px;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.mt-box{position:relative;overflow:hidden;direction:ltr;border-radius:10px;background:#fff;box-shadow:0 0 0 5px hsl(var(--dept-h) 10% 10%),0 0 0 6px hsl(var(--dept-h) 12% 34%)}
.mt-frame[data-w="375"] .mt-box{border-radius:18px}
.mt-box iframe{position:absolute;top:0;left:0;border:0;transform-origin:0 0;background:#fff}
/* Examine and the settings */
.mt-steps{margin:0;padding-inline-start:22px;display:grid;gap:8px;max-width:72ch}.mt-steps li{overflow-wrap:anywhere}
.mt-exframe{height:620px;border:1px solid var(--ad3-line,var(--line));border-radius:12px;overflow:hidden;margin:12px 0 8px}
.mt-exframe iframe{width:100%;height:100%;border:0}
.mt-set a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:10px;background:var(--ad3-soft,#f2f4f6);color:var(--ink);font-weight:600;text-decoration:none}
.mt-set a:hover{background:var(--ad3-line,var(--line))}
[dir=rtl] .mt-set a .icon{transform:scaleX(-1)}
/* the PM's read login (pm-read-login-2): one row, and the pair once in a box that wraps on a phone */
.mt-pm{margin-top:12px;padding:12px;border-radius:10px;border:1px solid var(--ad3-line,var(--line))}
.mt-pm-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.mt-pm-head>div{display:grid;gap:2px;min-width:0}.mt-pm-head small{color:var(--muted);overflow-wrap:anywhere}
.mt-pm-box{margin-top:12px;padding:12px;border-radius:10px;background:var(--ad3-soft,#f2f4f6);display:grid;gap:10px;justify-items:start}
.mt-pm-box dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;width:100%}
.mt-pm-box dt{font-weight:600}.mt-pm-box dd{margin:0;min-width:0}
.mt-pm-box code{display:inline-block;max-width:100%;overflow-wrap:anywhere;word-break:break-all;user-select:all;font-size:13.5px;unicode-bidi:isolate}
.mt-pm-box p{margin:0;display:flex;gap:6px;align-items:flex-start;color:var(--ink)}.mt-pm-box p .icon{flex:none;margin-top:2px}
@media (max-width:640px){.mt-frames{padding:12px;margin:0}.mt-exframe{height:480px}}
.mt-code{display:grid;gap:2px;margin:6px 0 0;padding:8px 10px;border-radius:8px;background:var(--ad3-soft,#f2f4f6);font-size:12.5px;line-height:1.5;text-align:left;overflow-wrap:anywhere;white-space:normal}

/* «Meld et problem» (docs/briefs/report-tool.md): what the first screen needs of it; the tool's own styles are
   web/report-tool.css, loaded when it opens */
/* the top bar's button: the bell's look (web/styles.css .bell), not its class (the bell's badge looks for .bell) */
.rt-open{position:relative;border:1px solid var(--line,#dae8ef);background:#fff;border-radius:10px;width:40px;height:38px;display:inline-flex;align-items:center;justify-content:center;color:#36556b;cursor:pointer;flex:none}
.rt-open:hover,.rt-open:focus-visible{border-color:#9fcbe6;color:#e0463a}.rt-open .icon{display:block}
@media (max-width:640px){.rt-open{width:36px;height:36px}}
@media (max-width:1024px) and (pointer:coarse){.rt-open{width:44px;height:44px}}
/* the overview's Vedlikehold tile: its number looks like the departments' but is not one of their queue */
.ad3-tile .rt-big{font-size:30px;font-weight:780;letter-spacing:-.03em;line-height:1.05}[dir=rtl] .ad3-tile .rt-big{letter-spacing:0}
.ad3-tile .rt-tilen{text-decoration:none;color:inherit;min-width:44px;min-height:44px;display:inline-flex;align-items:center}
@media (max-width:640px){.ad3-tile .rt-big{font-size:25px}}
/* (site-review 3.11) a phone's top bar holds the page's name and four 44 px buttons since «Meld et problem» came: the
   spacing and the small page icon before the name give way on narrow screens (not the buttons, not the name) */
@media (max-width:420px){.topbar .srx-here-n>svg{display:none}.topbar .srx-here-n{padding:0 2px}.topbar,.topbar.c3-topbar{gap:4px;padding-left:max(8px,calc(env(safe-area-inset-left) + 4px));padding-right:max(8px,calc(env(safe-area-inset-right) + 4px))}.top-actions{gap:2px}}
/* (no-sheets-site, owner 6 Nov 17:38) on a phone a row opens the thing itself (no sheet), so its own actions — «Utsett» and
   «Merk som utført» — stay on the row, on a line of their own, at least 44 px (the shared rows hide .c3-r on a phone) */
@media (max-width:760px){.ad3 .c3-row .c3-ri{flex-wrap:wrap}.ad3 .c3-row .c3-ri .c3-r{display:flex;justify-content:flex-start;flex:1 1 100%}.ad3 .c3-ri .c3-r .c3-iconbtn{width:44px;height:44px}}
/* (open-in-place-site) a row of «Krever handling» opened under itself (#/admin?open=<key>): what to do, the department,
   when, and the row's actions; the list's whole width, the fields stack on a phone */
.ad3 .c3-row.open{background:var(--soft)}
.ad3-in{border-top:1px solid var(--line);background:var(--soft);padding:12px 16px 16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.ad3-in-t,.ad3-in-do{margin:0;overflow-wrap:anywhere}.ad3-in-do{color:var(--text-2)}
.ad3-in-m{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;color:var(--text-2);font-size:13px}
.ad3-in-lv{display:inline-flex;align-items:center;gap:6px;font-weight:650}
.ad3-in-acts{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:640px){.ad3-in{padding:12px}.ad3-in-acts{flex-direction:column;align-items:stretch}.ad3-in-acts .c3-btn{min-height:44px;justify-content:center}}