/* DriveBase: portalen på #/, teamets samlingsplattform i entréns språk (beslut 0005). Ägs av P1.
   Bara marinblått och vitt, som inloggningssidan: vita kort och paneler på marinblått, tunna ljusa linjer och
   omloppen bakom hjälten. Inga färgfyllda ytor. Färg finns bara i statusmärkena, som i entrén.
   Skalet runt (toppfältet och sidfoten) står i bas.css. */

/* ================= Ramen ================= */
.portal {
  position: relative;
  isolation: isolate;
  max-width: 1120px;
  margin: 0 auto;
  padding-bottom: var(--s-4);
}

/* Omloppen: två banor och en löpare, som entréns omloppsfält. Spänner över hela fönstrets bredd bakom hjälten.
   Skalet klipper i sidled, så banorna ger aldrig sidscroll. */
.portal-omlopp {
  position: absolute;
  z-index: -1;
  top: -72px;
  left: 50%;
  width: 100vw;
  height: 760px;
  translate: -50% 0;
  pointer-events: none;
  overflow: visible;
}
.portal-omlopp path { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.portal-omlopp__bana { stroke: var(--linje-pa-mork); }
.portal-omlopp__bana--inre { stroke: var(--hover-ljus); }
.portal-omlopp__lopare {
  stroke: var(--text-dampad-pa-mork);
  stroke-linecap: round;
  stroke-dasharray: 46 954;
  animation: portal-lopare 38s linear infinite;
}
@keyframes portal-lopare { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .portal-omlopp__lopare { animation: none; stroke-dashoffset: 760; }
}

/* ================= Hjälten ================= */
.portal-hero {
  padding-top: var(--s-14);
  text-align: center;
}
.portal-overrad {
  color: var(--text-dampad-pa-mork);
  font-weight: var(--vikt-mellan);
  font-size: var(--fs-m);
}
/* Rubriken med entréns hjältemått: Rethink Sans 800, -.006em, radavstånd 1,04 */
.portal-halsning {
  margin-top: var(--s-3);
  font-family: var(--font-rubrik);
  font-size: clamp(40px, 4.2vw, 56px);
  font-weight: var(--vikt-rubrik);
  line-height: 1.04;
  letter-spacing: -.006em;
  color: var(--text-pa-mork);
  overflow-wrap: anywhere;
}
.portal-lage {
  max-width: 520px;
  margin: 14px auto 0;
  color: var(--text-dampad-pa-mork);
  font-size: var(--fs-bas);
  line-height: var(--radavstand);
  text-wrap: balance;
}

/* ================= Utskicken ================= */
.portal-utskick {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  margin-top: var(--s-10);
}
/* Konturrutan på marinblått: ingen fyllnad, en tunn ljus kant och ikonen i en ljus ring */
.portal .portal-banner {
  width: 100%;
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  border: 1.5px solid var(--linje-pa-mork);
  background: transparent;
}
.portal .portal-banner .banner__ikon {
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--linje-pa-mork);
  border-radius: 50%;
  background: transparent;
  color: var(--text-pa-mork);
}
.portal .portal-banner .banner__text { font-size: var(--fs-l); letter-spacing: var(--spacing-rubrik-liten); }
.portal-ikonknapp {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--klickyta);
  height: var(--klickyta);
  border: 0;
  border-radius: var(--r-m);
  background: transparent;
  color: var(--text-pa-mork);
  cursor: pointer;
}
.portal-ikonknapp:hover { background: var(--hover-ljus); }
.portal-ikonknapp:focus-visible { outline: var(--fokus-bredd) solid var(--fokus-pa-mork); outline-offset: var(--fokus-avstand); }
/* Textknappen: entréns .text-button på marinblått */
.portal-textknapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: var(--klickyta);
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--text-pa-mork);
  font-size: var(--fs-s);
  font-weight: var(--vikt-mellan);
  cursor: pointer;
}
.portal-textknapp:hover { text-decoration: underline; text-underline-offset: 5px; }
.portal-textknapp .ikon { width: 17px; height: 17px; }
.portal-textknapp:focus-visible { outline: var(--fokus-bredd) solid var(--fokus-pa-mork); outline-offset: var(--fokus-avstand); }

