/* ==========================================================================
   Pikett · division demo "div-care" (divisions/care.html hero stage)
   A live uptime monitor (js/scenes/div-care.js builds it in the scene element):
     .dcare__mode      Live / Simulated, with its lamp
     .dcare__status    Up · {ms} ms  (the "·" is the status lamp; it beats)
                       Down / Recovered + a detail line with the phone
     .dcare__counters  checks and uptime this visit
     .dcare__strip     one bar per check (a status page in miniature) + the average
     .dcare__body      .dcare__chart, the heartbeat sweep (canvas)  ·  .dcare__log (reduced motion)
                       .dcare__inc, the incident log after "Break it" (over the sweep)
     .dcare__break     Break it: beside the page's hint, or above it when the
                       hint needs the room (measured by the script: --dc-btn-b, --dc-foot)
   ========================================================================== */

.dhero__stage > [data-scene="div-care"] { container: dcare / size; border-radius: inherit; }

.dcare {
  --dc-on: var(--c-care, #B8F53D);
  --dc-alert: #FF4D3D;
  --dc: var(--dc-on);                       /* the colour of the current state */
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column;
  padding: 26px 28px var(--dc-foot, 78px);
  border-radius: inherit;
  font-family: var(--sans); color: var(--fg);
}
.dcare[data-state="down"] { --dc: var(--dc-alert); }

/* the alarm: the stage itself goes red and pulses while it's down; a lime breath on recovery */
.dcare::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(90% 70% at 50% 108%, rgba(255, 77, 61, .2), transparent 70%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 77, 61, .62), inset 0 0 120px rgba(255, 77, 61, .16);
  opacity: 0; transition: opacity .6s var(--ease);
}
.dcare[data-state="down"]::before { opacity: 1; animation: dcare-alarm 1.4s var(--ease-io) infinite; }
.dcare::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--dc-on) 60%, transparent), inset 0 0 110px color-mix(in srgb, var(--dc-on) 14%, transparent);
  opacity: 0;
}
.dcare[data-state="recovered"]::after { animation: dcare-breath 2.4s var(--ease) both; }
@keyframes dcare-alarm { 50% { opacity: .42; } }
@keyframes dcare-breath { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }

/* mode ------------------------------------------------------------------- */
.dcare__mode {
  align-self: flex-start; max-width: 100%;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px; line-height: 1.35; letter-spacing: .07em; text-transform: uppercase;
  color: var(--fg-2); text-wrap: balance;
}
.dcare__mode i {
  width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--dc-on);
  box-shadow: 0 0 10px var(--dc-on);
  animation: dcare-lamp 2.4s var(--ease-io) infinite;
}
@keyframes dcare-lamp {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184, 245, 61, .45), 0 0 8px rgba(184, 245, 61, .8); }
  50% { box-shadow: 0 0 0 6px rgba(184, 245, 61, 0), 0 0 14px rgba(184, 245, 61, 1); }
}
/* simulated: said out loud, a dashed frame and a hollow lamp */
.dcare[data-mode="sim"] .dcare__mode { padding: 6px 13px 6px 10px; border-radius: 16px; border: 1px dashed rgba(243, 242, 238, .3); color: var(--fg); }
.dcare[data-mode="sim"] .dcare__mode i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--dc-on); animation: none; }
.dcare[data-state="down"] .dcare__mode i { background: var(--dc-alert); box-shadow: 0 0 10px var(--dc-alert); animation: dcare-blink 1s steps(2, jump-none) infinite; }
@keyframes dcare-blink { 50% { opacity: .2; } }

