@font-face {
  font-family: "EMSSans";
  src: url("../fonts/emssans-regular.woff2") format("woff2"),
       url("../fonts/emssans-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "EMSSans";
  src: url("../fonts/emssans-bold.woff2") format("woff2"),
       url("../fonts/emssans-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================
   Tokens
   ========================================================== */
:root {
  --topbar-h: 96px;

  --ticker-height: 78px;
  --label-width: 180px;
  --progress-height: 4px;

  /* Layout */
  --slope-w: 50vw;                 /* left-slope width */
  --slope-angel: 70deg;            /* left-slope angel */
  --content-in-slope: 0.8;         /* oncall max width as fraction of slope */
  --oncall-max: calc(var(--slope-w) * var(--content-in-slope));

  /* Brand */
  --brand-blue: #1F3A5E;
}

/* ==========================================================
   Base
   ========================================================== */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0b1220;
  color: #e5e7eb;

  /* reserve space for topbar + ticker */
  padding-top: var(--topbar-h);
  padding-bottom: var(--ticker-height);

  position: relative;
  isolation: isolate;
}

.muted {
  opacity: 0.75;
  font-size: 12px;
}

/* ==========================================================
   Topbar (logo + clock)
   ========================================================== */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  height: var(--topbar-h);
  padding: 0 24px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background: rgba(31, 58, 94, 0.95); /* --brand-blue w/ opacity */
  backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  z-index: 20;
}

.brand-logos {
  display: flex;
  align-items: center;
}

.brand-logos img {
  /* Reduced size; stable on large screens */
  height: 58px;
  width: auto;
  object-fit: contain;

  filter:
    drop-shadow(0 8px 24px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 14px rgba(255, 255, 255, 0.18));
}

#clock {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;

  font-family: "EMSSans", "Montserrat", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: 1px;

  font-size: 64px;
  line-height: 1;

  color: rgba(255, 255, 255, 0.96);

  text-shadow:
    0 10px 26px rgba(0, 0, 0, 0.55),
    0 3px 8px rgba(0, 0, 0, 0.45),
    0 0 10px rgba(255, 255, 255, 0.28),
    0 0 22px rgba(255, 255, 255, 0.18);
}

/* ==========================================================
   On-call panel (left slope)
   ========================================================== */
.oncall {
  padding: 14px 18px;

  /* fixed design: large screens only */
  width: var(--oncall-max);
  max-width: var(--oncall-max);
  min-height: calc(100vh - var(--topbar-h) - var(--ticker-height));

  margin-left: 0;
  margin-right: auto;

  overflow: hidden;
  display: flex;
  flex-direction: column;

  position: relative;
  z-index: 1;
}

.oncall-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 10px;
}

.oncall h3 {
  margin: 0 0 6px;
  font-family: "EMSSans";
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.8px;
  opacity: 0.85;
  color: rgba(255, 255, 255, 0.95);

  text-shadow:
    0 8px 22px rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.35),
    0 0 8px rgba(255, 255, 255, 0.18),
    0 0 18px rgba(255, 255, 255, 0.10);
}

.partners{
  margin-top: auto;      /* skubber logoerne helt ned */
  margin-bottom: 40px;   /* luft til bunden */

  display: flex;
  align-items: center;
  gap: 50px;
}

.partners img{
  height: 46px;
  width: auto;
  object-fit: contain;

  opacity: 0.9;

  filter:
    drop-shadow(0 6px 18px rgba(0,0,0,0.45));
}


.days {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;

  /* space between title and cards */
  margin-top: 18px;
  margin-bottom: 22px;
}

/* Cards list: one column sized to the widest card (names) */
.grid {
  display: grid;
  grid-template-columns: max-content;
  justify-items: stretch;
  gap: 16px;

  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Card */
.person {
  background: rgba(31, 58, 94, 0.90); /* brand blue @ 90% */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;

  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);

  padding: 14px 24px 14px 14px; /* extra right padding */
  display: flex;
  gap: 14px;
  align-items: center;

  min-height: 124px;
  min-width: 420px;
  max-width: 100%;

  overflow: hidden;
  position: relative;
}

