/* CLEAR Voice in the clearuk.org style. Loaded after chrome.css, hub.css and voice.css. */

/* Brand colours and solid (not gradient) buttons, like clearuk.org */
body.ck{--purple:#3d2b96;--purple-d:#2e2073;--grad:linear-gradient(#3d2b96,#3d2b96);--cream:#fff;--lav:#ebe9f9;--line:#e6e3f3;--line2:#cfcbe4;--radius:28px;--focus:#0b6fd6}
body.ck .btn{border-radius:8px}
body.ck .btn.primary{background:var(--ck-purple);color:#fff}
body.ck .btn.primary:hover{background:var(--ck-purple-d);box-shadow:none}
body.ck .btn.line{border-color:var(--ck-purple);color:var(--ck-purple)}
body.ck .panel,body.ck .card,body.ck .rev,body.ck .themecard,body.ck .chartcard,body.ck .tile,body.ck .resp,body.ck .filters{border-radius:24px}
body.ck main{flex:1}
.ck-menu .main li:nth-child(5) svg{stroke:var(--ck-pink)}

/* hero trust line */
.ck-trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin:26px 0 0!important;font-size:1rem!important;color:#dcd6f7!important}
.ck-trust span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--ck-mint);margin-right:8px}

/* topic cards (lavender section) */
.ck-cards3{display:flex;flex-wrap:wrap;justify-content:center;gap:28px}
.ck-topiccard{flex:0 1 calc((100% - 56px)/3);min-width:0;padding:40px 30px 34px}
.ck-topiccard .ck-circle{width:112px;height:112px}
.ck-topiccard .ck-circle svg{width:50px;height:50px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ck-topiccard .cat{font-size:.9rem!important;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:0 0 8px!important;flex:0!important}
.ck-topiccard h3{font-size:1.45rem;color:var(--ck-ink);margin:0 0 12px}
.ck-topiccard p{font-size:1.05rem}
.ck-cardbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.ck-cardbtns .ck-btn{padding:12px 10px;font-size:1rem;min-height:52px;white-space:nowrap}
.ck-cardbtns svg.i{width:1.15em;height:1.15em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ck-btn.outline{background:#fff;color:var(--ck-purple);border-color:var(--ck-purple)}
.ck-btn.outline:hover{background:var(--ck-lav)}
.t-purple .ck-circle{background:var(--ck-purple)}.t-purple .cat{color:var(--ck-purple)}
.t-amber .ck-circle{background:var(--ck-orange)}.t-amber .cat{color:#a8550f}
.t-blue .ck-circle{background:var(--ck-teal)}.t-blue .cat{color:#2c6f86}
.t-rose .ck-circle{background:var(--ck-pink)}.t-rose .cat{color:var(--ck-pink)}
.t-green .ck-circle{background:#2f9e78}.t-green .cat{color:#1f7a5b}

/* other ways to take part (mint section) */
.ck-ways{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ck-way{display:flex;flex-direction:column;gap:6px;background:#fff;border-radius:24px;padding:24px 26px;text-decoration:none;color:var(--ck-body);box-shadow:0 2px 10px #0a7a5c12}
.ck-way strong{font-size:1.25rem;color:var(--ck-purple);text-decoration:underline;text-underline-offset:4px}
.ck-way:hover{background:#f7fffb}

/* inner pages: lavender background, white panels, like the clearuk.org card sections */
body.ck:not(:has(.ck-hero)) main{background:var(--ck-lav);padding-bottom:56px}
body.ck .page{padding-top:56px}
body.ck .page h1,body.ck .adm h1{color:var(--ck-ink)}
body.ck .page > h1 + p,body.ck .page .panel{font-size:1.05rem}
body.ck .chatwrap{padding-top:8px}
body.ck .chat{border-radius:32px;border:0;box-shadow:0 2px 14px #3d2b9614}
body.ck .conf{color:var(--ck-body)}
body.ck .msg .av{background:var(--ck-purple)}
body.ck .msg.me .bubble{background:var(--ck-purple);border-color:var(--ck-purple)}
body.ck .tag-fu{color:var(--ck-pink)}
body.ck .chip{background:var(--ck-lav);color:var(--ck-purple);border-color:#d8d3f2}
body.ck .side button[aria-current=true]{background:#fff;color:var(--ck-purple)}
body.ck .adm{padding-top:40px}
body.ck .er,body.ck .paper{background:#fff;border-radius:32px;margin-top:40px;margin-bottom:0}
body.ck .page:not(.er):not(.paper){background:#fff;border-radius:32px;margin-top:40px}
body.ck .page:has(.two),body.ck .page:has(#staffForm){background:transparent}

@media (max-width:980px){.ck-topiccard{flex-basis:calc((100% - 28px)/2)}}
@media (max-width:700px){
  .ck-topiccard{flex-basis:100%}
  .ck-ways{grid-template-columns:1fr}
  body.ck .page:not(.er):not(.paper),body.ck .er,body.ck .paper{border-radius:0;margin-top:0}
  .ck-cardbtns .ck-btn{width:auto}
}

/* admin on phones: keep everything inside the screen */
.adm>*{min-width:0}
@media (max-width:960px){.adm{grid-template-columns:minmax(0,1fr)}.side{max-width:100%}}
.filters>div{min-width:0;max-width:100%}
.filters select{width:100%}
@media (max-width:700px){.filters>div{flex:1 1 100%}}