/* HOME·STUFF (105) — "Your stuff" card (Tools / Collections segmented, D-464/D-482).
 * SINGLE SOURCE for the .ys-* prefix (card-dev mirror, check 16) — imported by BOTH
 * web/index.html AND the WB card page (workbench/home/your-stuff.html). Extracted from
 * app.css. Prefix: ys. */

/* ---------------------------------------------------------------------------
 * Your stuff — consolidated tools + collections (supersedes Your tools panel +
 * Your collections rows). Reuses the exact ytools row styling; adds a rail so the
 * collections column PEEKS at the card's right edge → signals scroll. (D-464 WIP)
 * ------------------------------------------------------------------------- */
.ys-slot:empty { display: none; }
.ys-head { display: flex; align-items: baseline; justify-content: space-between; padding: var(--space-16) var(--space-16) var(--space-8); }
.ys-head h2 { font-family: var(--font-display); font-weight: var(--weight-500); font-size: var(--size-20); letter-spacing: var(--tracking-neg-01); color: var(--text-primary); }
.ys-seeall { display: inline-flex; align-items: center; gap: var(--space-4); font-family: var(--font-label); font-size: var(--size-12); font-weight: var(--weight-600); color: var(--accent); background: 0; border: 0; cursor: pointer; }
.ys-seeall svg { width: var(--size-13); height: var(--size-13); display: block; }
/* ⚠️ 105 WAS THE ONLY MODULE THAT ESCAPED THE SHELL'S RHYTHM. (D-526)
 *
 * Andrew spotted it by eye: the gap under "Your stuff" was tighter than the gap under every
 * other card. One grid unit tighter. In the shipped app, not just the workbench.
 *
 * THE CAUSE WAS STRUCTURAL, NOT COSMETIC. Every module on home is returned wrapped in
 * `.nh-zmod`, and the SHELL gives `.nh-zmod` its stack (home-shell.css, D-510). 105 alone
 * returned a bare `.ys-slot` straight into `.nh-zones` — so it never got the wrapper, never got
 * the stack, and instead carried its own hand-rolled `margin` on `.ys-panel`. It had invented a
 * private rhythm and nobody had noticed, because an off-rhythm module never looks BROKEN. It
 * just looks slightly wrong, everywhere, forever, and no one can say why.
 *
 * ⚠️ AND THE FIRST FIX I WROTE WAS THE WRONG ONE: I gave `.ys-slot` its own
 * `margin-bottom: var(--rhythm-stack)`. That reads as correct and is the same disease in a
 * milder form — the card re-implementing the shell's job, so that TWO files now decide the
 * rhythm and can disagree later. The card is now wrapped in `.nh-zmod` like every other, and
 * owns NO stack at all. The shell owns the rhythm. A card does not bring its own. */
.ys-panel { margin: 0 var(--rhythm-inset); background: var(--surface-card); border-radius: var(--radius-card-lg); box-shadow: var(--shadow-card); overflow: hidden; }

/* segmented control — Tools / Collections, one list at a time (D-435 one card) */
.ys-seg { display: flex; gap: var(--space-4); margin: 0 var(--space-16) var(--space-8); background: var(--cream-100); border-radius: var(--radius-pill); padding: var(--space-4); }
.ys-seg-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); font-family: var(--font-label); font-size: var(--size-13); font-weight: var(--weight-600); color: var(--text-secondary); background: 0; border: 0; border-radius: var(--radius-pill); padding: var(--space-8); cursor: pointer; }
.ys-seg-btn[aria-selected="true"] { background: var(--surface-card); color: var(--text-primary); box-shadow: var(--shadow-card); }
.ys-cnt { font-family: var(--font-label); font-weight: var(--weight-700); color: var(--text-tertiary); }
.ys-seg-btn[aria-selected="true"] .ys-cnt { color: var(--accent); }
.ys-seg-panel { display: none; padding-bottom: var(--space-8); }
.ys-seg-panel.on { display: block; }

