/**
 * CKD Hub — application styles.
 *
 * Ported from the signed-off prototype (ckd-hub-prototype.html) with every
 * class and custom property mechanically prefixed ckd- / --ckd-, per spec §2.3.
 * The prototype learned that lesson the hard way: an unprefixed .tag collided
 * with a theme rule and rendered an invisible white pill on the sign-in page.
 *
 * Visual values are the prototype's, unchanged. If a colour or spacing value
 * here differs from the prototype, that is a bug in the port, not a decision.
 *
 * Responsive via CSS container queries, not viewport media queries, so
 * components respond to their own width — spec §13.4.
 *
 * Logical properties are used for new rules so that adding Arabic later is a
 * stylesheet rather than a rewrite.
 */
.ckd-app{
  container-type:inline-size;
  container-name:ckdapp;

  --ckd-ink:#05231A;
  --ckd-ink-2:#0B342A;
  --ckd-ink-3:#12463A;
  --ckd-paper:#F1F4F0;
  --ckd-surface:#FFFFFF;
  --ckd-green:#00E47C;          /* BI accent green, sampled from supplied artwork */
  --ckd-green-soft:#5FE3A4;     /* lower-chroma accent for display type on dark */
  --ckd-green-deep:#00A85C;
  --ckd-green-ink:#00663A;
  --ckd-bi-navy:#123274;        /* BI corporate blue, sampled from supplied logo */
  --ckd-slate:#5A6B64;
  --ckd-slate-2:#84968D;
  --ckd-line:#DDE4DD;
  --ckd-line-2:#EDF1EC;
  --ckd-amber:#FFB000;
  --ckd-amber-ink:#8A6000;
  --ckd-red:#D4553C;

  --ckd-r-sm:8px; --ckd-r:12px; --ckd-r-lg:16px;
  --ckd-sh-1:0 1px 2px rgba(5,35,26,.06);
  --ckd-sh-2:0 2px 6px rgba(5,35,26,.06), 0 14px 34px -20px rgba(5,35,26,.4);
  --ckd-sh-3:0 -8px 60px rgba(0,0,0,.4);

  --ckd-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ckd-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

.ckd-app,.ckd-app *,.ckd-app *::before,.ckd-app *::after{box-sizing:border-box}
html,.ckd-body{margin:0;padding:0;height:100%}
.ckd-body{
  background:#DDE3DC;color:var(--ckd-ink);font-family:var(--ckd-sans);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
.ckd-app h1,.ckd-app h2,.ckd-app h3,.ckd-app h4{margin:0;line-height:1.15;letter-spacing:-.02em;font-weight:700}
.ckd-app p{margin:0}
.ckd-app button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ckd-app a{color:inherit;text-decoration:none}
.ckd-app ul{margin:0;padding:0;list-style:none}
.ckd-app input{font:inherit}
.ckd-app :focus-visible{outline:2.5px solid var(--ckd-green-deep);outline-offset:2px;border-radius:6px}
.ckd-mono{font-family:var(--ckd-mono);font-variant-numeric:tabular-nums}
.ckd-app svg.ckd-i{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---- logo assets ----
   width:auto + align-self stop flex/grid parents from stretching the
   bitmap out of its aspect ratio. */
.ckd-logo-ckd{display:block;width:auto;align-self:flex-start;flex:none;max-width:100%;object-fit:contain}
.ckd-logo-bi{display:block;height:26px;width:auto;align-self:flex-start;flex:none;object-fit:contain}

/* ===================== screens ===================== */
.ckd-screen{display:none;height:100%}
.ckd-screen.ckd-is-on{display:block}

/* ===================== app shell ===================== */
.ckd-shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh;height:100%}

.ckd-side{
  background:var(--ckd-ink);color:#fff;padding:22px 14px 16px;
  display:flex;flex-direction:column;gap:18px;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.ckd-side-brand{padding:2px 8px 0;flex:none}
.ckd-side-brand .ckd-logo-ckd{height:54px;margin:0 auto;align-self:center}

/* identity sits directly under the brand — a person should see whose
   account they're in before they see where they can go */
.ckd-side-user{
  display:flex;align-items:center;gap:11px;padding:11px;border-radius:13px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.07);flex:none;
}
.ckd-side-user .ckd-meta{min-width:0}
.ckd-side-user .ckd-nm{font-size:13.5px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ckd-side-user .ckd-rl{font-size:11.5px;color:rgba(255,255,255,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.ckd-nav-group{flex:none}
.ckd-nav-group + .ckd-nav-group{margin-top:16px}
.ckd-nav-label{
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:rgba(255,255,255,.3);padding:0 12px;margin-bottom:7px;
}

/* progress card occupies the space the nav leaves empty, and earns it */
.ckd-side-prog{
  flex:none;padding:14px;border-radius:13px;
  background:rgba(0,228,124,.07);border:1px solid rgba(0,228,124,.16);
}
.ckd-side-prog .ckd-t{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ckd-side-prog .ckd-t b{font-size:12.5px;font-weight:600}
.ckd-side-prog .ckd-t span{font-family:var(--ckd-mono);font-size:11.5px;color:var(--ckd-green)}
.ckd-side-prog .ckd-track2{height:5px;border-radius:99px;background:rgba(255,255,255,.14);margin:10px 0 8px;overflow:hidden}
.ckd-side-prog .ckd-track2 i{display:block;height:100%;background:var(--ckd-green);border-radius:99px}
.ckd-side-prog p{font-size:11.2px;color:rgba(255,255,255,.5);line-height:1.45}
.ckd-nav{display:flex;flex-direction:column;gap:2px}
.ckd-nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:rgba(255,255,255,.62);font-size:14.5px;transition:.15s}
.ckd-nav a:hover{color:#fff;background:rgba(255,255,255,.07)}
.ckd-nav a.ckd-on{background:rgba(255,255,255,.11);color:#fff;font-weight:600}
.ckd-nav a.ckd-on svg.ckd-i{stroke:var(--ckd-green)}
.ckd-avatar{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--ckd-green);color:var(--ckd-ink);font-weight:700;font-size:13px}
.ckd-side-foot{margin-top:auto;padding-top:16px;flex:none}
.ckd-side-spon{border-top:1px solid rgba(255,255,255,.1);padding-top:13px}
.ckd-side-spon .ckd-lbl{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.32);margin-bottom:8px;font-weight:600}
.ckd-side-spon .ckd-logo-bi{height:20px;opacity:.9}
.ckd-side-legal{font-size:10.8px;color:rgba(255,255,255,.34);line-height:1.75;padding:12px 4px 0}
.ckd-side-legal a{color:rgba(255,255,255,.55)}
.ckd-side-legal a:hover{color:#fff;text-decoration:underline}

.ckd-appbar{display:none}
.ckd-botnav{display:none}
.ckd-main{padding:40px 40px 68px;max-width:1060px;width:100%;margin:0 auto}

/* ===================== responsive shell ===================== */
@container ckdapp (max-width: 900px){
  .ckd-shell{grid-template-columns:1fr;display:flex;flex-direction:column;height:100%;min-height:0}
  .ckd-side{display:none}

  .ckd-appbar{
    display:flex;align-items:center;gap:11px;background:var(--ckd-ink);color:#fff;
    padding:11px 14px;flex:none;z-index:30;padding-top:calc(11px + env(safe-area-inset-top));
  }
  .ckd-appbar .ckd-mark{height:30px;width:auto;flex:none}
  .ckd-appbar .ckd-grow{flex:1;min-width:0}
  .ckd-appbar .ckd-ttl{font-size:15.5px;font-weight:700;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ckd-appbar .ckd-sub{font-size:11px;color:rgba(255,255,255,.48);font-weight:500;letter-spacing:.06em;text-transform:uppercase}
  .ckd-appbar .ckd-ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.09);flex:none}
  .ckd-appbar .ckd-avatar{width:31px;height:31px;font-size:12px}

  .ckd-scrollarea{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0}
  .ckd-main{padding:16px 15px 24px;max-width:none}

  .ckd-botnav{
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--ckd-surface);
    border-top:1px solid var(--ckd-line);flex:none;z-index:40;padding-bottom:env(safe-area-inset-bottom);
  }
  .ckd-botnav a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:9px 3px 10px;color:var(--ckd-slate-2);font-size:10px;font-weight:600;position:relative;letter-spacing:-.01em;
  }
  .ckd-botnav a svg.ckd-i{width:22px;height:22px;stroke-width:1.6}
  .ckd-botnav a.ckd-on{color:var(--ckd-ink)}
  .ckd-botnav a.ckd-on svg.ckd-i{stroke:var(--ckd-green-deep);stroke-width:2}
  .ckd-botnav a.ckd-on::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:26px;height:3px;background:var(--ckd-green-deep);border-radius:0 0 3px 3px}
}

/* ===================== login ===================== */
.ckd-login{display:grid;grid-template-columns:1.08fr .92fr;min-height:100vh;background:var(--ckd-ink)}
.ckd-login-art{
  position:relative;overflow:hidden;padding:56px 64px;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:0;
  /* eases toward the inner edge so the step onto the light panel isn't a hard cut */
  background:linear-gradient(105deg,#04201A 0%,#062A22 62%,#093428 100%);
}
/* content grouped as one stack — space-between across a full-height column
   was what produced the dead gaps */
.ckd-art-stack{position:relative;z-index:2;width:100%;max-width:500px}
/* watermark held near its native size — upscaling it turned the mark
   into an unreadable blur */
.ckd-login-art .ckd-watermark{
  position:absolute;right:-13%;top:50%;transform:translateY(-50%);
  width:76%;max-width:none;height:auto;opacity:.075;z-index:0;pointer-events:none;
}
.ckd-login-art canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.ckd-lockup{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:36px}
.ckd-lockup .ckd-logo-ckd{height:84px}
.ckd-lockup .ckd-tagline{font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.5);padding-left:3px}
.ckd-login-art h1{color:#fff;font-size:clamp(27px,2.9vw,40px);font-weight:800;max-width:16ch;letter-spacing:-.03em;line-height:1.13}
.ckd-login-art h1 em{font-style:normal;color:var(--ckd-green-soft)}
.ckd-login-art .ckd-lede{color:rgba(255,255,255,.62);max-width:42ch;margin-top:14px;font-size:14.5px}
.ckd-facts{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.ckd-fact{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px 13px;flex:1;min-width:92px}
.ckd-fact b{display:block;font-family:var(--ckd-mono);font-size:18px;color:#fff;font-weight:600}
.ckd-fact span{font-size:11px;color:rgba(255,255,255,.5)}

.ckd-login-form{background:#FCFDFC;padding:56px 52px;display:flex;flex-direction:column;justify-content:center;overflow-y:auto}
.ckd-login-inner{max-width:388px;width:100%;margin:0 auto}
.ckd-eyebrow{font-family:var(--ckd-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ckd-green-deep);font-weight:500}
.ckd-login-form h2{font-size:25px;margin:9px 0 6px;letter-spacing:-.03em}
.ckd-login-form .ckd-sub{color:var(--ckd-slate);margin-bottom:20px;font-size:14.3px}

.ckd-field{margin-bottom:14px}
label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px}
.ckd-inp{width:100%;padding:13px 14px;border:1.5px solid var(--ckd-line);border-radius:10px;background:#fff;transition:.15s}
.ckd-inp::placeholder{color:var(--ckd-slate-2)}
.ckd-inp:focus{border-color:var(--ckd-ink);background:#fff;outline:none}

.ckd-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ckd-ink);color:#fff;padding:13px 20px;border-radius:11px;font-weight:600;font-size:14.5px;transition:.14s;width:100%}
.ckd-btn:hover{background:var(--ckd-ink-2)}
.ckd-btn:active{transform:translateY(1px)}
.ckd-btn svg.ckd-i{width:18px;height:18px}
.ckd-btn-green{background:var(--ckd-green);color:var(--ckd-ink)}
.ckd-btn-green:hover{background:#12F58A}
.ckd-btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:transparent;color:var(--ckd-ink);border:1.5px solid var(--ckd-line);
  width:auto;padding:11px 17px;border-radius:11px;font-weight:600;font-size:14.5px;transition:.14s;
}
.ckd-btn-ghost svg.ckd-i{width:18px;height:18px}
.ckd-btn-ghost:active{transform:translateY(1px)}
.ckd-btn-ghost[disabled]{opacity:.4;cursor:default;transform:none}
.ckd-btn-ghost:hover{background:var(--ckd-paper);border-color:var(--ckd-slate-2)}
.ckd-btn-auto{width:auto}
.ckd-btn[disabled]{opacity:.4;cursor:default;transform:none}

.ckd-note{display:flex;gap:10px;align-items:flex-start;background:var(--ckd-paper);border-radius:11px;padding:12px 14px;border:1px solid var(--ckd-line-2);font-size:12.8px;color:var(--ckd-slate);margin-bottom:18px}
.ckd-note svg.ckd-i{width:17px;height:17px;stroke:var(--ckd-slate);margin-top:1px}
.ckd-hint{font-size:12.7px;color:var(--ckd-slate);margin-top:13px;line-height:1.6}
.ckd-link{color:var(--ckd-green-deep);font-weight:600}
.ckd-link:hover{text-decoration:underline}

.ckd-otp{display:flex;gap:7px;margin:2px 0 16px}
.ckd-otp input{width:100%;min-width:0;text-align:center;font-family:var(--ckd-mono);font-size:20px;padding:13px 0;border:1.5px solid var(--ckd-line);border-radius:10px;background:var(--ckd-paper)}
.ckd-otp input:focus{border-color:var(--ckd-ink);background:#fff;outline:none}

.ckd-spon{display:flex;align-items:center;gap:12px;margin-top:24px;padding-top:18px;border-top:1px solid var(--ckd-line)}
.ckd-spon .ckd-lbl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ckd-slate-2);font-weight:700;line-height:1.4;flex:none}
.ckd-legal{margin-top:14px;font-size:11.5px;color:var(--ckd-slate);line-height:1.65}
.ckd-legal a{color:var(--ckd-green-deep);border-bottom:1px solid rgba(0,168,92,.28)}
.ckd-legal .ckd-code{display:block;margin-top:7px;font-family:var(--ckd-mono);font-size:10.5px;color:var(--ckd-slate-2)}

@container ckdapp (max-width: 900px){
  /* the fix: never force 100vh inside the app container, and let the
     whole screen scroll as one column */
  .ckd-login{
    display:block;grid-template-columns:none;min-height:0;height:100%;
    background:var(--ckd-ink);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  .ckd-login-art{
    padding:24px 18px 28px;gap:0;display:block;
    background:linear-gradient(170deg,#04201A 0%,#083026 100%);
    padding-top:calc(24px + env(safe-area-inset-top));
  }
  .ckd-art-stack{max-width:none}
  .ckd-login-art .ckd-watermark{width:74%;right:auto;left:50%;top:50%;transform:translate(-50%,-50%);opacity:.06}
  .ckd-lockup{align-items:center;text-align:center;margin:0 auto 18px}
  .ckd-lockup .ckd-logo-ckd{align-self:center}
  .ckd-lockup .ckd-logo-ckd{height:76px}
  .ckd-lockup .ckd-tagline{font-size:9px;letter-spacing:.26em;padding-left:0}
  .ckd-login-art h1{font-size:24px;max-width:none;text-align:center;line-height:1.16}
  .ckd-login-art .ckd-lede{font-size:13px;margin:9px auto 16px;text-align:center;max-width:none}
  .ckd-facts{gap:7px;margin-top:20px}
  .ckd-fact{padding:8px 9px;min-width:0;text-align:center}
  .ckd-fact b{font-size:15px}
  .ckd-fact span{font-size:10px;line-height:1.3;display:block}
  .ckd-login-form{padding:24px 18px 34px;border-radius:22px 22px 0 0;margin-top:16px;display:block;overflow:visible}
  .ckd-login-form h2{font-size:22px}
  .ckd-login-form .ckd-sub{font-size:13.5px}
  .ckd-otp input{font-size:18px;padding:12px 0}
}

/* ===================== generic blocks ===================== */
.ckd-pagehead{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:26px}
.ckd-pagehead h1{font-size:28px;letter-spacing:-.03em}
.ckd-pagehead p{color:var(--ckd-slate);margin-top:6px;font-size:14.3px}
.ckd-live{display:flex;align-items:center;gap:8px;font-size:12.6px;color:var(--ckd-slate);background:var(--ckd-surface);border:1px solid var(--ckd-line);padding:7px 13px;border-radius:99px;white-space:nowrap}
.ckd-beat{width:7px;height:7px;border-radius:50%;background:var(--ckd-green-deep);animation:beat 2.2s infinite;flex:none}
@keyframes beat{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

.ckd-resume{background:var(--ckd-ink);color:#fff;border-radius:var(--ckd-r-lg);padding:25px 27px;display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:28px;position:relative;overflow:hidden}
.ckd-resume::after{content:"";position:absolute;right:-70px;top:-70px;width:230px;height:230px;border-radius:50%;border:1px solid rgba(0,228,124,.2)}
.ckd-resume .ckd-body{position:relative;z-index:1;min-width:0}
.ckd-resume .ckd-k{font-family:var(--ckd-mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ckd-green);font-weight:500}
.ckd-resume h3{font-size:18.5px;margin:9px 0 7px;font-weight:600;letter-spacing:-.02em}
.ckd-resume .ckd-meta{color:rgba(255,255,255,.58);font-size:12.4px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ckd-resume .ckd-btn{position:relative;z-index:1;flex:none}

.ckd-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:34px}
.ckd-stat{background:var(--ckd-surface);border:1px solid var(--ckd-line);border-radius:var(--ckd-r);padding:18px 19px}
.ckd-stat .ckd-top{display:flex;align-items:center;gap:8px;color:var(--ckd-slate);margin-bottom:10px}
.ckd-stat .ckd-top svg.ckd-i{width:16px;height:16px}
.ckd-stat .ckd-top span{font-size:11.3px;font-weight:600}
.ckd-stat .ckd-n{font-size:26px;font-weight:700;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.ckd-stat .ckd-n i{font-style:normal;color:var(--ckd-slate-2);font-size:16px;font-weight:600}

.ckd-sechead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin:0 0 16px}
.ckd-sechead h2{font-size:17.5px;letter-spacing:-.02em}
.ckd-sechead span{font-size:12.4px;color:var(--ckd-slate)}

.ckd-modules{display:flex;flex-direction:column;gap:10px}
.ckd-mod{background:var(--ckd-surface);border:1px solid var(--ckd-line);border-radius:var(--ckd-r);padding:19px 21px;display:grid;grid-template-columns:44px 1fr auto;gap:18px;align-items:center;transition:.16s}
.ckd-mod:hover{border-color:#C3D0C6;box-shadow:var(--ckd-sh-1)}
.ckd-mod .ckd-num{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--ckd-line);display:grid;place-items:center;font-family:var(--ckd-mono);font-size:13px;color:var(--ckd-slate);flex:none}
.ckd-mod.ckd-done .ckd-num{background:var(--ckd-green);border-color:var(--ckd-green);color:var(--ckd-ink)}
.ckd-mod.ckd-done .ckd-num svg.ckd-i{width:19px;height:19px;stroke:var(--ckd-ink);stroke-width:2.4}
.ckd-mod.ckd-active .ckd-num{border-color:var(--ckd-ink);border-width:2px;color:var(--ckd-ink);font-weight:700}
.ckd-mod.ckd-locked{opacity:.62}
.ckd-mod.ckd-locked:hover{border-color:var(--ckd-line);box-shadow:none}
.ckd-mod.ckd-locked .ckd-num svg.ckd-i{width:16px;height:16px;stroke:var(--ckd-slate-2)}
.ckd-mod .ckd-lockedby{display:inline-flex;align-items:center;gap:7px;font-size:12.4px;color:var(--ckd-slate-2);white-space:nowrap;padding-right:4px}
.ckd-mod .ckd-lockedby svg.ckd-i{width:14px;height:14px}
.ckd-mod h3{font-size:16px;font-weight:600;letter-spacing:-.015em;line-height:1.35}
.ckd-mod .ckd-row{display:flex;gap:9px;align-items:center;margin-top:10px;font-size:12.4px;color:var(--ckd-slate);flex-wrap:wrap}
.ckd-chip{font-family:var(--ckd-mono);font-size:10.8px;padding:3px 8px;border-radius:6px;background:var(--ckd-paper);color:var(--ckd-slate);display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.ckd-chip svg.ckd-i{width:12px;height:12px;stroke-width:2}
.ckd-chip.ckd-q{background:rgba(255,176,0,.15);color:var(--ckd-amber-ink)}
.ckd-chip.ckd-ok{background:rgba(0,228,124,.16);color:var(--ckd-green-ink)}
.ckd-bar{height:5px;background:var(--ckd-line);border-radius:99px;overflow:hidden;width:120px;flex:none}
.ckd-bar i{display:block;height:100%;background:var(--ckd-green-deep);border-radius:99px}

.ckd-callout{margin-top:30px;border:1.5px dashed var(--ckd-line);border-radius:var(--ckd-r);padding:23px 25px;display:flex;gap:18px;align-items:center;justify-content:space-between;background:var(--ckd-surface)}
.ckd-callout .ckd-ico{width:44px;height:44px;border-radius:12px;background:var(--ckd-paper);display:grid;place-items:center;flex:none}
.ckd-callout .ckd-ico svg.ckd-i{width:22px;height:22px;stroke:var(--ckd-green-deep)}
.ckd-callout h3{font-size:15.5px;font-weight:600}
.ckd-callout p{color:var(--ckd-slate);font-size:12.8px;margin-top:5px;max-width:54ch}
.ckd-callout .ckd-grp{display:flex;gap:16px;align-items:center;min-width:0}

.ckd-spon-strip{margin-top:34px;display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--ckd-line)}
.ckd-spon-strip .ckd-lbl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ckd-slate-2);font-weight:700}
.ckd-spon-strip .ckd-logo-bi{height:21px}

@container ckdapp (max-width: 900px){
  .ckd-pagehead{align-items:flex-start;margin-bottom:14px;gap:10px}
  .ckd-pagehead h1{font-size:21px}
  .ckd-pagehead p{font-size:13.2px}
  .ckd-live{font-size:11.8px;padding:6px 11px}
  .ckd-resume{flex-direction:column;align-items:stretch;padding:17px}
  .ckd-resume h3{font-size:16.5px}
  .ckd-resume .ckd-btn{width:100%;margin-top:2px}
  .ckd-stats{grid-template-columns:repeat(2,1fr);gap:8px}
  .ckd-stat{padding:12px 13px}
  .ckd-stat .ckd-n{font-size:22px}
  .ckd-mod{grid-template-columns:38px 1fr;gap:12px;padding:13px 14px}
  .ckd-mod .ckd-num{width:38px;height:38px}
  .ckd-mod .ckd-bar{display:none}
  .ckd-mod > .ckd-btn,.ckd-mod > .ckd-btn-ghost{grid-column:1/-1;width:100%;justify-content:center;margin-top:4px}
  .ckd-mod > .ckd-lockedby{grid-column:1/-1;margin-top:2px}
  .ckd-btn,.ckd-btn-ghost{min-height:46px}
  .ckd-callout{flex-direction:column;align-items:stretch;gap:14px;padding:16px}
  .ckd-callout .ckd-grp{align-items:flex-start;gap:13px}
  .ckd-callout .ckd-ico{width:40px;height:40px}
  .ckd-callout p{margin-top:6px}
  .ckd-callout .ckd-btn-ghost{width:100%;justify-content:center}
}

/* ===================== player ===================== */
.ckd-player{background:var(--ckd-ink);min-height:100vh;display:flex;flex-direction:column;height:100%;position:relative}
/* fullscreen: the player element goes full screen, not the iframe, so the
   knowledge-check overlay still has somewhere to render */
.ckd-player:fullscreen,.ckd-player:-webkit-full-screen{background:#000;min-height:100vh}
.ckd-player:fullscreen .ckd-player-body{display:flex;align-items:center;justify-content:center;padding:0 18px}
.ckd-player:fullscreen .ckd-player-grid{grid-template-columns:minmax(0,1fr);max-width:1600px}
.ckd-player:fullscreen .ckd-panel{display:none}
.ckd-player:fullscreen .ckd-stage{border-radius:8px}
.ckd-player:fullscreen .ckd-player-bar{background:rgba(0,0,0,.5)}
.ckd-player-bar{display:flex;align-items:center;gap:13px;padding:13px 20px;color:#fff;flex:none;border-bottom:1px solid rgba(255,255,255,.07)}
.ckd-player-bar .ckd-ic{width:37px;height:37px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.09);flex:none}
.ckd-player-bar .ckd-ic:hover{background:rgba(255,255,255,.17)}
.ckd-player-bar .ckd-mid{flex:1;min-width:0}
.ckd-player-bar .ckd-k{font-family:var(--ckd-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ckd-green);font-weight:500}
.ckd-player-bar h2{font-size:15.5px;font-weight:600;letter-spacing:-.02em;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ckd-modpick{display:flex;gap:4px;flex:none}
.ckd-modpick button{
  width:30px;height:30px;border-radius:9px;font-size:12.5px;font-weight:600;
  color:rgba(255,255,255,.55);background:rgba(255,255,255,.07);
}
.ckd-modpick button:hover{color:#fff;background:rgba(255,255,255,.15)}
.ckd-modpick button[aria-current="true"]{background:var(--ckd-green);color:var(--ckd-ink)}
.ckd-player-bar .ckd-prog{display:flex;align-items:center;gap:8px;font-size:12.4px;color:rgba(255,255,255,.6);flex:none}
.ckd-player-bar .ckd-prog svg.ckd-i{width:16px;height:16px;stroke:var(--ckd-green)}

.ckd-player-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:20px;min-height:0}
/* the page was 1888px wide with a 960px video and ~180px of dead space
   below — the width now carries chapters and transcript */
.ckd-player-grid{
  display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;
  max-width:1400px;margin:0 auto;width:100%;align-items:start;
}
.ckd-stage{width:100%;background:#000;border-radius:var(--ckd-r-lg);overflow:hidden;position:relative;aspect-ratio:16/9;flex:none}
.ckd-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* transparent shim: swallows clicks on the Vimeo surface so seeking can
   only happen through our own controls, which enforce the check gates */
.ckd-vshade{position:absolute;inset:0;z-index:2;cursor:pointer}
.ckd-vloading{
  position:absolute;inset:0;display:grid;place-items:center;z-index:1;
  background:#04201A;color:rgba(255,255,255,.5);font-size:13px;
}
.ckd-vloading.ckd-hide{display:none}
/* buffering state was invisible: Vimeo stalls, playback stops, and the UI
   gave no sign anything was happening */
.ckd-vbuffer{
  position:absolute;inset:0;z-index:4;display:none;place-items:center;
  background:rgba(4,32,26,.45);backdrop-filter:blur(2px);
}
.ckd-vbuffer.ckd-on{display:grid}
.ckd-vbuffer .ckd-sp{
  width:38px;height:38px;border-radius:50%;
  border:3px solid rgba(255,255,255,.18);border-top-color:var(--ckd-green);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.ckd-vbuffer .ckd-tx{
  position:absolute;margin-top:64px;font-size:12.5px;color:rgba(255,255,255,.7);
  font-family:var(--ckd-mono);letter-spacing:.06em;
}
@media(prefers-reduced-motion:reduce){.ckd-vbuffer .ckd-sp{display:none}}
.ckd-bigplay{z-index:3}
/* caption bar — off by default, toggled from the control row */
.ckd-ccbar{
  display:none;margin-top:12px;padding:12px 16px;border-radius:10px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);
  color:rgba(255,255,255,.85);font-size:14px;line-height:1.5;text-align:center;
}
.ckd-ccbar.ckd-on{display:block}
.ckd-bigplay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(5,35,26,.4);transition:opacity .25s}
.ckd-bigplay span{width:68px;height:68px;border-radius:50%;background:var(--ckd-green);display:grid;place-items:center;box-shadow:0 10px 44px rgba(0,228,124,.42)}
.ckd-bigplay span svg{width:25px;height:25px;fill:var(--ckd-ink);stroke:none;margin-left:3px}
.ckd-bigplay.ckd-hide{opacity:0;pointer-events:none}

.ckd-controls{width:100%;margin-top:13px;flex:none}
.ckd-track{position:relative;height:30px;display:flex;align-items:center;cursor:pointer;touch-action:none}
.ckd-track-bg,.ckd-track-seen,.ckd-track-fill{position:absolute;left:0;height:6px;border-radius:99px}
.ckd-track-bg{right:0;background:rgba(255,255,255,.15)}
.ckd-track-seen{background:rgba(255,255,255,.3)}
.ckd-track-fill{background:var(--ckd-green)}
.ckd-head{position:absolute;width:15px;height:15px;border-radius:50%;background:#fff;transform:translateX(-7.5px);box-shadow:0 0 0 5px rgba(0,228,124,.24);pointer-events:none}
.ckd-cp{position:absolute;width:11px;height:11px;transform:translateX(-5.5px) rotate(45deg);background:var(--ckd-amber);border-radius:2px;pointer-events:none}
.ckd-cp.ckd-cleared{background:var(--ckd-green)}
.ckd-cp-lab{position:absolute;transform:translateX(-50%);bottom:24px;font-family:var(--ckd-mono);font-size:9.5px;color:rgba(255,255,255,.5);pointer-events:none}

.ckd-ctrls{display:flex;align-items:center;gap:12px;margin-top:8px;color:rgba(255,255,255,.7);font-size:12.8px}
.ckd-ctrls .ckd-sp{margin-left:auto;display:flex;align-items:center;gap:4px}
.ckd-ctrls .ckd-tool{
  min-width:38px;height:38px;padding:0 10px;border-radius:10px;color:rgba(255,255,255,.72);
  display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:12.5px;font-weight:600;
}
.ckd-ctrls .ckd-tool:hover{background:rgba(255,255,255,.1);color:#fff}
.ckd-ctrls .ckd-tool[aria-pressed="true"]{background:rgba(0,228,124,.16);color:var(--ckd-green)}
.ckd-ctrls .ckd-tool svg.ckd-i{width:17px;height:17px}
.ckd-ctrls .ckd-rnd{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.11);color:#fff;display:grid;place-items:center;flex:none}
.ckd-ctrls .ckd-rnd:hover{background:rgba(255,255,255,.2)}
.ckd-ctrls .ckd-rnd svg{stroke:none;fill:#fff;width:16px;height:16px}
.ckd-ctrls .ckd-time{font-family:var(--ckd-mono);font-size:13px;color:#fff;font-variant-numeric:tabular-nums}
.ckd-ctrls .ckd-time em{font-style:normal;color:rgba(255,255,255,.42)}
.ckd-legendkey{display:flex;align-items:center;gap:7px;font-size:11.4px;color:rgba(255,255,255,.5)}
.ckd-legendkey i{width:9px;height:9px;background:var(--ckd-amber);border-radius:2px;transform:rotate(45deg);display:block}
.ckd-lockmsg{margin-left:auto;font-size:11.8px;color:var(--ckd-amber);display:flex;align-items:center;gap:6px;opacity:0;transition:.25s}
.ckd-lockmsg.ckd-show{opacity:1}
.ckd-lockmsg svg.ckd-i{width:14px;height:14px;stroke:var(--ckd-amber)}

.ckd-panel{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);border-radius:var(--ckd-r-lg);overflow:hidden;color:#fff}
.ckd-panel-tabs{display:flex;gap:2px;padding:8px;border-bottom:1px solid rgba(255,255,255,.08)}
.ckd-panel-tabs button{
  flex:1;padding:9px 10px;border-radius:9px;font-size:13px;font-weight:600;
  color:rgba(255,255,255,.55);
}
.ckd-panel-tabs button:hover{color:#fff;background:rgba(255,255,255,.06)}
.ckd-panel-tabs button[aria-selected="true"]{background:rgba(255,255,255,.11);color:#fff}
.ckd-panel-body{padding:8px;max-height:min(58vh,520px);overflow-y:auto}
.ckd-panel-body[hidden]{display:none}

.ckd-chap{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;
  width:100%;text-align:left;padding:11px 12px;border-radius:10px;color:#fff;
}
.ckd-chap:hover{background:rgba(255,255,255,.07)}
.ckd-chap .ckd-n{font-family:var(--ckd-mono);font-size:11px;color:rgba(255,255,255,.4);width:16px}
.ckd-chap .ckd-t{font-size:13.4px;font-weight:500;line-height:1.35;color:rgba(255,255,255,.82)}
.ckd-chap .ckd-tm{font-family:var(--ckd-mono);font-size:11.5px;color:rgba(255,255,255,.4)}
.ckd-chap.ckd-on{background:rgba(0,228,124,.13)}
.ckd-chap.ckd-on .ckd-t{color:#fff;font-weight:600}
.ckd-chap.ckd-on .ckd-n{color:var(--ckd-green)}
.ckd-chap.ckd-ahead{opacity:.45;cursor:default}
.ckd-chap.ckd-ahead:hover{background:none}
.ckd-chap.ckd-ahead .ckd-tm svg.ckd-i{width:13px;height:13px;stroke:rgba(255,255,255,.5)}
.ckd-chap-empty{padding:14px 12px;font-size:12.6px;color:rgba(255,255,255,.45);line-height:1.6}
.ckd-chap-q{
  display:flex;align-items:center;gap:8px;padding:7px 12px 7px 40px;
  font-size:12px;color:var(--ckd-amber);
}
.ckd-chap-q i{width:8px;height:8px;background:var(--ckd-amber);border-radius:2px;transform:rotate(45deg);display:block;flex:none}
.ckd-chap-q.ckd-done{color:var(--ckd-green)}
.ckd-chap-q.ckd-done i{background:var(--ckd-green)}

.ckd-tscript{padding:6px 12px 12px;font-size:13.3px;line-height:1.75;color:rgba(255,255,255,.62)}
.ckd-tscript p{margin-bottom:14px;cursor:pointer;border-radius:8px;padding:4px 6px;margin-left:-6px}
.ckd-tscript p:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.85)}
.ckd-tscript p.ckd-on{background:rgba(0,228,124,.1);color:#fff}
.ckd-tscript p b{color:#fff;font-family:var(--ckd-mono);font-size:11px;font-weight:500;display:block;margin-bottom:3px}

.ckd-panel-note{
  display:flex;gap:9px;padding:12px 14px;border-top:1px solid rgba(255,255,255,.08);
  font-size:11.8px;color:rgba(255,255,255,.5);line-height:1.5;
}
.ckd-panel-note svg.ckd-i{width:15px;height:15px;stroke:var(--ckd-green);flex:none;margin-top:1px}

/* ---- question overlay: sits over the WHOLE player, not inside the 16:9 stage ---- */
.ckd-qmask{
  position:absolute;inset:0;z-index:60;background:rgba(5,35,26,.76);backdrop-filter:blur(7px);
  display:flex;align-items:center;justify-content:center;padding:22px;
  opacity:0;pointer-events:none;transition:opacity .28s;
}
.ckd-qmask.ckd-on{opacity:1;pointer-events:auto}
.ckd-qcard{
  background:var(--ckd-surface);border-radius:18px;width:min(560px,100%);
  max-height:100%;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 30px 90px -20px rgba(0,0,0,.6);
  transform:translateY(16px) scale(.985);transition:transform .32s cubic-bezier(.2,.9,.3,1);
}
.ckd-qmask.ckd-on .ckd-qcard{transform:none}
.ckd-qgrab{display:none}
.ckd-qhead{
  padding:18px 24px 0;flex:none;display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-family:var(--ckd-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ckd-green-deep);font-weight:500;
}
.ckd-qhead .ckd-pill{display:flex;align-items:center;gap:6px;background:var(--ckd-paper);color:var(--ckd-slate);padding:4px 9px;border-radius:99px;letter-spacing:.04em}
.ckd-qhead .ckd-pill svg.ckd-i{width:13px;height:13px;stroke-width:2}
.ckd-qbody{padding:0 24px;overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1;min-height:0}
.ckd-qbody h3{font-size:18.5px;margin:12px 0 16px;font-weight:600;letter-spacing:-.02em;line-height:1.32}
.ckd-opts{display:flex;flex-direction:column;gap:8px}
.ckd-opt{border:1.5px solid var(--ckd-line);border-radius:11px;padding:12px 14px;text-align:left;display:flex;gap:12px;align-items:flex-start;font-size:14.2px;line-height:1.4;transition:.13s;width:100%}
.ckd-opt:hover{border-color:var(--ckd-slate-2);background:var(--ckd-paper)}
.ckd-opt .ckd-ltr{font-family:var(--ckd-mono);font-size:11.5px;color:var(--ckd-slate);border:1.5px solid var(--ckd-line);border-radius:7px;width:25px;height:25px;display:grid;place-items:center;flex:none}
.ckd-opt.ckd-sel{border-color:var(--ckd-ink);background:var(--ckd-paper)}
.ckd-opt.ckd-sel .ckd-ltr{background:var(--ckd-ink);color:#fff;border-color:var(--ckd-ink)}
.ckd-opt.ckd-right{border-color:var(--ckd-green-deep);background:rgba(0,228,124,.09)}
.ckd-opt.ckd-right .ckd-ltr{background:var(--ckd-green-deep);color:#fff;border-color:var(--ckd-green-deep)}
.ckd-opt.ckd-wrong{border-color:var(--ckd-red);background:rgba(212,85,60,.07)}
.ckd-opt.ckd-wrong .ckd-ltr{background:var(--ckd-red);color:#fff;border-color:var(--ckd-red)}
.ckd-fb{margin:14px 0 4px;padding:13px 15px;border-radius:11px;background:var(--ckd-paper);font-size:13.2px;color:var(--ckd-slate);line-height:1.55;display:none}
.ckd-fb.ckd-show{display:block}
.ckd-fb b{color:var(--ckd-ink)}
.ckd-qfoot{
  flex:none;padding:14px 24px 18px;border-top:1px solid var(--ckd-line-2);background:var(--ckd-surface);
  display:flex;align-items:center;gap:13px;
}
.ckd-qfoot .ckd-btn{width:auto;padding:12px 22px;flex:none}
.ckd-qfoot .ckd-msg{font-size:12.2px;color:var(--ckd-slate);display:flex;align-items:center;gap:7px;min-width:0}
.ckd-qfoot .ckd-msg svg.ckd-i{width:15px;height:15px;stroke:var(--ckd-slate);flex:none}

@container ckdapp (max-width: 900px){
  /* the fix: a 100vh floor here made the player taller than the phone
     frame, which pushed the bottom of the question sheet off-screen */
  .ckd-player{min-height:0}
  .ckd-shell{min-height:0}
  .ckd-player-bar{padding:11px 13px;padding-top:calc(11px + env(safe-area-inset-top))}
  .ckd-player-bar h2{font-size:13.5px}
  .ckd-player-bar .ckd-prog{display:none}
  .ckd-modpick button{width:32px;height:32px}
  .ckd-player-body{padding:0 0 20px}
  .ckd-player-grid{grid-template-columns:1fr;gap:0;max-width:none}
  .ckd-stage{border-radius:0;max-width:none}
  .ckd-cap{left:14px;right:14px;bottom:14px}
  .ckd-cap h3{font-size:16px}
  .ckd-bigplay span{width:58px;height:58px}
  .ckd-controls{padding:0 15px;margin-top:11px}
  .ckd-panel{margin:16px 15px 0;border-radius:var(--ckd-r)}
  .ckd-panel-body{max-height:none}
  .ckd-legendkey{display:none}
  .ckd-lockmsg{margin-left:0;width:100%;order:9;margin-top:4px}
  .ckd-ctrls{gap:9px;flex-wrap:wrap}
  .ckd-ctrls .ckd-sp{gap:2px}
  .ckd-ctrls .ckd-tool{min-width:40px;height:40px;padding:0 8px}
  .ckd-ctrls .ckd-tool .ckd-lbl2{display:none}

  /* bottom sheet, never taller than the app, always scrollable, footer pinned */
  .ckd-qmask{align-items:flex-end;padding:0}
  .ckd-qcard{
    width:100%;max-width:none;border-radius:20px 20px 0 0;
    max-height:88%;transform:translateY(100%);
  }
  .ckd-qmask.ckd-on .ckd-qcard{transform:none}
  .ckd-qgrab{display:block;width:38px;height:4px;border-radius:99px;background:var(--ckd-line);margin:9px auto 0;flex:none}
  .ckd-qhead{padding:12px 17px 0}
  .ckd-qbody{padding:0 17px}
  .ckd-qbody h3{font-size:16.5px;margin:10px 0 13px}
  .ckd-opt{font-size:13.6px;padding:11px 13px}
  .ckd-qfoot{
    flex-direction:column-reverse;align-items:stretch;gap:9px;
    padding:12px 17px calc(14px + env(safe-area-inset-bottom));
  }
  .ckd-qfoot .ckd-btn{width:100%}
  .ckd-qfoot .ckd-msg{justify-content:center}
}

/* ===================== certificate ===================== */
.ckd-certgrid{display:grid;grid-template-columns:1fr 310px;gap:22px;align-items:start}
.ckd-cert{background:var(--ckd-surface);border:1px solid var(--ckd-line);border-radius:var(--ckd-r-lg);padding:34px 38px;position:relative;overflow:hidden;box-shadow:var(--ckd-sh-2)}
.ckd-cert::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg,var(--ckd-green),var(--ckd-ink))}
.ckd-certtop{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:26px;flex-wrap:wrap}
.ckd-certtop .ckd-logo-ckd{height:58px}
.ckd-certtop .ckd-acc{text-align:right;font-size:10.5px;color:var(--ckd-slate);letter-spacing:.1em;text-transform:uppercase}
.ckd-certtop .ckd-acc b{display:block;font-size:13px;color:var(--ckd-ink);margin-top:4px;letter-spacing:0;text-transform:none}
.ckd-cert .ckd-who{font-family:var(--ckd-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ckd-slate)}
.ckd-cert .ckd-nm{font-size:clamp(24px,3vw,34px);font-weight:800;letter-spacing:-.035em;margin:9px 0 3px}
.ckd-cert .ckd-role{color:var(--ckd-slate);font-size:13.5px}
.ckd-cert .ckd-course{margin-top:20px;color:var(--ckd-slate);font-size:14px}
.ckd-cert .ckd-course b{display:block;color:var(--ckd-ink);font-size:18.5px;font-weight:600;margin-top:5px;letter-spacing:-.02em}
.ckd-certmeta{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px;padding-top:20px;border-top:1px solid var(--ckd-line)}
.ckd-certmeta .ckd-l{font-size:10.5px;text-transform:uppercase;letter-spacing:.11em;color:var(--ckd-slate)}
.ckd-certmeta .ckd-v{font-family:var(--ckd-mono);font-size:13.5px;margin-top:5px}
.ckd-certsign{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-top:24px;flex-wrap:wrap}
.ckd-certsign .ckd-logo-bi{height:24px}
.ckd-certsign .ckd-sp{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ckd-slate-2);font-weight:700;margin-bottom:7px}
.ckd-certfoot{margin-top:18px;font-size:11px;color:var(--ckd-slate-2);line-height:1.65}

.ckd-aside{display:flex;flex-direction:column;gap:10px}
.ckd-card{background:var(--ckd-surface);border:1px solid var(--ckd-line);border-radius:var(--ckd-r);padding:16px 17px}
.ckd-card h4{font-size:14px;font-weight:600;margin-bottom:9px;display:flex;align-items:center;gap:8px}
.ckd-card h4 svg.ckd-i{width:17px;height:17px;stroke:var(--ckd-green-deep)}
.ckd-card p{font-size:12.7px;color:var(--ckd-slate);line-height:1.55}
.ckd-card .ckd-btn{margin-top:12px}
.ckd-ticks li{display:flex;gap:9px;padding:5px 0;font-size:12.8px;color:var(--ckd-slate);align-items:flex-start}
.ckd-ticks li b{color:var(--ckd-ink);font-weight:600}
.ckd-ticks svg.ckd-i{width:16px;height:16px;stroke:var(--ckd-green-deep);stroke-width:2.4;margin-top:2px}

@container ckdapp (max-width: 900px){
  .ckd-certgrid{grid-template-columns:1fr;gap:12px}
  .ckd-cert{padding:22px 18px}
  .ckd-certtop{margin-bottom:20px;gap:12px}
  .ckd-certtop .ckd-logo-ckd{height:46px}
  .ckd-certtop .ckd-acc{text-align:left}
  .ckd-certmeta{grid-template-columns:1fr 1fr;gap:13px}
  .ckd-cert .ckd-nm{font-size:23px}
}

/* ===================== admin ===================== */
.ckd-funnel{display:flex;flex-direction:column;gap:9px}
.ckd-fn{display:grid;grid-template-columns:128px 1fr 54px;gap:11px;align-items:center;font-size:12.8px}
.ckd-fnbar{height:26px;background:var(--ckd-paper);border-radius:7px;overflow:hidden}
.ckd-fnbar i{display:block;height:100%;border-radius:7px}
.ckd-fn:nth-child(1) .ckd-fnbar i{background:var(--ckd-ink)}
.ckd-fn:nth-child(2) .ckd-fnbar i{background:var(--ckd-ink-3)}
.ckd-fn:nth-child(3) .ckd-fnbar i{background:var(--ckd-green-deep)}
.ckd-fn:nth-child(4) .ckd-fnbar i{background:var(--ckd-green)}
.ckd-fn .ckd-n{font-family:var(--ckd-mono);text-align:right;font-variant-numeric:tabular-nums}

.ckd-tbl{background:var(--ckd-surface);border:1px solid var(--ckd-line);border-radius:var(--ckd-r);overflow:hidden}
.ckd-tbl table{width:100%;border-collapse:collapse;font-size:13.3px}
.ckd-tbl th{text-align:left;font-family:var(--ckd-mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--ckd-slate);padding:11px 15px;border-bottom:1px solid var(--ckd-line);font-weight:500;background:var(--ckd-paper)}
.ckd-tbl td{padding:12px 15px;border-bottom:1px solid var(--ckd-line-2)}
.ckd-tbl tr:last-child td{border-bottom:0}
.ckd-tag{font-size:10.8px;padding:3px 9px;border-radius:99px;background:var(--ckd-paper);color:var(--ckd-slate);white-space:nowrap;font-weight:600}
.ckd-tag.ckd-ok{background:rgba(0,228,124,.16);color:var(--ckd-green-ink)}
.ckd-tag.ckd-wait{background:rgba(255,176,0,.16);color:var(--ckd-amber-ink)}
.ckd-rowcards{display:none;flex-direction:column;gap:8px}
.ckd-rowcard{background:var(--ckd-surface);border:1px solid var(--ckd-line);border-radius:var(--ckd-r);padding:13px 14px}
.ckd-rowcard .ckd-t{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ckd-rowcard .ckd-t b{font-size:14.2px;font-weight:600}
.ckd-rowcard .ckd-d{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.ckd-actions{margin-top:13px;display:flex;gap:9px;flex-wrap:wrap}

@container ckdapp (max-width: 900px){
  .ckd-fn{grid-template-columns:86px 1fr 42px;font-size:12px}
  .ckd-tbl{display:none}
  .ckd-rowcards{display:flex}
  .ckd-actions .ckd-btn,.ckd-actions .ckd-btn-ghost{width:100%;justify-content:center}
}

@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* ===================== legal pages =====================
   Public, no session. Deliberately plain: these are read, not navigated. */
.ckd-legal-page{max-width:760px;margin:0 auto;padding:0 20px 64px;background:var(--ckd-paper);min-height:100vh}
.ckd-legal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 0 32px;flex-wrap:wrap}
.ckd-legal-back{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ckd-green-deep)}
.ckd-legal-back:hover{text-decoration:underline}
.ckd-legal-body{background:var(--ckd-surface);border:1px solid var(--ckd-line);border-radius:var(--ckd-r-lg);padding:40px}
.ckd-legal-body h1{font-size:29px;margin-bottom:24px}
.ckd-legal-body h2{font-size:20px;margin:32px 0 12px}
.ckd-legal-body h3{font-size:17px;margin:24px 0 8px}
.ckd-legal-body p,.ckd-legal-body li{font-size:15px;line-height:1.65;color:var(--ckd-slate);margin-bottom:12px}
.ckd-legal-body ul,.ckd-legal-body ol{padding-left:22px;list-style:disc;margin-bottom:16px}
.ckd-legal-body ol{list-style:decimal}
.ckd-legal-body a{color:var(--ckd-green-deep);text-decoration:underline}
.ckd-legal-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:24px;flex-wrap:wrap}
.ckd-legal-foot .ckd-code{font-family:var(--ckd-mono);font-size:11px;color:var(--ckd-slate-2)}

@container ckdapp (max-width: 700px){
  .ckd-legal-body{padding:24px 20px}
  .ckd-legal-body h1{font-size:24px}
}

/* ===================== console additions =====================
   Only what the prototype did not already define. Everything else on the
   console screens reuses the prototype's admin classes unchanged. */

.ckd-view{display:block}
.ckd-view[hidden]{display:none}

.ckd-filters{display:grid;grid-template-columns:1fr 180px auto;gap:10px;align-items:center}
.ckd-filters .ckd-inp{margin-bottom:0}

.ckd-label{display:block;font-size:13.5px;font-weight:600;margin:18px 0 6px}
.ckd-label:first-child{margin-top:0}

.ckd-textarea{min-height:120px;resize:vertical;font-family:var(--ckd-mono);font-size:13px;line-height:1.6}

.ckd-check{display:inline-flex;align-items:center;gap:9px;font-size:14px;cursor:pointer;align-self:center}
.ckd-check input{width:18px;height:18px;accent-color:var(--ckd-green-deep);cursor:pointer}

.ckd-msg{font-size:13.5px;line-height:1.5;margin:10px 0 0;min-height:1em}
.ckd-msg-error{color:var(--ckd-red)}
.ckd-msg-info{color:var(--ckd-slate)}

/* Buttons that only ever carry a label need a complete style of their own —
   spec §13.6, the lesson the prototype's ghost variant taught. */
.ckd-app button.ckd-link{
  display:inline;padding:0;font:inherit;color:var(--ckd-green-deep);
  background:none;border:0;text-decoration:underline;cursor:pointer;
}
.ckd-app button.ckd-link:hover{color:var(--ckd-green-ink)}
.ckd-app button.ckd-link:disabled{opacity:.5;cursor:default;text-decoration:none}

@container ckdapp (max-width: 700px){
  .ckd-filters{grid-template-columns:1fr}
}

/* ===================== utilities =====================
   These exist because the Content-Security-Policy in §11.3 has no
   'unsafe-inline', and style-src without it blocks every inline style
   ATTRIBUTE in the document, not just <style> elements.

   That is easy to miss: the page still renders, it just quietly ignores every
   style="" it finds. The first symptom here was a 150px grey band above the
   sign-in screen — the icon sprite's style="display:none" was dropped, so the
   browser laid the <svg> out at its default 300x150 intrinsic size.

   Anything dynamic (bar widths) is set from JavaScript via the CSSOM, which
   CSP permits. Nothing in this codebase may use a style attribute in markup. */

.ckd-sprite{position:absolute;width:0;height:0;overflow:hidden;visibility:hidden}

.ckd-stats-3{grid-template-columns:repeat(3,1fr)}
.ckd-mb-22{margin-bottom:22px}
.ckd-mb-18{margin-bottom:18px}
.ckd-mb-14{margin-bottom:14px}
.ckd-mb-8{margin-bottom:8px}
.ckd-mt-14{margin-top:14px}
.ckd-mt-10{margin-top:10px}
.ckd-empty{padding:16px}
.ckd-self-center{align-self:center}
.ckd-logo-sm{height:44px}
.ckd-th-left{text-align:left}
.ckd-app svg.ckd-i-sm{width:14px;height:14px;stroke:rgba(255,255,255,.5)}

/* Panel placeholder copy, replacing an inline style the CSP would have dropped. */
.ckd-panel-empty{color:rgba(255,255,255,.45)}

/* ---- course editor ---- */
.ckd-editrow{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin-bottom:8px}
.ckd-editrow .ckd-inp{margin-bottom:0}
.ckd-editrow input[type="number"]{max-width:120px}
.ckd-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ckd-app textarea.ckd-inp{width:100%}

@container ckdapp (max-width: 700px){
  .ckd-editrow{grid-template-columns:1fr;gap:6px}
  .ckd-editrow input[type="number"]{max-width:none}
}

/* ---- certificate eligibility ticks ---- */
.ckd-ticks li.ckd-todo{opacity:.55}
.ckd-ticks li.ckd-todo svg.ckd-i{stroke:var(--ckd-slate-2)}
.ckd-ticks li.ckd-done svg.ckd-i{stroke:var(--ckd-green-deep)}