/* DriveBase: kontot på #/konto (konto.js), i portalens ram och entréns språk.
   Hjälten med initialerna i en ring, sedan vita, rundade kort på marinblått i två kolumner. Bara marinblått och vitt,
   och färg bara i statusmärkena och i kontots statuschip. */

.konto {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding-bottom: var(--s-4);
}

/* ================= Hjälten ================= */
.konto-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-6) var(--s-8);
  padding-top: var(--s-14);
}
/* Initialerna i en vit cirkel med en ring som långsamt roterar runt den */
.konto-avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 112px;
  height: 112px;
}
.konto-avatar__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--pal-vit), var(--pal-blagra-form) 30%, transparent 55%, var(--pal-blagra-2) 80%, var(--pal-vit));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), black calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), black calc(100% - 2px));
  animation: konto-ring 14s linear infinite;
}
@keyframes konto-ring { to { rotate: 1turn; } }
@media (prefers-reduced-motion: reduce) {
  .konto-avatar__ring { animation: none; }
}
.konto-avatar__text {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--pal-vit);
  color: var(--pal-navy);
  font-family: var(--font-rubrik);
  font-size: 32px;
  font-weight: var(--vikt-rubrik);
  letter-spacing: .01em;
}
.konto-hero__text { flex: 1 1 18rem; min-width: 0; }
.konto-rubrik {
  margin-top: var(--s-2);
  font-family: var(--font-rubrik);
  font-size: clamp(36px, 3.6vw, 52px);
  font-weight: var(--vikt-rubrik);
  line-height: 1.04;
  letter-spacing: -.006em;
  color: var(--text-pa-mork);
  overflow-wrap: anywhere;
}
.konto-epost {
  margin-top: var(--s-2);
  color: var(--text-dampad-pa-mork);
  font-size: var(--fs-bas);
  overflow-wrap: anywhere;
}
.konto-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
}
.konto-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 32px;
  padding: 4px 14px;
  border: 1.5px solid var(--linje-pa-mork);
  border-radius: var(--r-rund);
  color: var(--text-pa-mork);
  font-size: var(--fs-s);
  font-weight: var(--vikt-fet);
}
.konto-chip .ikon { width: 16px; height: 16px; }
.konto-chip__prick {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pal-blagra-2);
}
.konto-chip--ok .konto-chip__prick { background: var(--status-uppe); box-shadow: 0 0 0 4px var(--pal-gron-a22); }
.konto-chip--fel .konto-chip__prick { background: var(--status-nere); }

/* ================= Korten ================= */
.konto-rutnat {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6);
  margin-top: var(--s-12);
}
.konto-kort {
  --text: var(--pal-navy);
  --text-dampad: var(--pal-dampad);
  --fokus: var(--pal-navy);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
  padding: var(--s-7);
  border-radius: 28px;
  background: var(--yta);
  color: var(--text);
  color-scheme: light;
}
.konto-kort--bred { grid-column: 1 / -1; }
.konto-kort__rubrik {
  font-family: var(--font-rubrik);
  font-size: 22px;
  font-weight: var(--vikt-rubrik);
  line-height: 1.18;
  letter-spacing: .004em;
}
.konto-kort__ingress { margin-top: 2px; color: var(--text-dampad); font-size: var(--fs-m); }
.konto-kort__fot {
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1.5px solid var(--linje);
  color: var(--text-dampad);
  font-size: var(--fs-s);
}
.konto-kort__fot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--s-3);
}
.konto-lank {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--klickyta);
  color: var(--pal-navy);
  font-weight: var(--vikt-fet);
  text-decoration: none;
}
.konto-lank .ikon { width: 16px; height: 16px; transition: translate var(--t-normal) var(--kurva); }
@media (hover: hover) {
  .konto-lank:hover { text-decoration: underline; text-underline-offset: 5px; }
  .konto-lank:hover .ikon { translate: 2px 0; }
}
.konto-tom { color: var(--text-dampad); font-size: var(--fs-m); }

/* Profilen: etiketten dämpad till vänster, värdet till höger */
.konto-lista { display: grid; }
.konto-rad {
  display: grid;
  grid-template-columns: minmax(7.5rem, auto) minmax(0, 1fr);
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-top: 1.5px solid var(--linje);
}
.konto-rad:first-child { border-top: 0; padding-top: 0; }
.konto-rad dt { color: var(--text-dampad); font-size: var(--fs-m); }
.konto-rad dd { margin: 0; font-weight: var(--vikt-mellan); text-align: right; overflow-wrap: anywhere; }

