/* Sets · home-today.css
   Stijl voor het bijbehorende home-blok. Zie js/home-today.js.

   Eigen klassen in plaats van Tailwind-utilities: dit is de primaire actie
   van de home en heeft een accentrand, een verloop en een volle knop nodig —
   dat leest hier beter dan een rij utility-namen in de JS. */

.home-today-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.125rem;
  border: 1px solid;
  padding: 0.875rem 1rem 1rem;
}

/* De accentbalk links maakt van de kaart een aankondiging in plaats van
   nog een vlak: alleen zichtbaar als er echt iets te starten valt. */
.home-today-card.is-planned::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--sets-accent-text);
}

.home-today-eyebrow {
  font-size: 10px;
  line-height: 1.2;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.home-today-lead {
  margin-top: 0.375rem;
  font-size: 12px;
  line-height: 1.3;
}

.home-today-title {
  margin-top: 0.3rem;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* De aanmoediging en de uitleg zijn zinnen, geen titels: kleiner en met
   ruimte om af te breken. */
.home-today-card.is-done .home-today-title,
.home-today-card.is-empty .home-today-title {
  font-size: 14px;
  font-weight: 600;
  white-space: normal;
}

.home-today-meta {
  margin-top: 0.2rem;
  font-size: 12.5px;
  line-height: 1.3;
}

.home-today-start {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  margin-top: 0.875rem;
  border-radius: 0.875rem;
  font-size: 14px;
  font-weight: 700;
  color: #09090b;
  transition: transform 0.12s ease, filter 0.12s ease;
}

.home-today-start:active {
  transform: scale(0.97);
  filter: brightness(0.94);
}

@media (prefers-reduced-motion: reduce) {
  .home-today-start {
    transition: none;
  }
  .home-today-start:active {
    transform: none;
  }
}

/* ---------- Donker ---------- */

html.dark .home-today-card {
  background-color: rgba(24, 24, 27, 0.6);
  border-color: rgb(39, 39, 42);
}

html.dark .home-today-card.is-planned {
  background-image: linear-gradient(100deg, rgba(198, 244, 50, 0.1), rgba(198, 244, 50, 0) 62%);
  border-color: rgba(198, 244, 50, 0.28);
}

html.dark .home-today-eyebrow {
  /* #71717a haalde 3,87:1 op de donkere kaart — te weinig voor 10px tekst.
     Het token zit op 6,5:1 en volgt bovendien beide thema's. */
  color: var(--sets-text-2);
}

html.dark .home-today-card.is-planned .home-today-eyebrow {
  color: var(--sets-accent-text);
}

html.dark .home-today-title {
  color: rgb(244, 244, 245);
}

html.dark .home-today-lead,
html.dark .home-today-meta {
  color: rgb(161, 161, 170);
}

/* ---------- Licht ---------- */

html:not(.dark) .home-today-card {
  background-color: var(--surface, #ffffff);
  border-color: var(--separator, #e5e5ea);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

html:not(.dark) .home-today-card.is-planned {
  /* Het felle lime is op wit niet leesbaar als tekst; als vlak mag het wel,
     mits flink verdund. De tekst pakt de donkere variant. */
  background-image: linear-gradient(100deg, rgba(138, 172, 26, 0.12), rgba(138, 172, 26, 0) 62%);
  border-color: rgba(138, 172, 26, 0.35);
}

html:not(.dark) .home-today-card.is-planned::before {
  background: var(--sets-accent-text);
}

html:not(.dark) .home-today-eyebrow {
  color: var(--label-2, rgba(60, 60, 67, 0.6));
}

html:not(.dark) .home-today-card.is-planned .home-today-eyebrow {
  color: var(--sets-accent-text);
}

html:not(.dark) .home-today-title {
  color: var(--sets-text);
}

html:not(.dark) .home-today-lead,
html:not(.dark) .home-today-meta {
  color: var(--label-2, rgba(60, 60, 67, 0.6));
}