/* ==========================================================================
   CPD hours planner — the one custom block on the RCIC CPD Deadline
   Resource Centre (page 49469). Approved under CLAUDE.md §18-0.2.

   Written unscoped and readable. build_cpd_deadline.py prefixes every
   selector with #lpen-planner at deploy time (§18b.3) so the Elementor kit
   stylesheet, which emits .elementor-kit-8 h3 at specificity (0,1,1), cannot
   outbid the type scale here.

   Do not hand-edit the deployed asset — edit this file and redeploy.
   ========================================================================== */

#lpen-planner .lpen-pl {
  --pl-navy-900: #012032;
  --pl-navy-800: #022E48;
  --pl-navy-700: #0B4465;
  --pl-navy-100: #C9DDE8;
  --pl-navy-50:  #E5EEF3;
  --pl-action:   #0F5C96;
  --pl-gold-700: #8A5A08;
  --pl-gold-500: #C8901F;
  --pl-gold-100: #F7E4BD;
  --pl-gold-50:  #FDF3E0;
  --pl-surface:  #F6F8FA;
  --pl-border:   #CFD6DD;
  --pl-ink:      #111820;
  --pl-secondary:#4A5666;
  --pl-subtle:   #6B7684;
  --pl-ok:       #1E6B45;

  font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--pl-ink);
  -webkit-font-smoothing: antialiased;
}

#lpen-planner .lpen-pl *,
#lpen-planner .lpen-pl *::before,
#lpen-planner .lpen-pl *::after { box-sizing: border-box; }

/* Elementor gives every widget position:relative and its own stacking
   context (§18b.4). Nothing here escapes the widget, so that is fine —
   but the wrapper needs an explicit width or the grid collapses. */
#lpen-planner .lpen-pl { width: 100%; }

/* --------------------------------------------------------------- shell */
#lpen-planner .lpen-pl__box {
  background: #fff;
  border: 1px solid var(--pl-border);
  border-radius: 12px;
  overflow: hidden;
}

#lpen-planner .lpen-pl__head {
  background: var(--pl-navy-900);
  color: #fff;
  padding: 24px 28px;
}

#lpen-planner .lpen-pl__eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  color: var(--pl-gold-100);
}

#lpen-planner .lpen-pl__title {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.24px;
  color: #fff;
}

#lpen-planner .lpen-pl__lead {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 26px;
  color: var(--pl-navy-100);
  max-width: 62ch;
}

/* --------------------------------------------------- static fallback */
/* Shown when JS has not run. Progressive enhancement, same rule as the
   footer's is-collapsible pattern: the block is useful with no script. */
#lpen-planner .lpen-pl__static { padding: 24px 28px; }

#lpen-planner .lpen-pl__static h4 {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  color: var(--pl-navy-800);
}

#lpen-planner .lpen-pl__static p { margin: 0 0 12px; font-size: 16px; line-height: 26px; color: var(--pl-secondary); }
#lpen-planner .lpen-pl__static ul { margin: 0 0 4px; padding-left: 20px; color: var(--pl-secondary); font-size: 16px; line-height: 26px; }
#lpen-planner .lpen-pl__static li { margin-bottom: 6px; }
#lpen-planner .lpen-pl__static a { color: var(--pl-action); }

#lpen-planner .lpen-pl__app { display: none; }
#lpen-planner .lpen-pl.is-ready .lpen-pl__static { display: none; }
#lpen-planner .lpen-pl.is-ready .lpen-pl__app { display: block; }

/* ---------------------------------------------------------------- grid */
#lpen-planner .lpen-pl__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: stretch;
}

@media (max-width: 860px) {
  #lpen-planner .lpen-pl__grid { grid-template-columns: minmax(0, 1fr); }
}

#lpen-planner .lpen-pl__in { padding: 24px 28px; }
#lpen-planner .lpen-pl__out {
  padding: 24px 28px;
  background: var(--pl-surface);
  border-left: 1px solid var(--pl-border);
}