.avatar {
  width: 104px;
  height: 104px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid #24324a;
  background: #0b1220;
  flex: 0 0 auto;
}
.avatar-fallback{
  object-fit: contain;
  padding: 13px;
  box-sizing: border-box;
  opacity: 0.4;
}

.pmeta {
  min-width: 0;
  white-space: nowrap;
}

.pname {
  font-size: 24px;
  letter-spacing: 0.6px;
  line-height: 1.25;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.pcompetence {
  margin-top: 2px;
  font-size: 15px;
  letter-spacing: 0.6px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.78);

  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}

.ptime {
  margin-top: 6px;
  font-size: 15px;
  letter-spacing: 0.6px;
  opacity: 0.75;

  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}

#oncallStatus {
  margin-top: 10px;
  padding-bottom: 6px;

  color: rgba(255, 255, 255, 0.85);

  text-shadow:
    0 6px 16px rgba(0, 0, 0, 0.45),
    0 1px 4px rgba(0, 0, 0, 0.35),
    0 0 6px rgba(255, 255, 255, 0.12);
}
#oncallStatus.is-stale{
  color: rgba(255, 200, 120, 0.9); /* varm advarsel, ikke rød */

  text-shadow:
    0 6px 16px rgba(0,0,0,0.45),
    0 1px 4px rgba(0,0,0,0.35),
    0 0 8px rgba(255, 180, 80, 0.25);
}


/* ==========================================================
   Ticker (bottom)
   ========================================================== */
.ticker-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  height: var(--ticker-height);
  z-index: 9999;

  display: flex;
  align-items: center;

  border-top: 1px solid #24324a;
  background: var(--brand-blue);
}

.ticker-label {
  width: var(--label-width);
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  border-right: 1px solid #24324a;
  background: #132338;
}

.ticker-label .news-logo {
  height: 34px;
  width: auto;
  display: block;
}

.ticker-viewport {
  position: relative;
  overflow: hidden;
  white-space: nowrap;

  height: 100%;
  flex: 1;

  display: flex;
  align-items: center;
}

.ticker {
  display: inline-block;
  padding-left: 100%;

  animation: scroll-left linear infinite;

  font-size: 27px;
  font-weight: 650;
  letter-spacing: 0.2px;
  line-height: 1;
}

.news-time {
  opacity: 0.55;
  font-weight: 500;
}

.ticker[data-speed="slow"] { animation-duration: 180s; }
.ticker[data-speed="normal"] { animation-duration: 85s; }
.ticker[data-speed="fast"] { animation-duration: 60s; }

@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.sep {
  opacity: 0.6;
  padding: 0 18px;
}

/* ==========================================================
   Background slideshow
   ========================================================== */
#bg-slideshow {
  position: fixed;
  z-index: -3;
  overflow: hidden;

  top: var(--topbar-h);
  left: 0;
  right: 0;
  bottom: var(--ticker-height);

  height: calc(100vh - var(--topbar-h) - var(--ticker-height));
}

.bg-layer {
  position: absolute;
  inset: 0;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  opacity: 0;
  transition-property: opacity;
  transition-duration: 1200ms;
  transition-timing-function: ease-in-out;

  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: opacity;
}

.bg-layer.is-active {
  opacity: 1;
}

/* progress bar above ticker */
#bg-progress {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--ticker-height);

  height: var(--progress-height);
  background: transparent;

  z-index: 999999;
}

#bg-progress::before {
  content: "";
  display: block;
  height: 100%;
  width: var(--bgProgress, 0%);
  background: rgba(255, 255, 255, 0.7);
}

/* ==========================================================
   Left slope overlay
   ========================================================== */
.left-slope {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;

  width: var(--slope-w);
  min-width: var(--slope-w);
  max-width: var(--slope-w);

  background: rgba(0, 0, 0, 0.65);
  pointer-events: none;

  z-index: -2;

  --indent: calc(100vh / tan(var(--slope-angel)));

  clip-path: polygon(
    0 0,
    100% 0,
    calc(100% - var(--indent)) 100%,
    0 100%
  );
}