/* ============================================================================
   MY STUFF (/app/?view=stuff)

   The five personal lists, lifted out of myworkshopr/css/myworkshopr.css and
   rescoped from that sheet's `.content-panel[data-panel="…"]` selectors to a
   single `.app-stuff`. The old sheet wrote one near-identical block per panel:
   six copies of the same 40px / 1fr / auto row, differing mostly in which
   element sat in the third column. There is one row object here, and the two
   variants that genuinely differ (top-aligned for a row with a body of text,
   two-up for the card grids) are modifiers on it.

   Everything paints from platform tokens. The old blocks reached for
   `--mainsite-*` and a bare white literal, and tinted comment icons blue /
   green / purple by item type, which Red Unification (D1) retired outside the
   planner canvas.

   Nothing keys off a viewport unit or a fixed pixel offset: this view scrolls
   inside the shell's own region rather than the window, so anything measured
   against the viewport lands in the wrong place.
   ============================================================================ */

/* No local cap: the view sits in the six-column main of the page grid
   (app-shell.css, .app-page), which owns the width. */
/* The hero and the tab strip render as their own block above the list, so the
   gap between them is set once rather than on every step's first child. */
.app-stuff--head {
    margin-bottom: var(--space-8);
}

/* ── tab strip ───────────────────────────────────────────────────────────── */

.app-stuff__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--divider-color);
}

.app-stuff__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    background: transparent;
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: var(--font-medium);
    color: var(--color-ink-secondary);
    text-decoration: none;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.app-stuff__tab:hover {
    background: var(--gray-100);
    color: var(--color-ink);
}

.app-stuff__tab.is-active {
    background: var(--phase-learn);
    color: var(--text-inverse);
}

/* The count rides inside the pill rather than beside it: as a sibling badge it
   read as a second control, and it is a property of the tab, not a chip of its
   own. */
.app-stuff__tab-count {
    min-width: 1.5em;
    padding: 0 var(--space-1-5);
    border-radius: var(--radius-full);
    background: var(--gray-200);
    color: var(--color-ink-secondary);
    font-size: var(--text-caption);
    font-weight: var(--font-bold);
    text-align: center;
}

.app-stuff__tab.is-active .app-stuff__tab-count {
    background: var(--phase-learn-dark);
    color: var(--text-inverse);
}

/* ── filter chips (favorites) ────────────────────────────────────────────── */

.app-stuff__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

/* ws_button's ghost variant, pulled into a chip: the pill radius and the
   selected state are the only things this adds. */
.app-stuff .app-stuff__chip {
    border-radius: var(--radius-full);
    background: var(--gray-100);
    color: var(--color-ink-secondary);
}

.app-stuff .app-stuff__chip:hover {
    background: var(--gray-200);
    color: var(--color-ink);
}

.app-stuff .app-stuff__chip.is-active {
    background: var(--phase-learn);
    color: var(--text-inverse);
}

/* ── the one row object ──────────────────────────────────────────────────── */

.app-stuff__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: var(--space-4);
}

.app-stuff__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* A card in a grid of cards, drawn like one. The fill and border already came
   from the card tokens; the radius did not, so these rows were the 8px corner
   in a frame where every other card is 12px, and they were the only card grid
   with no shadow to lift them off the paper. */
.app-stuff__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-4);
    padding: var(--card-padding);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
}

/* `display: grid` above is a class rule and `[hidden]` is a UA rule of equal
   specificity, so the author sheet wins and a filtered-out row stays on
   screen. The filter chips set `hidden`, so this is what makes them work. */
.app-stuff__row[hidden] {
    display: none;
}

/* A row whose middle column carries a paragraph: the icon and the action sit
   with the title rather than floating against the middle of the text. */
.app-stuff__row--top {
    align-items: start;
}

.app-stuff__row-icon {
    display: grid;
    place-items: center;
    width: var(--space-10);
    height: var(--space-10);
    border-radius: var(--radius-md);
    background: var(--phase-learn-very-light);
    color: var(--phase-learn-dark);
}

.app-stuff__row-icon svg,
.app-stuff__row-icon .icon {
    width: var(--icon-md);
    height: var(--icon-md);
}

.app-stuff__row-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    min-width: 0;
}

.app-stuff__row-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-h4);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
    color: var(--color-ink);
}

.app-stuff__row-link {
    color: inherit;
    text-decoration: none;
}

.app-stuff__row-link:hover {
    color: var(--phase-learn-dark);
    text-decoration: underline;
}

.app-stuff__row-sub {
    margin: 0;
    font-size: var(--text-small);
    line-height: var(--leading-normal);
    color: var(--color-ink-secondary);
}

.app-stuff__row-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

/* Italic, faint, and always the last thing read: every list here ends its row
   with a "when", and the shape is what tells you so before the words do.

   Favourites is the one list that hangs it off the row itself rather than
   nesting it in the meta line, and as the grid's third column it was pinned to
   the far edge with 80 to 150px of empty row between it and the title it dates.
   It sits under the title here, which is where Published and Submissions
   already put theirs and where this list's own narrow-screen rule put it. */
.app-stuff__row > .app-stuff__row-when {
    grid-column: 2;
    justify-self: start;
}

.app-stuff__row-when {
    margin: 0;
    font-style: italic;
    font-size: var(--text-caption);
    color: var(--color-ink-faint-accessible);
    white-space: nowrap;
}

.app-stuff__replies {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-caption);
    font-weight: var(--font-semibold);
    color: var(--color-ink-secondary);
}

.app-stuff__replies svg,
.app-stuff__replies .icon {
    width: var(--icon-sm);
    height: var(--icon-sm);
}

.app-stuff__row-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.app-stuff .app-stuff__row-action {
    color: var(--color-ink-faint-accessible);
}

.app-stuff .app-stuff__row-action:hover {
    background: var(--phase-learn-very-light);
    color: var(--phase-learn-dark);
}

/* The favourite's heart is both the state and the control: filled while it is
   a favourite, hollow under the cursor, so pressing it reads as undoing the
   fill rather than as an unrelated delete. */
.app-stuff .app-stuff__heart {
    background: var(--phase-learn-very-light);
    color: var(--phase-learn);
}

.app-stuff .app-stuff__heart:hover {
    background: var(--phase-learn-light);
    color: var(--phase-learn-dark);
}

.app-stuff__actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--space-4);
}

@media (max-width: 720px) {
    .app-stuff__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The timestamp stops being a third column and joins the meta line: at
       this width it was squeezing the title into two or three words. */
    .app-stuff__row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .app-stuff__row > .app-stuff__row-when {
        white-space: normal;
    }
}