/* ================= Delarna ================= */
/* Varje del har en vänsterställd rubrik i vitt, en dämpad ingress och till höger en eventuell knapp */
.portal-del { margin-top: var(--s-16); }
.portal-del__huvud {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3) var(--s-4);
  margin-bottom: var(--s-5);
}
.portal-del__rubrik {
  font-family: var(--font-rubrik);
  font-size: var(--fs-2xl);
  font-weight: var(--vikt-rubrik);
  line-height: 1.15;
  letter-spacing: .004em;
  color: var(--text-pa-mork);
}
.portal-del__ingress {
  margin-top: var(--s-1);
  color: var(--text-dampad-pa-mork);
  font-size: var(--fs-m);
  line-height: 1.45;
}
/* Den ljusa knappen: entréns Logga in i sidhuvudet, vit med marinblå text */
.portal-ljusknapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--klickyta);
  padding: 0 var(--s-4);
  border: 0;
  border-radius: var(--r-m);
  background: var(--pal-vit);
  color: var(--pal-navy);
  font-family: var(--font-text);
  font-size: var(--fs-s);
  font-weight: var(--vikt-fet);
  white-space: nowrap;
  cursor: pointer;
}
@media (hover: hover) {
  .portal-ljusknapp:hover { background: var(--yta-mjuk); }
}
.portal-ljusknapp:focus-visible { outline: var(--fokus-bredd) solid var(--fokus-pa-mork); outline-offset: var(--fokus-avstand); }

/* ================= Systemen ================= */
/* Högst tre kort i bredd, vänsterställda under rubriken. Ett ensamt kort behåller en tredjedels bredd. */
.portal-plattor {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.portal-plattor__punkt {
  display: flex;
  flex: 1 1 280px;
  max-width: calc((100% - 2 * var(--s-6)) / 3);
  min-width: 0;
}

/* Kortet: entréns vita kort runt kontot, utan skugga och utan färgfyllnad. Inuti gäller ljusa ytans värden. */
.portal-platta {
  --text: var(--pal-navy);
  --text-dampad: var(--pal-dampad);
  --fokus: var(--pal-navy);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  width: 100%;
  min-width: 0;
  padding: var(--s-6);
  border-radius: var(--r-l);
  background: var(--yta);
  color: var(--text);
  color-scheme: light;
  transition: translate var(--t-normal) var(--kurva);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .portal-platta:hover { translate: 0 -2px; }
}
/* Fokusringen runt hela kortet när länken har tangentbordsfokus, vit mot marinblått */
.portal-platta:has(.portal-platta__oppna:focus-visible) { outline: var(--fokus-bredd) solid var(--fokus-pa-mork); outline-offset: var(--fokus-avstand); }

.portal-platta__huvud {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}
.portal-platta__symbol { flex: none; width: 32px; height: 32px; }
.portal-platta__symbol--ikon {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--yta-mjuk);
  color: var(--primar);
}
.portal-platta__symbol--ikon .ikon { width: 18px; height: 18px; }
.portal-platta__namn {
  min-width: 0;
  font-family: var(--font-rubrik);
  font-size: 22px;
  font-weight: var(--vikt-rubrik);
  line-height: 1.18;
  letter-spacing: .004em;
  overflow-wrap: anywhere;
}
.portal-platta__topp { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.portal-platta__beskrivning {
  color: var(--text-dampad);
  font-size: var(--fs-m);
  line-height: var(--radavstand);
  text-wrap: pretty;
}
/* Svarstiden i dämpad text med klockan före, utan färgad yta */
.portal-platta__larm {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--s-2);
  color: var(--text-dampad);
  font-size: var(--fs-s);
  line-height: 1.45;
}
.portal-platta__larm strong { color: var(--text); }
.portal-platta__larm .ikon { width: 16px; height: 16px; margin-top: 2px; }
/* Foten: adressen till vänster och länken Öppna till höger, över en tunn linje */
.portal-platta__fot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--s-3);
  width: 100%;
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1.5px solid var(--linje);
}
.portal-platta__adress {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-dampad);
  font-family: var(--font-text);
  font-size: var(--fs-s);
}
.portal-platta__oppna {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
  min-height: var(--klickyta);
  padding: 0;
  border: 0;
  background: none;
  color: var(--pal-navy);
  font-family: var(--font-text);
  font-size: var(--fs-m);
  font-weight: var(--vikt-fet);
  text-decoration: none;
  cursor: pointer;
}
.portal-platta__oppna .ikon { flex: none; width: 18px; height: 18px; transition: translate var(--t-normal) var(--kurva); }
@media (hover: hover) {
  .portal-platta__oppna:hover { text-decoration: underline; text-underline-offset: 5px; }
  .portal-platta__oppna:hover .ikon { translate: 2px 0; }
}
.portal-platta__oppna:focus-visible { outline: var(--fokus-bredd) solid var(--pal-navy); outline-offset: var(--fokus-avstand); border-radius: var(--r-xs); }

