.critical-moments {
  --cm-bg: light-dark(#f4f2eb, #0e1212);
  --cm-surface: light-dark(#fcfbf7, #151a18);
  --cm-raised: light-dark(#ebe8df, #202621);
  --cm-ink: light-dark(#292e29, #eee8da);
  --cm-muted: light-dark(#6a6c60, #aaa697);
  --cm-line: light-dark(#dcd9cd, #30362e);
  --cm-gold: light-dark(#866527, #d1ab68);
  --cm-gold-soft: light-dark(#eae0c9, #2b2a20);
  --cm-health: light-dark(#3e726a, #8dbcb1);
  --cm-damage: light-dark(#b95348, #d99086);
  --cm-heal: light-dark(#39785c, #92b99a);
  --cm-prevent: light-dark(#947020, #cbb071);
  --cm-wound: light-dark(#757979, #9a9e9e);
  --cm-wound-fill: light-dark(#d5d7d5, #444a48);
  --cm-degen: light-dark(#845a94, #bc9acb);
  --cm-shadow: light-dark(#292e2920, #00000040);
  font: 14px/1.5 'Segoe UI', system-ui, sans-serif;
  color: var(--cm-ink); background: var(--cm-bg); border-radius: 7px;
  width: 100%; overflow: clip; isolation: isolate;
}
.critical-moments * { box-sizing: border-box; }
.critical-moments [hidden] { display: none !important; }
.critical-moments button, .critical-moments select { font: inherit; color: inherit; }
.critical-moments button { appearance: none; background: transparent; border: 0; padding: 0; }
.critical-moments button:focus-visible, .critical-moments select:focus-visible, .critical-moments summary:focus-visible { outline: 2px solid var(--cm-gold); outline-offset: 3px; }
.critical-moments button:disabled { opacity: .3; }
.critical-moments .cm-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 17px; }
.critical-moments .cm-info { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--cm-muted); }
.critical-moments .cm-info svg { width: 14px; height: 14px; }
.critical-moments .cm-tabs { display: flex; align-items: center; gap: 22px; border-bottom: 1px solid var(--cm-line); margin-bottom: 20px; }
.critical-moments .cm-tab { padding: 0 0 10px; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--cm-muted); font-size: 13px; }
.critical-moments .cm-tab[aria-selected=true] { border-bottom-color: var(--cm-gold); color: var(--cm-ink); }
.critical-moments .cm-tab span { font-variant-numeric: tabular-nums; margin-left: 5px; color: var(--cm-muted); font-size: 12px; }
.critical-moments .cm-workspace { display: grid; grid-template-columns: 205px minmax(0, 1fr); gap: 23px; }
.critical-moments .cm-picker { border-right: 1px solid var(--cm-line); padding-right: 16px; }
.critical-moments .cm-list-head { display: flex; justify-content: space-between; padding: 0 9px 8px; font-size: 11px; color: var(--cm-muted); }
.critical-moments .cm-moment { display: grid; grid-template-columns: 1fr auto; gap: 3px 6px; width: 100%; text-align: left; padding: 11px 10px; border-radius: 4px; border-left: 2px solid transparent; margin-bottom: 5px; }
.critical-moments .cm-moment:hover { background: var(--cm-raised); }
.critical-moments .cm-moment[aria-current=true] { background: var(--cm-gold-soft); border-left-color: var(--cm-gold); }
.critical-moments .cm-moment time { color: var(--cm-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.critical-moments .cm-moment strong { grid-row: 2; font-size: 13px; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.critical-moments .cm-moment .cm-amount { grid-column: 2; grid-row: 2; font-size: 13px; font-variant-numeric: tabular-nums; }
.critical-moments .cm-moment .cm-guild { font-size: 11px; color: var(--cm-muted); text-align: right; }
.critical-moments .cm-detail { min-width: 0; }
.critical-moments .cm-identity { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 18px; }
.critical-moments .cm-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.critical-moments .cm-person > div { min-width: 0; }
.critical-moments .cm-profession img { width: 30px; height: 30px; object-fit: contain; }
.critical-moments .cm-profession { flex: none; }
.critical-moments .cm-skill-icon { width: 27px; height: 27px; object-fit: cover; border-radius: 3px; flex: none; }
.critical-moments .cm-skill-icon.cm-icon-small { width: 24px; height: 24px; }
.critical-moments .cm-skill-fallback { display: inline-grid; place-items: center; background: var(--cm-surface); border: 1px solid var(--cm-line); color: var(--cm-muted); font-size: 12px; }
.critical-moments .cm-skill-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.critical-moments .cm-skill-cell > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.critical-moments .cm-tooltip .cm-skill-cell { margin-top: 8px; }
.critical-moments .cm-tooltip .cm-skill-cell strong { margin: 0; }
.critical-moments .cm-tooltip .cm-event-amount { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.critical-moments .cm-tooltip { max-width: min(360px, calc(100% - 20px)); }
.critical-moments .cm-chart .cm-lane-label { fill: var(--cm-muted); font-size: 11px; }
.critical-moments .cm-profession { display: grid; place-items: center; width: 36px; height: 36px; font-family: Georgia, serif; font-size: 16px; border: 1px solid var(--cm-line); border-radius: 4px; color: var(--cm-gold); background: var(--cm-surface); }
.critical-moments h2 { font: 500 23px/1.2 'Alegreya', Georgia, serif; margin: 0 0 3px; }
.critical-moments .cm-person-meta { font-size: 12px; color: var(--cm-muted); display: flex; gap: 6px; flex-wrap: wrap; }
.critical-moments .cm-outcome { color: var(--cm-ink); }
.critical-moments .cm-stepper { display: flex; gap: 7px; align-items: center; color: var(--cm-muted); font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.critical-moments .cm-stepper button { display: grid; place-items: center; min-width: 29px; height: 29px; border: 1px solid var(--cm-line); border-radius: 3px; }
.critical-moments .cm-stepper svg { width: 14px; height: 14px; }
.critical-moments .cm-stats { display: flex; gap: 30px; padding: 0 0 18px; }
.critical-moments .cm-stat { min-width: 0; }
.critical-moments .cm-stat dt { font-size: 12px; color: var(--cm-muted); display: flex; align-items: center; gap: 6px; }
.critical-moments .cm-stat dd { font-size: 23px; font-variant-numeric: tabular-nums; line-height: 1.3; margin: 3px 0 0; font-weight: 500; }
.critical-moments dl { margin: 0; }
.critical-moments .cm-swatch { display: inline-block; width: 7px; height: 7px; border-radius: 2px; flex: none; }
.critical-moments [data-tone=damage] { --cm-tone: var(--cm-damage); }
.critical-moments [data-tone=heal] { --cm-tone: var(--cm-heal); }
.critical-moments [data-tone=prevent] { --cm-tone: var(--cm-prevent); }
.critical-moments .cm-swatch { background: var(--cm-tone); }
.critical-moments .cm-plot { position: relative; padding: 16px 14px 8px; background: var(--cm-surface); border: 1px solid var(--cm-line); border-radius: 5px; }
.critical-moments .cm-plot-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 2px 6px; }
.critical-moments .cm-plot-title { font-weight: 500; font-size: 13px; }
.critical-moments .cm-plot-period { font-size: 11px; color: var(--cm-muted); }
.critical-moments .cm-condition-key { display: flex; align-items: center; gap: 6px; color: var(--cm-wound); font-size: 11px; }
.critical-moments .cm-condition-key img { width: 16px; height: 16px; }
.critical-moments .cm-chart { display: block; width: 100%; overflow: visible; }
.critical-moments .cm-chart text { fill: var(--cm-muted); font-family: 'Segoe UI', system-ui, sans-serif; font-size: 11px; }
.critical-moments .cm-chart .cm-guide-grid { stroke: var(--cm-line); stroke-width: 1; }
.critical-moments .cm-chart .cm-time-grid { stroke: var(--cm-line); stroke-width: 1; stroke-dasharray: 2 4; opacity: .7; }
.critical-moments .cm-chart .cm-event-stem { stroke: var(--cm-muted); stroke-width: 1; opacity: .16; }
.critical-moments .cm-chart .cm-wound-zone { fill: var(--cm-wound-fill); }
.critical-moments .cm-chart .cm-wound-cap { stroke: var(--cm-wound); stroke-width: 1; fill: none; }
.critical-moments .cm-chart .cm-wound-label { fill: var(--cm-ink); font-size: 11px; }
.critical-moments .cm-chart .cm-degen-band { fill: var(--cm-degen); fill-opacity: .16; stroke: var(--cm-degen); stroke-width: 1; }
.critical-moments .cm-chart .cm-degen-text { fill: var(--cm-degen); font-size: 11px; }
.critical-moments .cm-chart .cm-time-label { fill: var(--cm-ink); }
.critical-moments .cm-chart .cm-health-path { stroke: var(--cm-health); stroke-width: 2; fill: none; stroke-linejoin: round; }
.critical-moments .cm-chart .cm-health-area { fill: var(--cm-health); opacity: .075; }
.critical-moments .cm-chart .cm-health-dot { fill: var(--cm-health); }
.critical-moments .cm-chart .cm-end-value { fill: var(--cm-ink); font-weight: 500; }
.critical-moments .cm-chart .cm-cursor { stroke: var(--cm-gold); stroke-width: 1; stroke-dasharray: 3 3; }
.critical-moments .cm-tooltip { position: absolute; z-index: 5; pointer-events: none; border: 1px solid var(--cm-line); border-radius: 5px; background: var(--cm-raised); color: var(--cm-ink); box-shadow: 0 7px 20px var(--cm-shadow); padding: 10px 12px; min-width: 150px; max-width: calc(100% - 20px); font-size: 12px; }
.critical-moments .cm-tooltip strong { font-weight: 500; display: block; margin: 3px 0; }
.critical-moments .cm-tooltip small { color: var(--cm-muted); font-size: 11px; }
.critical-moments .cm-tooltip-row { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.critical-moments .cm-hover-detail { min-height: 28px; padding: 7px 2px 0; display: flex; justify-content: space-between; gap: 8px; color: var(--cm-muted); font-size: 11px; }
.critical-moments .cm-hover-detail b { font-weight: 500; color: var(--cm-ink); }
.critical-moments .cm-footer { margin-top: 15px; border-top: 1px solid var(--cm-line); }
.critical-moments .cm-footer summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; list-style: none; font-size: 12px; color: var(--cm-muted); }
.critical-moments .cm-footer summary::-webkit-details-marker { display: none; }
.critical-moments .cm-footer summary::after { content: '+'; font-size: 18px; line-height: 1; }
.critical-moments .cm-footer[open] summary::after { content: '−'; }
.critical-moments .cm-evidence-tabs { display: flex; gap: 16px; margin: 0 0 12px; font-size: 12px; }
.critical-moments .cm-evidence-tabs button { color: var(--cm-muted); padding-bottom: 5px; border-bottom: 1px solid transparent; }
.critical-moments .cm-source-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.critical-moments .cm-source-grid h3 { margin: 0 0 8px; font-size: 12px; color: var(--cm-muted); font-weight: 500; }
.critical-moments .cm-source { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; padding: 6px 0; }
.critical-moments .cm-source small { display: block; font-size: 11px; color: var(--cm-muted); }
.critical-moments .cm-source b { font-weight: 500; font-variant-numeric: tabular-nums; }
.critical-moments .cm-log { width: 100%; border-collapse: collapse; font-size: 12px; }
.critical-moments .cm-log th { text-align: left; color: var(--cm-muted); font-weight: 400; font-size: 11px; padding: 5px 0; }
.critical-moments .cm-log td { border-top: 1px solid var(--cm-line); padding: 7px 5px 7px 0; }
.critical-moments .cm-log th:last-child, .critical-moments .cm-log td:last-child { text-align: right; padding-right: 0; }
.critical-moments .cm-log time { font-variant-numeric: tabular-nums; color: var(--cm-muted); }
.critical-moments .cm-mobile-picker { display: none; width: 100%; margin-bottom: 18px; border: 1px solid var(--cm-line); border-radius: 4px; background: var(--cm-surface); padding: 10px; }
@media (max-width: 750px) {
  .critical-moments .cm-workspace { grid-template-columns: 155px minmax(0, 1fr); gap: 16px; }
  .critical-moments .cm-picker { padding-right: 10px; }
  .critical-moments .cm-stats { gap: 20px; }
  .critical-moments .cm-source-grid { gap: 16px; }
}
@media (max-width: 580px) {
  .critical-moments .cm-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .critical-moments .cm-tabs { margin-bottom: 14px; }
  .critical-moments .cm-workspace { display: block; }
  .critical-moments .cm-picker { display: none; }
  .critical-moments .cm-mobile-picker { display: block; }
  .critical-moments .cm-stats { justify-content: space-between; gap: 12px; }
  .critical-moments .cm-stat dd { font-size: 22px; }
  .critical-moments .cm-stat dt { font-size: 11px; }
  .critical-moments .cm-plot { padding: 13px 7px 8px; }
  .critical-moments .cm-person-meta { font-size: 11px; }
  .critical-moments .cm-profession { width: 30px; height: 34px; }
  .critical-moments h2 { font-size: 22px; }
  .critical-moments .cm-stepper { gap: 4px; }
  .critical-moments .cm-stepper .cm-position { display: none; }
  .critical-moments .cm-hover-detail { flex-direction: column; gap: 1px; padding: 5px 5px 0; }
  .critical-moments .cm-source-grid { grid-template-columns: 1fr; gap: 14px; }
}
@media (pointer: coarse) {
  .critical-moments .cm-stepper button { min-width: 44px; height: 44px; }
  .critical-moments .cm-tab, .critical-moments .cm-evidence-tabs button { min-height: 44px; }
  .critical-moments select { font-size: 16px; }
}

.report-shell .critical-moments { background:transparent; overflow:visible; font:inherit; }
.critical-moments .cm-heading h2 { margin:0; font:500 28px/1.2 var(--font-display,Georgia,serif); }
.critical-moments .cm-person h3 { margin:0 0 3px; font:500 23px/1.2 var(--font-display,Georgia,serif); }
.critical-moments .cm-profession { display:flex; width:auto; border:0; background:transparent; }
.critical-moments .cm-profession img { width:28px; height:28px; }
.critical-moments .cm-health-status { font-size:12px; color:var(--cm-muted); padding:6px 0; }
.critical-moments .cm-health-status button { margin-left:8px; text-decoration:underline; }
.critical-moments .cm-replay { margin-top:8px; font-size:12px; color:var(--cm-muted); }
.critical-moments button,.critical-moments summary { cursor:pointer; }
.critical-moments .cm-evidence-tabs button[aria-selected=true] { color:var(--cm-ink); border-bottom-color:var(--cm-gold); }
.critical-moments .cm-empty { color:var(--cm-muted); font-size:13px; }
@media (prefers-color-scheme:dark) { .critical-moments {color-scheme:dark;} }