/* CIC Connect | app.css  -  mobile first */
:root{
  --teal:#0B4D4A; --teal-d:#073533; --teal-l:#0F6360;
  --gold:#D4A820; --cream:#F5F0E8; --ink:#1A2421;
  --line:#DDD6C8; --muted:#6B7A75; --white:#fff; --danger:#8B1A1A;
  --radius:10px; --shadow:0 1px 3px rgba(26,36,33,.09),0 6px 20px rgba(26,36,33,.06);
  --sidew:250px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--cream);color:var(--ink);font:15px/1.6 Arial,Helvetica,sans-serif;-webkit-text-size-adjust:100%}
h1,h2,h3,h4{font-family:Georgia,'Times New Roman',serif;color:var(--teal);margin:0 0 12px;line-height:1.25}
h1{font-size:25px} h2{font-size:20px} h3{font-size:17px}
a{color:var(--teal)}
hr{border:0;border-top:1px solid var(--line);margin:14px 0}

/* --- Top bar --- */
.cc-top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;
  background:var(--teal);color:#fff;padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top));
  box-shadow:0 2px 10px rgba(0,0,0,.14)}
.cc-brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:#fff;font-family:Georgia,serif;min-width:0}
.cc-brand-logo{height:30px;width:auto;display:block;flex:0 0 auto}
.cc-brand-mark{font-weight:700;font-size:19px;letter-spacing:.5px}
.cc-brand-word{font-size:15px;color:var(--gold);white-space:nowrap;
  padding-left:9px;border-left:1px solid rgba(255,255,255,.28);line-height:1}
@media(max-width:560px){.cc-brand-logo{height:24px}.cc-brand-word{font-size:13px}}
.cc-top-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.cc-bell{position:relative;color:#fff;display:grid;place-items:center;
  width:42px;height:42px;border-radius:50%;transition:background .15s}
.cc-bell:hover{background:rgba(255,255,255,.12)}
.cc-bell svg{width:24px;height:24px}
.cc-dot{position:absolute;top:1px;right:1px;background:var(--gold);color:#22180a;
  min-width:19px;height:19px;border-radius:20px;display:grid;place-items:center;
  font:700 11px/1 sans-serif;font-style:normal;padding:0 5px;text-align:center;
  border:2px solid var(--teal);box-shadow:0 2px 6px rgba(0,0,0,.3)}
.cc-burger{background:none;border:0;padding:6px;display:flex;flex-direction:column;gap:4px;cursor:pointer}
.cc-burger span{display:block;width:20px;height:2px;background:#fff;border-radius:2px}
.cc-av{border-radius:50%;object-fit:cover;display:inline-flex;vertical-align:middle}
.cc-av-i{align-items:center;justify-content:center;background:var(--gold);color:var(--teal-d);font-weight:700;font-family:Arial}

/* --- Sidebar --- */
.cc-side{position:fixed;top:0;left:0;bottom:0;width:var(--sidew);background:#fff;z-index:60;
  transform:translateX(-100%);transition:transform .22s ease;padding:16px;overflow-y:auto;
  border-right:1px solid var(--line);padding-top:calc(16px + env(safe-area-inset-top))}
.cc-side.open{transform:translateX(0)}
.cc-side-user{display:flex;gap:11px;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--line)}
.cc-side-user strong{display:block;font-size:14px}
.cc-pill{display:inline-block;color:#fff;font-size:10.5px;padding:2px 8px;border-radius:20px;margin-top:4px}
.cc-menu{list-style:none;margin:12px 0;padding:0}
.cc-menu a{display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--ink);font-size:14.5px}
.cc-menu a:hover{background:var(--cream)}
.cc-menu a.on{background:var(--teal);color:#fff;font-weight:700}
.cc-menu-sec a{font-size:13.5px;color:var(--muted)}
.cc-soon{font-style:normal;font-size:9.5px;background:var(--cream);color:var(--muted);
  padding:2px 6px;border-radius:10px;border:1px solid var(--line);white-space:nowrap}
.cc-menu a.on .cc-soon{background:rgba(255,255,255,.2);color:#fff;border-color:transparent}
.cc-lang{display:flex;gap:6px;margin-top:16px}
.cc-lang a{flex:1;text-align:center;padding:7px;border:1px solid var(--line);border-radius:7px;
  text-decoration:none;font-size:12px;font-weight:700;color:var(--muted)}
.cc-lang a.on{background:var(--teal);color:#fff;border-color:var(--teal)}
.cc-scrim{position:fixed;inset:0;background:rgba(10,20,18,.45);z-index:50;display:none}
.cc-scrim.open{display:block}

/* --- Layout --- */
.cc-main{padding:16px 14px 84px;max-width:1080px;margin:0 auto}
.cc-main-bare{padding-bottom:24px}
.cc-bare{background:var(--teal);display:flex;min-height:100vh;align-items:center;justify-content:center}
.cc-bare .cc-main{width:100%;max-width:420px}

/* --- Cards --- */
.cc-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-bottom:14px}
.cc-card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.cc-card-h h2,.cc-card-h h3{margin:0}
.cc-grid{display:grid;gap:12px}
@media(min-width:640px){.cc-grid-2{grid-template-columns:1fr 1fr}.cc-grid-3{grid-template-columns:repeat(3,1fr)}}

/* --- Forms --- */
label{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin:12px 0 5px;
  text-transform:uppercase;letter-spacing:.4px}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],
input[type=date],input[type=datetime-local],select,textarea{
  width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px;
  font:15px Arial,sans-serif;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(11,77,74,.12)}
textarea{min-height:96px;resize:vertical}
.cc-check{display:flex;align-items:center;gap:9px;margin:14px 0;font-size:14px;text-transform:none;letter-spacing:0;font-weight:400;color:var(--ink)}
.cc-check input{width:18px;height:18px;margin:0;accent-color:var(--teal)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--teal);color:#fff;border:0;border-radius:8px;padding:12px 20px;
  font:700 15px Arial,sans-serif;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--teal-l)}
