/* ===== 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);
  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);
}
.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);
  /* No gap: the quadrants share their edges, which is what makes the four of
     them one divided square rather than four cards. */
  border: var(--toddyi-size-1px) solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  /* So the outer radius clips the corner quadrants. */
  overflow: hidden;
}
.matrix-empty { font-size: var(--toddyi-size-0-8rem); text-align: center; padding: var(--toddyi-size-0-5rem); }
.matrix-quad {
  /* A quadrant is a <section>, and Pico gives those a typography margin. With
     the gap gone that margin is what was left between the rows — a 20px band
     that read as the cards still being separate. Measured, not guessed: the row
     was 200px and the quadrant 180 plus 20 of margin. */
  margin: 0;
  /* The dividing lines belong to the plane, so only the left column draws the
     vertical one; the horizontal one is the coloured rule below. */
  border-inline-end: var(--toddyi-size-1px) solid var(--pico-muted-border-color);
  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); }
/* The right column has nothing to its right, and the bottom row's coloured rule
   is also the horizontal divider — one line, not two stacked. */
.matrix-quad:nth-child(2n) { border-inline-end: 0; }
.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; }