/* readout ----------------------------------------------------------------- */
.dcare__read { margin-top: clamp(16px, 4.6cqh, 38px); opacity: 0; transform: translateY(10px); transition: opacity .8s var(--ease), transform 1s var(--ease); }
.dcare.is-ready .dcare__read { opacity: 1; transform: none; }
.dcare__status {
  font-size: clamp(36px, 9.4cqw, 84px); font-stretch: 125%; font-weight: 800; letter-spacing: -.035em; line-height: .9;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dcare[data-state="boot"] .dcare__status { visibility: hidden; }
.dcare__word { color: var(--dc); transition: color .5s var(--ease); }
.dcare__dot { /* the copy's "·", lit as the status lamp */
  display: inline-block; white-space: pre; color: var(--dc);
  text-shadow: 0 0 .12em var(--dc), 0 0 .32em color-mix(in srgb, var(--dc) 60%, transparent);
  transform-origin: 50% 60%; transition: color .5s var(--ease);
}
.dcare__dot.is-beat { animation: dcare-beat .6s var(--ease); }
.dcare[data-state="down"] .dcare__dot { animation: dcare-blink 1s steps(2, jump-none) infinite; }
@keyframes dcare-beat { 0% { transform: scale(1); } 22% { transform: scale(1.65); text-shadow: 0 0 .2em var(--dc), 0 0 .6em var(--dc); } 100% { transform: scale(1); } }
.dcare__ms small { font-size: .4em; font-weight: 650; letter-spacing: 0; color: var(--fg-2); }
.dcare__detail { /* folded away while it's up; opens for Down and Recovered (the sweep below gives way smoothly) */
  display: flex; align-items: center; gap: 11px; height: 0; margin-top: 0; opacity: 0; transform: translateY(-6px);
  font-size: clamp(14.5px, 2.5cqw, 19px); font-stretch: 108%; font-weight: 600; letter-spacing: -.005em; line-height: 1.15;
  white-space: normal; color: var(--fg);
  transition: height .7s var(--ease), margin-top .7s var(--ease), opacity .45s var(--ease), transform .7s var(--ease);
}
.dcare:is([data-state="down"], [data-state="recovered"]) .dcare__detail { height: 34px; margin-top: 16px; opacity: 1; transform: none; }
.dcare__badge {
  position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; color: var(--dc);
  background: color-mix(in srgb, var(--dc) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dc) 48%, transparent);
}
.dcare__badge:empty { display: none; }
.dcare__badge svg { width: 18px; height: 18px; overflow: visible; }
/* the on-call phone rings: the handset shakes in bursts, sound waves flash, the badge sends out a ring */
.dcare[data-state="down"] .dcare__badge { animation: dcare-call 1.4s ease-out infinite; }
.dcare[data-state="down"] .dcare__handset { transform-box: fill-box; transform-origin: 50% 50%; animation: dcare-ring 1.4s linear infinite; }
.dcare[data-state="down"] .dcare__waves { animation: dcare-waves 1.4s steps(1, end) infinite; }
.dcare:not([data-state="down"]) .dcare__waves { opacity: 0; }
@keyframes dcare-ring {
  0%, 44%, 100% { transform: rotate(0); }
  4% { transform: rotate(-17deg); } 8% { transform: rotate(15deg); } 12% { transform: rotate(-17deg); } 16% { transform: rotate(15deg); }
  20% { transform: rotate(-13deg); } 24% { transform: rotate(11deg); } 28% { transform: rotate(-8deg); } 32% { transform: rotate(6deg); } 38% { transform: rotate(-2deg); }
}
@keyframes dcare-waves { 0% { opacity: 1; } 42% { opacity: 0; } }
@keyframes dcare-call {
  0% { box-shadow: inset 0 0 0 1px rgba(255, 77, 61, .5), 0 0 0 0 rgba(255, 77, 61, .5); }
  70%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 77, 61, .5), 0 0 0 14px rgba(255, 77, 61, 0); }
}

.dcare__counters {
  margin-top: 16px; display: flex; flex-wrap: wrap; row-gap: 4px;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.4; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-2);
}
.dcare__counters > span { white-space: nowrap; }
.dcare__counters b { font-weight: 400; color: var(--fg); font-variant-numeric: tabular-nums; transition: color .4s; }
.dcare__counters > .dcare__sep { white-space: pre; }
.dcare[data-state="down"] [data-uptime] { color: var(--dc-alert); }

