/* Plan 12: the chat's project card (public/work-cards.js). Rule zero: a
   title and one short line, nothing small. Grays only, but amber on the
   "Kept both" icon (it needs the person). One solid action per card. */
.work-card-msg .msg-body { width: 100%; max-width: 560px; }
.work-card { width: 100%; border: 1px solid var(--line-2); border-radius: 18px; background: var(--panel-2); padding: var(--card-pad); }
.work-card-head { display: flex; align-items: center; gap: var(--space-3); }
.work-card-icon { display: inline-flex; flex: 0 0 auto; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 10px; background: var(--quiet); color: var(--ink-2); }
.work-card-icon svg { width: 20px; height: 20px; }
.work-card.attention .work-card-icon { color: var(--amber); }
.work-card-text { min-width: 0; flex: 1; }
.work-card-text strong { display: block; font-size: var(--text-lg); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-card-text span { display: block; margin-top: 2px; font-size: var(--text-md); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-card-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.work-card-actions .btn { min-height: var(--control-h-lg); }

/* The ⋯ menu: Open in editor, Save to my Mac. */
.work-card-more { position: relative; flex: 0 0 auto; }
.work-card-more > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; color: var(--ink-2); cursor: pointer; }
.work-card-more > summary::-webkit-details-marker { display: none; }
.work-card-more > summary:hover { background: var(--quiet-hover); }
.work-card-more > summary svg { width: 20px; height: 20px; }
.work-card-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 200px; padding: var(--space-1); border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); box-shadow: 0 12px 32px rgba(0, 0, 0, .18); }
.work-card-menu button { display: flex; width: 100%; align-items: center; min-height: 40px; padding: 0 var(--space-3); border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; font-size: var(--text-md); text-align: left; cursor: pointer; }
.work-card-menu button:hover, .work-card-menu button:focus-visible { background: var(--quiet-hover); }

/* Waiting to save, saving, couldn't save: one quiet line. */
.work-card-msg.is-quiet .msg-body { max-width: none; }
.work-card-quiet { margin: 0; font-size: var(--text-md); color: var(--ink-3); }
.work-card-quiet-title { color: var(--ink-2); font-weight: 500; }

/* Phones: nothing small, every target 44 pt, one action per row (the solid one first). */
@media (max-width: 560px) {
  .work-card { border-radius: 16px; }
  .work-card-text strong { font-size: 17px; }
  .work-card-text span, .work-card-quiet { font-size: 16px; }
  .work-card-text span { white-space: normal; }
  .work-card-icon, .work-card-more > summary { width: 44px; height: 44px; }
  .work-card-actions { display: grid; grid-template-columns: 1fr; }
  .work-card-msg .work-card-actions .btn, .work-card-msg .work-card-actions .btn.primary { width: 100%; min-height: 44px; justify-content: center; font-size: 16px; }
  .work-card-msg .work-card-actions .btn.primary { order: -1; }
  .work-card-menu button { min-height: 44px; font-size: 16px; }
}