/* The core resume's examples on the Resume tab (js/views/update-path.js, js/views/examples-panel.js)
   and the header's red count of new examples (js/views/header.js). Tokens only, no inline style
   anywhere (CSP). The count always says itself in words too (the link's accessible name).
   contrast-pairs: --on-band on --danger; --ink on --panel; --ink-dim on --panel; --ink on --panel-2; --ink-dim on --panel-2; --ink on --bg; --ink-dim on --bg */

/* The red count on the Resume link. */
.resume-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; box-sizing: border-box;
  border-radius: var(--r-pill); background: var(--danger); color: var(--on-band);
  font-size: var(--t-xs); font-weight: 700; line-height: 1; vertical-align: middle;
}
.resume-badge[hidden] { display: none; }

/* "3 new examples from your jobs." with Review them, above the editor. */
.examples-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin: 0 0 12px; color: var(--ink);
}
.examples-banner[hidden] { display: none; }
.examples-banner-line { margin: 0; overflow-wrap: anywhere; }

/* An update path card (in the master review's margin or its list). */
.ex-card { display: grid; gap: 6px; }
.ex-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ex-pos { margin: 0; font-size: var(--t-xs); font-weight: 600; color: var(--ink-dim); }
.ex-text { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.ex-meta { margin: 0; overflow-wrap: anywhere; }
.ex-dup { margin: 0; overflow-wrap: anywhere; }
.ex-done { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }

/* The pick-a-bullet list. */
.ex-pick { margin: 4px 0 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-control); min-width: 0; }
.ex-pick legend { padding: 0 4px; font-weight: 600; }
.ex-pick-row { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; }
.ex-pick-row input { margin-top: 4px; flex: none; }
.ex-pick-row label { overflow-wrap: anywhere; min-width: 0; }

/* "Your examples": below the margin in the aside, or a section under the editor. */
.examples-host { margin-top: 16px; }
.examples-panel { padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--panel); color: var(--ink); }
.examples-title { margin: 0 0 8px; font-size: var(--t-sm); font-weight: 600; }
.example-groups, .example-list { list-style: none; margin: 0; padding: 0; }
.example-groups { display: grid; gap: 12px; }
.example-list { display: grid; gap: 8px; }
.example-role { margin: 0 0 4px; font-size: var(--t-xs); font-weight: 600; color: var(--ink-dim); overflow-wrap: anywhere; }
.example-item { display: grid; gap: 4px; padding: 6px 8px; border-radius: var(--r-control); }
.example-item[hidden] { display: none; }
.example-item.is-draggable { cursor: grab; }
.example-item.is-draggable:hover { background: var(--panel-2); }
.example-item > button { justify-self: start; }
.example-text { margin: 0; overflow-wrap: anywhere; }
.ex-pop-swap { display: grid; gap: 6px; }
.ex-pop-swap > p { margin: 0; }
.examples-status { margin: 8px 0 0; }
.examples-status:empty { display: none; }