.ys-row { position: relative; display: flex; align-items: center; gap: var(--space-8); width: 100%; padding: var(--space-12) var(--space-16); border: 0; background: 0; text-align: left; cursor: pointer; }
/* inset divider — starts after the icon (list, not grid; D-435 tone-not-outline) */
.ys-row + .ys-row::before { content: ''; position: absolute; top: 0; left: calc(var(--space-16) + var(--space-40) + var(--space-8)); right: 0; height: 1px; background: var(--border-hairline); /* token-exception */ }
.ys-chip { width: var(--dim-40); height: var(--dim-40); border-radius: var(--radius-round); display: flex; align-items: center; justify-content: center; flex: none; }
.ys-chip svg { width: var(--size-18); height: var(--size-18); display: block; }
/* 🔴 ALL FOUR FAMILIES, OR A SAVED ITEM RENDERS A TRANSPARENT CHIP. (D-548)
 * `watch` was simply missing — read/do/track were styled and the fourth family was not, so a saved
 * ANIMATION would have come out with no fill at all. Nothing flagged it, because the class is
 * concatenated from data at runtime (`'ys-chip ' + family`) and the orphan-class linter reads the
 * SOURCE. It cannot see a class that does not exist until the app runs. */
.ys-chip.track { background: var(--kind-track-fill); color: var(--kind-track-icon); }
.ys-chip.read { background: var(--kind-read-fill); color: var(--kind-read-icon); }
.ys-chip.watch { background: var(--kind-watch-fill); color: var(--kind-watch-icon); }
.ys-chip.user { background: var(--cream-100); color: var(--text-secondary); border: 1px dashed var(--cream-600); /* token-exception */ }
.ys-chip.ys-ghost { background: transparent; color: var(--text-tertiary); border: 1px dashed var(--cream-600); /* token-exception */ }
.ys-empty .ys-name { color: var(--text-secondary); }
.ys-mid { flex: 1; min-width: 0; }
.ys-name { display: block; font-family: var(--font-display); font-weight: var(--weight-500); font-size: var(--size-16); color: var(--text-primary); line-height: var(--leading-120); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ys-val { display: block; font-family: var(--font-label); font-size: var(--size-12); font-weight: var(--weight-600); color: var(--text-tertiary); margin-top: var(--space-4); }
.ys-log { flex: none; display: inline-flex; align-items: center; gap: var(--space-4); font-family: var(--font-label); font-size: var(--size-13); font-weight: var(--weight-700); color: var(--accent); background: var(--teal-100); border: 0; border-radius: var(--radius-pill); padding: var(--space-8) var(--space-16); cursor: pointer; }
.ys-log svg { width: var(--size-14); height: var(--size-14); display: block; }
.ys-chev { flex: none; width: var(--size-16); height: var(--size-16); color: var(--text-tertiary); }
.ys-chev svg { width: 100%; height: 100%; display: block; }
/* loading skeleton */
@keyframes ys-sk { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.75; } }
.ys-sk { animation: ys-sk 1.4s ease-in-out infinite; }
.ys-sk-chip { width: var(--dim-40); height: var(--dim-40); border-radius: var(--radius-round); background: var(--cream-600); flex: none; }
.ys-sk-bar { height: var(--size-12); border-radius: var(--radius-pill); background: var(--cream-600); }
.ys-sk-bar.name { width: 46%; }
.ys-sk-bar.val { width: 28%; margin-top: var(--space-8); }
.ys-sk-pill { width: var(--dim-44); height: var(--size-28); border-radius: var(--radius-pill); background: var(--cream-600); flex: none; }

/* error */
.ys-err { text-align: center; padding: var(--space-20) var(--space-16) var(--space-24); }
.ys-err p { margin: 0 0 var(--space-12); color: var(--text-secondary); font-size: var(--size-14); }
.ys-btn { font-family: var(--font-label); font-size: var(--size-13); font-weight: var(--weight-700); color: var(--accent); background: var(--teal-100); border: 0; border-radius: var(--radius-pill); padding: var(--space-8) var(--space-16); cursor: pointer; }

.ys-row:active, .ys-seg-btn:active { background: var(--surface-card-hover); }
.ys-log:active, .ys-seeall:active, .ys-btn:active { opacity: 0.72; }
.ys-row:focus-visible, .ys-log:focus-visible, .ys-seeall:focus-visible, .ys-seg-btn:focus-visible, .ys-btn:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--radius-6); }

/* non-logger tool chip = Do family (clay) — a saved tool that opens, not a logger (D-482) */
.ys-chip.do { background: var(--kind-do-fill); color: var(--kind-do-icon); }