/* Profile slider — full-page slide-in panel anchored to the LEFT
 * edge of the viewport.  Triggered by the navbar avatar; closed
 * by the X, the Escape key, or a tap on the dim backdrop.
 *
 * Visual language: brand navy gradient + radial teal aurora glow
 * (matches the .myday-hero "command surface" pattern documented
 * in CLAUDE.md "Hero gradient + glass pill — signature surfaces").
 * In light mode the panel ships an off-white slate-50 base so it
 * still reads as a "system sheet" against the page beneath.
 */

.profile-slider {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  visibility: hidden;
  /* Delay hiding until the panel finishes sliding back to the left.
   * Without this, removing .is-open re-applies visibility: hidden
   * instantly and the slide-out animation never plays — the panel
   * just disappears (maintainer May 16: "X button should close
   * sliding back to left"). */
  transition: visibility 0s linear 260ms;
}
.profile-slider.is-open {
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}

.profile-slider-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.55);  /* slate-950 / 55% */
  opacity: 0;
  transition: opacity 220ms ease;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}
.profile-slider.is-open .profile-slider-backdrop { opacity: 1; }

/* The panel.  Slide in from +100% → 0 on the X axis (right → left).
 * Full-page width on phone (the slider IS the page); capped at
 * navbar width on larger screens so admin doesn't lose context on
 * a desktop. */
.profile-slider-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 100%;
  max-width: 100%;
  background:
    radial-gradient(120% 80% at 70% 0%,
                    rgba(20, 184, 166, 0.20) 0%,
                    rgba(20, 184, 166, 0.00) 55%),
    linear-gradient(180deg, #0b1220 0%, #0f172a 100%);
  color: #e2e8f0;
  transform: translateX(100%);
  transition: transform 260ms cubic-bezier(0.32, 0.72, 0.18, 1.00);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-tap-highlight-color: transparent;
  /* env() can resolve to 0 on iOS Safari when the home indicator
   * is absent (landscape, externally-rendered).  max() guarantees
   * the action buttons clear the gesture bar instead of getting
   * blocked behind it (maintainer May 16: "Blocking"). */
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 28px);
}
.profile-slider.is-open .profile-slider-panel {
  transform: translateX(0);
}

@media (min-width: 640px) {
  .profile-slider-panel {
    max-width: 28rem;
    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.40);
  }
}

/* Light mode override — slate-50 base, very subtle teal hint. */
html:not(.dark) .profile-slider-panel {
  background:
    radial-gradient(120% 80% at 70% 0%,
                    rgba(20, 184, 166, 0.07) 0%,
                    rgba(20, 184, 166, 0.00) 55%),
    linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  color: #0f172a;
}

/* ── Header ───────────────────────────────────────────────────── */
.profile-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Minimum top padding — the iOS status bar already gives a
   * comfortable inset; piling 16 px on top of it pushes the X
   * way down the screen (maintainer May 16: "minimum padding
   * and margin from top").  Clamp safe-area to 6 px floor. */
  padding: 6px 16px 0;
  padding-top: max(env(safe-area-inset-top, 0px), 6px);
}
.profile-slider-close {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms ease;
}
.profile-slider-close:hover { background: rgba(255, 255, 255, 0.12); }
.profile-slider-close svg { width: 20px; height: 20px; }

/* Sign-out pill — icon + "Log out" label.  44 px min-height so
 * the tap target matches the X across the header (maintainer
 * May 16: "logout text next to button"). */
.profile-slider-signout-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background 120ms ease;
}
.profile-slider-signout-icon:hover { background: rgba(255, 255, 255, 0.12); }
.profile-slider-signout-icon svg { width: 20px; height: 20px; }
.profile-slider-signout-label { white-space: nowrap; }

/* Shared light-mode pill chrome for the header sign-out + X. */
html:not(.dark) .profile-slider-signout-icon,
html:not(.dark) .profile-slider-close { background: rgba(15, 23, 42, 0.06); }
html:not(.dark) .profile-slider-signout-icon:hover,
html:not(.dark) .profile-slider-close:hover { background: rgba(15, 23, 42, 0.12); }

/* Locked variant — replaces the Log-out pill while a live
 * incident is active.  Padlock glyph + a brief reason on tablet+
 * (hidden on phone where the navbar is tight).  Not interactive:
 * cursor: default, no hover state.  Maintainer May 17. */
