/* Panel 4 matching states — aligned with matching-handoff design tokens */

.request-matching-review-list .hil-empty-state:has(.hil-p4) {
  align-items: stretch;
  justify-content: flex-start;
  padding: 0 0 24px;
  text-align: left;
}

.hil-p4 {
  --p4-surface-0: #ffffff;
  --p4-surface-1: #f7f7f3;
  --p4-surface-2: #efefea;
  --p4-border: #d8dce2;
  --p4-border-faint: #e7e9ee;
  --p4-border-strong: #c4cad4;
  --p4-fg-1: #111827;
  --p4-fg-2: #3a4250;
  --p4-fg-3: #6b7280;
  --p4-fg-muted: #6b7280;
  --p4-fg-label: #7b8494;
  --p4-primary: #365f8b;
  --p4-primary-hover: #31557c;
  --p4-primary-active: #294a6e;
  --p4-success: #4e7763;
  --p4-warning: #8a6f38;
  --p4-danger: #9c5a5a;
  --p4-info-solid: #375f8b;
  --p4-neutral-solid: #8a96a6;
  --p4-success-solid: #709b87;
  --p4-warning-solid: #b89a68;
  --p4-danger-solid: #b88383;
  --p4-radius-md: 8px;
  --p4-radius-lg: 10px;
  --p4-radius-full: 999px;

  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px 0;
  color: var(--p4-fg-1);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.hil-p4 .u-meta {
  font-size: 12px;
  color: var(--p4-fg-muted);
  line-height: 1.4;
}

.hil-p4 .u-group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--p4-fg-3);
}

.hil-p4 .u-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--p4-fg-1);
}

.hil-p4 .u-tnum {
  font-variant-numeric: tabular-nums;
}

.hil-p4 .p4status {
  margin-top: 16px;
}

.hil-p4 > .p4status:first-child {
  margin-top: 0;
}

/* Line identity block — title + "<service_id> · <schedule>" ref, prepended
   above the status block on every Panel 4 phase (handoff: components.css,
   search panel4__identity). */
.hil-p4 .panel4__identity-name {
  margin-bottom: 2px;
}

.hil-p4 .panel4__identity-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--p4-fg-1);
  line-height: 1.35;
}

.hil-p4 .panel4__identity-ref {
  margin-top: 4px;
}

.hil-p4 .p4status__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.hil-p4 .p4status__list {
  border-top: 1px solid var(--p4-border-faint);
}

.hil-p4 .p4status__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--p4-border-faint);
}

.hil-p4 .p4status__row:last-child {
  border-bottom: none;
}

.hil-p4 .p4status__label {
  font-size: 13px;
  color: var(--p4-fg-3);
}

.hil-p4 .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: #ffffff;
  padding: 3px 12px;
  border-radius: var(--p4-radius-full);
}

.hil-p4 .pill--info { background: var(--p4-info-solid); }
.hil-p4 .pill--success { background: var(--p4-success-solid); }
.hil-p4 .pill--warning { background: var(--p4-warning-solid); }
.hil-p4 .pill--danger { background: var(--p4-danger-solid); }
.hil-p4 .pill--review { background: #768396; }
.hil-p4 .pill--neutral { background: var(--p4-neutral-solid); }

.hil-p4 .val--gap { color: var(--p4-danger); }
.hil-p4 .val--ok { color: var(--p4-success); }

.hil-p4 .callout {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 12px;
  border-radius: var(--p4-radius-md);
  font-size: 13px;
  line-height: 1.45;
}

.hil-p4 .callout__icon {
  margin-top: 1px;
  flex: none;
  color: #eab308;
}

.hil-p4 .callout__icon svg {
  display: block;
}

.hil-p4 .callout__body {
  flex: 1;
  color: var(--p4-fg-2);
}

.hil-p4 .callout--info {
  background: transparent;
  color: var(--p4-fg-2);
  border: 1px solid var(--p4-border-faint);
}

.hil-p4 .mt-14 {
  margin-top: 14px;
}

.hil-p4 .spinner-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 34px 14px;
  text-align: center;
}

.hil-p4 .spinner {
  display: inline-flex;
  color: var(--p4-primary);
  animation: hil-p4-spin 0.9s linear infinite;
}

.hil-p4 .spinner svg {
  display: block;
}

