/* ==========================================================================
   WIZKET — cockpit.css · "The autopilot panel" (AI Automation page, #cockpit)
   Ten toggle switches with flip-up safety covers + a red master, a radar and an
   hours gauge. js/cockpit.js flips them from the scroll (desktop, pinned) or on tap
   (phones). The panel is hardware: dark in both themes. Orange = a switch that's on.
   Prefix: ck-
   ========================================================================== */
.ck { position: relative; }
/* phones and small tablets: the panel turns into a long list of ten switches. Left out there;
   the Hands off finale falls back to its default picks (Inbox, Leads, Invoices). */
@media (max-width: 899px) { .ck { display: none; } }
.ck__stage {
  --side: clamp(20px, 6vw, 110px);
  position: relative;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(28px, 4vw, 72px);
  padding: calc(var(--nav-top) + var(--nav-h) + 20px) var(--side) clamp(20px, 3vh, 34px);
  background:
    radial-gradient(55% 60% at 70% 50%, var(--petrol) 0%, transparent 70%),
    var(--bg);
}

/* ---- copy ---- */
.ck__copy { display: grid; justify-items: start; }
.ck__title { margin: 0; font: 400 clamp(2.6rem, min(5.2vw, 10vh), 5.8rem)/0.9 var(--font-display); text-transform: uppercase; color: var(--text); }
.ck__title .is-outline { display: block; }
.ck__sub { margin: clamp(12px, 2vh, 18px) 0 0; max-width: 32ch; font: 500 clamp(0.95rem, 1.1vw, 1.08rem)/1.45 var(--font-body); color: var(--muted); }
.ck-now { margin-top: clamp(22px, 4.5vh, 44px); min-height: 200px; }
.ck-now p { margin: 0; }
.ck-now__n { font: 400 15px/1 var(--font-display); letter-spacing: 0.08em; color: var(--muted); }
.ck-now__n b { font-weight: 400; color: var(--accent); }
.ck-now__name { margin-top: 10px !important; font: 400 clamp(2.2rem, min(3.8vw, 7vh), 4rem)/0.95 var(--font-display); text-transform: uppercase; color: var(--text); }
.ck-now__line { margin-top: 8px !important; font: 600 clamp(1rem, 1.2vw, 1.15rem)/1.3 var(--font-body); color: var(--text); }
.ck-now__does { margin-top: 8px !important; max-width: 38ch; font: 500 14.5px/1.45 var(--font-body); color: var(--muted); }
.ck-now__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px !important; font: 600 12.5px/1 var(--font-body); color: var(--muted); }
.ck-now__meta span { padding: 7px 11px; border-radius: 8px; background: var(--line); color: var(--text); }
.ck-now__meta b { font: 400 18px/1 var(--font-display); color: var(--accent); }
.ck-now.is-swap > * { animation: ck-swap 0.5s var(--ease-out) both; }
.ck-now.is-swap > :nth-child(2) { animation-delay: 0.04s; }
.ck-now.is-swap > :nth-child(3) { animation-delay: 0.08s; }
.ck-now.is-swap > :nth-child(4) { animation-delay: 0.12s; }
@keyframes ck-swap { from { opacity: 0; transform: translateY(14px); } }

/* ---- the panel ---- */
.ck-panel {
  position: relative;
  display: grid;
  gap: clamp(14px, 2.2vh, 22px);
  padding: clamp(16px, 2.4vh, 24px);
  border-radius: 26px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, 0.05), transparent 60%),
    linear-gradient(180deg, #1d2428, #11161a);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 50px 100px -40px rgba(0, 0, 0, 0.8);
  color: #e9eef1;
  font-family: var(--font-body);
}
.ck-panel::before, .ck-panel::after {   /* screws */
  content: "";
  position: absolute;
  top: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #4a555c, #1a2125);
}
.ck-panel::before { left: 12px; }
.ck-panel::after { right: 12px; }
.ck-panel.is-shake { animation: ck-shake 0.3s var(--ease-io); }
@keyframes ck-shake { 25% { translate: 0 2px; } 50% { translate: -2px -1px; } 75% { translate: 1px 1px; } }

