/* ===================================================================
   Shared components

   Anything used on more than one surface lives here, imported by every
   stylesheet that needs it. The pick row is the clearest case: choosing a
   game happens on the homepage picker, on games.html and on /onephone/, and
   it was three different components until it wasn't.
   =================================================================== */

/* ===================================================================
   Picker v2

   Sixteen identical 206px tiles became three suggested rows and one
   level of "all sixteen", grouped by mood. Each row is the row that
   already existed on /onephone/ — icon, name, one-line hook, and the
   two facts a family actually decides on.
   =================================================================== */

.picker {
    width: 100%;
    text-align: left;
}

.pick-eyebrow {
    font-size: var(--fs-eyebrow);
    font-weight: 800;
    color: var(--color-muted-brown);
    margin: var(--space-lg) 0 var(--space-sm);
}

.pick-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.pick-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-height: 96px;
    padding: var(--space-md);
    background-color: var(--color-warm-white);
    border: 1px solid var(--color-soft-gray);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: transform var(--t-gentle), box-shadow var(--t-gentle);
}

@media (hover: hover) and (pointer: fine) {
    .pick-row:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-medium);
    }
}

.pick-art {
    flex: 0 0 auto;
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pick-art svg { width: 100%; height: auto; }

.pick-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pick-name {
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--color-deep-warm);
}

.pick-hook {
    font-size: 0.9375rem;
    color: var(--color-deep-warm);
}

.pick-meta {
    font-size: var(--fs-eyebrow);
    color: var(--color-muted-brown);
}

/* One level of disclosure, never two. */
.pick-more { margin-top: var(--space-lg); }

.pick-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--target-min);
    font-weight: 800;
    color: var(--color-deep-warm);
    cursor: pointer;
    list-style: none;
    border-radius: var(--radius-lg);
}

.pick-summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) {
    .pick-summary:hover {     background-color: var(--color-eggshell); 
    }
}

/* A fourth line only some surfaces need — "Needs 4, there are 3 of you". */
.pick-note {
    font-size: var(--fs-eyebrow);
    color: var(--color-coral-text);
}

@media (min-width: 720px) {
    .pick-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    /* Three things want three columns: in two, the third card sits alone. */
    .pick-list--three {
        grid-template-columns: repeat(3, 1fr);
    }
}