/* ── Kindred Spirits — det som Tailwind-klasser inte uttrycker ──
   Paletten, typografin och layouten ligger i Tailwind-configen i
   dashboard.html, genererad ur DESIGN.md. Här finns bara det som kräver
   riktig CSS: dolda scrollbars, korten's tryckkänsla, och details-elementet. */

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* DESIGN.md nivå 2 → 3: kortet vilar utan skugga och får en mjuk, diffus
   skugga tonad i primärfärgen vid interaktion, plus en lätt nedtryckning.
   Ingen hård skugga någonstans — systemet bygger höjd med tonala lager. */
.task-card {
  transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.task-card:hover {
  box-shadow: 0 4px 12px rgba(112, 88, 91, 0.08);
}

.task-card:active {
  transform: scale(0.98);
}

/* Egen triangel bort — "Liknande" ska se ut som en etikett, inte som ett
   webbläsarwidget. */
details > summary {
  list-style: none;
  cursor: pointer;
}

details > summary::-webkit-details-marker {
  display: none;
}

/* Material Symbols kommer som variabel font; utan detta ärver ikonerna
   font-weight från omgivningen och blir ojämnt tunga. DESIGN.md kräver
   minst 2px streck. */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}

/* Respektera användare som bett om mindre rörelse. */
@media (prefers-reduced-motion: reduce) {
  .task-card {
    transition: none;
  }

  .task-card:active {
    transform: none;
  }
}

/* ── Taggpopup ──
   Öppen popup ska ligga över korten under sig, och kortet självt får inte
   klippa den. Kortens overflow är default visible, men lanens y-scroll
   klipper — därför lyfts hela kortet vid öppen popup. */
.tagg-popup[open] {
  z-index: 40;
}

.tagg-popup[open] > summary {
  background: var(--surface-container-high, #e7e8e9);
}

/* Kryssrutor och radioknappar i systemets färg, inte webbläsarens blå. */
.tagg-popup input[type="radio"],
.tagg-popup input[type="checkbox"] {
  accent-color: #70585b;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ── Dra läxor mellan dagar ──
   Målplattform: Safari på iPad. touch-action måste bort på greppet, annars
   scrollar sidan i stället för att dra. user-select och touch-callout måste
   bort, annars markerar långtryck text och öppnar Safaris kontextmeny mitt
   i draget. */
.dra-grepp {
  touch-action: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.dra-grepp:active {
  cursor: grabbing;
  opacity: 1;
}

/* Originalet tonas ned medan spöket följer fingret. */
.task-card.dras {
  opacity: 0.35;
}

/* Spöket får inte fånga pekaren — elementFromPoint måste se dagkolumnen under. */
.drag-spok {
  position: fixed;
  pointer-events: none;
  z-index: 60;
  margin: 0;
  transform: rotate(1.5deg);
  box-shadow: 0 8px 24px rgba(112, 88, 91, 0.25);
  opacity: 0.95;
}

/* iPad har ingen hover, så måldagen måste markeras av draglogiken. */
[data-dag].slappmal {
  outline: 2px dashed #70585b;
  outline-offset: -4px;
  background-color: #fadadd33;
}