/* Small, optional ornaments. Native controls, content and layout own their states. */
:root { --sm-loop: 6.4s; }
[data-sm-theme="light"] { --sm-line: #b0ced4; --sm-signal: #218b97; --sm-wash: rgb(18 128 146 / .07); }
[data-sm-theme="dark"] { --sm-line: #3d6575; --sm-signal: #83e6dd; --sm-wash: rgb(131 230 221 / .075); }
.sm-positioned { position: relative; }
.sm-decoration, .sm-rail { position: absolute; pointer-events: none; z-index: 1; display: block; }
.sm-group, .sm-handoff { inset: 0 0 auto; block-size: 2px; overflow: hidden; }
.sm-group::after, .sm-handoff::after {
  content: ""; display: block; inline-size: 25%; block-size: 100%; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--sm-signal), transparent);
  transform: translateX(-100%);
}
.sm-group[data-sm-axis="vertical"] { inset: 0 auto 0 0; inline-size: 2px; block-size: auto; }
.sm-group[data-sm-axis="vertical"]::after {
  inline-size: 100%; block-size: 25%; transform: translateY(-100%);
  background: linear-gradient(180deg, transparent, var(--sm-signal), transparent);
}
.sm-handoff { block-size: 1px; }
.sm-handoff[data-sm-direction="none"]::after { margin-inline: auto; transform: none; }
.sm-linked, .sm-selected { inset: 0; border-block-start: 2px solid transparent; }
.sm-selected { inset-block-end: auto; }
.sm-selected[data-sm-current],
:where([data-sm-selection]:focus-visible, [data-sm-selection] > summary:focus-visible) > .sm-selected,
:has(> .sm-linked):focus-within > .sm-linked { border-block-start-color: var(--sm-signal); }
[data-sm-align] :focus-visible { outline-offset: 3px; }
.alm2-lifecycle[data-sm-align]::after { animation: none; }
.srr-delivery-strip article:focus-within .srr-delivery-reading[data-sm-align]::before { width: 60px; }
.ab2-path[data-sm-align="path"] li::before {
  background-image: linear-gradient(90deg, transparent, var(--sm-signal), transparent);
  animation-duration: var(--sm-loop);
}
.sm-frame { inset: 0; color: var(--sm-line); }
.sm-frame::before, .sm-frame::after { content: ""; position: absolute; inline-size: 13px; block-size: 13px; }
.sm-frame::before { inset: 0 auto auto 0; border-block-start: 1px solid; border-inline-start: 1px solid; }
.sm-frame::after { inset: auto 0 0 auto; border-block-end: 1px solid; border-inline-end: 1px solid; }
.sm-rail { overflow: visible; }
.sm-rail[hidden] { display: none; }
.sm-rail-base, .sm-rail-signal, .sm-field-line, .sm-field-signal { fill: none; vector-effect: non-scaling-stroke; }
.sm-rail-base, .sm-field-line { stroke: var(--sm-line); stroke-width: 1; }
.sm-rail-signal, .sm-field-signal {
  stroke: var(--sm-signal); stroke-width: 1.65; stroke-linecap: round;
  stroke-dasharray: 19 134; stroke-dashoffset: 19; opacity: 0;
}
.sm-field-host { isolation: isolate; }
.sm-field {
  inset: 0; z-index: -1; overflow: hidden;
  background-image: linear-gradient(var(--sm-wash) 1px, transparent 1px),
    linear-gradient(90deg, var(--sm-wash) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(90deg, black, rgb(0 0 0 / .32) 37%, rgb(0 0 0 / .32) 63%, black);
}
.sm-field-paths { display: block; inline-size: 100%; block-size: 100%; }
.sm-field-line { opacity: .58; }
@media (hover: hover) {
  :has(> .sm-linked):hover > .sm-linked { border-block-start-color: var(--sm-signal); }
}
@media (max-width: 640px) {
  .sm-field { background-size: 52px 52px; opacity: .64; }
}
@media (prefers-reduced-motion: no-preference) {
  .sm-linked, .sm-selected { transition: border-color 210ms ease; }
  .sm-group::after, .sm-handoff::after { animation: sm-edge 8.8s ease-in-out infinite paused; }
  .sm-group[data-sm-axis="vertical"]::after { animation-name: sm-edge-vertical; }
  .sm-handoff[data-sm-direction="none"]::after { animation-name: sm-arrival; }
  [data-sm-handoff-line] { animation: sm-geometry 8.8s ease-in-out infinite paused; }
  .sm-rail-loop .sm-rail-signal, .sm-field-signal { animation: sm-trace var(--sm-loop) linear infinite paused; }
  .sm-rail-handoff .sm-rail-signal { animation: sm-trace 7.8s linear infinite paused; }
  .sm-group.sm-active::after, .sm-handoff.sm-active::after, [data-sm-handoff-line].sm-active,
  .sm-rail.sm-active .sm-rail-signal, .sm-field.sm-active .sm-field-signal { animation-play-state: running; }
}
@keyframes sm-edge {
  0% { transform: translateX(-100%); opacity: 0; }
  8%, 22% { opacity: .78; }
  33%, 100% { transform: translateX(400%); opacity: 0; }
}
@keyframes sm-edge-vertical {
  0% { transform: translateY(-100%); opacity: 0; }
  8%, 22% { opacity: .78; }
  33%, 100% { transform: translateY(400%); opacity: 0; }
}
@keyframes sm-arrival { 0%, 34%, 100% { opacity: 0; } 16% { opacity: .65; } }
@keyframes sm-geometry { 0%, 34%, 100% { filter: none; } 16% { filter: brightness(1.32); } }
@keyframes sm-trace {
  0% { stroke-dashoffset: 19; opacity: 0; }
  13%, 43% { opacity: .88; }
  61%, 100% { stroke-dashoffset: -102; opacity: 0; }
}
