/* === Tailwind-like tokens (no dependency) === */
:root {
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1;
  --slate-600:#475569; --slate-700:#334155; --slate-800:#1f2937; --white:#ffffff;

  --emerald-100:#d1fae5; --emerald-700:#047857;
  --amber-100:#fef3c7;   --amber-700:#b45309;
  --rose-100:#ffe4e6;    --rose-700:#be123c;

  --radius-xl: 14px; --radius-2xl: 18px; --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --border:#e2e8f0; --muted:#475569; --text:#0f172a; --accent:#0ea5e9; --accent-d:#0284c7;
}

/* Reset-ish scoped */
.ppc-porq { box-sizing:border-box; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; color:var(--text); }
.ppc-porq * { box-sizing:inherit; }
.ppc-porq a { color: var(--accent); text-decoration:none; }
.ppc-porq .muted { color: var(--muted); }
.ppc-porq .small { font-size: 12px; }

/* Layout */
.ppc-porq { max-width: 1040px; margin: 0 auto; padding: 16px; }
.ppc-porq-header { text-align:center; margin-bottom: 24px; }
.ppc-porq-pill { display:inline-flex; align-items:center; gap:8px; background:var(--slate-100); color:var(--slate-700); padding:6px 10px; border-radius:999px; font-size:13px; }
.ppc-porq-title { margin:10px 0 6px; font-size: 28px; font-weight: 700; letter-spacing:.2px; }
.ppc-porq-sub { margin:0 auto; max-width:720px; color:var(--slate-600); }

/* Grid */
.ppc-grid { display:grid; gap: 18px; }
@media (min-width: 900px){ .ppc-grid { grid-template-columns: 1.5fr .9fr; } }

/* Card */
.ppc-card { background: var(--white); border:1px solid var(--border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); }
.ppc-card-body { padding: 20px; }
.ppc-gap > * + * { margin-top: 12px; }

/* Section container */
.ppc-section { border:1px solid var(--border); border-radius: var(--radius-2xl); background:#fff; padding: 20px; }

/* Controls */
.ppc-label { font-size: 14px; font-weight: 600; color: var(--slate-700); display:block; margin-bottom:6px; }
.ppc-select, .ppc-input { width:100%; border:1px solid var(--slate-300); border-radius: 10px; padding: 10px 12px; font-size:14px; background:#fff; }
.ppc-row-2 { display:grid; grid-template-columns: 1fr; gap:10px; }
@media (min-width: 640px){ .ppc-row-2 { grid-template-columns: 1fr 1fr; } }

/* Toggle row (checkbox) */
.ppc-toggle { display:flex; align-items:center; gap:10px; border:1px solid var(--border); padding: 10px 12px; border-radius: 12px; }
.ppc-toggle input[type="checkbox"] { width:16px; height:16px; }

/* Progress */
.ppc-progress { position:relative; width:100%; height:10px; background:var(--slate-200); border-radius:999px; overflow:hidden; }
.ppc-progress > span { position:absolute; left:0; top:0; bottom:0; width:0%; background: linear-gradient(90deg, var(--emerald-700), #f59e0b, #ef4444); }

/* Badges */
.ppc-badge { display:inline-flex; align-items:center; gap:8px; padding:4px 8px; border-radius:999px; font-size:12px; font-weight:600; }
.badge-low { background: var(--emerald-100); color: var(--emerald-700); }
.badge-mod { background: var(--amber-100); color: var(--amber-700); }
.badge-high{ background: var(--rose-100); color: var(--rose-700); }

/* Buttons */
.ppc-btn { border:1px solid var(--slate-300); background:#fff; padding:10px 12px; border-radius:12px; font-size:14px; cursor:pointer; transition: box-shadow .15s, transform .02s; width:100%; }
.ppc-btn:hover { box-shadow: 0 2px 8px rgba(2,8,23,.08); }
.ppc-btn:active { transform: translateY(1px); }
.ppc-btn.primary { background: var(--accent); border-color: var(--accent-d); color:#fff; }

/* Footer note */
.ppc-foot { text-align:center; font-size:12px; color: var(--slate-500, #64748b); margin-top: 8px; }


/* === Compact Yes/No button group === */
.ppc-yn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--border);
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
}

.ppc-yn-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--slate-700);
}

.ppc-yn-group { 
  display: inline-flex; 
  gap: 6px; 
}

/* Make the buttons smaller and not full-width inside the group */
.ppc-yn-group .ppc-btn {
  width: auto;
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 10px;
}

/* Selected state */
.ppc-yn-group .ppc-btn.is-active {
  background: var(--accent);
  border-color: var(--accent-d);
  color: #fff;
}

/* Slightly reduce vertical rhythm inside cards/sections */
.ppc-card-body.ppc-gap > * + * { margin-top: 10px; }
.ppc-section { padding: 16px; }

/* === Compact Yes/No button group === */
.ppc-yn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--border);
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
}

.ppc-yn-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--slate-700);
}

.ppc-yn-group { 
  display: inline-flex; 
  gap: 6px; 
}

.ppc-yn-group .ppc-btn {
  width: auto;
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 10px;
}

/* Active state */
.ppc-yn-group .ppc-btn.is-active {
  background: var(--accent);
  border-color: var(--accent-d);
  color: #fff;
}
/* Non-selected Yes/No buttons: readable label color */
.ppc-yn-group .ppc-btn {
  background: #fff;
  color: var(--accent-d);          /* e.g., #0284c7 */
  border-color: var(--accent-d);
}

/* Selected stays white-on-blue */
.ppc-yn-group .ppc-btn.is-active {
  background: var(--accent);
  border-color: var(--accent-d);
  color: #fff;
}

/* Optional: nice hover/focus for the non-selected */
.ppc-yn-group .ppc-btn:not(.is-active):hover,
.ppc-yn-group .ppc-btn:not(.is-active):focus {
  background: #f0f9ff;
  color: var(--accent-d);
  box-shadow: 0 0 0 3px rgba(2,132,199,.15);
}