@keyframes hil-p4-spin {
  to { transform: rotate(360deg); }
}

.hil-p4 .cand__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--p4-fg-1);
}

.hil-p4 .hil-p4__foot {
  margin-top: 14px;
  margin-left: -16px;
  margin-right: -16px;
  width: calc(100% + 32px);
  box-sizing: border-box;
  padding: 16px 16px 0;
  border-top: 1px solid var(--p4-border);
  background: var(--p4-surface-1);
}

.hil-p4 .panel4__foot-note {
  text-align: center;
  font-size: 11px;
  color: var(--p4-fg-muted);
  margin-top: 9px;
}

.hil-p4 .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: inherit;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--p4-radius-md);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.hil-p4 .btn--md {
  font-size: 13px;
  padding: 9px 16px;
}

.hil-p4 .btn--full {
  width: 100%;
}

.hil-p4 .btn--primary {
  background: var(--p4-primary);
  color: #ffffff;
}

.hil-p4 .btn--primary:hover {
  background: var(--p4-primary-hover);
}

.hil-p4 .btn--primary:active {
  background: var(--p4-primary-active);
}

.hil-p4 .btn--secondary {
  background: var(--p4-surface-0);
  color: var(--p4-fg-1);
  border-color: var(--p4-border);
}

.hil-p4 .btn--sm {
  font-size: 12px;
  padding: 7px 12px;
}

.hil-p4 .btn--disabled,
.hil-p4 .btn--primary.btn--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.hil-p4 .f-spacer {
  flex: 1;
}

.hil-p4 .u-field-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--p4-fg-label);
}

.hil-p4 .p4group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 8px;
}

.hil-p4 .p4card {
  border: 1px solid var(--p4-border);
  border-radius: var(--p4-radius-lg);
  background: var(--p4-surface-0);
  overflow: hidden;
}

.hil-p4 .cand {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--p4-border-faint);
  transition: background 0.15s ease;
  cursor: pointer;
}

.hil-p4 .cand:last-child { border-bottom: none; }
.hil-p4 .cand:hover { background: var(--p4-surface-1); }
.hil-p4 .cand--sel { background: #ecf1f5; }
.hil-p4 .cand--nosel { cursor: default; }
.hil-p4 .cand--sel:hover { background: #ecf1f5; }
.hil-p4 .cand__main { flex: 1; min-width: 0; }
.hil-p4 .cand__sub { margin-top: 2px; }
.hil-p4 .cand__score {
  flex: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--p4-fg-1);
  font-variant-numeric: tabular-nums;
}
.hil-p4 .cand__block {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--p4-danger);
}
.hil-p4 .cand__block-icon { flex: none; margin-top: 1px; }

