/* V2 shares V1's header, type, number motion and expansion keyframes. */
.design-switch .layout-options { margin-top: 6px; border-top: 1px solid #ffffff20; padding-top: 6px; }
body[data-layout='v2'] .phase-briefing {
  --module-width: calc(var(--ring-size) * 574 / 600);
  top: max(76px, calc(50% - var(--module-width) / 2 - 24px));
  bottom: auto;
  width: var(--module-width);
  height: var(--module-width);
}
body[data-layout='v2'] .briefing-phase-title {
  position: absolute; bottom: 100%; left: 0; right: 0; margin: 0 0 18px;
}
body[data-layout='v2'] .briefing-card {
  flex: none; width: 100%; height: 100%; min-height: 0;
  border-radius: 0; box-shadow: none; pointer-events: auto;
}
body[data-layout='v2'] .briefing-header,
body[data-layout='v2'] .briefing-body { border: 0; border-radius: 0; box-shadow: none; }
body[data-layout='v2'] .briefing-header { --number-left: 32%; }
body[data-layout='v2'] .briefing-heading { padding-left: calc(32% + 72px); padding-right: 10%; }
body[data-layout='v2'] .briefing-body { padding: 28px 18%; box-sizing: border-box; overflow: auto; }
body[data-design='performance'] .briefing-number { border-radius: 3px; }
body[data-design='physio'] .briefing-number { border-radius: 16.72%; }
body[data-design='power'] .briefing-number {
  border-color: transparent; border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Cpath d='M15.5 1H36.5L51 15.5V36.5L36.5 51H15.5L1 36.5V15.5Z' fill='none' stroke='%23c8b8c6' stroke-opacity='.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 600px) {
  body[data-layout='v2'] .briefing-header { --number-left: 23%; }
  body[data-layout='v2'] .briefing-heading { padding-left: calc(23% + 64px); padding-right: 6%; }
}
/* Frames live inside their glass surfaces and inherit the existing reveal. */
.phase-surface-frame { display: none; }
body[data-layout='v2'] .phase-surface-frame {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%;
  fill: none; stroke: var(--design-border); stroke-width: 2;
  pointer-events: none; overflow: hidden;
}
body[data-layout='v2'] .header-divider { stroke-width: 1; }
body[data-layout='v2'] .header-frame { animation: surface-frame-arrive var(--motion-header) var(--motion-headerDelay) both; }
body[data-layout='v2'] .briefing-body::before {
  content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  box-shadow: var(--header-shadow); pointer-events: none;
}
@keyframes surface-frame-arrive { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  body[data-layout='v2'] .header-frame { animation: none; }
}