/* ============================================================
   [ID: GLOBAL-RESET] Grundfixar för box-modell och overflow
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow-x: hidden; }

/* ============================================================
   [ID: THEME-VARS] Färger, spacing och radier
   ============================================================ */
:root{
  --gap: 1.25rem;
  --radius: 16px;
  --c-bg: #f4f6f8;
  --c-card: #ffffff;
  --c-fg: #0e1116;
  --c-muted: #6b7280;
  --c-border: #d7dbe1;
  --c-brand: #0d6efd;
  --c-chip: #eef2f7;
}

/* ============================================================
   [ID: TYPE-SCALE] Basstorlek och responsiv typografi
   ============================================================ */
html { font-size: 18px; }
@media (min-width:480px){ html{font-size:19px;} }
@media (min-width:768px){ html{font-size:20px;} }

/* ============================================================
   [ID: BODY] Basstil
   ============================================================ */
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--c-bg);
  color: var(--c-fg);
  line-height: 1.45;
}

/* ============================================================
   [ID: LAYOUT] Helskärm och centrering
   ============================================================ */
.fs-wrap { min-height: 100%; display: grid; grid-template-rows: 1fr auto; }
.fs-center { display: grid; place-items: center; padding: 4vh 1rem; }

/* Panelen får aldrig bli bredare än viewporten (inkl. padding) */
.panel{
  width: 100%;
  max-width: 740px;
  background: var(--c-card);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.07);
  padding: clamp(1.25rem, 6vh, 2.5rem);
}

/* Stackar med vertikal rytm */
.vstack > * + * { margin-top: var(--gap); }
.vstack.tight > * + * { margin-top: 1rem; }

/* Enkel rad-layout (en kolumn, kan byggas ut) */
.row { display: grid; grid-template-columns: 1fr; gap: 1rem; }

/* ============================================================
   [ID: TYPE-UTILS] Hjälpklasser för typografi
   ============================================================ */
.h1 { font-size: clamp(1.6rem, 5vw, 2.2rem); margin: 0; }
.h2 { font-size: clamp(1.25rem, 3.5vw, 1.6rem); margin: 0; }
.center { text-align: center; }
.muted { color: var(--c-muted); }
.status { color: var(--c-muted); font-variant-numeric: tabular-nums; }

/* ============================================================
   [ID: CONTROLS] Inputs och knappar (”duplo”-storlek)
   ============================================================ */
.input, .btn{
  font-size: 1.1rem;
  border-radius: 14px;
  padding: 1rem 1.1rem;
  border: 2px solid var(--c-border);
  background: #fff;
  color: var(--c-fg);
  width: 100%;
  box-sizing: border-box; /* redundans, men tydligt */
}

#logga {
  width: 100%;
  max-width: 200px;   /* största storleken på desktop */
  height: auto;
  margin: 0 auto;
  display: block;
}

.input.xl, .btn.xl { padding: 1.15rem 1.25rem; font-size: 1.2rem; }

.btn{ cursor: pointer; user-select: none; text-align: center; }
.btn.primary{ background: var(--c-brand); color: #fff; border-color: var(--c-brand); }
.btn.ghost{ background: #fff; color:#0f172a; border-color: var(--c-border); }

/* Fokusmarkeringar – tydliga och konsekventa */
.input:focus-visible,
.btn:focus-visible,
details > summary:focus-visible{
  outline: 3px solid var(--c-brand);
  outline-offset: 2px;
  border-radius: 14px;
}

/* ============================================================
   [ID: DETAILS] Valfria utfällbara områden
   ============================================================ */
.details { margin-top: .5rem; }
details > summary { list-style: none; cursor: pointer; color: #0f172a; }
details > summary::-webkit-details-marker { display:none; }
details[open]{ border-left: 3px solid var(--c-border); padding-left: .75rem; }

/* ============================================================
   [ID: RESULTS] Stabil resultatyta (ingen layout-hopning)
   ============================================================ */
.results { min-height: 42vh; }
.results-head { display:flex; justify-content:space-between; align-items:baseline; gap:.75rem; }
.results-body { display:flex; flex-direction:column; gap: .75rem; }
.result{
  border:2px solid #e5e7eb;
  border-radius: 12px;
  padding: 1rem;
  background:#fff;
  text-decoration: none;
  color: inherit;
}
.result:hover { background:#fafafa; }
.badge{
  display:inline-block;
  padding:.25rem .5rem;
  border-radius: 999px;
  background: var(--c-chip);
  color:#0f172a;
  font-size:.9rem;
}

/* ============================================================
   [ID: FOOTER] Länk i sidfot
   ============================================================ */
.site-footer{ padding: 1rem; text-align: center; }
.site-footer a{ color: var(--c-brand); text-decoration: none; }
.site-footer a:focus-visible{
  outline:2px solid var(--c-brand);
  outline-offset:2px;
  border-radius:6px;
}

/* ============================================================
   [ID: UTILITIES] Hjälpklasser
   ============================================================ */
.hidden { display: none !important; }
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ============================================================
   [ID: PREFS] Kontrast & rörelse
   ============================================================ */
@media (prefers-contrast: more){
  .result { border-color:#000; }
}
@media (prefers-reduced-motion: reduce){
  * { scroll-behavior: auto !important; transition: none !important; }
}

/* ============================================================
   [ID: MEDIA-SAFE] Mediaelement ska aldrig spränga layouten
   ============================================================ */
img, video, canvas, svg{
  max-width: 100%;
  height: auto;
  display: block;
}