.profile-slider-signout-locked {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px 0 10px;
  border-radius: 999px;
  background: rgba(244, 63, 94, 0.14);
  color: rgb(254, 205, 211);
  font-size: 13px;
  font-weight: 500;
  cursor: default;
}
html:not(.dark) .profile-slider-signout-locked {
  background: rgba(244, 63, 94, 0.10);
  color: rgb(190, 18, 60);
}
.profile-slider-signout-locked svg { width: 18px; height: 18px; }
.profile-slider-signout-locked-label {
  /* Hide the reason on narrow phones — the lock glyph carries
   * the meaning on its own; the full sentence appears on tablet+
   * where the header has room for it. */
  display: none;
  white-space: nowrap;
}
@media (min-width: 480px) {
  .profile-slider-signout-locked-label { display: inline; }
}

.profile-slider-help {
  font-size: 15px;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
  opacity: 0.78;
  padding: 10px;
}

/* ── Identity ─────────────────────────────────────────────────── */
.profile-slider-identity {
  text-align: center;
  /* Tightened top inset — sits right under the header X (May 16). */
  padding: 8px 24px 12px;
}
.profile-slider-avatar {
  width: 96px;
  height: 96px;
  border-radius: 999px;
  object-fit: cover;
  display: inline-block;
  background: rgba(255, 255, 255, 0.10);
}
.profile-slider-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: inherit;
}
.profile-slider-name {
  margin: 12px 0 4px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.profile-slider-subtitle {
  margin: 0;
  font-size: 14px;
  opacity: 0.65;
}

/* ── Card primitive ───────────────────────────────────────────── */
.profile-slider-card {
  margin: 12px 16px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
html:not(.dark) .profile-slider-card {
  background: rgba(255, 255, 255, 0.80);
  border-color: rgba(15, 23, 42, 0.08);
}
.profile-slider-card-title {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  opacity: 0.65;
}

/* ── Scan code card ───────────────────────────────────────────── */
.profile-slider-code-chips {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.profile-slider-code-chips::-webkit-scrollbar { display: none; }
.profile-slider-code-chip {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: transparent;
  color: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.profile-slider-code-chip:hover {
  background: rgba(255, 255, 255, 0.06);
}
.profile-slider-code-chip.is-active {
  background: rgba(20, 184, 166, 0.20);
  border-color: rgba(20, 184, 166, 0.45);
  color: #5eead4;
}
html:not(.dark) .profile-slider-code-chip.is-active {
  background: rgba(20, 184, 166, 0.10);
  color: #0d9488;
  border-color: rgba(13, 148, 136, 0.30);
}

/* QR + Code 128 form a single continuous "ID pass" card —
 * Apple Wallet vibe — instead of two stacked white blocks with
 * a gap between them.  Maintainer May 17: "this look with cards
 * better".  The pass has a soft shadow so it lifts off the
 * glass parent + reads as a physical card; the divider hairline
 * between the two code surfaces signals "two scannable formats
 * on one pass". */
.profile-slider-code-qr {
  background: #ffffff;
  border-radius: 14px 14px 0 0;
  padding: 14px 14px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.22);
}
.profile-slider-code-qr svg {
  width: 100%;
  height: auto;
  max-width: 240px;
  display: block;
}
/* QR dark modules → brand navy (was the qrcode-lib default
 * black).  Maintainer: "inside the qr code its not solid navy".
 * Mirror of the .myday-id-sheet-qr rule. */
.profile-slider-code-qr svg path,
.profile-slider-code-qr svg rect:not([fill="none"]):not([fill="white"]):not([fill="#ffffff"]):not([fill="#fff"]) {
  fill: #0A1628;
}
.profile-slider-code-1d {
  background: #ffffff;
  border-radius: 0 0 14px 14px;
  padding: 12px 14px 14px;
  margin-top: 0;
  margin-bottom: 12px;
  border-top: 1px dashed rgba(15, 23, 42, 0.12);
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.22);
}
.profile-slider-code-1d svg {
  width: 100%;
  height: auto;
  max-height: 56px;
  display: block;
}
/* The two halves share the shadow + want to read as one card, so
 * collapse the visual seam by negating the top half's shadow
 * along the join edge. */
.profile-slider-code-qr  { clip-path: inset(-20px -20px 0 -20px); }
.profile-slider-code-1d  { clip-path: inset(0 -20px -20px -20px); }

.profile-slider-code-token {
  margin: 0 0 2px;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  opacity: 0.62;
}
.profile-slider-code-hint {
  margin: 0 0 14px;
  text-align: center;
  font-size: 12px;
  opacity: 0.55;
}

.profile-slider-code-actions {
  display: flex;
  gap: 8px;
}
.profile-slider-code-actions > * { flex: 1; }
.profile-slider-code-rotate-form { display: flex; }
.profile-slider-code-rotate,
.profile-slider-code-fullscreen {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease;
}
.profile-slider-code-rotate:hover,
.profile-slider-code-fullscreen:hover {
  background: rgba(255, 255, 255, 0.10);
}
.profile-slider-code-rotate svg,
.profile-slider-code-fullscreen svg {
  width: 16px;
  height: 16px;
}
html:not(.dark) .profile-slider-code-rotate,
html:not(.dark) .profile-slider-code-fullscreen {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.08);
}
html:not(.dark) .profile-slider-code-rotate:hover,
html:not(.dark) .profile-slider-code-fullscreen:hover {
  background: rgba(15, 23, 42, 0.08);
}

/* ── Fullscreen scan mode ─────────────────────────────────────── */

/* Exit-fullscreen X.  Hidden outside fullscreen mode; floats top-
 * right of the viewport when active so the user always has a way
 * out (the regular slider X is hidden by the rule below).  Tapping
 * it returns to the regular slider, NOT closes the slider — that
 * matches iOS native scan-card UX. */
.profile-slider-fs-close {
  display: none;
  position: fixed;
  top: max(env(safe-area-inset-top, 0px), 12px);
  right: max(env(safe-area-inset-right, 0px), 12px);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.92);
  color: #0f172a;
  cursor: pointer;
  z-index: 10;
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.10);
}
.profile-slider-fs-close svg { width: 22px; height: 22px; }
.profile-slider.is-fullscreen .profile-slider-fs-close {
  display: inline-flex;
}