@media (max-width: 860px) {
  #lpen-planner .lpen-pl__out { border-left: 0; border-top: 1px solid var(--pl-border); }
}

/* --------------------------------------------------------------- input */
#lpen-planner .lpen-pl__group { margin-bottom: 20px; }
#lpen-planner .lpen-pl__group:last-child { margin-bottom: 0; }

#lpen-planner .lpen-pl__label {
  display: block;
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--pl-navy-800);
}

#lpen-planner .lpen-pl__hint {
  display: block;
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 19px;
  color: var(--pl-subtle);
}

#lpen-planner .lpen-pl__seg { display: flex; flex-wrap: wrap; gap: 8px; }

#lpen-planner .lpen-pl__segbtn {
  appearance: none;
  border: 1px solid var(--pl-border);
  background: #fff;
  color: var(--pl-navy-800);
  border-radius: 999px;
  padding: 8px 16px;
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}

#lpen-planner .lpen-pl__segbtn:hover { border-color: var(--pl-action); color: var(--pl-action); }

#lpen-planner .lpen-pl__segbtn[aria-pressed="true"] {
  background: var(--pl-navy-800);
  border-color: var(--pl-navy-800);
  color: #fff;
}

#lpen-planner .lpen-pl__segbtn small { display: block; font-weight: 400; font-size: 12px; line-height: 16px; opacity: .75; }

/* number field — the <input> is created in JS, never server-rendered,
   because the html-widget sanitiser strips <input> and <form> (§18b.1). */
#lpen-planner .lpen-pl__stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--pl-border);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

#lpen-planner .lpen-pl__step {
  appearance: none;
  border: 0;
  background: #fff;
  color: var(--pl-navy-700);
  width: 42px;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background .12s ease;
}

#lpen-planner .lpen-pl__step:hover { background: var(--pl-navy-50); }
#lpen-planner .lpen-pl__step:disabled { color: var(--pl-border); cursor: default; background: #fff; }

#lpen-planner .lpen-pl__num {
  width: 84px;
  border: 0;
  border-left: 1px solid var(--pl-border);
  border-right: 1px solid var(--pl-border);
  padding: 10px 8px;
  font: inherit;
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  text-align: center;
  color: var(--pl-ink);
  background: #fff;
  -moz-appearance: textfield;
}

#lpen-planner .lpen-pl__num::-webkit-outer-spin-button,
#lpen-planner .lpen-pl__num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

#lpen-planner .lpen-pl__reset {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin-top: 18px;
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  color: var(--pl-action);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* -------------------------------------------------------------- output */
#lpen-planner .lpen-pl__figure { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

#lpen-planner .lpen-pl__big {
  font-size: 44px;
  line-height: 48px;
  font-weight: 700;
  letter-spacing: -0.88px;
  color: var(--pl-navy-900);
}

#lpen-planner .lpen-pl__big--done { color: var(--pl-ok); }

#lpen-planner .lpen-pl__unit { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--pl-secondary); }

#lpen-planner .lpen-pl__caption {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--pl-subtle);
}

#lpen-planner .lpen-pl__bar {
  position: relative;
  height: 8px;
  margin: 16px 0 8px;
  border-radius: 999px;
  background: var(--pl-navy-50);
  overflow: hidden;
}

#lpen-planner .lpen-pl__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  background: var(--pl-action);
  transition: width .2s ease;
}

#lpen-planner .lpen-pl__fill--done { background: var(--pl-ok); }

#lpen-planner .lpen-pl__facts {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--pl-border);
}

#lpen-planner .lpen-pl__fact {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--pl-border);
  font-size: 15px;
  line-height: 22px;
}

#lpen-planner .lpen-pl__fact dt { color: var(--pl-secondary); margin: 0; }
#lpen-planner .lpen-pl__fact dd { margin: 0; font-weight: 600; color: var(--pl-navy-800); text-align: right; }
#lpen-planner .lpen-pl__fact dd.is-short { color: var(--pl-gold-700); }
#lpen-planner .lpen-pl__fact dd.is-ok { color: var(--pl-ok); }

