/* CPD Council v4 design system, from the "CPD Council redesign" canvas (Version 4.0).
   Shared motion and hover rules; page markup carries its own inline layout. */
body{margin:0;background:#FBFAF7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:#0E6B6B}a:hover{color:#10272E}
@keyframes rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes popl{from{opacity:0;transform:translateX(-90px) scale(.7)}to{opacity:1;transform:none}}
@keyframes popr{from{opacity:0;transform:translateX(90px) scale(.7)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(8px,-16px)}}
@keyframes marq{to{transform:translateX(-50%)}}
.rv{animation:rise .9s cubic-bezier(.16,1,.3,1) both}
.d1{animation-delay:.1s}.d2{animation-delay:.2s}.d3{animation-delay:.32s}.d4{animation-delay:.46s}
.pl{animation:popl 1s cubic-bezier(.16,1,.3,1) both}
.pr{animation:popr 1s cubic-bezier(.16,1,.3,1) .08s both}
.fd{animation:fade .7s ease .75s both}
.fl{animation:drift 7s ease-in-out infinite}
.mq{animation:marq 36s linear infinite}
.mqw:hover .mq{animation-play-state:paused}
@supports (animation-timeline:view()){.sr{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 38%}}
.bp,.bs,.nl,.fi{transition:background-color .25s cubic-bezier(.16,1,.3,1),color .25s,border-color .25s,box-shadow .25s,transform .25s cubic-bezier(.16,1,.3,1)}
.bp:hover{background-color:#0A5252!important;transform:translateY(-2px);box-shadow:0 14px 24px -12px rgba(14,107,107,.7)}
.bs:hover{background-color:#0E6B6B!important;color:#FFFFFF!important;transform:translateY(-2px)}
.ba:hover{background-color:#FFB640!important;transform:translateY(-2px);box-shadow:0 14px 24px -12px rgba(244,166,42,.8)}
.bp:active,.bs:active,.ba:active{transform:scale(.97)}
.ba{transition:background-color .25s,transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s}
.nl{position:relative}
.nl:hover{color:#0E6B6B!important}
.tl{transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s cubic-bezier(.16,1,.3,1)}
.tl:hover{transform:translateY(-8px) rotate(-.7deg);box-shadow:0 30px 44px -28px rgba(16,39,46,.55)}
.tl .ob{transition:transform .8s cubic-bezier(.16,1,.3,1)}
.tl:hover .ob{transform:translate(-26px,22px) scale(1.25)}
.cv .tile{transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s}
.cv .tile img{transition:transform .7s cubic-bezier(.16,1,.3,1)}
.cv .orb{transition:transform .7s cubic-bezier(.16,1,.3,1)}
.cv:hover .tile{transform:translateY(-8px);box-shadow:0 30px 44px -28px rgba(16,39,46,.55)}
.cv:hover .tile img{transform:scale(1.08) rotate(3deg)}
.cv:hover .orb{transform:translate(-22%,26%) scale(1.12)}
.cv:hover .ct{text-decoration:underline;text-underline-offset:4px}
.nd{transition:transform .4s cubic-bezier(.16,1,.3,1)}
li:hover>div>.nd,li:hover>div>div>.nd{transform:scale(1.22)}
.bk{perspective:1600px;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.bk .bkc{transform-origin:left center;transition:transform .9s cubic-bezier(.16,1,.3,1),box-shadow .9s;backface-visibility:hidden}
.bk:hover,.bk:focus-visible{transform:translateY(-14px) rotate(-2.5deg)}
.bk:hover .bkc,.bk:focus-visible .bkc{transform:rotateY(-42deg);box-shadow:inset 6px 0 0 rgba(255,255,255,.08),30px 40px 60px -30px rgba(16,39,46,.7)}
.fi:hover{border-color:#8A9AA0!important}
.fi:focus{border-color:#0E6B6B!important;background-color:#FFFFFF!important;box-shadow:0 0 0 4px rgba(14,107,107,0.18)!important;outline:none}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #10272E;outline-offset:3px}
input::placeholder{color:#6F8087}

@media (prefers-reduced-motion:reduce){.rv,.pl,.pr,.fd,.fl,.mq,.sr{animation:none!important}.bp,.bs,.ba,.nl,.fi,.tl,.cv .tile,.cv .tile img,.cv .orb,.tl .ob,.nd,.bk,.bk .bkc{transition:none!important}.tl:hover,.cv:hover .tile,.bk:hover,.bk:hover .bkc{transform:none!important}}

/* ---- site integration (not in the canvas) ---- */
body{font-family:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;color:#10272E;background:#FBFAF7;line-height:1.55;overflow-x:clip}
main{display:block}
.skip{position:absolute;left:12px;top:-60px;z-index:50;padding:10px 16px;border-radius:999px;background:#10272E;color:#fff;font-weight:600;text-decoration:none}
.skip:focus{top:12px;color:#fff}
.nl[aria-current=page]{color:#0E6B6B!important;font-weight:600!important}
.nl[aria-current=page]::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;border-radius:2px;background:#F4A62A}
@media (max-width:860px){.nav{order:3;width:100%;overflow-x:auto;gap:22px!important;margin-left:0!important;padding-bottom:6px;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}}
button:focus-visible,textarea:focus-visible{outline:2px solid #10272E;outline-offset:3px}
textarea.fi:focus{border-color:#0E6B6B!important;background-color:#FFFFFF!important;box-shadow:0 0 0 4px rgba(14,107,107,0.18)!important;outline:none}

/* tabs: eight standards (home) and record results */
.v4tab{background:transparent;color:#10272E;transition:background-color .3s cubic-bezier(.16,1,.3,1),color .3s,transform .4s cubic-bezier(.16,1,.3,1)}
.v4tab:hover{background:#EDEADF}
.v4tab[aria-selected=true]{background:#0E6B6B;color:#FFFFFF;transform:translateX(10px)}
.v4tab.rec .met{color:#0B5A3E}
.v4tab.rec[aria-selected=true] .met{color:#8EDDB9}
[data-panel]:not([hidden]){display:flex}
[data-panel]:not([hidden]){animation:fade .45s ease both}
@media (max-width:700px){.v4tab[aria-selected=true]{transform:none}}

/* insights filters */
.v4filter{background:transparent;color:#0E6B6B;transition:background-color .25s,color .25s,transform .25s cubic-bezier(.16,1,.3,1)}
.v4filter:hover{transform:translateY(-2px)}
.v4filter[aria-pressed=true]{background:#0E6B6B;color:#FFFFFF}
[data-filtered] [hidden]{display:none!important}

/* check result card swap */
.v4in{animation:rise .6s cubic-bezier(.16,1,.3,1) both}
[data-v4apply-result]{border-radius:16px;padding:18px 20px;font-size:16px}
[data-v4apply-result].ok{background:#D7F0E2;color:#0B5A3E}
[data-v4apply-result].err{background:#FBE1DC;color:#8E2B22}

/* search pill: field and button always share one line */
.qbar{flex-wrap:nowrap!important;align-items:center}
.qbar input{flex:1 1 auto!important;width:0}
.qbar button{flex:none}
@media (max-width:480px){
  .qbar input{height:48px!important;padding:0 14px!important;font-size:16px!important}
  .qbar button{height:48px!important;padding:0 18px!important;font-size:15.5px!important}
}
@media (max-width:340px){.qbar button{padding:0 14px!important;font-size:14.5px!important}}

/* scroll reveal where the browser has no scroll-driven animations (older iOS Safari) */
.sr-js{opacity:0;transform:translateY(34px)}
.sr-js.sr-in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}

/* touch screens have no hover: give tiles, cards and buttons a tap response */
@media (hover:none){
  .tl:active{transform:translateY(-6px) rotate(-.5deg);box-shadow:0 24px 36px -24px rgba(16,39,46,.5)}
  .cv:active .tile{transform:translateY(-6px);box-shadow:0 24px 36px -24px rgba(16,39,46,.5)}
  .cv:active .tile img{transform:scale(1.06) rotate(2deg)}
  .cv:active .orb{transform:translate(-18%,20%) scale(1.1)}
  .bk:active{transform:translateY(-8px) rotate(-2deg)}
  .bk:active .bkc{transform:rotateY(-30deg)}
  .bp:active,.bs:active,.ba:active{transform:scale(.96)}
}
@media (prefers-reduced-motion:reduce){.sr-js{opacity:1!important;transform:none!important}}

/* Standard page: index of the eight standards */
.ix:hover{background-color:#EDEADF}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (max-width:860px){
  .stdnav{position:static!important;max-width:none!important;flex:1 1 100%!important;flex-direction:row!important;gap:6px!important;overflow-x:auto;margin:0 -28px;padding:4px 28px;scrollbar-width:none}
  .stdnav::-webkit-scrollbar{display:none}
  .stdnav>span{display:none}
  .stdnav .ix{flex:none;grid-template-columns:auto auto!important;gap:8px!important;background:#EDEADF;min-height:40px!important}
}

@media (max-width:600px){
  article[id^="cs"]>span[aria-hidden]:nth-of-type(1){width:130px!important;height:130px!important;right:-50px!important;top:-50px!important}
  article[id^="cs"]>span[aria-hidden]:nth-of-type(2){width:70px!important;height:70px!important;right:26px!important;top:34px!important}
}

/* booklet and flyer viewers: fixed-size pages, zoomed to fit by v4.js */
.pg-viewer{display:flex;flex-direction:column;gap:24px;align-items:center}
.bk-spread{display:flex;gap:3px;justify-content:center;filter:drop-shadow(0 40px 50px rgba(16,39,46,.28))}
.bk-page,.fl-page{flex:none;overflow:hidden;border-radius:4px;background:#fff}
.bk-page[hidden]{display:none}
.fl-page{box-shadow:0 2px 4px rgba(16,39,46,.08),0 40px 70px -40px rgba(16,39,46,.55);border-radius:8px}
.pg-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
.pg-bar button{display:inline-flex;align-items:center;height:44px;padding:0 20px;border-radius:999px;border:1.5px solid #0E6B6B;background:transparent;color:#0E6B6B;font:600 15px 'Instrument Sans',system-ui,sans-serif;cursor:pointer;transition:background-color .25s,color .25s}
.pg-bar button:hover:not(:disabled){background:#0E6B6B;color:#fff}
.pg-bar button:disabled{opacity:.35;cursor:default}
.pg-count{font-family:'Geist Mono',ui-monospace,monospace;font-size:13px;letter-spacing:.04em;color:#5F7178;min-width:14ch;text-align:center}
.fl-stack{display:flex;flex-direction:column;gap:32px;align-items:center}
@media print{
  @page{margin:0}
  header,footer,.no-print,.skip{display:none!important}
  body{background:#fff}
  main>section{padding:0!important;margin:0!important;max-width:none!important}
  main>section>div{padding:0!important;background:none!important;border-radius:0!important}
  .pg-viewer,.fl-stack,.bk-spread{display:block;filter:none}
  .bk-page,.fl-page{zoom:1!important;border-radius:0;box-shadow:none;break-after:page;page-break-after:always}
  .bk-page[hidden]{display:block!important}
  .rv,.sr,.pl,.pr,.fd,.fl{animation:none!important}
}