.profile-slider.is-fullscreen .profile-slider-panel {
  background: #ffffff;
  color: #0f172a;
}
.profile-slider.is-fullscreen .profile-slider-header,
.profile-slider.is-fullscreen .profile-slider-identity,
.profile-slider.is-fullscreen .profile-slider-list,
.profile-slider.is-fullscreen .profile-slider-footer,
.profile-slider.is-fullscreen .profile-slider-code-1d,
.profile-slider.is-fullscreen .profile-slider-code-actions,
.profile-slider.is-fullscreen .profile-slider-code-token,
.profile-slider.is-fullscreen .profile-slider-code-hint,
.profile-slider.is-fullscreen .profile-slider-code-chips,
.profile-slider.is-fullscreen .profile-slider-card-title {
  display: none;
}
.profile-slider.is-fullscreen .profile-slider-card {
  margin: 0;
  border: none;
  background: transparent;
  padding: 0;
}
.profile-slider.is-fullscreen .profile-slider-code-qr {
  height: 100vh;
  padding: 24px;
  border-radius: 0;
}
.profile-slider.is-fullscreen .profile-slider-code-qr svg {
  max-width: min(80vw, 80vh);
}

/* ── Action list ──────────────────────────────────────────────── */
.profile-slider-list {
  margin: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.profile-slider-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  min-height: 52px;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  background: transparent;
  border: none;
  font: inherit;
  font-size: 16px;
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease;
}
.profile-slider-item:hover {
  background: rgba(255, 255, 255, 0.04);
}
html:not(.dark) .profile-slider-item:hover {
  background: rgba(15, 23, 42, 0.04);
}
.profile-slider-item-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
}
.profile-slider-item-icon svg { width: 22px; height: 22px; }
.profile-slider-item-label { flex: 1; }
.profile-slider-item-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.profile-slider-item-danger { color: #fca5a5; }
.profile-slider-item-danger:hover { background: rgba(239, 68, 68, 0.12); }

/* ── Footer ───────────────────────────────────────────────────── */
.profile-slider-footer {
  margin: 20px 16px;
  padding-bottom: env(safe-area-inset-bottom, 8px);
}
.profile-slider-signout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px;
  min-height: 52px;
  border-radius: 12px;
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.18);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  transition: background 120ms ease;
}
.profile-slider-signout:hover {
  background: rgba(239, 68, 68, 0.16);
}
.profile-slider-signout svg { width: 18px; height: 18px; }

.profile-slider-item-chevron {
  width: 14px;
  height: 14px;
  opacity: 0.45;
  flex: 0 0 auto;
}

/* ── Drill-down full-page overlay ─────────────────────────────── */
/* Slides DOWN from above the slider, fills the panel.  Closes by
 * sliding back UP via the X button (maintainer May 16: "slide down
 * a full page with an X can slide up back to close").  The drill
 * itself is the full page — no "Open full page" CTA underneath. */
