@font-face{font-family:'Patrick Hand';font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/PatrickHand-Regular.ttf) format('truetype')}
@font-face{font-family:'Fredoka';font-weight:300 700;font-style:normal;font-display:swap;src:url(../fonts/Fredoka.ttf) format('truetype')}
/* apps.css - looks that belong to one app.
   When your app needs its own styles, add a section for it at the bottom. */

/* ---- Notepad ---- */
.np{flex:1;min-height:0;display:flex;gap:3px;padding:3px}
.np-list{flex:none;width:140px;margin:0;padding:2px;list-style:none;overflow-y:auto}
.np-list li{padding:6px 10px;border-radius:8px;cursor:default;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.np-list li.on{background:var(--navy);color:#fff}
.np-text{flex:1;min-width:0;padding:10px 12px;resize:none;font-family:var(--mono);font-size:14px;line-height:1.4}
.np-text:focus{outline:none}


/* ---- Setup and sign-on screens (js/cloud.js) ---- */
.cloud-box{flex:1;min-height:0;overflow-y:auto;padding:12px 14px;line-height:1.45}
.cloud-box h2{margin:0 0 10px;font-size:20px}
.cloud-box p{margin:0 0 8px}
.cloud-box ol{margin:0 0 8px;padding-left:22px}
.cloud-box code{font-family:var(--mono)}
.cloud-say{font-family:var(--mono);background:#fff;padding:8px 10px;border:1px solid var(--line);border-radius:8px}
.cloud-form label{display:block;margin-bottom:8px}
.cloud-form label[hidden]{display:none}
.cloud-form .field{display:block;margin-top:2px}
.cloud-err{min-height:1.4em;color:#B3261E}
.cloud-row{display:flex;gap:8px}

/* ---- Mail: three columns, like Apple Mail ---- */
.mx{flex:1;min-height:0;display:flex;flex-direction:column}
.mx-panes{flex:1;min-height:0;display:flex}
.mx-side{width:150px;flex:none;padding:10px 8px;background:var(--hover);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.mx-h{padding:2px 10px 6px;font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.04em}
.mx-box{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:6px 10px;background:none;border:0;border-radius:8px;text-align:left}
.mx-box.on{background:var(--navy);color:#fff}
.mx-box i{font-style:normal;font-size:12px;color:var(--text2)}
.mx-box.on i{color:#fff}
.mx-listcol{width:260px;flex:none;min-height:0;display:flex;flex-direction:column;background:var(--card);border-right:1px solid var(--line)}
.mx-listhead{display:flex;justify-content:space-between;align-items:center;padding:10px 12px 4px}
.mx-listhead b{font-size:17px;font-weight:600}
.mx-headbtns{display:flex;align-items:center;gap:6px}
.mx-empty{background:none;border:0;padding:4px 8px;font-size:13px;color:var(--navy);text-decoration:underline}
.mx-empty[hidden]{display:none}
.mx-count{margin-left:8px;font-size:12px;color:var(--text2)}
.mx-ibtn{width:36px;height:36px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:none;color:var(--navy)}
.mx-ibtn:hover{background:var(--hover)}
.mx-ibtn:disabled{opacity:.35;cursor:default}
.mx-ibtn:disabled:hover{background:none}
.mx-ibtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mx-group{display:flex;padding:0 2px;background:var(--card);border:1px solid var(--line);border-radius:999px;box-shadow:0 1px 3px rgba(8,16,40,.08)}
.mx-compose{border:1px solid var(--line);background:var(--card);box-shadow:0 1px 3px rgba(8,16,40,.08)}
.mx-search{margin:4px 12px 8px;width:auto;padding:6px 12px;border-radius:999px;font-size:14px}
.mx-list{flex:1;min-height:0;overflow-y:auto}
.mx-row{position:relative;display:flex;flex-direction:column;gap:1px;width:100%;padding:9px 12px 9px 22px;text-align:left;background:none;border:0;border-bottom:1px solid var(--line)}
.mx-row:hover{background:var(--page)}
.mx-row.on{background:var(--navy);color:#fff}
.mx-dot{position:absolute;left:8px;top:15px;width:8px;height:8px;border-radius:50%;background:transparent}
.mx-row.new .mx-dot{background:#0745B2}
.mx-row.on.new .mx-dot{background:#fff}
.mx-top{display:flex;justify-content:space-between;gap:8px}
.mx-top b{font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mx-row.new .mx-top b{font-weight:700}
.mx-top span{flex:none;font-size:12px;color:var(--text2)}
.mx-row.on .mx-top span,.mx-row.on .mx-prev{color:#dfe5f3}
.mx-subj{font-size:13px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mx-row.new .mx-subj{font-weight:600}
.mx-prev{font-size:12px;color:var(--text2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35}
.mx-read{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--page)}
.mx-tools{display:flex;gap:8px;align-items:center;justify-content:flex-end;padding:8px 14px;background:var(--page);border-bottom:1px solid var(--line)}
.mx-back{display:none;margin-right:auto;background:none;border:0;padding:0;font-size:15px;color:var(--navy)}
.mx-msg{flex:1;min-height:0;overflow-y:auto;padding:14px 18px}
.mx-card{padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.mx-from{display:flex;align-items:center;gap:10px}
.mx-from div{flex:1;min-width:0;display:flex;flex-direction:column}
.mx-from b{font-weight:600}
.mx-from div span{font-size:12px;color:var(--text2)}
.mx-from em{flex:none;font-style:normal;font-size:12px;color:var(--text3)}
.mx-av{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:600;color:var(--navy)}
.mx-card h3{margin:12px 0 8px;font-size:17px;font-weight:600}
.mail-body{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5}
.mail-none{margin:0;padding:12px;color:var(--text2)}
.mail-new{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;padding:14px}
.mail-new label{display:flex;align-items:center;gap:8px}
.mail-new label .field{flex:1;min-width:0}
.mail-new textarea{flex:1;min-height:80px;resize:none;font-family:inherit;line-height:1.4}
.mail-note{font-size:12px;color:var(--text2);min-height:1.2em}

/* ---- Messages: running conversations ---- */
.msg{flex:1;min-height:0;display:flex;flex-direction:column}
.msg-panes{flex:1;min-height:0;display:flex}
.msg-side{width:232px;flex:none;min-height:0;display:flex;flex-direction:column;background:var(--card);border-right:1px solid var(--line)}
.msg-title{padding:12px 14px;font-weight:600;font-size:16px;border-bottom:1px solid var(--line)}
.msg-list{flex:1;min-height:0;overflow-y:auto}
.msg-row{display:flex;gap:10px;align-items:center;width:100%;padding:10px 14px;text-align:left;background:none;border:0}
.msg-row:hover,.msg-row.on{background:var(--hover)}
.msg-av{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:600;color:var(--navy)}
.msg-av.small{width:26px;height:26px;font-size:11px}
.msg-text{flex:1;min-width:0;display:flex;flex-direction:column}
.msg-text b{font-weight:600;font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.msg-text span{font-size:12px;color:var(--text2);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.msg-dot{flex:none;min-width:10px;height:10px;padding:0 5px;border-radius:999px;background:var(--navy);color:#fff;font-size:11px;font-style:normal;display:grid;place-items:center}
.msg-dot:not(:empty){min-width:18px;height:18px}
.msg-dot.msg-red{min-width:22px;height:22px;padding:0 6px;box-sizing:border-box;background:#E5484D;font:700 12px/22px system-ui,sans-serif;text-align:center;display:block}
.msg-main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--page)}
.msg-back{display:none;background:none;border:0;padding:0 6px 0 0;font-size:28px;line-height:.8;color:var(--navy)}
.msg-name{font-weight:600}
.msg-sub{font-size:12px;color:var(--text2);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.msg-thread{flex:1;min-height:0;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:6px}
.msg-time{text-align:center;font-size:11px;color:var(--text3);margin:8px 0 2px}
.msg-line{display:flex;gap:8px;align-items:flex-end}
.msg-line.mine{justify-content:flex-end}
.msg-col{display:flex;flex-direction:column;align-items:flex-start;max-width:72%}
.msg-line.mine .msg-col{align-items:flex-end}
.msg-who{font-size:11px;color:var(--text2);margin:0 0 2px 10px}
.msg-bubble{padding:8px 14px;border-radius:18px 18px 18px 6px;background:#E6E9F1;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.4}
.msg-line.mine .msg-bubble{background:var(--navy);color:#fff;border-radius:18px 18px 6px 18px}
.msg-line.down .msg-bubble,.msg-line.pending .msg-bubble{opacity:.5}
.msg-note{font-size:11px;color:#7A5200;margin:2px 6px 0}
.msg-act{background:none;border:0;padding:0;margin:2px 6px 0;font-size:11px;color:var(--text3);text-decoration:underline}
.msg-new{display:flex;gap:8px;align-items:flex-end;padding:10px 14px;background:var(--card);border-top:1px solid var(--line)}
.msg-new[hidden]{display:none}
.msg-new textarea{flex:1;min-height:38px;max-height:96px;resize:none;padding:9px 16px;border:1px solid var(--line2);border-radius:19px;font-family:inherit;line-height:1.3;background:#fff}
.msg-new textarea:focus{outline:none;border-color:var(--navy)}
.msg-send{flex:none;width:36px;height:36px;border-radius:50%;border:0;background:var(--navy);color:#fff;font-size:18px;line-height:1}
.msg-send:disabled{opacity:.5}
.msg-none,.msg-intro{margin:0;padding:12px;color:var(--text2)}
.msg-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.msg-cardhead{display:flex;gap:8px;align-items:center}
.msg-cardhead span{margin-left:auto;font-size:12px;color:var(--text3)}
.msg-cardbody{margin:8px 0;white-space:pre-wrap;overflow-wrap:anywhere}
.msg-cardacts{display:flex;gap:6px}
.msg-how{background:#EEF3FF;border-color:#C9DAFF}
.msg-how ol{margin:6px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--text2)}
.msg.solo .msg-side{display:none}
.msg.solo .msg-back{display:none}
.msg-student{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--card);border:1px solid var(--line);border-radius:12px}

/* ---- phones ---- */
@media (max-width:760px){
  .msg-side{width:100%;border-right:0}
  .msg-main{display:none}
  .msg.thread-open .msg-side{display:none}
  .msg.thread-open .msg-main{display:flex}
  .msg-back{display:block}
  .msg.solo .msg-main{display:flex}
  .msg.solo .msg-back{display:none}
  .msg-col{max-width:80%}
  .cloud-form .field,.mail-new .field{min-height:36px}
  .mx-panes{flex-direction:column}
  .mx-side{width:100%;flex:none;align-items:center;flex-direction:row;padding:8px;border-right:0;border-bottom:1px solid var(--line);overflow-x:auto}
  .mx-h{display:none}
  .mx-box{flex:none}
  .mx-listcol{width:100%;flex:1;border-right:0}
  .mx-read{display:none;width:100%;flex:1}
  .mx.reading .mx-side,.mx.reading .mx-listcol{display:none}
  .mx.reading .mx-read{display:flex}
  .mx-back{display:block}
  .np{flex-direction:column}
  .np-list{width:auto;max-height:96px}
  .np-list li{padding:8px}
}

/* ---- Challenge (apps/challenge.js, a mockup for now) ---- */
.ch{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--page)}
.ch-top{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--navy);color:#fff}
.ch-q small{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#07BE61;font-weight:700}
.ch-q b{display:block;font-size:17px;line-height:1.25;margin-top:2px}
.ch-who{text-align:right;white-space:nowrap}
.ch-who b{display:block;font-size:14px}
.sb-top{align-items:flex-end}
.sb-top .ch-who b{font-size:17px;line-height:1.25}
.ch-who span{font-size:13px;color:#BFC9DD}
.ch-mock{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:7px 18px;background:#FFF6DD;border-bottom:1px solid #EED79A;font-size:12px}
.ch-mock .field{margin-left:4px;padding:3px 6px;min-height:0}
.ch-tabs{display:flex;gap:4px;padding:10px 14px 0;border-bottom:1px solid var(--line);background:var(--card)}
.ch-tab{background:none;border:0;border-bottom:3px solid transparent;padding:8px 12px;font:inherit;font-weight:600;color:var(--text2);cursor:pointer}
.ch-tab:hover{color:var(--text)}
.ch-tab.on{color:var(--navy);border-bottom-color:#07BE61}
.bt-stage2{background:#EEF3FF;border-top:1px solid #C9D6F2;padding-top:6px}
.bt-stage2 .ch-tab.on{border-bottom-color:var(--navy2)}
.ch-page{flex:1;min-height:0;overflow-y:auto;padding:16px 18px 24px;display:flex;flex-direction:column;gap:12px}
.ch-page h2{margin:0;font-size:20px}
.ch-page h3{margin:6px 0 0;font-size:15px}
.ch-page p{margin:0;line-height:1.5}
.ch-muted{color:var(--text2);font-size:13px}
.ch-stagehead{display:flex;gap:12px;align-items:center}
.ch-num{flex:none;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px}
.ch-skills{display:flex;flex-wrap:wrap;gap:6px}
.ch-skill{font-size:12px;font-style:normal;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--hover);color:var(--navy)}
.ch-skill.s1{background:#FFD6D8;color:#8C1D24}.ch-skill.s2{background:#FFDDBF;color:#1B2A4A}.ch-skill.s3{background:#FFF0A8;color:#1B2A4A}
.ch-skill.s4{background:#C8F0D8;color:#145A36}.ch-skill.s5{background:#CCE6FF;color:#0B4A8F}.ch-skill.s6{background:#E8D6F8;color:#4E1D80}
.ch-card,.ch-earn,.ch-form,.ch-mine,.ch-head{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.ch-reveal{background:var(--navy);color:#fff;border-radius:14px;padding:18px 20px;display:flex;flex-direction:column;gap:8px}
.ch-reveal small{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#07BE61;font-weight:700}
.ch-reveal h2{font-size:24px;line-height:1.2}
.ch-earnrow{display:flex;gap:10px;justify-content:space-between;align-items:flex-start;padding:8px 0;border-top:1px solid var(--line)}
.ch-earnrow b{display:block}
.ch-earnrow span{font-size:13px;color:var(--text2)}
.ch-form label{display:flex;flex-direction:column;gap:4px;font-weight:600}
.ch-form label .ch-muted{font-weight:400}
.ch-form textarea{resize:vertical}
.ch-audio{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px 12px;border:1px dashed var(--line2);border-radius:10px}
.ch-form > .btn{align-self:flex-start}
.ch-road,.ch-top3{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ch-road li,.ch-top3 li{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.ch-road li div,.ch-top3 li div{flex:1}
.ch-road li b,.ch-top3 li b{display:block}
.ch-road li em,.ch-top3 li em{font-style:normal;font-size:12px;font-weight:600;color:var(--text2)}
.ch-road li.open{border-color:#07BE61;box-shadow:0 0 0 2px rgba(7,190,97,.18)}
.ch-road li.open em{color:#058A46}
.ch-road li.locked{opacity:.6}
.ch-road li.locked .ch-num{background:var(--text3)}
.ch-top3 li.me{border-color:#07BE61;background:#F1FBF5}
.ch-rank{flex:none;width:28px;height:28px;border-radius:50%;background:var(--hover);display:grid;place-items:center;font-weight:700}
.ch-mine b{font-size:26px}
.ch-mine small{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);font-weight:700}
.ch-badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.ch-badge{display:flex;flex-direction:column;gap:2px;padding:12px;background:var(--card);border:1px solid var(--line);border-radius:12px;opacity:.65}
.ch-badge.got{opacity:1;border-color:#07BE61;background:#F1FBF5}
.ch-badge span{font-size:13px;color:var(--text2)}
.ch-badge small{font-size:12px;color:var(--text3)}
.ch-head p{font-size:15px}
.ch-exchange{border-style:dashed}
.ch-exchange .btn{align-self:flex-start}
@media (max-width:760px){
  .ch-top{flex-direction:column;align-items:flex-start}
  .ch-who{text-align:left}
  .ch-tab{padding:8px 9px;font-size:14px}
}
.ch-link{background:none;border:0;padding:0;font:inherit;color:var(--navy2);text-decoration:underline;cursor:pointer}
.ch-how{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.ch-how summary{cursor:pointer;font-weight:600}
.flag{width:20px;height:15px;object-fit:cover;border-radius:3px;margin-right:6px;vertical-align:-2px;box-shadow:0 0 0 1px rgba(24,45,84,.18)}

/* ---- Calendar (apps/calendar.js): a tear-off wall calendar with sticky notes, in the same style as the Challenge app ---- */
.cal{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--page)}
.cal-note{padding:7px 16px;background:#FFF6DD;border-bottom:1px solid #EED79A;font-size:12px}
.cal-loading{margin:0;padding:18px;color:var(--text2)}
.cal-page{flex:1;min-height:0;overflow-y:auto;padding:22px 16px 16px;display:flex;flex-direction:column;gap:16px}
.cal-top{display:flex;gap:16px;align-items:flex-start}
.cal-tear{position:relative;flex:none;width:195px;box-sizing:border-box;background:#fff;border:2px solid #182D54;border-bottom-width:5px;border-right-width:5px;border-radius:6px;padding:26px 13px 16px;text-align:center;color:#182D54}
.cal-rings{position:absolute;top:-12px;left:0;right:0;display:flex;justify-content:space-around;padding:0 24px}
.cal-rings i{width:10px;height:24px;border:2px solid #182D54;border-radius:5px;background:var(--page)}
.cal-tear-band{background:#E5484D;color:#fff;border-radius:5px;font:500 18px 'Fredoka',sans-serif;padding:3px 0;margin-bottom:8px}
.cal-tear-num{font:500 83px/1 'Fredoka',sans-serif}
.cal-tear-day{font:22px 'Patrick Hand',cursive;margin-top:3px}
.cal-notes{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
.cal-notes h3{margin:0;font:500 14px 'Fredoka',sans-serif;color:var(--text2)}
.cal-notes p{margin:0;font:16px/1.25 'Patrick Hand',cursive;color:#182D54}
.cal-stick{display:flex;flex-direction:column;gap:1px;padding:7px 11px;border:2px solid #182D54;border-bottom-width:4px;border-right-width:4px;border-radius:6px}
.cal-stick-when{font:500 15px 'Fredoka',sans-serif}
.cal-stick-what{font:17px/1.2 'Patrick Hand',cursive;overflow-wrap:anywhere}
.cal-stick-sub{font:14px 'Patrick Hand',cursive}
.cal-stick.k-zoom,.cal-legend i.k-zoom{background:#07BE61;color:#182D54}
.cal-stick.k-goose,.cal-legend i.k-goose{background:#EE7B54;color:#182D54}
.cal-stick.k-due,.cal-legend i.k-due{background:#E5484D;color:#fff}
.cal-stick.k-date,.cal-legend i.k-date{background:#182D54;color:#fff}
.cal-monthcard{background:#fff;border:2px solid #182D54;border-bottom-width:4px;border-right-width:4px;border-radius:6px;padding:8px 10px 10px}
.cal-monthhead{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.cal-monthhead b{flex:1;font:500 17px 'Fredoka',sans-serif;color:#182D54}
.cal-pill{display:inline-flex;align-items:center;height:28px;padding:0 10px;border:2px solid #182D54;border-bottom-width:3px;border-right-width:3px;border-radius:6px;background:#fff;color:#182D54;font:16px 'Patrick Hand',cursive;text-decoration:none;cursor:pointer}
.cal-pill:hover{background:#FFF1A8}
.cal-month{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.cal-wd{text-align:center;font:14px 'Patrick Hand',cursive;color:#5A6580;padding:2px 0}
.cal-day{display:flex;align-items:center;justify-content:center;min-height:40px;padding:0;background:none;border:2px solid transparent;border-radius:8px;font:inherit;color:#182D54;cursor:pointer}
.cal-day:hover{background:#FFF1A8}
.cal-day.other{color:#8A93A8}
.cal-day>span{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;font:500 14px 'Fredoka',sans-serif}
.cal-day.has>span{border:2px solid #182D54}
.cal-day.k-zoom>span{background:#07BE61}
.cal-day.k-goose>span{background:#EE7B54}
.cal-day.k-due>span{background:#E5484D;color:#fff}
.cal-day.k-date>span{background:#182D54;color:#fff}
.cal-day.today>span{box-shadow:0 0 0 2px #fff,0 0 0 4px #E5484D}
.cal-day.picked{background:#FFF1A8;border-color:#182D54}
.cal-foot{display:flex;flex-direction:column;gap:8px}
.cal-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font:15px 'Patrick Hand',cursive;color:#182D54}
.cal-legend span{display:flex;align-items:center;gap:6px}
.cal-legend i{width:14px;height:14px;border:2px solid #182D54;border-radius:50%}
.cal-add{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:16px 'Patrick Hand',cursive;color:#182D54}
.cal-zone{font:15px 'Patrick Hand',cursive;color:#5A6580}

/* Scoreboard Admin tab */
.sb-admin{display:flex;flex-direction:column;gap:10px}
.sb-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sb-row .field{flex:1;min-width:120px}
.sb-pts{flex:0 0 110px!important;min-width:0!important}
.sb-team .sb-row select{flex:2}
.sb-ms{display:flex;flex-wrap:wrap;gap:4px 14px}
.sb-check{font-weight:400;display:flex;align-items:center;gap:4px;font-size:13px}
.pp-person{gap:8px}
.pp-name{display:flex;flex-direction:column;gap:2px;flex:1;min-width:160px}
.pp .sb-row select{min-width:150px}
.mc-code{align-items:flex-start}
.mc-big{font-size:38px;letter-spacing:.25em;color:var(--navy);margin:4px 0}
.ch-card.sb-row{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.ch-card.sb-row .field{flex:0 1 200px;min-width:140px}
.ch-card.sb-row > b.pp-name{flex:1;min-width:120px}

/* Challenge: steps and the Week 0 checklist */
.ch-steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;line-height:1.5}
.ch-check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ch-check li{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--line)}
.ch-check li:first-child{border-top:0}
.ch-checktext{flex:1}
.ch-check li.done .ch-checktext{color:var(--text2)}
.ch-tick{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--line2);display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff}
.ch-check li.done .ch-tick{background:#07BE61;border-color:#07BE61}
.ch-check input[type=checkbox]{flex:none;width:20px;height:20px;margin:0}
.ch-road li.done .ch-num{background:#07BE61}

/* Bin Tests */
.bt-who{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.bt-who .flag{height:16px;border-radius:2px}
.bt-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:space-between}
.bt-tag{font-style:normal;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--hover);color:var(--navy)}
.bt-card.partner{border-color:#07BE61;box-shadow:0 0 0 2px rgba(7,190,97,.15)}
.bt-bins{display:flex;gap:8px;flex-wrap:wrap}
.bt-bin{padding:6px 14px;border:2px solid var(--navy);border-radius:10px;font-weight:600}
.bt-reply{display:flex;flex-direction:column;gap:6px}
.bt-replyitem{display:flex;flex-direction:column;gap:4px;padding:8px 0;border-top:1px solid var(--line)}
.bt-must{color:#B3261E;font-weight:600;font-size:14px}
.bt .ch-card .ch-how{background:var(--page)}
.bt-fish{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:#7A1020}
.bt-fish svg.fish{width:26px;height:16px}
.bt-fishline{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#FFF1F2;border:1px solid #F2C4CA;border-radius:10px;font-size:14px}
.bt-fishline svg.fish{width:30px;height:18px}
.bt-throw{align-self:flex-start}
.fishtag{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:600;color:#7A1020;white-space:nowrap}
.fishtag svg.fish{width:22px;height:14px}
.bt-card.focus{animation:bt-flash 1.6s ease-out 1}
@keyframes bt-flash{0%{box-shadow:0 0 0 4px #FFD91A}100%{box-shadow:0 0 0 0 rgba(255,217,26,0)}}
.mc-tag{align-self:flex-start;margin-top:2px;padding:1px 9px;border-radius:999px;background:#FFF1D6;color:#8A5A00;font-size:12px;font-weight:600}

.ch-capsulebox{display:flex;gap:16px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 16px}
.ch-capsule{flex:none;width:240px;height:auto;overflow:visible;margin-left:14px}
.ch-capsule .cap-l,.ch-capsule .cap-r{transition:transform .9s cubic-bezier(.3,1.2,.5,1)}
.ch-capsule.open .cap-l{transform:translateX(-24px)}
.ch-capsule.open .cap-r{transform:translateX(24px)}
.ch-capsule .cap-paper{opacity:0;transition:opacity .4s .5s,transform .9s .5s ease-out}
.ch-capsule.open .cap-paper{opacity:1;transform:translateX(34px)}
.cap-gear{transform-box:fill-box;transform-origin:center;animation:ch-spin 16s linear infinite}
@keyframes ch-spin{to{transform:rotate(360deg)}}
.ch-capwords{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.ch-letter{background:#FBF6E9;border:1px solid #E6DCC0;border-radius:6px;padding:20px 22px;display:flex;flex-direction:column;gap:12px;font-family:Georgia,'Times New Roman',serif;line-height:1.55;color:#2B2A31;box-shadow:0 2px 0 #E6DCC0;animation:ch-rise .6s ease-out}
.ch-letter p{font-family:inherit}
.ch-letterq{font-weight:700;font-size:19px;line-height:1.3}
@keyframes ch-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ch-letter,.cap-gear{animation:none}.ch-capsule .cap-l,.ch-capsule .cap-r,.ch-capsule .cap-paper{transition:none}}

.ch-intro{display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 18px 30px;text-align:center;min-height:100%;background:linear-gradient(#EAF1F8,#fff 55%)}
.ch-zoom{animation:ch-zoomin 1.5s cubic-bezier(.2,.8,.2,1) both}
.ch-zoom .ch-capsule{width:min(400px,86vw);margin:0}
.ch-introbody{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:520px;animation:ch-rise .8s .9s ease-out both}
.ch-introbody h2{font-size:22px;line-height:1.2}
.ch-introsmall{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#0B7F44;font-weight:700}
.ch-clock{display:flex;gap:10px;justify-content:center}
.ch-tile{background:var(--navy);color:#fff;border-radius:10px;padding:8px 10px;min-width:68px;display:flex;flex-direction:column;align-items:center}
.ch-tile b{font-size:30px;line-height:1.1;font-variant-numeric:tabular-nums}
.ch-tile span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#A9B8CE}
@keyframes ch-zoomin{from{transform:scale(.18);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.ch-zoom,.ch-introbody{animation:none}}
.ch-intro .ch-letter{text-align:left}

.bt-stickies{display:flex;flex-wrap:wrap;gap:22px;padding:8px 4px 6px}
.bt-sticky{position:relative;width:232px;height:232px;box-sizing:border-box;padding:24px 16px 14px;background:#FFF3A3;border-radius:3px;box-shadow:0 8px 12px -4px rgba(0,0,0,.28);transform:rotate(-1.5deg);font-family:'Patrick Hand','Bradley Hand','Segoe Print','Chalkboard SE','Marker Felt','Comic Sans MS',cursive;font-size:21px;line-height:1.2;color:#2A2A33;display:flex;flex-direction:column;gap:6px}
.bt-sticky b{font-weight:700;font-size:25px;line-height:1.1}
.bt-sticky.pink{background:#FFC9D6;transform:rotate(1.5deg);font-size:18px;line-height:1.15}
.bt-sticky p{margin:0}
.bt-sketch{flex:1;display:flex;align-items:flex-end}
.bt-sketch svg{width:100%;height:auto;display:block}
.bt-hand{font-family:'Patrick Hand','Bradley Hand','Segoe Print','Chalkboard SE','Marker Felt','Comic Sans MS',cursive}
.bt-stape{position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(2deg);background:#E5484D;color:#fff;font-family:system-ui,sans-serif;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 10px;border-radius:2px;white-space:nowrap}
.bt-stape.blue{background:#182D54}

.bt-like{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:4px 12px 4px 8px;border:1.5px solid var(--line2);border-radius:999px;background:#fff;color:var(--navy);font-weight:600;font-size:14px;cursor:pointer}
.bt-like svg.flame{width:20px;height:20px}
.bt-like:hover{border-color:#FF7A1A}
.bt-like.on{background:#FFF1E3;border-color:#FF7A1A}
.bt-like.own{cursor:default}

.bt-zoom{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .3s}
.bt-zoom.out{opacity:0;pointer-events:none}
.bt-zoomnote{width:260px;height:260px;box-sizing:border-box;padding:28px;background:#FFF3A3;border-radius:3px;box-shadow:0 14px 24px -6px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;text-align:center;font-family:'Patrick Hand','Bradley Hand','Segoe Print','Chalkboard SE','Comic Sans MS',cursive;font-size:44px;line-height:1.05;color:#2A2A33;transform:scale(1.12) rotate(-3deg);animation:bt-zoomout .55s cubic-bezier(.2,.8,.2,1) both}
.bt-zoomnote.calm{animation:none}
@keyframes bt-zoomout{from{transform:scale(.15) rotate(-3deg);opacity:0}to{transform:scale(1.12) rotate(-3deg);opacity:1}}

.bt-padbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bt-pad{display:grid;grid-template-columns:minmax(150px,230px) 1fr;gap:10px;min-height:260px}
.bt-padlist{list-style:none;margin:0;padding:6px;background:#fff;border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;gap:6px;overflow:auto;max-height:340px}
.bt-padempty{padding:8px}
.bt-padrow{width:100%;text-align:left;display:flex;flex-direction:column;gap:3px;padding:8px 10px;border:2px solid transparent;border-radius:3px;background:var(--sticky,#FFF3A3);color:#2A2A33;cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,.18);font:inherit}
.bt-padrow.on{border-color:var(--navy)}
.bt-padtext{font-family:'Patrick Hand','Bradley Hand','Segoe Print','Chalkboard SE','Comic Sans MS',cursive;font-size:17px;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bt-padmeta{font-size:11px;color:#4A4A55}
.bt-padedit{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.bt-padedit textarea{resize:vertical;width:100%;box-sizing:border-box;font-family:'Patrick Hand','Bradley Hand','Segoe Print','Chalkboard SE','Comic Sans MS',cursive;font-size:18px;line-height:1.2}
.bt-padread{margin:0;font-family:'Patrick Hand','Bradley Hand','Segoe Print','Chalkboard SE','Comic Sans MS',cursive;font-size:20px;line-height:1.2;padding:10px 12px;background:#FFF9D0;border-radius:3px}
.bt-prob{display:flex;flex-direction:column;gap:6px;padding:8px 0;border-top:1px solid var(--line)}
.bt-chips{display:flex;flex-wrap:wrap;gap:8px}
.bt-chip{padding:8px 12px;border-radius:3px;box-shadow:0 2px 4px rgba(0,0,0,.18);font-family:'Patrick Hand','Bradley Hand','Segoe Print','Chalkboard SE','Comic Sans MS',cursive;font-size:17px;line-height:1.15;color:#2A2A33;max-width:260px}
@media (max-width:620px){.bt-pad{grid-template-columns:1fr}}

.bt-lead{margin:0;font-size:13px;color:var(--text2)}
.bt-padbar{gap:10px}
.bt-pad{grid-template-columns:minmax(150px,210px) 1fr;min-height:0;align-items:start}
.bt-padlist{max-height:318px}
.bt-padnew{background:#fff;border:2px dashed var(--line2);box-shadow:none;font-weight:600;color:var(--navy)}
.bt-padnew.on{border-style:solid;border-color:var(--navy)}
.bt-padright{display:flex;flex-direction:column;gap:8px;min-width:0}
.bt-padright .bt-card{padding:10px 12px;gap:4px}
.bt-padright .bt-card p{margin:0;font-size:13px}
.bt-padedit{padding:10px 12px;gap:6px}
.bt-padedit textarea{font-size:17px}

.bt-demo{margin:0;padding:6px 10px;border-radius:8px;background:#EAF1F8;color:var(--navy);font-size:13px}
.bt-padghost{padding:8px 10px;border:2px dashed var(--line2);border-radius:3px;display:flex;flex-direction:column;gap:3px;opacity:.7;background:#FFFBE0}

.bt-pad{grid-template-columns:minmax(180px,260px) 1fr}
.bt-padlist{max-height:380px}
.bt-next{align-self:flex-start;margin-top:4px}
.bt-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px}
.bt-discuss{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:6px}
.bt-big{display:flex;flex-direction:column;gap:8px;padding:16px 16px 12px;border-radius:3px;box-shadow:0 6px 10px -4px rgba(0,0,0,.28);color:#2A2A33;border:3px solid transparent;min-height:150px}
.bt-big.chosen{border-color:#07BE61}
.bt-big.small{min-height:0;padding:12px 14px}
.bt-bigtext{margin:0;flex:1;font-family:'Patrick Hand','Bradley Hand','Segoe Print','Chalkboard SE','Comic Sans MS',cursive;font-size:21px;line-height:1.15}
.bt-big.small .bt-bigtext{font-size:18px}
.bt-bigmeta{font-size:12px;color:#4A4A55}
.bt-big .btn{align-self:flex-start}
.bt-tests{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:6px;align-items:start}
.bt-testcol{display:flex;flex-direction:column;gap:8px;min-width:0}
.bt-testnote{background:#FFE3EC;border-radius:3px;padding:8px 10px;display:flex;flex-direction:column;gap:6px;box-shadow:0 2px 4px rgba(0,0,0,.18);border:2px solid transparent}
.bt-testnote.chosen{border-color:#07BE61}
.bt-testtext{font-family:'Patrick Hand','Bradley Hand','Segoe Print','Chalkboard SE','Comic Sans MS',cursive;font-size:17px;line-height:1.15}
.bt-testcol textarea{resize:vertical;font-family:inherit}
.bt-fishidea{margin:8px 0 0;font-weight:600}

.bt-footer{display:flex;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid var(--line);background:var(--page)}
.bt-arrow{width:46px;height:46px;border-radius:50%;border:0;background:var(--navy);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none}
.bt-arrow svg{width:22px;height:22px}
.bt-arrow:hover:not(:disabled){background:#0F2B4C;transform:translateX(2px)}
.bt-arrow:disabled{background:#CBD2DE;color:#fff;cursor:not-allowed}
.bt-footnote{font-size:13px;color:var(--text2)}
.bt-footnote.ready{color:var(--navy);font-weight:600}

.bt-padedit .bt-post{align-self:flex-end;width:25%;min-width:96px}
.bt-footer{justify-content:space-between}
.bt-footer .bt-arrow{margin-left:auto}

.bt-star{position:absolute;top:8px;right:8px;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.6);display:grid;place-items:center;cursor:pointer;padding:0}
.bt-star svg{width:22px;height:22px;fill:none;stroke:#2A2A33;stroke-width:1.8}
.bt-star.on svg{fill:#F5B400;stroke:#8A6400}
.bt-star:hover{background:#fff}
.bt-big{position:relative}
.bt-big.small .bt-bigtext{padding-right:34px}
.bt-dotkey{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.bt-dotkeyitem{display:inline-flex;align-items:center;gap:5px;font-size:13px}
.bt-dot{display:inline-block;width:12px;height:12px;border-radius:50%;border:1.5px solid rgba(0,0,0,.25);flex:none}
.bt-dot.big{width:20px;height:20px}
.bt-dots{display:flex;flex-wrap:wrap;gap:5px;min-height:20px}
.bt-dotbtn{display:inline-flex;align-items:center;gap:6px;padding:4px 12px 4px 8px;border:1.5px dashed #2A2A33;border-radius:999px;background:rgba(255,255,255,.6);font:inherit;font-size:14px;cursor:pointer;color:#2A2A33}
.bt-dotbtn.on{border-style:solid;background:#fff}
.bt-footer .bt-arrow.fwd{margin-left:auto}
.bt-footer{justify-content:flex-start}
.bt-footer .bt-arrow{margin-left:0}
.bt-footer .bt-arrow.fwd{margin-left:auto}

.bt-present{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:5px 12px 5px 9px;border:1.5px solid #2A2A33;border-radius:999px;background:rgba(255,255,255,.65);font:inherit;font-size:14px;color:#2A2A33;cursor:pointer}
.bt-present svg{width:18px;height:18px;fill:none;stroke:#2A2A33;stroke-width:1.8}
.bt-present.on{background:#fff;font-weight:600}
.bt-present.on svg{fill:#2F7DE1;stroke:#1B4F9B}
.bt-present:hover{background:#fff}
.bt-goes{display:inline-block;padding:3px 10px;border-radius:999px;background:#fff;border:1.5px solid #0BA85A;color:#0B6B3B;font-size:13px;font-weight:600}

.bt-discuss{grid-template-columns:repeat(auto-fill,230px)}
.bt-big.sq{aspect-ratio:1/1;min-height:230px;padding-right:44px}
.bt-big.sq .bt-bigtext{font-size:19px;overflow:auto}
.bt-dotwell{width:20px;height:20px;border-radius:50%;border:2px dashed #2A2A33;background:rgba(255,255,255,.5);padding:0;cursor:pointer;flex:none;opacity:.7}
.bt-dotwell:hover{opacity:1;background:#fff}
.bt-dotwell.on{opacity:1;border-style:solid;background:#fff}
.bt-testtoggle{position:absolute;top:8px;right:8px;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.6);display:grid;place-items:center;padding:0;cursor:pointer}
.bt-testtoggle svg{width:24px;height:24px;fill:none;stroke:#2A2A33;stroke-width:1.8}
.bt-testtoggle:hover:not(:disabled){background:#fff}
.bt-testtoggle:disabled{opacity:.35;cursor:not-allowed}
.bt-testtoggle.on svg{fill:#07BE61;stroke:#fff}
span.bt-testtoggle{cursor:default}
button.bt-dot.mine{padding:0;cursor:pointer}
button.bt-dot.mine:hover{opacity:.7}

.bt-rows{display:flex;flex-direction:column;gap:18px;margin-top:6px}
.bt-trow{display:grid;grid-template-columns:repeat(auto-fill,230px);gap:14px}
.bt-big.sq.problem .bt-bigtext{padding-right:0}
.bt-big.sq.test .bt-bigtext{padding-right:0}
.bt-big.sq.new{background:#FFFBE0;border:2px dashed var(--line2);box-shadow:none}
.bt-big.sq.new textarea{flex:1;resize:none;font-family:'Patrick Hand','Bradley Hand','Segoe Print','Chalkboard SE','Comic Sans MS',cursive;font-size:18px;min-height:0}
.bt-big.sq.new .bt-post{align-self:flex-end;width:50%;min-width:96px}
.bt-x{position:absolute;bottom:8px;right:8px;width:26px;height:26px;border:0;border-radius:50%;background:rgba(255,255,255,.6);cursor:pointer;font-size:18px;line-height:1;padding:0;color:#2A2A33}
.bt-x:hover{background:#fff}
.bt-footer .bt-footnote{margin-left:auto;text-align:right}
.bt-footer .bt-footnote + .bt-arrow.fwd{margin-left:0}
.bt-inlinecheck i{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#07BE61;vertical-align:-5px;margin-left:2px}
.bt-inlinecheck svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2.4}
.bt-lead .bt-inlinecheck{display:inline-grid;place-items:center;width:1.05em;height:1.05em;border-radius:50%;background:#07BE61;vertical-align:-.12em;margin:0 1px}
.bt-lead .bt-inlinecheck svg{width:.8em;height:.8em;fill:none;stroke:#fff;stroke-width:3}

.bt-trow{grid-template-columns:230px minmax(0,560px);align-items:start}
.bt-tstack{display:flex;flex-direction:column;gap:8px;min-height:230px}
.bt-strip{position:relative;background:#FFE3EC;border-radius:3px;box-shadow:0 3px 6px -2px rgba(0,0,0,.25);padding:10px 48px 10px 14px;border:2px solid transparent;display:flex;align-items:center;min-height:48px}
.bt-strip.chosen{border-color:#07BE61}
.bt-striptext{font-family:'Patrick Hand','Bradley Hand','Segoe Print','Chalkboard SE','Comic Sans MS',cursive;font-size:19px;line-height:1.15}
.bt-strip .bt-testtoggle{top:50%;transform:translateY(-50%)}
.bt-strip .bt-x{bottom:auto;top:50%;transform:translateY(-50%)}
.bt-strip.new{background:#FFFBE0;border:2px dashed var(--line2);box-shadow:none;padding:8px 10px;gap:10px}
.bt-strip.new textarea{flex:1;resize:none;font-family:'Patrick Hand','Bradley Hand','Segoe Print','Chalkboard SE','Comic Sans MS',cursive;font-size:18px;min-width:0}
.bt-strip.new .bt-post{width:auto;min-width:96px;align-self:center}
.bt-dots .bt-dot.big,.bt-dots .bt-dotwell{width:26px;height:26px}
.bt-dots .bt-dot.big{display:inline-grid;place-items:center;color:#fff;font:700 13px/1 inherit;font-family:inherit;text-shadow:0 1px 1px rgba(0,0,0,.35)}
.bt-dots .bt-dot.mine{box-shadow:0 0 0 2px #fff,0 0 0 4px #2A2A33}
.bt-dots .bt-dotwell:hover{background:#fff!important}
.bt-vote{align-self:flex-start;padding:5px 18px;border:1.5px solid #9AA1AE;border-radius:999px;background:#E3E6EC;color:#5B6270;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.bt-vote:hover{background:#D5D9E1}
.bt-vote.on{color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.3)}
.bt-vote.on:hover{filter:brightness(.92)}
.bt-dots .bt-dot.big,.bt-dots .bt-dotwell{width:20px;height:20px}
.bt-strip{flex-wrap:wrap;row-gap:6px}
.bt-strip .bt-striptext{flex:1 1 100%}
.bt-strip-votes{display:flex;align-items:center;gap:10px;flex:1 1 100%;min-height:30px}
.bt-strip-votes .bt-dots{min-height:0}
.bt-strip-votes .bt-vote{margin-left:auto}
.bt-strip .bt-testtoggle[hidden]{display:none}
.bt-strip span.bt-testtoggle{top:10px;transform:none}

.bt-circus{position:fixed;inset:0;z-index:9500;display:flex;align-items:center;justify-content:center;background:rgba(16,22,48,.62);overflow:hidden}
.bt-circus-card{position:relative;width:460px;max-width:92vw;background:#FFF7E0;border:4px solid #1E3A6E;border-radius:6px;box-shadow:0 22px 40px -10px rgba(0,0,0,.5);overflow:hidden;animation:bt-circus-in .35s cubic-bezier(.2,.9,.3,1.2) both}
.bt-tent{height:42px;background:repeating-linear-gradient(90deg,#E5484D 0 28px,#fff 28px 56px)}
.bt-awning{height:14px;background:repeating-linear-gradient(90deg,#E5484D 0 28px,#fff 28px 56px);-webkit-mask:radial-gradient(circle at 14px 0,#000 13.5px,transparent 14px) 0 0/28px 14px repeat-x;mask:radial-gradient(circle at 14px 0,#000 13.5px,transparent 14px) 0 0/28px 14px repeat-x}
.bt-circus-stage{display:flex;align-items:center;gap:6px;padding:14px 22px 6px 12px;background:radial-gradient(circle at 20% 55%,#FFF3A3 0,rgba(255,243,163,0) 55%)}
.bt-circus-seal{flex:none;width:150px;animation:bt-seal-bounce .9s ease-in-out infinite}
.bt-circus-seal.calm{animation:none}
.bt-circus-seal svg{width:100%;height:auto;display:block}
.bt-circus-words{display:flex;flex-direction:column;gap:6px;color:#1E3A6E}
.bt-circus-words small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#E5484D}
.bt-circus-words b{font-family:'Patrick Hand','Bradley Hand','Segoe Print','Chalkboard SE','Comic Sans MS',cursive;font-size:30px;line-height:1.05;font-weight:400}
.bt-circus-words span{font-size:14px;color:#4A4A55}
.bt-circus-foot{display:flex;justify-content:flex-end;align-items:center;gap:12px;padding:10px 22px 18px}
.bt-circus-go{border:0;border-radius:999px;background:#E5484D;color:#fff;font:inherit;font-size:18px;font-weight:700;padding:10px 30px;cursor:pointer;box-shadow:0 4px 0 #A82E33}
.bt-circus-go:hover:not(:disabled){background:#EF5A5F}
.bt-circus-go:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #A82E33}
.bt-confetti{position:absolute;top:-16px;width:9px;height:14px;border-radius:2px;animation:bt-confetti-fall 1s ease-in forwards}
@keyframes bt-confetti-fall{to{transform:translate(var(--drift),110vh) rotate(540deg);opacity:.9}}
@keyframes bt-seal-bounce{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
@keyframes bt-circus-in{from{transform:scale(.6) rotate(-3deg);opacity:0}to{transform:none;opacity:1}}

.bt-circus-wrap{position:relative;width:460px;max-width:92vw}
.bt-circus-wrap .bt-circus-card{width:100%}
.bt-lights{position:absolute;inset:-17px;pointer-events:none;filter:drop-shadow(0 0 5px rgba(255,217,26,.9))}
.bt-lights i{position:absolute;display:block;background-image:radial-gradient(circle,#FFF8C2 0 2px,#FFD91A 3px 5px,transparent 5.5px)}
.bt-lights i.t,.bt-lights i.b{left:0;right:0;height:14px;background-size:24px 14px;background-repeat:repeat-x;background-position:0 0}
.bt-lights i.t{top:0}.bt-lights i.b{bottom:0}
.bt-lights i.l,.bt-lights i.r{top:0;bottom:0;width:14px;background-size:14px 24px;background-repeat:repeat-y;background-position:0 0}
.bt-lights i.l{left:0}.bt-lights i.r{right:0}
.bt-lights.b i.t,.bt-lights.b i.b{background-position:12px 0}
.bt-lights.b i.l,.bt-lights.b i.r{background-position:0 12px}
.bt-lights.a{animation:bt-twinkle 1s steps(1) infinite}
.bt-lights.b{animation:bt-twinkle 1s steps(1) infinite;animation-delay:-.5s}
@keyframes bt-twinkle{0%{opacity:1}50%{opacity:.18}}
@media (prefers-reduced-motion:reduce){.bt-lights.a,.bt-lights.b{animation:none}.bt-lights.b{opacity:.45}}
.bt-circus-perch{flex:none;width:150px;display:flex;flex-direction:column;align-items:center}
.bt-circus-perch .bt-circus-seal{width:136px;margin-bottom:-26px;position:relative;z-index:2}
.bt-podium{width:132px;position:relative;z-index:1}
.bt-podium svg{width:100%;height:auto;display:block}
.bt-circus-stage{padding-bottom:14px}

.bt-fishtitle svg.fish{width:56px;height:34px;display:block}
.bt-fishburst{position:absolute;width:270px;height:165px;margin:-83px 0 0 -135px;pointer-events:none;animation:bt-fish-burst 1.4s cubic-bezier(.4,0,.9,.6) forwards}
.bt-fishburst svg{width:100%;height:100%;display:block}
@keyframes bt-fish-burst{0%{transform:translate(0,0) rotate(var(--rot)) scale(.3)}100%{transform:translate(var(--dx),var(--dy)) rotate(calc(var(--rot) + var(--spin))) scale(var(--s,1))}}
/* the corner bulbs belong to the top and bottom rows only, and bulbs are spaced evenly along each side */
.bt-lights i.t,.bt-lights i.b{background-repeat:round no-repeat}
.bt-lights i.l,.bt-lights i.r{top:14px;bottom:14px;background-repeat:no-repeat round}
/* one set of bulbs, all flashing together */
.bt-lights.b{display:none}
.bt-lights.a{animation:bt-flash-all 1.1s steps(1) infinite}
@keyframes bt-flash-all{0%{opacity:1}55%{opacity:.12}}
@media (prefers-reduced-motion:reduce){.bt-lights.a{animation:none;opacity:1}}
.ch-tab.fishtab svg.fish{width:34px;height:20px;display:block}

/* the Idea Wall: each team's problem and test is a sticky with the team's name on the tape */
.iw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:30px 22px;padding:14px 6px 8px}
.iw-cell{display:flex;flex-direction:column;gap:8px;align-items:center}
.iw-note{position:relative;display:flex;flex-direction:column;gap:8px;width:100%;max-width:262px;aspect-ratio:1/1;box-sizing:border-box;padding:26px 16px 14px;border:0;border-radius:3px;box-shadow:0 8px 12px -4px rgba(0,0,0,.3);text-align:left;color:#2A2A33;font-family:'Patrick Hand','Bradley Hand','Segoe Print','Chalkboard SE','Comic Sans MS',cursive;font-size:18px;line-height:1.15;cursor:pointer;transition:transform .15s,box-shadow .15s}
.iw-note:hover{transform:rotate(0deg) scale(1.03)!important;box-shadow:0 12px 18px -4px rgba(0,0,0,.35)}
.iw-note.partner{outline:3px solid #07BE61;outline-offset:-3px}
.iw-note .bt-stape{max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iw-line{margin:0;display:flex;flex-direction:column;gap:1px}
.iw-line b{font-family:system-ui,sans-serif;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#4A4A55}
.iw-line span{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.iw-tags{margin-top:auto;display:flex;gap:6px;flex-wrap:wrap}
.iw-foot{display:flex;align-items:center;gap:10px;justify-content:space-between;width:100%;max-width:262px}
.iw-count{font-size:12px;color:var(--text2);white-space:nowrap}
.iw-reacts{display:flex;gap:4px;flex-wrap:wrap}
.iw-react{display:inline-flex;align-items:center;gap:3px;padding:3px 6px;border:1.5px solid var(--line2);border-radius:999px;background:#fff;color:var(--navy);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.iw-react svg{width:18px;height:18px;display:block}
.iw-react:hover:not(.own){border-color:#2F7DE1;background:#F2F7FF}
.iw-react.on{background:#E6F0FF;border-color:#2F7DE1}
.iw-react.own{cursor:default;background:#fff}
.iw-open{display:grid;grid-template-columns:minmax(260px,330px) minmax(0,1fr);gap:22px;align-items:start;padding-top:10px}
.iw-note.big{max-width:none;aspect-ratio:auto;min-height:300px;font-size:21px;cursor:default;transform:rotate(-1deg)}
.iw-note.big:hover{transform:rotate(-1deg)!important;box-shadow:0 8px 12px -4px rgba(0,0,0,.3)}
.iw-note.big .iw-line span{display:block;-webkit-line-clamp:unset}
.iw-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.iw-side h3{margin:4px 0 0}
.bt-backwall{align-self:flex-start}

/* Your Feedback: the team's posted ideas with the feedback they got, and a fish to gift the feedback that helped */
.iw-fishtop{display:flex;justify-content:flex-end;padding:6px 6px 0}
.iw-fishnote{position:relative;width:300px;max-width:100%;box-sizing:border-box;padding:24px 16px 14px;background:#FFF3A3;border-radius:3px;box-shadow:0 8px 12px -4px rgba(0,0,0,.28);transform:rotate(1.2deg);color:#2A2A33}
.iw-fishnote-body{display:flex;flex-direction:column;gap:8px}
.iw-fishnote-icon svg.fish{width:46px;height:28px;display:block}
.iw-fishnote p{margin:0;font-size:14px;line-height:1.3}
.iw-fishnote .iw-fishleft{font-weight:700}
.iw-feedrow{padding-bottom:14px;border-bottom:1px dashed var(--line2);margin-bottom:6px}
.iw-feeditem{display:flex;align-items:flex-start;gap:10px}
.iw-feeditem .bt-replyitem{flex:1;min-width:0}
.iw-fishbtn{flex:none;margin-top:8px;padding:6px;border:0;border-radius:8px;background:none;cursor:pointer}
.iw-fishbtn svg.fish{width:46px;height:28px;display:block;filter:grayscale(1);opacity:.45;transition:filter .15s,opacity .15s,transform .15s}
.iw-fishbtn:hover:not(:disabled) svg.fish{filter:grayscale(.4);opacity:.85;transform:scale(1.08)}
.iw-fishbtn:disabled{cursor:not-allowed}
.iw-fishbtn.on{cursor:default}
.iw-fishbtn.on svg.fish{filter:none;opacity:1}
.iw-feeditem .bt-replyitem .bt-head .bt-fish{display:none}

/* People: bulk bars, compact rows */
.pp-bulk{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.pp-bulk > b{min-width:90px}
.pp-bulk textarea{width:100%;min-height:90px;font:inherit}
.pp-bulk .field{min-width:150px;flex:1 1 150px}
.pp-form{display:flex;flex-wrap:wrap;gap:8px;width:100%;align-items:center}
.pp-form .field{flex:1 1 150px}
.pp-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px}
.pp-row input[type=checkbox]{width:18px;height:18px;flex:none}
.pp-row select.field{min-width:140px;flex:0 1 190px}
.pp-row img.flag{width:22px;height:16px;flex:none}
.pp-code{display:flex;align-items:center;gap:8px;flex:none}
.pp-code b{font-family:var(--mono);font-size:15px;letter-spacing:2px;color:var(--navy);background:var(--hover);border:1px solid var(--line2);border-radius:8px;padding:5px 10px}
.pp-code .btn{padding:5px 10px;font-size:12px}
.pp-hidden-toggle{align-self:flex-start;margin-top:12px;font-size:13px}
.pp-list{display:flex;flex-direction:column;gap:8px}
.pp-row,.pp-bulk{flex-direction:row;text-align:left;justify-content:flex-start}
.pp-bulk > b{flex:1 1 100%;min-width:0}
.pp-bulk .ch-how,.pp-bulk > textarea,.pp-bulk > p{flex:1 1 100%}

/* the Students table: headings line up with the columns */
.pp-grid{display:grid;grid-template-columns:22px minmax(140px,1fr) minmax(130px,190px) minmax(130px,190px) 78px;gap:10px;align-items:center;text-align:left}
.pp-grid select.field,.pp-grid .btn{width:100%;min-width:0}
/* 13px, not 12px: the rows below are cards with a 1px border, so this lines the headings up with them. */
.pp-head{padding:0 13px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text3)}
.ch-card.pp-grid{padding:8px 12px}
.pp-grid input[type=checkbox]{width:18px;height:18px}
/* Students and teachers read the same way: who they are, two things about them, Edit, Delete. */
.pp-grid.students,.pp .pp-list .pp-grid,.pp .pp-head{grid-template-columns:minmax(140px,1fr) minmax(140px,200px) minmax(130px,190px) 72px 78px}
/* Adding a teacher who has no account yet, and the list of those waiting to sign up (apps/people.js) */
.pp-invite{display:flex;flex-direction:column;gap:4px;padding:12px;margin-bottom:14px}
.pp-inviterow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.pp-inviterow .field{flex:1 1 180px;min-width:0}
.pp-inviterow .btn{flex:none}
.pp-sub{margin:20px 0 2px;font-size:14px}
/* A row being edited drops the columns and becomes one line, so the form has the whole width. */
.pp .pp-list .pp-grid.pp-editing{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pp-editing .pp-form .field{flex:1 1 180px;min-width:0}
.pp-editing .pp-form label{flex:none;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.pp-verify{margin-top:20px;border-top:1px solid var(--line2);padding-top:12px}
.pp-verify .ch-how{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.iw-pointnote{margin:0;padding:10px 12px;border-radius:8px;background:#E8F7EE;color:#0B6B3B;font-weight:600;font-size:14px}

.ch-kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ch-kind{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;border-radius:10px;background:#fff;border:1px solid var(--line)}
.ch-kind b{font-size:24px;color:var(--navy)}
.ch-kind span{font-size:12px;color:var(--text2);text-align:center}
.fishtag{color:#111}

.iw-sechead{margin:14px 6px 0;font-size:14px}
.iw-sec{margin-top:26px;padding-top:6px;border-top:2px dashed var(--line)}
.iw-done{background:rgba(24,45,84,.05);border-radius:14px;padding:6px 8px 10px}

.iw-react svg{width:22px;height:22px}
.iw-react{padding:2px 7px 2px 3px}

.iw-foot{max-width:262px}
.iw-bar{position:relative;display:flex;align-items:center;gap:2px;width:100%;background:#fff;border:1px solid var(--line);border-radius:12px;padding:3px 8px;box-shadow:0 1px 3px rgba(8,16,40,.12)}
.iw-likewrap{position:relative;display:flex}
.iw-barbtn{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border:0;border-radius:8px;background:none;color:#5E6470;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.iw-barbtn:hover:not(span){background:#F1F2F5}
.iw-barbtn svg{width:20px;height:20px;display:block}
.iw-barbtn.on{color:#0A66C2}
.iw-barbtn.on svg{width:22px;height:22px}
span.iw-barbtn{cursor:default}
.iw-stack{display:flex;margin-left:auto;padding-right:2px}
.iw-stk{display:block;width:20px;height:20px;border-radius:50%;box-shadow:0 0 0 2px #fff}
.iw-stk+.iw-stk{margin-left:-6px}
.iw-stk svg{width:20px;height:20px;display:block}
.iw-picker{position:absolute;left:-4px;bottom:calc(100% + 6px);z-index:30;display:flex;gap:2px;padding:6px 8px;background:#fff;border-radius:999px;box-shadow:0 4px 16px rgba(8,16,40,.28)}
.iw-picker[hidden]{display:none}
.iw-pick{padding:0;border:0;background:none;cursor:pointer;border-radius:50%;transition:transform .12s}
.iw-pick svg{width:34px;height:34px;display:block}
.iw-pick:hover,.iw-pick:focus-visible{transform:translateY(-5px) scale(1.25)}
.iw-pick.on{outline:2px solid #0A66C2;outline-offset:1px}

.iw-note,.iw-note.big{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:400;font-size:14px;line-height:1.3}
.iw-note.big{font-size:17px}
.iw-line span{font-weight:400}
.iw-left{display:flex;flex-direction:column;gap:10px;min-width:0}
.iw-sechelp{margin:2px 6px 0}
.bt-replyhead{margin:14px 0 4px;font-size:15px}

.iw-mine{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.iw-minehead{display:flex;align-items:center;gap:8px}
.iw-minectx{margin:0;font-size:12px}

.bt-sfish{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:4px 12px 4px 8px}
.bt-sfish svg.fish{width:30px;height:18px;display:block;filter:grayscale(1);opacity:.55}
.bt-sfish.on svg.fish{filter:none;opacity:1}
.bt-sfish.on{background:#FFF1F0;border-color:#D7263D}

.ch-scoring b{display:block;margin-top:4px}
.ch-scoring p{margin:2px 0 8px;color:var(--text2);line-height:1.4}

.ch-goose{width:16px;height:16px;border-radius:3px;vertical-align:-3px;margin-right:5px}

.ch-scoring h3{margin:0 0 4px}
.ch-board{max-height:none}
.ch-kinds{grid-template-columns:repeat(4,1fr)}

.ch-firsts{grid-template-columns:repeat(3,minmax(0,1fr))}
.ch-firsts .ch-kind b{font-size:15px;overflow-wrap:anywhere}
.ch-firsts .ch-kind span{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.ch-firsts svg.fish{width:22px;height:14px}
.ch-lb{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.ch-lb-row{display:grid;grid-template-columns:40px minmax(120px,1fr) repeat(4,minmax(64px,.5fr));align-items:center;gap:8px;padding:10px 12px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.ch-lb-row.me{border-color:#07BE61;background:#F1FBF5}
.ch-lb-head{background:none;border:0;padding:0 12px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--text3)}
.ch-lb-head span:nth-child(n+3){text-align:right}
.ch-lb-num{text-align:right;font-weight:600}
.ch-lb-num small{display:block;font-weight:400;font-size:11px;color:var(--text3)}
.ch-lb-total{font-weight:700}
.ch-lb-team b{display:inline-flex;align-items:center;gap:6px}
.iw-fishbtn .fishstack{display:flex;flex-direction:column;align-items:center}
.iw-fishbtn svg.fish{width:40px;height:24px}
.iw-fishbtn svg.fish+svg.fish{margin-top:-4px}
.ch-firsts .ch-kind{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.ch-firsts .ch-kind .ch-first-title{display:flex;align-items:center;justify-content:center;gap:6px;font-weight:700}
.ch-firsts .ch-kind .ch-icon{display:inline-flex}
.ch-firsts .ch-kind .ch-first-title img.ch-goose{height:22px;width:auto}
.ch-lb-head span:nth-child(n+3){text-align:center;display:flex;align-items:center;justify-content:center}
.ch-lb-head svg.fish{width:26px;height:16px}
.ch-lb-head img.ch-goose{height:20px;width:auto}
.ch-lb-num{text-align:center}
.ch-firsts img.ch-goose,.ch-lb-head img.ch-goose{margin:0;width:auto;vertical-align:middle}
.ch-rubric .ch-ext{margin-top:4px;font-size:13px;color:var(--text3)}
.ch-rubric .ch-earnrow span{display:block}
.bt-tip{margin:8px 0;padding:10px 12px;background:#FFF3A3;border-radius:8px;color:#2A2A33}.bt-tip p{margin:0 0 8px}.bt-tip[hidden]{display:none}
.bt-tip.lazy{display:grid;grid-template-columns:64px 1fr;column-gap:10px;align-items:start}
.bt-tip.lazy .bt-tipseal{grid-row:1 / span 3}
.bt-tip.lazy .bt-tipseal svg{height:56px;width:auto;display:block}
.bt-tip.lazy .sb-row{grid-column:2}
.bt-tip.lazy[hidden]{display:none}
.bt-quip{font-weight:700}
.ch-skillrow{padding:12px 0;border-top:1px solid var(--line)}
.ch-skillrow:first-of-type{border-top:0}
.ch-skillrow>b{display:block;font-size:15px}
.ch-skillrow .ch-line{display:block;margin:2px 0 8px;font-size:13px;color:var(--text2)}
.ch-level{display:grid;grid-template-columns:92px 1fr;gap:8px;padding:3px 0;font-size:13px;color:var(--text2);line-height:1.35}
.ch-level i{font-style:normal;font-weight:700;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--text3);padding-top:2px}
.ch-teach{margin-top:8px;padding:8px 10px;background:var(--hover);border-radius:8px;font-size:13px}
.ch-teach b{display:block;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--text3)}
.ch-teach p{margin:3px 0 0;color:var(--text2)}
.sb-grid{overflow:auto;max-height:340px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.sb-grid table{border-collapse:separate;border-spacing:0;width:100%;font-size:13px}
.sb-grid th,.sb-grid td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:center;white-space:nowrap;background:var(--card)}
.sb-grid thead th,.sb-grid tr:first-child th{position:sticky;top:0;z-index:2;font-weight:600}
.sb-grid th b{display:block}
.sb-grid th span{display:block;font-weight:400;font-size:11px;color:var(--text3)}
.sb-grid .sb-team-col{position:sticky;left:0;z-index:1;text-align:left;min-width:130px;font-weight:700;border-right:1px solid var(--line)}
.sb-grid tr:first-child .sb-team-col{z-index:3}
.sb-total{font-weight:700}
.sb-mark{width:34px;height:30px;border:1px solid var(--line);border-radius:8px;background:var(--card);font-size:16px;font-weight:700;cursor:pointer;color:var(--text)}
.sb-mark.ok{background:#D9EFE1;border-color:#07BE61;color:#1F6040}
.sb-mark.late{background:#F6DCE0;border-color:#C9505F;color:#8A2A37}
.sb-goose b{min-width:130px}
.ch-rubric-intro{margin-bottom:12px}
.ch-rubric-intro h3{margin:0 0 4px;font-size:18px}
.ch-rubric-intro p{margin:0;color:var(--text2);line-height:1.4}
.ch-sk{--c:#E5484D;--bg:#FFE3E4;--on:#fff;margin:0 0 10px;background:var(--card);border:1px solid var(--line);border-left:6px solid var(--c);border-radius:14px;overflow:hidden}
.ch-sk.s2{--c:#F76B15;--bg:#FFE6D1}.ch-sk.s3{--c:#FFC53D;--bg:#FFF4C7;--on:#1B2A4A}.ch-sk.s4{--c:#30A46C;--bg:#D9F5E5}.ch-sk.s5{--c:#0090FF;--bg:#D6EBFF}.ch-sk.s6{--c:#8E4EC6;--bg:#EEE0FA}
.ch-sk summary{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;cursor:pointer;list-style:none;background:var(--bg)}
.ch-sk summary::-webkit-details-marker{display:none}
.ch-sk summary::after{content:'\25BE';margin-left:auto;color:var(--navy);font-size:16px;transition:transform .15s}
.ch-sk[open] summary::after{transform:rotate(180deg)}
.ch-sk-n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--c);color:var(--on);font-weight:800;display:flex;align-items:center;justify-content:center}
.ch-sk-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.ch-sk-t b{font-size:15px;color:var(--navy)}
.ch-sk-t span{font-size:13px;color:var(--text2);line-height:1.35}
.ch-steps{padding:10px 14px 6px}
.ch-step{display:grid;grid-template-columns:104px 1fr;gap:10px;padding:8px 0;border-top:1px dashed var(--line)}
.ch-step:first-child{border-top:0}
.ch-step-tag{display:flex;flex-direction:column;gap:4px}
.ch-step-tag i{font-style:normal;font-weight:800;font-size:12px;color:var(--navy)}
.ch-dots{display:flex;gap:4px}
.ch-dots u{width:14px;height:6px;border-radius:3px;background:var(--line);text-decoration:none}
.ch-dots u.on{background:var(--c)}
.ch-step p{margin:0;font-size:14px;line-height:1.45;color:var(--text)}
.ch-sk .ch-teach{margin:4px 14px 12px}
.ch-page>.ch-sk,.ch-page>.ch-rubric-intro{flex:none}
.ch-sk summary::after{font-size:18px;line-height:1}
.cloud-ok{color:#1F7A47}
.cloud-forgot-row{margin:10px 0 0}
.cloud-forgot{background:none;border:0;padding:0;font:inherit;font-size:13px;color:var(--text2);text-decoration:underline;cursor:pointer}
.cloud-forgot[hidden]{display:none}
.pp-place{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ch-dates{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.ch-dates li{display:flex;gap:12px;align-items:baseline}
.ch-dates li b{flex:none;min-width:48px;color:var(--navy)}
.ch-stagebox{margin-bottom:10px}
.ch-stagebox.later{opacity:.8}
.ch-stagebox.now{border-color:#07BE61;box-shadow:0 0 0 2px rgba(7,190,97,.18)}
.ch-stagebox-head{display:flex;align-items:center;gap:12px}
.ch-stagebox-head div{flex:1}
.ch-stagebox-head b{display:block}
.ch-stagebox-head em{font-style:normal;font-size:12px;font-weight:600;color:var(--text2)}
.ch-stagebox>p{margin:6px 0 10px}
.ch-check li a.btn{text-decoration:none}
.ch-dates li.first{padding:6px 8px;background:#E8F8EF;border-radius:8px}.ch-dates li{padding:2px 8px}

/* Idea Wall: no title bar. The team name, tabs and ? share one thin row, so an open idea fits without scrolling. */
.iw-tabs{align-items:center;padding:6px 12px 0;gap:6px}
.iw-tabs .ch-tab{padding:6px 10px}
.iw-team{font-size:12px;font-weight:700;color:var(--navy);background:#E3F7EC;border-radius:999px;padding:4px 10px;margin-right:6px;white-space:nowrap;max-width:160px;overflow:hidden;text-overflow:ellipsis}
.iw-back{width:30px;height:30px;border-radius:50%;border:0;background:var(--navy);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none;margin-right:4px}
.iw-back svg{width:16px;height:16px}
.iw-back:hover{background:#0F2B4C}
.iw-q{margin-left:auto;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);color:var(--text2);font:inherit;font-weight:700;font-size:14px;line-height:1;cursor:pointer;flex:none;align-self:center}
.iw-q:hover,.iw-q.on{border-color:#07BE61;color:var(--navy)}
.iw-fishleft{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--text2)}
.iw-fishleft svg.fish{width:26px;height:15px;display:block}
.iw-fishleft + .iw-q{margin-left:6px}
.iw-help{display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:12px;font-size:13px;color:var(--text2)}
.iw-tabs ~ .ch-page{padding-top:12px}
.iw-open{padding-top:0}
.iw-open .iw-left{position:sticky;top:0}
.iw-note.big{min-height:0}

.bt-footer .bt-done{margin-left:auto}

.bt-how{display:flex;flex-direction:column;gap:6px;padding:10px 14px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.bt-how p{display:grid;grid-template-columns:76px 1fr;gap:10px;font-size:14px;line-height:1.4}
.bt-how b{text-align:right;color:var(--navy);font-size:12px;letter-spacing:.05em;text-transform:uppercase;padding-top:2px}
.bt-footer .bt-footnote + .bt-done{margin-left:0}

.bt-howrow{display:flex;align-items:center;gap:14px}
.bt-howrow .bt-how{flex:1;min-width:0}
.bt-howseal{flex:none}
.bt-howseal svg{height:84px;width:auto;display:block}
@media (max-width:520px){.bt-howseal svg{height:56px}}

.bt-addprob{align-self:flex-start}
button.bt-big.mine{text-align:left;font:inherit;cursor:pointer}
button.bt-big.mine:hover{box-shadow:0 8px 14px -4px rgba(0,0,0,.35)}
.bt-big.sq.problem{min-height:0;aspect-ratio:auto;min-height:150px}
.bt-dlg{position:fixed;inset:0;z-index:9000;background:rgba(8,16,40,.4);display:grid;place-items:center;padding:16px}
.bt-dlg-card{width:min(440px,100%);display:flex;flex-direction:column;gap:12px;padding:18px;background:var(--card);border-radius:14px;box-shadow:0 18px 48px rgba(8,16,40,.35)}
.bt-dlg-card textarea{width:100%;box-sizing:border-box}
.bt-how span{white-space:pre-line}
.bt-howseal{transform:scaleX(-1)}   /* the wrapper is flipped, not the picture, because the picture's bobbing animation sets its own transform */
.bt-how-rows{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.bt-time-box{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bt-clock{font-weight:600;color:var(--navy)}
.bt-time .btn{min-height:34px}
.bt-how.seal{flex-direction:row;align-items:center;gap:14px}

.bt-posted{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;background:#FFE066;border:2px solid #182D54;color:#182D54;font-weight:600;font-size:14px}
.bt-posted svg{width:22px;height:22px;flex:none;fill:none;stroke:#182D54;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bt-howseal svg{animation:none}   /* the Seal holds still in the Workshop */

/* Workshop stickies and the boxes students type in use Fredoka, a rounded font that is not bold. */
.bt-padtext,.bt-padread,.bt-chip,.bt-bigtext,.bt-testtext,.bt-striptext,
.bt-padedit textarea,.bt-strip.new textarea,.bt-dlg-card textarea{font-family:'Fredoka',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:400}
.bt-bigtext{font-size:19px;line-height:1.25}
.bt-big.small .bt-bigtext{font-size:17px}
.bt-big.sq .bt-bigtext{font-size:17px}
.bt-padtext{font-size:15px;line-height:1.25}
.bt-padread{font-size:17px;line-height:1.3}
.bt-chip{font-size:15px;line-height:1.25}
.bt-testtext,.bt-striptext{font-size:16px;line-height:1.25}
.bt-padedit textarea,.bt-strip.new textarea,.bt-dlg-card textarea{font-size:16px;line-height:1.3}

.bt-posted .btn{margin-left:auto;flex:none}
.bt-posted.open{background:#BDF0D2}
.bt-dlg-q{font-weight:500;font-size:14px;color:var(--navy)}
.bt-dlg-ans{display:flex;gap:8px}
.bt-dlg-ans .btn.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.bt-circus-warn{color:#A82E33;font-weight:600}

/* ---- Command Center ---- */
.cc-item{display:flex;flex-direction:column;gap:6px}
.cc .ch-tabs{align-items:center}
.cc-refresh{margin-left:auto;background:none;border:0;color:var(--text2);font:inherit;font-size:13px;cursor:pointer;padding:6px 8px}
.cc-refresh:hover{color:var(--text)}

.cc-filter{display:flex;gap:8px}
.cc-filter select{max-width:240px}
.cc-feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.cc-ev{display:flex;gap:12px;align-items:flex-start;padding:8px 12px;background:var(--card);border:1px solid var(--line);border-radius:10px}
.cc-time{flex:none;width:64px;font-size:12px;color:var(--text2);padding-top:2px}
.cc-evbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cc-evbody p{margin:0}
.cc-quote{font-size:13px}
.cc-chip{align-self:flex-start;font-size:11px;font-weight:600;color:var(--navy);background:#E3F7EC;border-radius:999px;padding:2px 8px}
.cc-ev.post .cc-chip,.cc-ev.change .cc-chip{background:#FFE066}

/* Command Center: the fun layer. Bright tints, navy text, no brown. */
.cc-g-wait{border-left:6px solid #FFE066}
.cc-g-check{border-left:6px solid #FF8FA8}
.cc-g-new{border-left:6px solid #7DB8FF}
.cc-h{display:inline-block;margin:14px 0 6px;padding:3px 12px;border-radius:999px;color:var(--navy);font-size:14px}
.cc-h.cc-g-wait{background:#FFE066;border:0}
.cc-h.cc-g-check{background:#FFC9D6;border:0}
.cc-h.cc-g-new{background:#C9E4FF;border:0}
.cc-empty{display:flex;align-items:center;gap:16px;padding:18px;border-radius:14px;background:#BDF0D2;color:var(--navy)}
.cc-empty .ch-muted{color:var(--navy);opacity:.75;margin:2px 0 0}
.cc-seal svg{width:110px;height:auto;display:block}
.cc-empty-text b{font-size:17px}

.cc .ch-tab{font-weight:600}
.cc .ch-tab.on{background:#FFE066;color:var(--navy);border-radius:999px}

.cc-ev{border-left:6px solid #BDF0D2}
.cc-ev.problem{border-left-color:#FFE066}
.cc-ev.test{border-left-color:#E5D4FF}
.cc-ev.done{border-left-color:#BDF0D2}
.cc-ev.feedback{border-left-color:#FFC9D6}
.cc-ev.post{border-left-color:#7DB8FF}
.cc-ev.change{border-left-color:#FFB454}
.cc-icon{flex:none;font-size:20px;line-height:1.2;width:26px;text-align:center}

.cc-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-bottom:14px}
.cc-tile{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:14px;color:var(--navy)}
.cc-tile-n{font-size:28px;font-weight:700;line-height:1.1}
.cc-tile-l{font-size:12px;font-weight:600}

.cc-team{border-top:8px solid var(--tc);display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
.cc-team-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cc-team-name{display:flex;flex-direction:column;flex:1;min-width:120px}
.cc-team-name b{font-size:17px}
.cc-avatar{flex:none;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--tc,#C9E4FF);color:var(--navy);font-weight:700;font-size:18px}
.cc-avatar.sm{width:26px;height:26px;font-size:13px;background:var(--tc)}
.cc-badge{font-size:12px;font-weight:600;color:var(--navy);background:var(--tc);border-radius:999px;padding:3px 10px}

.cc-track{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;position:relative}
.cc-stop{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;font-size:12px;position:relative}
.cc-stop:not(:last-child)::after{content:'';position:absolute;top:11px;left:calc(50% + 14px);right:calc(-50% + 14px);height:4px;border-radius:2px;background:var(--line)}
.cc-stop.on:not(:last-child)::after{background:var(--tc)}
.cc-pip{width:24px;height:24px;border-radius:50%;border:3px solid var(--line);background:#fff;color:var(--navy);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.cc-stop.on .cc-pip{background:var(--tc);border-color:var(--tc)}

.cc-students{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.cc-students li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 10px;border-radius:10px;background:var(--card)}
.cc-students li b{flex:1;min-width:80px}
.cc-chip.yes{background:#BDF0D2}
.cc-students .cc-chip{background:#EEF1F6}
.cc-students .cc-chip.yes{background:#BDF0D2}
.cc .ch-tab.on{border-bottom-color:transparent}

/* Command Center: bold sticker style on a dot grid. Thick navy outlines, hard offset shadows, bright fills. */
.cc .ch-page{background-color:#fff;background-image:radial-gradient(#C3CBDA 1.2px,transparent 1.2px);background-size:16px 16px;padding:16px 18px 24px}
.cc .ch-tabs{background:#fff;border-bottom:2.5px solid #182D54;padding:10px 14px;gap:8px}
.cc .ch-tab{border:2px solid #182D54;border-radius:999px;padding:5px 14px;color:#182D54;background:#fff;box-shadow:2px 2px 0 #182D54}
.cc .ch-tab:hover{background:#FFF3A3;color:#182D54}
.cc .ch-tab.on{background:#FFE066;border:2px solid #182D54}
.cc .cc-refresh{border:2px solid #182D54;border-radius:999px;padding:4px 12px;color:#182D54;background:#fff;box-shadow:2px 2px 0 #182D54}
.cc .cc-refresh:hover{background:#C9E4FF;color:#182D54}
.cc .btn{border:2px solid #182D54;border-radius:10px;color:#182D54;background:#fff;box-shadow:2px 2px 0 #182D54;font-weight:600}
.cc .btn:hover{background:#FFF3A3}
.cc .btn:active{transform:translate(2px,2px);box-shadow:0 0 0 #182D54}
.cc .btn.primary{background:#7DE3A8}
.cc .btn.primary:hover{background:#5CD890}
.cc select.field{border:2px solid #182D54;border-radius:10px;background:#fff;box-shadow:2px 2px 0 #182D54}

.cc .ch-card,.cc .cc-ev,.cc .cc-tile,.cc .cc-empty{border:2.5px solid #182D54;border-radius:12px;box-shadow:3px 3px 0 #182D54}
.cc .cc-item,.cc .cc-ev,.cc .cc-team{margin-bottom:12px}
.cc .cc-feed{gap:12px}
.cc .cc-item.cc-g-wait{background:#FFF3A3;border-left:2.5px solid #182D54}
.cc .cc-item.cc-g-check{background:#FFC9D6;border-left:2.5px solid #182D54}
.cc .cc-item.cc-g-new{background:#C9E4FF;border-left:2.5px solid #182D54}
.cc .cc-item .ch-muted{color:#182D54}
.cc .cc-h{border:2px solid #182D54;box-shadow:2px 2px 0 #182D54;font-weight:600;margin:18px 0 10px}
.cc h3{color:#182D54}

.cc .cc-ev{background:#fff;border-left:2.5px solid #182D54;padding:10px 12px}
.cc .cc-icon{width:34px;height:34px;border:2px solid #182D54;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;background:#fff}
.cc .cc-ev.problem .cc-icon{background:#FFE066}
.cc .cc-ev.test .cc-icon{background:#C9B8FF}
.cc .cc-ev.done .cc-icon{background:#7DE3A8}
.cc .cc-ev.feedback .cc-icon{background:#FFC9D6}
.cc .cc-ev.post .cc-icon{background:#7DB8FF}
.cc .cc-ev.change .cc-icon{background:#FFB454}
.cc .cc-time{color:#182D54}
.cc .cc-chip{border:1.5px solid #182D54;color:#182D54}
.cc .cc-ev .ch-muted{color:#44506A}

.cc .cc-empty{box-shadow:3px 3px 0 #182D54}
.cc .cc-tiles{gap:14px;margin-bottom:20px}
.cc .cc-tile{padding:12px 14px}
.cc .cc-tile-n{font-size:30px}

.cc .cc-team{background:#fff;border-top:2.5px solid #182D54}
.cc .cc-team-head{padding-bottom:2px}
.cc .cc-avatar{border:2.5px solid #182D54}
.cc .cc-badge{border:2px solid #182D54}
.cc .cc-pip{border:2.5px solid #182D54;background:#fff}
.cc .cc-stop.on .cc-pip{background:var(--tc);border-color:#182D54}
.cc .cc-stop:not(:last-child)::after{height:5px;border-radius:3px;background:#D5DAE3;border:0;top:10px}
.cc .cc-stop.on:not(:last-child)::after{background:#182D54}
.cc .cc-students li{background:#fff;border:2px solid #182D54;border-radius:10px}
.cc .cc-students .cc-chip{background:#fff}
.cc .cc-students .cc-chip.yes{background:#7DE3A8}
.cc .cc-stop .ch-muted{color:#44506A}
.cc .cc-tiles{grid-template-columns:repeat(auto-fit,minmax(92px,1fr))}.cc .cc-tile-l{font-size:11px}

.cc .cc-sugform{background:#fff;display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.cc .cc-sugform textarea{border:2px solid #182D54;border-radius:10px;padding:8px 10px;font:inherit;resize:vertical;width:100%;box-sizing:border-box}
.cc-kinds{display:flex;gap:8px;flex-wrap:wrap}
.cc .cc-kind{border:2px solid #182D54;border-radius:999px;padding:4px 12px;background:#fff;color:#182D54;font:inherit;font-size:13px;font-weight:600;cursor:pointer;box-shadow:2px 2px 0 #182D54}
.cc .cc-kind.on{background:var(--kc)}
.cc .cc-sug{background:var(--kc);display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.cc .cc-sug.done{opacity:.7}
.cc-sug-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cc-sug-top .ch-muted{flex:1;color:#182D54}
.cc-kindtag{font-size:12px;font-weight:700;color:#182D54;background:#fff;border:2px solid #182D54;border-radius:999px;padding:1px 10px}
.cc-sug-body{margin:0;white-space:pre-wrap;color:#182D54}
.cc .cc-stat-seen{background:#C9E4FF}
.cc .cc-stat-done{background:#7DE3A8}
.cc .cc-stat-new{background:#FFE066}

/* A reminder note from the teacher, at the top of the Workshop and the Idea Wall */
.bt-note{display:flex;align-items:center;gap:12px;padding:10px 14px;margin-bottom:10px;background:#FFF3A3;border:2.5px solid #182D54;border-radius:12px;box-shadow:3px 3px 0 #182D54;color:#182D54}
.bt-note-text{flex:1;min-width:0}
.bt-note-text small{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.bt-note-text p{margin:2px 0 0;font-family:'Fredoka',system-ui,sans-serif;font-size:16px;line-height:1.3}
.bt-note .btn{flex:none;border:2px solid #182D54;border-radius:10px;background:#fff;color:#182D54;font-weight:600;box-shadow:2px 2px 0 #182D54}
.cc .cc-remind{display:flex;flex-direction:column;gap:8px;background:#fff;border:2px solid #182D54;border-radius:10px;padding:10px}
.cc .cc-remind textarea{border:2px solid #182D54;border-radius:10px;padding:8px 10px;font:inherit;resize:vertical;width:100%;box-sizing:border-box}
.cc .cc-remind p{margin:0;color:#182D54}

/* Reminders section on the to-do list */
.cc-g-remind{border-left:6px solid #B79CFF}
.cc .cc-item.cc-g-remind{background:#E5D4FF;border-left:2.5px solid #182D54}
.cc .cc-h.cc-g-remind{background:#E5D4FF;border:2px solid #182D54}
.cc .cc-reminded{display:inline-flex;align-items:center;font-weight:600;font-size:13px;color:#182D54;background:#BDF0D2;border:2px solid #182D54;border-radius:10px;padding:5px 10px}
.cc-filter{flex-wrap:wrap}

/* Idea Wall: the Send feedback button stands out */
.bt-reply .ch-form button[type=submit]{align-self:flex-start;background:#07BE61;border:2px solid #182D54;border-radius:12px;color:#182D54;font-size:16px;font-weight:700;padding:11px 26px;box-shadow:3px 3px 0 #182D54;cursor:pointer}
.bt-reply .ch-form button[type=submit]:hover{background:#2ED87F}
.bt-reply .ch-form button[type=submit]:active{transform:translate(3px,3px);box-shadow:0 0 0 #182D54}
.bt-reply .ch-form button[type=submit]:disabled{opacity:.6;cursor:default}

.ch-who-goose{display:inline-flex;align-items:center;gap:4px;font-weight:700;margin-right:10px}
.ch-who-goose img.ch-goose{margin:0;height:18px;width:auto}
.ch-who-fb{font-weight:700;margin-left:10px}

.ch-members{margin:8px 0 0;padding-left:18px}
.ch-code{font-family:ui-monospace,Menlo,monospace;font-size:24px;font-weight:700;letter-spacing:4px;margin:8px 0}
.ch-logo{width:24px;height:24px;border-radius:6px;vertical-align:middle;margin-right:6px;object-fit:cover}
.ch-logo-big{width:96px;height:96px;border-radius:12px;object-fit:cover;display:block}
.ch-logo-none{display:flex;align-items:center;justify-content:center;background:#e8eefc;color:#16224a;font-weight:700;font-size:28px}
.ch-logorow{display:flex;gap:16px;align-items:flex-start;margin-top:8px}

.iw-giveprog{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0 0 10px}
.iw-meter{flex-basis:100%;height:8px;border-radius:6px;background:#E8EEFC;overflow:hidden}
.iw-meter span{display:block;height:100%;background:#2A5BD7;border-radius:6px}
.iw-newline{margin:6px 0 10px}
.iw-new{border-radius:10px;background:#E8F8EE;padding:6px}
.iw-newtag{display:inline-block;margin-bottom:4px;padding:1px 10px;border-radius:999px;background:#2BB673;color:#fff;font-size:12px;font-weight:700}

.ch-season{margin-top:14px}
.ch-season>summary{cursor:pointer;font-weight:700;margin-bottom:8px}

.cal-add{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 14px 8px}
.cal-add a.btn{text-decoration:none;min-height:34px;display:inline-flex;align-items:center}

.bt-good{margin:8px 0 14px}
.bt-good>summary{cursor:pointer;font-weight:700;margin-bottom:8px}
.bt-good .btn{margin-top:8px}

.iw-fishfly{position:fixed;z-index:9999;width:34px;height:34px;pointer-events:none;opacity:1;transition:transform .9s cubic-bezier(.2,.7,.3,1),opacity .9s ease-in}
.iw-fishfly svg{width:100%;height:100%;display:block}
.iw-pop{animation:iw-pop .35s ease-out}
@keyframes iw-pop{0%{transform:scale(1)}50%{transform:scale(1.35)}100%{transform:scale(1)}}
.iw-fishnews{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:10px 14px;border-radius:12px;background:#E8EEFC;color:#16224a}
.iw-fishnews>div{flex:1}
.iw-fishnews p{margin:2px 0 0}
.iw-fishnews-seal{width:56px;height:56px;flex:none;transform:scaleX(-1)}
.iw-fishnews-seal svg{width:100%;height:100%;display:block}
@media (prefers-reduced-motion:reduce){.iw-pop{animation:none}}

.iw-givetitle{margin:0 0 4px;font-size:22px;line-height:1.25;color:var(--navy)}
.iw-givesub{margin:0 0 6px;max-width:560px;line-height:1.45}
.iw-giveprog-line{margin:0;flex-basis:100%}

.iw-fishbtn{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid #C9D6F5;background:#fff;color:#16224a;font-weight:700}
.iw-fishbtn svg.fish{width:34px;height:20px}
.iw-fishbtn:hover:not(:disabled){background:#E8EEFC}
.iw-fishbtn.on{background:#E8F8EE;border-color:#9ADBB5}
.iw-fishlabel{font-size:14px}
.iw-fishhow{margin:0 0 14px;padding:14px 16px;border-radius:12px;background:#FFF4C7;color:#16224a}
.iw-fishhow h3{margin:0 0 6px;font-size:18px}
.iw-fishhow ol{margin:0 0 10px;padding-left:22px;line-height:1.5}
.iw-celebrate{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden}
.iw-cfish{position:fixed;width:34px;height:34px}
.iw-cfish svg{width:100%;height:100%;display:block}
.iw-confetti{position:fixed;width:9px;height:14px;border-radius:2px}
.iw-plus{position:fixed;font-size:46px;font-weight:800;color:#16224a;text-shadow:0 2px 0 #fff,0 0 14px #FFE066}

/* The Idea Wall as a chat (apps/bintests.js). The idea's team and other people on the left in grey, the viewer on the right in blue, the seal in lavender. */
.iw-chatbox{max-width:620px;margin:0 auto 16px;padding:14px 16px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.iw-givewrap{max-width:620px;margin:0 auto}
.iw-thead{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.iw-thead b{display:block;font-size:16px}
.iw-thead small{display:block}
.iw-tlogo{width:38px;height:38px;border-radius:10px;background:#DDE7F7;color:var(--navy);display:flex;align-items:center;justify-content:center;font-weight:700;overflow:hidden;flex:none}
.iw-tlogo img{width:100%;height:100%;object-fit:cover;display:block}
.iw-chat{display:flex;flex-direction:column;gap:6px}
.iw-brow{display:flex;align-items:flex-end;gap:8px;animation:iw-bin .22s ease-out}
.iw-brow.me{justify-content:flex-end}
.iw-bcol{display:flex;flex-direction:column;max-width:78%}
.iw-brow.me .iw-bcol{align-items:flex-end}
.iw-bwho{margin:6px 0 2px 6px;font-size:11px;color:var(--text2)}
.iw-bub{padding:8px 13px;border-radius:18px;font-size:15px;line-height:1.4;overflow-wrap:anywhere;color:#1c1c1e}
.iw-bub p{margin:0}
.iw-bub.them{background:#E5E5EA;border-bottom-left-radius:5px}
.iw-bub.me{background:#2F7BF5;color:#fff;border-bottom-right-radius:5px}
.iw-bub.seal{background:#E8DFF7;color:#2B1B52;border-bottom-left-radius:5px}
.iw-bcap{display:block;margin-bottom:1px;font-size:12px;letter-spacing:.02em;opacity:.8}
.iw-bq{display:block;margin-bottom:2px;font-size:12px;font-style:italic;opacity:.75}
.iw-sealav{width:34px;height:34px;border-radius:50%;background:#CFE3FA;display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden}
.iw-sealav svg{width:26px;height:26px;display:block;animation:none}
.iw-qfish svg.fish{width:26px;height:16px;vertical-align:-3px}
.iw-newtag{align-self:center;margin:6px 0 0;padding:1px 8px;border-radius:10px;background:#2F7BF5;color:#fff;font-size:11px;font-weight:700}
.iw-chatin{display:flex;gap:8px;align-items:flex-end;margin-top:10px}
.iw-chatin textarea{flex:1;border-radius:18px;padding:8px 14px}
.iw-chatin[hidden]{display:none}
.iw-chaterr{min-height:16px;margin:4px 0 0;font-size:13px;color:#B3261E}
.iw-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px 42px}
.iw-chipslot{margin:0}
.iw-chip{padding:5px 12px;border:1px solid var(--line2);border-radius:16px;background:#fff;color:var(--navy);font-size:14px;cursor:pointer}
.iw-chip:hover:not(:disabled){background:var(--hover)}
.iw-chip.primary{background:var(--navy);border-color:var(--navy);color:#fff}
.iw-chipslot .iw-chatin{margin-left:42px}
.iw-chips .iw-fishbtn{margin:0;padding:3px 10px;border-radius:16px;background:#fff;border:1px solid var(--line2)}
.iw-chips .iw-fishbtn svg.fish{width:30px;height:18px;filter:none;opacity:1}
.iw-chipnote{margin:2px 0 0 42px;font-size:12px;color:var(--text2)}
.iw-dots{display:inline-flex;gap:4px;padding:4px 2px}
.iw-dots i{width:7px;height:7px;border-radius:50%;background:#8E8E93;animation:iw-dot 1s infinite ease-in-out}
.iw-dots i:nth-child(2){animation-delay:.15s}.iw-dots i:nth-child(3){animation-delay:.3s}
.iw-givefoot{max-width:620px;margin:0 auto 16px}
.iw-givefoot .iw-chips{margin-left:0}
@keyframes iw-bin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes iw-dot{0%,80%,100%{opacity:.3}40%{opacity:1}}
@media (prefers-reduced-motion:reduce){.iw-brow{animation:none}.iw-dots i{animation:none}}

/* The Wall: one calm card for each idea */
.iw-icard{display:flex;flex-direction:column;gap:6px;text-align:left;width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--text);font:inherit;cursor:pointer}
.iw-icard:hover{border-color:var(--navy2);background:#FBFCFE}
.iw-iline{margin:0;line-height:1.4}
.iw-iline small{display:block;font-size:12px;color:var(--text2)}
.iw-ifoot{display:flex;align-items:center;gap:8px;margin-top:4px}
.iw-igo{margin-left:auto;font-weight:700;color:var(--navy2);font-size:14px}
.iw-fishline{max-width:620px;margin:0 auto 8px;font-size:14px;color:var(--text2)}
.ch-page>.iw-newline{max-width:620px;margin-left:auto;margin-right:auto}
.iw-chips.flush{margin-left:0}
.iw-chipslot>.iw-chipnote{margin-left:0}

/* Scoreboard: the column titles stay at the top while the team list scrolls. Seal points and fish points. */
.ch-lb-head{position:sticky;top:-16px;z-index:3;padding:14px 12px 8px;background:var(--page);box-shadow:0 1px 0 var(--line)}
.sb-sealic{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#CFE3FA;overflow:hidden;flex:none;vertical-align:middle}
.sb-sealic svg{width:20px;height:20px;display:block;animation:none}
.sealtag .sb-sealic{width:22px;height:22px;margin-left:4px}
.sealtag .sb-sealic svg{width:17px;height:17px}
.ch-lb-head .sb-sealic{width:28px;height:28px}
.ch-lb-head .sb-sealic svg{width:22px;height:22px}
.sb-rule-head{display:flex;align-items:center;gap:8px;margin:14px 0 2px;font-size:16px;color:var(--navy)}
.sb-rule-head img.ch-goose{width:auto;height:20px;margin:0;vertical-align:middle}
.sb-rule-head .ch-icon svg.fish{width:30px;height:18px;vertical-align:middle}
.ch-scoring b.sb-rule-head{margin-top:8px;font-size:14px}
.sb-rule-row{display:flex;align-items:center;gap:12px}
.sb-rule-text{flex:1;min-width:0}
.sb-rule-link{flex:none;margin:2px 0 6px}
.sb-survey{margin:2px 0 8px;font-size:14px}
.ch-who .fishtag{display:inline-flex;align-items:center;gap:5px;margin-left:10px;font-weight:700}
.ch-who .fishtag svg.fish{width:26px;height:16px}
.ch-lb-head{top:-17px;border-radius:0}
.sb-sealic,.sealtag .sb-sealic,.ch-lb-head .sb-sealic{background:none;border-radius:0;overflow:visible;width:auto;height:auto}
.sb-sealic svg{width:30px;height:30px}
.ch-lb-head .sb-sealic svg{width:33px;height:33px}

/* Idea Wall, livelier: each idea keeps one color (--ic), the Wall is one feed with filter chips, and For your team has a fish banner. */
.iw-filters{display:flex;flex-wrap:wrap;gap:8px;padding:12px 6px 0}
.iw-fchip{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border:2px solid var(--navy);border-radius:999px;background:#fff;color:var(--navy);font:inherit;font-weight:700;font-size:14px;cursor:pointer;transition:transform .12s,box-shadow .12s}
.iw-fchip em{font-style:normal;min-width:20px;padding:0 6px;border-radius:999px;background:#EEF3FF;font-size:12px;text-align:center}
.iw-fchip:hover{transform:translateY(-2px);box-shadow:0 3px 0 var(--navy)}
.iw-fchip.on{background:var(--navy);color:#fff;box-shadow:0 3px 0 #07BE61}
.iw-fchip.on em{background:#07BE61;color:#fff}
.iw-allgiven{margin:10px 6px 0;padding:8px 14px;border-radius:12px;background:#F1FBF5;border:1px dashed #07BE61;color:var(--navy);font-weight:600}
.iw-icard{border:2px solid var(--navy);border-top-width:10px;border-top-color:var(--ic,#BFE8FF);border-radius:16px;box-shadow:0 4px 0 rgba(24,45,84,.14);transform:rotate(var(--tilt,0deg));transition:transform .15s,box-shadow .15s}
.iw-icard:hover{background:#fff;border-color:var(--navy);border-top-color:var(--ic,#BFE8FF);transform:translateY(-4px) rotate(0deg);box-shadow:0 9px 0 rgba(24,45,84,.16)}
.iw-icard .iw-tlogo{background:var(--ic,#DDE7F7)}
.iw-igo{font-weight:700;color:var(--navy2)}
.bt-tag.done{background:#E3F6EA;color:#1B6B3E}
.iw-chatbox{border:2px solid var(--navy);border-top-width:10px;border-top-color:var(--ic,#BFE8FF);border-radius:18px;box-shadow:0 5px 0 rgba(24,45,84,.12)}
.iw-chatbox .iw-tlogo{background:var(--ic,#DDE7F7)}
.iw-fishban{display:flex;align-items:center;gap:14px;max-width:620px;margin:6px auto 14px;padding:12px 16px;border-radius:18px;background:linear-gradient(135deg,#DDF1FF,#EDE6FB);border:2px solid var(--navy)}
.iw-fishban b{display:block;font-size:16px;color:var(--navy)}
.iw-fishban small{display:block;margin-top:2px;color:var(--text2);font-size:13px}
.iw-pool{display:flex;flex-wrap:wrap;gap:4px;max-width:96px;flex:none}
.iw-poolfish svg.fish{width:30px;height:18px;display:block}
.iw-poolfish:not(.used){animation:iwswim 2.4s ease-in-out infinite}
.iw-poolfish:nth-child(2){animation-delay:.4s}.iw-poolfish:nth-child(3){animation-delay:.8s}
.iw-poolfish.used{opacity:.25;filter:grayscale(1)}
@keyframes iwswim{0%,100%{transform:translateX(0) rotate(0)}50%{transform:translateX(4px) rotate(-5deg)}}
@media (prefers-reduced-motion:reduce){.iw-poolfish:not(.used){animation:none}.iw-icard,.iw-fchip{transition:none}}

/* Message in a bottle: feedback reaches the idea's team closed, and the writer follows it from Sent to Put to use. */
.iw-bottlebtn{display:inline-flex;align-items:center;gap:12px;padding:8px 18px 8px 12px;border:2px solid var(--navy);border-radius:16px;background:#EAF6FC;color:var(--navy);font:inherit;font-weight:700;cursor:pointer;box-shadow:0 3px 0 rgba(24,45,84,.18)}
.iw-bottlebtn:hover:not(:disabled){background:#fff;transform:translateY(-2px)}
.iw-bottleico{display:block;animation:iwbob 2.4s ease-in-out infinite}
.iw-bottleico svg{display:block;width:30px;height:42px}
@keyframes iwbob{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-4px) rotate(5deg)}}
.iw-popin{animation:iwpopin .5s ease-out}
@keyframes iwpopin{0%{transform:scale(.85);opacity:0}60%{transform:scale(1.04);opacity:1}100%{transform:scale(1)}}
.iw-linkbtn{display:block;margin:8px 0 0;padding:0;border:0;background:none;font:inherit;font-size:13px;color:var(--text2);text-decoration:underline;cursor:pointer}
.iw-track{display:flex;align-items:center;gap:6px;margin:4px 0 10px;font-size:13px;color:var(--text2)}
.iw-trackstep{display:inline-flex;align-items:center;gap:6px}
.iw-trackstep i{width:10px;height:10px;border-radius:50%;background:#C9D2E3;display:block}
.iw-trackstep.on i{background:#07BE61}
.iw-trackstep.on{color:var(--navy);font-weight:700}
.iw-trackline{flex:1;height:2px;background:#DDE3EE;min-width:16px}
.iw-trackline.on{background:#07BE61}
.iw-revise{margin:6px 0 0;padding:10px 12px;border-radius:12px;background:#FFF8DA;border:1px solid #F0D772}
.iw-revlab{display:block;margin:0 0 8px;font-size:13px;font-weight:700;color:var(--navy)}
.iw-revlab textarea{display:block;width:100%;margin-top:3px;font-weight:400;box-sizing:border-box}
.iw-waiting{box-sizing:border-box;max-width:620px;margin:0 auto 12px;padding:8px 14px;border-radius:12px;background:#EAF6FC;border:1px dashed var(--navy2);font-weight:600;color:var(--navy)}
.iw-learn{box-sizing:border-box;max-width:620px;margin:0 auto 14px;padding:12px 16px;border-radius:16px;background:#F1FBF5;border:2px solid #07BE61}
.iw-learnrow{margin-top:8px}
.iw-learnrow p{margin:4px 0 0;font-size:14px}
@media (prefers-reduced-motion:reduce){.iw-bottleico,.iw-popin{animation:none}}

/* "I have this problem too", "Helpful", and the shelf of feedback worth copying. */
.iw-metoo{display:flex;align-items:center;gap:8px;margin:8px 0 0;font-size:13px}
.iw-cell .iw-metoo{margin:0;justify-content:center}
.iw-mebtn,.iw-helpbtn{padding:4px 12px;border:1.5px solid var(--navy);border-radius:999px;background:#fff;color:var(--navy);font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:transform .12s}
.iw-mebtn:hover:not(:disabled),.iw-helpbtn:hover:not(:disabled){transform:translateY(-1px);background:#EEF3FF}
.iw-mebtn.on,.iw-helpbtn.on{background:#07BE61;border-color:#07BE61;color:#fff}
.iw-metoo-n{color:var(--text2);font-weight:600}
.iw-helpbtn{margin-top:8px}
.iw-shelf{max-width:620px;margin:12px auto 0;padding:10px 14px;border-radius:14px;background:#FFF8DA;border:2px solid #F0D772}
.iw-shelf summary{cursor:pointer;font-weight:700;color:var(--navy)}
.iw-shelfitem{margin-top:10px;padding-top:10px;border-top:1px dashed #E0C85A}
.iw-shelfq{margin:6px 0 0;font-size:12px;font-style:italic;color:var(--text2)}
.iw-shelfa{margin:2px 0 0;font-size:14px}

/* Iterations: a team updates its idea, and the Wall keeps the story of what changed. */
.iw-iter{margin:6px 0 0}
.iw-iterrow{margin:8px 0 0;padding:8px 12px;border-radius:12px;background:#F4F7FD;border:1px solid #DDE6F6}
.iw-change small{display:block;margin-top:6px}
.iw-was{margin:2px 0 0;font-size:14px;color:var(--text2);text-decoration:line-through}
.iw-now{margin:2px 0 0;font-size:14px}
.iw-iterfb{margin-top:8px;font-size:13px}
.iw-iterfb summary{cursor:pointer;color:var(--navy);font-weight:700}
.iw-itertag{display:inline-block;margin:6px 0 0;padding:1px 10px;border-radius:999px;background:#EEF3FF;color:var(--navy);font-size:11px;font-weight:700}
.iw-iterform{margin:10px 0 0;padding:12px 14px;border-radius:14px;background:#F1FBF5;border:2px solid #07BE61}
.iw-pickrow{display:flex;gap:8px;align-items:flex-start;margin:6px 0;font-size:14px}
.iw-pickrow input{margin-top:3px}

/* Quieter screens: one slim bar on For your team, What we learned folded away, and plain links for the small actions. */
.iw-fishban.slim{padding:6px 14px;gap:10px;border-radius:999px;margin:6px auto 12px;width:fit-content;max-width:100%}
.iw-fishban.slim b{display:block;font-size:14px}
.iw-fishban.slim .iw-pool{max-width:none;flex-wrap:nowrap;gap:2px}
.iw-fishban.slim .iw-poolfish svg.fish{width:24px;height:14px}
.iw-learn summary{cursor:pointer;font-weight:700;color:var(--navy)}
.iw-learn[open] summary{margin-bottom:6px}
.iw-chipslot>.iw-linkbtn{margin-top:4px}
.iw-ownstat{font-size:12px;font-weight:700;color:var(--text2)}

/* Your next step: one card, one button. */
.iw-next{max-width:620px;margin:14px auto 10px;padding:18px 22px;border-radius:18px;background:#fff;border:2px solid var(--navy);border-top-width:10px;border-top-color:#07BE61;box-shadow:0 5px 0 rgba(24,45,84,.12)}
.iw-next h3{margin:2px 0 6px;font-size:20px;color:var(--navy)}
.iw-next p{margin:0 0 12px;color:var(--text2)}
.iw-nextcount{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#07BE61}
.iw-nextlater{max-width:620px;margin:0 auto 8px;font-size:14px;color:var(--text2)}
.iw-goodnews{max-width:620px;margin:10px auto;font-size:14px;color:var(--navy);font-weight:600}
.iw-goodnews .iw-linkbtn{display:inline;margin:0 0 0 4px}

/* Refine Test: one calm card for each idea, and an update that asks one thing at a time. */
.iw-refinecard{max-width:620px;margin:12px auto}
.iw-refinecard p{margin:2px 0 8px}
.iw-steptitle{display:block;margin:2px 0 8px;font-size:17px;color:var(--navy)}
.iw-iterform .iw-nextcount{display:block}

/* Phones: the leaderboard has six columns and about 337px to put them in. Shrink the gaps, the
   numbers and the column icons so every column stays on screen, including the total the ranking
   is by, instead of letting the rows run off the side. */
@media (max-width:760px){
  .ch-lb-row{grid-template-columns:24px minmax(0,1fr) repeat(4,34px);gap:6px;padding:10px 8px}
  .ch-lb-head{padding:14px 8px 8px}
  .ch-lb-num{font-size:13px}
  .ch-lb-team{min-width:0}
  .ch-lb-team b{gap:4px;overflow-wrap:anywhere}
  .ch-lb-head img.ch-goose{height:16px}
  .ch-lb-head svg.fish{width:20px;height:12px}
  .ch-lb-head .sb-sealic svg{width:22px;height:22px}
}

.sb-soon{flex:none;width:150px;margin:0}
.sb-soon svg{width:100%;height:auto;display:block;animation:none}

.ch-logoside{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.ch-logoside p{margin:0}
/* The To do tab as a sticker board: ink outlines, chunky bottom and right edges, a yellow note for the checklist. */
.ch-page.sticker .ch-card{border:2px solid #182D54;border-bottom-width:4px;border-right-width:4px;border-radius:6px}
.ch-card.ch-sticky{position:relative;background:#FFF1A8;transform:rotate(-.6deg);margin-top:4px}
.ch-sticky > b{font-family:'Fredoka',sans-serif;font-size:19px;font-weight:500}
.ch-sticky > .ch-sticky-title{display:flex;align-items:center;gap:10px;margin:-12px -14px 2px;padding:8px 14px;background:#182D54;color:#fff;border-radius:4px 4px 0 0}
.ch-sticky-seal{flex:none;width:44px;line-height:0;align-self:flex-end;margin-bottom:-8px}
.ch-sticky > .ch-sticky-sub{font-family:'Patrick Hand',cursive;font-size:18px;line-height:1.3;color:#182D54;margin:4px 0 2px}
.ch-sticky .ch-checktext{font-family:'Patrick Hand',cursive;font-size:18px;line-height:1.3}
.ch-sticky .ch-check li{border-top:1px dashed rgba(24,45,84,.3)}
.ch-sticky .ch-tick,.ch-sticky input[type=checkbox]{-webkit-appearance:none;appearance:none;flex:none;width:22px;height:22px;margin:0;border-radius:50%;border:2px solid #182D54;background:#fff;color:#fff;font-size:14px;line-height:18px;text-align:center}
.ch-sticky li.done .ch-tick{background:#07BE61;border-color:#182D54}
.ch-sticky input[type=checkbox]:checked{background:#07BE61 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.500L8.500 14L15 6.500' fill='none' stroke='white' stroke-width='2.600' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat}
.ch-trail{position:relative;flex:none;background:#E3F4EA;border:2px solid #182D54;border-bottom-width:4px;border-right-width:4px;border-radius:6px;overflow:hidden}
.ch-trail > svg{display:block;width:100%;height:auto}
.ch-trail-seal{position:absolute;width:6%;line-height:0}
.ch-trail-seal svg{width:100%;height:auto;display:block;animation:none}
.ch-trail-say{position:absolute;box-sizing:border-box;background:#fff;border:2px solid #182D54;border-radius:10px;padding:3px 8px;font:16px/1.15 'Patrick Hand',cursive;color:#182D54;text-align:center}
.ch-trail-say::before,.ch-trail-say::after{content:'';position:absolute;border:solid transparent}
.ch-trail-say.up::before{top:100%;left:calc(var(--tail) - 9px);border-width:9px 9px 0;border-top-color:#182D54;margin-top:0}
.ch-trail-say.up::after{top:100%;left:calc(var(--tail) - 6px);border-width:7px 6px 0;border-top-color:#fff;margin-top:-2px}
.ch-trail-say.down::before{bottom:100%;left:calc(var(--tail) - 9px);border-width:0 9px 9px;border-bottom-color:#182D54}
.ch-trail-say.down::after{bottom:100%;left:calc(var(--tail) - 6px);border-width:0 6px 7px;border-bottom-color:#fff;margin-bottom:-2px}
.ch-top{position:relative}
.ch-top .ch-q{padding-right:72px}
.ch-top-peek{position:absolute;right:18px;bottom:0;width:58px;line-height:0;transform:scaleX(-1)}

/* The GEC Board as a sticker chat: ink outlines, round avatars, and a green header like the Board's icon. */
.msg-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 16px;background:#34B26A;color:#182D54}   /* the green of the Board's icon */
.msg-head .msg-back{color:#182D54}
.msg-headtext{display:flex;flex-direction:column;min-width:0}
.msg-kicker{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:#182D54}
.msg-name{font-size:17px;line-height:1.25;font-weight:700;color:#fff}   /* the same type as the Scoreboard and Challenge title boxes */
.msg-head .msg-sub{color:#182D54}
.msg-sub:empty{display:none}
.msg-seal:empty{display:none}
.msg-seal{margin-left:auto}
.msg-seal svg{height:84px;width:auto;display:block;animation:none}   /* bigger, and still: the seal drawing rocks by default */
.msg-av{border:2px solid #182D54;font-family:'Fredoka',sans-serif;font-weight:500}
.msg-who{font:14px 'Patrick Hand',cursive}
.msg-time{font:14px 'Patrick Hand',cursive}
.msg-bubble{padding:6px 14px;border:2px solid #182D54;background:#fff;color:#182D54;font:18px/1.25 'Patrick Hand',cursive}
.msg-line.mine .msg-bubble{background:#182D54;color:#fff}
.msg-line.pending .msg-bubble{border-style:dashed}
.msg-note{font:14px 'Patrick Hand',cursive}
.msg-act{font:14px 'Patrick Hand',cursive}
.msg-new textarea{border:2px solid #182D54;border-bottom-width:3px;font:17px/1.3 'Patrick Hand',cursive;color:#182D54}
.msg-send{background:#07BE61;border:2px solid #182D54;color:#182D54}
.msg-card{border:2px solid #182D54;border-bottom-width:4px;border-right-width:4px;border-radius:6px}
.msg-how{border-color:#182D54}

/* Calendar notes that open something */
.cal-stick.a{transform:rotate(-.7deg)}
.cal-stick.b{transform:rotate(.5deg)}
button.cal-stick{width:100%;text-align:left;font:inherit;cursor:pointer}
button.cal-stick:hover{filter:brightness(1.07)}
.cal-stick-open{font:500 14px 'Fredoka',sans-serif;text-decoration:underline;margin-top:2px}

/* The yellow 0 on the trail, when it takes you to the checklist */
.ch-trail-link{cursor:pointer;outline:none}
.ch-trail-link:hover circle,.ch-trail-link:focus circle{stroke-width:5}

/* Scoreboard Rules tab: a goal card with the ribbon, then one sticker card for each place points come from */
.sb-goal{flex:none;display:flex;align-items:flex-start;gap:14px;padding:0 4px}
.sb-ribbon{flex:none;width:110px;line-height:0;margin:-6px -4px 0 auto;transform:rotate(14deg)}
.sb-ribbon svg{width:100%;height:auto;display:block}
.sb-goal-text{flex:1;min-width:0}
.sb-goal-text b{display:block;font:500 24px/1.15 'Fredoka',sans-serif;color:#182D54}
.sb-goal-text p{margin:6px 0 0}
.sb-src{flex:none;padding-top:0;overflow:hidden}
.sb-src > .sb-rule-head{margin:0 -14px 8px;padding:8px 14px;border-bottom:2px solid #182D54;font:500 19px 'Fredoka',sans-serif}
.sb-src-goose > .sb-rule-head{background:#CFE3FA}
.sb-src-seal > .sb-rule-head{background:#C8F0D6}
.sb-src-fish > .sb-rule-head{background:#FFF1A8}
.sb-sub{margin-top:8px;padding-top:2px}

/* Mail: a blue band across the top, the blue of the Mail icon, with the seal carrying a stamped envelope. Nothing else in Mail changes. */
.mx-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 16px;min-height:56px;background:#3A7BD5;color:#fff}
.mx-headtext{display:flex;flex-direction:column;min-width:0}
.mx-kicker{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:#182D54}
.mx-name{font-size:17px;line-height:1.25;font-weight:700;color:#fff}   /* the same type as the Board, Scoreboard and Challenge title boxes */
.mx-headseal{line-height:0}
.mx-headseal svg{height:64px;width:auto;display:block;animation:none}

/* Rules tab: a small seal drawing at the left of each rule, and the Goosechase places on their own lines */
.sb-lead{flex:none;width:84px;line-height:0}
.sb-lead svg{width:100%;height:auto;display:block;animation:none}
.sb-rule-text p{white-space:pre-line}
.sb-rule-text > .sb-rule-head{margin:0 0 2px;font-size:14px}

/* ---- the reveal: the seal brings the time capsule to the beach, it opens, and a letter from the future unrolls (js/reveal.js) ----
   It plays full screen after the welcome survey. The scene is drawn on a 640 by 300 stage and scaled to fit (--rv-s). 22 seconds. */
.rv{position:fixed;left:0;top:0;right:0;bottom:0;z-index:6550;overflow:hidden;background:linear-gradient(#CFE8F7 50%,#F2E3B8 50%)}
.rv-scene{position:absolute;left:50%;top:50%;width:640px;height:300px;margin:-150px 0 0 -320px;overflow:hidden;background:#CFE8F7;transform:scale(var(--rv-s,1))}
.rv-scene > *,.rv-cam > *{position:absolute}
.rv-cam{left:0;top:0;right:0;bottom:0;transform-origin:0 0;animation:rv-cam 20.4s ease-in-out forwards}
.rv-sea{left:0;right:-300px;top:90px;height:118px;background:#4A97C8;border-top:2px solid #182D54}
.rv-layer{left:0;top:0;right:-300px;bottom:0;z-index:0;pointer-events:none}
.rv-layer svg{width:100%;height:100%;display:block}
.rv-cap{left:470px;top:166px;width:150px;z-index:5;transform-origin:50% 90%;animation:rv-capwobble 20.4s linear forwards}
.rv-cap svg{width:100%;height:auto;display:block;overflow:visible}
.rv-cap .cap-l{transform-box:fill-box;transform-origin:100% 50%;animation:rv-capl 20.4s ease-in-out forwards}
.rv-seal{left:0;top:0;width:120px;z-index:2;transform-origin:50% 90%;animation:rv-seal 20.4s ease-in-out forwards,rv-sealz 20.4s steps(1,end) forwards,rv-sealclip 20.4s linear forwards}
.rv-seal svg{width:100%;height:auto;display:block;animation:none}
.rv-fi{position:absolute;left:72px;top:54px;width:42px;transform:rotate(6deg);animation:rv-fi 20.4s steps(1,end) forwards}
.rv-fd{left:452px;top:180px;width:42px;z-index:6;opacity:0;animation:rv-drop 20.4s linear forwards}
.rv-fi svg,.rv-fd svg{display:block;width:100%;height:auto}
.rv-boop{left:520px;top:140px;z-index:7;font:600 18px 'Fredoka',sans-serif;color:#182D54;opacity:0;animation:rv-boop 20.4s linear forwards}
.rv-puff{width:34px;height:34px;border-radius:50%;background:#fff;border:2px solid rgba(24,45,84,.2);z-index:7;opacity:0}
.rv-light{left:341px;top:96px;width:300px;height:300px;border-radius:50%;z-index:9;background:radial-gradient(circle,#fff 0,#fff 30%,#FFF4B8 55%,rgba(255,244,184,0) 72%);opacity:0;transform:scale(.05);animation:rv-light 20.4s ease-in-out forwards}
.rv-glow{position:absolute;left:0;top:0;right:0;bottom:0;z-index:2;opacity:0;background:radial-gradient(ellipse at 50% 50%,#fff 0,#FFF8D6 55%,#FFE9A0 100%);animation:rv-glow 20.4s ease-out forwards}
.rv-paper{position:absolute;left:0;top:0;right:0;bottom:70px;z-index:3;display:flex;align-items:center;justify-content:center;opacity:0;animation:rv-paper 20.4s ease-out forwards}
.rv-sq{--sz:min(100vw,calc(100vh - 70px));position:relative;width:var(--sz);height:var(--sz)}
.rv-sq > svg{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.rv-sheet{animation:rv-sheet 20.4s ease-out forwards}
.rv-rt{animation:rv-rt 20.4s ease-out forwards}
.rv-rb{animation:rv-rb 20.4s ease-out forwards}
.rv-letter{position:absolute;left:18%;width:64%;top:20%;height:62%;overflow-y:auto;box-sizing:border-box;padding:0 2px;font:500 clamp(13px,calc(var(--sz) * .031),38px)/1.33 'Fredoka',sans-serif;color:#000;opacity:0;animation:rv-letter 20.4s ease-out forwards}
.rv-letter p{margin:0 0 .7em}
.rv-letter p:last-child{margin-bottom:0}
.rv-letter .rv-q{font-weight:700;font-size:1.25em;line-height:1.18;text-transform:uppercase;margin:.2em 0 .8em}
.rv-skip,.rv-go{position:absolute;z-index:10;font:500 16px 'Fredoka',sans-serif;color:#182D54;background:#fff;border:2px solid #182D54;border-bottom-width:4px;border-right-width:4px;border-radius:10px;padding:6px 16px;cursor:pointer}
.rv-skip{right:16px;top:16px;font-size:14px;padding:4px 12px}
.rv-go{left:50%;bottom:14px;transform:translateX(-50%);opacity:0;pointer-events:none;background:#FFD91A;animation:rv-go 20.4s linear forwards}
.rv.done .rv-go{opacity:1;pointer-events:auto}
@keyframes rv-cam{0%{transform:translate(0px,0px) scale(1)}34.32%{transform:translate(0px,0px) scale(1)}39.21%{transform:translate(-547px,-181.5px) scale(1.7)}52.94%{transform:translate(-547px,-181.5px) scale(1.7)}58.82%{transform:translate(-1097px,-409px) scale(2.6)}100%{transform:translate(-1097px,-409px) scale(2.6)}}
@keyframes rv-sealz{0%{z-index:2}24.51%{z-index:4}}
@keyframes rv-sealclip{0%{clip-path:inset(-20px -20px 39px -20px)}3.93%{clip-path:inset(-20px -20px 47px -20px)}7.84%{clip-path:inset(-20px -20px 37px -20px)}11.77%{clip-path:inset(-20px -20px 45px -20px)}15.69%{clip-path:inset(-20px -20px 37px -20px)}22.74%{clip-path:inset(-20px -20px 41px -20px)}25.1%,100%{clip-path:inset(-20px -20px 0 -20px)}}
@keyframes rv-seal{0%{transform:translate(30px,52px) rotate(0deg) scale(1,1)}3.93%{transform:translate(30px,60px) rotate(2deg) scale(1,1)}7.84%{transform:translate(30px,50px) rotate(-2deg) scale(1,1)}11.77%{transform:translate(30px,58px) rotate(1deg) scale(1,1)}15.69%{transform:translate(30px,50px) rotate(-1deg) scale(1,1)}22.74%{transform:translate(210px,54px) rotate(1deg) scale(1,1)}25.1%{transform:translate(262px,84px) rotate(-6deg) scale(1,1)}27.06%{transform:translate(292px,96px) rotate(-12deg) scale(1,1.06)}29.02%{transform:translate(320px,128px) rotate(5deg) scale(1.1,0.9)}30.98%{transform:translate(334px,112px) rotate(-10deg) scale(0.97,1.05)}33.33%{transform:translate(364px,132px) rotate(4deg) scale(1.1,0.9)}35.69%{transform:translate(376px,116px) rotate(-8deg) scale(1,1)}39.21%{transform:translate(380px,126px) rotate(0deg) scale(1,1)}41.17%{transform:translate(380px,126px) rotate(7deg) scale(1,1)}43.62%{transform:translate(380px,126px) rotate(0deg) scale(1,1)}45.59%{transform:translate(380px,126px) rotate(0deg) scale(1,1)}46.81%{transform:translate(404px,132px) rotate(16deg) scale(1,1)}48.28%{transform:translate(380px,126px) rotate(0deg) scale(1,1)}49.51%{transform:translate(380px,126px) rotate(0deg) scale(1,1)}50.74%{transform:translate(404px,132px) rotate(16deg) scale(1,1)}52.21%{transform:translate(380px,126px) rotate(0deg) scale(1,1)}100%{transform:translate(380px,126px) rotate(0deg) scale(1,1)}}
@keyframes rv-fi{0%{opacity:1}41.17%{opacity:0}}
@keyframes rv-drop{0%,41.13%{opacity:0;transform:none}41.17%{opacity:1;transform:rotate(6deg)}43.39%{opacity:1;transform:translateY(52px) rotate(28deg)}44.12%{transform:translateY(46px) rotate(22deg)}44.85%{opacity:1;transform:translateY(52px) rotate(26deg)}100%{opacity:1;transform:translateY(52px) rotate(26deg)}}
@keyframes rv-boop{0%,46.57%{opacity:0}47.06%{opacity:1}48.78%{opacity:0}50.49%{opacity:0}50.98%{opacity:1}52.94%,100%{opacity:0}}
@keyframes rv-capwobble{0%,46.57%{transform:rotate(0)}47.16%{transform:rotate(2.5deg)}48.28%{transform:rotate(0)}50.49%{transform:rotate(0)}51.07%{transform:rotate(2.5deg)}52.21%,100%{transform:rotate(0)}}
@keyframes rv-capl{0%,59.81%{transform:translateX(0) scaleY(1) rotate(0)}60.79%{transform:translateX(-3px) scaleY(0.88)}61.77%{transform:translateX(-3px) scaleY(1)}63.24%{transform:translateX(-8px) scaleY(0.88)}64.22%{transform:translateX(-8px) scaleY(1)}65.68%{transform:translateX(-13px) scaleY(0.88)}66.67%{transform:translateX(-13px) scaleY(1)}68.13%{transform:translateX(-19px) scaleY(0.88)}69.11%{transform:translateX(-19px) scaleY(1)}73.04%{transform:translateX(-90px) scaleY(1) rotate(-28deg)}100%{transform:translateX(-90px) scaleY(1) rotate(-28deg)}}
@keyframes rv-puff{0%{opacity:0;transform:translate(0,0) scale(.3)}25%{opacity:.9}100%{opacity:0;transform:translate(var(--dx),-70px) scale(1.5)}}
@keyframes rv-light{0%,70.1%{opacity:0;transform:scale(.05)}72.06%{opacity:.9;transform:scale(.14)}75.49%{opacity:1;transform:scale(.4)}79.41%{opacity:1;transform:scale(1.6)}83.82%{opacity:1;transform:scale(1.6)}86.77%{opacity:0;transform:scale(1.6)}100%{opacity:0}}
@keyframes rv-glow{0%,79.9%{opacity:0}81.86%,100%{opacity:1}}
@keyframes rv-paper{0%,80.39%{opacity:0}81.38%,100%{opacity:1}}
@keyframes rv-sheet{0%,80.88%{y:140px;height:0px}93.14%,100%{y:36px;height:228px}}
@keyframes rv-rt{0%,80.88%{transform:translateY(112px)}93.14%,100%{transform:translateY(0)}}
@keyframes rv-rb{0%,80.88%{transform:translateY(-112px)}93.14%,100%{transform:translateY(0)}}
@keyframes rv-letter{0%,92.65%{opacity:0}96.57%,100%{opacity:1}}
@keyframes rv-go{0%,96.07%{opacity:0;pointer-events:none}98.53%,100%{opacity:1;pointer-events:auto}}
@media (prefers-reduced-motion:reduce){.rv *{animation-duration:.01s!important;animation-delay:0s!important}}
.rv-card{width:100%;margin:0 auto}
.rv-card .rv-sq{--sz:min(94vw,520px);margin:0 auto}
.rv-card .rv-letter.rv-static{animation:none;opacity:1}
.rv-snd{right:auto;left:16px}

/* the first sign-in preview (js/firstrun.js) */
.fr-label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600;color:var(--navy)}
.fr-go{background:var(--navy);border-color:var(--navy);color:#fff;margin-top:14px}
.fr-go:hover{background:var(--navy);filter:brightness(1.15)}
@media (max-width:480px){.rv-letter{top:19%;height:64%;left:17%;width:66%;font-size:11.5px;line-height:1.27}.rv-letter p{margin-bottom:.55em}.rv-letter .rv-q{font-size:1.18em}}

/* My Class: the student table (apps/myclass.js) */
.mc-table{flex:none;overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:#fff}
.mc-row{display:grid;grid-template-columns:minmax(90px,1.1fr) 70px minmax(110px,1.3fr) minmax(130px,1.5fr) 150px;gap:10px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line);min-width:600px;font-size:14px}
.mc-row:last-child{border-bottom:0}
.mc-head{font-size:12px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.03em;background:#F3F5FA}
.mc-user{display:flex;flex-direction:column;gap:2px;font-weight:600;color:var(--navy);min-width:0;overflow-wrap:anywhere}
.mc-team .field{width:100%}
.mc-act{display:flex;justify-content:flex-end;gap:6px}
.mc-teams .mc-row{grid-template-columns:minmax(140px,2fr) minmax(90px,1fr) 150px;min-width:420px}
.mc-code{font-weight:700;letter-spacing:.08em;color:var(--navy)}