/* Tomt läge utan system: ett vitt kort */
.portal-system .tomt {
  max-width: 480px;
  border: 0;
  background: var(--yta);
  color: var(--pal-navy);
  --text-dampad: var(--pal-dampad);
  --fokus: var(--pal-navy);
}
.portal-system .tomt__ikon { background: var(--yta-mjuk); }

/* ================= Samlingen ================= */
/* En vit panel som entréns produktruta: flikarna överst och sakerna som rader med tunna linjer */
.portal-samling__panel {
  --text: var(--pal-navy);
  --text-dampad: var(--pal-dampad);
  --fokus: var(--pal-navy);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-l);
  background: var(--yta);
  color: var(--text);
  color-scheme: light;
}
.portal-flikar {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin: var(--s-3) var(--s-2) var(--s-2);
  padding: var(--s-1);
  border: 1.5px solid var(--linje);
  border-radius: var(--r-m);
}
.portal-flik {
  min-height: var(--klickyta);
  padding: 0 var(--s-4);
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text-dampad);
  font-family: var(--font-text);
  font-size: var(--fs-s);
  font-weight: var(--vikt-fet);
  cursor: pointer;
}
.portal-flik:hover { color: var(--text); background: var(--hover-mork); }
.portal-flik[aria-pressed="true"] { background: var(--primar); color: var(--primar-text); }
.portal-flik:focus-visible { outline: var(--fokus-bredd) solid var(--pal-navy); outline-offset: 2px; }

.portal-samling__lista { margin: 0; padding: 0; list-style: none; }
.portal-sak {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  border-top: 1px solid var(--linje);
}
.portal-sak:first-child { border-top: 0; }
.portal-sak__oppna {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-4);
  flex: 1 1 auto;
  min-width: 0;
  min-height: 64px;
  padding: var(--s-4) var(--s-3);
  border: 0;
  border-radius: var(--r-m);
  background: none;
  color: var(--text);
  font-family: var(--font-text);
  text-align: left;
  cursor: pointer;
}
.portal-sak__oppna:hover { background: var(--yta-mjuk); }
.portal-sak__oppna:focus-visible { outline: var(--fokus-bredd) solid var(--pal-navy); outline-offset: 0; }
.portal-sak__ikon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--yta-mjuk);
  color: var(--primar);
}
.portal-sak__text { display: grid; gap: 2px; min-width: 0; }
.portal-sak__titel { font-size: var(--fs-bas); font-weight: var(--vikt-fet); line-height: 1.35; overflow-wrap: anywhere; }
.portal-sak__beskrivning { color: var(--text-dampad); font-size: var(--fs-s); line-height: 1.45; }
.portal-sak__meta { color: var(--text-dampad); font-size: var(--fs-xs); line-height: 1.45; }
.portal-sak__vard {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text-dampad);
  font-size: var(--fs-s);
  white-space: nowrap;
}
.portal-samling .portal-ikonknapp { color: var(--text-dampad); }
/* Ta bort syns när man pekar på eller står i raden, på skärmar med pekare. På pekskärmar syns den alltid. */
@media (hover: hover) {
  .portal-sak__ta-bort { opacity: 0; transition: opacity var(--t-snabb) var(--kurva); }
  .portal-sak:is(:hover, :focus-within) .portal-sak__ta-bort { opacity: 1; }
}
.portal-samling .portal-ikonknapp:hover { background: var(--yta-mjuk); color: var(--text); }
.portal-samling .portal-ikonknapp:focus-visible { outline-color: var(--pal-navy); }
.portal-samling__tomt {
  padding: var(--s-8) var(--s-4);
  color: var(--text-dampad);
  font-size: var(--fs-m);
  text-align: center;
}