.profile-drill {
  /* Sibling of the panel inside .profile-slider, NOT a descendant
   * of the scrollable panel.  The panel scrolls (overflow-y: auto)
   * and the panel has `transform` applied — together those would
   * make a nested drill (whether absolute OR fixed) scroll with
   * the panel content and open off-screen if the user had scrolled
   * before tapping a drill row (Gemini #802 r3 HIGH).  Hoisting the
   * drill to a sibling of the panel anchors it to .profile-slider
   * (position: fixed; inset: 0), which never scrolls, so the drill
   * always covers the visible area. */
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  /* Match the parent panel's signature surface — teal aurora glow
   * over the navy gradient — so the drill reads as the same
   * material rising into view, not a different sheet. */
  background:
    radial-gradient(120% 80% at 70% 0%,
                    rgba(20, 184, 166, 0.20) 0%,
                    rgba(20, 184, 166, 0.00) 55%),
    linear-gradient(180deg, #0b1220 0%, #0f172a 100%);
  color: #e2e8f0;
  transform: translateY(-100%);
  /* 260 ms matches the parent panel's transform + the slider
   * visibility delay; longer durations get cut off if the user
   * closes the slider while the drill is open. */
  transition: transform 260ms cubic-bezier(0.32, 0.72, 0.18, 1.00);
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 2;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  padding-top: max(env(safe-area-inset-top, 0px), 6px);
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 28px);
}
.profile-slider.is-drill-open .profile-drill {
  transform: translateY(0);
}

/* Match the panel's max-width on tablet+ so the drill sits over
 * the panel rather than stretching across the full desktop view.
 * `left: auto` lets the right:0 anchor win — without it, both
 * left:0 + right:0 would pin the drill to the left edge of the
 * .profile-slider container, off the right-anchored panel. */
@media (min-width: 640px) {
  .profile-drill { max-width: 28rem; left: auto; }
}

/* ── Admin (av2) desktop: open from the LEFT ──────────────────────
 * On admin operate-plane pages the profile trigger lives in the LEFT
 * sidebar, so the slider should emanate from the left edge instead of
 * flying in from the far right. Only at the side-panel breakpoint
 * (≥640px); below that the panel is full-width so the side is moot.
 * The drill flips with it so it stays over the (now-left) panel.
 * Maintainer May 23. */
@media (min-width: 640px) {
  body.av2-body .profile-slider-panel {
    right: auto; left: 0;
    transform: translateX(-100%);
  }
  /* No av2-specific is-open rule: the base `.profile-slider.is-open
     .profile-slider-panel` (specificity 0,3,0) already sets
     translateX(0) and outranks the closed-state override above
     (0,2,1), so the panel opens correctly. Gemini #974. */
  body.av2-body .profile-drill { right: auto; left: 0; }
}

html:not(.dark) .profile-drill {
  background:
    radial-gradient(120% 80% at 70% 0%,
                    rgba(20, 184, 166, 0.07) 0%,
                    rgba(20, 184, 166, 0.00) 55%),
    linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  color: #0f172a;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
}

.profile-drill-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 4px;
}
.profile-drill-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.profile-drill-close {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  border-radius: 999px;
  cursor: pointer;
}
html:not(.dark) .profile-drill-close { background: rgba(15, 23, 42, 0.06); }
.profile-drill-close svg { width: 18px; height: 18px; }

.profile-drill-body {
  padding: 8px 20px 24px;
}
.profile-drill-prose {
  margin: 0 0 16px;
  font-size: 14px;
  opacity: 0.80;
  line-height: 1.5;
}
.profile-drill-empty,
.profile-drill-loading,
.profile-drill-error {
  margin: 0 0 16px;
  text-align: center;
  font-size: 14px;
  opacity: 0.65;
  padding: 12px;
}
.profile-drill-error { color: #fca5a5; }

.profile-drill-kv {
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.profile-drill-kv > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
html:not(.dark) .profile-drill-kv > div {
  border-bottom-color: rgba(15, 23, 42, 0.08);
}
.profile-drill-kv dt {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.55;
}
.profile-drill-kv dd {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  text-align: right;
}

.profile-drill-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}
.profile-drill-list-item {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
html:not(.dark) .profile-drill-list-item {
  border-bottom-color: rgba(15, 23, 42, 0.06);
}
.profile-drill-list-item a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: inherit;
  text-decoration: none;
}
.profile-drill-list-title {
  font-size: 14px;
  font-weight: 500;
}
.profile-drill-list-sub {
  font-size: 12px;
  opacity: 0.65;
}
.profile-drill-list-item.is-unread .profile-drill-list-title {
  font-weight: 700;
}

.profile-drill-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  padding: 12px 16px;
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
  background: rgba(20, 184, 166, 0.18);
  color: #5eead4;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.profile-drill-cta svg { width: 16px; height: 16px; }
html:not(.dark) .profile-drill-cta {
  background: rgba(20, 184, 166, 0.10);
  color: #0d9488;
}

/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .profile-slider-panel,
  .profile-slider-backdrop,
  .profile-drill {
    transition-duration: 0ms;
  }
}