/* site-dutyofcare-demo.css — R24 PULSE Duty-of-Care travel risk + reporting console.
   Scoped under .doc-. Navy chassis, coral signal, gold trim (R24i design system). */

.doc-section {
  background: var(--white);
  padding: var(--sp-section) 0;
}

/* ---- Switcher ---- */
.doc-switcher { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 16px; align-items: center; }
.doc-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;
}
.doc-switcher__tab:hover { border-color: var(--teal-400); color: var(--navy-800); }
.doc-switcher__tab--active { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.doc-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);
}
.doc-switcher__tab--active .doc-switcher__n { background: var(--teal-500); color: #fff; }
.doc-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;
}
.doc-switcher__play:hover { border-color: var(--navy-400); color: var(--navy-800); }

/* ---- Frame ---- */
.doc-frame {
  display: grid; grid-template-columns: 60px 1fr; grid-template-rows: minmax(0, 1fr);
  height: 660px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--gray-200); box-shadow: 0 30px 70px rgba(17,24,39,0.16);
  background: #F4F5F7;
}

/* ---- Sidebar ---- */
.doc-sidebar {
  background: #2E2F33; display: flex; flex-direction: column; align-items: center;
  padding: 14px 0 10px; gap: 3px;
}
.doc-sidebar__logo { width: 34px; height: 34px; margin-bottom: 12px; }
.doc-sidebar__logo img { width: 100%; height: 100%; object-fit: contain; }
.doc-sidebar__nav { display: flex; flex-direction: column; gap: 3px; }
.doc-navi {
  width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center;
  color: #B0B3B8; cursor: pointer; position: relative; transition: all 120ms ease;
}
.doc-navi:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); }
.doc-navi--active { background: rgba(255,255,255,0.12); color: #fff; }
.doc-navi--active::before { content: ""; position: absolute; left: 0; top: 25%; bottom: 25%; width: 3px; background: var(--red-500); border-radius: 0 2px 2px 0; }
.doc-sidebar__spacer { flex: 1; }
.doc-sidebar__foot { font-size: 7px; color: rgba(255,255,255,0.22); text-align: center; line-height: 1.5; padding: 6px 4px 0; letter-spacing: 0.02em; }

/* ---- Main + topbar ---- */
.doc-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #F4F5F7; }
.doc-topbar {
  height: 52px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px; background: #E6E8EB; border-bottom: 1px solid var(--gray-200);
}
.doc-topbar__brand { display: flex; align-items: center; gap: 12px; }
.doc-topbar__mark { width: 26px; height: 26px; }
.doc-topbar__mark img { width: 100%; height: 100%; object-fit: contain; }
.doc-topbar__names { display: flex; flex-direction: column; line-height: 1.15; }
.doc-topbar__name { font-size: 12px; font-weight: 800; color: var(--navy-800); letter-spacing: 0.02em; }
.doc-topbar__sub { font-size: 9px; color: var(--gray-500); font-weight: 500; }
.doc-topbar__chip {
  font-size: 10px; color: var(--gray-600); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  padding-left: 12px; border-left: 1px solid var(--gray-200);
}
.doc-topbar__right { display: flex; align-items: center; gap: 10px; }
.doc-userpill { display: flex; align-items: center; gap: 9px; background: #2E2F33; border-radius: 4px; padding: 5px 12px 5px 8px; }
.doc-userpill__av { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.18); display: grid; place-items: center; color: rgba(255,255,255,0.9); font-size: 11px; font-weight: 700; }
.doc-userpill__div { width: 1px; height: 16px; background: rgba(255,255,255,0.15); }
.doc-userpill__name { font-size: 12px; font-weight: 600; color: #fff; white-space: nowrap; }
.doc-userpill__role { font-size: 9.5px; color: rgba(255,255,255,0.45); white-space: nowrap; }
.doc-bell { width: 32px; height: 32px; border-radius: 4px; display: grid; place-items: center; color: var(--gray-500); }

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

/* ---- Exec strip ---- */
.doc-exec { display: flex; gap: 10px; flex-shrink: 0; }
.doc-exec__stat {
  flex: 1; background: var(--white); border: 1px solid var(--gray-200); border-left: 3px solid var(--navy-800);
  border-radius: 4px; padding: 12px 16px; display: flex; flex-direction: column;
}
.doc-exec__stat.doc-s-red { border-left-color: #DC2626; }
.doc-exec__stat.doc-s-amber { border-left-color: #D97706; }
.doc-exec__stat.doc-s-blue { border-left-color: #2563EB; }
.doc-exec__stat.doc-s-green { border-left-color: #16A34A; }
.doc-exec__val { font-size: 20px; font-weight: 800; color: var(--navy-800); line-height: 1; letter-spacing: -0.02em; }
.doc-s-red .doc-exec__val { color: #DC2626; }
.doc-s-amber .doc-exec__val { color: #D97706; }
.doc-s-blue .doc-exec__val { color: #2563EB; }
.doc-s-green .doc-exec__val { color: #16A34A; }
.doc-exec__lbl { font-size: 10px; color: var(--gray-400); font-weight: 500; margin-top: 3px; text-transform: uppercase; letter-spacing: 0.05em; }

/* ---- Search ---- */
.doc-search {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  height: 38px; padding: 0 14px; border: 1px solid var(--gray-200); border-radius: 4px;
  background: var(--white); color: var(--gray-400); font-size: 13px;
}

/* ---- Tabs ---- */
.doc-tabs { display: flex; gap: 0; flex-shrink: 0; border-bottom: 1px solid var(--gray-200); }
.doc-tab {
  display: inline-flex; align-items: center; gap: 5px; padding: 0 16px; height: 40px;
  font-size: 12.5px; font-weight: 500; color: var(--gray-500); position: relative; white-space: nowrap;
}
.doc-tab--active { font-weight: 700; color: var(--navy-800); }
.doc-tab--active::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--navy-800); border-radius: 1px 1px 0 0; }
.doc-tabn { font-style: normal; display: inline-flex; align-items: center; justify-content: center; background: var(--gray-100); color: var(--gray-500); border-radius: 10px; padding: 0 6px; font-size: 10px; font-weight: 600; height: 16px; }
.doc-tab--active .doc-tabn { background: var(--navy-800); color: #fff; }

/* ---- Table ---- */
.doc-table-card { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--gray-200); border-radius: 6px; overflow: hidden; }
.doc-trow {
  display: grid; grid-template-columns: 1.5fr 1.7fr 1.2fr 1fr 1fr 0.8fr 1fr;
  align-items: center; gap: 10px; padding: 10px 16px;
}
.doc-thead {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--gray-400);
  background: #F4F5F7; border-bottom: 1px solid var(--gray-200); flex-shrink: 0;
}
.doc-tbody { flex: 1; min-height: 0; overflow-y: auto; }
.doc-tbodyrow { border-bottom: 1px solid var(--gray-100); font-size: 12px; }
.doc-tbodyrow:hover { background: #F9FAFB; }
.doc-trow--alert { border-left: 3px solid var(--red-500); padding-left: 13px; }
.doc-trav { display: flex; align-items: center; gap: 9px; min-width: 0; }
.doc-av { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 700; }
.doc-trav__meta { display: flex; flex-direction: column; min-width: 0; }
.doc-trav__meta b { font-size: 13px; font-weight: 600; color: var(--navy-800); }
.doc-trav__meta i { font-style: normal; font-size: 11px; color: var(--gray-400); }
.doc-route { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.doc-route__top { display: flex; align-items: center; gap: 7px; }
.doc-route__top b { font-size: 12.5px; font-weight: 700; color: var(--navy-800); }
.doc-pin { font-style: normal; font-size: 8px; }
.doc-pin--g { color: #16A34A; }
.doc-pin--r { color: #DC2626; }
.doc-route__dash { width: 24px; height: 1px; background-image: repeating-linear-gradient(to right, #D1D5DB 0, #D1D5DB 3px, transparent 3px, transparent 7px); }
.doc-route__sub { font-size: 11px; color: var(--gray-400); }
.doc-dates { display: flex; flex-direction: column; gap: 2px; }
.doc-dates b { font-size: 12px; font-weight: 500; color: var(--navy-800); }
.doc-dates i { font-style: normal; font-size: 11px; color: var(--gray-400); }
.doc-tfoot { flex-shrink: 0; padding: 8px 16px; font-size: 11.5px; color: var(--gray-500); background: var(--white); border-top: 1px solid var(--gray-200); display: flex; align-items: center; justify-content: space-between; }
.doc-tfoot__note { font-size: 10.5px; color: var(--gray-400); }

/* ---- Badges ---- */
.doc-badge { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.doc-b-green { background: #DCFCE7; color: #166534; }
.doc-b-amber { background: #FEF9C3; color: #854D0E; }
.doc-b-red { background: #FEE2E2; color: #991B1B; }
.doc-b-blue { background: #EFF6FF; color: #1D4ED8; }
.doc-b-grey { background: #F3F4F6; color: #6B7280; }

/* ---- Analytics ---- */
.doc-arow { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; flex: 1; min-height: 0; }
.doc-acard { background: var(--white); border: 1px solid var(--gray-200); border-radius: 6px; padding: 16px 18px; min-height: 0; }
.doc-acard__title { font-size: 10px; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 16px; }
.doc-donut-wrap { display: flex; align-items: center; gap: 22px; }
.doc-donut { width: 132px; height: 132px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; }
.doc-donut__hole { width: 90px; height: 90px; border-radius: 50%; background: var(--white); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.doc-donut__hole b { font-size: 22px; font-weight: 800; color: var(--navy-800); letter-spacing: -0.02em; }
.doc-donut__hole i { font-style: normal; font-size: 10px; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.06em; }
.doc-legend { display: flex; flex-direction: column; gap: 11px; flex: 1; }
.doc-leg { display: flex; align-items: center; gap: 9px; }
.doc-leg__dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.doc-leg__lbl { font-size: 12.5px; color: var(--navy-800); font-weight: 500; flex: 1; }
.doc-leg__n { font-size: 12px; color: var(--gray-500); font-weight: 700; }
.doc-bars { display: flex; flex-direction: column; gap: 12px; }
.doc-bar { display: flex; align-items: center; gap: 12px; }
.doc-bar__lbl { font-size: 11.5px; color: var(--navy-800); width: 124px; flex-shrink: 0; }
.doc-bar__track { flex: 1; height: 8px; background: #F4F5F7; border-radius: 4px; overflow: hidden; border: 1px solid var(--gray-200); }
.doc-bar__fill { display: block; height: 100%; border-radius: 4px; }
.doc-fill-red { background: #DC2626; }
.doc-fill-amber { background: #D97706; }
.doc-fill-green { background: #16A34A; }
.doc-bar__n { font-size: 12px; font-weight: 700; color: var(--navy-800); width: 26px; text-align: right; }

.doc-crisis { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-shrink: 0; background: #FFF5F5; border: 1px solid #FECACA; border-radius: 6px; padding: 13px 18px; }
.doc-crisis__info { display: flex; align-items: center; gap: 12px; color: #991B1B; }
.doc-crisis__info strong { display: block; font-size: 12.5px; font-weight: 700; color: #991B1B; }
.doc-crisis__info span { font-size: 11px; color: #B91C1C; }
.doc-crisis__btn { height: 34px; padding: 0 16px; background: #DC2626; border: 0; border-radius: 4px; color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; font-family: var(--font); white-space: nowrap; }
.doc-crisis__btn:hover { background: #B91C1C; }

/* ---- Report ---- */
.doc-view--report { overflow-y: auto; }
.doc-rpt-meta { display: flex; gap: 20px; flex-wrap: wrap; padding: 11px 16px; background: #F4F5F7; border: 1px solid var(--gray-200); border-radius: 6px; flex-shrink: 0; }
.doc-rpt-meta span { font-size: 11.5px; color: var(--gray-500); }
.doc-rpt-meta b { color: var(--navy-800); font-weight: 600; }
.doc-rpt-sec { background: var(--white); }
.doc-rpt-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gray-500); border-bottom: 1px solid var(--gray-200); padding-bottom: 7px; margin-bottom: 13px; display: flex; align-items: center; gap: 8px; }
.doc-rpt-no { font-style: normal; font-size: 9.5px; background: var(--navy-800); color: #fff; border-radius: 2px; padding: 1px 5px; font-weight: 700; }
.doc-statcards { display: flex; gap: 8px; flex-wrap: wrap; }
.doc-statcard { flex: 1; min-width: 120px; background: #F4F5F7; border: 1px solid var(--gray-200); border-left: 3px solid var(--navy-800); border-radius: 4px; padding: 12px 14px; }
.doc-statcard.doc-sc-red { border-left-color: #DC2626; }
.doc-statcard.doc-sc-amber { border-left-color: #D97706; }
.doc-statcard.doc-sc-green { border-left-color: #16A34A; }
.doc-statcard__v { font-size: 22px; font-weight: 800; color: var(--navy-800); line-height: 1; letter-spacing: -0.02em; }
.doc-sc-red .doc-statcard__v { color: #DC2626; }
.doc-sc-amber .doc-statcard__v { color: #D97706; }
.doc-sc-green .doc-statcard__v { color: #16A34A; }
.doc-statcard__l { font-size: 10px; color: var(--gray-400); font-weight: 500; margin-top: 3px; text-transform: uppercase; letter-spacing: 0.04em; }
.doc-rpt-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.doc-riskbars { display: flex; flex-direction: column; gap: 8px; }
.doc-riskbar { display: flex; align-items: center; gap: 10px; }
.doc-riskbar__lbl { width: 60px; font-size: 12px; font-weight: 600; color: var(--navy-800); }
.doc-riskbar__track { flex: 1; background: #F4F5F7; border-radius: 2px; height: 20px; overflow: hidden; border: 1px solid var(--gray-200); }
.doc-riskbar__fill { display: flex; align-items: center; height: 100%; padding-left: 8px; font-size: 11px; font-weight: 700; color: #fff; font-style: normal; border-radius: 2px; }
.doc-rb-low { background: #16A34A; }
.doc-rb-med { background: #D97706; }
.doc-rb-high { background: #DC2626; }
.doc-compgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.doc-comprow { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; background: #F4F5F7; border: 1px solid var(--gray-200); border-radius: 4px; }
.doc-comprow__l { font-size: 11.5px; color: var(--navy-800); }
.doc-comprow__v { font-size: 15px; font-weight: 800; font-style: normal; }
.doc-cv-green { color: #16A34A; }
.doc-cv-amber { color: #D97706; }
.doc-cv-red { color: #DC2626; }
.doc-geogrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.doc-georow { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; background: #F4F5F7; border: 1px solid var(--gray-200); border-radius: 4px; }
.doc-georow__c { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--navy-800); font-weight: 500; }
.doc-georow__c svg { color: #DC2626; }
.doc-georow__n { font-size: 13px; font-weight: 700; color: #DC2626; }
.doc-georow__n i { font-style: normal; font-size: 10.5px; color: var(--gray-400); font-weight: 500; margin-left: 2px; }
.doc-rpt-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 2px 2px; }
.doc-rpt-seal { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: var(--teal-600); }
.doc-rpt-foot__note { font-size: 10.5px; color: var(--gray-400); }

/* report sections need internal spacing when stacked */
.doc-view--report > .doc-rpt-sec { padding: 0 0 4px; }
.doc-view--report .doc-rpt-sec .doc-rpt-title { margin-top: 4px; }

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

@media (prefers-reduced-motion: reduce) { .doc-canvas { animation: none !important; } }

/* ---- Embedded variant (inside Module 10 deep-dive) ---- */
.doc-embed { margin: 0 0 20px; }
.doc-embed .doc-switcher { margin-top: 0; }
.deep-dive__reporting { width: 100%; }
.deep-dive__reporting-lead { margin-bottom: 14px; }
.deep-dive__reporting-eyebrow {
  display: inline-block; font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-600); margin-bottom: 6px;
}
.deep-dive__reporting-lead p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--gray-600); max-width: 640px; }

@media (max-width: 900px) {
  .doc-frame { height: auto; min-height: 600px; }
  .doc-exec { flex-wrap: wrap; }
  .doc-exec__stat { min-width: 120px; }
  .doc-arow, .doc-rpt-2col, .doc-compgrid, .doc-geogrid { grid-template-columns: 1fr; }
  .doc-trow { grid-template-columns: 1.4fr 1.4fr 0.9fr 0.9fr; }
  .doc-trow > span:nth-child(5), .doc-trow > span:nth-child(6), .doc-trow > span:nth-child(7) { display: none; }
}

/* Inside FitScaler the frame keeps its full desktop layout at every viewport —
   the scaler handles fitting, so viewport media queries must not restructure it. */
.doc-fit .doc-frame { grid-template-columns: 60px 1fr; }
.doc-fit .doc-exec { flex-wrap: nowrap; }
.doc-fit .doc-arow { grid-template-columns: 1fr 1.4fr; }
.doc-fit .doc-rpt-2col,
.doc-fit .doc-compgrid,
.doc-fit .doc-geogrid { grid-template-columns: 1fr 1fr; }
.doc-fit .doc-trow { grid-template-columns: 1.5fr 1.7fr 1.2fr 1fr 1fr 0.8fr 1fr; }
.doc-fit .doc-trow > span:nth-child(5),
.doc-fit .doc-trow > span:nth-child(6),
.doc-fit .doc-trow > span:nth-child(7) { display: inline; }