/* V0.4 features only. Keep your existing style.css unchanged. */
.stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.action-plan {
  background: #fff;
  border: 1px solid var(--line, #e4e9e5);
  border-radius: 14px;
  padding: 24px;
  margin: 18px 0 24px;
}
.action-plan .section-heading { margin-bottom: 18px; }
.action-plan h3 { margin-bottom: 6px; }
.action-list { padding: 0; margin: 0; list-style: none; }
.action-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 15px 0;
  border-top: 1px solid var(--line, #e4e9e5);
}
.action-index {
  flex: 0 0 28px; width: 28px; height: 28px;
  border-radius: 8px; display: grid; place-items: center;
  color: var(--green, #267a58); background: var(--mint, #eaf5ee);
  font-size: 12px; font-weight: 800;
}
.action-copy { flex: 1; min-width: 0; }
.action-copy strong { display: block; font-size: 13px; line-height: 1.5; }
.action-copy p { color: var(--muted, #77817c); font-size: 12px; margin: 5px 0; line-height: 1.5; }
.action-meta { font-size: 11px; color: var(--green, #267a58); }
.stat-card-good strong { color: var(--green, #267a58); }
.issue-tools {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin: 16px 0 14px;
}
.issue-search, .issue-field {
  min-height: 40px; padding: 9px 12px;
  border: 1px solid var(--line, #e4e9e5);
  border-radius: 9px; background: #fff;
  color: var(--ink, #17211d); font: inherit;
}
.issue-search { flex: 1; min-width: 190px; }
.issue-field { min-width: 135px; }
.issue-search:focus-visible, .issue-field:focus-visible {
  outline: 2px solid var(--green, #267a58); outline-offset: 2px;
}
.issue-count { font-size: 11px; color: var(--muted, #77817c); white-space: nowrap; }
.download-forms { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.download-forms button { width: auto; margin: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
@media (max-width: 640px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .action-plan { padding: 16px; }
  .action-item { flex-wrap: wrap; }
  .action-copy { flex-basis: calc(100% - 44px); }
  .action-item > .severity { margin-left: 42px; }
  .issue-search, .issue-field { width: 100%; }
  .download-forms { width: 100%; }
  .download-forms button { width: 100%; }
}

/* V0.5: custom mapping, correction preview and product triage. */
.mapping-details { margin: 15px 0; padding: 12px; border: 1px solid var(--line, #e4e9e5); border-radius: 10px; }
.mapping-details summary { cursor: pointer; font-weight: 700; font-size: 13px; }
.mapping-details p { margin: 8px 0 12px; font-size: 12px; }
.mapping-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.mapping-grid label { font-size: 12px; font-weight: 650; display: flex; flex-direction: column; gap: 5px; }
.mapping-grid input { min-width: 0; max-width: 100%; border: 1px solid var(--line, #e4e9e5); border-radius: 8px; padding: 9px; font: inherit; }
.mapping-summary { font-size: 12px; color: var(--muted, #77817c); margin-top: 8px; }
.repair-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0 18px; }
.repair-summary > div { background: var(--mint, #eaf5ee); border-radius: 10px; padding: 12px; min-width: 0; }
.repair-summary span { display: block; font-size: 11px; color: var(--muted, #77817c); }
.repair-summary strong { display: block; font-size: 19px; margin-top: 6px; color: var(--ink, #17211d); }
.proposed-changes .wrap-cell { max-width: 240px; overflow-wrap: anywhere; font-size: 12px; }
.repair-section > .primary-btn { width: auto; margin-top: 15px; }
.repair-disclaimer { font-size: 11px; margin-top: 12px; }
.queue-list { display: flex; flex-direction: column; }
.queue-product { width: 100%; border: 0; border-top: 1px solid var(--line, #e4e9e5); background: transparent; padding: 13px 0; display: flex; align-items: center; text-align: left; gap: 12px; cursor: pointer; color: inherit; font: inherit; }
.queue-product:hover, .queue-product:focus-visible { background: var(--mint, #eaf5ee); outline-offset: 2px; }
.queue-index { flex: 0 0 25px; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; color: var(--green, #267a58); background: var(--mint, #eaf5ee); font-size: 12px; font-weight: 800; }
.queue-name { flex: 1; min-width: 0; }
.queue-name strong, .queue-name small { display: block; overflow-wrap: anywhere; }
.queue-name strong { font-size: 13px; }
.queue-name small { font-size: 11px; color: var(--muted, #77817c); margin-top: 4px; }
.queue-counts { display: flex; gap: 9px; flex-wrap: wrap; color: var(--muted, #77817c); font-size: 11px; white-space: nowrap; }
.clear-row-filter { border: 1px solid var(--line, #e4e9e5); border-radius: 8px; padding: 8px 10px; background: var(--mint, #eaf5ee); font-size: 12px; cursor: pointer; }
.clear-row-filter[hidden] { display: none; }
@media (max-width: 700px) {
  .repair-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .queue-product { align-items: flex-start; }
  .queue-counts { flex-direction: column; }
}
@media (max-width: 420px) { .mapping-grid { grid-template-columns: 1fr; } }

/* v0.6: channel selection, readiness preflight and origin labels */
.channel-field-label { display: block; margin-top: 14px; }
.channel-select { display: block; width: 100%; padding: 12px; font: inherit; border: 1px solid var(--line, #e4e9e5); border-radius: 10px; color: var(--ink, #17211d); background: white; }
.channel-select:focus-visible { outline: 2px solid var(--green, #267a58); outline-offset: 2px; }
.channel-templates { margin-top: 14px; padding: 12px; border: 1px solid var(--line, #e4e9e5); border-radius: 10px; }
.channel-templates > strong { font-size: 12px; }
.channel-template-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 9px; }
.channel-template-links a, .channel-reference a { color: var(--green, #267a58); font-weight: 700; font-size: 12px; }
.channel-choice { font-size: 13px; margin: 5px 0; }
.channel-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin: 14px 0; }
.channel-kpis > div { min-width: 0; background: var(--mint, #eaf5ee); border-radius: 9px; padding: 12px; }
.channel-kpis span { display: block; font-size: 11px; color: var(--muted, #77817c); }
.channel-kpis strong { display: block; font-size: 19px; margin-top: 6px; color: var(--ink, #17211d); }
.channel-note, .channel-reference { font-size: 12px; margin-top: 8px; }
.scope-label { display: inline-flex; font-size: 11px; font-weight: 650; white-space: nowrap; padding: 4px 7px; border-radius: 6px; background: #f0f2f0; color: #47554e; }
.scope-label.scope-channel { background: var(--mint, #eaf5ee); color: var(--green, #267a58); }
@media(max-width:700px) { .channel-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); } }


/* v0.7: opt-in live URL/image verification */
.live-check-option { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin: 14px 0 6px; padding: 12px; background: var(--mint,#eaf5ee); border: 1px solid var(--line,#e4e9e5); border-radius: 10px; }
.live-check-option input { margin-top: 3px; flex: none; width: 17px; height: 17px; accent-color: var(--green,#267a58); }
.live-check-option span { display: flex; flex-direction: column; gap: 3px; }
.live-check-option strong { font-size: 12px; color: var(--ink,#17211d); }
.live-check-option small, .live-privacy-note { font-size: 11px; line-height: 1.45; color: var(--muted,#77817c); }
.live-privacy-note { margin: 0 0 14px; }
.offline-score-note { margin-top: 6px; font-size: 11px; }
.live-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin: 14px 0 20px; }
.live-kpis > div { background: var(--mint,#eaf5ee); padding: 12px; border-radius: 9px; min-width: 0; }
.live-kpis span { font-size: 11px; display: block; color: var(--muted,#77817c); }
.live-kpis strong { display: block; margin-top: 6px; font-size: 20px; color: var(--ink,#17211d); }
.live-status { text-transform: capitalize; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 4px 8px; white-space: nowrap; background: #e8e8e8; }
.live-ok { color: #116b42; background: #dff5e9; }
.live-failed { color: #ab3029; background: #ffe5e3; }
.live-warning, .live-unverified { color: #8c560c; background: #fff0ce; }
.live-blocked { color: #5f4a87; background: #eee7fa; }
.scope-label.scope-live { background: #e7ecf8; color: #304f8d; }
.live-table td { vertical-align: top; }
.live-table .value-text { max-width: 510px; overflow-wrap: anywhere; }
.live-disclaimer, .live-limit { margin-top: 12px; font-size: 11px; line-height: 1.55; }
@media(max-width:700px) { .live-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); } }