/* Tillegg til mv.css for den levende appen: oppførsel designet viser, men tavlene ikke trenger. */
html,body{background:#ECEFF3}
#bg{min-height:100vh}
.mv .gauge{color:inherit;transition:transform .15s ease}
.mv a.gauge:hover{transform:translateY(-1px)}
.mv .row.klikk{cursor:pointer}
.mv .row.klikk:hover{background:rgba(255,255,255,.55)}
.mv .row.valgt{background:rgba(255,255,255,.75)}
.mv button:focus-visible,.mv a:focus-visible,.mv input:focus-visible{outline:2px solid #1E2533;outline-offset:2px}
.mv .btn:disabled{opacity:.5;cursor:default}
.mv .lenke{border:0;background:transparent;padding:0;font-size:14px;font-weight:500;color:#535D6E}
.mv .lenke:hover{color:#1B2130}
.skjult{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Logg ut nederst i menyen */
.side .ut{margin-top:8px;padding:0 12px;font-size:13px;color:#666F7E;border:0;background:transparent;text-align:left;height:28px}
.side .ut:hover{color:#1B2130}

/* Statuslinje uten sideinfo når den er smal */
.status .st-side{align-items:center}

/* Nedtrekk (tidsvalg) */
.dd-boks{position:relative;display:inline-flex}
.dd-boks .menu{position:absolute;top:calc(100% + 8px);right:0;z-index:30}
.menu button svg{width:16px;height:16px}

/* Graf: hoverlinje og tips */
.chart .flate{position:absolute;inset:0 72px 26px 0;cursor:crosshair}
.chart .tip{pointer-events:none;z-index:5}
.chart .punkt{position:absolute;width:14px;height:14px;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.2);transform:translate(-50%,-50%);pointer-events:none}
.chart .krysslinje{position:absolute;top:0;width:1px;background:rgba(27,33,48,.35);pointer-events:none}
.tom-graf{height:140px;display:flex;align-items:center;justify-content:center;color:#666F7E;font-size:14px;border-radius:14px;background:rgba(27,33,48,.03)}

/* Skuff og modal som ligger over alt */
#lag .scrim{position:fixed;z-index:40}
#lag .drawer{position:fixed;z-index:41;max-width:calc(100vw - 24px);overflow-y:auto}
#lag .modal-plass{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:20px}
#lag .modal{width:420px;max-width:100%}

/* Toast nederst i midten */
#toaster{position:fixed;left:0;right:0;bottom:28px;display:flex;justify-content:center;pointer-events:none;z-index:60}
#toaster .toast{pointer-events:auto;animation:inn .25s ease}
#toaster .toast button{border:0;background:transparent;color:#B9C4D6;font:inherit;font-weight:500;margin-left:6px;cursor:pointer}
@keyframes inn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#toaster .toast{animation:none}.mv .gauge{transition:none}}

/* Innlogging */
.sentrert{min-height:100vh;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap;padding:60px 20px}
.innlogging{position:relative;width:420px;max-width:100%;padding:40px 36px 32px;display:flex;flex-direction:column;align-items:center;gap:22px;border-radius:30px}
.inn-tittel{font-size:28px;font-weight:600;letter-spacing:-.025em;text-align:center}
.inn-tekst{font-size:15px;color:#535D6E;text-align:center}
.inn-feil{font-size:13px;color:var(--red-t);text-align:center;min-height:0}
.inn-feil:empty{display:none}
.inn-ringer{position:absolute;width:900px;height:900px;left:50%;top:50%;transform:translate(-50%,-50%);opacity:.55}

/* Varsel om passnøkkel etter e-postinnlogging */
.tilbud{padding:16px 18px 16px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-radius:18px}

/* Nettbrett: menyen blir en linje øverst, målerne ligger med ringen til venstre */
@media (max-width:1100px){
  .shell{flex-direction:column;align-items:stretch;gap:18px}
  .side{max-width:none;flex:none;flex-direction:row;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px}
  .side .brand{padding:0 6px 0 2px}
  .side .nav{flex-direction:row;flex-wrap:wrap;margin-left:auto;gap:2px}
  .side .nav a svg{display:none}
  .side .machine{display:none}
  .side .ut{margin:0}
  .gauges{grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr));gap:18px}
  .gauges .gauge{display:grid;grid-template-columns:150px minmax(0,1fr);grid-template-rows:auto auto 1fr auto;column-gap:18px;row-gap:8px;padding:18px 20px;align-items:center}
  .gauges .gauge .ring{grid-column:1;grid-row:1/5;width:150px;height:150px;margin:0}
  .gauges .gauge .big{font-size:38px}
  .gauges .gauge .ring .sub{display:none}
  .gauges .gauge .g-head{grid-column:2;grid-row:1}
  .gauges .gauge .g-sub{display:block;grid-column:2;grid-row:2}
  .gauges .gauge .spark{grid-column:2;grid-row:3}
  .gauges .gauge .spark-meta{grid-column:2;grid-row:4}
}
.g-sub{display:none}

/* mv.css setter .mv button{color:inherit}, som ellers gir mørk tekst på mørk knapp */
.mv .btn-p{color:#fff}
/* Lange «Hva»-tekster fra MASKIN.md: to linjer, hele teksten ved hover */
.mv .kort{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mv .en-linje{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){
  .shell{padding:12px}
  .mv .row{padding-left:16px;padding-right:16px}
  .skjul-smal{display:none !important}
  .gauges .gauge{grid-template-columns:110px minmax(0,1fr)}
  .gauges .gauge .ring{width:110px;height:110px}
  .gauges .gauge .big{font-size:30px}
}