/* history strip: one bar per check, newest on the right (a status page in miniature) */
.dcare__strip {
  margin-top: 14px; display: flex; align-items: center; gap: 12px; min-width: 0;
  font-family: var(--mono); font-size: 11px; line-height: 1; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-3);
  opacity: 0; transition: opacity .8s var(--ease) .15s;
}
.dcare.is-ready .dcare__strip { opacity: 1; }
.dcare__strip-l, .dcare__avg { flex: none; white-space: nowrap; }
.dcare__avg { color: var(--fg-2); text-transform: none; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.dcare__bars { flex: 1 1 auto; min-width: 0; height: 18px; overflow: hidden; display: flex; justify-content: flex-end; align-items: stretch; gap: 3px; }
.dcare__bars i {
  flex: none; width: 5px; border-radius: 2px; background: var(--dc-on); opacity: .78;
  transform-origin: 50% 100%; animation: dcare-bar .6s var(--ease) both;
}
.dcare__bars i.is-old { animation: none; opacity: .5; }
.dcare__bars i.is-empty { animation: none; background: rgba(243, 242, 238, .09); opacity: 1; }
.dcare__bars i.is-down { background: var(--dc-alert); opacity: 1; box-shadow: 0 0 8px rgba(255, 77, 61, .6); }
.dcare__bars i:last-child:not(.is-down) { opacity: 1; box-shadow: 0 0 8px color-mix(in srgb, var(--dc-on) 70%, transparent); }
@keyframes dcare-bar { from { transform: scaleY(0); opacity: 0; } }

/* the sweep (or, under reduced motion, the log) + the incident card over it ------- */
.dcare__body { position: relative; flex: 1 1 auto; min-height: 110px; margin-top: clamp(14px, 3cqh, 28px); display: flex; flex-direction: column; }
.dcare__chart { position: relative; flex: 1 1 auto; min-height: 0; }
.dcare.is-reduced .dcare__chart { display: none; }

.dcare__inc {
  position: absolute; z-index: 2; top: 4px; right: 0; width: min(340px, 100%);
  padding: 13px 15px 12px; border-radius: 16px;
  background: rgba(16, 12, 13, .72);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dc) 38%, transparent), inset 0 1px 0 rgba(243, 242, 238, .08), 0 24px 50px -24px rgba(0, 0, 0, .9);
  opacity: 0; visibility: hidden; transform: translate3d(0, -8px, 0) scale(.98); transform-origin: 100% 0;
  transition: opacity .45s var(--ease), transform .7s var(--ease), visibility 0s .7s, box-shadow .5s var(--ease);
}
.dcare.has-inc .dcare__inc { opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--ease), transform .8s var(--ease), visibility 0s 0s, box-shadow .5s var(--ease); }
.dcare__inc-h {
  display: flex; align-items: center; gap: 9px; margin-bottom: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--fg-2);
}
.dcare__inc-h i { width: 7px; height: 7px; border-radius: 50%; background: var(--dc); box-shadow: 0 0 10px var(--dc); transition: background-color .5s var(--ease), box-shadow .5s var(--ease); }
.dcare__inc ol { display: grid; gap: 0; }
.dcare__inc li {
  display: grid; grid-template-columns: 7.2em minmax(0, 1fr); column-gap: 10px; align-items: baseline;
  padding: 6px 0; border-top: 1px solid rgba(243, 242, 238, .08);
  font-size: 13.5px; line-height: 1.3; font-weight: 550; font-stretch: 104%; color: var(--fg);
  animation: dcare-row .6s var(--ease) both;
}
.dcare__inc li:last-child:not(:only-child) { color: var(--fg); }
.dcare__inc time { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .02em; color: var(--fg-3); font-variant-numeric: tabular-nums; }
@keyframes dcare-row { from { opacity: 0; transform: translate3d(8px, 0, 0); } }
/* reduced motion: the card sits above the log instead of over it */
.dcare.is-reduced .dcare__inc { position: relative; top: auto; right: auto; width: 100%; display: none; transform: none; margin-bottom: 12px; }
.dcare.is-reduced.has-inc .dcare__inc { display: block; }

