/* CloudMedTech live prototype layer — sits on top of the untouched design screens. */
@view-transition { navigation: auto; }

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg-base); min-height: 100vh; }
body.stage-body { background: #E7ECEA; }
body.stage-body.dark-stage { background: #0A0F10; }

/* ---------- artboard sizing ---------- */
.ab.live-root.k-app {
  width: 100%;
  min-width: 1200px;
  height: max(100vh, var(--art-h));
}
.ab.live-root.k-app > .col[style*="height:100%"] { height: 100%; }

.stage {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 72px 24px 88px;
  box-sizing: border-box;
}
.stage-fit { position: relative; flex: none; box-sizing: border-box; }
.stage-fit > .ab { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.device-phone .stage-fit {
  border-radius: 54px; padding: 12px; background: #0F1A1C;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 40px 100px rgba(15,26,28,.28), 0 8px 24px rgba(15,26,28,.18);
}
.device-phone .stage-fit > .ab { left: 12px; top: 12px; border-radius: 42px; }
.device-phone .stage-fit::before {
  content: ""; position: absolute; z-index: 5; top: 22px; left: 50%; width: 110px; height: 30px; margin-left: -55px;
  border-radius: 20px; background: #0F1A1C;
}
.device-tablet .stage-fit {
  border-radius: 36px; padding: 22px; background: #1B2425;
  box-shadow: 0 40px 100px rgba(15,26,28,.25), 0 8px 24px rgba(15,26,28,.15);
}
.device-tablet .stage-fit > .ab { left: 22px; top: 22px; border-radius: 14px; }
.device-paper .stage-fit { box-shadow: 0 1px 0 rgba(15,26,28,.06), 0 24px 70px rgba(15,26,28,.18); }
.device-board .stage-fit { border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 10px #0F1A1C, 0 40px 120px rgba(0,0,0,.4); }
.device-sheet .stage-fit { border-radius: 14px; overflow: hidden; box-shadow: 0 24px 70px rgba(15,26,28,.14); }

.stage-caption {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
  font: 500 13px/18px Onest, system-ui, sans-serif; color: #39484A;
  display: flex; gap: 10px; align-items: center; z-index: 50;
  background: rgba(255,255,255,.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding: 6px 8px 6px 14px; border-radius: 999px; border: 1px solid rgba(15,26,28,.08);
}
.dark-stage .stage-caption { background: rgba(21,28,29,.7); color: #B3BDBC; border-color: rgba(238,242,241,.08); }
.stage-caption button {
  font: 500 12px/16px Onest, system-ui, sans-serif; border: 1px solid rgba(15,26,28,.16); background: #fff; color: #0F1A1C;
  border-radius: 999px; padding: 4px 10px; cursor: pointer;
}
.stage-caption button:hover { background: #E2F2EF; }

@media (max-width: 520px) {
  body.stage-phone-native { background: var(--bg-base); }
  .stage-phone-native .stage { padding: 0; display: block; }
  .stage-phone-native .stage-fit { padding: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; width: 100% !important; height: auto !important; }
  .stage-phone-native .stage-fit::before { display: none; }
  .stage-phone-native .stage-fit > .ab { position: relative; transform: none !important; left: 0; top: 0; width: 100% !important; min-height: 100vh; border-radius: 0; }
  .stage-phone-native .stage-caption { display: none; }
}

@media print {
  body.stage-body { background: #fff; }
  .stage { padding: 0; display: block; }
  .stage-fit { box-shadow: none !important; width: auto !important; height: auto !important; }
  .stage-fit > .ab { position: relative; transform: none !important; }
  .stage-caption, .live-dock, .live-toasts { display: none !important; }
}

/* ---------- view transitions ---------- */
.ab .nav { view-transition-name: cmt-nav; }
.ab .topbar { view-transition-name: cmt-topbar; }
.ab .nav .ni.on { view-transition-name: cmt-nav-on; }
.ab .tabs .tab.on { view-transition-name: cmt-tab-on; }
.live-dock { view-transition-name: cmt-dock; }

::view-transition-old(root) { animation: 160ms cubic-bezier(.4,0,1,1) both live-out; }
::view-transition-new(root) { animation: 260ms cubic-bezier(0,0,.2,1) 40ms both live-in; }
::view-transition-group(cmt-nav-on), ::view-transition-group(cmt-tab-on) { animation-duration: 280ms; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
::view-transition-old(cmt-topbar) { animation: 140ms ease both live-fade-out; }
::view-transition-new(cmt-topbar) { animation: 200ms ease both live-fade-in; }
@keyframes live-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes live-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes live-fade-out { to { opacity: 0; } }
@keyframes live-fade-in { from { opacity: 0; } }

@supports not (view-transition-name: none) {
  body { animation: live-fade-in 240ms ease both; }
}

/* theme reveal */
::view-transition-old(root).theme, ::view-transition-new(root).theme { animation: none; }
html.theme-switch::view-transition-old(root) { animation: none; z-index: 1; }
html.theme-switch::view-transition-new(root) { animation: live-reveal 520ms cubic-bezier(.2,.8,.2,1) both; z-index: 2; }
@keyframes live-reveal { from { clip-path: circle(0 at var(--rx, 50%) var(--ry, 50%)); } to { clip-path: circle(150vmax at var(--rx, 50%) var(--ry, 50%)); } }

/* ---------- entrance ---------- */
.live-rise { animation: live-rise 360ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 28ms + 60ms); }
@keyframes live-rise { from { opacity: 0; transform: translateY(6px); } }
.live-pop { animation: live-pop 260ms cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes live-pop { from { opacity: 0; transform: scale(.96); } }

.ab .ov.drawer.live-in-drawer { animation: live-drawer 320ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes live-drawer { from { transform: translateX(32px); opacity: 0; } }
.ab .ov.drawer.live-out-drawer { animation: live-drawer-out 220ms cubic-bezier(.4,0,1,1) both; }
@keyframes live-drawer-out { to { transform: translateX(40px); opacity: 0; } }
.ab .ov.modal.live-in-modal { animation: live-modal 300ms cubic-bezier(.2,.9,.3,1.1) both; }
@keyframes live-modal { from { transform: translateY(10px) scale(.97); opacity: 0; } }
.ab .ov.modal.live-out-modal, .ab .ov.pop.live-out-modal { animation: live-modal-out 180ms ease both; }
@keyframes live-modal-out { to { transform: translateY(6px) scale(.98); opacity: 0; } }
.ab .scrim.live-in-scrim { animation: live-fade-in 260ms ease both; }
.ab .scrim.live-out-scrim { animation: live-fade-out 200ms ease both; }
.ab .ov.pop.live-in-pop { animation: live-modal 240ms cubic-bezier(.2,.9,.3,1.1) both; transform-origin: top right; }

/* highlight for new / changed rows — brand-100 for 1.5 s with a 4 px rise */
.live-flash { animation: live-flash 1.6s ease-out both; }
@keyframes live-flash {
  0% { background-color: var(--brand-100); transform: translateY(4px); }
  20% { transform: none; }
  70% { background-color: var(--brand-100); }
  100% { background-color: transparent; }
}
tr.live-flash > td { animation: live-flash-td 1.6s ease-out both; }
@keyframes live-flash-td { 0%,70% { background-color: var(--brand-100); } 100% { background-color: transparent; } }

/* ---------- interaction polish ---------- */
.ab .btn { position: relative; overflow: hidden; transition: transform 120ms ease, background-color 150ms ease, box-shadow 150ms ease, filter 150ms ease; }
.ab .btn:active { transform: scale(.97); }
.ab .btn.p:hover { filter: brightness(1.08); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-fill) 32%, transparent); }
.ab .btn:not(.p):hover { background-color: color-mix(in srgb, var(--ink-900) 5%, var(--bg-surface)); }
.ab .btn.g:hover { background-color: color-mix(in srgb, var(--ink-900) 6%, transparent); }
.live-ripple { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .18; transform: scale(0); animation: live-ripple 520ms ease-out forwards; }
@keyframes live-ripple { to { transform: scale(1); opacity: 0; } }
.ab .btn.live-busy { pointer-events: none; }
.ab .btn.live-busy::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 40%; background: currentColor; opacity: .6; animation: live-busy 900ms ease-in-out infinite; }
@keyframes live-busy { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

.ab .ni { transition: background-color 150ms ease, color 150ms ease; }
.ab .ni:not(.on):hover { background-color: color-mix(in srgb, var(--ink-900) 6%, transparent); }
.ab .tab { cursor: pointer; transition: color 150ms ease, border-color 200ms ease; }
.ab .tab:hover { color: var(--ink-900); }
.ab .chip, .ab .seg > span, .ab .cb, .ab .appt, .ab [data-live-go], .ab .live-click { cursor: pointer; }
.ab .chip { transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 120ms ease; }
.ab .chip:active { transform: scale(.96); }
.ab .seg > span { transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease; }
.ab .cb { transition: background-color 150ms ease, border-color 150ms ease, transform 120ms ease; }
.ab .cb:active { transform: scale(.88); }
.ab .tbl tbody tr { transition: background-color 120ms ease; }
.ab .tbl tbody tr.live-click:hover > td { background-color: color-mix(in srgb, var(--accent-fill) 6%, var(--bg-surface)); }
.ab .card.live-click { transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
.ab .card.live-click:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(15,26,28,.10); }
.ab .appt { transition: transform 150ms ease, box-shadow 150ms ease, z-index 0s; }
.ab .appt:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(15,26,28,.14); z-index: 3; }
.ab a[href="#"]:not(.ni):not(.btn), .ab a[data-live-go]:not(.ni):not(.btn) { transition: color 150ms ease, opacity 150ms ease; }
.ab input.inp, .ab textarea.inp { outline: none; font: inherit; width: 100%; }
.ab input.inp::placeholder { color: var(--ink-500); }
.ab input.inp:focus, .ab [contenteditable].inp:focus, .ab .inp.live-focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.ab [contenteditable].inp { outline: none; cursor: text; }
.ab .bar > i { transition: width 600ms cubic-bezier(.2,.8,.2,1); }
.ab .live-strike { text-decoration: line-through; opacity: .55; }

.live-dot-pulse { position: relative; }
.live-dot-pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; animation: live-pulse 1.8s ease-out infinite; }
@keyframes live-pulse { 0% { transform: scale(.5); opacity: .6; } 100% { transform: scale(1.6); opacity: 0; } }
.live-blink { animation: live-blink 1.2s ease-in-out infinite; }
@keyframes live-blink { 50% { opacity: .35; } }

.live-shimmer { position: relative; overflow: hidden; }
.live-shimmer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bg-surface) 70%, transparent), transparent); transform: translateX(-100%); animation: live-shimmer 900ms ease-in-out 2; pointer-events: none; }
@keyframes live-shimmer { to { transform: translateX(100%); } }

.live-sig { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }

/* ---------- toasts ---------- */
.live-toasts { position: fixed; right: 16px; bottom: 64px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.live-toast {
  pointer-events: auto; min-width: 260px; max-width: 420px; display: flex; gap: 10px; align-items: flex-start;
  font: 400 14px/20px Onest, system-ui, sans-serif; color: #EEF2F1; background: #0F1A1C;
  border-radius: 10px; padding: 12px 14px; box-shadow: 0 18px 48px rgba(15,26,28,.28);
  animation: live-toast-in 320ms cubic-bezier(.2,.9,.3,1.1) both;
}
.live-toast.out { animation: live-toast-out 220ms ease both; }
.live-toast b { font-weight: 600; }
.live-toast .sub { color: #B3BDBC; font-size: 13px; line-height: 18px; display: block; }
.live-toast i { width: 8px; height: 8px; border-radius: 50%; background: #4FB07A; flex: none; margin-top: 6px; }
.live-toast i.info { background: #6A8FD8; } .live-toast i.warn { background: #D2A73E; } .live-toast i.crit { background: #E0675E; }
.live-toast a { color: #7FD1CB; cursor: pointer; text-decoration: underline; margin-left: auto; white-space: nowrap; }
@keyframes live-toast-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes live-toast-out { to { opacity: 0; transform: translateX(16px); } }

/* ---------- demo dock ---------- */
.live-dock {
  position: fixed; right: 16px; bottom: 16px; z-index: 900;
  display: flex; align-items: center; gap: 2px; padding: 4px;
  font: 500 12px/16px Onest, system-ui, sans-serif; color: #EEF2F1;
  background: rgba(15,26,28,.86); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-radius: 999px; box-shadow: 0 12px 36px rgba(15,26,28,.28), 0 0 0 1px rgba(238,242,241,.08) inset;
  opacity: .5; transition: opacity 200ms ease, transform 200ms ease;
}
.live-dock:hover, .live-dock:focus-within { opacity: 1; }
.live-dock button, .live-dock a {
  all: unset; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; color: inherit; white-space: nowrap;
}
.live-dock button:hover, .live-dock a:hover { background: rgba(238,242,241,.12); }
.live-dock button:focus-visible, .live-dock a:focus-visible { outline: 2px solid #EEF2F1; outline-offset: 1px; }
.live-dock .t { color: #B3BDBC; white-space: nowrap; max-width: 0; overflow: hidden; transition: max-width 260ms ease, padding 260ms ease; padding: 0; }
.live-dock:hover .t { max-width: 320px; padding: 0 8px 0 4px; }
.live-dock kbd { font: 500 11px/14px "JetBrains Mono", monospace; color: #B3BDBC; border: 1px solid rgba(238,242,241,.2); border-radius: 4px; padding: 0 4px; }
.live-dock svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.live-dock .sep { width: 1px; height: 16px; background: rgba(238,242,241,.16); margin: 0 2px; }

/* ---------- command palette ---------- */
.live-k-scrim { position: fixed; inset: 0; z-index: 1100; background: rgba(15,26,28,.32); backdrop-filter: blur(2px); animation: live-fade-in 180ms ease both; display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; }
.live-k {
  width: 640px; max-width: calc(100vw - 32px); max-height: 64vh; display: flex; flex-direction: column;
  background: var(--bg-surface, #fff); color: var(--ink-900, #0F1A1C); border-radius: 14px; overflow: hidden;
  box-shadow: 0 32px 80px rgba(15,26,28,.32), 0 0 0 1px var(--hairline, rgba(15,26,28,.09));
  font: 400 14px/20px Onest, system-ui, sans-serif; animation: live-modal 240ms cubic-bezier(.2,.9,.3,1.1) both;
}
.live-k input { all: unset; font: 400 17px/24px Onest, system-ui, sans-serif; padding: 18px 20px; border-bottom: 1px solid var(--hairline, rgba(15,26,28,.09)); }
.live-k input::placeholder { color: var(--ink-500, #5A6B6E); }
.live-k ul { list-style: none; margin: 0; padding: 6px; overflow: auto; }
.live-k li { display: flex; gap: 12px; align-items: center; padding: 9px 12px; border-radius: 8px; cursor: pointer; }
.live-k li .g { margin-left: auto; font-size: 12px; color: var(--ink-500, #5A6B6E); white-space: nowrap; }
.live-k li .av { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; background: var(--bg-sunken, #EBEFED); color: var(--ink-700, #39484A); flex: none; }
.live-k li.on { background: var(--brand-100, #E2F2EF); }
.live-k .hd { font-size: 11px; line-height: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-500, #5A6B6E); padding: 10px 12px 4px; cursor: default; }
.live-k .ft { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--hairline, rgba(15,26,28,.09)); font-size: 12px; color: var(--ink-500, #5A6B6E); }
.live-k kbd { font: 500 11px/14px "JetBrains Mono", monospace; border: 1px solid var(--hairline-strong, rgba(15,26,28,.4)); border-radius: 4px; padding: 0 4px; }

/* ---------- notifications popover ---------- */
.live-pop-panel {
  position: fixed; z-index: 1050; width: 380px; background: var(--bg-surface); color: var(--ink-900);
  border-radius: 12px; box-shadow: 0 24px 64px rgba(15,26,28,.24), 0 0 0 1px var(--hairline);
  font: 400 14px/20px Onest, system-ui, sans-serif; overflow: hidden; transform-origin: top right;
  animation: live-modal 220ms cubic-bezier(.2,.9,.3,1.1) both;
}
.live-pop-panel .hd { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--hairline); font-weight: 600; }
.live-pop-panel .hd a { font-weight: 400; font-size: 13px; color: var(--ink-700); cursor: pointer; }
.live-pop-panel .it { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--hairline); cursor: pointer; transition: background-color 120ms ease; }
.live-pop-panel .it:hover { background: var(--bg-sunken); }
.live-pop-panel .it:last-child { border-bottom: 0; }
.live-pop-panel .it i { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--signal-info); }
.live-pop-panel .it i.crit { background: var(--signal-critical); } .live-pop-panel .it i.ok { background: var(--signal-ok); }
.live-pop-panel .it .s { font-size: 13px; line-height: 18px; color: var(--ink-700); }
.live-pop-panel .it .t { margin-left: auto; font: 400 12px/18px "JetBrains Mono", monospace; color: var(--ink-500); }
.live-pop-panel .it.read { opacity: .6; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important;
  }
}

/* thumbnails inside the demo map */
html.thumb, html.thumb body { overflow: hidden; animation: none !important; }
html.thumb .ab.live-root.k-app { min-width: 0; height: 100vh; }