/* Suggested work on a new session's screen: one quiet pill under the greeting, a compact panel when it is tapped (work-suggest.js). */
.sg { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 8px 0 0; }
.sg[hidden], .sg-panel[hidden] { display: none; }
.sg-pill { min-height: 0; padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--muted); background: none; border: 1px solid var(--line); }
.sg-pill:hover, .sg-pill:focus-visible, .sg-pill[aria-expanded='true'] { color: var(--gold); border-color: rgba(229, 175, 79, 0.6); }
.sg-panel { width: min(100%, 30em); box-sizing: border-box; padding: 10px 14px 12px; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.sg-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sg-count { font-size: 12px; color: var(--faint); }
.sg-step { min-height: 0; width: 30px; height: 30px; padding: 0; font-size: 20px; line-height: 1; }
.sg-title { margin: 4px 0 2px; font-size: 14.5px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.sg-meta { margin: 0 0 4px; font-size: 12px; color: var(--faint); }
.sg-text { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
.sg-text.all { display: block; -webkit-line-clamp: unset; max-height: 40vh; overflow: auto; }
.sg-more { min-height: 0; padding: 2px 8px; margin-top: 2px; font-size: 12px; }
.sg-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sg-acts button { padding: 5px 14px; }
.sg .msg:empty { display: none; }
/* Suggested work is no longer a card over the start screen: the pill above replaces it. */
.work-scroll.welcoming .work-proposal, .work-scroll.welcoming .work-next-card { display: none; }

/* A session's name row: the projects it is about, its name, and where it stands (work.js drawName). */
.work-name-marks { display: inline-flex; gap: 4px; flex: none; }
.work-name-marks .sm-icon { width: 22px; height: 22px; margin: 0; }
.work-name-info { flex: none; font-size: 12px; color: var(--faint); white-space: nowrap; }
.work-name-row .work-name { flex: 0 1 auto; min-width: 0; }

/* The desk's own button skin is heavy: here the pill and the steps stay light (specificity beats it). */
.detail .sg .sg-pill { min-height: 0; padding: 3px 12px; background: transparent !important; box-shadow: none !important; border: 1px solid var(--line); color: var(--muted); font-weight: 500; letter-spacing: 0.02em; }
.detail .sg .sg-pill:hover, .detail .sg .sg-pill:focus-visible, .detail .sg .sg-pill[aria-expanded='true'] { color: var(--gold); border-color: rgba(229, 175, 79, 0.6); }
.detail .sg .sg-step { background: transparent !important; box-shadow: none !important; border: 1px solid var(--line); color: var(--muted); }
.detail .sg .sg-more { background: transparent !important; box-shadow: none !important; border: 0; color: var(--gold); }

/* A small, safe suggestion is one row with one tap to start (work.js quickCard; lib/proposals.js quickOf). */
.work-quick { display: flex; align-items: center; gap: 8px; padding: 8px 12px; }
.work-quick-what { flex: 1 1 auto; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 1px; }
.work-quick-kind { font-size: 11.5px; color: var(--faint); }
.work-quick-title { font-size: 14px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.work-quick > button { flex: none; min-height: 0; }
.work-quick .msg:empty { display: none; }