/* reduced motion: the last checks, as text */
.dcare__log {
  flex: 1 1 auto; min-height: 0; overflow: hidden; margin-top: 8px;
  font-family: var(--mono); font-size: 12px; line-height: 1.3; letter-spacing: .03em; color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.dcare__log li { display: flex; gap: 20px; padding: 10px 0; border-top: 1px solid var(--line); }
.dcare__log li:first-child { color: var(--fg); }
.dcare__log time { flex: none; color: var(--fg-3); }
.dcare__log li.is-down span { color: var(--dc-alert); }

/* Break it ------------------------------------------------------------------ */
.dcare__break {
  position: absolute; right: 16px; bottom: var(--dc-btn-b, 14px); z-index: 3;
  display: inline-flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 21px 0 16px; border-radius: 999px;
  overflow: hidden; isolation: isolate;
  background: rgba(13, 13, 17, .5);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(243, 242, 238, .18), inset 0 1px 0 rgba(243, 242, 238, .1), 0 14px 34px -16px rgba(0, 0, 0, .8);
  color: var(--fg); font-size: 15px; font-weight: 650; font-stretch: 112%; letter-spacing: -.005em; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: color .35s var(--ease), opacity .45s var(--ease), transform .5s var(--ease);
}
.dcare__break svg { width: 19px; height: 19px; flex: none; transition: transform .6s var(--ease); }
.dcare__break::before { /* the hover wipe, in the alarm colour */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--dc-alert);
  transform: translateY(101%); transition: transform .55s var(--ease);
}
.dcare__break:hover { color: #0A0A0C; }
.dcare__break:hover::before { transform: none; }
.dcare__break:hover svg { transform: rotate(-14deg) scale(1.08); }
.dcare__break:active { transform: scale(.96); }
.dcare__break:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.dcare__break[aria-disabled="true"] { opacity: .34; cursor: default; color: var(--fg); }
.dcare__break[aria-disabled="true"]::before { transform: translateY(101%); }
.dcare__break[aria-disabled="true"] svg { transform: none; }
.dcare.is-stacked .dcare__break { right: auto; left: 16px; }

/* narrow stages (phones, small tablets) --------------------------------------- */
@container dcare (max-width: 560px) {
  .dcare { padding: 18px 18px var(--dc-foot, 120px); }
  .dcare__mode { font-size: 10.5px; letter-spacing: .04em; gap: 9px; }
  .dcare[data-mode="sim"] .dcare__mode { padding: 5px 11px 5px 9px; }
  .dcare__counters { font-size: 10.5px; letter-spacing: .03em; margin-top: 12px; }
  .dcare__strip { margin-top: 12px; gap: 10px; font-size: 10.5px; letter-spacing: .03em; }
  .dcare__inc { top: 0; padding: 9px 12px 7px; border-radius: 14px; }
  .dcare__inc-h { margin-bottom: 4px; font-size: 10.5px; }
  .dcare__inc li { padding: 4px 0; font-size: 12.5px; line-height: 1.25; grid-template-columns: 7.4em minmax(0, 1fr); column-gap: 8px; }
  .dcare__inc time { font-size: 10.5px; }
  .dcare__detail { gap: 9px; }
  .dcare:is([data-state="down"], [data-state="recovered"]) .dcare__detail { height: 30px; margin-top: 10px; }
  .dcare__badge { width: 28px; height: 28px; }
  .dcare__badge svg { width: 16px; height: 16px; }
  .dcare.is-stacked .dcare__break { left: 12px; }
}
@media (pointer: coarse) {
  .dcare__break { height: 48px; }
  .dcare__break:hover { color: var(--fg); }
  .dcare__break:hover::before { transform: translateY(101%); }
  .dcare__break:hover svg { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dcare__read { transition: none; transform: none; }
}
.dcare.is-reduced .dcare__bars i, .dcare.is-reduced .dcare__inc li { animation: none; }
.dcare.is-reduced .dcare__inc, .dcare.is-reduced .dcare__strip { transition: none; }