/* ============================================================================
   The wall: a column per status, cards you drag between and within them

   A wall is not a board file and not a table. It is the shape a person already
   has in their head for "what is on this, and what next", so it is columns of
   cards with the column headed by the status it draws.

   WHY A SHEET OF ITS OWN. A card here is not .card: it is small, it is grabbed
   with the pointer, it carries a selected state and a drag state, and it sits in
   a scrolling stack. Styling it as a .card variant would put five states on the
   element every other card in the suite also wears, and the two would drift the
   first time one of them changed.
   ========================================================================== */

.wall {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-6);
    /* Every column as tall as the tallest, so the bottom of a short column is
       still a place to drop a card rather than empty page. */
    align-items: stretch;
}

/* A column is a tray, not a card: sunken, so the cards inside it read as sitting
   on top of something rather than as boxes inside a box. */
.wall-column {
    display: flex;
    flex-direction: column;
    background: var(--surface-sunken);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    min-width: 0;
}

.wall-column-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3) var(--space-5);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.wall-column-count {
    font-variant-numeric: tabular-nums;
    color: var(--text-subtle);
}

/* The drop zone. It keeps a floor so an empty column is still a place a card can
   be dropped: a zero-height target is a column nothing can ever be moved into.
   It grows to the foot of the column, so the tint shows the whole target. */
.wall-stack {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    list-style: none;
    margin: 0;
    padding: 0;
    min-height: var(--space-24);
}

/* The column being dragged over. Brand-tinted rather than outlined, because an
   outline on the tray and an outline on the card being dragged read as two
   different things happening. */
.wall-stack-over { background: var(--brand-ring); border-radius: var(--radius-md); }

.wall-card {
    position: relative;
    background: var(--surface);
    border: var(--border-width) solid var(--border);
    border-left: var(--border-width-thick) solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: var(--space-5) var(--space-6);
    box-shadow: var(--shadow-sm);
    cursor: grab;
    /* A press on a card is the start of a drag, and a drag that crosses the
       title would otherwise select it as it goes. */
    user-select: none;
    transition: box-shadow var(--transition), border-color var(--transition);
}

.wall-card:hover { box-shadow: var(--shadow-md); }

/* Selection is a decision the reader made, so it is the loudest state on the
   card: the brand on the grab edge and a ring, which is the same pair every
   focused control in this book wears. */
.wall-card-selected {
    border-color: var(--brand);
    border-left-color: var(--brand);
    box-shadow: var(--shadow-inset-focus), var(--shadow-md);
}

/* The card under the pointer during a drag. Half-visible and left in place, so
   the gap it will leave is visible while the drop target is being chosen. */
.wall-card-dragging { opacity: 0.4; cursor: grabbing; }

/* The copy that follows the pointer. The script owns where it is and nothing
   else; it takes no pointer events, so what is under the pointer is the wall. */
.wall-card-ghost {
    position: fixed;
    left: var(--ghost-x);
    top: var(--ghost-y);
    width: var(--ghost-width);
    margin: 0;
    list-style: none;
    box-shadow: var(--shadow-lg);
    cursor: grabbing;
    pointer-events: none;
    z-index: var(--z-toast);
}

/* Where the card would land. A line rather than a gap, because a gap that opens
   as the pointer moves makes the whole column jump under the cursor. It is drawn
   in the gap between cards by a pseudo-element: as a box-shadow it lost to the
   hover shadow, so the line vanished on the card the pointer was over, which at
   the top and bottom of a column is the card it is marking. */
.wall-card-before::before,
.wall-card-after::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: var(--border-width-thick);
    background: var(--brand);
    border-radius: var(--radius-full);
    pointer-events: none;
}

.wall-card-before::before { top: calc(-1 * (var(--space-3) + var(--border-width-thick)) / 2 - var(--border-width)); }
.wall-card-after::after { bottom: calc(-1 * (var(--space-3) + var(--border-width-thick)) / 2 - var(--border-width)); }

.wall-card-title {
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--text);
    margin: 0;
    overflow-wrap: anywhere;
}

.wall-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
}

/* The controls are the keyboard's way of doing what the pointer does by
   dragging, and the way it is done at all without scripting. They are always in
   the document and only visible when the card is under the pointer, focused or
   selected: four buttons on every card at rest is a toolbar, not a wall. */
.wall-card-tools {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    opacity: 0;
    transition: opacity var(--transition);
}

.wall-card:hover .wall-card-tools,
.wall-card:focus-within .wall-card-tools,
.wall-card-selected .wall-card-tools { opacity: 1; }

.wall-card-tools form { display: inline-flex; margin: 0; }

/* === The detail dialog ==================================================== */

.wall-detail {
    margin: auto;
    padding: 0;
    border: none;
    background: transparent;
    overflow: visible;
    color: var(--text);
}

.wall-detail::backdrop { background: var(--backdrop); }

.wall-detail-body {
    width: 560px;
    max-width: calc(100vw - var(--space-16));
    max-height: calc(100vh - var(--space-16));
    overflow-y: auto;
    background: var(--surface-raised);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: var(--space-12);
}

.wall-detail-title {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--text);
    margin: 0 0 var(--space-5);
}

.wall-detail-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-8);
}

.wall-detail-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-10);
    padding-top: var(--space-8);
    border-top: var(--border-width) solid var(--border-subtle);
}