/* ------------------------------------------------------ recommendation */
#lpen-planner .lpen-pl__rec {
  margin-top: 20px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--pl-border);
  border-left: 3px solid var(--pl-action);
  border-radius: 8px;
}

#lpen-planner .lpen-pl__rec--done { border-left-color: var(--pl-ok); }
#lpen-planner .lpen-pl__rec--urgent { border-left-color: var(--pl-gold-500); background: var(--pl-gold-50); }

#lpen-planner .lpen-pl__rectitle {
  margin: 0 0 6px;
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  color: var(--pl-navy-800);
}

#lpen-planner .lpen-pl__recbody { margin: 0; font-size: 15px; line-height: 24px; color: var(--pl-secondary); }

#lpen-planner .lpen-pl__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

#lpen-planner .lpen-pl__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 4px;
  background: var(--pl-action);
  color: #fff;
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  text-decoration: none;
  transition: background .12s ease;
}

#lpen-planner .lpen-pl__cta:hover { background: var(--pl-navy-700); color: #fff; }

#lpen-planner .lpen-pl__cta--ghost {
  background: transparent;
  color: var(--pl-action);
  border: 1px solid var(--pl-action);
}

#lpen-planner .lpen-pl__cta--ghost:hover { background: var(--pl-action); color: #fff; }

/* ---------------------------------------------------------------- foot */
#lpen-planner .lpen-pl__foot {
  margin: 0;
  padding: 16px 28px;
  background: var(--pl-gold-50);
  border-top: 1px solid var(--pl-gold-500);
  font-size: 14px;
  line-height: 22px;
  color: var(--pl-navy-800);
}

#lpen-planner .lpen-pl__foot a { color: var(--pl-navy-800); font-weight: 600; }

/* --------------------------------------------------------------- a11y */
#lpen-planner .lpen-pl :focus-visible {
  outline: 2px solid #6D4AFF;
  outline-offset: 2px;
  border-radius: 4px;
}

#lpen-planner .lpen-pl__sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  #lpen-planner .lpen-pl__fill { transition: none; }
}

/* ------------------------------------------------------------ icons */
#lpen-planner .lpen-i {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: none;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
  vertical-align: -4px;
}

#lpen-planner .lpen-i--16 { width: 16px; height: 16px; vertical-align: -3px; }
#lpen-planner .lpen-i--18 { width: 18px; height: 18px; }

