/* Clock / Time uses the same intrinsic-height layout in Canvas and on the
 * frontend. The JS runtime positions content inside the existing SDK shell;
 * it does not move the shell using vertical auto margins. */
.bg-widget-bg_pro_clock {
  box-sizing: border-box;
}

.bg-pro-clock {
  box-sizing: border-box;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  /* The page wrapper may use centered typography. A new Clock defaults to
   * left alignment; SDK target styles for explicit responsive choices win. */
  text-align: left;
  flex-wrap: wrap;
  min-width: 0;
  width: 100%;
  height: auto;
  min-height: 0;
  flex: 0 0 auto;
  margin-block: 0 !important;
}

.bg-widget-bg_pro_clock > .bg-pro-clock,
.bg-widget-bg_pro_clock .bg-pro-clock.is-editor-preview {
  height: auto !important;
  min-height: 0 !important;
}

/* Keep the inner Clock margin-neutral. Vertical positioning belongs to the
 * environment's actual widget flex item and is synchronized by clock-time.js. */
.bg-pro-clock[data-vertical-align="default"],
.bg-pro-clock[data-vertical-align="top"],
.bg-pro-clock[data-vertical-align="center"],
.bg-pro-clock[data-vertical-align="bottom"] {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Inline Clock content is one flowing typographic line. The user-facing
 * Element Gap remains horizontal spacing between sibling elements, but must
 * not add a second vertical spacing system when the flex row wraps on narrow
 * breakpoints. Wrapped rows therefore use Line Height / Leading exclusively.
 * This also keeps a date that wraps internally on the same vertical rhythm as
 * the preceding time row. */
.bg-document .bg-widget-bg_pro_clock[data-bg-id] .bg-pro-clock[data-bg-pro-clock][data-bg-sdk-target="clock"][data-layout="inline"],
.bg-widget-bg_pro_clock[data-bg-id] .bg-pro-clock.is-editor-preview[data-bg-pro-clock][data-bg-sdk-target="clock"][data-layout="inline"] {
  row-gap: 0 !important;
}

.bg-pro-clock[data-layout="stacked"] {
  flex-direction: column;
  align-items: stretch;
}

.bg-pro-clock[data-layout="stacked"] > * {
  width: 100%;
}

.bg-pro-clock__time-row,
.bg-pro-clock__time {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: nowrap;
  min-width: 0;
}


.bg-pro-clock__prefix,
.bg-pro-clock__hours,
.bg-pro-clock__separator,
.bg-pro-clock__minutes,
.bg-pro-clock__seconds,
.bg-pro-clock__ampm,
.bg-pro-clock__date,
.bg-pro-clock__timezone,
.bg-pro-clock__suffix {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Migration guard for documents created before the simplified typography
 * contract. Deprecated per-part family/leading/kerning/transform/alignment
 * values are neutralized and will be removed by the current SDK sanitizer on save. */
.bg-widget-bg_pro_clock[data-bg-id] .bg-pro-clock[data-bg-pro-clock] [data-bg-sdk-target="prefix"],
.bg-widget-bg_pro_clock[data-bg-id] .bg-pro-clock[data-bg-pro-clock] [data-bg-sdk-target="hours"],
.bg-widget-bg_pro_clock[data-bg-id] .bg-pro-clock[data-bg-pro-clock] [data-bg-sdk-target="separator"],
.bg-widget-bg_pro_clock[data-bg-id] .bg-pro-clock[data-bg-pro-clock] [data-bg-sdk-target="minutes"],
.bg-widget-bg_pro_clock[data-bg-id] .bg-pro-clock[data-bg-pro-clock] [data-bg-sdk-target="seconds"],
.bg-widget-bg_pro_clock[data-bg-id] .bg-pro-clock[data-bg-pro-clock] [data-bg-sdk-target="ampm"],
.bg-widget-bg_pro_clock[data-bg-id] .bg-pro-clock[data-bg-pro-clock] [data-bg-sdk-target="date"],
.bg-widget-bg_pro_clock[data-bg-id] .bg-pro-clock[data-bg-pro-clock] [data-bg-sdk-target="timezone"],
.bg-widget-bg_pro_clock[data-bg-id] .bg-pro-clock[data-bg-pro-clock] [data-bg-sdk-target="suffix"] {
  font-family: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  text-align: inherit !important;
}

/* Optional styling layers are target-gated in markup. Disabled layers have no
 * SDK target; enabled layers use the SDK target plus an inheritance opt-out. */

.bg-pro-clock__ampm {
  margin-inline-start: 0.35em;
}