.t3-integrated .relay-chronogram { --chrono-active: #b4232d; --chrono-on: #105b55; --chrono-idle: #5f6368; }
.t3-integrated .relay-chronogram [hidden] { display: none; }
.t3-integrated .relay-chronogram__intro { margin: 0; color: var(--text-secondary); }
.t3-integrated .relay-chronogram__visual {
  max-width: 1060px; margin: var(--space-4) auto; padding: var(--space-4) var(--space-3);
  border: 1px solid #c2d2e1; border-radius: var(--radius);
  background: radial-gradient(ellipse at 42% 35%, #ffffffdc, #ffffff00 72%),
    linear-gradient(#0060a108 1px, transparent 1px), linear-gradient(90deg, #0060a108 1px, transparent 1px),
    linear-gradient(145deg, #f5faff, #e0ebf4);
  background-size: auto, 24px 24px, 24px 24px, auto;
  box-shadow: inset 0 2px 0 #fff, inset 0 -3px 0 #c5d5e4, 0 10px 24px #16395612;
}
.t3-integrated .relay-chronogram__drawing svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y pinch-zoom; }
.t3-integrated .relay-chronogram__trace,
.t3-integrated .relay-chronogram__depth,
.t3-integrated .relay-chronogram__shine,
.t3-integrated .relay-chronogram__fill,
.t3-integrated .relay-chronogram__flow { fill: none; stroke-linejoin: round; stroke-linecap: butt; pointer-events: none; }
.t3-integrated .relay-chronogram__depth { stroke: #163956; stroke-width: 15; stroke-opacity: .16; transform: translateY(4px); }
.t3-integrated .relay-chronogram__trace { stroke: #344c61; stroke-width: 13; }
.t3-integrated .relay-chronogram__fill { stroke: url(#chrono-tube-idle); stroke-width: 10; }
.t3-integrated .relay-chronogram__shine { stroke: white; stroke-width: 1.5; stroke-opacity: .65; transform: translateY(-3px); }
.t3-integrated .relay-chronogram__flow { stroke: white; stroke-width: 2.5; stroke-opacity: .65; stroke-dasharray: 10 50; animation: chrono-flow 2.4s linear infinite; animation-play-state: paused; }
.t3-integrated .relay-chronogram__signal.is-active .relay-chronogram__trace { stroke: #7f1727; }
.t3-integrated .relay-chronogram__signal.is-active .relay-chronogram__fill { stroke: url(#chrono-tube-active); animation: chrono-pulse 3.2s ease-in-out infinite; animation-play-state: paused; }
.t3-integrated .relay-chronogram.is-playing .relay-chronogram__flow,
.t3-integrated .relay-chronogram.is-playing .is-active .relay-chronogram__fill,
.t3-integrated .relay-chronogram.is-playing .is-active .relay-chronogram__label { animation-play-state: running; }
.t3-integrated .relay-chronogram__label { font-size: 22px; font-weight: 600; fill: #1a1a1a; font-family: inherit; }
.t3-integrated .relay-chronogram__signal.is-active .relay-chronogram__label { fill: var(--chrono-active); animation: chrono-label-pulse 3.2s ease-in-out infinite; animation-play-state: paused; }
.t3-integrated .relay-chronogram__badge rect { fill: url(#chrono-badge-off); stroke: #9db2c4; stroke-width: 1; }
.t3-integrated .relay-chronogram__badge text { fill: #454b52; font-size: 19px; font-weight: 700; font-family: inherit; }
.t3-integrated .relay-chronogram__badge.is-active rect { fill: url(#chrono-badge-on); stroke: #0b4944; }
.t3-integrated .relay-chronogram__badge.is-active text { fill: white; }
.t3-integrated .relay-chronogram__duration path { stroke: #72777b; stroke-width: 1; fill: none; }
.t3-integrated .relay-chronogram__duration text { fill: #1a1a1a; font-size: 23px; font-weight: 700; font-family: inherit; font-variant-numeric: tabular-nums; }
.t3-integrated .relay-chronogram__duration text.is-timing { fill: var(--chrono-active); }
.t3-integrated .relay-chronogram__duration { color: #1a1a1a; }
.t3-integrated .relay-chronogram__cursor > path { stroke: var(--brand); stroke-width: 1.5; stroke-dasharray: 4 4; }
.t3-integrated .relay-chronogram__dot { fill: url(#chrono-dot-idle); stroke: white; stroke-width: 2; vector-effect: non-scaling-stroke; }
.t3-integrated .relay-chronogram__dot.is-active { fill: url(#chrono-dot-active); }
.t3-integrated .relay-chronogram__hit { fill: transparent; pointer-events: all; cursor: grab; touch-action: none; }
.t3-integrated .relay-chronogram__drawing svg.is-dragging,
.t3-integrated .is-dragging .relay-chronogram__hit { cursor: grabbing; }
/* Phase changes remain announced without a second visual status panel. */
.t3-integrated .relay-chronogram__explanation,
.t3-integrated .relay-chronogram__keyboard-help { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.t3-integrated .relay-chronogram__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block: var(--space-3) var(--space-4); }
.t3-integrated .relay-chronogram__actions button { min-height: 44px; min-width: 160px; }
.t3-integrated .relay-chronogram__actions .btn--primary { color: var(--surface); background: var(--brand); border-color: var(--brand); }
.t3-integrated .relay-chronogram__actions .btn--primary:hover { background: var(--brand-dark); }
.t3-integrated .relay-chronogram :focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
.t3-integrated .relay-chronogram__cursor:focus { outline: none; }
.t3-integrated .relay-chronogram__cursor:focus-visible .relay-chronogram__dot { stroke: var(--brand); stroke-width: 4; }
@keyframes chrono-flow { to { stroke-dashoffset: -60; } }
@keyframes chrono-pulse { 0%,100% { stroke-opacity: 1; } 50% { stroke-opacity: .78; } }
@keyframes chrono-label-pulse { 0%,100% { fill: #b4232d; } 50% { fill: #7b242c; } }
@media (max-width: 600px) {
  .t3-integrated .relay-chronogram { padding: var(--space-4); }
  .t3-integrated .relay-chronogram__visual { padding: var(--space-3) 0; }
  .t3-integrated .relay-chronogram__actions button { flex: 1 1 auto; }
  .t3-integrated .relay-chronogram__label { font-size: 36px; }
  .t3-integrated .relay-chronogram__badge { transform: translate(-96px, 25px); }
  .t3-integrated .relay-chronogram__badge rect { width: 102px; height: 40px; }
  .t3-integrated .relay-chronogram__badge text { font-size: 32px; transform: translate(14px, 6px); }
  .t3-integrated .relay-chronogram__duration text { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .t3-integrated .relay-chronogram__flow,
  .t3-integrated .relay-chronogram__signal.is-active .relay-chronogram__fill,
  .t3-integrated .relay-chronogram__signal.is-active .relay-chronogram__label { animation: none; }
}