/* ============ GENERATED ICONS — DO NOT EDIT ============ */
/* Tabler 3.46.0 — 2 glyphs, generated by build_cpd_deadline.py */
.lpen-i--calculator{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M5.5 2a3 3 0 0 0-2.4 2.2v15.6a3 3 0 0 0 2 2l.4.2h13l.3-.1a3 3 0 0 0 2-2l.2-.4v-15l-.1-.3a3 3 0 0 0-2-2l-.4-.2zm12.8 2q.5.2.6.7L19 12v7.3l-.5.6h-13l-.3-.3c-.2-.3-.2.2-.2-7.6 0-8 0-7.4.3-7.7S5.1 4 12 4zM8.5 6A2 2 0 0 0 7 7.6v2q0 .5.5.9.3.4 1 .5h6.9q.5 0 .9-.5c.5-.5.6-.8.6-1.9q0-1-.2-1.4-.3-.6-.8-.8c-.5-.3-.4-.3-4-.3zM15 8.6V9H9V8h6zm-7.3 4.6-.6.4v.5q0 .4.2.7a1 1 0 0 0 1.6-.2v-1a1 1 0 0 0-1.2-.4m4 0-.6.4v.5q0 .4.2.7a1 1 0 0 0 1.6-.2v-1a1 1 0 0 0-1.2-.4m4 0-.6.4v.5q0 .4.2.7a1 1 0 0 0 1.6-.2v-1a1 1 0 0 0-1.2-.4m-8 3-.6.4v.5q0 .4.2.7a1 1 0 0 0 1.6-.2v-1a1 1 0 0 0-1.2-.4m4 0-.6.4v.5q0 .4.2.7a1 1 0 0 0 1.6-.2v-1a1 1 0 0 0-1.2-.4m4 0-.6.4v.5q0 .4.2.7a1 1 0 0 0 1.6-.2v-1a1 1 0 0 0-1.2-.4'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M5.5 2a3 3 0 0 0-2.4 2.2v15.6a3 3 0 0 0 2 2l.4.2h13l.3-.1a3 3 0 0 0 2-2l.2-.4v-15l-.1-.3a3 3 0 0 0-2-2l-.4-.2zm12.8 2q.5.2.6.7L19 12v7.3l-.5.6h-13l-.3-.3c-.2-.3-.2.2-.2-7.6 0-8 0-7.4.3-7.7S5.1 4 12 4zM8.5 6A2 2 0 0 0 7 7.6v2q0 .5.5.9.3.4 1 .5h6.9q.5 0 .9-.5c.5-.5.6-.8.6-1.9q0-1-.2-1.4-.3-.6-.8-.8c-.5-.3-.4-.3-4-.3zM15 8.6V9H9V8h6zm-7.3 4.6-.6.4v.5q0 .4.2.7a1 1 0 0 0 1.6-.2v-1a1 1 0 0 0-1.2-.4m4 0-.6.4v.5q0 .4.2.7a1 1 0 0 0 1.6-.2v-1a1 1 0 0 0-1.2-.4m4 0-.6.4v.5q0 .4.2.7a1 1 0 0 0 1.6-.2v-1a1 1 0 0 0-1.2-.4m-8 3-.6.4v.5q0 .4.2.7a1 1 0 0 0 1.6-.2v-1a1 1 0 0 0-1.2-.4m4 0-.6.4v.5q0 .4.2.7a1 1 0 0 0 1.6-.2v-1a1 1 0 0 0-1.2-.4m4 0-.6.4v.5q0 .4.2.7a1 1 0 0 0 1.6-.2v-1a1 1 0 0 0-1.2-.4'/></svg>")}
.lpen-i--info-circle{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M11 2a10 10 0 0 0-6 3q-3 3-3 7.3a10 10 0 0 0 3.8 7.5 10 10 0 0 0 7.6 2.1 10 10 0 0 0 5.7-2.8 10 10 0 0 0-.9-15 10 10 0 0 0-7.1-2m1.6 2a8 8 0 1 1-1.4 16 8 8 0 0 1 1.4-16m-1 4-.6.4v1c.6.9 1.9.5 1.9-.5a1 1 0 0 0-.5-.9zm-1 3-.6.4v1l.7.5h.2v1.6c0 1.7 0 1.7.2 2l.3.3h1.8q.3 0 .6-.4v-1l-.7-.5H13v-3.3l-.1-.2-.6-.4c-.2-.1-1.4-.1-1.6 0'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M11 2a10 10 0 0 0-6 3q-3 3-3 7.3a10 10 0 0 0 3.8 7.5 10 10 0 0 0 7.6 2.1 10 10 0 0 0 5.7-2.8 10 10 0 0 0-.9-15 10 10 0 0 0-7.1-2m1.6 2a8 8 0 1 1-1.4 16 8 8 0 0 1 1.4-16m-1 4-.6.4v1c.6.9 1.9.5 1.9-.5a1 1 0 0 0-.5-.9zm-1 3-.6.4v1l.7.5h.2v1.6c0 1.7 0 1.7.2 2l.3.3h1.8q.3 0 .6-.4v-1l-.7-.5H13v-3.3l-.1-.2-.6-.4c-.2-.1-1.4-.1-1.6 0'/></svg>")}