/* ===== Eisenhower Matrix ===== */
/* Eisenhower matrix: urgency on the top axis and importance on the left axis. */
.matrix-grid {
  display: grid;
  grid-template-columns: var(--toddyi-size-2rem) 1fr;
  grid-template-rows: auto 1fr;
  gap: var(--toddyi-size-0-5rem);
}
.matrix-axis-x {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--toddyi-size-1rem);
  text-align: center;
  font-weight: 700;
  font-size: var(--toddyi-size-0-85rem);
  color: var(--pico-muted-color);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.matrix-axis-y {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  gap: var(--toddyi-size-1rem);
}
.matrix-axis-y span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
  align-self: center;
  justify-self: center;
  font-weight: 700;
  font-size: var(--toddyi-size-0-85rem);
  color: var(--pico-muted-color);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.matrix {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: var(--toddyi-size-1rem);
}
.matrix-empty { font-size: var(--toddyi-size-0-8rem); text-align: center; padding: var(--toddyi-size-0-5rem); }
.matrix-quad {
  border: var(--toddyi-size-1px) solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  padding: var(--toddyi-size-0-75rem);
  min-height: var(--toddyi-size-180px);
  background: var(--pico-card-background-color);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.matrix-quad.is-over { box-shadow: 0 0 0 var(--toddyi-size-2px) var(--pico-primary) inset; }
.matrix-quad__header { display: flex; flex-direction: column; margin-bottom: var(--toddyi-size-0-5rem); }
.matrix-quad--do { border-top: var(--toddyi-size-3px) solid var(--toddyi-danger); }
.matrix-quad--plan { border-top: var(--toddyi-size-3px) solid var(--toddyi-success); }
.matrix-quad--delegate { border-top: var(--toddyi-size-3px) solid var(--toddyi-warning); }
.matrix-quad--eliminate { border-top: var(--toddyi-size-3px) solid var(--pico-muted-color); }
.matrix-list { display: flex; flex-direction: column; gap: var(--toddyi-size-0-4rem); min-height: var(--toddyi-size-60px); }
.matrix-card {
  display: flex; align-items: center; gap: var(--toddyi-size-0-5rem);
  padding: var(--toddyi-size-0-4rem) var(--toddyi-size-0-6rem); border-radius: var(--toddyi-size-0-5rem);
  background: var(--pico-background-color);
  border: var(--toddyi-size-1px) solid var(--pico-muted-border-color);
  cursor: grab;
}
.matrix-card:active { cursor: grabbing; }