/* Priority V2 (phase 2) on the Priority PREVIEW page (app/templates/_priority_v2.html). Design V2: every colour is
   a token from style.css :root, this file names none.
     P-1   blue   = taps next, dynamic       (--ready-*, like "Tap now")
     P-2   green  = full power, running       (--ok-*)
     P-3   grey   = the shared pool           (--hold-*)
     Out   light grey, offline style          (--offline-*)
     rule 2 cut and "placeholder" labels: orange = warning (--noyield-*)
   Breakpoints as style.css: TV >= 1440 (1920, 1536), laptop 1024-1439 (1280), tablet 600-1023 (820),
   phone < 600 (390: the table becomes one card per furnace through .prio-table's phone rules). */

.v2 h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.v2 h3 { margin: 16px 0 6px; font-size: 18px; }
.v2-flag { padding: 2px 10px; border-radius: 8px; font-size: 14px; font-weight: 700; letter-spacing: .04em;
  background: var(--noyield-fill); border: 1px solid var(--gap-warn-line); color: var(--noyield-text); }
.v2-intro { margin: 0 0 12px; font-size: 17px; color: var(--text); }
.v2-ph, .v2-ph-tag, .tag-placeholder { color: var(--noyield-text); }
.v2-ph-tag, .tag-placeholder { display: inline-block; padding: 1px 8px; border-radius: 8px; font-size: 14px;
  font-weight: 600; background: var(--noyield-fill); border: 1px solid var(--noyield-line); white-space: normal; }
.v2-badge { display: inline-block; min-width: 56px; padding: 2px 10px; border-radius: 12px; border: 1px solid;
  font-family: var(--font-display); font-size: 22px; font-weight: 700; text-align: center; }
.v2-badge-p1 { background: var(--ready-fill); border-color: var(--ready-line); color: var(--ready-text);
  border-width: var(--ready-line-width); }
.v2-badge-p2 { background: var(--ok-fill); border-color: var(--ok-line); color: var(--ok-text); }
.v2-badge-p3 { background: var(--hold-fill); border-color: var(--hold-line); color: var(--hold-text); }
.v2-badge-out { background: var(--offline-fill); border-color: var(--offline-line); color: var(--offline-text); }
.v2-out td { color: var(--text-muted); }
.v2-rule { font-weight: 600; white-space: nowrap; }
.v2-cut-tag { display: inline-block; padding: 0 8px; border-radius: 8px; font-size: 14px; font-weight: 700;
  background: var(--noyield-fill); border: 1px solid var(--noyield-line); color: var(--noyield-text); }
.v2-why { font-size: 16px; color: var(--text-muted); max-width: 560px; white-space: normal; }
.v2-short { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius); font-size: 17px;
  background: var(--surface); border: 1px solid var(--line); }
.v2-short-on { background: var(--noyield-fill); border-color: var(--noyield-line); color: var(--noyield-text); }
.v2-events, .v2-settings { list-style: none; margin: 0; padding: 0; }
.v2-events li, .v2-settings li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-height: 36px;
  padding: 6px 0; border-top: 1px solid var(--track); font-size: 16px; }
.v2-events li:first-child, .v2-settings li:first-child { border-top: 0; }
.v2-set-label { min-width: 240px; color: var(--text-muted); }

/* ---------- laptop ---------- */
@media (max-width: 1439px) {
  .v2-why { max-width: 420px; font-size: 15px; }
  .v2-badge { font-size: 20px; min-width: 50px; }
}

/* ---------- tablet ---------- */
@media (max-width: 1023px) {
  .v2-why { max-width: 260px; font-size: 14px; }
  .v2-set-label { min-width: 0; flex: 1 1 100%; }
}

/* ---------- phone ---------- */
@media (max-width: 599px) {
  .v2-intro, .v2-short { font-size: 15px; }
  .v2-why { max-width: none; text-align: right; }
  .v2-events li, .v2-settings li { min-height: 44px; }
}