/* What this job asks for most (js/views/job-themes.js): the numbered list of asks under the
   review's head, the theme card's interview, and the "New" tag on an Additional notes entry written
   while tailoring. Tokens only. Colour is only on the status pill and the list numbers, and the pill
   always says its state in words. No inline style anywhere (CSP). The text pairs used here are
   already checked by app-a11y.test.js:
   contrast-pairs: --ok on --ok-bg; --risk-ink on --risk-bg; --unknown on --unknown-bg; --accent on --accent-soft */

/* The list: a heading, one line saying what it is, then a numbered card per ask. */
.themes { margin: 12px 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--panel); }
.themes-title { margin: 0 0 2px; font-size: var(--t-sm); font-weight: 600; }
.themes-lead { margin: 0 0 4px; }
.themes-list { list-style: none; counter-reset: theme-ask; margin: 0; padding: 0; display: grid; }
.theme-card {
  counter-increment: theme-ask; position: relative; min-width: 0;
  padding: 12px 0 12px 36px; border-top: 1px solid var(--line);
}
.theme-card::before {
  content: counter(theme-ask); position: absolute; left: 0; top: 12px;
  width: 24px; height: 24px; border-radius: 50%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent); font-size: var(--t-xs); font-weight: 600;
}
.theme-head { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 24px; }
.theme-name { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.theme-mark {
  display: inline-block; padding: 1px 8px; border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: 600; white-space: nowrap;
}
.theme-mark.is-proven { background: var(--ok-bg); color: var(--ok); }
.theme-mark.is-thin { background: var(--risk-bg); color: var(--risk-ink); }
.theme-mark.is-unproven { background: var(--unknown-bg); color: var(--unknown); }
.theme-why { margin: 4px 0 0; overflow-wrap: anywhere; }
.theme-says { margin: 4px 0 0; overflow-wrap: anywhere; }
.theme-proof { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.theme-proof .theme-quote { margin: 0; flex: 1 1 16rem; min-width: 0; }
.theme-label { font-weight: 600; }
.theme-quote { overflow-wrap: anywhere; }
/* An ask still open in the review: a quiet link to its card (the question lives on the card). */
.view .theme-proof button.theme-answer {
  min-height: 32px; margin: 0 0 0 -6px; padding: 4px 6px; font-size: var(--t-xs); font-weight: 500;
  text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;
}
@media (pointer: coarse) { .view .theme-proof button.theme-answer { min-height: 44px; } }

/* While the review is open the list is one closed line ("3 asks, 1 shown in your resume so far")
   that opens to the list, so the cards and the pages come first. The chevron is drawn like a
   fold's (app-flow.css details.fold). */
.themes-fold { padding: 2px 12px; border: 0; background: none; } /* spacing only, no box in the section's box */
.themes-fold > summary {
  cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px;
  padding: 8px 0; border-radius: var(--r-control);
}
.themes-fold > summary::-webkit-details-marker { display: none; }
.themes-fold > summary::before {
  content: ""; flex: none; width: 7px; height: 7px; margin-right: 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(-45deg); transition: transform var(--dur-fast) var(--ease-out);
}
.themes-fold[open] > summary::before { transform: translateY(-4px) rotate(45deg); }
.themes-fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.themes-fold > summary .themes-title { font-size: var(--t-sm); font-weight: 600; }
.themes-count { font-size: var(--t-sm); color: var(--ink-dim); }
.themes-fold[open] { padding-bottom: 8px; }
.themes-failed { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.themes-failed p { margin: 0; }

/* Under the split's width the block sits above the pages. */
.rv-stack { display: grid; gap: 8px; }

/* The interview on the theme card. */
.theme-interview { display: grid; gap: 8px; margin-top: 8px; }
.theme-interview textarea { width: 100%; box-sizing: border-box; }
.theme-drafts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.theme-draft input { width: 100%; box-sizing: border-box; }
.theme-check { margin: 0; }

/* Additional notes: an example written while tailoring, not yet looked at for the core resume. */
.note-new {
  display: inline-block; margin-bottom: 4px; padding: 1px 8px; border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent); font-size: var(--t-xs); font-weight: 600;
}
.note-new[hidden] { display: none; }