/* ===========================================================================
   BAS – reset, typografi, formulärelement, hjälpklasser
   ======================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:1.55;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* --- Rubriker: display-typsnittet ------------------------------------- */
h1,h2,h3,h4,.display{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.15;
  color:var(--text);
}
h1{font-size:var(--fs-3xl)}
h2{font-size:var(--fs-2xl)}
h3{font-size:var(--fs-xl)}
h4{font-size:var(--fs-lg)}

.eyebrow{
  font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;color:var(--text-3);
}
.muted{color:var(--text-3)}
.dim{color:var(--text-2)}
.num{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mono{font-family:var(--font-mono);font-size:.92em}
.nowrap{white-space:nowrap}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

a{color:var(--pp-600);text-decoration:none}
a:hover{text-decoration:underline}

/* --- Ikoner ----------------------------------------------------------- */
.ic{
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
  flex-shrink:0;vertical-align:-.15em;
}
.ic--thin{stroke-width:1.4}
.ic--bold{stroke-width:2.1}

/* --- Formulär --------------------------------------------------------- */
input,select,textarea,button{font-family:inherit;font-size:inherit;color:inherit}

.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field > label{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-3);
}
.input,.select,.textarea{
  width:100%;padding:8px 11px;
  border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text);
  font-size:var(--fs-md);outline:none;transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.input:hover,.select:hover,.textarea:hover{border-color:var(--n-300)}
.input:focus,.select:focus,.textarea:focus{
  border-color:var(--pp-500);box-shadow:0 0 0 3px rgba(112,58,145,.12);
}
.input::placeholder,.textarea::placeholder{color:var(--n-400)}
.textarea{min-height:84px;resize:vertical;line-height:1.5}
.select{
  appearance:none;padding-right:30px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888A80' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:15px;
}
.input:disabled,.select:disabled,.textarea:disabled{background:var(--n-100);color:var(--text-3);cursor:not-allowed}

.check{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--fs-md)}
.check input[type=checkbox]{width:16px;height:16px;accent-color:var(--pp-600);cursor:pointer}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* --- Layouthjälp ------------------------------------------------------ */
.row{display:flex;align-items:center;gap:10px}
.row-tight{display:flex;align-items:center;gap:5px;min-width:0}
.col{display:flex;flex-direction:column;gap:10px}
.between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.wrap{flex-wrap:wrap}
.spacer{flex:1}
.hidden{display:none !important}

/* --- Rullningslist ---------------------------------------------------- */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--n-300);border-radius:5px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--n-400);background-clip:content-box}

/* --- Fokusmarkering för tangentbordsnavigering ------------------------ */
:focus-visible{outline:2px solid var(--pp-500);outline-offset:2px}