/* =========================================================
   THEME VARIABLES
   ---------------------------------------------------------
   Light (default) och Dark (grafit)
   ========================================================= */

/* -------- Light (default) -------- */
:root{
  /* Base */
  --bg:           #f5f7fb;
  --card-bg:      #ffffff;
  --text:         #0f172a;
  --muted:        #475569;
  --border:       #e5e7eb;
  --shadow:       0 8px 24px rgba(15,23,42,.06);

  /* Brand (header, knappar, highlights) */
  --brand-1:      #0d47b8;
  --brand-2:      #082e7a;
  --brand-1-hover:#0b3fa5;

  /* Länkar & accent */
  --link:         #0b66ff;
  --accent:       #2f6df6;

  /* Bars */
  --bar-track:    #e6e9f2;

  /* Sparkline */
  --sparkline-grid: rgba(0,0,0,0.10);
  --sparkline-line: #2f6df6;
}
/* -------- Dark (graphite) -------- */
.dark{
  /* Base */
  --bg:           #0f0f0f;
  --card-bg:      #1a1a1a;
  --text:         #e8e8e8;
  --muted:        #9b9b9b;
  --border:       #2a2a2a;
  --shadow:       0 6px 20px rgba(0,0,0,.6);

  /* Brand/header */
  --brand-1:      #1a1a1a;
  --brand-2:      #141414;
  --brand-1-hover:#262626;

  /* Länkar & accent (dämpad) */
  --link:         #9dc1ff;
  --accent:       #6c8efb;

  /* Bars */
  --bar-track:    #2a2a2a;

  /* Sparkline */
  --sparkline-grid: rgba(255,255,255,0.10);
  --sparkline-line: #8aa2d9;
}
/* =========================================================
   GLOBALS
   ========================================================= */

*{ box-sizing: border-box; }
body{
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.55;
  background: var(--bg);
  color: var(--text);
}
ul{ padding-left: 1.1rem; margin: 0; }
/* =========================================================
   HEADER & SEARCH (senaste versionen)
   ========================================================= */