/* ================= Senast i DriveBase ================= */
/* Rader med tunna ljusa linjer på marinblått, som entréns vanliga frågor. Markörerna är ljusa ringar. */
.portal-senast__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linje-pa-mork);
}
.portal-senast__rad {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--linje-pa-mork);
}
.portal-senast__markor {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--linje-pa-mork);
  border-radius: 50%;
  color: var(--text-pa-mork);
}
.portal-senast__markor .ikon { width: 18px; height: 18px; }
.portal-senast__text { min-width: 0; font-size: var(--fs-bas); line-height: 1.4; overflow-wrap: anywhere; }
.portal-senast__tid { color: var(--text-dampad-pa-mork); font-size: var(--fs-s); white-space: nowrap; }
/* Tomt läge på marinblått: kontur i stället för den ljusa ytan */
.portal-senast .tomt {
  border: 1.5px solid var(--linje-pa-mork);
  background: transparent;
  color: var(--text-pa-mork);
  --text-dampad: var(--text-dampad-pa-mork);
}
.portal-senast .tomt__ikon { background: var(--hover-ljus); color: var(--text-pa-mork); }

/* ================= Hjälpraden ================= */
/* Entréns fotrad: centrerad och dämpad. Länken står i löptexten, och klickytan växer med padding i höjdled,
   som inte ändrar radhöjden i en inline-box. */
.portal-hjalp {
  display: grid;
  justify-items: center;
  gap: var(--s-1);
  margin-top: var(--s-12);
  color: var(--text-dampad-pa-mork);
  font-size: var(--fs-m);
  text-align: center;
}
.portal-hjalp a {
  padding-block: 14px;
  color: var(--text-pa-mork);
  font-weight: var(--vikt-fet);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.portal-hjalp a:focus-visible { outline: var(--fokus-bredd) solid var(--fokus-pa-mork); outline-offset: 0; }

/* Dialogen Lägg till i samlingen */
.portal-dialog__typer { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.portal-dialog__valfri { color: var(--text-dampad); font-weight: var(--vikt-normal); }

/* ================= Brytpunkter ================= */
@media (max-width: 999.98px) {
  .portal-plattor__punkt { max-width: calc((100% - var(--s-6)) / 2); }
}
@media (max-width: 759.98px) {
  /* Banorna trycks ihop i sidled på en smal skärm och skär genom rubriken, så de står bara från 760 px */
  .portal-omlopp { display: none; }
  .portal-hero { padding-top: var(--s-8); }
  .portal-utskick { margin-top: var(--s-8); }
  .portal-del { margin-top: var(--s-12); }
  .portal-plattor { gap: var(--s-4); }
  .portal-plattor__punkt { flex-basis: 100%; max-width: none; }
  .portal-platta { padding: var(--s-5); }
  .portal-samling__panel { padding: var(--s-1) var(--s-2); }
  /* Flikarna på en rad i panelens bredd */
  .portal-flikar { display: flex; flex-wrap: nowrap; margin-inline: var(--s-1); }
  .portal-flik { flex: 1 1 auto; padding: 0 var(--s-2); }
  .portal-sak__oppna { grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); padding-inline: var(--s-2); }
  .portal-sak__vard { display: none; }
  /* Tiden under texten, i textens spalt */
  .portal-senast__rad { grid-template-columns: auto minmax(0, 1fr); row-gap: 2px; align-items: start; }
  .portal-senast__markor { grid-row: span 2; }
  .portal-senast__tid { grid-column: 2; }
}