.ck-panel__top { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(14px, 2vw, 26px); }
.ck-radar {
  position: relative;
  width: clamp(140px, min(15vw, 22vh), 200px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #0d1a1c, #070d0e 70%);
  box-shadow: inset 0 0 0 2px rgba(95, 179, 196, 0.25), inset 0 0 30px rgba(0, 0, 0, 0.8), 0 0 0 6px #0b0f12;
  overflow: hidden;
}
.ck-radar canvas { display: block; width: 100%; height: 100%; }
.ck-radar__label { position: absolute; left: 50%; bottom: 12%; translate: -50% 0; font: 700 9px/1 var(--font-body); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(95, 179, 196, 0.8); }
.ck-gauge { display: grid; justify-items: center; gap: 6px; }
.ck-gauge svg { width: min(200px, 100%); overflow: visible; fill: none; stroke-linecap: round; }
.ck-gauge__track { stroke: rgba(255, 255, 255, 0.08); stroke-width: 10; }
.ck-gauge__val { stroke: var(--accent); stroke-width: 10; stroke-dasharray: 100; stroke-dashoffset: var(--off, 100); transition: stroke-dashoffset 0.6s var(--ease-out); filter: drop-shadow(0 0 8px rgba(253, 95, 7, 0.6)); }
.ck-gauge p { margin: -30px 0 0; display: grid; justify-items: center; gap: 4px; }
.ck-gauge b { font: 400 clamp(30px, 3vw, 42px)/1 var(--font-display); color: #fff; font-variant-numeric: tabular-nums; }
.ck-gauge span { font: 600 11px/1.2 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: #8b979e; text-align: center; }
.ck-gauge small { font-size: 9px; opacity: 0.8; }

/* switches */
.ck-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(10px, 1.6vh, 16px) 10px; margin: 0; padding: 0; list-style: none; }
.ck-sw { display: grid; justify-items: center; gap: 8px; text-align: center; }
.ck-sw__btn {
  --h: clamp(64px, 9vh, 84px);
  position: relative;
  width: calc(var(--h) * 0.72);
  height: var(--h);
  border-radius: 10px;
  background: linear-gradient(180deg, #0b0f12, #151b1f);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.06);
  perspective: 300px;
}
.ck-sw__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ck-sw__lever {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26%;
  height: 42%;
  margin: -21% 0 0 -13%;
  border-radius: 6px;
  background: linear-gradient(90deg, #9aa4aa, #e6ecef 45%, #8a949a);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6);
  transform-origin: 50% 100%;
  transform: translateY(22%) scaleY(0.75);
  transition: transform 0.25s var(--ease-out), background 0.25s;
}
.ck-sw__lever::before { content: ""; position: absolute; left: 50%; top: -6px; width: 150%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #9aa4aa 70%); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); }
.ck-sw__led { position: absolute; left: 50%; bottom: 7px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #39434a; transition: background-color 0.2s, box-shadow 0.2s; }
.ck-sw__cover {
  position: absolute;
  inset: -3px;
  z-index: 2;
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(229, 56, 59, 0.42), rgba(229, 56, 59, 0.22));
  border: 1px solid rgba(255, 120, 120, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transform-origin: 50% 0;
  transition: transform 0.35s var(--ease-out), opacity 0.35s;
  backface-visibility: hidden;
}
.ck-sw__cover::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 8px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.4); }
.ck-sw.is-open .ck-sw__cover, .ck-master.is-open .ck-sw__cover { transform: rotateX(-118deg); opacity: 0.55; }
.ck-sw.is-on .ck-sw__lever, .ck-master.is-on .ck-sw__lever { transform: translateY(-22%) scaleY(1); }
.ck-sw.is-on .ck-sw__led, .ck-master.is-on .ck-sw__led { background: var(--accent); box-shadow: 0 0 0 3px rgba(253, 95, 7, 0.2), 0 0 12px rgba(253, 95, 7, 0.9); }
.ck-sw__name { margin: 0; padding: 5px 8px; border-radius: 5px; background: #0b0f12; font: 700 10.5px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: #8b979e; white-space: nowrap; transition: color 0.3s; }
.ck-sw.is-on .ck-sw__name { color: #fff; }
.ck-sw__body { display: none; }

.ck-master { display: flex; align-items: center; justify-content: center; gap: 16px; padding-top: 6px; border-top: 1px dashed rgba(255, 255, 255, 0.08); }
.ck-master__btn { --h: clamp(54px, 7vh, 68px); width: calc(var(--h) * 1.5); }
.ck-master .ck-sw__cover { background: linear-gradient(180deg, rgba(229, 56, 59, 0.7), rgba(180, 30, 30, 0.55)); }
.ck-master__name { margin: 0; font: 400 clamp(18px, 1.8vw, 24px)/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; color: #ff8a8a; }
.ck-master.is-on .ck-master__name { color: var(--accent); }
.ck-panel.is-all .ck-sw__led { animation: ck-wave 0.9s ease-in-out 2; }
.ck-panel.is-all .ck-sw:nth-child(2) .ck-sw__led { animation-delay: 0.05s; }
.ck-panel.is-all .ck-sw:nth-child(3) .ck-sw__led { animation-delay: 0.1s; }
.ck-panel.is-all .ck-sw:nth-child(4) .ck-sw__led { animation-delay: 0.15s; }
.ck-panel.is-all .ck-sw:nth-child(5) .ck-sw__led { animation-delay: 0.2s; }
.ck-panel.is-all .ck-sw:nth-child(6) .ck-sw__led { animation-delay: 0.1s; }
.ck-panel.is-all .ck-sw:nth-child(7) .ck-sw__led { animation-delay: 0.15s; }
.ck-panel.is-all .ck-sw:nth-child(8) .ck-sw__led { animation-delay: 0.2s; }
.ck-panel.is-all .ck-sw:nth-child(9) .ck-sw__led { animation-delay: 0.25s; }
.ck-panel.is-all .ck-sw:nth-child(10) .ck-sw__led { animation-delay: 0.3s; }
@keyframes ck-wave { 50% { background: #fff; box-shadow: 0 0 16px #fff; } }

/* --------------------------------------------------------------------------
   Phones / small tablets: no pin — tap to flip, each switch shows its card
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .ck__stage { display: block; height: auto; min-height: 0; overflow: visible; padding-top: clamp(80px, 12vh, 120px); padding-bottom: 60px; }
  .ck-now { display: none; }
  .ck-panel { margin-top: 28px; }
  .ck-panel__top { position: sticky; top: calc(var(--nav-top) + var(--nav-h) + 8px); z-index: 2; padding: 10px; margin: -6px -6px 0; border-radius: 18px; background: #151b1f; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.8); }
  .ck-radar { width: 110px; }
  .ck-grid { grid-template-columns: 1fr; gap: 8px; }
  .ck-sw { grid-template-columns: auto 1fr; justify-items: start; align-items: center; column-gap: 14px; row-gap: 0; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); text-align: left; }
  .ck-sw__btn { --h: 58px; grid-row: span 2; }
  .ck-sw__name { padding: 0; background: none; font-size: 13px; color: #e9eef1; }
  .ck-sw__body { display: block; margin: 6px 0 0; font: 500 13px/1.4 var(--font-body); color: #9aa6ad; }
  .ck-sw__body em { display: block; margin-top: 4px; font-style: normal; font-size: 11.5px; color: #6c7a82; }
}