.hil-p4 .tick {
  width: 17px;
  height: 17px;
  border-radius: var(--p4-radius-full);
  border: 1.5px solid var(--p4-border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-top: 1px;
  color: #fff;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.hil-p4 .tick svg { opacity: 0; }
.hil-p4 .tick--on { background: var(--p4-primary); border-color: var(--p4-primary); }
.hil-p4 .tick--on svg { opacity: 1; }
.hil-p4 .tick--block { border-style: dashed; opacity: 0.5; }
.hil-p4 .tick--spacer { border: none; background: none; }

.hil-p4 .tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--p4-radius-full);
}
.hil-p4 .tag--review { color: var(--p4-warning); background: #faf3e6; }
.hil-p4 .tag--ok { color: var(--p4-success); background: #e9f0ec; }

.hil-p4 .needs { padding: 10px 12px; border-bottom: 1px solid var(--p4-border-faint); }
.hil-p4 .needs:last-child { border-bottom: none; }
.hil-p4 .needs__row { display: flex; align-items: center; gap: 11px; }
.hil-p4 .needs__name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.hil-p4 .needs__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-left: 28px;
}
.hil-p4 .needs__override { font-size: 11px; font-weight: 600; }
.hil-p4 .needs__override--warn { color: var(--p4-warning); }
.hil-p4 .needs__override--ok { color: var(--p4-success); }
.hil-p4 .needs__override--mute { color: var(--p4-fg-muted); }
.hil-p4 .needs__spacer { flex: 1; }
.hil-p4 .needs__reveal {
  margin: 9px 0 0 28px;
  border: 1px solid var(--p4-border);
  background: var(--p4-surface-1);
  border-radius: var(--p4-radius-md);
  padding: 10px;
}
.hil-p4 .needs__reveal-label { margin-bottom: 6px; }
.hil-p4 .needs__reveal-reason,
.hil-p4 .needs__reveal-condition,
.hil-p4 .needs__reveal-note {
  font-size: 12px;
  color: var(--p4-fg-2);
  line-height: 1.45;
}
.hil-p4 .needs__reveal-condition,
.hil-p4 .needs__reveal-note { margin-top: 8px; }
.hil-p4 .needs__reveal-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.hil-p4 .linkbtn {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--p4-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
}
.hil-p4 .linkbtn:hover { text-decoration: underline; }
.hil-p4 .linkbtn svg {
  flex: none;
  display: block;
}

.hil-p4 .excluded__details {
  margin-top: 14px;
}

.hil-p4 .excluded__details > summary {
  list-style: none;
}

.hil-p4 .excluded__details > summary::-webkit-details-marker {
  display: none;
}

.hil-p4 .excluded__disc {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 4px;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  border-radius: var(--p4-radius-md);
  cursor: pointer;
}
.hil-p4 .excluded__disc:hover { background: var(--p4-surface-1); }
.hil-p4 .excluded__chev {
  transition: transform 0.15s ease;
  color: var(--p4-fg-muted);
  display: inline-flex;
}
.hil-p4 .excluded__details[open] .excluded__chev { transform: rotate(90deg); }
.hil-p4 .excluded__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--p4-fg-3);
}
.hil-p4 .excluded__spacer { flex: 1; }
.hil-p4 .excluded__list { border-top: 1px solid var(--p4-border-faint); }
.hil-p4 .excluded__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--p4-border-faint);
}
.hil-p4 .excluded__row:last-child { border-bottom: none; }
.hil-p4 .excluded__spacer-tick { width: 17px; flex: none; }
.hil-p4 .excluded__main { flex: 1; min-width: 0; }
.hil-p4 .excluded__name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.hil-p4 .excluded__name {
  font-size: 13px;
  color: var(--p4-fg-3);
}
.hil-p4 .excluded__name-row .pill {
  font-size: 11px;
  padding: 2px 10px;
}

.hil-p4 .callout--danger {
  background: #f9eded;
  color: var(--p4-danger);
  border: 1px solid #e8cccc;
}

.hil-p4 .callout--warning {
  background: #faf3e6;
  color: var(--p4-warning);
  border: 1px solid #ead9b8;
}

.hil-p4 .callout--danger .callout__icon,
.hil-p4 .callout--warning .callout__icon {
  color: inherit;
}

.hil-p4 .p4label {
  margin: 14px 0 8px;
}

.hil-p4 .mt-8 { margin-top: 8px; }
.hil-p4 .mt-12 { margin-top: 12px; }
.hil-p4 .mt-14 { margin-top: 14px; }

.hil-p4 .u-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.hil-p4 .chip {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--p4-radius-full);
  background: var(--p4-surface-2);
  color: var(--p4-fg-2);
}

.hil-p4 .avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--p4-radius-full);
  font-size: 11px;
  font-weight: 700;
  flex: none;
  color: #fff;
}

.hil-p4 .avatar--lg {
  width: 36px;
  height: 36px;
  font-size: 12px;
}

.hil-p4 .avatar--blue { background: #5b7fa8; }
.hil-p4 .avatar--green { background: var(--p4-success-solid); }
.hil-p4 .avatar--slate { background: #8a96a6; }

.hil-p4 .queue__row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  border: 1px solid var(--p4-border);
  border-radius: 6px;
  margin-bottom: 8px;
  background: var(--p4-surface-0);
}

.hil-p4 .queue__pos {
  flex: none;
  width: 18px;
  text-align: center;
  color: var(--p4-fg-3);
}

.hil-p4 .queue__name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--p4-fg-1);
}

.hil-p4 .queue__rating {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--p4-fg-1);
  font-variant-numeric: tabular-nums;
}

.hil-p4 .queue__mini {
  border: 1px solid var(--p4-border);
  background: var(--p4-surface-0);
  border-radius: 4px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--p4-fg-3);
  cursor: pointer;
}

.hil-p4 .queue__mini:hover { background: var(--p4-surface-2); }

