/* site-pulse-walkthrough.css — R24 PULSE Duty-of-Care live walkthrough.
   Scoped under .pwk-. Navy chassis, teal signal (PULSE), gold trim. */

.pwk-section { background: var(--gray-50); padding: var(--sp-section) 0; border-top: 1px solid var(--gray-200); }

/* ---- Switcher ---- */
.pwk-switcher { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 16px; align-items: center; }
.pwk-switcher__tab {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px 9px 11px; border-radius: 999px;
  border: 1px solid var(--gray-200); background: var(--white); color: var(--gray-600);
  font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 160ms ease;
}
.pwk-switcher__tab:hover { border-color: var(--teal-400); color: var(--navy-800); }
.pwk-switcher__tab--active { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.pwk-switcher__n { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; padding: 2px 6px; border-radius: 5px; background: var(--gray-100); color: var(--gray-500); }
.pwk-switcher__tab--active .pwk-switcher__n { background: var(--teal-500); color: #fff; }
.pwk-switcher__play { margin-left: auto; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--gray-200); background: var(--white); color: var(--gray-600); cursor: pointer; }
.pwk-switcher__play:hover { border-color: var(--navy-400); color: var(--navy-800); }

/* ---- Frame ---- */
.pwk-frame {
  display: grid; grid-template-columns: 210px 1fr; grid-template-rows: minmax(0, 1fr);
  height: 640px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--gray-200); box-shadow: 0 30px 70px rgba(17,24,39,0.16); background: var(--gray-50);
}
@media (max-width: 1080px) {
  .pwk-frame { grid-template-columns: 60px 1fr; }
  .pwk-navi span, .pwk-sidebar__brand-txt, .pwk-sidebar__foot { display: none; }
}