/* Inloggningen: ett steg per rad med knappen till höger */
.konto-steg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-4);
  padding: var(--s-4);
  border-radius: 20px;
  background: var(--yta-mjuk);
}
.konto-steg__text { flex: 1 1 12rem; min-width: 0; }
.konto-steg__titel { font-weight: var(--vikt-fet); }
.konto-steg__hjalp { color: var(--text-dampad); font-size: var(--fs-s); }
.konto-knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  flex: none;
  min-height: var(--klickyta);
  padding: 0 var(--s-5);
  border: 1.5px solid var(--pal-navy);
  border-radius: var(--r-rund);
  background: var(--pal-navy);
  color: var(--pal-vit);
  font-size: var(--fs-s);
  font-weight: var(--vikt-fet);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-snabb) var(--kurva), color var(--t-snabb) var(--kurva);
}
.konto-knapp .ikon { width: 18px; height: 18px; }
@media (hover: hover) {
  .konto-knapp:hover { background: var(--pal-navy-ljusare); }
}
.konto-knapp--kontur { background: transparent; color: var(--pal-navy); }
@media (hover: hover) {
  .konto-knapp--kontur:hover { background: var(--hover-mork); }
}

/* Systemen: en rad per system med märket, namnet och adressen, statusen och Öppna */
.konto-systemlista { display: grid; }
.konto-system {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-3);
  margin: 0 calc(-1 * var(--s-3));
  border-radius: 18px;
  transition: background-color var(--t-normal) var(--kurva);
}
@media (hover: hover) {
  .konto-system:hover { background: var(--yta-mjuk); }
}
.konto-system + .konto-system { border-top: 1.5px solid var(--linje); }
.konto-system:hover + .konto-system, .konto-system:hover { border-top-color: transparent; }
.konto-system__symbol { width: 32px; height: 32px; }
.konto-system__symbol--ikon {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--yta-mjuk);
  color: var(--pal-navy);
}
.konto-system__symbol--ikon .ikon { width: 18px; height: 18px; }
.konto-system__namn { font-family: var(--font-rubrik); font-size: var(--fs-l); font-weight: var(--vikt-rubrik); line-height: 1.2; }
.konto-system__adress { color: var(--text-dampad); font-size: var(--fs-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.konto-system__oppna {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--klickyta);
  padding: 0 var(--s-2);
  border: 0;
  border-radius: var(--r-rund);
  background: none;
  color: var(--pal-navy);
  font-size: var(--fs-m);
  font-weight: var(--vikt-fet);
  text-decoration: none;
  cursor: pointer;
}
.konto-system__oppna .ikon { width: 18px; height: 18px; transition: translate var(--t-normal) var(--kurva); }
@media (hover: hover) {
  .konto-system__oppna:hover { text-decoration: underline; text-underline-offset: 5px; }
  .konto-system__oppna:hover .ikon { translate: 2px 0; }
}

/* Aktiviteten: en tidslinje med en prick per händelse */
.konto-aktivitet { display: grid; }
.konto-aktivitet__rad {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  padding: 10px 0;
}
.konto-aktivitet__rad + .konto-aktivitet__rad { border-top: 1.5px solid var(--linje); }
.konto-aktivitet__markor {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--yta-mjuk);
  color: var(--pal-navy);
}
.konto-aktivitet__markor .ikon { width: 16px; height: 16px; }
.konto-aktivitet__text { font-weight: var(--vikt-mellan); }
.konto-aktivitet__tid { color: var(--text-dampad); font-size: var(--fs-s); white-space: nowrap; }

/* Rörelsen: växeln med en rubrik och en hjälptext */
.konto-vaxel { align-items: flex-start; }
.konto-vaxel input { margin-top: 2px; }
.konto-vaxel__titel { display: block; font-weight: var(--vikt-fet); }
.konto-vaxel__hjalp { display: block; color: var(--text-dampad); font-size: var(--fs-s); font-weight: var(--vikt-normal); }

/* ================= Smala skärmar ================= */
@container innehall (max-width: 759.98px) {
  .konto-rutnat { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .konto-kort { padding: var(--s-5); border-radius: var(--r-l); }
  .konto-hero { padding-top: var(--s-8); gap: var(--s-5); }
  .konto-avatar { width: 88px; height: 88px; }
  .konto-avatar__text { width: 72px; height: 72px; font-size: 26px; }
  .konto-system { grid-template-columns: auto minmax(0, 1fr) auto; }
  .konto-system .status { grid-column: 2; justify-self: start; }
  .konto-system__oppna { grid-column: 3; grid-row: 1; }
  .konto-rad { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .konto-rad dd { text-align: left; }
}