.hil-p4 .queue__remove {
  border: none;
  background: none;
  color: var(--p4-fg-muted);
  display: inline-flex;
  padding: 2px;
  cursor: pointer;
}

.hil-p4 .queue__remove:hover { color: var(--p4-fg-2); }

.hil-p4 .seg-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hil-p4 .seg {
  flex: 1;
  min-width: 62px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 8px;
  border-radius: var(--p4-radius-md);
  border: 1px solid var(--p4-border-strong);
  background: var(--p4-surface-0);
  color: var(--p4-fg-2);
  cursor: pointer;
}

.hil-p4 .seg--sm { padding: 7px; border-radius: 6px; }
.hil-p4 .seg--on {
  border-color: var(--p4-primary);
  background: #ecf1f5;
  color: var(--p4-primary);
}

.hil-p4 .seg--input {
  text-align: left;
  padding: 7px 9px;
}

.hil-p4 .custom-window {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.hil-p4 .custom-window__input { flex: 1; box-sizing: border-box; }

.hil-p4 .serial-current {
  border: 1px solid #c9d9ea;
  background: #eef4fa;
  border-radius: var(--p4-radius-md);
  padding: 11px;
}

.hil-p4 .serial-current__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hil-p4 .serial-current__main { flex: 1; min-width: 0; }

.hil-p4 .serial-current__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--p4-fg-1);
}

.hil-p4 .sim {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dotted #c9d9ea;
}

.hil-p4 .sim__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--p4-fg-muted);
  margin-bottom: 8px;
}

.hil-p4 .sim__actions {
  display: flex;
  gap: 8px;
}

.hil-p4 .queue-remaining {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border: 1px solid var(--p4-border-faint);
  border-radius: 6px;
  margin-bottom: 8px;
}

.hil-p4 .queue-remaining__name {
  flex: 1;
  font-size: 13px;
  color: var(--p4-fg-2);
}

.hil-p4 .broadcast-item {
  border: 1px solid var(--p4-border);
  border-radius: var(--p4-radius-md);
  padding: 9px 10px;
  margin-bottom: 8px;
  background: var(--p4-surface-0);
}

.hil-p4 .broadcast-item__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hil-p4 .broadcast-item__main { flex: 1; min-width: 0; }

.hil-p4 .broadcast-item__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--p4-fg-1);
}

.hil-p4 .broadcast-item__sim {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dotted var(--p4-border-faint);
}

.hil-p4 .completed-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hil-p4 .assigned {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #c5dccf;
  background: #e9f0ec;
  border-radius: var(--p4-radius-md);
  padding: 8px 10px;
  margin-bottom: 8px;
}

.hil-p4 .assigned__main { flex: 1; min-width: 0; }

.hil-p4 .assigned__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--p4-fg-1);
}

/* Accepted-but-not-yet-committed offer: amber, visually distinct from the
   green "Assigned" (committed) card, with a Confirm/Decline actions row. */
.hil-p4 .assigned--pending {
  flex-wrap: wrap;
  border-color: #e7d6a8;
  background: #fbf6e9;
}

.hil-p4 .assigned__actions {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
}

.hil-p4 .assigned__actions .btn { flex: 1 1 auto; }

.hil-p4 .satisfied {
  margin-top: 14px;
  border: 1px solid #c5dccf;
  background: #e9f0ec;
  border-radius: var(--p4-radius-lg);
  padding: 16px;
  text-align: center;
}

.hil-p4 .satisfied__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--p4-radius-full);
  background: var(--p4-success-solid);
  color: #fff;
  margin-bottom: 8px;
}

.hil-p4 .satisfied__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--p4-fg-1);
}

.hil-p4 .octext--declined { color: var(--p4-danger); }
.hil-p4 .octext--expired { color: var(--p4-warning); }
.hil-p4 .octext--cancelled { color: var(--p4-fg-muted); }

.hil-p4 .tag--muted { color: var(--p4-fg-muted); background: #f0f0ef; }

.hil-p4 .p4-rerun-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0 4px;
  padding: 10px 12px;
  border: 1px solid var(--p4-border, #e5e5e3);
  border-radius: 8px;
  background: #faf3e6;
  font-size: 13px;
  line-height: 1.4;
  color: var(--p4-fg-1);
}
.hil-p4 .p4-rerun-note button { flex: 0 0 auto; white-space: nowrap; }