/* ---- Sidebar ---- */
.pwk-sidebar { background: var(--navy-800); color: #fff; display: flex; flex-direction: column; padding: 16px 0 12px; }
.pwk-sidebar__brand { display: flex; align-items: center; gap: 9px; padding: 0 16px 14px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 10px; }
.pwk-sidebar__brand img { width: 28px; height: 28px; object-fit: contain; }
.pwk-sidebar__brand-txt { font-family: var(--font); font-weight: 800; font-size: 15px; letter-spacing: 0.06em; color: #fff; }
.pwk-sidebar__nav { flex: 1; display: flex; flex-direction: column; gap: 1px; padding: 0 8px; }
.pwk-navi { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 8px; color: rgba(255,255,255,0.6); font-family: var(--font); font-size: 12.5px; font-weight: 500; white-space: nowrap; border-left: 2px solid transparent; }
.pwk-navi:hover { background: rgba(255,255,255,0.05); color: #fff; }
.pwk-navi--active { background: linear-gradient(90deg, rgba(26,138,154,0.22), rgba(26,138,154,0)); color: #fff; border-left-color: var(--teal-400); }
.pwk-sidebar__foot { padding: 12px 16px 0; margin-top: 8px; border-top: 1px solid rgba(255,255,255,0.08); font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; color: rgba(255,255,255,0.55); display: flex; align-items: center; gap: 8px; }

/* ---- Main + topbar ---- */
.pwk-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--gray-50); }
.pwk-topbar { height: 58px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; background: var(--white); border-bottom: 1px solid var(--gray-200); }
.pwk-topbar__left { display: flex; align-items: center; gap: 14px; }
.pwk-topbar__step { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: var(--teal-600); background: var(--teal-100); padding: 4px 9px; border-radius: 6px; }
.pwk-topbar__titles { display: flex; flex-direction: column; }
.pwk-topbar__title { margin: 0; font-family: var(--font); font-size: 15px; font-weight: 700; color: var(--navy-800); }
.pwk-topbar__sub { font-size: 11px; color: var(--gray-500); }
.pwk-topbar__right { display: flex; align-items: center; gap: 14px; }
.pwk-topbar__clock { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: var(--red-600); display: inline-flex; align-items: center; gap: 7px; }
.pwk-topbar__bell { position: relative; color: var(--gray-500); }
.pwk-topbar__bell-badge { position: absolute; top: -5px; right: -6px; background: var(--red-500); color: #fff; font-family: var(--mono); font-size: 8px; font-weight: 800; padding: 1px 4px; border-radius: 999px; }
.pwk-topbar__user { width: 30px; height: 30px; border-radius: 50%; background: var(--navy-700); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }

/* ---- Canvas ---- */
.pwk-canvas { flex: 1; overflow: hidden; padding: 16px 18px; min-height: 0; }
@keyframes pwk-view-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.pwk-canvas { animation: pwk-view-in 0.4s cubic-bezier(.22,1,.36,1); }
.pwk-view { height: 100%; min-height: 0; }
.pwk-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pwk-col { display: flex; flex-direction: column; gap: 12px; min-height: 0; }

.pwk-livedot { width: 7px; height: 7px; border-radius: 50%; background: var(--red-500); box-shadow: 0 0 0 3px rgba(200,35,51,0.18); display: inline-block; animation: pwk-blink 1.4s ease-in-out infinite; }
.pwk-livedot--teal { background: var(--teal-500); box-shadow: 0 0 0 3px rgba(26,138,154,0.18); }
@keyframes pwk-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.pwk-mono { font-family: var(--mono); }
.pwk-muted { color: var(--gray-500); }
.pwk-ok { color: var(--teal-600); }

/* ---- Cards ---- */
.pwk-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px; box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; }
.pwk-card--fill { flex: 1; min-height: 0; }
.pwk-card__head { display: flex; align-items: center; justify-content: space-between; padding: 11px 15px; border-bottom: 1px solid var(--gray-200); flex-shrink: 0; }
.pwk-card__head h5 { margin: 0; font-family: var(--font); font-size: 13px; font-weight: 700; color: var(--navy-800); display: inline-flex; align-items: center; gap: 7px; }
.pwk-card__head h5 svg { color: var(--gold-500); }
.pwk-card__meta { font-family: var(--mono); font-size: 10px; color: var(--gray-500); display: inline-flex; align-items: center; gap: 5px; }
.pwk-card__body { padding: 14px 15px; overflow-y: auto; }

/* ---- Tags / chips ---- */
.pwk-tag { font-family: var(--mono); font-size: 9px; font-weight: 800; letter-spacing: 0.08em; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.pwk-tag--red { background: rgba(200,35,51,0.10); color: var(--red-600); }
.pwk-tag--teal { background: var(--teal-100); color: var(--teal-600); }
.pwk-tag--gold { background: rgba(212,163,34,0.16); color: #8B6E14; }

/* ---- KPIs ---- */
.pwk-kpis { display: flex; gap: 10px; flex-shrink: 0; }
.pwk-kpi { flex: 1; background: var(--white); border: 1px solid var(--gray-200); border-left: 3px solid var(--navy-700); border-radius: 8px; padding: 10px 13px; display: flex; flex-direction: column; }
.pwk-kpi b { font-size: 20px; font-weight: 800; color: var(--navy-800); line-height: 1; letter-spacing: -0.02em; }
.pwk-kpi span { font-size: 10px; color: var(--gray-500); margin-top: 3px; }
.pwk-kpi--red { border-left-color: var(--red-500); } .pwk-kpi--red b { color: var(--red-600); }
.pwk-kpi--teal { border-left-color: var(--teal-500); } .pwk-kpi--teal b { color: var(--teal-600); }

/* ---- Risk feed ---- */
.pwk-feed { display: flex; flex-direction: column; overflow-y: auto; }
.pwk-feed-row { display: flex; align-items: stretch; gap: 11px; padding: 11px 4px; border-bottom: 1px solid var(--gray-100); }
.pwk-feed-row:last-child { border-bottom: none; }
.pwk-feed-row--live { background: rgba(200,35,51,0.04); margin: 0 -15px; padding: 11px 15px; }
.pwk-sevbar { width: 4px; border-radius: 2px; flex-shrink: 0; }
.pwk-sevbar--major { background: var(--red-500); } .pwk-sevbar--mod { background: var(--gold-500); } .pwk-sevbar--ltd { background: var(--gray-400); }
.pwk-feed-body { flex: 1; min-width: 0; }
.pwk-feed-top { display: flex; align-items: center; gap: 8px; }
.pwk-feed-top b { font-size: 12.5px; font-weight: 600; color: var(--navy-800); }
.pwk-feed-sub { font-size: 11px; color: var(--gray-500); }
.pwk-sevchip { font-family: var(--mono); font-size: 9px; font-weight: 700; padding: 3px 7px; border-radius: 999px; align-self: center; white-space: nowrap; }
.pwk-sevchip--major { background: rgba(200,35,51,0.10); color: var(--red-600); } .pwk-sevchip--mod { background: rgba(212,163,34,0.16); color: #8B6E14; } .pwk-sevchip--ltd { background: var(--gray-100); color: var(--gray-500); }

/* ---- Map ---- */
.pwk-map { position: relative; height: 100%; min-height: 240px; border-radius: 10px; overflow: hidden; border: 1px solid var(--gray-200); }
.pwk-map__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,13,32,0.12), rgba(14,13,32,0.28)); pointer-events: none; z-index: 1; }
.pwk-fence { position: absolute; z-index: 2; transform: translate(-50%,-50%); }
.pwk-fence__ring { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; border-radius: 50%; border: 2px solid var(--teal-400); transform: translate(-50%,-50%); background: rgba(26,138,154,0.10); }
.pwk-fence__ring--d { width: 60px; height: 60px; border-color: rgba(26,138,154,0.4); animation: pwk-ping 2.4s ease-out infinite; background: none; }
@keyframes pwk-ping { 0% { width: 40px; height: 40px; opacity: 0.8; } 100% { width: 150px; height: 150px; opacity: 0; } }
.pwk-threat { position: absolute; z-index: 3; transform: translate(-50%,-50%); width: 26px; height: 26px; border-radius: 50%; background: var(--red-500); color: #fff; display: grid; place-items: center; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.4); animation: pwk-pulse 1.6s ease-in-out infinite; }
@keyframes pwk-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(200,35,51,0.5), 0 2px 8px rgba(0,0,0,0.4); } 50% { box-shadow: 0 0 0 8px rgba(200,35,51,0), 0 2px 8px rgba(0,0,0,0.4); } }
.pwk-dot { position: absolute; z-index: 3; transform: translate(-50%,-50%); width: 13px; height: 13px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.4); }
.pwk-dot--matched { background: var(--gold-500); }
.pwk-dot--ok { background: var(--teal-500); }
.pwk-dot--no { background: var(--red-500); animation: pwk-pulse 1.6s ease-in-out infinite; }
.pwk-respunit { position: absolute; z-index: 3; transform: translate(-50%,-50%); width: 24px; height: 24px; border-radius: 6px; background: var(--navy-800); color: #fff; display: grid; place-items: center; border: 2px solid #fff; }
.pwk-maplabel { position: absolute; z-index: 4; transform: translateY(-50%); background: rgba(20,19,44,0.88); color: #fff; font-family: var(--font); font-size: 10px; font-weight: 600; padding: 4px 8px; border-radius: 6px; border: 1px solid rgba(217,34,67,0.5); white-space: nowrap; }
.pwk-mapcorner { position: absolute; z-index: 4; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.85); background: rgba(20,19,44,0.7); border: 1px solid rgba(255,255,255,0.1); padding: 5px 9px; border-radius: 6px; display: inline-flex; align-items: center; gap: 7px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pwk-mapcorner--tl { top: 12px; left: 12px; }
.pwk-mapcorner--br { bottom: 12px; right: 12px; color: var(--gold-400, #E8C870); }

/* ---- Match ---- */
.pwk-matchstat { display: flex; align-items: center; gap: 16px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px; padding: 14px 18px; flex-shrink: 0; }
.pwk-matchstat__big { font-size: 40px; font-weight: 800; color: var(--teal-600); line-height: 1; letter-spacing: -0.03em; }
.pwk-matchstat__meta b { display: block; font-size: 14px; font-weight: 700; color: var(--navy-800); }
.pwk-matchstat__meta span { font-size: 11.5px; color: var(--gray-500); }
.pwk-people { display: flex; flex-direction: column; overflow-y: auto; }
.pwk-person { display: flex; align-items: center; gap: 11px; padding: 9px 4px; border-bottom: 1px solid var(--gray-100); }
.pwk-person:last-child { border-bottom: none; }
.pwk-person__av { width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; }
.pwk-person__meta { flex: 1; min-width: 0; }
.pwk-person__meta b { display: block; font-size: 12.5px; font-weight: 600; color: var(--navy-800); }
.pwk-person__meta span { font-size: 11px; color: var(--gray-500); }
.pwk-person__dist { font-family: var(--mono); font-size: 11px; color: var(--gray-600); }
.pwk-statusdot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.pwk-statusdot--pending { background: var(--gold-500); box-shadow: 0 0 0 3px rgba(212,163,34,0.2); }
.pwk-people-more { padding: 10px 4px 2px; font-size: 11.5px; color: var(--teal-600); font-weight: 600; }

/* ---- Broadcast ---- */
.pwk-broadcast { display: grid; grid-template-columns: 1fr 280px; gap: 14px; }
.pwk-bc-msg { font-size: 13px; line-height: 1.5; color: var(--navy-800); background: var(--gray-50); border: 1px solid var(--gray-200); border-left: 3px solid var(--teal-500); border-radius: 8px; padding: 12px 14px; font-style: italic; }
.pwk-bc-meta { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.pwk-bc-metaitem { display: flex; flex-direction: column; gap: 6px; }
.pwk-bc-lab { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-500); }
.pwk-bc-metaitem b { font-size: 13px; color: var(--navy-800); }
.pwk-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pwk-chip { font-family: var(--font); font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--gray-100); color: var(--gray-500); border: 1px solid var(--gray-200); }
.pwk-chip--on { background: var(--teal-100); color: var(--teal-600); border-color: #bcdfd9; }
.pwk-chip--lang { background: rgba(212,163,34,0.12); color: #8B6E14; border-color: #e6d59b; font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; }
.pwk-bc-delivery { margin-top: 16px; }
.pwk-bc-deliverybar { height: 7px; border-radius: 999px; background: var(--gray-100); overflow: hidden; }
.pwk-bc-deliverybar i { display: block; height: 100%; background: var(--teal-500); border-radius: 999px; animation: pwk-fill 1.4s ease-out; }
@keyframes pwk-fill { from { width: 0; } }
.pwk-bc-deliverylab { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-family: var(--mono); font-size: 10.5px; color: var(--teal-600); font-weight: 600; }
.pwk-respstats { display: flex; gap: 10px; padding: 14px 15px; }
.pwk-respstat { flex: 1; text-align: center; padding: 10px; border-radius: 8px; background: var(--gray-50); border: 1px solid var(--gray-200); }
.pwk-respstat b { display: block; font-size: 22px; font-weight: 800; color: var(--navy-800); line-height: 1; }
.pwk-respstat span { font-size: 10px; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 3px; display: block; }
.pwk-respstat--ok b { color: var(--teal-600); } .pwk-respstat--ok { border-color: #bcdfd9; background: var(--teal-100); }
.pwk-respstat--no b { color: var(--red-600); } .pwk-respstat--no { border-color: #f3c0c9; background: rgba(200,35,51,0.06); }

/* ---- Phone overlay ---- */
.pwk-phonecol { align-items: center; justify-content: center; gap: 10px; }
.pwk-phone { width: 220px; aspect-ratio: 9/18; background: #0a0e1e; border-radius: 26px; padding: 6px; position: relative; box-shadow: 0 24px 44px rgba(0,0,0,0.4); }
.pwk-phone__notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 80px; height: 20px; background: #06091a; border-radius: 12px; z-index: 2; }
.pwk-phone__screen { height: 100%; border-radius: 21px; overflow: hidden; background: linear-gradient(180deg, #14132C, #1E1B45); display: flex; flex-direction: column; padding: 34px 12px 12px; }
.pwk-phone__appbar { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.pwk-phone__appbar img { width: 24px; height: 24px; object-fit: contain; }
.pwk-phone__appbar span { font-family: var(--font); font-weight: 700; font-size: 13px; color: #fff; }
.pwk-phone__alert { margin-top: 16px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 16px 14px; display: flex; flex-direction: column; gap: 8px; }
.pwk-phone__title { margin: 4px 0 0; font-family: var(--font); font-weight: 800; font-size: 20px; color: #fff; }
.pwk-phone__body { margin: 0; font-size: 12px; line-height: 1.45; color: rgba(255,255,255,0.7); }
.pwk-phone__btns { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.pwk-phone__btn { border: 0; border-radius: 10px; padding: 11px; font-family: var(--font); font-weight: 700; font-size: 13px; cursor: default; }
.pwk-phone__btn--ok { background: var(--teal-500); color: #fff; }
.pwk-phone__btn--no { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid var(--red-400); }
.pwk-phone__loc { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 9.5px; color: rgba(255,255,255,0.5); margin-top: 4px; }
.pwk-phonecap { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray-500); }

/* ---- Response + VRO ---- */
.pwk-respbreak { background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px; padding: 14px 16px; flex-shrink: 0; }
.pwk-respbar { display: flex; height: 24px; border-radius: 6px; overflow: hidden; gap: 2px; }
.pwk-respbar__ok { display: flex; align-items: center; padding-left: 10px; background: var(--teal-500); color: #fff; font-size: 11px; font-weight: 700; font-style: normal; }
.pwk-respbar__no { display: flex; align-items: center; justify-content: center; background: var(--red-500); color: #fff; font-size: 11px; font-weight: 700; font-style: normal; }
.pwk-respbreak__lab { display: block; margin-top: 8px; font-size: 11.5px; color: var(--gray-600); }
.pwk-respbreak__lab b { color: var(--red-600); }
.pwk-vro { display: flex; flex-direction: column; padding: 10px 15px 14px; }
.pwk-vrorow { display: flex; align-items: center; gap: 12px; padding: 9px 0; position: relative; }
.pwk-vrorow:not(:last-child)::before { content: ""; position: absolute; left: 12px; top: 30px; bottom: -9px; width: 2px; background: var(--gray-200); }
.pwk-vrorow--done:not(:last-child)::before { background: var(--gold-500); }
.pwk-vrorow__node { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; z-index: 1; display: grid; place-items: center; background: var(--white); border: 2px solid var(--gray-200); color: var(--gray-500); }
.pwk-vrorow--done .pwk-vrorow__node { background: var(--gold-500); border-color: var(--gold-500); color: #1a1300; }
.pwk-vrorow--cur .pwk-vrorow__node { border-color: var(--gold-500); }
.pwk-vrorow__pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-500); animation: pwk-blink 1.2s ease-in-out infinite; }
.pwk-vrorow__body { flex: 1; }
.pwk-vrorow__body b { display: block; font-size: 12.5px; font-weight: 600; color: var(--navy-800); }
.pwk-vrorow__body span { font-size: 11px; color: var(--gray-500); }

/* ---- Resolved ---- */
.pwk-resolved-banner { display: flex; align-items: center; gap: 14px; background: var(--teal-100); border: 1px solid #bcdfd9; border-radius: 10px; padding: 14px 18px; flex-shrink: 0; }
.pwk-resolved-banner__icon { width: 40px; height: 40px; border-radius: 50%; background: var(--teal-500); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.pwk-resolved-banner b { display: block; font-size: 15px; font-weight: 800; color: var(--teal-700, #0A5E54); }
.pwk-resolved-banner span { font-size: 11.5px; color: var(--teal-600); }
.pwk-history { display: flex; flex-direction: column; padding: 12px 15px; overflow-y: auto; }
.pwk-histrow { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; padding-bottom: 12px; align-items: start; }
.pwk-histrow__rail { display: flex; justify-content: center; position: relative; }
.pwk-histrow__rail::before { content: ""; position: absolute; top: 12px; bottom: -12px; width: 2px; background: var(--teal-500); }
.pwk-histrow:last-child .pwk-histrow__rail::before { display: none; }
.pwk-histrow__node { width: 10px; height: 10px; border-radius: 50%; background: var(--teal-500); margin-top: 3px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--teal-500); }
.pwk-histrow__body b { display: block; font-size: 12px; color: var(--navy-800); }
.pwk-histrow__body span { font-size: 10.5px; color: var(--gray-500); }
.pwk-histrow__seal { color: var(--teal-600); }
.pwk-rptstats { display: flex; gap: 10px; margin-bottom: 14px; }
.pwk-rptstat { flex: 1; text-align: center; padding: 10px; border-radius: 8px; background: var(--gray-50); border: 1px solid var(--gray-200); }
.pwk-rptstat b { display: block; font-size: 19px; font-weight: 800; color: var(--navy-800); line-height: 1; }
.pwk-rptstat span { font-size: 9.5px; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 3px; display: block; }
.pwk-rptstat--ok b { color: var(--teal-600); }
.pwk-rptline { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--gray-100); font-size: 12.5px; color: var(--gray-600); }
.pwk-rptline b { font-weight: 700; }
.pwk-rptseal { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 12px; background: var(--teal-100); border-radius: 8px; font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: var(--teal-700, #0A5E54); }

/* ---- Master Data (Golden Record) ---- */
.pwk-md { display: grid; grid-template-columns: 1fr 70px 1.06fr; gap: 6px; }
.pwk-md__col { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.pwk-md__pipe { position: relative; align-self: stretch; }
.pwk-md__pipe svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pwk-md-srcs { display: flex; flex-direction: column; padding: 4px 15px 8px; overflow-y: auto; }
.pwk-md-src { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--gray-100); }
.pwk-md-src:last-child { border-bottom: none; }
.pwk-md-src__ico { width: 30px; height: 30px; border-radius: 8px; background: var(--navy-800); color: var(--teal-400); display: grid; place-items: center; flex-shrink: 0; }
.pwk-md-src__meta { flex: 1; min-width: 0; }
.pwk-md-src__meta b { display: block; font-size: 12.5px; font-weight: 600; color: var(--navy-800); }
.pwk-md-src__sys { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; color: var(--gray-400); margin-left: 4px; }
.pwk-md-src__meta span { font-size: 11px; color: var(--gray-500); }
.pwk-md-src__sync { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--gray-500); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pwk-md-src__sync--live { color: var(--teal-600); }

.pwk-md-gold__id { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-bottom: 1px solid var(--gray-200); flex-shrink: 0; }
.pwk-md-gold__av { width: 38px; height: 38px; border-radius: 50%; background: var(--teal-500); color: #fff; font-size: 13px; font-weight: 800; display: grid; place-items: center; flex-shrink: 0; }
.pwk-md-gold__who b { display: block; font-size: 14px; font-weight: 800; color: var(--navy-800); }
.pwk-md-gold__who span { font-size: 11px; color: var(--gray-500); }
.pwk-md-fields { display: flex; flex-direction: column; padding: 4px 15px; overflow-y: auto; flex: 1; min-height: 0; }
.pwk-md-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 6px; border-bottom: 1px solid var(--gray-100); border-radius: 6px; }
.pwk-md-field:last-child { border-bottom: none; }
.pwk-md-field__k { display: block; font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-400); margin-bottom: 2px; }
.pwk-md-field__main b { font-size: 12.5px; font-weight: 600; color: var(--navy-800); }
.pwk-md-field__src { font-family: var(--mono); font-size: 9.5px; font-weight: 600; color: var(--gray-500); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pwk-md-field__src i { font-style: normal; background: var(--gray-100); color: var(--gray-500); padding: 2px 6px; border-radius: 999px; }
.pwk-md-field--live { background: rgba(26,138,154,0.06); animation: pwk-md-flash 4s ease-in-out infinite; }
.pwk-md-field--live .pwk-md-field__src i { background: var(--teal-100); color: var(--teal-600); }
@keyframes pwk-md-flash { 0%,100% { background: rgba(26,138,154,0.04); } 50% { background: rgba(26,138,154,0.13); } }
.pwk-md-tie { display: flex; align-items: flex-start; gap: 9px; margin: 0 15px 14px; padding: 11px 13px; background: var(--teal-100); border: 1px solid #bcdfd9; border-radius: 8px; font-size: 11.5px; line-height: 1.5; color: var(--teal-700, #0A5E54); flex-shrink: 0; }
.pwk-md-tie svg { color: var(--teal-600); flex-shrink: 0; margin-top: 1px; }
.pwk-md-tie b { font-weight: 800; }

/* ---- Progress ---- */
.pwk-progress { display: flex; gap: 6px; margin: 16px 0 0; justify-content: center; }
.pwk-progress__seg { width: 40px; height: 4px; border-radius: 2px; background: var(--gray-200); }
.pwk-progress__seg--on { background: var(--teal-500); }

@media (prefers-reduced-motion: reduce) {
  .pwk-canvas, .pwk-livedot, .pwk-fence__ring--d, .pwk-threat, .pwk-dot--no, .pwk-vrorow__pulse, .pwk-bc-deliverybar i, .pwk-md-field--live { animation: none !important; }
}
@media (max-width: 900px) {
  .pwk-frame { height: auto; min-height: 600px; }
  .pwk-grid-2, .pwk-broadcast { grid-template-columns: 1fr; }
  .pwk-md { grid-template-columns: 1fr; }
  .pwk-md__pipe { display: none; }
  .pwk-phonecol { order: -1; }
}

/* Inside FitScaler the frame keeps its full desktop layout at every viewport —
   the scaler handles fitting, so viewport media queries must not restructure it. */
.pwk-fit .pwk-frame { grid-template-columns: 210px 1fr; }
.pwk-fit .pwk-navi span,
.pwk-fit .pwk-sidebar__brand-txt { display: inline; }
.pwk-fit .pwk-sidebar__foot { display: block; }
.pwk-fit .pwk-grid-2 { grid-template-columns: 1fr 1fr; }
.pwk-fit .pwk-broadcast { grid-template-columns: 1fr 280px; }
.pwk-fit .pwk-md { grid-template-columns: 1fr 70px 1.06fr; }
.pwk-fit .pwk-md__pipe { display: block; }