.btn-block{width:100%}
.btn-gold{background:var(--gold);color:#2b1f05}
.btn-ghost{background:transparent;color:var(--teal);border:1px solid var(--line)}
.btn-danger{background:var(--danger)}
.btn-sm{padding:7px 13px;font-size:13px}
.cc-hint{font-size:12.5px;color:var(--muted);margin:6px 0 0}

/* --- Flash --- */
.cc-flash{padding:11px 14px;border-radius:8px;margin-bottom:12px;font-size:14px;border-left:4px solid}
.cc-flash-ok{background:#EAF5F0;border-color:#0F766E;color:#0b3f39}
.cc-flash-err{background:#FBEDED;border-color:var(--danger);color:#6d1414}
.cc-flash-info{background:#FFF8E6;border-color:var(--gold);color:#5c4408}

/* --- Tables --- */
.cc-tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.cc-t{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}
table.cc-t th{text-align:left;background:var(--cream);padding:9px 11px;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.5px;color:var(--muted);border-bottom:1px solid var(--line)}
table.cc-t td{padding:10px 11px;border-bottom:1px solid var(--line);vertical-align:middle}
table.cc-t tr:hover td{background:#FCFBF8}

/* --- Login card --- */
.cc-auth{background:#fff;border-radius:14px;padding:28px 24px;box-shadow:0 14px 40px rgba(0,0,0,.22)}
.cc-auth-logo{text-align:center;margin-bottom:20px}
.cc-auth-mark{display:block;margin:0 auto 14px;width:150px;height:auto;max-width:62%}
.cc-auth-logo b{font-family:Georgia,serif;font-size:22px;color:var(--teal);display:block;
  padding-top:12px;border-top:1px solid rgba(11,77,74,.14)}
.cc-auth-logo span{font-size:12px;color:var(--muted)}

/* --- Member tiles --- */
.cc-person{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.cc-person:last-child{border-bottom:0}
.cc-person b{display:block;font-size:14.5px}
.cc-person small{color:var(--muted);font-size:12.5px}

/* --- System tiles --- */
.cc-sys{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid var(--line);
  border-radius:10px;text-decoration:none;color:var(--ink);background:#fff;margin-bottom:9px}
.cc-sys:hover{border-color:var(--teal);background:#FCFBF8}
.cc-sys b{display:block;font-size:14.5px;color:var(--teal)}
.cc-sys small{color:var(--muted);font-size:12px}
.cc-sys-ico{width:38px;height:38px;border-radius:9px;background:var(--teal);color:#fff;
  display:flex;align-items:center;justify-content:center;font:700 13px Arial;flex:none}

/* --- Bottom tabs (mobile) --- */
.cc-tabs{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;background:#fff;
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.cc-tabs a{flex:1;text-align:center;padding:11px 3px;font-size:11px;font-weight:700;
  color:var(--muted);text-decoration:none}
.cc-tabs a:hover{color:var(--teal)}

/* --- Badges --- */
.cc-badge{display:inline-block;font-size:10.5px;padding:2px 8px;border-radius:20px;font-weight:700}
.cc-b-active{background:#E4F3EC;color:#0b5c47}
.cc-b-pending{background:#FFF4DC;color:#7a5a05}
.cc-b-suspended{background:#FBE4E4;color:#7c1616}
.cc-b-archived{background:#EEE;color:#555}

/* --- Desktop --- */
@media(min-width:900px){
  .cc-burger{display:none}
  .cc-side{transform:none;top:56px}
  .cc-main{margin-left:var(--sidew);padding:24px 26px 40px;max-width:none}
  .cc-main-bare{margin-left:0}
  .cc-tabs{display:none}
  .cc-scrim{display:none !important}
  h1{font-size:29px}
}

/* ===== Phase 2A chat ============================================== */
.cc-chat{display:grid;grid-template-columns:var(--sidew) 1fr;gap:0;
  height:calc(100vh - 116px);min-height:420px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.cc-chat-list{border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0;background:#FBF9F4}
.cc-chat-listhead{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 6px}
.cc-chat-listhead h2{margin:0;font-size:17px}
.cc-chip-btn{width:26px;height:26px;border-radius:7px;background:var(--teal);color:#fff;
  display:grid;place-items:center;text-decoration:none;font-size:17px;line-height:1}
.cc-chan-filter{margin:6px 12px 8px;padding:7px 10px;border:1px solid var(--line);
  border-radius:8px;font:13px Arial,sans-serif;background:#fff;width:calc(100% - 24px)}
.cc-chans{list-style:none;margin:0;padding:0 6px 10px;overflow-y:auto;flex:1}
.cc-chan{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:8px;
  text-decoration:none;color:var(--ink);min-width:0}
.cc-chan:hover{background:#F1EDE3}
.cc-chan.on{background:var(--teal);color:#fff}
.cc-chan.on .cc-chan-ref{color:rgba(255,255,255,.75)}
.cc-chan-av{width:34px;height:34px;border-radius:9px;background:var(--teal);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:700;flex:0 0 auto}
.cc-chan-av.dm{border-radius:50%;background:var(--gold);color:var(--ink)}
.cc-chan.on .cc-chan-av{background:rgba(255,255,255,.2)}
.cc-chan-body{min-width:0;flex:1;display:flex;flex-direction:column;line-height:1.3}
.cc-chan-name{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-chan-ref{font-size:11px;color:var(--muted);font-family:monospace}
.cc-chan-unread{background:var(--gold);color:var(--ink);font-size:11px;font-weight:700;
  font-style:normal;border-radius:10px;padding:1px 7px;flex:0 0 auto}
.cc-chan-empty{padding:16px 12px;color:var(--muted);font-size:13px;list-style:none}

.cc-chat-pane{display:flex;flex-direction:column;min-width:0}
.cc-chat-blank{display:grid;place-items:center;flex:1;color:var(--muted);font-size:14px;padding:30px}
.cc-chat-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.cc-chat-head strong{display:block;font-family:Georgia,serif;color:var(--teal);font-size:16px}
.cc-chat-sub{display:block;font-size:12px;color:var(--muted)}
.cc-back{display:none;text-decoration:none;color:var(--teal);font-size:20px;line-height:1}

.cc-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.cc-msgs-load{color:var(--muted);font-size:13px;text-align:center;margin:auto}
.cc-m{display:flex;gap:10px;align-items:flex-start;max-width:80%}
.cc-m.mine{flex-direction:row-reverse;align-self:flex-end;text-align:right}
.cc-m.mine .cc-m-meta{justify-content:flex-end}
.cc-m.internal .cc-m-body{background:#FFF6E0;border:1px dashed var(--gold)}
.cc-m-av{width:32px;height:32px;border-radius:50%;flex:0 0 auto;object-fit:cover}
.cc-m-av-i{background:var(--teal);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700}
.cc-m-main{min-width:0}
.cc-m-meta{display:flex;gap:7px;align-items:baseline;font-size:11px;color:var(--muted);margin-bottom:3px;flex-wrap:wrap}
.cc-m-meta b{font-size:12.5px;color:var(--ink)}
.cc-m-meta em{font-style:normal;opacity:.7}
.cc-m-tag{font-style:normal;background:var(--gold);color:var(--ink);border-radius:4px;padding:0 5px;font-size:10px;text-transform:uppercase;letter-spacing:.4px}
.cc-m-body{background:#F1EDE3;border-radius:12px;padding:8px 12px;word-wrap:break-word;
  overflow-wrap:anywhere;font-size:14.5px;text-align:left}
.cc-m.mine .cc-m-body{background:var(--teal);color:#fff}
.cc-m.mine .cc-m-body a{color:var(--gold)}
.cc-m-gone{opacity:.55;font-style:italic}
.cc-m-files{margin-top:6px;display:flex;flex-wrap:wrap;gap:8px}
.cc-m-img img{max-width:220px;max-height:220px;border-radius:9px;display:block}
.cc-m-file{display:flex;flex-direction:column;background:#F1EDE3;border:1px solid var(--line);
  border-radius:9px;padding:8px 12px;text-decoration:none;color:var(--ink);max-width:230px}
.cc-m-file-n{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-m-file-s{font-size:11px;color:var(--muted)}

.cc-composer{border-top:1px solid var(--line);padding:10px 14px 12px;background:#FBF9F4}
.cc-composer-main{display:flex;align-items:flex-end;gap:8px}
.cc-composer textarea{flex:1;min-width:0;resize:none;border:1px solid var(--line);
  border-radius:14px;padding:12px 15px;font:15px/1.55 Arial,sans-serif;
  min-height:46px;max-height:220px;background:#fff}
.cc-clip,.cc-send{background:none;border:0;cursor:pointer;color:var(--teal);padding:8px;
  border-radius:9px;display:grid;place-items:center;flex:0 0 auto}
.cc-send{background:var(--teal);color:#fff}
.cc-clip:hover{background:#F1EDE3}
.cc-attach-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.cc-att{background:#F1EDE3;border:1px solid var(--line);border-radius:7px;padding:3px 6px 3px 9px;
  font-size:12px;display:inline-flex;align-items:center;gap:5px}
.cc-att button{border:0;background:none;cursor:pointer;font-size:15px;line-height:1;color:var(--muted)}
.cc-internal{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:12px;color:var(--muted)}
.cc-readonly{border-top:1px solid var(--line);padding:14px;text-align:center;color:var(--muted);font-size:13px}

@media(max-width:760px){
  .cc-chat{grid-template-columns:1fr;height:calc(100vh - 104px)}
  .cc-chat.has-open .cc-chat-list{display:none}
  .cc-chat:not(.has-open) .cc-chat-pane{display:none}
  .cc-back{display:block}
  .cc-m{max-width:92%}
}

/* ===== Phase 2C: presence, typing, receipts, voice ================= */
.cc-presence{display:block;font-size:12px;color:var(--muted)}
.cc-presence.on{color:#0F766E}
.cc-presence.on::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;
  background:#16A34A;margin-right:6px;vertical-align:middle}

.cc-typing{padding:4px 18px 8px;font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:8px}
.cc-dots{display:inline-flex;gap:3px}
.cc-dots i{width:5px;height:5px;border-radius:50%;background:var(--muted);display:block;
  animation:ccb 1.2s infinite ease-in-out}
.cc-dots i:nth-child(2){animation-delay:.15s}
.cc-dots i:nth-child(3){animation-delay:.3s}
@keyframes ccb{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.cc-dots i{animation:none;opacity:.6}}

.cc-receipt{margin-left:2px}
.cc-tick{font-style:normal;font-size:11px;color:var(--muted);letter-spacing:-1px}
.cc-tick.read{color:#2563EB;letter-spacing:-1px}
.cc-m.mine .cc-tick{color:rgba(26,36,33,.45)}
.cc-m.mine .cc-tick.read{color:#2563EB}

.cc-voice{display:flex;align-items:center;gap:8px;background:#F1EDE3;border:1px solid var(--line);
  border-radius:24px;padding:5px 12px 5px 6px}
.cc-voice audio{height:34px;max-width:230px}
.cc-voice-t{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.cc-m.mine .cc-voice{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.25)}
.cc-m.mine .cc-voice-t{color:rgba(255,255,255,.75)}

.cc-mic{background:none;border:0;cursor:pointer;color:var(--teal);padding:8px;border-radius:9px;
  display:grid;place-items:center;flex:0 0 auto}
.cc-mic:hover{background:#F1EDE3}
.cc-rec{display:flex;align-items:center;gap:10px;padding:9px 14px;background:#FFF1F1;
  border-top:1px solid #F3C6C6;font-size:13px;color:#8B1A1A}
.cc-rec-dot{width:9px;height:9px;border-radius:50%;background:#DC2626;animation:ccp 1s infinite}
@keyframes ccp{0%,100%{opacity:1}50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.cc-rec-dot{animation:none}}
.cc-rec strong{font-variant-numeric:tabular-nums}

.cc-chat-pane.cc-drop{outline:3px dashed var(--gold);outline-offset:-10px;background:#FFFDF6}

.cc-lb{position:fixed;inset:0;background:rgba(7,53,51,.94);z-index:9999;display:grid;
  place-items:center;padding:40px}
.cc-lb img{max-width:92vw;max-height:86vh;border-radius:8px;display:block}
.cc-lb button{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:0;cursor:pointer;
  width:46px;height:46px;border-radius:50%;font-size:26px;line-height:1;display:grid;place-items:center}
.cc-lb-x{top:22px;right:22px}
.cc-lb-p{left:18px;top:50%;transform:translateY(-50%)}
.cc-lb-n{right:18px;top:50%;transform:translateY(-50%)}
.cc-lb button:hover{background:rgba(255,255,255,.24)}

.cc-msgs-err{color:var(--danger);background:#FFF1F1;border:1px solid #F3C6C6;border-radius:8px;
  padding:12px 14px;font:12px/1.6 monospace;text-align:left;white-space:pre-wrap;
  word-break:break-word;max-width:100%}
.cc-mic.rec{background:#DC2626;color:#fff}
.cc-build{display:block;font:10px/1.5 monospace;color:var(--muted);opacity:.65;letter-spacing:.3px}

/* ===== Layout and visibility corrections ========================== */

/* Author rules like .cc-rec{display:flex} beat the browser's own
   [hidden]{display:none}, which is why the recording bar, the typing
   strip and the attachment row were permanently on screen. */
[hidden]{display:none !important}

/* Flex children default to min-height:auto and refuse to shrink below
   their content, so a long thread pushed the composer off the bottom.
   min-height:0 lets the message list scroll instead. */
.cc-chat{height:calc(100vh - 132px);max-height:calc(100vh - 132px)}
.cc-chat-pane{min-height:0;overflow:hidden}
.cc-msgs{min-height:0;flex:1 1 auto}
.cc-chat-list{min-height:0}
.cc-composer{flex:0 0 auto}
.cc-chat-head{flex:0 0 auto}

@supports (height: 100dvh){
  .cc-chat{height:calc(100dvh - 132px);max-height:calc(100dvh - 132px)}
}

/* Recording sits over the composer rather than above it, so nothing
   shifts and the message list never loses height. */
.cc-composer{position:relative}
.cc-rec{position:absolute;left:0;right:0;bottom:100%;z-index:5;
  border-top:1px solid #F3C6C6;border-bottom:1px solid #F3C6C6;
  box-shadow:0 -4px 14px rgba(26,36,33,.07)}

@media(max-width:760px){
  .cc-chat{height:calc(100vh - 96px);max-height:calc(100vh - 96px)}
  @supports (height: 100dvh){
    .cc-chat{height:calc(100dvh - 96px);max-height:calc(100dvh - 96px)}
  }
  .cc-composer{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
}

/* Awaiting approval banner */
.cc-await{display:flex;flex-direction:column;gap:3px;background:#FFF8E6;border:1px solid var(--gold);
  border-left:4px solid var(--gold);border-radius:var(--radius);padding:13px 16px;margin-bottom:16px}
.cc-await strong{font-family:Georgia,serif;color:var(--teal);font-size:15px}
.cc-await span{font-size:13px;color:#6B5A24;line-height:1.55}
.cc-auth-wide{max-width:620px}
.cc-auth-wide h4{margin:0 0 10px;font-size:14px;color:var(--teal);
  border-bottom:1px solid var(--line);padding-bottom:6px}

/* ===== Split screen registration ================================== */
/* Full bleed page mode. Without this the shell caps the page at 420px
   and the split screen collapses into a narrow column. */
.cc-full .cc-main,.cc-bare.cc-full .cc-main{max-width:none;width:100%;padding:0;margin:0}
.cc-full{background:var(--teal)}

.cc-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh;width:100%}
@supports (min-height:100dvh){.cc-split{min-height:100dvh}}
.cc-split-form{background:var(--cream);overflow-y:auto;padding:40px 28px;display:flex;
  justify-content:center;align-items:flex-start}
.cc-reg-card{width:100%;max-width:520px;background:var(--white);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow);padding:32px 34px 30px}

/* Logo beside the title rather than stacked above it, so the heading
   sits at the top of the card instead of halfway down. */
.cc-reg-head{display:flex;align-items:center;gap:18px;padding-bottom:20px;
  border-bottom:1px solid var(--line);margin-bottom:24px}
.cc-reg-logo{flex:0 0 auto;display:block}
.cc-reg-logo img{height:66px;width:auto;display:block}
.cc-reg-h1{font-size:27px;margin:0;line-height:1.12;text-align:left}
.cc-reg-sub{margin:5px 0 0;font-size:12.5px;color:var(--muted);text-align:left;
  padding:0;border:0}
.cc-reg-card h4{margin:0 0 12px;font-size:12px;letter-spacing:.9px;text-transform:uppercase;
  color:var(--teal);font-family:Arial,sans-serif;font-weight:700}
.cc-reg-alt{text-align:center;margin:20px 0 0;font-size:13px}

/* The photo is a real element, not a CSS background, so a missing file
   shows as a broken image instead of silently leaving a teal panel. */
.cc-split-art{position:relative;background:var(--teal);overflow:hidden;min-height:100vh}
@supports (min-height:100dvh){.cc-split-art{min-height:100dvh}}
.cc-split-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 22%;display:block}
.cc-split-art::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(7,53,51,.06) 0%,rgba(7,53,51,.18) 45%,rgba(7,53,51,.88) 100%)}
.cc-split-quote{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:38px 40px;color:#fff}
.cc-split-quote strong{display:block;font:400 27px/1.25 Georgia,serif}
.cc-split-quote span{display:block;margin-top:6px;font-size:14px;color:var(--gold)}

/* Tablet and phone: the photo becomes a banner above the form rather
   than disappearing. Order is reversed so it sits on top. */
@media(max-width:960px){
  .cc-split{grid-template-columns:1fr;min-height:0}
  .cc-split-art{order:-1;min-height:0;height:34vh;max-height:300px;min-height:190px}
  .cc-split-img{object-position:center 38%}
  .cc-split-art::after{
    background:linear-gradient(180deg,rgba(7,53,51,.05) 0%,rgba(7,53,51,.30) 55%,rgba(7,53,51,.90) 100%)}
  .cc-split-quote{padding:20px 22px}
  .cc-split-quote strong{font-size:21px}
  .cc-split-quote span{font-size:12.5px;margin-top:3px}
  .cc-split-form{padding:20px 14px 40px;align-items:flex-start}
  .cc-reg-card{padding:22px 18px 24px;border-radius:12px;margin-top:-42px;position:relative;z-index:3}
  .cc-reg-head{gap:13px;margin-bottom:20px;padding-bottom:16px}
  .cc-reg-logo img{height:50px}
  .cc-reg-h1{font-size:22px}
  .cc-reg-sub{font-size:12px}
}

@media(max-width:520px){
  .cc-split-art{height:26vh;min-height:160px}
  .cc-split-quote strong{font-size:18px}
  .cc-reg-card{margin-top:-34px}
  .cc-reg-head{flex-direction:column;align-items:flex-start;gap:10px}
}

/* ===== Share links and QR ========================================= */
.cc-linkrow{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.cc-linkrow-main{flex:1 1 320px;min-width:0}
.cc-linkrow-main input[type=text]{font:12px monospace}
.cc-linkrow-btns{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.cc-linkrow-sub{border-top:1px solid var(--line);padding-top:16px;margin-top:16px}
.cc-qrbox{flex:0 0 auto}
.cc-qr{width:150px;height:150px;border:1px solid var(--line);border-radius:10px;
  padding:8px;background:#fff}
.cc-qr svg{width:100%;height:100%;display:block}
@media(max-width:560px){.cc-qr{width:124px;height:124px}}

/* ===== Phase 3A: reactions, replies, mentions, pins =============== */
.cc-pins{display:flex;gap:8px;align-items:center;padding:8px 14px;background:#FFFBF0;
  border-bottom:1px solid var(--line);overflow-x:auto;flex:0 0 auto}
.cc-pins-t{flex:0 0 auto;font-size:13px}
.cc-pin-chip{flex:0 0 auto;max-width:280px;background:#fff;border:1px solid var(--line);
  border-radius:20px;padding:5px 12px;font-size:12px;cursor:pointer;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.cc-pin-chip b{color:var(--teal);margin-right:5px}
.cc-pin-chip:hover{border-color:var(--gold)}

.cc-m{position:relative}
.cc-m.pinned .cc-m-body{box-shadow:inset 3px 0 0 var(--gold)}
.cc-m.flash .cc-m-body{animation:ccflash 1.6s ease-out}
@keyframes ccflash{0%{background:#FFF0C2}100%{}}
@media(prefers-reduced-motion:reduce){.cc-m.flash .cc-m-body{animation:none;outline:2px solid var(--gold)}}

.cc-macts{position:absolute;top:-12px;right:0;display:none;gap:1px;background:#fff;
  border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);padding:2px;z-index:3}
.cc-m.mine .cc-macts{right:auto;left:0}
.cc-m:hover .cc-macts,.cc-m:focus-within .cc-macts{display:flex}
.cc-macts button{border:0;background:none;cursor:pointer;font-size:13px;line-height:1;
  padding:5px 7px;border-radius:6px;color:var(--muted)}
.cc-macts button:hover{background:#F1EDE3;color:var(--ink)}
.cc-macts button.on{color:var(--gold)}

/* The quoted message a reply refers to.

   Everything here is explicit: background, text colour and the name.
   It used to inherit its colour, which meant white text on a light
   bubble as soon as a wallpaper was behind it, and the quote vanished. */
.cc-msgs .cc-m .cc-quote,
.cc-quote{display:block!important;border-left:3px solid var(--gold);
  background:rgba(255,255,255,.95)!important;color:#1A2421!important;
  border-radius:0 8px 8px 0;padding:6px 10px;margin-bottom:6px;
  text-decoration:none;font-size:12.5px;line-height:1.45;max-width:100%}
.cc-msgs .cc-m .cc-quote b,
.cc-quote b{display:block;color:#0B4D4A!important;font-size:11.5px;font-weight:700}
.cc-msgs .cc-m .cc-quote span,
.cc-quote span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;color:#3C4A47!important;opacity:1!important;white-space:normal}
.cc-quote:hover{background:#fff!important}

/* My own bubble is dark, so the quote flips to stay readable. */
.cc-msgs .cc-m.mine .cc-quote,
.cc-m.mine .cc-quote{background:rgba(0,0,0,.30)!important;color:#F2F7F6!important}
.cc-msgs .cc-m.mine .cc-quote b,
.cc-m.mine .cc-quote b{color:#D4A820!important}
.cc-msgs .cc-m.mine .cc-quote span,
.cc-m.mine .cc-quote span{color:#DCE9E7!important}
.cc-m.mine .cc-quote:hover{background:rgba(0,0,0,.38)!important}

.cc-rx{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.cc-m.mine .cc-rx{justify-content:flex-end}
.cc-rx-b{background:#fff;border:1px solid var(--line);border-radius:20px;padding:2px 9px;
  font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;line-height:1.6}
.cc-rx-b i{font-style:normal;font-size:11px;color:var(--muted)}
.cc-rx-b.mine{border-color:var(--teal);background:#E9F2F1}
.cc-rx-b.mine i{color:var(--teal)}

.cc-picker{position:fixed;z-index:9998;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);padding:6px;display:flex;gap:2px}
.cc-picker button{border:0;background:none;cursor:pointer;font-size:20px;padding:5px 6px;
  border-radius:8px;line-height:1}
.cc-picker button:hover{background:#F1EDE3}

.cc-mention{background:rgba(212,168,32,.22);border-radius:4px;padding:0 3px;font-weight:700;
  color:var(--teal)}
.cc-m.mine .cc-mention{background:rgba(255,255,255,.22);color:#fff}

.cc-mentions{position:fixed;z-index:9998;background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--shadow);padding:4px;max-height:230px;overflow-y:auto}
.cc-mentions button{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;
  cursor:pointer;padding:7px 9px;border-radius:7px;font-size:13.5px;text-align:left;color:var(--ink)}
.cc-mentions button:hover,.cc-mentions button.on{background:#F1EDE3}
.cc-mn-av{width:26px;height:26px;border-radius:50%;background:var(--teal);color:#fff;
  display:grid;place-items:center;font-size:10px;font-weight:700;flex:0 0 auto}

.cc-replybar{display:flex;align-items:center;gap:10px;margin-bottom:8px;background:#F1EDE3;
  border-left:3px solid var(--gold);border-radius:0 8px 8px 0;padding:7px 10px}
.cc-replyq{flex:1;min-width:0;font-size:12.5px}
.cc-replyq b{display:block;color:var(--teal);font-size:11.5px}
.cc-replyq span{display:block;opacity:.75;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-replybar button{border:0;background:none;cursor:pointer;font-size:17px;color:var(--muted)}

/* ===== Phase 3B: events =========================================== */
.cc-ev{display:flex;gap:14px;align-items:center;padding:11px 8px;border-radius:9px;
  text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line)}
.cc-ev:last-child{border-bottom:0}
.cc-ev:hover{background:#F1EDE3}
.cc-ev-past{opacity:.72}
.cc-ev-date{flex:0 0 auto;width:50px;text-align:center;background:var(--teal);color:#fff;
  border-radius:9px;padding:6px 0;line-height:1.1}
.cc-ev-date b{display:block;font:700 19px Georgia,serif}
.cc-ev-date i{display:block;font-style:normal;font-size:10px;text-transform:uppercase;
  letter-spacing:.6px;color:var(--gold)}
.cc-ev-body{flex:1;min-width:0}
.cc-ev-body strong{display:block;font-size:14.5px}
.cc-ev-body small{display:block;color:var(--muted);font-size:12px}
.cc-ev-live{flex:0 0 auto;font-style:normal;background:#DC2626;color:#fff;font-size:10.5px;
  font-weight:700;text-transform:uppercase;letter-spacing:.6px;border-radius:20px;padding:3px 10px}

.cc-evhead{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start}
.cc-evhead-main{flex:1 1 320px;min-width:0}
.cc-evhead-code{flex:0 0 auto;text-align:center;background:#F1EDE3;border:1px solid var(--line);
  border-radius:12px;padding:14px 18px;min-width:190px}
.cc-evhead-code small{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted)}
.cc-evhead-code b{display:block;font:700 30px/1.3 Georgia,serif;color:var(--teal);letter-spacing:4px}
.cc-evhead-code input{font:11px monospace;margin-top:8px;text-align:center;background:#fff}
.cc-ev-tag{display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.7px;border-radius:20px;padding:3px 11px;background:var(--line);color:var(--ink)}
.cc-ev-tag.live{background:#DC2626;color:#fff}
.cc-ev-tag.ended{background:#E5E0D4;color:var(--muted)}
.cc-ev-tag.cancelled{background:var(--danger);color:#fff}
.cc-ev-tag.upcoming{background:var(--gold);color:var(--ink)}

.cc-q{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line)}
.cc-q:last-child{border-bottom:0}
.cc-q.answered{opacity:.62}
.cc-qvote{background:#fff;border:1px solid var(--line);border-radius:9px;cursor:pointer;
  width:46px;padding:5px 0;display:flex;flex-direction:column;align-items:center;
  font-size:11px;color:var(--muted);line-height:1.3}
.cc-qvote.on{border-color:var(--teal);background:#E9F2F1;color:var(--teal)}
.cc-qvote i{font-style:normal;font-weight:700;font-size:13px}
.cc-q-body{flex:1;min-width:0}
.cc-q-body p{margin:0 0 4px;font-size:14.5px}
.cc-q-body small{color:var(--muted);font-size:11.5px}

/* ===== Event hero ================================================= */
.cc-evhero{position:relative;border-radius:var(--radius);overflow:hidden;margin-bottom:16px;
  background:var(--teal)}
.cc-evhero-bg{position:absolute;inset:0;
  background:
    radial-gradient(900px 420px at 12% -18%, rgba(212,168,32,.30), transparent 62%),
    radial-gradient(700px 380px at 105% 118%, rgba(15,99,96,.85), transparent 60%),
    linear-gradient(140deg,#073533 0%,#0B4D4A 55%,#0F6360 100%)}
.cc-evhero-bg::after{content:'';position:absolute;inset:0;opacity:.10;
  background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);
  background-size:46px 46px}
.cc-evhero-inner{position:relative;z-index:2;padding:30px 32px 26px;color:#fff}
.cc-evhero-logo{height:60px;width:auto;display:block;margin-bottom:18px}
.cc-evhero-title{font-size:31px;line-height:1.15;color:#fff;margin:10px 0 14px;max-width:24ch}
.cc-evhero-meta{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13px;color:#CFE0DD}
.cc-evhero-meta span{display:inline-flex;align-items:center;gap:7px}
.cc-evhero-meta svg{opacity:.75;flex:0 0 auto}
.cc-evhero-meta strong{color:var(--gold)}
.cc-evhero-desc{margin:16px 0 0;font-size:14.5px;line-height:1.65;color:#DCE9E7;max-width:60ch}
.cc-evhero-code{margin-top:22px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);
  border-radius:12px;padding:12px 16px;backdrop-filter:blur(3px)}
.cc-evhero-code small{display:block;font-size:10.5px;text-transform:uppercase;
  letter-spacing:1px;color:#A8C4C0}
.cc-evhero-code b{display:block;font:700 27px/1.25 Georgia,serif;color:var(--gold);letter-spacing:5px}
.cc-evhero-code input{flex:1;min-width:200px;font:11px monospace;background:rgba(0,0,0,.22);
  border-color:rgba(255,255,255,.22);color:#DCE9E7}
.cc-evhero .cc-ev-tag.upcoming{background:var(--gold);color:var(--ink)}
.cc-evhero .cc-ev-tag.ended{background:rgba(255,255,255,.18);color:#CFE0DD}

@media(max-width:640px){
  .cc-evhero-inner{padding:22px 18px}
  .cc-evhero-logo{height:46px;margin-bottom:14px}
  .cc-evhero-title{font-size:24px}
  .cc-evhero-code b{font-size:23px;letter-spacing:4px}
}

/* ===== Chat header actions ======================================== */
.cc-chat-head{justify-content:space-between}
.cc-chat-title{flex:1;min-width:0}
.cc-chat-acts{display:flex;gap:2px;flex:0 0 auto;align-items:center}
.cc-hact{background:none;border:0;cursor:pointer;color:var(--teal);padding:8px;border-radius:9px;
  display:grid;place-items:center;text-decoration:none;position:relative}
.cc-hact:hover{background:#F1EDE3}
.cc-hact.soon{color:var(--muted)}
.cc-hact.soon::after{content:'';position:absolute;top:6px;right:6px;width:6px;height:6px;
  border-radius:50%;background:var(--gold)}
.cc-macts button svg{display:block}
.cc-macts button.on{color:var(--gold)}
@media(max-width:560px){.cc-chat-acts .cc-hact:nth-child(n+3){display:none}}

/* Public share page */
.cc-share{max-width:640px;margin:0 auto;padding:26px 16px 50px}
.cc-share-cta{background:#fff;border:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius);
  border-top:0;padding:22px 24px 24px;margin-top:-1px}

/* Staff visibility */
.cc-visgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px 14px;margin-top:8px}
.cc-visgrid-tight{margin:0;gap:4px 12px;font-size:12.5px}
.cc-visrow{display:grid;grid-template-columns:minmax(160px,1fr) minmax(180px,1fr) minmax(240px,2fr) auto;
  gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.cc-visrow:last-child{border-bottom:0}
.cc-visrow-name b{display:block;font-size:14px}
.cc-visrow-name small{color:var(--muted);font-size:11.5px}
.cc-visrow select{margin:0}
@media(max-width:820px){.cc-visrow{grid-template-columns:1fr}}

/* ===== Phase 3D: calls ============================================ */
.cc-in-call{background:#062B29}
.cc-call{position:fixed;inset:0;display:flex;flex-direction:column;background:#062B29;color:#fff}
.cc-call-stage{position:relative;flex:1;min-height:0;overflow:hidden;background:#04211F}
#ccRemote{width:100%;height:100%;object-fit:cover;display:block;background:#04211F}
#ccLocal{position:absolute;right:16px;bottom:16px;width:150px;max-width:32vw;border-radius:12px;
  border:2px solid rgba(255,255,255,.28);object-fit:cover;background:#04211F;z-index:3;
  box-shadow:0 6px 22px rgba(0,0,0,.4)}
.cc-call-poster{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;z-index:2;
  background:radial-gradient(700px 460px at 50% 34%,#0F6360,#062B29 72%);transition:opacity .35s}
.cc-call-poster.hide{opacity:0;pointer-events:none}
.cc-call-logo{height:56px;width:auto;opacity:.95}
.cc-call-name{font:400 30px/1.2 Georgia,serif}
.cc-call-state{font-size:14px;color:#9DBFBB;min-height:20px}
.cc-call-bar{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:16px;
  padding:20px 18px calc(22px + env(safe-area-inset-bottom));position:relative;
  background:rgba(4,33,31,.9)}
.cc-cbtn{width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;display:grid;
  place-items:center;background:rgba(255,255,255,.14);color:#fff}
.cc-cbtn:hover{background:rgba(255,255,255,.24)}
.cc-cbtn.off{background:#fff;color:#062B29}
.cc-cbtn-end{background:#DC2626}
.cc-cbtn-end:hover{background:#B91C1C}
.cc-call-timer{position:absolute;right:22px;font:14px/1 monospace;color:#9DBFBB;
  font-variant-numeric:tabular-nums}
.cc-call-block{margin:auto;max-width:420px;text-align:center;padding:32px 24px}
.cc-call-block h2{color:#fff;font-size:23px;margin:16px 0 8px}
.cc-call-block p{color:#9DBFBB;font-size:14.5px;line-height:1.6;margin-bottom:20px}
.cc-call-note{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;
  background:#fff;color:var(--ink);border-radius:14px;padding:22px;width:min(440px,92vw);
  box-shadow:0 18px 50px rgba(0,0,0,.45)}
.cc-call-note h3{margin:0 0 12px}
@media(max-width:560px){.cc-call-timer{position:static;order:-1;width:100%;text-align:center;margin-bottom:6px}
  .cc-call-bar{flex-wrap:wrap}}

/* Incoming call banner, shown anywhere in the app */
.cc-incoming{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:10000;
  width:min(400px,94vw)}
.cc-inc-card{display:flex;align-items:center;gap:13px;background:var(--teal);color:#fff;
  border-radius:14px;padding:12px 14px;box-shadow:0 12px 34px rgba(0,0,0,.32);
  border:1px solid rgba(255,255,255,.16);animation:ccinc .35s ease-out}
@keyframes ccinc{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.cc-inc-card{animation:none}}
.cc-inc-av{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.cc-inc-init{background:var(--gold);color:var(--ink);display:grid;place-items:center;
  font:700 17px Georgia,serif}
.cc-inc-txt{flex:1;min-width:0;line-height:1.3}
.cc-inc-txt b{display:block;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-inc-txt span{font-size:12px;color:#A8C4C0}
.cc-inc-btns{display:flex;gap:8px;flex:0 0 auto}
.cc-inc-yes,.cc-inc-no{width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;color:#fff}
.cc-inc-yes{background:#16A34A}
.cc-inc-no{background:#DC2626}

/* Call history */
.cc-callrow{display:flex;gap:13px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.cc-callrow:last-child{border-bottom:0}
.cc-callrow-ico{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:#E9F2F1;color:var(--teal)}
.cc-callrow-ico.missed,.cc-callrow-ico.declined{background:#FEE2E2;color:#B91C1C}
.cc-callrow-b{flex:1;min-width:0}
.cc-callrow-b b{display:block;font-size:14.5px}
.cc-callrow-b small{color:var(--muted);font-size:12px}
.cc-callnote{margin-top:8px;background:#F1EDE3;border-radius:9px;padding:9px 12px;font-size:13.5px}
.cc-callnote.internal{background:#FFF6E0;border:1px dashed var(--gold)}
.cc-callnote i{display:inline-block;font-style:normal;font-weight:700;color:var(--teal);
  font-size:11px;text-transform:uppercase;letter-spacing:.5px;margin-right:6px}
.cc-callnote small{display:block;margin-top:5px;color:var(--muted);font-size:11.5px}

/* ===== Phase 4A: the feed ========================================= */
.cc-feedwrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.cc-feedmain{min-width:0}
.cc-feedside{position:sticky;top:14px}
@media(max-width:900px){
  .cc-feedwrap{grid-template-columns:1fr}
  /* The sidebar used to sit above the feed, so opening Feed on a phone
     showed People and Trending and you had to scroll past them to reach
     a single post. The posts come first now. */
  .cc-feedside{position:static;order:1}
  .cc-feedmain{order:0}
}

.cc-composer-post .cc-cp-top{display:flex;gap:12px;align-items:flex-start}
.cc-composer-post textarea{flex:1;border:0;resize:none;font:15px/1.6 Arial,sans-serif;padding:8px 0;background:none}
.cc-composer-post textarea:focus{outline:none}
.cc-cp-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);
  margin-top:10px;padding-top:10px}
.cc-cp-btn{display:inline-flex;align-items:center;gap:7px;background:none;border:1px solid var(--line);
  border-radius:20px;padding:6px 13px;font-size:13px;cursor:pointer;color:var(--teal)}
.cc-cp-btn:hover{background:#F1EDE3}
.cc-cp-aud{width:auto;margin:0;font-size:13px;padding:6px 10px}
.cc-cp-note{margin:8px 0 0;font-size:12px}
.cc-cp-previews{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.cc-cp-previews img{width:82px;height:82px;object-fit:cover;border-radius:9px;border:1px solid var(--line)}

.cc-post{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;margin-bottom:14px;box-shadow:var(--shadow)}
.cc-post.announce{border-left:4px solid var(--gold)}
.cc-post-flag{background:var(--gold);color:var(--ink);font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.8px;border-radius:20px;padding:3px 11px;
  display:inline-block;margin-bottom:10px}
.cc-post-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px}
.cc-post-who{flex:1;min-width:0;line-height:1.35}
.cc-post-who b{display:block;font-size:14.5px}
.cc-post-who small{color:var(--muted);font-size:12px;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.cc-rolechip{color:#fff;font-size:10px;border-radius:20px;padding:1px 8px;font-weight:700}
.cc-post-menu{position:relative}
.cc-post-menu summary{list-style:none;cursor:pointer;color:var(--muted);padding:2px 8px;font-size:18px}
.cc-post-menu summary::-webkit-details-marker{display:none}
.cc-post-menu-p{position:absolute;right:0;top:100%;background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--shadow);padding:6px;z-index:6;min-width:170px}
.cc-post-menu-p a,.cc-post-menu-p button{display:block;width:100%;text-align:left;border:0;
  background:none;cursor:pointer;padding:8px 10px;border-radius:7px;font-size:13.5px;
  color:var(--ink);text-decoration:none}
.cc-post-menu-p a:hover,.cc-post-menu-p button:hover{background:#F1EDE3}
.cc-post-body{font-size:15px;line-height:1.65;word-wrap:break-word;overflow-wrap:anywhere}
.cc-post-body .cc-tag{color:var(--teal);font-weight:700;text-decoration:none}
.cc-post-media{display:grid;gap:4px;margin-top:12px;border-radius:12px;overflow:hidden}
.cc-post-media.cc-m1{grid-template-columns:1fr}
.cc-post-media.cc-m2{grid-template-columns:1fr 1fr}
.cc-post-media.cc-m3,.cc-post-media.cc-m4{grid-template-columns:1fr 1fr}
.cc-post-media img{width:100%;height:100%;object-fit:cover;display:block;max-height:420px}
.cc-post-media.cc-m1 img{max-height:520px}
.cc-embed{position:relative;padding-bottom:56.25%;height:0;margin-top:12px;border-radius:12px;overflow:hidden;background:#000}
.cc-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cc-post-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px;
  padding-top:10px;border-top:1px solid var(--line)}
.cc-rxform{display:flex;gap:5px;flex-wrap:wrap}
.cc-post-act{background:none;border:0;cursor:pointer;color:var(--muted);font-size:13px;
  text-decoration:none;padding:4px 6px;border-radius:7px}
.cc-post-act:hover{background:#F1EDE3;color:var(--ink)}
.cc-post-act.on{color:var(--gold);font-weight:700}
.cc-post-cbox{display:flex;gap:8px;margin-top:10px}
.cc-post-cbox input{flex:1;margin:0}
.cc-cmt{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.cc-cmt:last-of-type{border-bottom:0}
.cc-cmt b{font-size:13.5px;margin-right:6px}
.cc-cmt span{font-size:14px}
.cc-cmt small{display:block;color:var(--muted);font-size:11.5px;margin-top:3px}
.cc-tagbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cc-tagbar h2{margin:0;font-size:20px}
.cc-tagcloud{display:flex;flex-wrap:wrap;gap:7px}
.cc-tagcloud a,.cc-wordchip{display:inline-flex;align-items:center;gap:6px;background:#F1EDE3;
  border:1px solid var(--line);border-radius:20px;padding:4px 11px;font-size:12.5px;
  text-decoration:none;color:var(--ink);cursor:pointer}
.cc-tagcloud a i,.cc-wordchip i{font-style:normal;color:var(--muted);font-size:11px}
.cc-wordchip.block{background:#FEE2E2;border-color:#F3C6C6;color:#8B1A1A}
.cc-modrow{display:grid;grid-template-columns:minmax(0,2fr) minmax(220px,1fr);gap:16px;
  padding:14px 0;border-bottom:1px solid var(--line)}
.cc-modrow:last-child{border-bottom:0}
.cc-modrow-b p{margin:8px 0 0;font-size:14px;line-height:1.6}
.cc-modrow-b small{color:var(--muted);font-size:12px}
.cc-modmedia{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.cc-modmedia img{width:92px;height:92px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
@media(max-width:760px){.cc-modrow{grid-template-columns:1fr}}

/* Enrolment toggle in the user list */
.cc-filterbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.cc-enrol{border:1px solid var(--line);background:#F1EDE3;color:var(--muted);cursor:pointer;
  border-radius:20px;padding:3px 11px;font-size:11.5px;font-weight:700;white-space:nowrap}
.cc-enrol:hover{border-color:var(--gold)}
.cc-enrol.on{background:#E9F2F1;border-color:var(--teal);color:var(--teal)}
.cc-enrol.on::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#16A34A;margin-right:6px;vertical-align:middle}

/* Feed composer upload states */
.cc-cp-prog{font-size:12.5px;color:var(--muted);margin-top:8px}
.cc-cp-prog.bad{color:var(--danger)}
.cc-cp-thumb{position:relative;display:inline-block}
.cc-cp-thumb img{width:82px;height:82px;object-fit:cover;border-radius:9px;border:1px solid var(--line);display:block}
.cc-cp-thumb button{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;
  border:0;background:var(--ink);color:#fff;cursor:pointer;font-size:14px;line-height:1;
  display:grid;place-items:center}

/* Post state banners, edit and delete panels */
.cc-post-state{display:flex;gap:14px;align-items:center;justify-content:space-between;
  border-radius:10px;padding:11px 14px;margin-bottom:12px;flex-wrap:wrap}
.cc-post-state.pending{background:#FFF8E6;border:1px solid var(--gold)}
.cc-post-state.rejected{background:#FFF1F1;border:1px solid #F3C6C6}
.cc-post-state strong{display:block;font-size:13.5px;color:var(--teal)}
.cc-post-state.rejected strong{color:#8B1A1A}
.cc-post-state span{display:block;font-size:12.5px;color:#6B5A24;line-height:1.5}
.cc-post-state.rejected span{color:#8B1A1A}
.cc-editbox textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  font:15px/1.6 Arial,sans-serif;resize:vertical}
.cc-delbox{background:#FFF1F1;border:1px solid #F3C6C6;border-radius:10px;padding:16px;margin-top:12px}
.cc-delbox h3{margin:0 0 10px;color:#8B1A1A;font-size:16px}
.cc-edited{color:var(--muted);font-size:11.5px;margin-left:6px}

/* Video in posts and in the composer */
.cc-post-media video{width:100%;max-height:520px;display:block;background:#000;border-radius:0}
.cc-post-media.cc-m1 video{max-height:560px}
.cc-cp-thumb.is-video img{filter:brightness(.72)}
.cc-cp-noimg{width:82px;height:82px;border-radius:9px;border:1px solid var(--line);
  background:var(--teal);color:#fff;display:grid;place-items:center;font-size:11px}
.cc-cp-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:0;height:0;border-left:14px solid #fff;border-top:9px solid transparent;
  border-bottom:9px solid transparent;pointer-events:none;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}

/* ===== Live room =================================================== */
.cc-room{position:fixed;inset:0;display:flex;flex-direction:column;background:#062B29;color:#fff}
.cc-room-head{flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:12px 18px;
  background:rgba(4,33,31,.85);border-bottom:1px solid rgba(255,255,255,.10)}
.cc-room-logo{height:30px;width:auto}
.cc-room-title{flex:1;min-width:0;line-height:1.3}
.cc-room-title strong{display:block;font:400 17px Georgia,serif}
.cc-room-title span{font-size:12px;color:#9DBFBB}
.cc-room-state{font-size:12.5px;color:var(--gold)}
.cc-room-body{flex:1;min-height:0;display:grid;grid-template-columns:1fr 300px}
.cc-stage{padding:14px;display:grid;gap:10px;align-content:center;overflow-y:auto}
.cc-stage.n0,.cc-stage.n1{grid-template-columns:1fr}
.cc-stage.n2{grid-template-columns:1fr 1fr}
.cc-stage.n3,.cc-stage.n4{grid-template-columns:1fr 1fr}
.cc-stage.n5,.cc-stage.n6{grid-template-columns:repeat(3,1fr)}
.cc-stage.n7,.cc-stage.n8,.cc-stage.n9{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.cc-room-body{grid-template-columns:1fr}
  .cc-stage{grid-template-columns:1fr 1fr!important}}

.cc-tile{position:relative;background:#04211F;border-radius:12px;overflow:hidden;aspect-ratio:16/9;
  border:1px solid rgba(255,255,255,.08)}
.cc-tile video{width:100%;height:100%;object-fit:cover;display:block}
.cc-tile audio{display:none}
.cc-tile-poster{position:absolute;inset:0;display:grid;place-items:center;opacity:0;
  background:radial-gradient(400px 300px at 50% 40%,#0F6360,#04211F);transition:opacity .2s}
.cc-tile.cam-off .cc-tile-poster{opacity:1}
.cc-tile-av{width:74px;height:74px;border-radius:50%;background:var(--gold);color:var(--ink);
  display:grid;place-items:center;font:700 25px Georgia,serif}
.cc-tile-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;
  padding:8px 12px;background:linear-gradient(transparent,rgba(4,33,31,.85));font-size:12.5px}
.cc-tile-bar b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400}
.cc-tile-mic{width:8px;height:8px;border-radius:50%;background:#16A34A;flex:0 0 auto}
.cc-tile-mic.off{background:#DC2626}
.cc-tile.speaking{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold)}
.cc-tile-hand{position:absolute;top:10px;right:12px;font-size:20px}

.cc-room-side{border-left:1px solid rgba(255,255,255,.10);display:flex;flex-direction:column;min-height:0}
.cc-hands{flex:0 0 auto;padding:10px;border-bottom:1px solid rgba(255,255,255,.10);
  display:flex;flex-direction:column;gap:6px}
.cc-hands button{background:rgba(212,168,32,.16);border:1px solid var(--gold);color:#fff;
  border-radius:9px;padding:8px 10px;cursor:pointer;font-size:12.5px;text-align:left}
.cc-hands button span{display:block;color:var(--gold);font-size:11px}
.cc-rc{flex:1;min-height:0;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.cc-rc-msg{font-size:13.5px;line-height:1.5;color:#DCE9E7}
.cc-rc-msg b{color:var(--gold);font-weight:400;margin-right:5px}
.cc-rc-form{flex:0 0 auto;display:flex;gap:7px;padding:10px;border-top:1px solid rgba(255,255,255,.10)}
.cc-rc-form input{flex:1;margin:0;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);
  color:#fff;font-size:13px}
.cc-room-bar{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:14px;
  padding:16px calc(16px + env(safe-area-inset-bottom));background:rgba(4,33,31,.9)}
.cc-room-bar .cc-cbtn.on{background:var(--gold);color:var(--ink)}
.cc-room-blocked{margin:auto;text-align:center;max-width:440px;padding:30px}
.cc-room-blocked h2{color:#fff;font-size:22px;margin-bottom:10px}
.cc-room-blocked p{color:#9DBFBB;font-size:14px;line-height:1.6;margin-bottom:18px}

/* Meet now */
.cc-meetnow{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cc-meetnow h3{margin:0 0 2px}
.cc-meetnow p{margin:0}
.cc-meetnow form{display:flex;gap:8px;align-items:center;flex:1 1 320px;justify-content:flex-end}
.cc-meetnow input{margin:0;max-width:280px}
.cc-meetnow button[disabled]{opacity:.45;cursor:not-allowed}

/* Invite panel inside the room */
.cc-room-invite{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:20px;padding:7px 14px;
  cursor:pointer;font-size:13px;flex:0 0 auto}
.cc-room-invite:hover{background:rgba(255,255,255,.2)}
.cc-share-panel{position:absolute;top:62px;right:16px;z-index:20;width:min(400px,92vw);
  background:#fff;color:var(--ink);border-radius:14px;box-shadow:0 18px 46px rgba(0,0,0,.45);
  padding:18px;display:flex;flex-direction:column;gap:14px}
.cc-sp-code{text-align:center;background:#F1EDE3;border-radius:10px;padding:10px}
.cc-sp-code small{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}
.cc-sp-code b{display:block;font:700 27px Georgia,serif;color:var(--teal);letter-spacing:5px}
.cc-sp-link label{font-size:12px}
.cc-sp-row{display:flex;gap:8px}
.cc-sp-row input{flex:1;margin:0;font:11.5px monospace}
.cc-sp-btns{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap}
@media(max-width:560px){.cc-share-panel{right:8px;left:8px;width:auto}
  .cc-room-invite span{display:none}}
.cc-room-build{font:10px monospace;opacity:.6}
.cc-room-state{max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Shared screen gets a wide tile above the people */
.cc-tile-share{grid-column:1 / -1;aspect-ratio:16/9;background:#000;border-color:var(--gold)}
.cc-tile-share video{object-fit:contain;background:#000}
.cc-stage.has-share{align-content:start}
.cc-stage.has-share .cc-tile:not(.cc-tile-share){max-height:170px}

/* Virtual background picker */
.cc-bg-panel{position:absolute;left:50%;transform:translateX(-50%);bottom:96px;z-index:25;
  width:min(520px,94vw);background:#fff;color:var(--ink);border-radius:14px;padding:16px;
  box-shadow:0 18px 46px rgba(0,0,0,.45)}
.cc-bg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.cc-bg-head h3{margin:0;font-size:16px}
.cc-bg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px}
.cc-bgo{position:relative;border:2px solid var(--line);background:#F1EDE3;border-radius:10px;
  overflow:hidden;cursor:pointer;padding:0;aspect-ratio:16/10}
.cc-bgo img{width:100%;height:100%;object-fit:cover;display:block}
.cc-bgo-plain{display:block;width:100%;height:100%;
  background:repeating-linear-gradient(45deg,#E5E0D4,#E5E0D4 6px,#F1EDE3 6px,#F1EDE3 12px)}
.cc-bgo i{position:absolute;left:0;right:0;bottom:0;font-style:normal;font-size:10.5px;
  background:rgba(11,77,74,.86);color:#fff;padding:3px 5px;text-overflow:ellipsis;
  overflow:hidden;white-space:nowrap}
.cc-bgo.on{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold)}
.cc-bgo b{position:absolute;top:3px;right:3px;width:19px;height:19px;border-radius:50%;
  background:rgba(0,0,0,.6);color:#fff;font-size:13px;line-height:19px;text-align:center}
#ccBgNote{margin:10px 0 0;font-size:12px;min-height:16px}
@media(max-width:560px){.cc-bg-panel{bottom:88px;padding:12px}}

/* Background panel header and staff-only pack */
.cc-bg-headr{display:flex;align-items:center;gap:8px}
.cc-bg-x{background:#F1EDE3;border:1px solid var(--line);border-radius:50%;width:30px;height:30px;
  display:grid;place-items:center;cursor:pointer;color:var(--muted);flex:0 0 auto}
.cc-bg-x:hover{background:#E5E0D4;color:var(--ink)}
.cc-bgo.staff::after{content:'CIC';position:absolute;top:4px;left:4px;background:var(--gold);
  color:var(--ink);font-size:8.5px;font-weight:700;letter-spacing:.5px;border-radius:4px;padding:1px 4px}
.cc-bg-grid{max-height:46vh;overflow-y:auto}

/* Reservation stats */
.cc-statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.cc-stat{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow)}
.cc-stat b{display:block;font:700 30px/1.1 Georgia,serif;color:var(--teal)}
.cc-stat span{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.cc-livecount{display:inline-flex;align-items:center;gap:7px;background:var(--gold);color:var(--ink);
  border-radius:20px;padding:3px 12px;font-weight:700;font-size:13px}
.cc-livecount::before{content:'';width:7px;height:7px;border-radius:50%;background:#16A34A}
.cc-reserve{background:#fff;border:1px solid var(--line);border-top:0;padding:22px 24px}
.cc-reserve h3{margin:0 0 12px}
.cc-reserve .cc-livecount{margin:0 0 14px}

/* Countdown */
.cc-countdown{background:#fff;border:1px solid var(--line);border-top:0;padding:20px 24px;text-align:center}
.cc-cd-clock{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.cc-cd-u{display:flex;flex-direction:column;align-items:center;background:#F1EDE3;
  border-radius:10px;padding:9px 14px;min-width:66px}
.cc-cd-u b{font:700 27px/1 Georgia,serif;color:var(--teal);font-variant-numeric:tabular-nums}
.cc-cd-u i{font-style:normal;font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;
  color:var(--muted);margin-top:3px}
.cc-cd-live{display:inline-block;background:#DC2626;color:#fff;border-radius:20px;
  padding:6px 18px;font-weight:700;font-size:14px}
.cc-cd-join{margin-top:14px;font-size:16px;padding:13px}
.cc-countdown.open .cc-cd-u b{color:var(--gold)}

/* Waiting room */
.cc-lobby{position:absolute;inset:0;z-index:30;display:grid;place-items:center;
  background:radial-gradient(700px 460px at 50% 40%,#0F6360,#062B29 74%);text-align:center;padding:30px}
.cc-lobby-in{max-width:420px}
.cc-lobby img{height:56px;width:auto;margin-bottom:20px}
.cc-lobby h2{color:#fff;font:400 25px/1.3 Georgia,serif;margin:0 0 10px}
.cc-lobby p{color:#9DBFBB;font-size:14px;line-height:1.6;margin:0 0 20px}
.cc-lobby-dots{display:inline-flex;gap:6px}
.cc-lobby-dots i{width:9px;height:9px;border-radius:50%;background:var(--gold);display:block;
  animation:ccb 1.3s infinite ease-in-out}
.cc-lobby-dots i:nth-child(2){animation-delay:.18s}
.cc-lobby-dots i:nth-child(3){animation-delay:.36s}
.cc-lobbylist{flex:0 0 auto;padding:10px;border-bottom:1px solid rgba(255,255,255,.10);
  display:flex;flex-direction:column;gap:6px}
.cc-lobbylist h4{margin:0 0 4px;font-size:12px;text-transform:uppercase;letter-spacing:.8px;color:var(--gold)}
.cc-lobbyrow{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);
  border-radius:9px;padding:7px 9px;font-size:12.5px;color:#fff}
.cc-lobbyrow span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-lobbyrow button{border:0;border-radius:7px;padding:4px 9px;font-size:11.5px;cursor:pointer}
.cc-lobbyrow .yes{background:#16A34A;color:#fff}
.cc-lobbyrow .no{background:rgba(255,255,255,.16);color:#fff}

/* ===== Home: profile hero ========================================== */
.cc-hero{position:relative;border-radius:var(--radius);overflow:hidden;margin-bottom:18px;background:var(--teal)}
.cc-hero-bg{position:absolute;inset:0;
  background:
    radial-gradient(820px 400px at 8% -20%, rgba(212,168,32,.34), transparent 62%),
    radial-gradient(640px 340px at 104% 116%, rgba(15,99,96,.9), transparent 60%),
    linear-gradient(135deg,#073533 0%,#0B4D4A 52%,#0F6360 100%)}
.cc-hero-bg::after{content:'';position:absolute;inset:0;opacity:.09;
  background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);
  background-size:44px 44px}
.cc-hero-inner{position:relative;z-index:2;display:flex;gap:24px;padding:30px 32px;align-items:flex-start}
.cc-hero-av{flex:0 0 auto;width:104px;height:104px;border-radius:50%;overflow:hidden;
  border:3px solid rgba(255,255,255,.28);background:var(--gold);display:grid;place-items:center;
  box-shadow:0 8px 26px rgba(0,0,0,.28)}
.cc-hero-av img{width:100%;height:100%;object-fit:cover;display:block}
.cc-hero-av span{font:700 34px Georgia,serif;color:var(--ink)}
.cc-hero-txt{flex:1;min-width:0;color:#fff}
.cc-hero-txt h1{color:#fff;font-size:28px;margin:2px 0 8px;line-height:1.15}
.cc-hero-role{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:0 0 10px;
  font-size:13px;color:#BFD6D3}
.cc-hero-chip{background:var(--gold);color:var(--ink);border-radius:20px;padding:2px 11px;
  font-size:11.5px;font-weight:700}
.cc-hero-head{margin:0 0 8px;font-size:15px;color:#DCE9E7}
.cc-hero-bio{margin:0 0 14px;font-size:14px;line-height:1.65;color:#CFE0DD;max-width:62ch}
.cc-hero-stats{display:flex;gap:22px;margin-bottom:16px;font-size:12.5px;color:#A8C4C0}
.cc-hero-stats b{display:block;font:700 19px Georgia,serif;color:#fff}
.cc-hero-btns{display:flex;gap:8px;flex-wrap:wrap}
.cc-hero-prog{position:relative;z-index:2;display:block;padding:12px 32px 16px;
  background:rgba(0,0,0,.18);text-decoration:none}
.cc-hero-prog span{display:block;font-size:12px;color:#BFD6D3;margin-bottom:6px}
.cc-hero-prog b{color:var(--gold)}
.cc-hero-prog i{display:block;height:5px;border-radius:4px;background:rgba(255,255,255,.16)}
.cc-hero-prog em{display:block;height:100%;border-radius:4px;background:var(--gold)}
@media(max-width:640px){
  .cc-hero-inner{flex-direction:column;gap:16px;padding:22px 18px}
  .cc-hero-av{width:80px;height:80px}
  .cc-hero-txt h1{font-size:23px}
  .cc-hero-prog{padding:12px 18px 16px}
}

/* Home layout and notifications */
.cc-homegrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
@media(max-width:900px){.cc-homegrid{grid-template-columns:1fr}}
.cc-nhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.cc-nhead h3{margin:0;display:flex;align-items:center;gap:8px}
.cc-notif{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
.cc-notif:last-child{border-bottom:0}
.cc-notif.unread{background:linear-gradient(90deg,rgba(212,168,32,.09),transparent 60%);
  margin:0 -18px;padding-left:18px;padding-right:18px}
.cc-notif-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);flex:0 0 auto}
.cc-notif-b{flex:1;min-width:0;text-decoration:none;color:var(--ink)}
.cc-notif-b b{display:block;font-size:14px;font-weight:400}
.cc-notif.unread .cc-notif-b b{font-weight:700}
.cc-notif-b small{color:var(--muted);font-size:11.5px}
.cc-notif form button{border:1px solid var(--line);background:#fff;border-radius:7px;cursor:pointer;
  width:28px;height:28px;color:var(--muted);font-size:14px}
.cc-notif form button:hover{border-color:var(--teal);color:var(--teal)}

/* Unread badge in the sidebar */
.cc-navbadge{font-style:normal;background:#DC2626;color:#fff;font-size:11px;font-weight:700;
  border-radius:20px;padding:1px 8px;min-width:20px;text-align:center;flex:0 0 auto}
.cc-nav a.on .cc-navbadge{background:var(--gold);color:var(--ink)}

/* ===== Meetings calendar ========================================== */
.cc-meetgrid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start}
@media(max-width:980px){.cc-meetgrid{grid-template-columns:1fr}}
.cc-calhead{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.cc-calhead h1{margin:0;font-size:24px}
.cc-calhead p{margin:2px 0 0}
.cc-calnav{display:flex;gap:6px}
.cc-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:14px}
.cc-cal-dn{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);
  text-align:center;padding:4px 0}
.cc-cal-c{background:var(--white);border:1px solid var(--line);border-radius:9px;min-height:92px;
  padding:6px;display:flex;flex-direction:column;gap:3px;overflow:hidden}
.cc-cal-c.empty{background:transparent;border-color:transparent}
.cc-cal-c.today{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.cc-cal-n{font-size:12px;color:var(--muted);font-weight:700}
.cc-cal-c.today .cc-cal-n{color:var(--gold)}
.cc-cal-e{display:block;font-size:10.5px;line-height:1.35;text-decoration:none;color:#fff;
  background:var(--teal);border-radius:5px;padding:3px 5px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cc-cal-e b{font-weight:700;margin-right:3px}
.cc-cal-e.class{background:#0F6360}
.cc-cal-e.webinar{background:var(--gold);color:var(--ink)}
.cc-cal-more{font-size:10px;color:var(--muted)}
@media(max-width:640px){.cc-cal-c{min-height:64px}.cc-cal-e{font-size:9px}}

.cc-invite{padding:12px 0;border-bottom:1px solid var(--line)}
.cc-invite:last-child{border-bottom:0}
.cc-invite b{display:block;font-size:14px}
.cc-invite small{display:block;color:var(--muted);font-size:12px;margin-bottom:8px}
.cc-invite-btns{display:flex;gap:6px;flex-wrap:wrap}
.cc-multi{height:auto;padding:6px}

/* Buttons sitting on the dark hero need their own treatment: the normal
   ghost button is dark-on-light and vanishes against teal. */
.cc-hero-btns .btn-ghost,
.cc-evhero .btn-ghost,
.cc-room .btn-ghost{
  border:1px solid rgba(255,255,255,.55);color:#fff;background:transparent;font-weight:700}
.cc-hero-btns .btn-ghost:hover,
.cc-evhero .btn-ghost:hover{background:rgba(255,255,255,.16);border-color:var(--gold);color:var(--gold)}
.cc-hero-btns .btn{font-weight:700}

/* The counts were washing out against the gradient */
.cc-hero-stats{color:#CFE0DD}
.cc-hero-stats b{color:var(--gold);font-size:21px;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.cc-hero-stats span{display:flex;flex-direction:column;gap:1px}
.cc-hero-bio{color:#E4EEEC}

/* Calendar: add button and the picked day */
.cc-cal-c{position:relative}
.cc-cal-add{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;
  background:#F1EDE3;color:var(--teal);display:none;place-items:center;text-decoration:none;
  font-size:15px;line-height:1;font-weight:700}
.cc-cal-c:hover .cc-cal-add{display:grid}
.cc-cal-add:hover{background:var(--gold);color:var(--ink)}
.cc-cal-c.picked{border-color:var(--teal);box-shadow:0 0 0 2px var(--teal)}
@media(max-width:640px){.cc-cal-add{display:grid;width:17px;height:17px;font-size:12px}}

/* Recurrence controls */
.cc-rep{margin-top:10px;padding:12px;background:#F8F6F1;border:1px solid var(--line);border-radius:10px}
.cc-days{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.cc-day{position:relative;cursor:pointer}
.cc-day input{position:absolute;opacity:0;pointer-events:none}
.cc-day span{display:grid;place-items:center;width:40px;height:34px;border:1px solid var(--line);
  border-radius:8px;font-size:12px;background:#fff;color:var(--muted)}
.cc-day input:checked + span{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:700}
.cc-serie{padding:11px 0;border-bottom:1px solid var(--line)}
.cc-serie:last-child{border-bottom:0}
.cc-serie b{display:block;font-size:14px}
.cc-serie small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.cc-serie em{display:block;font-style:normal;font-size:12px;color:var(--teal);margin:4px 0 8px}

/* Minors: registration block, consent page, safeguarding queue */
.cc-minorbox{margin-top:18px;padding:16px;background:#FFF8E6;border:1px solid var(--gold);border-radius:12px}
.cc-minorbox h4{margin:0 0 4px;color:var(--teal)}
.cc-consent{max-width:640px;margin:0 auto}
.cc-guardbox{background:#F1EDE3;border-radius:10px;padding:12px 14px;margin:14px 0}
.cc-guardbox b{display:block;font-size:14px}
.cc-guardbox small{color:var(--muted);font-size:12px}
.cc-doc{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.cc-doc:last-of-type{border-bottom:0}
.cc-doc-b{flex:1;min-width:0}
.cc-doc-b b{display:block;font-size:14.5px}
.cc-doc-b small{color:var(--muted);font-size:12px}
.cc-doc.done .cc-doc-b b::before{content:'\2713 ';color:#16A34A}
.cc-lettertpl{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.cc-lettertpl summary{cursor:pointer;font-size:13.5px;color:var(--teal)}
.cc-lettertpl-b{background:#F8F6F1;border-radius:10px;padding:16px;margin-top:10px;
  font-size:13.5px;line-height:1.7;white-space:pre-wrap}
.cc-guardlist{margin:14px 0;padding-left:20px;font-size:14px;line-height:1.8;color:var(--muted)}
.cc-sgrow{display:grid;grid-template-columns:minmax(0,2fr) minmax(220px,1fr);gap:16px;
  padding:16px 0;border-bottom:1px solid var(--line)}
.cc-sgrow:last-child{border-bottom:0}
.cc-sgrow-b b{display:block;font-size:15px}
.cc-sgrow-b small{color:var(--muted);font-size:12.5px}
.cc-sgguard{background:#F1EDE3;border-radius:9px;padding:10px 12px;margin:10px 0}
.cc-sgdocs{display:flex;gap:7px;flex-wrap:wrap}
.cc-sgmissing{font-size:12px;color:var(--danger);border:1px dashed var(--danger);
  border-radius:20px;padding:4px 11px}
@media(max-width:760px){.cc-sgrow{grid-template-columns:1fr}}

/* Reports and case handling */
.cc-myrep{padding:14px 0;border-bottom:1px solid var(--line)}
.cc-myrep:last-child{border-bottom:0}
.cc-myrep-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cc-myrep-h b{font-size:14.5px}
.cc-myrep small{color:var(--muted);font-size:12px}
.cc-myrep p{margin:8px 0 0;font-size:13.5px;line-height:1.6;color:var(--muted)}
.cc-myrep-res{margin-top:10px;background:#E9F2F1;border-radius:9px;padding:11px 13px;font-size:13.5px;line-height:1.6}
.cc-myrep-res strong{display:block;color:var(--teal);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.7px;margin-bottom:4px}
.cc-caseh{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.cc-caseh h2{margin:0;font-size:20px}
.cc-caseh small{color:var(--muted);font-size:12.5px}
.cc-casegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;
  background:#F8F6F1;border-radius:10px;padding:14px;margin-bottom:14px}
.cc-casegrid label{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);margin:0}
.cc-casegrid p{margin:4px 0 0;font-size:14px}
.cc-casebody{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;
  font-size:14px;line-height:1.7;white-space:pre-wrap}
.cc-qa{padding:12px 0;border-bottom:1px solid var(--line)}
.cc-qa:last-child{border-bottom:0}
.cc-qa b{display:block;font-size:14px;font-weight:400}
.cc-qa small{color:var(--muted);font-size:11.5px}
.cc-qa-ans{margin-top:8px;background:#E9F2F1;border-radius:9px;padding:11px 13px;font-size:13.5px;line-height:1.6}
.cc-qtext{background:#F8F6F1;border-left:3px solid var(--gold);border-radius:0 9px 9px 0;
  padding:13px 15px;font-size:15px;line-height:1.7;margin:0 0 14px}
.cc-trail{padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.cc-trail:last-child{border-bottom:0}
.cc-trail b{text-transform:capitalize}
.cc-trail small{color:var(--muted);font-size:11.5px;margin-left:8px}
.cc-trail p{margin:5px 0 0;color:var(--muted)}

/* Account identifier */
.cc-acct{display:inline-block;font:700 11px/1.5 monospace;letter-spacing:.5px;
  background:#F1EDE3;color:var(--teal);border-radius:5px;padding:1px 7px;margin-left:7px;
  vertical-align:middle}
.cc-acct.sm{font-size:10px;padding:1px 6px}
.cc-hero-acct{font:700 13px/1.4 monospace;letter-spacing:1.2px;color:var(--gold);margin:0 0 8px}

/* Groups */
.cc-grpgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:14px}
.cc-grp{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.cc-grp-top{height:72px;display:grid;place-items:center;position:relative}
.cc-grp-top span{font:700 26px Georgia,serif;color:rgba(255,255,255,.9)}
.cc-grp-off{position:absolute;top:7px;right:7px;background:var(--gold);color:var(--ink);
  font:700 9px/1 sans-serif;letter-spacing:.6px;border-radius:4px;padding:3px 5px;font-style:normal}
.cc-grp-b{padding:12px 14px;flex:1;display:flex;flex-direction:column}
.cc-grp-b b a{color:var(--ink);text-decoration:none;font-size:14.5px}
.cc-grp-b small{color:var(--muted);font-size:11.5px;display:block;margin-top:2px}
.cc-grp-b p{font-size:12.5px;color:var(--muted);line-height:1.5;margin:8px 0 0;flex:1}
.cc-grp-f{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px}
.cc-grp-f span{font-size:11.5px;color:var(--muted)}
.cc-grphero{border-radius:var(--radius);padding:26px 28px;color:#fff}
.cc-grphero h1{color:#fff;font-size:26px;margin:0 0 6px}
.cc-grphero p{margin:0;font-size:13px;color:rgba(255,255,255,.82)}
.cc-grphero-d{margin-top:10px!important;font-size:14px;line-height:1.6;max-width:62ch}
.cc-grphero-b{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.cc-grphero .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}
.cc-minirow{display:block;padding:9px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.cc-minirow:last-child{border-bottom:0}
.cc-minirow b{display:block;font-size:13.5px}
.cc-minirow small{color:var(--muted);font-size:11.5px;text-transform:capitalize}

/* Departments */
.cc-deptgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.cc-deptcard{display:block;background:#F8F6F1;border-left:4px solid var(--teal);border-radius:9px;
  padding:12px 14px;text-decoration:none;color:var(--ink)}
.cc-deptcard:hover{background:#F1EDE3}
.cc-deptcard b{display:block;font-size:14px}
.cc-deptcard small{color:var(--muted);font-size:11.5px}
.cc-deptcard em{display:block;font-style:normal;font-size:11.5px;color:var(--teal);margin-top:3px}

/* Public figures */
.cc-proof{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:#F8F6F1;
  border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.cc-proof-lg{background:linear-gradient(120deg,#0B4D4A,#0F6360);border-color:transparent;
  margin-bottom:20px;padding:20px 22px}
.cc-proof-h{margin:0 0 10px;font:400 17px/1.35 Georgia,serif;color:#fff}
.cc-proof-nums{display:flex;gap:22px;flex-wrap:wrap}
.cc-proof-nums span{display:flex;flex-direction:column}
.cc-proof-nums b{font:700 24px/1.1 Georgia,serif;color:var(--teal);font-variant-numeric:tabular-nums}
.cc-proof-nums i{font-style:normal;font-size:11.5px;color:var(--muted);margin-top:2px}
.cc-proof-lg .cc-proof-nums b{color:var(--gold);font-size:27px}
.cc-proof-lg .cc-proof-nums i{color:#BFD6D3}
.cc-avstack{display:inline-flex;align-items:center;flex:0 0 auto}
.cc-avstack .cc-illav{border-radius:50%;border:2px solid #fff;margin-left:-12px;
  box-shadow:0 2px 6px rgba(0,0,0,.14)}
.cc-avstack .cc-illav:first-child{margin-left:0}
.cc-proof-lg .cc-avstack .cc-illav{border-color:rgba(255,255,255,.55)}
.cc-strow{display:grid;grid-template-columns:170px minmax(0,1fr);gap:16px;padding:16px 0;
  border-bottom:1px solid var(--line)}
.cc-strow:last-of-type{border-bottom:0}
.cc-strow-a{display:flex;flex-direction:column;gap:8px}
.cc-grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
@media(max-width:700px){.cc-strow{grid-template-columns:1fr}
  .cc-proof-nums{gap:16px}.cc-proof-nums b{font-size:21px}}

/* ===== Chat: tabs, online, wallpaper, emoji, polls ================= */
.cc-chat-tabs{display:flex;gap:4px;padding:0 12px 8px}
.cc-ctab{flex:1;text-align:center;font-size:11.5px;padding:6px 4px;border-radius:8px;
  text-decoration:none;color:var(--muted);background:#F1EDE3;white-space:nowrap}
.cc-ctab.on{background:var(--teal);color:#fff;font-weight:700}
.cc-ctab i{font-style:normal;font-size:10px;background:var(--gold);color:var(--ink);
  border-radius:20px;padding:0 5px;margin-left:3px}
.cc-online{padding:0 12px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.cc-online h4{margin:0 0 6px;font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted)}
.cc-online-row{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.cc-online-p{position:relative;flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  overflow:visible;text-decoration:none}
.cc-online-p img,.cc-online-p span{width:38px;height:38px;border-radius:50%;display:grid;
  place-items:center;object-fit:cover;background:var(--teal);color:#fff;font:700 12px Georgia,serif}
.cc-online-p i{position:absolute;right:0;bottom:0;width:10px;height:10px;border-radius:50%;
  background:#16A34A;border:2px solid #fff}
.cc-chan{padding-right:34px}
.cc-chan-fav{position:absolute;right:6px;top:50%;transform:translateY(-50%)}
.cc-chans li{position:relative}
.cc-chan-fav button{background:none;border:0;cursor:pointer;color:#D9D2C4;font-size:15px;padding:2px}
.cc-chan-fav button.on{color:var(--gold)}

.cc-wp-panel,.cc-poll-panel{position:fixed;right:20px;bottom:90px;z-index:60;width:min(360px,92vw);
  background:#fff;border-radius:14px;padding:18px;box-shadow:0 18px 46px rgba(0,0,0,.35);
  max-height:76vh;overflow-y:auto}
.cc-wp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cc-wp-head h3{margin:0;font-size:16px}
.cc-wp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cc-wp-o{border:2px solid var(--line);border-radius:10px;overflow:hidden;cursor:pointer;
  padding:0;background:#fff;aspect-ratio:3/4}
.cc-wp-o img{width:100%;height:100%;object-fit:cover;display:block}
.cc-wp-o.on{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold)}
.cc-wp-none{display:grid;place-items:center;font-size:11px;color:var(--muted)}
.cc-wp-cols{display:flex;gap:7px;flex-wrap:wrap;margin-top:6px}
.cc-wp-c{width:32px;height:32px;border-radius:50%;border:2px solid var(--line);cursor:pointer}
.cc-wp-c.on{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold)}

.cc-emoji{position:absolute;bottom:100%;left:8px;right:8px;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:0 -6px 26px rgba(0,0,0,.16);margin-bottom:8px;z-index:40;overflow:hidden}
.cc-emoji-tabs{display:flex;border-bottom:1px solid var(--line);background:#F8F6F1}
.cc-emoji-tabs button{flex:1;border:0;background:none;cursor:pointer;font-size:18px;padding:7px 0}
.cc-emoji-tabs button.on{background:#fff;box-shadow:inset 0 -2px 0 var(--gold)}
.cc-emoji-body{max-height:210px;overflow-y:auto;padding:8px}
.cc-emoji-page{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:2px}
.cc-emoji-page button{border:0;background:none;cursor:pointer;font-size:20px;padding:4px;border-radius:7px;line-height:1}
.cc-emoji-page button:hover{background:#F1EDE3}
.cc-composer{position:relative}

.cc-poll{background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;margin-top:4px;min-width:min(300px,70vw)}
.cc-poll b{display:block;font-size:14.5px;margin-bottom:10px}
.cc-pollopt{position:relative;display:flex;align-items:center;gap:8px;width:100%;border:1px solid var(--line);
  background:#fff;border-radius:9px;padding:9px 11px;margin-bottom:6px;cursor:pointer;overflow:hidden;
  text-align:left;font-size:13.5px}
.cc-pollopt:disabled{cursor:default;opacity:.85}
.cc-pollbar{position:absolute;left:0;top:0;bottom:0;background:#E9F2F1;transition:width .35s}
.cc-pollopt.on{border-color:var(--teal)}
.cc-pollopt.on .cc-pollbar{background:#D6EAE7}
.cc-polllabel{position:relative;flex:1;min-width:0}
.cc-pollpct{position:relative;font-weight:700;color:var(--teal);font-size:12px}
.cc-poll small{color:var(--muted);font-size:11.5px}
.cc-polli{margin-bottom:6px}

/* Push and notification preferences */
.cc-pushbox{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:#F1EDE3;border-radius:10px;padding:14px 16px;margin-bottom:16px}
.cc-pushbox b{display:block;font-size:14px}
.cc-pushbox small{color:var(--muted);font-size:12.5px}
.cc-nptable th{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.cc-nptable td:not(:first-child),.cc-nptable th:not(:first-child){text-align:center;width:80px}
.cc-nptable input[type=checkbox]{width:17px;height:17px}
.cc-call-diag{font:10.5px/1.5 monospace;color:#7FA6A1;margin-top:8px;max-width:90vw;
  word-break:break-word}

/* Date dividers and message times, WhatsApp style */
.cc-daysep{display:flex;align-items:center;justify-content:center;margin:16px 0 10px}
.cc-daysep span{background:rgba(255,255,255,.92);border:1px solid var(--line);
  border-radius:20px;padding:4px 14px;font-size:11.5px;color:var(--muted);
  box-shadow:0 1px 3px rgba(0,0,0,.07);text-transform:capitalize}
.cc-m-head time{font-variant-numeric:tabular-nums;cursor:default}

/* People pickers */
.cc-picklist{max-height:260px;overflow-y:auto;border:1px solid var(--line);border-radius:10px;
  padding:6px;background:#fff}
.cc-pick{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;cursor:pointer}
.cc-pick:hover{background:#F8F6F1}
.cc-pick input{width:16px;height:16px;flex:0 0 auto}
.cc-pick span{flex:1;min-width:0;font-size:13.5px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.cc-pick i{font-style:normal;font-size:10.5px;color:var(--muted);background:#F1EDE3;
  border-radius:20px;padding:1px 7px}
.cc-audience{background:#F8F6F1;border:1px solid var(--line);border-radius:10px;padding:12px;margin-top:12px}
.cc-audience label{margin-top:0}

/* People picker */
.cc-people{position:static;display:block;width:100%;max-width:100%;box-sizing:border-box;
  border:1px solid var(--line);border-radius:12px;padding:12px;background:#F8F6F1;z-index:auto}
.cc-people > *{max-width:100%;box-sizing:border-box}
.cc-people input[type=search]{width:100%}
.cc-people-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.cc-people-filters label{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:0 0 3px}
.cc-people-filters select{margin:0}
.cc-people-q{margin:10px 0 8px}
.cc-people-bar{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.cc-people-count{margin-left:auto;font-size:12px;color:var(--muted);background:#fff;
  border:1px solid var(--line);border-radius:20px;padding:2px 10px;font-weight:700}
.cc-people-count.on{background:var(--teal);color:#fff;border-color:var(--teal)}
.cc-pick b{font-weight:400}
.cc-pick .cc-acct{margin-left:0}

/* Agenda builder */
.cc-agbuild{border:1px solid var(--line);border-radius:12px;padding:12px;background:#F8F6F1}
.cc-agbuild-rows{display:flex;flex-direction:column;gap:10px}
.cc-agrow{display:flex;align-items:flex-start;gap:11px;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--dot,#0B4D4A);border-radius:10px;padding:11px 13px}
.cc-agrow-n{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--dot,#0B4D4A);
  color:#fff;font:700 12px/24px sans-serif;text-align:center;margin-top:2px}
.cc-agrow-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.cc-agrow-h{width:100%;margin:0;border:0;background:none;padding:2px 0;
  font:700 15px/1.4 Georgia,serif;color:var(--ink)}
.cc-agrow-d{width:100%;margin:0;border:0;background:none;resize:none;overflow:hidden;
  font:13.5px/1.6 Arial,sans-serif;color:var(--muted);padding:2px 0;min-height:22px}
.cc-agrow-h:focus,.cc-agrow-d:focus{outline:none}
.cc-agrow-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px;
  padding-top:8px;border-top:1px dashed var(--line)}
.cc-agcols{display:flex;gap:4px}
.cc-agcol{width:17px;height:17px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}
.cc-agcol.on{border-color:var(--ink);transform:scale(1.15)}
.cc-agmins{margin:0;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);
  display:flex;align-items:center;gap:6px}
.cc-agmins input{width:58px;margin:0;padding:4px 6px;font-size:12px;text-align:center;
  border:1px solid var(--line);border-radius:7px;background:#F8F6F1}
.cc-agrow-x{margin-left:auto;border:0;background:none;color:var(--muted);cursor:pointer;
  font-size:11px;text-transform:uppercase;letter-spacing:.5px;padding:3px 6px;border-radius:6px}
.cc-agrow-x:hover{background:#FEE2E2;color:var(--danger)}
.cc-agbuild-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px}

/* Purpose and location */
.cc-evpurpose{font-size:15px;line-height:1.7;margin:0}
.cc-evloc{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:14px;color:var(--teal);
  background:#E9F2F1;border-radius:9px;padding:9px 12px}
.cc-evloc svg{flex:0 0 auto}

/* Agenda display */
.cc-agenda{list-style:none;margin:0;padding:0}
.cc-agenda li{display:flex;align-items:flex-start;gap:12px;padding:13px 15px;border-radius:11px;
  margin-bottom:8px;background:#F8F6F1;border-left:4px solid var(--dot,#0B4D4A)}
.cc-ag-n{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--dot,#0B4D4A);
  color:#fff;font:700 12px/24px sans-serif;text-align:center}
.cc-ag-b{flex:1;min-width:0}
.cc-ag-h{display:block;font:700 15.5px/1.4 Georgia,serif;color:var(--ink)}
.cc-ag-d{margin:5px 0 0;font-size:14px;line-height:1.65;color:var(--muted)}
.cc-ag-m{flex:0 0 auto;font-size:11px;font-weight:700;color:#fff;background:var(--dot,#0B4D4A);
  border-radius:20px;padding:3px 10px;white-space:nowrap}
.cc-ag-tot{font-size:12px;color:var(--muted);margin:8px 0 0;font-weight:700}

/* Department and group chips on a user record */
.cc-deptchips{display:flex;flex-wrap:wrap;gap:8px}
.cc-deptchip{display:inline-flex;align-items:center;gap:8px;background:#F8F6F1;
  border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:9px;
  padding:7px 11px;text-decoration:none;color:var(--ink)}
.cc-deptchip b{font-size:13.5px;font-weight:700}
.cc-deptchip i{font-style:normal;font-size:11px;color:var(--muted);text-transform:capitalize}
.cc-deptchip button{border:0;background:none;color:var(--muted);cursor:pointer;font-size:15px;
  line-height:1;padding:0 2px}
.cc-deptchip button:hover{color:var(--danger)}

/* Event files */
.cc-efgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:9px}
.cc-ef{display:flex;align-items:center;gap:8px;background:#F8F6F1;border:1px solid var(--line);
  border-radius:10px;padding:9px 11px}
.cc-ef-a{display:flex;align-items:center;gap:10px;flex:1;min-width:0;text-decoration:none;color:var(--ink)}
.cc-ef-ic{flex:0 0 auto;width:38px;height:38px;border-radius:8px;display:grid;place-items:center;
  color:#fff;font:700 10px/1 sans-serif;letter-spacing:.5px}
.cc-ef-b{flex:1;min-width:0}
.cc-ef-b b{display:block;font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-ef-b small{color:var(--muted);font-size:11.5px}
.cc-ef-x{border:0;background:none;color:var(--muted);cursor:pointer;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.5px;padding:3px 5px;border-radius:6px}
.cc-ef-x:hover{background:#FEE2E2;color:var(--danger)}
.cc-efadd{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cc-efadd input[type=text]{flex:1;min-width:180px;margin:0}
.cc-pvline{margin:0 0 6px;font-size:14px}
.cc-person-name{text-decoration:none;color:var(--ink)}
.cc-person-name:hover b{color:var(--teal);text-decoration:underline}

/* Contacts list on the home page */
.cc-contacts{padding-bottom:8px}
.cc-ct-q{margin:6px 0 8px;font-size:13px;padding:7px 10px}
.cc-ctlist{max-height:420px;overflow-y:auto;margin:0 -6px}
.cc-ct{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:9px;
  text-decoration:none;color:var(--ink)}
.cc-ct:hover{background:#F1EDE3}
.cc-ct-av{position:relative;flex:0 0 auto;width:36px;height:36px}
.cc-ct-av img,.cc-ct-av b{width:36px;height:36px;border-radius:50%;object-fit:cover;display:grid;
  place-items:center;background:var(--teal);color:#fff;font:700 12px Georgia,serif}
.cc-ct-dot{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;
  background:#16A34A;border:2px solid #fff}
.cc-ct-b{flex:1;min-width:0;line-height:1.3}
.cc-ct-b b{display:block;font-size:13.5px;font-weight:400;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cc-ct-b small{color:var(--muted);font-size:11px}

/* Upload progress */
.cc-efbar{height:6px;border-radius:4px;background:#E5E0D4;overflow:hidden;margin-top:8px}
.cc-efbar i{display:block;height:100%;width:0;background:var(--gold);transition:width .25s}

/* Quick access rail */
.cc-quick{padding:8px}
.cc-qk{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;
  text-decoration:none;color:var(--ink)}
.cc-qk:hover{background:#F1EDE3}
.cc-qk-i{flex:0 0 auto;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:#fff}
.cc-qk b{flex:1;min-width:0;font-size:14px;font-weight:400}
.cc-qk-n{font-style:normal;font-size:11px;font-weight:700;background:var(--gold);color:var(--ink);
  border-radius:20px;padding:1px 8px}

/* Add to home screen */
.cc-install{display:flex;align-items:flex-start;gap:13px;background:linear-gradient(120deg,#0B4D4A,#0F6360);
  color:#fff;border-radius:var(--radius);padding:14px 16px;margin-bottom:16px;box-shadow:var(--shadow)}
.cc-install img{width:44px;height:44px;border-radius:11px;flex:0 0 auto}
.cc-install-b{flex:1;min-width:0}
.cc-install-b b{display:block;font:700 15px Georgia,serif}
.cc-install-b small{display:block;color:#BFD6D3;font-size:12.5px;margin-top:2px;line-height:1.5}
.cc-install-a{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.cc-install .btn{background:var(--gold);color:var(--ink);border:0;font-weight:700}
.cc-install-x{border:0;background:none;color:rgba(255,255,255,.7);font-size:20px;cursor:pointer;
  line-height:1;padding:0 4px}
.cc-install-x:hover{color:#fff}
.cc-install-ios{margin-top:10px;background:rgba(0,0,0,.2);border-radius:10px;padding:12px 14px}
.cc-install-ios ol{margin:0;padding-left:18px;font-size:13px;line-height:1.9;color:#E4EEEC}
.cc-install-ios p{margin:9px 0 0;font-size:11.5px;color:#9FBFBB;line-height:1.5}
@media(max-width:640px){
  .cc-install{flex-wrap:wrap}
  .cc-install-a{width:100%;justify-content:space-between;margin-top:4px}
}

/* Contact departments */
.cc-cdgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:14px}
.cc-cd{background:var(--white);border:1px solid var(--line);border-left:4px solid var(--dot,#0B4D4A);
  border-radius:var(--radius);padding:15px 17px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:12px}
.cc-cd-b{flex:1}
.cc-cd-b b{display:block;font:700 16px Georgia,serif;color:var(--ink)}
.cc-cd-b p{margin:6px 0 0;font-size:13px;line-height:1.6;color:var(--muted)}
.cc-cd .btn{align-self:flex-start}
.cc-cdot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:1px}

/* The message box on anything that is not a wide desktop.

   The box takes a full row of its own and the buttons flow underneath.
   Done with flex wrapping rather than positioning each button, because
   an earlier attempt used nth-of-type, which counts per element type,
   and the attach control is a label while the rest are buttons.

   The breakpoint is 1024px rather than 720px so an iPad is included. A
   tablet was falling into the desktop layout, where the box shares one
   row with five buttons and ends up a slot rather than somewhere to
   write. */
@media(max-width:1024px){
  .cc-composer{padding:8px 10px calc(10px + env(safe-area-inset-bottom))}

  .cc-composer-main{
    display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}

  /* The box first, on its own line. */
  .cc-composer #ccBody{
    order:-1;flex:1 0 100%;width:100%;
    min-height:58px;max-height:40vh;
    font-size:16px;line-height:1.5;padding:14px 16px;
    border-radius:18px;border:1px solid var(--line);background:#fff;
    resize:none;overflow-y:auto;margin:0}

  /* Then the tools, left to right, in the order they appear. */
  .cc-composer .cc-clip,
  .cc-composer .cc-mic{
    order:1;width:40px;height:40px;margin:0;flex:0 0 auto;
    display:inline-grid;place-items:center}
  .cc-composer .cc-clip svg,
  .cc-composer .cc-mic svg{width:22px;height:22px}

  /* Send sits at the far right of that same row. */
  .cc-composer .cc-send{
    order:2;margin-left:auto;flex:0 0 auto;
    width:54px;height:54px;border-radius:50%}
  .cc-composer .cc-send svg{width:21px;height:21px}
}

@media(max-width:400px){
  .cc-composer-main{gap:8px 10px}
  .cc-composer .cc-clip,.cc-composer .cc-mic{width:36px;height:36px}
  .cc-composer .cc-clip svg,.cc-composer .cc-mic svg{width:20px;height:20px}
  .cc-composer .cc-send{width:48px;height:48px}
}

/* The bar along the bottom on a phone.

   Eight items wrapped onto two lines and the labels were too faint to
   read at a glance. It scrolls sideways instead, each item on one line,
   in a weight you can actually see. */
.cc-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.cc-tabs::-webkit-scrollbar{display:none}
.cc-tabs a{
  flex:0 0 auto;min-width:74px;white-space:nowrap;
  font-size:12.5px;font-weight:700;letter-spacing:.2px;
  color:var(--ink);padding:12px 12px calc(12px + env(safe-area-inset-bottom))}
.cc-tabs a.on{color:var(--teal);box-shadow:inset 0 -3px 0 var(--gold)}
.cc-tabs a .cc-navbadge{
  display:inline-grid;place-items:center;min-width:17px;height:17px;
  background:var(--gold);color:var(--ink);border-radius:20px;
  font:700 10px/1 sans-serif;padding:0 5px;margin-left:5px}

/* Read receipts, WhatsApp style */
.cc-tick{font-style:normal;font-size:12px;letter-spacing:-1px;color:#9FB3AF;margin-left:3px}
.cc-tick.delivered{color:#CFE0DD}
.cc-tick.read{color:#4FC3F7;letter-spacing:-1px}
.cc-m.mine .cc-tick{color:rgba(255,255,255,.55)}
.cc-m.mine .cc-tick.delivered{color:rgba(255,255,255,.75)}
.cc-m.mine .cc-tick.read{color:#7FD9FF}

/* Contact points in the People panel */
.cc-cdmini{display:flex;flex-direction:column;gap:5px}
.cc-cdm{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:9px;
  text-decoration:none;color:var(--ink);border-left:3px solid var(--dot,#0B4D4A);background:#F8F6F1}
.cc-cdm:hover{background:#F1EDE3}
.cc-cdm-i{flex:0 0 auto;width:30px;height:30px;border-radius:8px;background:var(--dot,#0B4D4A);
  color:#fff;display:grid;place-items:center;font:700 11px Georgia,serif}
.cc-cdm b{flex:1;min-width:0;font-size:13px;font-weight:400;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* The departmental inbox */
.cc-inbox{display:grid;grid-template-columns:230px minmax(0,1fr);gap:16px;align-items:start}
.cc-inbox-side{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px;box-shadow:var(--shadow);position:sticky;top:80px}
.cc-inbox-side h3{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted)}
.cc-inbox-d{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:9px;
  text-decoration:none;color:var(--ink);border-left:3px solid var(--dot,#0B4D4A);margin-bottom:5px}
.cc-inbox-d:hover{background:#F8F6F1}
.cc-inbox-d.on{background:var(--dot,#0B4D4A);color:#fff;border-left-color:var(--gold)}
.cc-inbox-n{flex:1;min-width:0;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-inbox-d i{font-style:normal;font-size:11px;font-weight:700;background:var(--gold);color:var(--ink);
  border-radius:20px;padding:1px 8px}
.cc-inbox-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cc-inbox-head h1{margin:0;font-size:24px}
.cc-thread{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.cc-thread:last-child{border-bottom:0}
.cc-thread-a{display:flex;align-items:center;gap:11px;flex:1;min-width:0;text-decoration:none;color:var(--ink)}
.cc-thread-b{flex:1;min-width:0}
.cc-thread-b b{display:block;font-size:14.5px}
.cc-thread-b small{display:block;color:var(--muted);font-size:11.5px;margin-top:3px}
.cc-thread-c{flex:0 0 auto;display:flex;align-items:center;gap:6px}
@media(max-width:860px){
  .cc-inbox{grid-template-columns:1fr}
  .cc-inbox-side{position:static;display:flex;gap:6px;overflow-x:auto}
  .cc-inbox-side h3{display:none}
  .cc-inbox-d{flex:0 0 auto;margin-bottom:0}
}

/* Enquiries waiting, shown at the top for the staff who answer them */
.cc-newmsg{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:linear-gradient(120deg,#0B4D4A,#0F6360);color:#fff;
  border-radius:var(--radius);padding:12px 16px;margin-bottom:16px;box-shadow:var(--shadow)}
.cc-newmsg-i{flex:0 0 auto;width:32px;height:32px;border-radius:9px;background:var(--gold);
  color:var(--ink);display:grid;place-items:center}
.cc-newmsg b{font:700 14.5px Georgia,serif}
.cc-newmsg-d{display:flex;gap:7px;flex-wrap:wrap;margin-left:auto}
.cc-newmsg-d a{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  background:rgba(255,255,255,.14);border-left:3px solid var(--dot,#D4A820);
  border-radius:8px;padding:5px 11px;color:#fff;font-size:12.5px}
.cc-newmsg-d a:hover{background:rgba(255,255,255,.24)}
.cc-newmsg-d i{font-style:normal;font-weight:700;font-size:11px;background:var(--gold);
  color:var(--ink);border-radius:20px;padding:1px 7px}
@media(max-width:640px){.cc-newmsg-d{margin-left:0;width:100%}}

/* The bell panel */
.cc-bell.has-new svg{animation:ccbell 1.4s ease-in-out 2}
@keyframes ccbell{0%,100%{transform:rotate(0)}20%{transform:rotate(-12deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-6deg)}}
.cc-np{position:fixed;top:62px;right:16px;z-index:120;width:min(380px,94vw);background:#fff;
  border-radius:14px;box-shadow:0 20px 52px rgba(0,0,0,.32);overflow:hidden;
  border:1px solid var(--line)}
.cc-np-top{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;
  border-bottom:1px solid var(--line);background:#F8F6F1}
.cc-np-top b{font:700 15px Georgia,serif;color:var(--teal)}
.cc-np-top button{border:0;background:none;color:var(--muted);font-size:12px;cursor:pointer;
  text-transform:uppercase;letter-spacing:.5px}
.cc-np-top button:hover{color:var(--teal)}
.cc-np-body{max-height:min(460px,64vh);overflow-y:auto}
.cc-np-h{padding:9px 16px 5px;font-size:11px;text-transform:uppercase;letter-spacing:.7px;
  color:var(--muted);font-weight:700}
.cc-np-row{display:flex;align-items:flex-start;gap:10px;padding:11px 16px;text-decoration:none;
  color:var(--ink);border-bottom:1px solid var(--line)}
.cc-np-row:hover{background:#F8F6F1}
.cc-np-row.unread{background:#FFFDF5;box-shadow:inset 3px 0 0 var(--gold)}
.cc-np-k{flex:0 0 auto;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:#fff;border-radius:5px;padding:3px 7px;margin-top:2px}
.cc-np-t{flex:1;min-width:0}
.cc-np-t b{display:block;font-size:13.5px;font-weight:400;line-height:1.45}
.cc-np-row.unread .cc-np-t b{font-weight:700}
.cc-np-t small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.cc-np-empty{padding:26px 16px;text-align:center;color:var(--muted);font-size:13px;margin:0}
.cc-np-more{display:block;width:100%;border:0;background:#F8F6F1;padding:10px;cursor:pointer;
  font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.cc-np-more:hover{background:#F1EDE3;color:var(--teal)}
.cc-np-foot{display:block;text-align:center;padding:12px;background:var(--teal);color:#fff;
  text-decoration:none;font-size:13px;font-weight:700}
@media(max-width:520px){.cc-np{top:56px;right:8px;left:8px;width:auto}}

/* Department groups in the chat list */
.cc-dgrp{list-style:none}
.cc-dgrp details{border-bottom:1px solid var(--line)}
.cc-dgrp summary{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;
  list-style:none;border-left:3px solid var(--dot,#0B4D4A)}
.cc-dgrp summary::-webkit-details-marker{display:none}
.cc-dgrp summary:hover{background:#F8F6F1}
.cc-dgrp-i{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:var(--dot,#0B4D4A);
  color:#fff;display:grid;place-items:center;font:700 12px Georgia,serif}
.cc-dgrp-n{flex:1;min-width:0;font-size:13.5px;font-weight:700}
.cc-dgrp-n small{display:block;font-weight:400;font-size:11px;color:var(--muted);margin-top:1px}
.cc-dgrp-l{list-style:none;margin:0;padding:0 0 4px 12px;background:#FBFAF7}
.cc-dgrp-l .cc-chan{padding-left:10px}
.cc-dgrp-l .cc-chan-av{width:28px;height:28px;font-size:10px}

/* The intake assistant */
.cc-bot{border-top:1px solid var(--line);background:#F8F6F1;padding:16px 18px}
.cc-bot.busy{opacity:.55;pointer-events:none}
.cc-bot-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.cc-bot-av{flex:0 0 auto;width:30px;height:30px;border-radius:9px;background:var(--teal);
  color:#fff;display:grid;place-items:center;font:700 10px Georgia,serif}
.cc-bot-p{flex:1;height:5px;border-radius:3px;background:#E5E0D4;overflow:hidden}
.cc-bot-p i{display:block;height:100%;background:var(--gold);transition:width .3s}
.cc-bot-skip{border:0;background:none;color:var(--muted);font-size:11.5px;cursor:pointer;
  text-decoration:underline;white-space:nowrap}
.cc-bot-skip:hover{color:var(--teal)}
.cc-bot-q{margin:0 0 12px;font:15.5px/1.6 Arial,sans-serif;color:var(--ink)}
.cc-bot-opts{display:flex;flex-wrap:wrap;gap:7px}
.cc-bot-o{border:1px solid var(--teal);background:#fff;color:var(--teal);border-radius:20px;
  padding:8px 15px;font-size:13.5px;cursor:pointer}
.cc-bot-o:hover{background:var(--teal);color:#fff}
.cc-bot-o.multi.on{background:var(--teal);color:#fff}
.cc-bot-o.multi.on::before{content:'\2713 '}
.cc-bot-go{margin-top:12px}
.cc-bot-in{display:flex;gap:8px}
.cc-bot-in input{flex:1;min-width:0;margin:0;font-size:16px;padding:11px 14px;border-radius:12px}
.cc-bot-later{display:block;margin-top:9px;border:0;background:none;color:var(--muted);
  font-size:12px;cursor:pointer;text-decoration:underline}
.cc-bot-done{display:flex;align-items:flex-start;gap:12px}
.cc-bot-tick{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:#16A34A;color:#fff;
  display:grid;place-items:center;font-size:15px}
.cc-bot-done p{margin:0;font-size:14.5px;line-height:1.65;color:var(--ink)}

/* What the assistant collected, shown to staff */
.cc-botsum{margin:12px 16px;background:#FFFDF5;border:1px solid var(--gold);border-radius:12px;
  overflow:hidden}
.cc-botsum summary{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;
  list-style:none}
.cc-botsum summary::-webkit-details-marker{display:none}
.cc-botsum-i{flex:0 0 auto;width:26px;height:26px;border-radius:7px;background:var(--teal);
  color:#fff;display:grid;place-items:center;font:700 9px Georgia,serif}
.cc-botsum summary b{flex:1;font:700 13.5px Georgia,serif;color:var(--teal)}
.cc-botsum dl{margin:0;padding:4px 14px 14px;display:grid;
  grid-template-columns:minmax(120px,auto) 1fr;gap:5px 14px}
.cc-botsum dt{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);
  padding-top:2px}
.cc-botsum dd{margin:0;font-size:13.5px;line-height:1.5}
@media(max-width:560px){.cc-botsum dl{grid-template-columns:1fr}
  .cc-botsum dd{margin-bottom:6px}}

/* Event cover image */
.cc-evhero-bg.has-cover{background-size:cover;background-position:center;opacity:1}
.cc-evhero-bg.has-cover::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,77,74,.72) 0%,rgba(11,77,74,.88) 100%)}
.cc-cover{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.cc-cover-p{flex:0 0 auto;width:160px;height:90px;border-radius:10px;background:#F1EDE3
  center/cover no-repeat;border:1px solid var(--line)}

/* The agenda on the public share page */
.cc-share-agenda{background:#fff;padding:22px 26px;border-top:1px solid var(--line)}
.cc-share-agenda h3{margin:0 0 12px;font:700 17px Georgia,serif;color:var(--teal)}
.cc-share-agenda .cc-evloc{margin:0 0 16px}
@media(max-width:640px){.cc-share-agenda{padding:18px}}

/* Speakers */
.cc-spk{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.cc-spk-p{display:flex;gap:12px;background:#F8F6F1;border-radius:11px;padding:13px 15px}
.cc-spk-p img,.cc-spk-p>span{flex:0 0 auto;width:52px;height:52px;border-radius:50%;object-fit:cover;
  display:grid;place-items:center;background:var(--teal);color:#fff;font:700 16px Georgia,serif}
.cc-spk-p b{display:block;font:700 14.5px Georgia,serif}
.cc-spk-p small{display:block;font-size:12px;color:var(--teal);margin-top:1px}
.cc-spk-p em{display:block;font-style:normal;font-size:11.5px;color:var(--muted)}
.cc-spk-p p{margin:6px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted)}
.cc-spkrow{background:#F8F6F1;border-radius:11px;padding:14px;margin-top:12px}

/* The reminder strip for what is coming up *
@keyframes cclive{0%,100%{box-shadow:var(--shadow)}50%{box-shadow:0 0 0 3px rgba(22,163,74,.35)}}
@media(max-width:640px){
  .cc-up-t{min-width:100%;order:-1}
}

/* The dialog, only in the last few minutes */
.cc-upmodal{position:fixed;inset:0;z-index:200;background:rgba(11,36,33,.62);
  display:grid;place-items:center;padding:20px}
.cc-upmodal-b{background:#fff;border-radius:16px;padding:26px;max-width:420px;width:100%;
  box-shadow:0 24px 60px rgba(0,0,0,.4);text-align:center}
.cc-upmodal-k{display:inline-block;font:700 10px/1 sans-serif;text-transform:uppercase;
  letter-spacing:1px;background:var(--gold);color:var(--ink);border-radius:20px;padding:5px 12px}
.cc-upmodal-b h3{margin:14px 0 6px;font:700 20px Georgia,serif;color:var(--ink);line-height:1.35}
.cc-upmodal-c{margin:0 0 18px;font:700 15px monospace;color:var(--teal)}
.cc-upmodal-a{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* Attendance history */
.cc-hstats{display:flex;flex-wrap:wrap;gap:26px;margin-top:16px;padding-top:16px;
  border-top:1px solid var(--line)}
.cc-hstats span{display:flex;flex-direction:column}
.cc-hstats b{font:700 26px/1.1 Georgia,serif;color:var(--teal);font-variant-numeric:tabular-nums}
.cc-hstats i{font-style:normal;font-size:11.5px;color:var(--muted);margin-top:3px}
.cc-tx{max-height:460px;overflow-y:auto;margin-top:12px;background:#F8F6F1;border-radius:10px;padding:12px}
.cc-tx-l{display:grid;grid-template-columns:48px minmax(90px,auto) 1fr;gap:10px;padding:5px 0;
  font-size:13.5px;line-height:1.55}
.cc-tx-t{color:var(--muted);font:11.5px monospace;padding-top:2px}
.cc-tx-n{font-weight:700;color:var(--teal)}
.cc-tx-b{min-width:0;word-wrap:break-word}
@media(max-width:640px){
  .cc-tx-l{grid-template-columns:44px 1fr}
  .cc-tx-n{grid-column:2}
  .cc-tx-b{grid-column:2}
  .cc-hstats{gap:18px}.cc-hstats b{font-size:21px}
}

/* Search across conversations */
.cc-s{position:fixed;inset:0;z-index:180;background:rgba(11,36,33,.5);padding:60px 16px 16px}
.cc-s-box{max-width:640px;margin:0 auto;background:#fff;border-radius:14px;overflow:hidden;
  box-shadow:0 22px 60px rgba(0,0,0,.4);display:flex;flex-direction:column;max-height:80vh}
.cc-s-top{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line);
  background:#F8F6F1;flex-wrap:wrap}
.cc-s-top input[type=search]{flex:1;min-width:180px;margin:0;font-size:15px}
.cc-s-top .cc-check{margin:0;font-size:12px;white-space:nowrap}
.cc-s-top button{border:0;background:none;font-size:22px;color:var(--muted);cursor:pointer;line-height:1}
.cc-s-body{overflow-y:auto;padding:6px}
.cc-s-hint,.cc-s-count{padding:14px;color:var(--muted);font-size:13px;margin:0}
.cc-s-count{font-size:11px;text-transform:uppercase;letter-spacing:.7px;padding:10px 14px 4px}
.cc-s-r{display:block;padding:11px 14px;border-radius:10px;text-decoration:none;color:var(--ink)}
.cc-s-r:hover{background:#F8F6F1}
.cc-s-h{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:12px}
.cc-s-h b{font-size:13.5px}
.cc-s-h i{font-style:normal;color:var(--teal);background:#E9F2F1;border-radius:20px;padding:1px 8px;font-size:11px}
.cc-s-h em{font-style:normal;color:var(--muted);margin-left:auto;font-size:11px}
.cc-s-b{display:block;margin-top:4px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.cc-s-b mark{background:var(--gold);color:var(--ink);border-radius:3px;padding:0 2px}

/* Threads */
.cc-th,.cc-fw{position:fixed;inset:0;z-index:185;background:rgba(11,36,33,.55);
  display:grid;place-items:center;padding:20px}
.cc-th-box,.cc-fw-box{background:#fff;border-radius:14px;padding:0 0 16px;width:min(520px,100%);
  max-height:82vh;overflow-y:auto;box-shadow:0 22px 60px rgba(0,0,0,.4)}
.cc-th-top{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;
  border-bottom:1px solid var(--line);background:#F8F6F1;position:sticky;top:0}
.cc-th-top b{font:700 15px Georgia,serif;color:var(--teal)}
.cc-th-top button{border:0;background:none;font-size:22px;color:var(--muted);cursor:pointer;line-height:1}
.cc-th-m{display:flex;gap:11px;padding:12px 18px}
.cc-th-m.root{background:#FFFDF5;border-left:3px solid var(--gold)}
.cc-th-m img,.cc-th-i{flex:0 0 auto;width:34px;height:34px;border-radius:50%;object-fit:cover;
  display:grid;place-items:center;background:var(--teal);color:#fff;font:700 12px Georgia,serif}
.cc-th-m b{font-size:13.5px}
.cc-th-m small{color:var(--muted);font-size:11.5px;margin-left:6px}
.cc-th-m p{margin:4px 0 0;font-size:14px;line-height:1.6}
.cc-th-c{padding:10px 18px 2px;margin:0;font-size:11px;text-transform:uppercase;
  letter-spacing:.7px;color:var(--muted)}
.cc-m-th{border:0;background:none;color:var(--teal);font-size:12px;font-weight:700;cursor:pointer;
  padding:4px 0 0;text-decoration:underline}
.cc-m-fwd{font-size:11px;color:var(--muted);font-style:italic;margin-bottom:3px}

/* Forwarding */
.cc-fw-box{padding:0 18px 18px}
.cc-fw-box .cc-th-top{margin:0 -18px 12px}
.cc-fw-l{max-height:280px;overflow-y:auto;border:1px solid var(--line);border-radius:10px;padding:5px}
.cc-fw-box textarea{margin-top:10px}

/* ===== Mobile bar: the active item sits in a rounded pill ========== */
@media(max-width:900px){
  .cc-tabs{padding:6px 6px calc(6px + env(safe-area-inset-bottom));gap:2px;
    box-shadow:0 -2px 14px rgba(11,36,33,.08)}
  .cc-tabs a{
    position:relative;border-radius:22px;padding:9px 14px;
    display:inline-flex;align-items:center;gap:6px;
    transition:background .18s, color .18s;box-shadow:none}
  .cc-tabs a.on{
    background:var(--teal);color:#fff;
    box-shadow:0 4px 14px rgba(11,77,74,.34)}
  .cc-tabs a.on .cc-navbadge{background:var(--gold);color:var(--ink)}

  /* The bar floats over the page, so anything at the bottom of a form
     was unreachable. Everything gets clearance beneath it. */
  body{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
  .cc-chat{padding-bottom:0}
}

/* New posts, as a row of faces at the top of the feed */
.cc-newp{display:flex;align-items:center;gap:12px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;
  margin-bottom:14px;box-shadow:var(--shadow);cursor:pointer}
.cc-newp:hover{background:#F8F6F1}
.cc-newp-r{display:flex}
.cc-newp-a{position:relative;width:46px;height:46px;border-radius:50%;margin-left:-12px;
  padding:2px;background:linear-gradient(135deg,var(--gold),#F2C94C,var(--teal));
  animation:ccpulse 1.8s ease-in-out infinite}
.cc-newp-a:first-child{margin-left:0}
.cc-newp-a img,.cc-newp-a span{width:100%;height:100%;border-radius:50%;object-fit:cover;
  display:grid;place-items:center;background:var(--teal);color:#fff;
  font:700 14px Georgia,serif;border:2px solid #fff}
@keyframes ccpulse{0%,100%{box-shadow:0 0 0 0 rgba(212,168,32,.55)}
  50%{box-shadow:0 0 0 6px rgba(212,168,32,0)}}
.cc-newp-t{flex:1;min-width:0}
.cc-newp-t b{display:block;font:700 14.5px Georgia,serif;color:var(--teal)}
.cc-newp-t small{color:var(--muted);font-size:12px}
.cc-newp-x{border:0;background:var(--teal);color:#fff;border-radius:20px;padding:7px 14px;
  font-size:12.5px;font-weight:700;cursor:pointer;flex:0 0 auto}

/* Call controls, laid out like a phone call */
.cc-cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 10px;
  max-width:340px;margin:0 auto;justify-items:center}
.cc-cbtn{display:flex;flex-direction:column;align-items:center;gap:7px;
  border:0;background:none;cursor:pointer;color:#fff;padding:0}
.cc-cbtn svg{width:24px;height:24px;padding:16px;border-radius:50%;
  background:rgba(255,255,255,.16);box-sizing:content-box;transition:background .15s}
.cc-cbtn:hover svg{background:rgba(255,255,255,.26)}
.cc-cbtn.on svg{background:#fff;color:var(--ink)}
.cc-cbtn.off svg{background:rgba(255,255,255,.08);opacity:.55}
.cc-cbtn i{font-style:normal;font-size:12px;color:rgba(255,255,255,.82)}
.cc-cbtn-end svg{background:#E03131;color:#fff;transform:rotate(135deg)}
.cc-cbtn-end:hover svg{background:#C92A2A}
.cc-call-timer{display:block;text-align:center;margin-top:18px;
  font:600 15px monospace;color:rgba(255,255,255,.7)}
.cc-csheet{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:120;
  background:#1A2421;border-radius:14px;padding:8px;display:flex;gap:6px;
  box-shadow:0 16px 40px rgba(0,0,0,.5)}
.cc-csheet button{border:0;background:rgba(255,255,255,.12);color:#fff;border-radius:9px;
  padding:10px 16px;font-size:13px;cursor:pointer}
.cc-csheet button:hover{background:rgba(255,255,255,.22)}
@media(max-width:420px){.cc-cgrid{gap:14px 6px}.cc-cbtn svg{padding:14px}}

/* Enquiries nobody has picked up */
.cc-blink{animation:ccblink 1.6s ease-in-out infinite}
@keyframes ccblink{0%,100%{box-shadow:var(--shadow)}
  50%{box-shadow:0 0 0 4px rgba(224,49,49,.45)}}
.cc-newmsg-all{background:var(--gold);color:var(--ink);border-radius:8px;padding:6px 12px;
  text-decoration:none;font-size:12.5px;font-weight:700;white-space:nowrap}
.cc-wrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:11px 0;
  border-bottom:1px solid var(--line)}
.cc-wrow:last-child{border-bottom:0}
.cc-wrow-a{display:flex;align-items:center;gap:11px;flex:1;min-width:200px;
  text-decoration:none;color:var(--ink)}
.cc-wrow-d{flex:0 0 auto;width:36px;height:36px;border-radius:9px;color:#fff;
  display:grid;place-items:center;font:700 11px Georgia,serif}
.cc-wrow-b b{display:block;font-size:14px}
.cc-wrow-b small{color:var(--muted);font-size:11.5px}
.cc-wrow-f{display:flex;gap:6px;align-items:center;flex:0 0 auto}
.cc-wrow-f select{margin:0;font-size:12.5px;padding:6px 9px;width:auto;min-width:150px}

/* =====================================================================
   Dark

   A second palette, not a second stylesheet. Everything already reads
   from these variables, so switching them switches the whole platform.

   The teal stays the brand teal in both, because a college's colour
   should not change with a preference. What changes is the ground
   underneath it: paper in daylight, and something closer to charcoal
   at night, with the text softened off pure white so it does not glare
   in a dark room.
   ===================================================================== */
[data-theme="dark"]{
  --teal:#2E8F8A; --teal-d:#0B4D4A; --teal-l:#3FA9A3;
  --gold:#E0B84A; --cream:#121917; --ink:#E6EDEB;
  --line:#2A3835; --muted:#94A5A1; --white:#1A2320; --danger:#E45B5B;
  --shadow:0 1px 3px rgba(0,0,0,.5),0 6px 20px rgba(0,0,0,.35);
  color-scheme:dark;
}

/* The parts that name a colour outright rather than using a variable. */
[data-theme="dark"] .cc-top{background:#0B1614}
[data-theme="dark"] .cc-side{background:#151E1B;border-right-color:var(--line)}
[data-theme="dark"] .cc-tabs{background:#151E1B;border-top-color:var(--line)}
[data-theme="dark"] .cc-card,
[data-theme="dark"] .cc-inbox-side,
[data-theme="dark"] .cc-grp,
[data-theme="dark"] .cc-s-box,
[data-theme="dark"] .cc-th-box,
[data-theme="dark"] .cc-fw-box,
[data-theme="dark"] .cc-np,
[data-theme="dark"] .cc-upmodal-b{background:var(--white);border-color:var(--line)}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{
  background:#101917;color:var(--ink);border-color:var(--line)}
[data-theme="dark"] input::placeholder,[data-theme="dark"] textarea::placeholder{color:#6C7C78}
[data-theme="dark"] .cc-m-body{background:#22302C;color:var(--ink)}
[data-theme="dark"] .cc-m.mine .cc-m-body{background:#14524E;color:#EAF3F1}
[data-theme="dark"] .cc-quote{background:rgba(255,255,255,.08)!important;color:#DCE9E7!important}
[data-theme="dark"] .cc-quote b{color:var(--gold)!important}
[data-theme="dark"] .cc-quote span{color:#B9C9C5!important}
[data-theme="dark"] .cc-chat-pane{background:#0E1614!important;background-image:none!important}
[data-theme="dark"] .cc-daysep span{background:#1E2A27;border-color:var(--line);color:var(--muted)}
[data-theme="dark"] .cc-agrow,[data-theme="dark"] .cc-agbuild,
[data-theme="dark"] .cc-people,[data-theme="dark"] .cc-picklist,
[data-theme="dark"] .cc-deptchip,[data-theme="dark"] .cc-cdm,
[data-theme="dark"] .cc-ef,[data-theme="dark"] .cc-guardbox,
[data-theme="dark"] .cc-agenda li,[data-theme="dark"] .cc-spk-p,
[data-theme="dark"] .cc-tx,[data-theme="dark"] .cc-casegrid,
[data-theme="dark"] .cc-lettertpl-b,[data-theme="dark"] .cc-serie{
  background:#1B2522;border-color:var(--line)}
[data-theme="dark"] .cc-casebody{background:#101917;border-color:var(--line)}
[data-theme="dark"] .cc-botsum{background:#241F12;border-color:var(--gold)}
[data-theme="dark"] .cc-bot{background:#151E1B;border-top-color:var(--line)}
[data-theme="dark"] .cc-bot-o{background:#101917;border-color:var(--teal);color:var(--teal-l)}
[data-theme="dark"] .cc-np-row.unread{background:#241F12}
[data-theme="dark"] .cc-np-top,[data-theme="dark"] .cc-s-top,
[data-theme="dark"] .cc-th-top{background:#101917;border-color:var(--line)}
[data-theme="dark"] .cc-ct:hover,[data-theme="dark"] .cc-qk:hover,
[data-theme="dark"] .cc-s-r:hover,[data-theme="dark"] .cc-pick:hover{background:#1B2522}
[data-theme="dark"] .btn-ghost{color:var(--teal-l);border-color:var(--teal-l)}
[data-theme="dark"] mark{background:var(--gold);color:#121917}
[data-theme="dark"] img.cc-brand-logo{filter:none}

/* Following the device, when nothing has been chosen. */
@media(prefers-color-scheme:dark){
  [data-theme="auto"]{
    --teal:#2E8F8A; --teal-d:#0B4D4A; --teal-l:#3FA9A3;
    --gold:#E0B84A; --cream:#121917; --ink:#E6EDEB;
    --line:#2A3835; --muted:#94A5A1; --white:#1A2320; --danger:#E45B5B;
    --shadow:0 1px 3px rgba(0,0,0,.5),0 6px 20px rgba(0,0,0,.35);
    color-scheme:dark;
  }
  [data-theme="auto"] .cc-top{background:#0B1614}
  [data-theme="auto"] .cc-side,[data-theme="auto"] .cc-tabs{background:#151E1B}
  [data-theme="auto"] .cc-card{background:var(--white);border-color:var(--line)}
  [data-theme="auto"] input,[data-theme="auto"] select,[data-theme="auto"] textarea{
    background:#101917;color:var(--ink);border-color:var(--line)}
  [data-theme="auto"] .cc-m-body{background:#22302C;color:var(--ink)}
  [data-theme="auto"] .cc-m.mine .cc-m-body{background:#14524E}
  [data-theme="auto"] .cc-chat-pane{background:#0E1614!important;background-image:none!important}
}

/* The switch itself */
.cc-theme{display:flex;gap:4px;background:#F1EDE3;border-radius:22px;padding:3px;margin-top:10px}
[data-theme="dark"] .cc-theme{background:#101917}
.cc-theme button{flex:1;border:0;background:none;border-radius:20px;padding:7px 4px;
  font-size:11.5px;cursor:pointer;color:var(--muted);display:flex;align-items:center;
  justify-content:center;gap:5px}
.cc-theme button.on{background:var(--teal);color:#fff;font-weight:700}
.cc-theme svg{width:14px;height:14px}

/* Recording */
.cc-recbar{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:30;
  display:flex;align-items:center;gap:9px;background:rgba(224,49,49,.94);color:#fff;
  border-radius:22px;padding:8px 16px;box-shadow:0 6px 20px rgba(0,0,0,.4);
  font:700 12.5px sans-serif;letter-spacing:.3px}
.cc-recdot{width:9px;height:9px;border-radius:50%;background:#fff;
  animation:ccrec 1.3s ease-in-out infinite}
@keyframes ccrec{0%,100%{opacity:1}50%{opacity:.25}}
.cc-recbtn.on svg{background:#E03131;color:#fff}
.cc-recbtn.on{animation:ccrecbtn 1.6s ease-in-out infinite}
@keyframes ccrecbtn{0%,100%{opacity:1}50%{opacity:.65}}

/* Sound switch */
.cc-sndbtn{display:inline-flex;align-items:center;gap:8px;background:#F1EDE3;color:var(--muted);
  border:1px solid var(--line)}
.cc-sndbtn.on{background:var(--teal);color:#fff;border-color:var(--teal)}
[data-theme="dark"] .cc-sndbtn{background:#101917}

/* Search in the top bar */
.cc-topsearch{display:flex;align-items:center;gap:8px;border:0;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;border-radius:22px;padding:8px 14px;
  font-size:13px;transition:background .15s}
.cc-topsearch:hover{background:rgba(255,255,255,.24)}
.cc-topsearch span{opacity:.85}
@media(max-width:700px){.cc-topsearch span{display:none}
  .cc-topsearch{padding:9px;border-radius:50%}}

/* The search panel */
.cc-g{position:fixed;inset:0;z-index:190;background:rgba(11,36,33,.55);padding:52px 16px 16px}
.cc-g-box{max-width:660px;margin:0 auto;background:var(--white);border-radius:16px;overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.42);display:flex;flex-direction:column;max-height:82vh}
.cc-g-top{display:flex;align-items:center;gap:12px;padding:14px 18px;
  border-bottom:1px solid var(--line);background:#F8F6F1;color:var(--muted)}
[data-theme="dark"] .cc-g-top{background:#101917}
.cc-g-top input{flex:1;margin:0;border:0;background:none;font-size:17px;padding:4px 0;color:var(--ink)}
.cc-g-top input:focus{outline:none}
.cc-g-top button{border:0;background:none;font-size:24px;color:var(--muted);cursor:pointer;line-height:1}
.cc-g-body{overflow-y:auto;padding:6px 6px 14px}
.cc-g-sec{margin-top:6px}
.cc-g-sec h4{display:flex;align-items:center;gap:8px;margin:10px 14px 4px;
  font:700 10.5px sans-serif;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}
.cc-g-sec h4::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--dot,#0B4D4A)}
.cc-g-sec h4 i{font-style:normal;background:#F1EDE3;border-radius:20px;padding:1px 7px;
  font-size:10px;color:var(--muted)}
[data-theme="dark"] .cc-g-sec h4 i{background:#1B2522}
.cc-g-r{display:flex;align-items:center;gap:11px;padding:9px 14px;border-radius:10px;
  text-decoration:none;color:var(--ink)}
.cc-g-r:hover{background:#F8F6F1}
[data-theme="dark"] .cc-g-r:hover{background:#1B2522}
.cc-g-r img,.cc-g-i{flex:0 0 auto;width:36px;height:36px;border-radius:50%;object-fit:cover;
  display:grid;place-items:center;background:var(--teal);color:#fff;font:700 13px Georgia,serif}
.cc-g-t{flex:1;min-width:0}
.cc-g-t b{display:block;font-size:14px;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cc-g-t small{display:block;color:var(--muted);font-size:12px;margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-g-r em{font-style:normal;font-size:11px;color:var(--muted);flex:0 0 auto}
.cc-g mark{background:var(--gold);color:var(--ink);border-radius:3px;padding:0 2px}

/* Polls and surveys */
.cc-svrow{display:flex;align-items:center;gap:12px;padding:11px 0;text-decoration:none;
  color:var(--ink);border-bottom:1px solid var(--line)}
.cc-svrow:last-child{border-bottom:0}
.cc-svrow:hover{background:#F8F6F1}
[data-theme="dark"] .cc-svrow:hover{background:#1B2522}
.cc-svrow-i{flex:0 0 auto;width:36px;height:36px;border-radius:10px;background:var(--gold);
  color:var(--ink);display:grid;place-items:center;font:700 17px Georgia,serif}
.cc-svrow-b{flex:1;min-width:0}
.cc-svrow-b b{display:block;font-size:14.5px}
.cc-svrow-b small{color:var(--muted);font-size:12px}

.cc-svq{margin-bottom:22px}
.cc-svq>b{display:block;font:700 15px Georgia,serif;color:var(--ink);margin-bottom:10px}
.cc-svbar{position:relative;display:flex;align-items:center;gap:10px;padding:11px 14px;
  border-radius:9px;background:#F1EDE3;margin-bottom:7px;overflow:hidden}
[data-theme="dark"] .cc-svbar{background:#1B2522}
.cc-svbar-f{position:absolute;left:0;top:0;bottom:0;background:rgba(11,77,74,.20);
  transition:width .5s ease}
[data-theme="dark"] .cc-svbar-f{background:rgba(46,143,138,.28)}
.cc-svbar-l{position:relative;flex:1;min-width:0;font-size:14px}
.cc-svbar-n{position:relative;font:700 14px Georgia,serif;color:var(--teal);white-space:nowrap}
.cc-svbar-n i{font-style:normal;font-size:11.5px;color:var(--muted);margin-left:5px;font-weight:400}
.cc-svavg{font:700 34px Georgia,serif;color:var(--teal);margin:0}
.cc-svavg small{display:block;font:400 12px Arial;color:var(--muted)}
.cc-svtexts p{background:#F8F6F1;border-radius:9px;padding:11px 14px;margin:0 0 7px;font-size:13.5px}
[data-theme="dark"] .cc-svtexts p{background:#1B2522}
.cc-svtexts small{display:block;color:var(--muted);font-size:11.5px;margin-top:4px}

/* The public voting page */
.cc-vote{max-width:600px;margin:0 auto;padding:0 0 40px}
.cc-vote-head{background:linear-gradient(135deg,var(--teal-d),var(--teal));color:#fff;
  padding:34px 28px 30px;border-radius:0 0 20px 20px;text-align:center}
.cc-vote-logo{height:52px;width:auto;margin-bottom:16px}
.cc-vote-head h1{color:#fff;margin:0;font-size:24px;line-height:1.3}
.cc-vote-intro{margin:12px 0 0;font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.86)}
.cc-vote-body{background:var(--white);margin:16px;border-radius:14px;padding:24px;
  box-shadow:var(--shadow)}
.cc-vq{margin-bottom:26px}
.cc-vq>b{display:block;font:700 16px Georgia,serif;margin-bottom:12px;line-height:1.4}
.cc-vq>b i{color:var(--danger);font-style:normal}
.cc-vopt{display:flex;align-items:center;gap:11px;padding:13px 15px;border:1px solid var(--line);
  border-radius:11px;margin-bottom:8px;cursor:pointer;transition:border-color .15s,background .15s}
.cc-vopt:hover{border-color:var(--teal);background:#F8F6F1}
[data-theme="dark"] .cc-vopt:hover{background:#1B2522}
.cc-vopt input{margin:0;width:19px;height:19px;flex:0 0 auto}
.cc-vopt span{font-size:15px}
.cc-vopt:has(input:checked){border-color:var(--teal);background:#EAF2F1}
[data-theme="dark"] .cc-vopt:has(input:checked){background:#14332F}
.cc-vstars{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:6px}
.cc-vstars input{display:none}
.cc-vstars label{font-size:36px;color:var(--line);cursor:pointer;line-height:1;transition:color .12s}
.cc-vstars label:hover,.cc-vstars label:hover ~ label,
.cc-vstars input:checked ~ label{color:var(--gold)}
.cc-vscale{display:flex;gap:5px;flex-wrap:wrap}
.cc-vscale label{cursor:pointer}
.cc-vscale input{display:none}
.cc-vscale span{display:grid;place-items:center;width:40px;height:40px;border-radius:9px;
  border:1px solid var(--line);font-size:14px;transition:all .12s}
.cc-vscale input:checked + span{background:var(--teal);color:#fff;border-color:var(--teal)}
.cc-vote-go{margin-top:6px;font-size:16px;padding:14px}
.cc-vote-note{text-align:center;color:var(--muted);font-size:12px;margin:10px 0 0}
.cc-vote-done{text-align:center;padding:20px 0}
.cc-vote-done span{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 16px;
  border-radius:50%;background:#16A34A;color:#fff;font-size:28px}
.cc-vote-done p{font-size:16px;line-height:1.6;margin:0}
.cc-vote-res{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.cc-vote-foot{text-align:center;color:var(--muted);font-size:12px;margin:18px}
@media(max-width:560px){
  .cc-vote-head{padding:26px 20px 24px}.cc-vote-head h1{font-size:20px}
  .cc-vote-body{margin:12px;padding:18px}
  .cc-vscale span{width:34px;height:34px;font-size:13px}
}

/* Calendar subscription */
.cc-calhow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:14px}
.cc-calhow div{background:#F8F6F1;border-radius:10px;padding:12px 14px}
[data-theme="dark"] .cc-calhow div{background:#1B2522}
.cc-calhow b{display:block;font:700 13px Georgia,serif;color:var(--teal);margin-bottom:4px}
.cc-calhow p{margin:0;font-size:12.5px;line-height:1.55;color:var(--muted)}

/* Breakout groups */
.cc-bobar{position:absolute;top:14px;left:14px;z-index:30;display:flex;align-items:center;gap:10px;
  background:rgba(212,168,32,.96);color:#22180a;border-radius:22px;padding:8px 16px;
  box-shadow:0 6px 20px rgba(0,0,0,.35);font:700 13px sans-serif}
.cc-bobar.soon{background:#E03131;color:#fff;animation:ccblink 1s ease-in-out infinite}
.cc-bodot{width:8px;height:8px;border-radius:50%;background:currentColor}
.cc-boclock{font:700 13px monospace;background:rgba(0,0,0,.18);border-radius:20px;padding:3px 10px}
.cc-bopanel{position:absolute;top:14px;right:14px;z-index:31;width:min(330px,86vw)}
.cc-bopanel details{background:rgba(16,25,23,.94);border-radius:12px;overflow:hidden;
  box-shadow:0 12px 34px rgba(0,0,0,.45)}
.cc-bopanel summary{cursor:pointer;padding:11px 15px;color:#fff;font:700 13px Georgia,serif;
  list-style:none}
.cc-bopanel summary::-webkit-details-marker{display:none}
.cc-bobody{padding:0 15px 15px;max-height:60vh;overflow-y:auto}
.cc-borow{display:flex;gap:7px;align-items:center;margin-bottom:9px;flex-wrap:wrap}
.cc-borow label{color:rgba(255,255,255,.7);font-size:11.5px;margin:0;flex:0 0 auto}
.cc-borow input{margin:0;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);
  color:#fff;font-size:13px;padding:7px 10px}
.cc-borow input[type=number]{width:64px}
.cc-borow input[type=text]{flex:1;min-width:120px}
.cc-boroom{background:rgba(255,255,255,.07);border-radius:9px;padding:9px 11px;margin-bottom:7px}
.cc-boroom b{display:block;color:#fff;font-size:12.5px;margin-bottom:5px}
.cc-boroom b i{font-style:normal;background:var(--gold);color:#22180a;border-radius:20px;
  padding:0 6px;font-size:10.5px;margin-left:4px}
.cc-boppl{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.cc-boppl span{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.12);
  color:#fff;border-radius:20px;padding:3px 4px 3px 9px;font-size:11.5px}
.cc-boppl button{border:0;background:none;color:rgba(255,255,255,.6);cursor:pointer;
  font-size:14px;line-height:1;padding:0 4px}
.cc-boppl button:hover{color:#fff}
.cc-bonotice{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);z-index:150;
  background:var(--teal);color:#fff;border-radius:14px;padding:14px 20px;max-width:min(420px,92vw);
  box-shadow:0 14px 40px rgba(0,0,0,.4);transition:opacity .5s,transform .5s}
.cc-bonotice.go{opacity:0;transform:translateX(-50%) translateY(10px)}
.cc-bonotice b{display:block;font:700 11px sans-serif;text-transform:uppercase;letter-spacing:.8px;
  color:var(--gold);margin-bottom:5px}
.cc-bonotice p{margin:0;font-size:14.5px;line-height:1.55}
@media(max-width:700px){
  .cc-bopanel{top:auto;bottom:96px;right:8px;left:8px;width:auto}
  .cc-bobar{top:10px;left:10px;font-size:12px;padding:7px 13px}
}

/* Saved replies */
.cc-rp{position:fixed;inset:0;z-index:186;background:rgba(11,36,33,.5);
  display:grid;place-items:end center;padding:20px}
.cc-rp-box{background:var(--white);border-radius:14px;width:min(520px,100%);max-height:70vh;
  display:flex;flex-direction:column;box-shadow:0 20px 54px rgba(0,0,0,.42);margin-bottom:80px}
.cc-rp-top{display:flex;align-items:center;gap:10px;padding:12px 16px;
  border-bottom:1px solid var(--line);background:#F8F6F1}
[data-theme="dark"] .cc-rp-top{background:#101917}
.cc-rp-top b{font:700 14px Georgia,serif;color:var(--teal);flex:0 0 auto}
.cc-rp-top input{flex:1;margin:0;font-size:13.5px;padding:7px 11px}
.cc-rp-top button{border:0;background:none;font-size:22px;color:var(--muted);cursor:pointer;line-height:1}
.cc-rp-body{overflow-y:auto;padding:6px}
.cc-rp-r{display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;
  padding:10px 14px;border-radius:10px;color:var(--ink)}
.cc-rp-r:hover{background:#F8F6F1}
[data-theme="dark"] .cc-rp-r:hover{background:#1B2522}
.cc-rp-r b{display:block;font-size:13.5px;margin-bottom:3px}
.cc-rp-r b i{font-style:normal;font-size:11px;background:var(--gold);color:var(--ink);
  border-radius:4px;padding:1px 6px;margin-left:5px}
.cc-rp-r small{display:block;color:var(--muted);font-size:12px;line-height:1.5}
.cc-doc-b code{background:var(--gold);color:var(--ink);border-radius:4px;padding:1px 6px;
  font-size:11px;margin-left:5px}

/* Announcements */
.cc-annbar{display:flex;align-items:center;gap:13px;background:var(--white);
  border-left:4px solid var(--teal);border-radius:var(--radius);padding:13px 16px;
  margin-bottom:16px;box-shadow:var(--shadow)}
.cc-annbar-important{border-left-color:var(--gold);background:#FFFDF5}
[data-theme="dark"] .cc-annbar-important{background:#241F12}
.cc-annbar-urgent{border-left-color:var(--danger);background:#FFF5F5;animation:ccblink 2s ease-in-out infinite}
[data-theme="dark"] .cc-annbar-urgent{background:#2A1616}
.cc-annbar-i{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--gold);
  color:var(--ink);display:grid;place-items:center;font:700 17px Georgia,serif}
.cc-annbar-urgent .cc-annbar-i{background:var(--danger);color:#fff}
.cc-annbar-t{flex:1;min-width:0}
.cc-annbar-t b{display:block;font:700 14.5px Georgia,serif}
.cc-annbar-t small{display:block;color:var(--muted);font-size:12.5px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cc-annbar em{font-style:normal;font-size:12px;color:var(--muted)}

.cc-ann{border-left:3px solid var(--teal);background:#F8F6F1;border-radius:11px;
  padding:15px 18px;margin-bottom:12px}
[data-theme="dark"] .cc-ann{background:#1B2522}
.cc-ann-important{border-left-color:var(--gold)}
.cc-ann-urgent{border-left-color:var(--danger)}
.cc-ann-h{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.cc-ann-h b{font:700 16px Georgia,serif;flex:1;min-width:0}
.cc-ann-h span{font:700 9.5px sans-serif;text-transform:uppercase;letter-spacing:.8px;
  background:var(--gold);color:var(--ink);border-radius:5px;padding:3px 8px}
.cc-ann-urgent .cc-ann-h span{background:var(--danger);color:#fff}
.cc-anbody{font-size:14.5px;line-height:1.7}
.cc-ann-f{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:12px;flex-wrap:wrap}
.cc-ann-f small{color:var(--muted);font-size:12px}
.cc-anbar{height:9px;border-radius:5px;background:#E5E0D4;overflow:hidden;margin:12px 0 6px}
[data-theme="dark"] .cc-anbar{background:#2A3835}
.cc-anbar span{display:block;height:100%;background:var(--teal);transition:width .6s ease}
.cc-angrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:16px}
.cc-angrid h4{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted)}
.cc-anperson{padding:6px 0;border-bottom:1px solid var(--line)}
.cc-anperson b{font-size:13.5px;font-weight:400}
.cc-anperson small{display:block;color:var(--muted);font-size:11.5px}

/* Contractors and freelancers */
.cc-engrow{border-bottom:1px solid var(--line);padding:12px 0}
.cc-engrow:last-child{border-bottom:0}
.cc-engrow.on{background:#F8F6F1;border-radius:11px;padding:12px 14px;margin:6px -6px}
[data-theme="dark"] .cc-engrow.on{background:#1B2522}
.cc-eng-h{display:flex;align-items:center;gap:12px}
.cc-eng-b{flex:1;min-width:0}
.cc-eng-b b{display:block;font-size:14.5px}
.cc-eng-b small{color:var(--muted);font-size:12px}
.cc-eng-s{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}

/* Rich text in an announcement */
.cc-rh{font:700 14.5px Georgia,serif;color:var(--teal);margin:14px 0 6px}
.cc-anbody p{margin:0 0 9px}
.cc-anbody p:last-child{margin-bottom:0}
.cc-rul{list-style:none;margin:8px 0 12px;padding:0}
.cc-rul li{position:relative;padding-left:19px;margin-bottom:6px;line-height:1.65}
.cc-rul li::before{content:'';position:absolute;left:2px;top:8px;width:7px;height:7px;
  border-radius:50%;background:var(--dot,var(--teal))}
.cc-rol{list-style:none;margin:10px 0 14px;padding:0;counter-reset:none}
.cc-rol li{display:flex;gap:11px;align-items:flex-start;background:#F8F6F1;border-radius:10px;
  padding:10px 13px;margin-bottom:7px}
[data-theme="dark"] .cc-rol li{background:#1B2522}
.cc-rn{flex:0 0 auto;width:24px;height:24px;border-radius:50%;color:#fff;
  display:grid;place-items:center;font:700 12px Georgia,serif;margin-top:1px}
.cc-rb{flex:1;min-width:0}
.cc-rb b{display:block;font:700 13.5px Georgia,serif;line-height:1.45}
.cc-rb span{display:block;font-size:13px;color:var(--muted);line-height:1.6;margin-top:2px}
.cc-rq{border-left:3px solid var(--teal);background:#FFFDF5;border-radius:0 9px 9px 0;
  padding:11px 15px;margin:10px 0 12px;font-size:14px;line-height:1.65;font-style:italic}
[data-theme="dark"] .cc-rq{background:#241F12}
.cc-anbody a{color:var(--teal);word-break:break-word}
.cc-rhint{font-size:11.5px;line-height:1.6;background:#F8F6F1;border-radius:8px;padding:8px 11px}
[data-theme="dark"] .cc-rhint{background:#1B2522}

/* Cover images on announcements and polls */
.cc-ann-cv{height:140px;border-radius:9px;background:#F1EDE3 center/cover no-repeat;
  margin:-4px -4px 12px}
.cc-ann-cv.big{height:210px;margin:14px 0}
.cc-vote-head.has-cover{background-size:cover;background-position:center;position:relative}
.cc-vote-head.has-cover::before{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,77,74,.78),rgba(6,59,57,.92));
  border-radius:0 0 20px 20px}
.cc-vote-head.has-cover > *{position:relative;z-index:1}

/* Live preview */
.cc-pv{margin-top:16px;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:#F5F1E8}
[data-theme="dark"] .cc-pv{background:#101917}
.cc-pv-h{display:flex;align-items:center;justify-content:space-between;padding:9px 13px;
  background:var(--teal);color:#fff}
.cc-pv-h b{font:700 12px Georgia,serif;letter-spacing:.3px}
.cc-pv-h button{border:0;background:rgba(255,255,255,.16);color:#fff;border-radius:20px;
  padding:4px 11px;font-size:11px;cursor:pointer}
.cc-pv-h button:hover{background:rgba(255,255,255,.28)}
.cc-pv-b{padding:14px;max-height:0;overflow:hidden;transition:max-height .25s}
.cc-pv.open .cc-pv-b{max-height:1400px;overflow-y:auto}
.cc-pv .cc-ann{margin-bottom:0}

/* The poll as the public will see it, shrunk to fit beside the form */
.cc-pvote{border-radius:12px;overflow:hidden;background:var(--white);box-shadow:var(--shadow)}
.cc-pvote-h{background:linear-gradient(135deg,var(--teal-d),var(--teal));color:#fff;
  padding:20px 18px;text-align:center;position:relative}
.cc-pvote-h.has-cover{background-size:cover;background-position:center}
.cc-pvote-h.has-cover::before{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,77,74,.78),rgba(6,59,57,.92))}
.cc-pvote-h > *{position:relative;z-index:1}
.cc-pvote-h img{height:32px;margin-bottom:10px}
.cc-pvote-h h3{color:#fff;margin:0;font:700 16px Georgia,serif;line-height:1.35}
.cc-pvote-h p{margin:8px 0 0;font-size:12.5px;color:rgba(255,255,255,.85);line-height:1.6}
.cc-pvote-b{padding:16px}
.cc-pvote-b .cc-vq{margin-bottom:16px}
.cc-pvote-b .cc-vq>b{font-size:13.5px}
.cc-pvote-b .cc-vopt{padding:9px 12px;font-size:13px}
.cc-pvote-b .cc-vopt span{font-size:13px}
.cc-vstars-p{font-size:26px;color:var(--gold);letter-spacing:3px}
.cc-pvote-b .cc-vscale span{width:28px;height:28px;font-size:11.5px}
.cc-pvote-b .btn{pointer-events:none}

/* An iPad has room for a taller box than a phone does */
@media(min-width:721px) and (max-width:1024px){
  .cc-composer #ccBody{min-height:76px;font-size:15.5px;padding:14px 17px;border-radius:16px}
  .cc-composer .cc-clip,.cc-composer .cc-mic{width:44px;height:44px}
  .cc-composer .cc-clip svg,.cc-composer .cc-mic svg{width:23px;height:23px}
  .cc-composer .cc-send{width:56px;height:56px}
  .cc-mentions{font-size:15px}
  .cc-mentions button{padding:10px 12px;font-size:15px}
  .cc-mn-av{width:30px;height:30px;font-size:11px}
}

/* ===== Photographs beside the form ==================================
   Real students at the college, crossfading slowly. Slowly is the point:
   a picture that changes every two seconds is an advertisement, and
   somebody is trying to type a password.
   ==================================================================== */
.cc-faces{position:absolute;inset:0;z-index:0}
.cc-face{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.6s ease-in-out;
  /* A slow drift, so a still photograph does not feel frozen. */
  transform:scale(1.06);animation:ccdrift 22s ease-in-out infinite alternate}
.cc-face.on{opacity:1}
@keyframes ccdrift{from{transform:scale(1.06)}to{transform:scale(1.13)}}

/* A heavy teal wash was needed when white text sat on top. Nothing sits
   on top now, so the photograph is left alone: a faint tint to tie it to
   the brand, and a little depth at the edge where it meets the form. */
.cc-split-art::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(11,77,74,.30) 0%,rgba(11,77,74,.06) 22%,
             rgba(11,77,74,0) 55%),
             linear-gradient(180deg,rgba(6,59,57,.14),rgba(6,59,57,.26))}
.cc-split-art > *:not(.cc-faces){position:relative;z-index:2}

/* The sign in page, given the same two column shape as registration.

   A bare page is normally a small centred card, and .cc-bare .cc-main
   caps it at 420px. The split has to escape that, so the wrapper is
   released on this page only rather than changing it for every bare
   page and breaking the lock screen and the others along with it. */
body.cc-bare:has(.cc-split-login){display:block;background:var(--cream)}
body.cc-bare:has(.cc-split-login) .cc-main{max-width:none;width:100%;padding:0;margin:0}

.cc-split-login{display:grid;grid-template-columns:minmax(0,1fr) 46%;
  min-height:100vh;background:var(--cream)}
@supports (min-height:100dvh){.cc-split-login{min-height:100dvh}}
.cc-split-login .cc-split-form{display:grid;place-items:center;padding:40px 28px}
.cc-split-login .cc-auth{width:min(410px,100%);margin:0;box-shadow:var(--shadow)}
.cc-split-login .cc-split-art{min-height:100vh}
@supports (min-height:100dvh){.cc-split-login .cc-split-art{min-height:100dvh}}

@media(max-width:900px){
  .cc-split-login{grid-template-columns:1fr;min-height:0}
  .cc-split-login .cc-split-art{order:-1;min-height:0;height:32vh;
    max-height:280px;min-height:180px}
  .cc-split-login .cc-split-form{padding:26px 18px 40px}
}

/* Somebody who has asked their device for less movement gets none. */
@media(prefers-reduced-motion:reduce){
  .cc-face{animation:none;transition:opacity .4s linear}
}

/* The same release by class, since a page nobody can sign in to is not
   where to discover a browser without :has support. */
body.cc-bare.cc-wide{display:block;background:var(--cream)}
body.cc-bare.cc-wide .cc-main{max-width:none;width:100%;padding:0;margin:0}

/* ===== The shared whiteboard =========================================
   Sits over the video rather than beside it: on a laptop there is not
   room for both, and in a lesson the board is what people are looking
   at while it is open.
   ==================================================================== */
.cc-board{position:absolute;inset:0;z-index:40;background:var(--cream);
  display:flex;flex-direction:column}
[data-theme="dark"] .cc-board{background:#0F1615}
.cc-board[hidden]{display:none}

.cc-board-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:10px 14px;background:var(--white);border-bottom:1px solid var(--line)}
.cc-board-tools,.cc-board-colours,.cc-board-widths,.cc-board-acts{
  display:flex;align-items:center;gap:5px}
.cc-board-acts{margin-left:auto}

.cc-board-tools button{width:38px;height:38px;border:1px solid var(--line);background:#fff;
  border-radius:9px;cursor:pointer;font-size:17px;color:var(--ink);
  display:grid;place-items:center}
.cc-board-tools button:hover{background:#F1EDE3}
.cc-board-tools button.on{background:var(--teal);color:#fff;border-color:var(--teal)}

.cc-board-colours button{width:26px;height:26px;border-radius:50%;border:2px solid transparent;
  cursor:pointer;padding:0}
.cc-board-colours button.on{border-color:var(--ink);transform:scale(1.14)}

.cc-board-widths button{width:34px;height:34px;border:1px solid var(--line);background:#fff;
  border-radius:9px;cursor:pointer;display:grid;place-items:center;padding:0}
.cc-board-widths button i{display:block;width:17px;background:var(--ink);border-radius:6px}
.cc-board-widths button.on{background:var(--teal);border-color:var(--teal)}
.cc-board-widths button.on i{background:#fff}

.cc-board-canvas{flex:1;position:relative;display:grid;place-items:center;padding:14px;
  overflow:auto}
.cc-board-canvas canvas{position:absolute;background:transparent;touch-action:none}
.cc-board-canvas #ccBoardBelow{position:relative;background:#fff;border-radius:10px;
  box-shadow:0 2px 14px rgba(11,36,33,.14)}
.cc-board.can-draw .cc-board-canvas{cursor:crosshair}

.cc-board-locked{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  background:rgba(26,36,33,.86);color:#fff;border-radius:22px;padding:8px 18px;
  font-size:12.5px;margin:0}
.cc-board.can-draw .cc-board-locked{display:none}

.cc-board-foot{display:flex;align-items:center;gap:12px;padding:9px 14px;
  background:var(--white);border-top:1px solid var(--line);font-size:12.5px;
  color:var(--muted)}
#ccBoardLock{margin-left:auto;font-weight:700;color:var(--teal)}

/* The host's controls are simply not there for anybody else */
.cc-board-host{display:none}
.cc-board.is-host .cc-board-host{display:inline-flex}

@media(max-width:760px){
  .cc-board-bar{gap:9px;padding:8px 10px}
  .cc-board-tools button{width:34px;height:34px;font-size:15px}
  .cc-board-acts{margin-left:0;width:100%}
  .cc-board-canvas{padding:8px}
}

/* ===== What is starting soon =========================================
   One quiet line each, not a stack of cards. It should be noticed
   without being the first thing anybody has to read past.
   ==================================================================== */
.cc-up{display:flex;flex-direction:column;gap:6px;margin:0 0 14px}
.cc-up:empty{display:none}

.cc-up-i{display:flex;align-items:center;gap:11px;background:var(--white);
  border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:10px;
  padding:9px 12px;font-size:13.5px}
[data-theme="dark"] .cc-up-i{background:#1B2522}

.cc-up-k{flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;
  border-radius:7px;background:#EAF2F1;color:var(--teal)}
[data-theme="dark"] .cc-up-k{background:#12312E}

.cc-up-t{flex:1;min-width:0;color:var(--ink);text-decoration:none;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-up-t:hover{color:var(--teal)}

.cc-up-w{flex:0 0 auto;color:var(--muted);font-size:12.5px}
.cc-up-c{flex:0 0 auto;font:700 12px monospace;color:var(--teal);
  background:#EAF2F1;border-radius:20px;padding:3px 10px}
[data-theme="dark"] .cc-up-c{background:#12312E}

.cc-up-go{flex:0 0 auto;padding:5px 14px;font-size:12.5px}
.cc-up-x{flex:0 0 auto;border:0;background:none;color:var(--line);font-size:19px;
  line-height:1;cursor:pointer;padding:0 2px}
.cc-up-x:hover{color:var(--muted)}

/* Nearly starting, and only then */
.cc-up-i.near{border-left-color:var(--gold);background:#FFFDF5}
[data-theme="dark"] .cc-up-i.near{background:#241F12}
.cc-up-i.near .cc-up-c{background:var(--gold);color:#22180a}

@media(max-width:640px){
  .cc-up-i{flex-wrap:wrap;gap:8px;padding:10px 12px}
  .cc-up-t{flex:1 0 100%;order:1;white-space:normal}
  .cc-up-k{order:0}
  .cc-up-w,.cc-up-c,.cc-up-go{order:2}
  .cc-up-x{order:2;margin-left:auto}
}

/* ===== When somebody is sharing their screen =========================
   The shared screen is what everybody came to look at. It used to be
   one tile among many, so with four people the slides were a quarter of
   the screen and the faces covered the rest.
   ==================================================================== */
.cc-stage.sharing{grid-template-columns:1fr 210px;grid-template-rows:1fr;
  align-content:stretch;gap:10px}
.cc-stage.sharing .cc-tile-share{grid-column:1;grid-row:1;aspect-ratio:auto;
  height:100%;min-height:0}
.cc-stage.sharing .cc-tile-share video{object-fit:contain;background:#04211F}

/* The faces, in a strip that scrolls rather than pushing the slides
   smaller with every person who joins. */
.cc-stage.sharing .cc-tile:not(.cc-tile-share){grid-column:2;
  aspect-ratio:16/9;min-height:0}
.cc-stage.sharing{grid-auto-rows:min-content}
.cc-stage.sharing .cc-tile:not(.cc-tile-share):nth-of-type(n+6){display:none}

/* Reading a spreadsheet: the faces go entirely. */
.cc-stage.sharing.big{grid-template-columns:1fr}
.cc-stage.sharing.big .cc-tile:not(.cc-tile-share){display:none}

.cc-only-sharing{display:none}
.cc-in-call:has(.cc-stage.sharing) .cc-only-sharing{display:flex}

@media(max-width:900px){
  .cc-stage.sharing{grid-template-columns:1fr!important;grid-auto-rows:auto}
  .cc-stage.sharing .cc-tile-share{grid-column:1}
  .cc-stage.sharing .cc-tile:not(.cc-tile-share){grid-column:1;max-height:110px}
  .cc-stage.sharing .cc-tile:not(.cc-tile-share):nth-of-type(n+4){display:none}
}

/* Heard but not seen, in a large meeting */
.cc-tile.audio-only .cc-tile-poster{opacity:1}
.cc-tile.audio-only video{display:none}

/* The host's controls, on the tile */
.cc-tile-host{display:none;gap:4px;margin-left:auto}
.cc-tile:hover .cc-tile-host{display:flex}
.cc-tile-host button{border:0;background:rgba(0,0,0,.55);color:#fff;border-radius:6px;
  width:24px;height:24px;font-size:12px;cursor:pointer;line-height:1;padding:0}
.cc-tile-host button:hover{background:#8B1A1A}
@media(hover:none){.cc-tile-host{display:flex}}

/* ===== Dark mode, the parts that name a colour outright =============

   The theme itself is sound: it flips every variable and overrides the
   pieces somebody thought of at the time. What was missed is a hundred
   and twenty rules that write a light grey directly, and those stayed
   light while the text turned pale, which is why staff were reading
   white on white.

   Found by going through the stylesheet for every background that is
   nearly white and checking whether the dark block already covers it,
   rather than fixing the three screens somebody happened to report.
   ================================================================== */

/* #fff, a card or panel */
[data-theme="dark"] .cc-agrow,
[data-theme="dark"] .cc-auth,
[data-theme="dark"] .cc-bg-panel,
[data-theme="dark"] .cc-bot-o,
[data-theme="dark"] .cc-burger span,
[data-theme="dark"] .cc-call-note,
[data-theme="dark"] .cc-card,
[data-theme="dark"] .cc-casebody,
[data-theme="dark"] .cc-cbtn.off,
[data-theme="dark"] .cc-cbtn.on svg,
[data-theme="dark"] .cc-chan-filter,
[data-theme="dark"] .cc-composer #ccBody,
[data-theme="dark"] .cc-composer textarea,
[data-theme="dark"] .cc-countdown,
[data-theme="dark"] .cc-day span,
[data-theme="dark"] .cc-emoji,
[data-theme="dark"] .cc-emoji-tabs button.on,
[data-theme="dark"] .cc-evhead-code input,
[data-theme="dark"] .cc-macts,
[data-theme="dark"] .cc-mentions,
[data-theme="dark"] .cc-notif form button,
[data-theme="dark"] .cc-np,
[data-theme="dark"] .cc-people-count,
[data-theme="dark"] .cc-picker,
[data-theme="dark"] .cc-picklist,
[data-theme="dark"] .cc-pin-chip,
[data-theme="dark"] .cc-pollopt,
[data-theme="dark"] .cc-post-menu-p,
[data-theme="dark"] .cc-qr,
[data-theme="dark"] .cc-quote:hover,
[data-theme="dark"] .cc-qvote,
[data-theme="dark"] .cc-reserve,
[data-theme="dark"] .cc-rx-b,
[data-theme="dark"] .cc-s-box,
[data-theme="dark"] .cc-share-agenda,
[data-theme="dark"] .cc-share-cta,
[data-theme="dark"] .cc-share-panel,
[data-theme="dark"] .cc-side,
[data-theme="dark"] .cc-sys,
[data-theme="dark"] .cc-tabs,
[data-theme="dark"] .cc-th-box,.cc-fw-box,
[data-theme="dark"] .cc-upmodal-b,
[data-theme="dark"] .cc-wp-o,
[data-theme="dark"] .cc-wp-panel,.cc-poll-panel,
[data-theme="dark"] input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],
input[type=date],input[type=datetime-local],select,textarea{background:var(--white)}

/* #F1EDE3, the tinted panel, one step up from the page */
[data-theme="dark"] .cc-acct,
[data-theme="dark"] .cc-att,
[data-theme="dark"] .cc-bg-x,
[data-theme="dark"] .cc-bgo,
[data-theme="dark"] .cc-cal-add,
[data-theme="dark"] .cc-callnote,
[data-theme="dark"] .cc-cd-u,
[data-theme="dark"] .cc-cdm:hover,
[data-theme="dark"] .cc-chan:hover,
[data-theme="dark"] .cc-clip:hover,
[data-theme="dark"] .cc-cover-p,
[data-theme="dark"] .cc-cp-btn:hover,
[data-theme="dark"] .cc-ct:hover,
[data-theme="dark"] .cc-ctab,
[data-theme="dark"] .cc-deptcard:hover,
[data-theme="dark"] .cc-emoji-page button:hover,
[data-theme="dark"] .cc-enrol,
[data-theme="dark"] .cc-ev:hover,
[data-theme="dark"] .cc-evhead-code,
[data-theme="dark"] .cc-guardbox,
[data-theme="dark"] .cc-hact:hover,
[data-theme="dark"] .cc-m-body,
[data-theme="dark"] .cc-m-file,
[data-theme="dark"] .cc-macts button:hover,
[data-theme="dark"] .cc-mentions button:hover,.cc-mentions button.on,
[data-theme="dark"] .cc-mic:hover,
[data-theme="dark"] .cc-np-more:hover,
[data-theme="dark"] .cc-pick i,
[data-theme="dark"] .cc-picker button:hover,
[data-theme="dark"] .cc-post-act:hover,
[data-theme="dark"] .cc-post-menu-p a:hover,.cc-post-menu-p button:hover,
[data-theme="dark"] .cc-pushbox,
[data-theme="dark"] .cc-qk:hover,
[data-theme="dark"] .cc-replybar,
[data-theme="dark"] .cc-sgguard,
[data-theme="dark"] .cc-sp-code,
[data-theme="dark"] .cc-tagcloud a,.cc-wordchip,
[data-theme="dark"] .cc-voice{background:#212D29}

/* #F8F6F1, the faintest tint */
[data-theme="dark"] .cc-agbuild,
[data-theme="dark"] .cc-agenda li,
[data-theme="dark"] .cc-agmins input,
[data-theme="dark"] .cc-audience,
[data-theme="dark"] .cc-bot,
[data-theme="dark"] .cc-casegrid,
[data-theme="dark"] .cc-cdm,
[data-theme="dark"] .cc-deptcard,
[data-theme="dark"] .cc-deptchip,
[data-theme="dark"] .cc-dgrp summary:hover,
[data-theme="dark"] .cc-ef,
[data-theme="dark"] .cc-emoji-tabs,
[data-theme="dark"] .cc-inbox-d:hover,
[data-theme="dark"] .cc-lettertpl-b,
[data-theme="dark"] .cc-newp:hover,
[data-theme="dark"] .cc-np-more,
[data-theme="dark"] .cc-np-row:hover,
[data-theme="dark"] .cc-np-top,
[data-theme="dark"] .cc-people,
[data-theme="dark"] .cc-pick:hover,
[data-theme="dark"] .cc-proof,
[data-theme="dark"] .cc-qtext,
[data-theme="dark"] .cc-rep,
[data-theme="dark"] .cc-s-r:hover,
[data-theme="dark"] .cc-s-top,
[data-theme="dark"] .cc-spk-p,
[data-theme="dark"] .cc-spkrow,
[data-theme="dark"] .cc-th-top,
[data-theme="dark"] .cc-tx{background:#1E2926}

/* #E9F2F1, the teal tint, kept teal */
[data-theme="dark"] .cc-callrow-ico,
[data-theme="dark"] .cc-enrol.on,
[data-theme="dark"] .cc-evloc,
[data-theme="dark"] .cc-myrep-res,
[data-theme="dark"] .cc-pollbar,
[data-theme="dark"] .cc-qa-ans,
[data-theme="dark"] .cc-qvote.on,
[data-theme="dark"] .cc-rx-b.mine,
[data-theme="dark"] .cc-s-h i{background:#14403C}

/* #FFF8E6, a warning, kept warm */
[data-theme="dark"] .cc-await,
[data-theme="dark"] .cc-flash-info,
[data-theme="dark"] .cc-minorbox,
[data-theme="dark"] .cc-post-state.pending{background:#3A2F14}

/* #FFF1F1, a fault, kept red */
[data-theme="dark"] .cc-delbox,
[data-theme="dark"] .cc-msgs-err,
[data-theme="dark"] .cc-post-state.rejected,
[data-theme="dark"] .cc-rec{background:#3A1D1D}

/* #E5E0D4, a spent or ended state */
[data-theme="dark"] .cc-bg-x:hover,
[data-theme="dark"] .cc-bot-p,
[data-theme="dark"] .cc-efbar,
[data-theme="dark"] .cc-ev-tag.ended{background:#2A3835}

/* #FEE2E2, a stronger fault */
[data-theme="dark"] .cc-agrow-x:hover,
[data-theme="dark"] .cc-callrow-ico.missed,.cc-callrow-ico.declined,
[data-theme="dark"] .cc-ef-x:hover,
[data-theme="dark"] .cc-wordchip.block{background:#4A2020}

/* #FFFDF5, fainter still */
[data-theme="dark"] .cc-botsum,
[data-theme="dark"] .cc-np-row.unread,
[data-theme="dark"] .cc-th-m.root{background:#262218}

/* #FCFBF8, a hover, barely there */
[data-theme="dark"] .cc-sys:hover,
[data-theme="dark"] table.cc-t tr:hover td{background:#1E2926}

/* #FBF9F4, a column behind cards */
[data-theme="dark"] .cc-chat-list,
[data-theme="dark"] .cc-composer{background:#161F1D}

/* #FFF6E0, the same */
[data-theme="dark"] .cc-callnote.internal,
[data-theme="dark"] .cc-m.internal .cc-m-body{background:#3A2F14}

/* #EAF5F0, success, kept green */
[data-theme="dark"] .cc-flash-ok{background:#14352B}

/* #FBEDED, the same */
[data-theme="dark"] .cc-flash-err{background:#3A1D1D}

/* #E4F3EC, active */
[data-theme="dark"] .cc-b-active{background:#14352B}

/* #FFF4DC, the same */
[data-theme="dark"] .cc-b-pending{background:#3A2F14}

/* #FBE4E4, suspended */
[data-theme="dark"] .cc-b-suspended{background:#4A2020}

/* #EEE, the same, written differently */
[data-theme="dark"] .cc-b-archived{background:#2A3835}

/* #FFFBF0, a faint warm tint */
[data-theme="dark"] .cc-pins{background:#302819}

/* #FFF0C2, the highlight flash */
[data-theme="dark"] 0%{background:#4A3C15}

/* #D6EAE7, the stronger teal tint */
[data-theme="dark"] .cc-pollopt.on .cc-pollbar{background:#1A544F}

/* #FBFAF7, a nested list */
[data-theme="dark"] .cc-dgrp-l{background:#1E2926}

/* Text written as a dark colour rather than as a variable. */
[data-theme="dark"] .cc-dot{color:#2B2410}
[data-theme="dark"] .btn-gold{color:#2b1f05}
[data-theme="dark"] .cc-post-state.rejected strong,
[data-theme="dark"] .cc-post-state.rejected span,
[data-theme="dark"] .cc-delbox h3{color:#FF9B9B}

/* Borders drawn in the light line colour. */
[data-theme="dark"] .cc-chan-filter,
[data-theme="dark"] .cc-pin-chip,
[data-theme="dark"] .cc-macts,
[data-theme="dark"] .cc-rx-b,
[data-theme="dark"] .cc-picker,
[data-theme="dark"] .cc-mentions,
[data-theme="dark"] .cc-qvote,
[data-theme="dark"] .cc-share-cta,
[data-theme="dark"] .cc-call-note,
[data-theme="dark"] .cc-post-menu-p,
[data-theme="dark"] .cc-share-panel,
[data-theme="dark"] .cc-reserve,
[data-theme="dark"] .cc-countdown,
[data-theme="dark"] .cc-wp-panel,
[data-theme="dark"] .cc-emoji,
[data-theme="dark"] .cc-pollopt,
[data-theme="dark"] .cc-auth,
[data-theme="dark"] .cc-sys,
[data-theme="dark"] .cc-qr{border-color:var(--line)}

/* A white square behind an icon reads as a hole punched in the page. */
[data-theme="dark"] .cc-cbtn.on svg{background:transparent}
[data-theme="dark"] .cc-burger span{background:var(--ink)}

/* Anything still unaccounted for. Not a fix in itself: a safety net,
   so a rule added next year that writes #fff is legible rather than
   invisible while somebody notices. */
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#FFF"]{
  background:var(--white)!important;color:var(--ink)}