/* Eisenhower matrix (/eisenhower-matrix): what is its own, the four quadrants, the task cards, dragging and the quick sort
   question. Everything else (stage, panels, fields, buttons, colours) comes from the app kit (css/app-kit,
   docs/app-kit.md). Loaded only on this app's page (StylePaths). */

/* The quadrant colours: a soft fill and a top edge per quadrant (do first red, schedule blue, delegate amber,
   eliminate grey). */
.eisenhower-landing-app {
    --em-q1: #fee2e2;
    --em-q2: #dbeafe;
    --em-q3: #fef3c7;
    --em-q4: #e5e7eb;
    --em-q1-edge: #ef4444;
    --em-q2-edge: #3b82f6;
    --em-q3-edge: #f59e0b;
    --em-q4-edge: #9ca3af;
}

.eisenhower-landing-app[data-theme="dark"] > .filter-landing-stage {
    --em-q1: #3b1a1f;
    --em-q2: #172a4a;
    --em-q3: #3a2e12;
    --em-q4: #1f2937;
}

.eisenhower-landing-app > .filter-landing-stage.eisenhower-landing-stage {
    position: relative;
    gap: var(--ak-space-3);
}

/* Full width, also where the shared narrow-screen layout (seo-pages.css, up to 960px) starts the stage's children at
   their own width. */
.eisenhower-landing-app > .filter-landing-stage.eisenhower-landing-stage > * {
    align-self: stretch;
}

.eisenhower-landing-app .em-head {
    display: flex;
    flex-direction: column;
    gap: var(--ak-space-1);
}

.eisenhower-landing-app .em-title {
    font-size: var(--ak-fs-lg);
}

/* Quick sort: the task and the question, centred. */
.eisenhower-landing-app .em-sorter {
    align-items: center;
    text-align: center;
}

.eisenhower-landing-app .em-sorter-task {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.eisenhower-landing-app .em-sorter-question {
    margin: 0;
    font-size: 1.1rem;
}

.eisenhower-landing-app .em-sorter-buttons {
    display: flex;
    justify-content: center;
    gap: var(--ak-space-2);
}

.eisenhower-landing-app .em-axes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    color: var(--ak-muted);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
}

.eisenhower-landing-app .em-board {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.eisenhower-landing-app .em-quad {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    min-height: 10rem;
    padding: 0.6rem;
    border: 1px solid var(--ak-border);
    border-top-width: 4px;
    border-radius: var(--ak-radius);
    background: var(--ak-panel);
    transition: box-shadow var(--ak-duration) var(--ak-ease);
}

.eisenhower-landing-app .em-inbox {
    border-top: 4px solid var(--ak-accent);
}

.eisenhower-landing-app .em-quad--1 { background: var(--em-q1); border-top-color: var(--em-q1-edge); }
.eisenhower-landing-app .em-quad--2 { background: var(--em-q2); border-top-color: var(--em-q2-edge); }
.eisenhower-landing-app .em-quad--3 { background: var(--em-q3); border-top-color: var(--em-q3-edge); }
.eisenhower-landing-app .em-quad--4 { background: var(--em-q4); border-top-color: var(--em-q4-edge); }

.eisenhower-landing-app .em-quad.is-drop {
    box-shadow: 0 0 0 3px var(--ak-accent);
}

.eisenhower-landing-app .em-quad-head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0 0.5rem;
}

.eisenhower-landing-app .em-quad-name {
    margin: 0;
    color: var(--ak-text);
    font-size: var(--ak-fs-md);
}

.eisenhower-landing-app .em-quad-hint {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--ak-muted);
    font-size: 0.8rem;
}

.eisenhower-landing-app .em-count {
    min-width: 1.6rem;
    padding: 0.05rem 0.45rem;
    border-radius: var(--ak-radius-pill);
    background: var(--ak-bg);
    color: var(--ak-text);
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
}

.eisenhower-landing-app .em-list {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.eisenhower-landing-app .em-card,
.eisenhower-landing-app .em-ghost {
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--ak-border);
    border-radius: var(--ak-radius-sm);
    background: var(--ak-bg);
    color: var(--ak-text);
    font-size: 0.9rem;
    list-style: none;
}

.eisenhower-landing-app .em-card.is-dragging {
    opacity: 0.4;
}

/* The copy under the pointer while a card or the new task chip is dragged. */
.eisenhower-landing-app .em-ghost {
    position: fixed;
    z-index: 1000;
    margin: 0;
    box-shadow: var(--ak-shadow-lg);
    pointer-events: none;
    box-sizing: border-box;
}

.eisenhower-landing-app .em-card-head {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}

.eisenhower-landing-app .em-card-head input[type="checkbox"] {
    flex: none;
    margin: 0.2rem 0 0;
    accent-color: var(--ak-accent);
}

.eisenhower-landing-app .em-card-head input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--ak-accent);
    outline-offset: 2px;
}

.eisenhower-landing-app .em-grip,
.eisenhower-landing-app .em-draft {
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.eisenhower-landing-app .em-grip {
    display: inline-flex;
    color: var(--ak-muted);
    line-height: 1.3;
}

.eisenhower-landing-app .em-card-title {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.eisenhower-landing-app .em-card.is-done .em-card-title {
    color: var(--ak-muted);
    text-decoration: line-through;
}

.eisenhower-landing-app .em-card-meta,
.eisenhower-landing-app .em-card-notes {
    margin: 0.2rem 0 0;
    color: var(--ak-muted);
    font-size: 0.8rem;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.eisenhower-landing-app .em-card-meta.is-overdue {
    color: var(--ak-danger);
    font-weight: 600;
}

.eisenhower-landing-app .em-card-tools {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.2rem;
    margin-top: 0.3rem;
}

/* The arrows point at the target quadrant, and the urgent column is on the right on a right-to-left page. */
[dir="rtl"] .eisenhower-landing-app [data-em-move] .ak-icon {
    transform: scaleX(-1);
}

.eisenhower-landing-app .em-qadd {
    display: flex;
    gap: 0.3rem;
}

.eisenhower-landing-app .em-form {
    margin: var(--ak-space-2) 0;
}

.eisenhower-landing-app .em-options {
    margin-bottom: var(--ak-space-2);
}

.eisenhower-landing-app .em-checks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ak-space-2) var(--ak-space-4);
}

.eisenhower-landing-app .em-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: var(--ak-space-2);
}

/* The new task chip: drag it into a quadrant, or focus it and press 1 to 4. */
.eisenhower-landing-app .em-draft {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.7rem;
    border: 1px dashed var(--ak-accent);
    border-radius: var(--ak-radius-sm);
    color: var(--ak-accent);
    font-size: var(--ak-fs-sm);
}

.eisenhower-landing-app .em-draft:focus-visible {
    outline: 2px solid var(--ak-accent);
    outline-offset: 2px;
}

.eisenhower-landing-app .em-draft.is-dragging {
    opacity: 0.5;
}

/* Phones: the stage uses the full width and the quadrants stack in one column. */
@media (max-width: 600px) {
    .eisenhower-landing-app > .filter-landing-stage.eisenhower-landing-stage {
        width: 100%;
        max-width: none;
        padding: 0.75rem 0.5rem;
    }

    .eisenhower-landing-app .em-board,
    .eisenhower-landing-app .em-two {
        grid-template-columns: 1fr;
    }

    .eisenhower-landing-app .em-axes {
        display: none;
    }

    .eisenhower-landing-app .em-quad {
        min-height: 6rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .eisenhower-landing-app .em-quad {
        transition: none;
    }
}