/* HIRENTRA v0.9.0 Build 19 Phase 2.5A — End-to-End Acceptance */

.web19p2-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px;
  margin-bottom: 16px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 18px;
  background: rgba(15, 23, 42, .36);
}

.web19p2-hero p,
.web19p2-gate-copy span,
.web19p2-manual-copy span,
.web19p2-target-grid label > span,
.web19p2-summary-card span {
  margin: 0 0 4px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted, #94a3b8);
}

.web19p2-hero h2 { margin: 0; font-size: 23px; }
.web19p2-hero span { color: var(--muted, #94a3b8); font-size: 11px; }
.web19p2-hero > b {
  flex: 0 0 auto;
  padding: 8px 11px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: .08em;
}
.web19p2-hero.ready { border-color: rgba(34, 197, 94, .34); }
.web19p2-hero.ready > b { color: #86efac; background: rgba(34, 197, 94, .12); border: 1px solid rgba(34, 197, 94, .28); }
.web19p2-hero.not-ready { border-color: rgba(245, 158, 11, .28); }
.web19p2-hero.not-ready > b { color: #fbbf24; background: rgba(245, 158, 11, .11); border: 1px solid rgba(245, 158, 11, .26); }

.web19p2-target-panel { margin-bottom: 16px; }
.web19p2-target-grid {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) auto;
  gap: 12px;
  align-items: end;
}
.web19p2-target-grid label { display: flex; flex-direction: column; gap: 5px; }
.web19p2-target-grid select {
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, .22);
  padding: 0 11px;
  background: rgba(15, 23, 42, .24);
  color: inherit;
}
.web19p2-target-grid button { min-height: 42px; }

.web19p2-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 11px;
  margin-bottom: 16px;
}
.web19p2-summary-card {
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 14px;
  background: rgba(15, 23, 42, .24);
}
.web19p2-summary-card strong { display: block; font-size: 20px; }
.web19p2-summary-card small { display: block; margin-top: 4px; color: var(--muted, #94a3b8); font-size: 9.5px; }

.web19p2-gate-list,
.web19p2-role-list,
.web19p2-manual-list,
.web19p2-package-list { display: grid; gap: 9px; }

.web19p2-gate,
.web19p2-role,
.web19p2-manual,
.web19p2-package {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 13px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 13px;
  background: rgba(15, 23, 42, .20);
}
.web19p2-gate-copy,
.web19p2-manual-copy { min-width: 0; }
.web19p2-gate-copy strong,
.web19p2-manual-copy strong { display: block; font-size: 11.5px; }
.web19p2-gate-copy small,
.web19p2-manual-copy small { display: block; margin-top: 3px; color: var(--muted, #94a3b8); font-size: 10px; line-height: 1.35; }
.web19p2-gate > b,
.web19p2-role > b {
  min-width: 66px;
  text-align: center;
  padding: 6px 8px;
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: .07em;
}
.web19p2-gate.good,
.web19p2-role.good { border-color: rgba(34, 197, 94, .24); }
.web19p2-gate.good > b,
.web19p2-role.good > b { color: #86efac; background: rgba(34, 197, 94, .11); }
.web19p2-gate.warn,
.web19p2-role.warn { border-color: rgba(245, 158, 11, .28); }
.web19p2-gate.warn > b,
.web19p2-role.warn > b { color: #fbbf24; background: rgba(245, 158, 11, .11); }
.web19p2-gate.bad,
.web19p2-role.bad { border-color: rgba(239, 68, 68, .28); }
.web19p2-gate.bad > b,
.web19p2-role.bad > b { color: #fca5a5; background: rgba(239, 68, 68, .11); }

.web19p2-role { grid-template-columns: minmax(180px, .55fr) minmax(0, 1fr) auto; }
.web19p2-role > div { display: flex; align-items: center; gap: 9px; }
.web19p2-role > div span {
  display: grid; place-items: center; width: 25px; height: 25px;
  border-radius: 999px; background: rgba(148, 163, 184, .12); color: var(--muted, #94a3b8); font-size: 9px; font-weight: 900;
}
.web19p2-role > div strong { font-size: 11px; }
.web19p2-role p { margin: 0; color: var(--muted, #94a3b8); font-size: 10px; line-height: 1.35; }

.web19p2-manual { grid-template-columns: minmax(0, 1fr) auto; }
.web19p2-package { grid-template-columns: minmax(0, 1fr) auto; }
.web19p2-package > div span { display:block; margin-bottom:4px; color:var(--muted,#94a3b8); font-size:9px; font-weight:900; letter-spacing:.12em; }
.web19p2-package > div strong { display:block; font-size:13px; }
.web19p2-package > div small { display:block; margin-top:3px; color:var(--muted,#94a3b8); font-size:10px; }
.web19p2-package > b { min-width:66px; text-align:center; padding:6px 8px; border-radius:999px; font-size:9px; letter-spacing:.07em; }
.web19p2-package.good { border-color:rgba(34,197,94,.24); }
.web19p2-package.good > b { color:#86efac; background:rgba(34,197,94,.11); }
.web19p2-package.warn { border-color:rgba(245,158,11,.28); }
.web19p2-package.warn > b { color:#fbbf24; background:rgba(245,158,11,.11); }
.web19p2-package.bad { border-color:rgba(239,68,68,.28); }
.web19p2-package.bad > b { color:#fca5a5; background:rgba(239,68,68,.11); }
.web19p2-target-actions { display:flex; gap:8px; align-items:center; }
.web19p2-target-actions button { min-height:42px; white-space:nowrap; }

.web19p2-manual.good { border-color: rgba(34, 197, 94, .22); }
.web19p2-manual.pending { border-color: rgba(245, 158, 11, .18); }
.web19p2-manual-copy em,
.web19p2-manual-copy i { display: block; margin-top: 5px; font-size: 9px; line-height: 1.35; }
.web19p2-manual-copy em { color: inherit; font-style: normal; }
.web19p2-manual-copy i { color: var(--muted, #94a3b8); font-style: normal; }
.web19p2-signoff { margin-top: 0 !important; width: auto !important; min-height: 36px !important; }

.web19p2-empty { text-align: center; padding: 28px; }
.web19p2-empty p { max-width: 680px; margin: 7px auto 0; color: var(--muted, #94a3b8); font-size: 11px; line-height: 1.45; }

html[data-theme="light"] .web19p2-hero,
html[data-theme="light"] .web19p2-summary-card,
html[data-theme="light"] .web19p2-gate,
html[data-theme="light"] .web19p2-role,
html[data-theme="light"] .web19p2-manual,
html[data-theme="light"] .web19p2-package {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .035);
}
html[data-theme="light"] .web19p2-target-grid select {
  background: #f8fafc;
  color: #0f172a;
  border-color: rgba(15, 23, 42, .15);
}
html[data-theme="light"] .web19p2-hero span,
html[data-theme="light"] .web19p2-gate-copy span,
html[data-theme="light"] .web19p2-manual-copy span,
html[data-theme="light"] .web19p2-target-grid label > span,
html[data-theme="light"] .web19p2-summary-card span,
html[data-theme="light"] .web19p2-summary-card small,
html[data-theme="light"] .web19p2-gate-copy small,
html[data-theme="light"] .web19p2-manual-copy small,
html[data-theme="light"] .web19p2-role p,
html[data-theme="light"] .web19p2-manual-copy i,
html[data-theme="light"] .web19p2-empty p { color: #64748b; }
html[data-theme="light"] .web19p2-hero.ready > b,
html[data-theme="light"] .web19p2-gate.good > b,
html[data-theme="light"] .web19p2-role.good > b { color: #166534; }
html[data-theme="light"] .web19p2-hero.not-ready > b,
html[data-theme="light"] .web19p2-gate.warn > b,
html[data-theme="light"] .web19p2-role.warn > b { color: #92400e; }
html[data-theme="light"] .web19p2-gate.bad > b,
html[data-theme="light"] .web19p2-role.bad > b { color: #991b1b; }

@media (max-width: 900px) {
  .web19p2-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .web19p2-target-grid { grid-template-columns: 1fr; }
  .web19p2-role { grid-template-columns: 1fr auto; }
  .web19p2-role p { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .web19p2-hero { align-items: flex-start; flex-direction: column; }
  .web19p2-summary-grid { grid-template-columns: 1fr; }
  .web19p2-gate,
  .web19p2-role,
  .web19p2-manual,
  .web19p2-package { grid-template-columns: 1fr; }
  .web19p2-gate > b,
  .web19p2-role > b { justify-self: start; }
  .web19p2-signoff { width: 100% !important; }
}

html[data-theme="light"] .web19p2-package > div span,
html[data-theme="light"] .web19p2-package > div small { color:#64748b; }
html[data-theme="light"] .web19p2-package.good > b { color:#166534; }
html[data-theme="light"] .web19p2-package.warn > b { color:#92400e; }
html[data-theme="light"] .web19p2-package.bad > b { color:#991b1b; }
@media (max-width:1180px) { .web19p2-summary-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:900px) { .web19p2-target-actions { width:100%; } .web19p2-target-actions button { flex:1; } }