/* Startsidan */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
  margin-bottom: var(--s-7);
}
.hello h1 { font-size: var(--step-5); line-height: 1.02; margin-bottom: var(--s-3); }
.hello .lead { font-size: var(--step-1); color: var(--muted); margin: 0 0 var(--s-5); max-width: 32ch; }

/* Svit */
.streak-msg { margin: 0 0 var(--s-3); font-weight: 600; max-width: 44ch; display: flex; gap: var(--s-2); align-items: flex-end; }
.flame--msg img { width: 16px; height: 40px; }
.streak-msg .muted { font-weight: 400; }
.streak-days { list-style: none; display: flex; gap: var(--s-2); margin: 0; padding: 0; }
.streak-days li { display: grid; justify-items: center; gap: 4px; font-size: 0.75rem; color: var(--muted); }
.streak-days .day-slot {
  display: grid; place-items: end center;
  width: 28px; height: 36px;
  border-bottom: 2px solid var(--line-strong);
}
.streak-days li.in-streak .day-slot { border-bottom-color: var(--highlight); }
.streak-days li.on:not(.in-streak) .flame { opacity: 0.55; filter: saturate(0.6); }
.streak-days li.is-today .wd { color: var(--text); font-weight: 700; }

/* Dagens ord: ett uppslag ur en ordbok */
.today-word {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-5);
  box-shadow: var(--shadow-1);
}
.today-word h2 { font-size: var(--step--1); font-weight: 600; color: var(--muted); margin-bottom: var(--s-2); letter-spacing: 0; }
.tw-word { font-size: var(--step-4); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: var(--s-3); overflow-wrap: anywhere; }
.tw-word .mark { padding: 0 0.06em; }
.tw-klass { font-size: var(--step-0); font-weight: 400; color: var(--muted); letter-spacing: 0; font-family: var(--font-read); font-style: italic; }
.tw-def { font-family: var(--font-read); font-size: var(--step-1); line-height: 1.45; margin-bottom: var(--s-3); }
.tw-syn { font-size: var(--step--1); color: var(--muted); }
.tw-syn span { color: var(--text); font-weight: 600; }
.tw-ex { font-family: var(--font-read); font-style: italic; color: var(--muted); border-left: 3px solid var(--highlight); padding-left: var(--s-3); }
.tw-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.tw-fav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.tw-fav[aria-pressed="true"] svg { fill: var(--highlight); stroke: #8a5a00; }

/* Övningar */
.practice h2 { font-size: var(--step-1); margin-bottom: var(--s-2); }
.practice-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.practice-list li { border-bottom: 1px solid var(--line); }
.practice-list a {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) minmax(0, 13rem);
  gap: var(--s-1) var(--s-5);
  align-items: baseline;
  padding: var(--s-4) var(--s-2);
  color: var(--text);
  text-decoration: none;
}
.practice-list a:hover { background: var(--surface); }
.practice-title { font-size: var(--step-2); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.practice-list a:hover .practice-title, .practice-list a:focus-visible .practice-title {
  background: linear-gradient(to bottom, transparent 60%, var(--highlight) 60%, var(--highlight) 88%, transparent 88%);
}
:root[data-theme="dark"] .practice-list a:hover .practice-title,
:root[data-theme="dark"] .practice-list a:focus-visible .practice-title {
  background: linear-gradient(to bottom, transparent 60%, rgb(255 201 60 / 0.5) 60%, rgb(255 201 60 / 0.5) 88%, transparent 88%);
}
.practice-desc { color: var(--muted); }
.practice-status { font-size: var(--step--1); font-weight: 600; color: var(--primary); text-align: right; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: var(--s-5); margin-bottom: var(--s-6); }
}
@media (max-width: 720px) {
  .practice-list a { grid-template-columns: 1fr; padding-inline: 0; }
  .practice-status { text-align: left; }
  .practice-status:empty { display: none; }
}

/* Om sidan och Bjud på en kaffe */
.about {
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line-strong);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
}
.about h2 { font-size: var(--step-2); }
.about-text p { max-width: 58ch; }
.coffee {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-5);
  box-shadow: var(--shadow-1);
}
.coffee-cup { width: 44px; height: 44px; color: var(--text); margin-bottom: var(--s-2); }
.coffee h3 { font-size: var(--step-1); margin-bottom: var(--s-2); }
.coffee p { color: var(--muted); font-size: var(--step--1); }
.coffee-btn { background: var(--highlight); border-color: var(--highlight); color: var(--on-highlight); }
.coffee-btn:hover { background: #f0b820; border-color: #f0b820; color: var(--on-highlight); }
.coffee-btn[aria-disabled="true"] { background: var(--surface-2); border-color: var(--line-strong); color: var(--muted); cursor: default; }
@media (max-width: 800px) { .about { grid-template-columns: 1fr; gap: var(--s-4); } }