/* ============================================================
   Svarsbot — konto och inloggning
   ============================================================ */

.konto {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
}

.k-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---------- Vänsterspalt ---------- */

.k-sida {
  display: flex;
  flex-direction: column;
  gap: var(--s6);
  /* 40/52/44px låg utanför skalan — nu 32/48/48 */
  padding: var(--s6) var(--s7) var(--s7);
  border-right: 1px solid var(--border);
}

.brand { display: inline-flex; align-items: center; gap: var(--s2); align-self: flex-start; }
.brand-mark {
  width: var(--s5); height: var(--s5);
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--brand-fill);
  color: var(--brand-ink);
}
/* Märket är ingen .ico — men streckvikten ska ändå normaliseras av --ico */
.brand-mark svg {
  --ico: 14;
  width: calc(var(--ico) * 1px);
  height: calc(var(--ico) * 1px);
}
.brand-namn { font-family: var(--display); font-size: 17px; font-weight: 500; letter-spacing: -.05em; }

/* Blocket bär både rubrik och brödtext → mått för lead, inte för kort rubrik */
.k-sida-mitt { margin-block: auto; max-width: var(--matt-lead); }

.k-sida h1 {
  font-family: var(--display);
  /* Minvärdet höjt till 32px: displaytext under 32px får inte bära --faint-deco */
  font-size: clamp(32px, 4.2vw, 56px);
  font-weight: 400;
  letter-spacing: -.05em;
  line-height: .94;
}
.k-sida h1 .serif { display: block; color: var(--faint-deco); }
.k-sida .lead { margin-top: var(--s4); }

.k-punkter { display: grid; gap: var(--s3); margin-top: var(--s6); }
.k-punkter li {
  display: flex; align-items: flex-start; gap: var(--s3);
  font-size: 13.8px;
  color: var(--muted);
  line-height: 1.5;
}
.k-punkter .ico { --ico: 16; color: var(--accent); margin-top: 2px; }

/* Ett helt stycke, inte en etikett: mono bär signalen "meta",
   men versaler och negativ spärr hör hemma på korta etiketter. */
.k-demo {
  font-family: var(--mono);
  font-size: var(--mono-sm);
  color: var(--faint);
  line-height: 1.8;
  padding: var(--s3) var(--s4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm);
  max-width: 46ch;
}
.k-demo strong { color: var(--text); font-weight: 400; }

/* ---------- Högerspalt ---------- */

.k-main {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  justify-content: center;
  padding: var(--s6) var(--s7);
  position: relative;
}

.k-tillbaka {
  position: absolute;
  /* Ligger i linje med .k-main:s egen padding */
  top: var(--s6); right: var(--s7);
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: 13px;
  color: var(--faint);
  padding: var(--s2) var(--s3);
  border-radius: var(--r);   /* knapp, inte etikett — alltså hörn */
  transition: color .16s, background .16s;
}
.k-tillbaka:hover { color: var(--text); background: var(--surface-2); }
.k-tillbaka .ico { --ico: 15; }

.k-ruta {
  width: min(430px, 100%);
  margin-inline: auto;
  padding: var(--s6);
  border-radius: var(--r-lg);
  background: var(--bg-2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.k-flikar { width: 100%; }
.k-flikar button { flex: 1 1 0; }

.k-huvud { margin-top: var(--s5); margin-bottom: var(--s4); }
.k-huvud h2 { font-family: var(--display); font-size: 26px; font-weight: 400; letter-spacing: -.045em; }
.k-huvud p { font-size: 13.5px; color: var(--muted); margin-top: var(--s2); line-height: 1.55; }

/* Aviseringar */
.k-avisering {
  display: flex; gap: var(--s2);
  padding: var(--s3) var(--s4);
  border-radius: var(--r);
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: var(--s4);
  animation: fadeUp .22s var(--ease);
}
/* display:flex slår ut webbläsarens [hidden] — JS styr synligheten via attributet */
.k-avisering[hidden] { display: none; }
.k-avisering-fel  { background: var(--danger-soft); border: 1px solid var(--danger-line); color: var(--danger); }
.k-avisering-ok   { background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--text); }
.k-avisering-info { background: var(--accent-2-soft); border: 1px solid var(--accent-2-line); color: var(--accent-2); }

/* Fält */
.k-falt { margin-bottom: var(--s4); }

.k-losen { position: relative; }
/* Håller texten fri från ögonknappen (32px bred + 4px marginal) */
.k-losen .field { padding-right: var(--s7); }

.k-visa {
  position: absolute;
  right: var(--s1); top: 50%;
  transform: translateY(-50%);
  width: var(--s6); height: var(--s6);
  display: grid; place-items: center;
  border-radius: var(--r);   /* kontroll — piller är reserverat för etiketter */
  color: var(--faint);
  transition: color .16s, background .16s;
}
.k-visa:hover { color: var(--text); background: var(--surface-2); }
.k-visa .ico { --ico: 16; }
.k-visa .ico-av { display: none; }
.k-visa[aria-pressed="true"] .ico-pa { display: none; }
.k-visa[aria-pressed="true"] .ico-av { display: block; }

/* Lösenordsstyrka */
.k-styrka { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.k-styrka[hidden] { display: none; }   /* samma [hidden]-krock som aviseringarna */
.k-styrka-spar {
  flex: 1 1 auto;
  height: var(--s1);
  border-radius: var(--r-sm);   /* mätare, inte piller */
  background: var(--surface-3);
  overflow: hidden;
}
.k-styrka-spar i {
  display: block; height: 100%; width: 0;
  border-radius: var(--r-sm);
  background: var(--danger);
  transition: width .3s var(--ease), background .3s;
}
/* Statusavläsning — samma mono-etikettspråk som resten av systemet */
.k-styrka span {
  font-family: var(--mono);
  font-size: var(--mono-xs);
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--faint);
  white-space: nowrap;
}

.k-skicka { width: 100%; margin-top: var(--s2); }

.k-villkor {
  font-size: 11.5px;
  color: var(--faint);
  line-height: 1.6;
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
}
/* Länken går att peka på → --border-control, inte dekorlinje */
.k-villkor a { color: var(--text); border-bottom: 1px solid var(--border-control); }

.k-vaxla {
  text-align: center;
  font-size: 13.5px;
  color: var(--muted);
}
.k-vaxla button {
  color: var(--text);
  font-weight: 500;
  border-bottom: 1px solid var(--border-control);
  margin-left: var(--s1);
}

/* ---------- Responsivt ---------- */

@media (max-width: 900px) {
  .k-layout { grid-template-columns: 1fr; }
  .k-sida {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: var(--s5) var(--s5) var(--s6);
    gap: var(--s5);
  }
  .k-sida-mitt { margin-block: 0; }
  .k-punkter { display: none; }
  .k-main { padding: var(--s6) var(--s5) var(--s7); }
  .k-tillbaka { display: none; }
}

@media (max-width: 480px) {
  .k-ruta { padding: var(--s5); }
  .k-sida h1 { font-size: 26px; }
  /* Under 32px är rubriken inte längre displaytext — --faint-deco får inte bära den */
  .k-sida h1 .serif { color: var(--muted); }
  .k-sida .lead { font-size: 14px; }
}