header{
  background: linear-gradient(180deg, var(--brand-1), var(--brand-2));
  padding: 18px 0 22px;
  text-align: center;
  position: relative;
}
/* Titel (gäller .title och h1) */
header .title,
header h1{
  font-family: "Inter", system-ui, sans-serif;
  margin: 0 auto;
  padding: 0 16px;
  font-size: clamp(28px, 6vw, 54px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .5px;
  color: #fff;
  max-width: 860px;
  text-align: center;
  display: block;
}
/* Mörkt läge – subtil glow */
.dark header .title,
.dark header h1{
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,.5);
}
/* Toggle-knapp (senaste positionen) */
.mode-toggle{
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
}
/* Sökfält (fullbredd-lågt) */
.searchbar{
  max-width: 860px;
  margin: 12px auto 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 10px 0 14px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.searchbar input{
  flex: 1;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  color: var(--text);
}
.searchbar input::placeholder{ color: var(--muted); }
.searchbar button{
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: var(--brand-1);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.searchbar button:hover{ background: var(--brand-1-hover); }
.searchbar button:focus-visible{ outline: 2px solid var(--brand-1); outline-offset: 2px; }
/* =========================================================
   LAYOUT
   ========================================================= */

.wrap{
  max-width: 900px;
  margin: 32px auto 64px;
  padding: 0 16px;
  border-top: 1px solid rgba(255,255,255,.05);
}
.intro{
  display: grid;
  grid-template-columns: 1.05fr 1fr 1.35fr;
  gap: 36px;
  align-items: stretch;
}
/* =========================================================
   CARDS
   ========================================================= */

.card{
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.card h2{
  margin: .1rem 0 .6rem 0;
  font-size: clamp(18px, 2.3vw, 28px);
}
.muted{ color: var(--muted); }
/* Projektkort – småjusteringar */
.card.projects{ padding-top: 12px; }
.card.projects h2{ margin: .05rem 0 .35rem 0; }
.card.projects ul{ margin-top: .2rem; }
.card ul a{ text-decoration: none; }
/* =========================================================
   BARS (CPU / RAM)
   ========================================================= */

.bar{
  width: 100%;
  height: 8px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bar-track);
  margin-top: 6px;
}
.bar-inn{
  height: 100%;
  background: var(--accent);
  border-radius: 6px;
  transition: none;
}
/* =========================================================
   SPARKLINE
   ========================================================= */

.system svg[aria-label*="sparkline"] rect:first-of-type{ fill: var(--card-bg) !important; }
.system svg[aria-label*="sparkline"] line{ stroke: var(--sparkline-grid) !important; }
.system svg[aria-label*="sparkline"] polyline{ stroke: var(--sparkline-line) !important; }
/* =========================================================
   WEATHER (senaste layoutversionen)
   ========================================================= */

.weather-card h2{ margin-bottom: 8px; }
/* Rad: Day | Temp | Icon | Wind | Precip | (Sun ↑ / ↓ / Daylight vid 8-kolumns-layouter) */
.weather-card .wx-row{
  display:grid;
  grid-template-columns:56px 26px 76px 1fr 84px 100px;
  gap:6px 8px;
  align-items:center;
  padding:6px 0;
  border-bottom:1px dashed var(--border)
}
.wx-row{
  display:grid;
  grid-template-columns:56px 26px 76px 1fr 84px 100px;
  gap:6px 8px;
  align-items:center;
  padding:6px 0;
  border-bottom:1px dashed var(--border)
}
.wx-cols{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px 50px; }
.wx-col{ display: grid; row-gap: 10px; }
.wx-c-d{ white-space: nowrap; font-weight: 700; }
.wx-c-t, .wx-c-w, .wx-c-p{ white-space: nowrap; }
.wx-ico{ text-shadow: -1px 0 #fff, 1px 0 #fff, 0 -1px #fff, 0 1px #fff; }
.dark .wx-ico{ text-shadow: none; }
/* Paired weather/sun cards */
.wx-pair{ display:grid; grid-template-columns: 1fr 1fr; gap:36px; align-items:stretch; }
.wx-pair .card{ display:flex; flex-direction:column; height:auto; align-self:stretch; }
.weather-card .wx-cols{ flex:1; }
.sun-card h2{ margin-bottom:8px; }
.sun-rows{ display:grid; row-gap:10px; }
.sun-row{ display:grid; grid-template-columns: 86px 1fr 1fr 1fr; align-items:center; column-gap:10px; }
.sun-d{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sun-rise, .sun-set, .sun-len{ text-align:center; white-space:nowrap; }
/* Extra väderelement */
.weather-top{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
#citySearch{
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:6px;
  min-width:160px;
}
/* =========================================================
   LINK STYLES (senaste versionen)
   ========================================================= */

/* Variabler för länkar i light/dark */
:root{
  --link-base:       #1f2937;
  --link-hover:      #0f172a;
  --link-visited:    #334155;
  --link-underline:  #cbd5e1;
}
.dark{
  --link-base:       #cfd3da;
  --link-hover:      #ffffff;
  --link-visited:    #b6bbc3;
  --link-underline:  #454a52;
}
/* Länkbeteende */
a{
  color: var(--link-base);
  text-decoration: none;
  position: relative;
  font-weight: 600;
  transition: color .18s ease, opacity .18s ease;
}
a:visited{ color: var(--link-visited); }
/* Underline via pseudo-element */
a::after{
  content:"";
  position:absolute;
  left:0; bottom:-1px;
  width:100%; height:1px;
  background: var(--link-underline);
  opacity:.45;
  transform: scaleX(.35);
  transform-origin:left;
  transition: transform .22s ease, opacity .18s ease;
}
a:hover{ color: var(--link-hover); }
a:hover::after{ opacity:.95; transform: scaleX(1); }
/* Fokusmarkering */
a:focus-visible{
  outline: 2px solid var(--link-underline);
  outline-offset: 3px;
  border-radius: 3px;
}
/* Dämpa länkar i .muted */
.muted a{ opacity:.8; }
.muted a:hover{ opacity:1; }
/* Mörkt läge – hovereffekt */
.dark a:hover{ color: #fff; text-shadow: 0 0 8px #0ff; }
/* =========================================================
   DARK THEME: neutralare bars & sparkline
   ========================================================= */

.dark{
  --accent:         #C21956;
  --bar-track:      #2a2a2a;
  --sparkline-grid: rgba(255,255,255,0.12);
  --sparkline-line: #C21956;
}
.dark .bar-inn{ opacity: .95; }
.dark .system svg[aria-label*="sparkline"] polyline,
.dark .disk   svg[aria-label*="sparkline"] polyline{ opacity: .95; }
/* =========================================================
   MEDIA-LISTA (kommande media)
   ========================================================= */

.media-card h2{ margin-bottom: 8px; }
.media-grid{ display:grid; row-gap:10px; }
.media-row{
  display:grid;
  grid-template-columns: 1.4fr 0.6fr 0.9fr 0.8fr 0.7fr; /* Title | Kind | Date | Left | Platform */
  align-items:center;
  column-gap:14px;
}
.media-row .mono{ font-variant-numeric: tabular-nums; }
.m-title a{ text-decoration:none; }
.m-title a:hover{ text-decoration:underline; }
/* Breddning i grid */
.card.wide{ grid-column: 1 / -1; }
.media-card.wide h2{ margin-bottom: 12px; }
.media-row.media-head{
  font-weight: 600;
  opacity: .9;
  border-bottom: 1px solid var(--card-border, #2a2a2a);
  padding-bottom: 6px;
  margin-bottom: 6px;
}
.media-head [data-sort]{ text-decoration: underline; }
/* Statusfärger */
.media-status-ended,
.media-status-cancelled{
  color: #d32f2f;
  font-weight: 600;
}
.media-status-hiatus{ opacity: .9; font-style: italic; }
.media-status-stale{ color: #c62828; font-weight: 600; }
/* =========================================================
   MISC STYLES & HARDENING
   ========================================================= */

html, body{ overflow-x: hidden; }
.card, .card *{ min-width: 0; }
img, svg, canvas, video{ max-width: 100%; height: auto; display: block; }
.system svg, .disk svg{ width: 100%; height: auto; }
/* Temperaturfärger */
.temp{ font-weight:600; }
/* Nya temperaturklasser – lämnar dina gamla orörda */
/* Kompakt, lugn färgskala: mörkblå → blå → teal/grön → amber → mörkröd */
.temp.t-deepcold { color: #1e3a8a; } /* blå-800  (mycket kallt) */
.temp.t-cold     { color: #3b82f6; } /* blå-500  (kallt)        */
.temp.t-cool     { color: #06b6d4; } /* cyan-500 (svalt)        */
.temp.t-mild     { color: #f59e0b; } /* amber-500 (milt/ljummet)*/
.temp.t-hot      { color: #dc2626; } /* röd-600  (varmt/het)    */

/* valfritt: lite textskugga för läsbarhet på mörk bakgrund */
.temp { text-shadow: 0 0 6px rgba(0,0,0,.18); }


/* (valfritt) tunn skugga för bättre läsbarhet på mörk bakgrund */
.temp { text-shadow: 0 0 6px rgba(0,0,0,.18); }

.temp.t-na{ color:var(--muted); }
/* Gör ALLA kort lika breda som News/Media (full bredd) */
.card{ grid-column: 1 / -1; }
/* Säkerställ att specialklasser inte bryter detta */
.card.wide,
.span2,
.span3{ grid-column: 1 / -1 !important; }
/* Make theme toggle transparent/icon-like */
#modeToggle{background:transparent;border:0;padding:0;line-height:1;cursor:pointer;outline:none;}
.subhead{font-size:18px;font-weight:700;margin:18px 0 8px;}

.sep{border:0;height:1px;background:var(--border);margin:18px 0;}

.kv{display:grid;grid-template-columns:1fr auto;gap:10px 14px;align-items:baseline;margin-top:6px;margin-bottom:10px;}

.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;}

.stats-left{min-width:0}

.stats-right{min-width:0}

.stats-disk{margin-top:24px}

/* Vertical spacing between cards */
.card{margin:16px 0}

.cards{display:block}

.load-graph svg{display:block;width:100%;height:auto;color:var(--accent)}

.temp-ok{color:#16a34a}.temp-warn{color:#f59e0b}.temp-hot{color:#ef4444}

.wx-card{display:grid;grid-template-columns:64px 40px 40px 1fr auto auto;gap:6px 10px;align-items:center;padding:6px 0;border-bottom:1px dashed var(--border)}
.wx-date{font-weight:600}
.wx-emoji{font-size:18px}
.wx-c-w,.wx-c-p,.wx-c-sunup,.wx-c-sundown,.wx-c-day{font-size:12px;opacity:.9}

.weather-table{display:block;}
.wx-row{display:grid;grid-template-columns:64px 28px 84px 1fr 90px 110px;gap:6px 10px;align-items:center;padding:6px 0;border-bottom:1px dashed var(--border)}
.wx-day{display:flex;flex-direction:column;font-weight:700}
.wx-dow{font-weight:700}
.wx-date{opacity:.85}
.wx-ico{font-size:18px;line-height:1}
.wx-temp{display:flex;gap:10px;align-items:center}
.wx-wind{text-align:right;opacity:.9}
.wx-precip{text-align:right}
.wx-sun{text-align:right}
.wx-footer{padding-top:8px;font-size:12px;opacity:.8}

.weather-card .wx-row{
  display:grid;
  grid-template-columns:56px 26px 76px 1fr 84px 100px;
  gap:6px 8px;
  align-items:center;
  padding:6px 0;
  border-bottom:1px dashed var(--border)
}
.wx-row{
  display:grid;
  grid-template-columns:56px 26px 76px 1fr 84px 100px;
  gap:6px 8px;
  align-items:center;
  padding:6px 0;
  border-bottom:1px dashed var(--border)
}
/* gör väderikonen optiskt mer vänsterställd */
.wx-ico{font-size:18px;line-height:1;margin-left:-2px}

/* --- WX: optisk vänsterjustering & tajtare kolumner (sista ordet) --- */
.weather-table .wx-row{
  grid-template-columns:56px 26px 76px 1fr 84px 100px;
  gap:6px 8px; /* lite tajtare */
}
/* ikonen något optiskt vänster */
.wx-ico{ margin-left:-2px; }

/* --- WX override: tajtare kolumner & optisk vänsterställning --- */
.weather-table .wx-row{
  grid-template-columns:56px 26px 76px 1fr 84px 100px;
  gap:6px 8px;
}
.wx-ico{ margin-left:-2px; } /* ikonen lite mer åt vänster */

/* Weather hardening (rad 1–6 fixar dina punkter 3–5) */
.weather-card .wx-wind,
.weather-card .wx-sun { white-space: nowrap; }  /* inga radbrytningar */
.weather-card .wx-sun::before,
.weather-card .wx-sun::after { content: none !important; } /* inga pseudo-linjer */

.weather-card { width: 100%; } /* kortet över hela bredden */

/* WX: inga stora mellanrum, allt ryms i kortet */
.weather-card .wx-row,
.wx-row{
  /* Day | Icon | Temp | Wind | Precip | Sun */
  grid-template-columns: 56px 26px 76px 170px 84px 130px; /* ersätter 1fr-kolumnen */
  gap: 6px 8px;
}

/* vind & sol på en rad, men tillåt brytning om kortet blir trångt */
.weather-card .wx-wind,
.weather-card .wx-sun { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* liten optisk vänsterjustering av ikonen */
.wx-ico{ margin-left:-2px; }

/* --- WX layout: vänsterställd dag, fyll på över kortet, sol längst till höger --- */
#wx .weather-table { width: 100%; }

#wx .wx-row{
  display: grid;
  /* Day | Icon | Temp | Wind (fyller) | Precip | Sun (längst ut) */
  grid-template-columns:
    max-content   /* day */
    26px          /* icon */
    max-content   /* temp (low→high) */
    minmax(200px, 1fr) /* wind – får svälja mellanrummet */
    max-content   /* precip mm */
    max-content;  /* sun-up/down – höger */
  column-gap: 14px;
  align-items: center;
}

#wx .wx-day{ text-align: left; }
#wx .wx-ico{ margin-left: 0; }                    /* lite tightare vid dag */
#wx .wx-temp .temp{ margin-right: 8px; }          /* lite luft mellan low/high */

#wx .wx-wind{ white-space: nowrap; }              /* ingen radbrytning i vind */
#wx .wx-precip{ white-space: nowrap; }            /* mm + ikon hålls ihop */

#wx .wx-sun{
  white-space: nowrap;
  justify-self: end;                               /* tryck soltider till höger */
  text-align: right;
}

/* små skärmar: ge solen mer plats, dra ned vind-kolumnens minbredd lite */
@media (max-width: 980px){
  #wx .wx-row{
    grid-template-columns:
      max-content 26px max-content minmax(140px,1fr) max-content max-content;
    column-gap: 10px;
  }
}

/* --- WX: expandable day details --- */
#wx .wx-row{
  cursor: pointer;
}

#wx .wx-details{
  display: none;
  font-size: 12px;
  padding: 4px 0 8px 4px;
  border-bottom: 1px dashed var(--border);
}

#wx .wx-details.open{
  display: block;
}

.wx-details-inner{
  display: grid;
  row-gap: 2px;
}

.wx-hour-row{
  display: grid;
  grid-template-columns: 46px 60px 1fr 70px; /* time | temp | wind | precip */
  column-gap: 8px;
  align-items: baseline;
}

.wx-hour-time,
.wx-hour-temp,
.wx-hour-wind,
.wx-hour-prec{
  font-variant-numeric: tabular-nums;
}