/* desktop.css - how the desktop looks.
   A clean, light look: white windows, soft corners, HLV navy as the one strong color.
   The old variable names (--face, --shadow and so on) are kept so the apps keep working.
   Change the colors here and every window follows. */

:root{
  --navy:#182D54; --navy2:#284276;          /* HLV navy, and a lighter step of it */
  --page:#F6F7FA;                           /* window background */
  --card:#FFFFFF;                           /* cards, text boxes */
  --line:#E1E5EE; --line2:#D5DAE6;          /* hairlines, control outlines */
  --text:#182D54; --text2:#5A6580; --text3:#8A93A8;
  --hover:#EEF1F8;                          /* hover wash */
  --face:#FFFFFF; --hilite:#FFFFFF; --light:#F6F7FA; --shadow:#8A93A8; --dark:#182D54;   /* old names, new values */
  --teal:#182D54;
  --bar:28px;   /* the menu bar across the top */
  --dock:104px; /* room kept at the bottom for the dock */
  --ui:system-ui,-apple-system,'Segoe UI','Helvetica Neue',Roboto,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}

@font-face{font-family:'Schoolbell';font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/Schoolbell-Regular.ttf) format('truetype')}
@font-face{font-family:'League Spartan';font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/league-spartan-bold.woff2) format('woff2')}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:var(--ui);font-size:15px;line-height:1.4;color:var(--text);background:var(--navy);overflow:hidden;-webkit-text-size-adjust:100%}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,p,ul,ol{margin:0 0 10px}
h2{font-size:18px;font-weight:600}
ul,ol{padding-left:22px}
code{font-family:var(--mono);font-size:13px;background:var(--hover);padding:1px 5px;border-radius:5px}

#stage{position:fixed;left:0;top:0;right:0;bottom:0;overflow:hidden;background:var(--navy)}

/* ---- the Global Entrepreneurship Challenge wordmark in the corner ---- */
.wordmark{position:absolute;top:46px;right:22px;z-index:0;pointer-events:none;text-align:right;font-family:'League Spartan',system-ui,sans-serif;font-weight:700;line-height:1;text-transform:uppercase;color:#fff;text-shadow:0 1px 6px rgba(8,16,40,.18)}
.map-labels{position:absolute;left:0;top:0;right:0;bottom:0;z-index:0;overflow:hidden;pointer-events:none}
.map-labels span{position:absolute;white-space:nowrap;line-height:1;transform:translateY(-.8em);font-family:'Fredoka',sans-serif;font-weight:500;color:#182D54}
.wordmark b,.wordmark i{display:block;width:max-content;margin-left:auto;letter-spacing:.02em;white-space:nowrap}
.wordmark b{font-size:40px}
.wordmark i{font-style:normal;font-size:23px;color:#0745B2}

/* ---- the sign-on screen, and your name in the menu bar ---- */
.login-shade{position:fixed;left:0;top:0;right:0;bottom:0;z-index:6500;display:grid;place-items:center;padding:16px;background:rgba(24,45,84,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.login-shade[hidden]{display:none}
.login-card{width:min(360px,100%);padding:22px 22px 12px;background:var(--page);border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 50px rgba(8,16,40,.35)}
.login-brand{font-size:22px;font-weight:700;margin-bottom:10px}
.login-card .cloud-box{padding:0;overflow:visible}
.login-card .cloud-box h2{font-size:16px;font-weight:500;color:var(--text2)}
.taskbar .me{margin-right:6px}
.taskbar .me button{background:none;border:0;padding:0;margin-left:10px;color:inherit;text-decoration:underline;font-weight:500}


/* ---- surfaces ---- */
.raised{background:var(--page);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 32px rgba(8,16,40,.28)}
.sunken{background:var(--card);border:1px solid var(--line);border-radius:10px}

/* ---- buttons and text boxes ---- */
.btn{min-width:0;padding:7px 14px;background:var(--card);color:var(--text);border:1px solid var(--line2);border-radius:10px;transition:background .12s}
.btn:hover{background:var(--hover)}
.btn:active,.btn.on,.btn[type=submit]{background:var(--navy);border-color:var(--navy);color:#fff}
.btn[type=submit]:hover,.btn.on:hover{background:var(--navy2)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(24,45,84,.25)}
.btn:disabled{opacity:.5;cursor:default}
.field{width:100%;padding:9px 12px;background:var(--card);border:1px solid var(--line2);border-radius:10px}
.field:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(24,45,84,.15)}
.status{padding:4px 8px;margin-top:2px;font-size:12px;color:var(--text2)}

/* ---- the dock: app icons along the bottom, on a frosted bar ---- */
.icons{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);display:flex;flex-direction:row;gap:10px;align-items:flex-end;padding:9px 12px 11px;background:rgba(255,255,255,.34);border:1px solid rgba(255,255,255,.55);border-radius:26px;box-shadow:0 12px 36px rgba(8,16,40,.28);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);z-index:5000;max-width:calc(100% - 20px)}
.dicon{position:relative;width:auto;padding:0 0 8px;display:flex;flex-direction:column;align-items:center;background:none;border:0;border-radius:14px;transition:transform .14s cubic-bezier(.3,.7,.4,1);transform-origin:50% 100%}
.dicon .ico{width:60px;height:60px;display:grid;place-items:center;font-size:34px;line-height:1;background:var(--card);border-radius:16px;box-shadow:0 3px 10px rgba(8,16,40,.28)}
.dicon .ico svg{width:36px;height:36px}
.dicon .ico:has(svg.tile){background:none;box-shadow:none}
.dicon .ico svg.tile{width:60px;height:60px;border-radius:16px;box-shadow:0 3px 10px rgba(8,16,40,.28)}
.dicon .lbl{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:13px;padding:4px 10px;border-radius:8px;background:rgba(24,45,84,.92);color:#fff;opacity:0;pointer-events:none;transition:opacity .12s}
.dicon:hover,.dicon:focus-visible{transform:scale(1.3) translateY(-4px);z-index:2}
.dicon:has(+ .dicon:hover),.dicon:hover + .dicon{transform:scale(1.12)}
.dicon:hover .lbl,.dicon:focus-visible .lbl{opacity:1}
.dicon:focus-visible{outline:none}
.dicon::after{content:'';position:absolute;bottom:1px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--navy);opacity:0}
.dicon.run::after{opacity:.85}

/* ---- windows ---- */
.w{position:absolute;display:flex;flex-direction:column;min-width:200px;max-width:100%;padding:0;overflow:hidden}
.w.min{display:none !important}
.w.max{left:0 !important;top:var(--bar) !important;width:100% !important;height:calc(100% - var(--bar) - var(--dock)) !important;border-radius:0}
.tb{display:flex;align-items:center;gap:8px;flex:none;height:42px;padding:0 8px 0 14px;background:var(--card);color:var(--text);font-weight:600;border-bottom:1px solid var(--line);cursor:default;user-select:none;-webkit-user-select:none;touch-action:none}
.w.blur .tb{color:var(--text3)}
.tb .ico{width:18px;height:18px;display:grid;place-items:center;font-size:15px;line-height:1;flex:none}
.tb .ico svg{width:18px;height:18px}
.tb .ttl{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tbb{flex:none;width:30px;height:28px;padding:0;display:grid;place-items:center;background:none;border:0;border-radius:8px}
.tbb[data-do="min"]{display:none}
.tbb:hover{background:var(--hover)}
.tbb[data-do="close"]:hover{background:#FCE4E4}
.tbb svg{width:11px;height:10px;display:block}
.wb{flex:1;min-height:0;overflow:auto;padding:16px}
.wb.flush{padding:0;display:flex;flex-direction:column}

/* the grips you drag to resize a window. Invisible, but they are there. */
.rsz{position:absolute;z-index:4;touch-action:none}
.rsz-r{top:0;right:-3px;width:8px;height:100%;cursor:ew-resize}
.rsz-b{left:0;bottom:-3px;height:8px;width:100%;cursor:ns-resize}
.rsz-c{right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize}
.w.max .rsz{display:none}

/* ---- the menu bar inside a window (File, Edit...) ---- */
.menubar{display:flex;flex:none;padding:3px 8px;gap:2px;background:var(--card);border-bottom:1px solid var(--line)}
.menubar button{background:none;border:0;padding:4px 10px;border-radius:8px;color:var(--text2)}
.menubar button:hover,.menubar button.open{background:var(--hover);color:var(--text)}
.dropmenu{position:absolute;z-index:9000;min-width:170px;padding:5px;margin:0;list-style:none}
.dropmenu li{padding:7px 14px;border-radius:8px;cursor:default;white-space:nowrap}
.dropmenu li:hover{background:var(--navy);color:#fff}
.dropmenu li.off{color:var(--text3)}
.dropmenu li.off:hover{background:none;color:var(--text3)}
.dropmenu li.sep{padding:0;margin:5px 4px;border-top:1px solid var(--line);border-radius:0}
.dropmenu li.sep:hover{background:none}

/* ---- the menu bar across the top: the desktop's name on the left, sound and clock on the right ---- */
.taskbar{position:fixed;left:0;right:0;top:0;bottom:auto;height:var(--bar);z-index:5000;display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:0 14px;background:rgba(255,255,255,.3);border-bottom:1px solid rgba(255,255,255,.35);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);font-size:13px;font-weight:500;color:var(--navy)}
.taskbar::before{content:'GEC Portal';margin-right:auto;font-weight:700}
.startbtn,.tasks{display:none}
.tray{flex:none;height:100%;display:flex;align-items:center;gap:10px;color:var(--navy)}
.tray button{background:none;border:0;padding:0;display:grid;place-items:center}
.tray svg{width:16px;height:16px}
.tray .muted .waves{display:none}
.tray button:not(.muted) .cross{display:none}

/* ---- Start menu ---- */
.startmenu{position:fixed;left:10px;top:calc(var(--bar) + 6px);z-index:6000;width:250px;display:flex;max-height:calc(100% - var(--bar) - 16px)}
.startmenu .side{display:none}
.startmenu ul{list-style:none;flex:1;margin:0;padding:6px;overflow-y:auto}
.startmenu li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;cursor:default}
.startmenu li .ico{width:26px;height:26px;display:grid;place-items:center;font-size:20px;line-height:1;flex:none}
.startmenu li .ico svg{width:24px;height:24px}
.startmenu li:hover,.startmenu li:focus{background:var(--navy);color:#fff;outline:none}
.startmenu li.sep{padding:0;margin:5px 4px;border-top:1px solid var(--line);border-radius:0}
.startmenu li.sep:hover{background:none}

/* ---- message boxes ---- */
.shade{position:fixed;left:0;top:0;right:0;bottom:0;z-index:7000;display:grid;place-items:center;padding:12px;background:rgba(24,45,84,.4)}
.mb{position:static;min-width:260px;max-width:min(440px,100%)}
.mb .tb{touch-action:auto}
.mb .wb{padding:16px 18px 14px;background:var(--page)}
.mb .say{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;white-space:pre-wrap}
.mb .say svg{display:none}
.mb .field{margin-bottom:14px}
.mb .foot{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}

/* ---- the little note that pops up and goes away ---- */
.toast{position:fixed;left:50%;top:44px;transform:translateX(-50%);z-index:9999;max-width:90%;padding:10px 18px;background:var(--navy);color:#fff;border-radius:12px;box-shadow:0 8px 24px rgba(8,16,40,.35)}

/* ---- phones: a window fills the screen between the menu bar and the dock ---- */
@media (max-width:760px){
  :root{--dock:84px}
  body{font-size:16px}
  .wordmark{display:none}
  .icons{gap:6px;padding:7px 8px 9px;bottom:10px;max-width:calc(100vw - 16px);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}   /* more icons than fit: the dock slides sideways */
  .icons::-webkit-scrollbar{display:none}
  .dicon{padding-bottom:7px;flex:none;touch-action:pan-x}   /* a swipe slides the dock, so dragging icons into a new order is for computers only */
  .dicon .ico{width:46px;height:46px;font-size:26px;border-radius:13px}
  .dicon .ico svg.tile{width:46px;height:46px;border-radius:13px}
  .dicon .lbl{display:none}
  .dicon:hover,.dicon:focus-visible{transform:none}
  .dicon:has(+ .dicon:hover),.dicon:hover + .dicon{transform:none}
  .w:not(.mb){position:fixed !important;left:0 !important;top:var(--bar) !important;width:100% !important;height:calc(100% - var(--bar) - var(--dock)) !important;border-radius:0}
  .rsz{display:none}
  .tb{height:48px}
  .tbb{width:38px;height:34px}
  .tbb svg{width:13px;height:12px}
  .tbb[data-do="max"]{display:none}
  .menubar button{padding:9px 12px}
  .dropmenu li{padding:12px 16px}
  .btn{padding:10px 16px}
}
/* phones zoom the page when you tap a text box with small type, so keep it at 16px there */
@media (pointer:coarse){ input,textarea,select{font-size:16px !important} }

/* ---- the scoreboard widget (js/widget.js) ---- */
.widget{position:absolute;top:196px;right:22px;z-index:1;width:300px;display:flex;flex-direction:column;gap:10px;padding:14px 16px;color:var(--text);background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(255,255,255,.7);border-radius:18px;box-shadow:0 8px 28px rgba(24,45,84,.18);transition:transform .15s,box-shadow .15s}
.widget:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(24,45,84,.24)}
.widget[hidden]{display:none}
.widget button{font:inherit;color:inherit;cursor:pointer}
.widget-open{display:flex;flex-direction:column;gap:6px;width:100%;padding:0;background:none;border:0;text-align:left}
.widget-open:focus-visible,.widget-go:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(24,45,84,.35);border-radius:6px}
.widget small{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--text3)}
.widget ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;counter-reset:w}
.widget li{display:flex;justify-content:space-between;gap:8px;font-size:13px;counter-increment:w;padding:2px 6px;border-radius:6px}
.widget li::before{content:counter(w);width:14px;color:var(--text3);font-weight:700}
.widget li[data-rank]::before{content:attr(data-rank)}
.widget li span{flex:1}
.widget li em{font-style:normal;font-weight:600}
.widget li.me{background:rgba(7,190,97,.16)}
.widget-you{display:flex;flex-direction:column;gap:6px;margin-top:6px;padding-top:9px;border-top:1px dashed rgba(24,45,84,.3)}
.widget .widget-go{align-self:flex-start;text-align:left;white-space:nowrap;padding:0;background:none;border:0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#0745B2;margin-top:10px;text-decoration:underline;text-underline-offset:3px}
.widget .widget-go:hover{color:#052F82}
.widget li.widget-empty{color:var(--text3)}
.widget li.widget-empty::before{content:none}
.widget-next{margin-top:8px;font-size:12px;color:var(--text2)}
.widget .flag{width:16px;height:12px;margin-right:5px;vertical-align:-1px}
@media (max-width:760px){.widget{display:none}}

/* ---- reminder pop-ups (js/reminders.js) ---- */
.reminders{position:absolute;right:22px;bottom:calc(var(--dock) + 4px);z-index:5000;width:300px;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.reminder{pointer-events:auto;display:flex;flex-direction:column;gap:3px;padding:12px 14px;color:var(--text);background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(255,255,255,.7);border-left:4px solid #E5484D;border-radius:14px;box-shadow:0 8px 28px rgba(24,45,84,.22);animation:reminder-in .25s ease-out}
.reminder small{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--text3)}
.reminder b{font-size:15px;overflow-wrap:anywhere}
.reminder span{font-size:13px;color:var(--text2)}
.reminder-row{display:flex;gap:10px;align-items:center;margin-top:8px}
.reminder .reminder-x{background:none;border:0;padding:0;font:inherit;font-size:13px;color:var(--text2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@keyframes reminder-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:760px){.reminders{left:12px;right:12px;width:auto}}
@media (prefers-reduced-motion:reduce){.reminder{animation:none}}

/* ---- first sign-on: welcome and survey (js/onboarding.js) ---- */
.onb-shade{position:fixed;left:0;top:0;right:0;bottom:0;z-index:6400;display:grid;place-items:center;padding:16px;background:rgba(24,45,84,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.onb-shade[hidden]{display:none}
.onb-card{width:min(560px,100%);max-height:calc(100% - 24px);overflow-y:auto;padding:28px 30px 22px;background:var(--card);border-radius:20px;box-shadow:0 20px 60px rgba(24,45,84,.35);display:flex;flex-direction:column;gap:12px}
.onb-card h2{margin:0;font-size:24px}
.onb-card p{margin:0;line-height:1.55}
.onb-go{align-self:flex-start;margin-top:6px}
.onb-small{font-size:12px;color:var(--text3);margin-top:2px}
.onb-link{background:none;border:0;padding:0;font:inherit;color:#0745B2;text-decoration:underline;cursor:pointer}
.onb-link:hover{color:#052F82}
.join-code{font-size:22px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;text-align:center}
.onb-scale{color:var(--text2);font-size:14px}
.onb-part{margin:8px 0 0;font-size:16px;color:var(--navy)}
.onb-form{display:flex;flex-direction:column;gap:14px}
.onb-navy{background:var(--navy);border-color:var(--navy);color:#fff}
.onb-navy:hover{background:var(--navy);filter:brightness(1.15)}
.onb-q{margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;gap:10px}
.onb-legend{font-weight:600;line-height:1.4}
.onb-q.missing{border-color:#E5484D;background:#FFF5F5}
.onb-ends{display:flex;justify-content:space-between;gap:8px;font-size:13px;font-weight:600;color:var(--text2);margin-bottom:-4px}
.onb-rate{display:flex;gap:8px}
.onb-rate label{flex:1;display:block}
.onb-rate input,.onb-choice input{position:absolute;opacity:0;pointer-events:none}
.onb-rate span{display:grid;place-items:center;height:42px;border:1px solid var(--line2);border-radius:10px;font-weight:600;cursor:pointer;transition:background .12s}
.onb-rate label:hover span{background:var(--hover)}
.onb-rate input:checked + span{background:var(--navy);border-color:var(--navy);color:#fff}
.onb-rate input:focus-visible + span,.onb-choice input:focus-visible + span{box-shadow:0 0 0 3px rgba(24,45,84,.3)}
.onb-choice{display:flex;flex-wrap:wrap;gap:8px}
.onb-choice span{display:block;padding:9px 14px;border:1px solid var(--line2);border-radius:10px;cursor:pointer}
.onb-choice label:hover span{background:var(--hover)}
.onb-choice input:checked + span{background:var(--navy);border-color:var(--navy);color:#fff}
.onb-open{display:flex;flex-direction:column;gap:6px;font-weight:600}
.onb-msg{color:#B3261E;font-size:14px;min-height:1em}
.onb-alt{margin-top:10px;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.onb-alt p{font-size:14px;color:var(--text2)}
@media (max-width:760px){.onb-card{padding:22px 18px 18px}.onb-rate{gap:5px}}

/* the seal tour (js/tour.js) */
.tour{position:fixed;left:0;top:0;right:0;bottom:0;z-index:6600}
.tour-hole{position:fixed;border-radius:20px;box-shadow:0 0 0 100vmax rgba(24,45,84,.62),0 0 0 3px rgba(255,255,255,.9);transition:left .28s ease,top .28s ease,width .28s ease,height .28s ease;pointer-events:none}
.tour-card{position:fixed;width:min(410px,calc(100vw - 24px));display:flex;gap:14px;align-items:flex-start;padding:16px 18px 14px;background:var(--card);border-radius:18px;box-shadow:0 18px 50px rgba(8,16,40,.4)}
.tour-seal-wrap{flex:none;width:96px;height:98px}
.tour-seal{width:96px;height:98px;display:block;animation:tour-bob 2.4s ease-in-out infinite;transform-origin:50% 90%}
.tour-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.tour-name{color:var(--navy);font-size:14px}
.tour-text{margin:0;line-height:1.5}
.tour-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.tour-count{font-size:12px;color:var(--text3)}
.tour-skip{font-size:12px;margin-left:auto}
@keyframes tour-bob{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg) translateY(-2px)}}
@media (prefers-reduced-motion:reduce){.tour-seal{animation:none}.tour-hole{transition:none}}
@media (max-width:520px){.tour-card{flex-direction:column;align-items:center;text-align:left}}

/* post-it notes: approved Idea Wall cards on the desktop (js/notes.js) */
.notes{position:absolute;left:24px;top:40px;right:300px;bottom:130px;padding-top:14px;box-sizing:border-box;z-index:1;display:flex;flex-wrap:wrap;align-content:flex-start;gap:14px 12px;overflow:visible;pointer-events:none}
.notes[hidden]{display:none}
.note{position:relative;pointer-events:auto;flex:none;width:200px;height:200px;padding:28px 20px 14px 28px;display:flex;flex-direction:column;gap:6px;text-align:left;color:#2A2A33;border:0;border-radius:2px;box-shadow:0 8px 14px rgba(8,16,40,.28),0 1px 2px rgba(8,16,40,.2);cursor:pointer;font:inherit;transition:transform .15s,box-shadow .15s}
.note:hover,.note:focus-visible{box-shadow:0 14px 24px rgba(8,16,40,.35);z-index:2;outline:none}
.note-who{display:flex;align-items:center;gap:6px;font-size:12px;overflow:hidden}
.note-who b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.note-who .flag{height:12px;flex:none;border-radius:1px}
.note-q{flex:1;overflow:hidden;font-family:'League Spartan',system-ui,sans-serif;font-weight:700;font-size:15px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical}
.note-test{font-size:12px;line-height:1.2;color:#3A3A45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.note-bins{display:flex;flex-wrap:wrap;gap:4px}
.note-bins i{font-style:normal;font-size:11px;font-weight:600;padding:1px 7px;border:1.5px solid #2A2A33;border-radius:8px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.note-foot{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#4A4A55}
.note-fish{display:inline-flex;align-items:center;gap:2px;color:#7A1020;font-weight:600}
.note-fish svg.fish{width:20px;height:12px}
.note-fish svg.flame{width:14px;height:14px;vertical-align:-2px}
.note-tape{position:absolute;top:-8px;left:50%;transform:translateX(-50%) rotate(-2deg);padding:2px 12px;font-size:11px;font-weight:700;color:#fff;background:#E5484D;box-shadow:0 1px 3px rgba(8,16,40,.3)}
.note-tape.mine{background:#182D54}
.note.more{align-items:center;justify-content:center;text-align:center;font-weight:600;background:rgba(255,255,255,.55);box-shadow:none;border:2px dashed rgba(24,45,84,.5);transform:none}
@media (max-width:760px){.notes{display:none}}

/* a seal looks over the top of the first-time cards (js/seal.js) */
.login-card{position:relative}
.onb-stack{position:relative;width:min(560px,100%);max-height:calc(100vh - 130px);max-height:calc(100dvh - 130px);margin-top:84px;display:flex;flex-direction:column}
.onb-stack .onb-card{width:100%;max-height:none;min-height:0}
.seal-peek{position:absolute;right:28px;bottom:100%;display:flex;align-items:flex-end;gap:8px;pointer-events:none;z-index:1}
.seal-peek[hidden]{display:none}
.seal-art{flex:none;width:124px;margin-bottom:1px}
.login-seal-art{display:block;width:100%;height:auto}
.seal-line{max-width:200px;margin-bottom:22px;padding:8px 11px;background:#FFF3A3;transform:rotate(-2deg);font-family:'League Spartan',system-ui,sans-serif;font-weight:700;font-size:14px;line-height:1.25;color:#2A2A33;box-shadow:0 6px 12px rgba(8,16,40,.25)}
.seal-line[hidden]{display:none}
@media (max-width:420px){.seal-line{display:none}}

/* the student survey, one question at a time (js/onboarding.js, drawTypeform) */
/* A survey screen is as tall as its content, and the teacher skills screen needs about 864px. On a
   shorter window the Next button and the Sign off row fell below the fold, the card clipped them and
   nothing could scroll, so a teacher got stuck with no way forward and no way out. Now the shade
   scrolls, the stack grows past the viewport instead of being cut off, and the card uses flex to
   fill a tall window so the content still sits in the middle the way it used to. */
.onb-shade.tf{padding:0;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;overflow-y:auto;place-items:start center}
.tf .onb-stack{width:100%;height:auto;min-height:100%;max-height:none;margin:0}
.tf .onb-card{position:relative;flex:1 0 auto;max-height:none;border-radius:0;box-shadow:none;padding:0;gap:0;justify-content:center;overflow:hidden}
.tf-bar{position:absolute;left:0;top:0;right:0;height:5px;background:var(--line)}
.tf-bar i{display:block;height:100%;background:#07BE61;transition:width .35s ease}
.tf-stage{width:min(680px,calc(100% - 48px));margin:0 auto}
.tf-q{display:flex;flex-direction:column;align-items:flex-start;gap:6px;animation:tf-in .38s ease both}
.tf-q.rev{animation-name:tf-back}
@keyframes tf-in{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes tf-back{from{opacity:0;transform:translateY(-28px)}to{opacity:1;transform:none}}
.tf-num{color:#0745B2;font-weight:700;font-size:16px}
.tf-q h2{margin:6px 0 22px;font-size:clamp(22px,4vw,32px);line-height:1.25;color:var(--navy)}
.tf-choices{display:flex;flex-direction:column;gap:10px;width:min(420px,100%)}
.tf-opt{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1.5px solid #9BB0D8;background:#EEF3FF;border-radius:8px;font:inherit;font-size:18px;color:var(--navy);cursor:pointer;text-align:left;transition:background .12s,transform .12s}
.tf-opt:hover{background:#DDE8FF;transform:translateX(3px)}
.tf-opt.on{background:var(--navy);border-color:var(--navy);color:#fff}
.tf-key{flex:none;width:26px;height:26px;border:1.5px solid currentColor;border-radius:5px;font-size:13px;font-weight:700;display:grid;place-items:center}
.tf-rate{display:flex;gap:10px}
.tf-rate .tf-opt{width:58px;height:58px;justify-content:center;padding:0;font-weight:600}
.tf-rate .tf-opt:hover{transform:translateY(-3px)}
.tf-ends{display:flex;justify-content:space-between;gap:12px;width:min(5 * 58px + 4 * 10px,100%);margin-top:6px;font-size:14px;color:var(--text2)}
.tf-open{width:100%;font:inherit;font-size:clamp(18px,3vw,24px);color:var(--navy);border:0;border-bottom:2px solid #9BB0D8;background:transparent;padding:6px 0;resize:none;outline:none}
.tf-open:focus{border-bottom-color:var(--navy)}
.tf-ok{margin-top:22px}
.tf-ok[hidden]{display:none}
.tf-hint{font-size:13px;color:var(--text3)}
.tf-q h2.tf-thanks{display:block;width:100%;box-sizing:border-box;text-align:center;font-size:44px;margin:8px 0 34px}
.tf-lead{font-size:20px;line-height:1.35;color:var(--navy);margin:0 0 14px}
.tf-ok.tf-big{display:block;margin:26px auto 0;font-size:21px;padding:10px 26px;border-radius:12px}
.tf-saving{font-size:20px;color:var(--navy)}
.tf-nav{position:absolute;left:24px;right:24px;bottom:20px;display:flex;align-items:center;gap:14px}
.tf-mid{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.tf-nav .tf-ok{margin-top:0}
.tf-nav .tf-ok[hidden],.tf-nav .tf-back[hidden]{display:inline-block;visibility:hidden}
.tf-count{font-size:14px;color:var(--text2)}
@media (prefers-reduced-motion:reduce){.tf-q,.tf-q.rev{animation:none}.tf-bar i{transition:none}}
.tf-sub{margin:0 0 20px;font-size:17px;color:var(--text2)}

/* the teacher survey, one screen at a time (js/onboarding.js, drawEducator): eight skill seals, a podium, and dots */
.ed .onb-stack{min-width:0}
.ed .onb-card{overflow-y:auto;justify-content:flex-start;padding:30px 0 20px}
.ed .tf-stage{margin:auto;width:min(720px,calc(100% - 32px));padding:12px 0}
.ed .tf-nav{position:static;width:min(720px,calc(100% - 32px));margin:0 auto;padding:10px 0 4px}
.ed .btn:disabled{opacity:.45;cursor:default}
.ed-art{display:flex;align-items:flex-end;justify-content:center}
.ed-art svg{display:block;width:auto;height:100%;max-width:100%;animation:none}
.ed-list{display:flex;flex-direction:column;gap:8px;width:100%}
.ed-row{display:flex;align-items:center;gap:12px;padding:8px 12px;border:1.5px solid #9BB0D8;background:#EEF3FF;border-radius:10px;font:inherit;color:var(--navy);text-align:left;cursor:pointer}
.ed-row .ed-art{flex:none;width:64px;height:44px;align-items:center}
.ed-row .ed-text{flex:1;min-width:0;line-height:1.3}
.ed-row b{display:block;font-size:16px}
.ed-row small{font-size:13px;color:var(--text2)}
.ed-row .ed-box{flex:none;width:24px;height:24px;border:2px solid var(--navy);border-radius:5px;display:grid;place-items:center;font-size:15px;color:#fff}
.ed-row.on{background:#DDE8FF;border-color:var(--navy)}
.ed-row.on .ed-box{background:var(--navy)}
.ed-pool{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:repeat(4,auto);grid-auto-flow:column;gap:8px;width:100%}
.ed-chip{display:flex;align-items:center;min-width:0;gap:8px;padding:6px 8px;border:1.5px solid #9BB0D8;background:#EEF3FF;border-radius:10px;font:inherit;font-size:14px;line-height:1.25;color:var(--navy);text-align:left;cursor:pointer}
.ed-chip .ed-art{flex:none;width:58px;height:40px;align-items:center}
.ed-chip .ed-name{flex:1;min-width:0}
.ed-chip .ed-rank{flex:none;margin-left:auto;min-width:30px;height:30px;border-radius:15px;border:2px dashed #9BB0D8;display:grid;place-items:center;font-weight:700;font-size:13px;color:#fff}
.ed-chip.on{border:2px solid var(--navy);background:#DDE8FF}
.ed-chip.on .ed-rank{background:var(--navy);border:2px solid var(--navy)}
@media (max-width:480px){.ed-chip{font-size:12px;padding:6px;gap:6px}.ed-chip .ed-art{width:44px;height:32px}.ed-chip .ed-rank{min-width:26px;height:26px;font-size:12px}}
@media (max-width:400px){.ed-chip{font-size:11px;padding:4px 5px;gap:5px}.ed-chip .ed-art{width:34px;height:26px}.ed-chip .ed-rank{min-width:24px;height:24px;font-size:11px}}
.ed-podium{display:flex;align-items:flex-end;justify-content:center;gap:8px;width:100%;margin:6px 0 12px}
.ed-spot{width:31%;text-align:center}
.ed-spot .ed-art{height:86px;margin-bottom:9px;gap:4px}
.ed-spot .ed-art.many{height:64px}
.ed-s3 .ed-art svg{transform:scaleX(-1)}
.ed-step{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:8px;font-weight:700;color:#000}
.ed-step svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.ed-step svg path{vector-effect:non-scaling-stroke}
.ed-step svg path[stroke]{stroke-width:1.23px}
.ed-step b{position:relative;font-size:22px}
.ed-step small{position:relative;font-weight:500;font-size:10.5px;padding:2px 6px 0;line-height:1.2}
.ed-rate{width:100%}
.ed-rate .ed-head,.ed-rate .ed-rw{display:grid;grid-template-columns:minmax(0,1fr) 84px 84px 84px;align-items:center;gap:4px}
.ed-rate .ed-head{font-size:13px;font-weight:700;text-align:center;line-height:1.15;padding:0 0 8px;border-bottom:2px solid var(--navy)}
.ed-head .c-very{color:#C23A28}
.ed-head .c-some{color:#6A4496}
.ed-head .c-not{color:#2F7FB5}
.ed-rate .ed-rw{padding:10px 0;border-bottom:1px solid var(--line);font-size:18px;line-height:1.25;color:var(--navy)}
.ed-who{display:flex;align-items:center;gap:10px;min-width:0}
.ed-who .ed-art{flex:none;width:48px;height:40px;align-items:center}
.ed-who > span:last-child{min-width:0;overflow-wrap:break-word}
.ed-dot{justify-self:center;width:32px;height:32px;border-radius:50%;border:3px solid;background:#fff;cursor:pointer;padding:0}
.ed-dot.very{border-color:#E8543F}
.ed-dot.some{border-color:#7C55A8}
.ed-dot.not{border-color:#6AB4E3}
.ed-dot.very.on{background:#E8543F}
.ed-dot.some.on{background:#7C55A8}
.ed-dot.not.on{background:#6AB4E3}
.ed-prog{margin:12px 0 0;font-size:16px;color:var(--text2)}
@media (max-width:560px){.ed-rate .ed-head,.ed-rate .ed-rw{grid-template-columns:minmax(0,1fr) 58px 58px 58px}.ed-rate .ed-head{font-size:10.5px}.ed-rate .ed-rw{font-size:15px}.ed-who{gap:6px}.ed-who .ed-art{width:34px;height:30px}.ed-dot{width:28px;height:28px}.ed-prog{font-size:14px}}

/* the welcome video (js/welcomevideo.js) */
.wv{border-radius:12px;overflow:hidden;background:#000;aspect-ratio:16/9}
.wv video{display:block;width:100%;height:100%}
.wv[hidden],.ch-card[hidden]{display:none}
.note-art{display:block;flex:none;height:62px;text-align:center}
.note-art svg{height:62px;width:auto}
.widget-open > ol > li:first-child{font-weight:700}

/* the post-it for another team's idea: as tall as its words need */
.note.note-idea{cursor:default}
.note-idea:hover{transform:none !important;box-shadow:0 8px 14px rgba(8,16,40,.28),0 1px 2px rgba(8,16,40,.2)}
.note-idea .note-lab{font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#4A4A55;margin-top:2px}
.note-idea .note-q{flex:none;display:block;overflow:visible;-webkit-line-clamp:unset;font-size:15px}
.note-idea .note-q{font-weight:400}
.note-idea .note-testline{font-weight:400}
.note-idea .note-teamname{justify-content:flex-end;margin-top:6px;font-size:12px}
.note-go{align-self:stretch;padding:7px 10px;border:0;border-radius:6px;background:#182D54;color:#fff;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.note-go:hover{background:#0F2B4C}
.note-idea .note-teamname{overflow:visible}
.note-idea .note-teamname b{white-space:normal;overflow:visible;text-overflow:clip;text-align:right}
.note-idea .note-q,.note-idea .note-testline{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:400;font-size:14px;line-height:1.3}
.note-idea .note-teamname{margin-bottom:10px}

/* a real-looking button: raised, with a lip underneath that it presses into */
.note-go{align-self:stretch;padding:9px 12px 8px;border:0;border-radius:999px;background:#07BE61;color:#fff;font:inherit;font-size:14px;font-weight:700;line-height:1.1;text-shadow:0 1px 1px rgba(0,0,0,.2);box-shadow:0 4px 0 #058A47,0 6px 10px rgba(8,16,40,.25);cursor:pointer;transition:transform .08s,box-shadow .08s,background .12s}
.note-go:hover{background:#0AD26C}
.note-go:active{transform:translateY(3px);box-shadow:0 1px 0 #058A47,0 2px 4px rgba(8,16,40,.25)}
.note-go:focus-visible{outline:3px solid #182D54;outline-offset:2px}
.note-idea .note-teamname{margin-bottom:12px}
/* the post-it button stays navy, with the same raised look */
.note-go{background:#182D54;box-shadow:0 4px 0 #0B1A36,0 6px 10px rgba(8,16,40,.25)}
.note-go:hover{background:#243E70}
.note-go:active{box-shadow:0 1px 0 #0B1A36,0 2px 4px rgba(8,16,40,.25)}

.note-go{display:flex;align-items:center;justify-content:center;gap:6px}
.note-go svg.fish{width:26px;height:16px;flex:none}

.note-go{align-self:center;padding:8px 14px 7px;gap:5px}
.note-go svg.fish{filter:drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff)}

.widget li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.widget li em{flex:none;min-width:34px;text-align:right}
.widget li .fishtag{flex:none;color:#111}
.widget li .fishtag svg.fish{width:20px;height:12px}

.widget .widget-cols{display:flex;justify-content:flex-end;gap:8px;padding:0 6px;font-size:11px;color:var(--text3);font-weight:700}
.widget .widget-cols em{font-style:normal;min-width:62px;text-align:right}
.widget .widget-cols i{width:46px}
.widget li em{min-width:62px;text-align:right}
.widget li .fishtag{min-width:46px;justify-content:flex-end}

.widget li{gap:6px}
.widget li em{min-width:38px}
.widget li .fishtag{min-width:40px}
.widget .widget-cols{gap:6px}
.widget .widget-cols em{min-width:0;white-space:nowrap}
.widget .widget-cols i{width:40px}

.widget .widget-cols{align-items:flex-end}
.widget .widget-cols em{min-width:38px;display:flex;justify-content:flex-end}
.widget .widget-cols i{display:flex;justify-content:flex-end;align-items:center}
.widget .widget-cols i svg.fish{width:22px;height:14px}
.widget .widget-goose{width:18px;height:18px;border-radius:4px;display:block}
.widget li .widget-fishn{flex:none;min-width:40px;text-align:right;font-weight:600;color:#111}

.widget li em,.widget li .widget-fishn{font-weight:400}
.widget-open>ol>li:first-child em,.widget-open>ol>li:first-child .widget-fishn{font-weight:700}

.widget .widget-go{align-self:center;margin-top:20px;padding:0;border:0;border-radius:0;background:none;color:#0745B2;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;text-decoration:underline;text-underline-offset:3px;box-shadow:none;cursor:pointer}
.widget .widget-go:hover{color:#052F82;background:none}
.widget .widget-go:active{transform:none;box-shadow:none}

.dicon{position:relative}
.dicon .rbadge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;box-sizing:border-box;border-radius:10px;background:#E5484D;color:#fff;font:700 12px/20px system-ui,sans-serif;text-align:center;box-shadow:0 0 0 2px #fff}

.note-idea{padding-top:38px}
.note-idea .note-teamname{position:absolute;top:12px;right:12px;margin:0;max-width:64%;justify-content:flex-end}
.note-idea .note-teamname b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.note-tape{white-space:nowrap}
.note-idea .note-teamname{top:16px}
.note-idea{padding-top:42px}

.widget{width:auto;min-width:300px}
.widget li span{white-space:nowrap;overflow:visible;text-overflow:clip}
.widget li span .flag{margin-left:6px;vertical-align:-1px}
.widget li{gap:2px}
.widget li em{min-width:34px}
.widget li .widget-fishn{min-width:28px}
.widget .widget-cols{gap:2px}
.widget .widget-cols em{min-width:34px}
.widget .widget-cols i{width:28px}

.note-idea{padding-top:48px}
.note-idea .note-teamname{top:23px;right:28px}
.note-idea .note-go{margin-top:10px}

.widget li span .flag{margin:0 6px 0 0}

.widget .widget-cols em{display:flex;align-items:center;justify-content:flex-end;gap:4px;min-width:34px}
.widget .widget-cols em span{font-style:normal}

/* ---- dragging an app icon to a new place in the dock ---- */
.dicon{touch-action:none;cursor:grab}
.dicon.drag{transition:none;z-index:5;cursor:grabbing;filter:drop-shadow(0 8px 10px rgba(8,16,40,.35))}
.dicon.drag .lbl{opacity:0}

/* student survey: the scene line, the three ratings on one screen, the paperclip list, and the result */
.tf-pre{margin:0;font-size:15px;color:var(--text2)}
.tf-rows{display:flex;flex-direction:column;gap:18px}
.tf-stmt{margin:0 0 8px;font-size:18px;color:var(--navy)}
.tf-rows .tf-rate .tf-opt{width:48px;height:48px}
.tf-clip{display:flex;align-items:center;gap:18px;margin-bottom:10px}
.tf-clip-pic{flex:none;line-height:0}
.tf-clip-side{display:flex;flex-direction:column;gap:2px}
.tf-timer{font-size:28px;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}
.tf-tally{font-size:15px;color:var(--text2)}
.tf-start{background:var(--navy);border-color:var(--navy);color:#fff;margin-left:8px}
.tf-start:hover{background:var(--navy);filter:brightness(1.15)}
.tf-list{border:1.5px solid #9BB0D8;border-radius:8px;padding:10px 12px;background:#fff;font-size:18px}
.tf-list:disabled{background:#F3F5FA;color:var(--text2)}
.rs-top{display:flex;align-items:center;gap:18px;margin:6px 0 10px}
.rs-seal{flex:none;width:min(165px,34%);line-height:0}
.rs-seal svg{width:100%;height:auto;overflow:visible}
.rs-words h2{margin:0 0 4px}
.rs-words p{margin:0 0 8px}
.rs-lean{color:var(--text2);font-size:15px}
.rs-line{margin:0 0 8px}
.rs-bolt::before,.rs-arrow::before{display:inline-block;width:1.1em;margin-right:6px;font-weight:700}
.rs-bolt::before{content:"\26A1\FE0E";color:#F5B400}
.rs-arrow::before{content:"\2192";color:#2E9E5B}
@media (max-width:560px){.rs-top{flex-direction:column;align-items:flex-start}.rs-seal{width:min(125px,40%)}.tf-clip-pic svg{width:40px;height:73px}}
/* the student survey card scrolls on a short screen, so the Start and OK buttons are never out of reach */
.tf:not(.ed) .onb-card{overflow-y:auto;justify-content:flex-start}
.tf:not(.ed) .tf-bar{position:sticky;top:0;flex:none;z-index:1}
.tf:not(.ed) .tf-stage{margin:auto;padding:28px 0 12px}
.tf:not(.ed) .tf-nav{position:static;flex:none;width:min(680px,calc(100% - 48px));margin:0 auto;padding:10px 0 18px}

/* ---- the Team Rankings widget: the frosted card in the portal's type, with the seal looking over the top ---- */
.widget{top:262px;border-radius:18px}
.widget-seal{position:absolute;right:18px;bottom:100%;width:72px;line-height:0;margin-bottom:2px;pointer-events:none}
.widget-seal svg{width:100%;height:auto;display:block;transform:scaleX(-1)}
.widget small{font:500 19px 'Fredoka',sans-serif;letter-spacing:0;text-transform:none;color:#182D54}
.widget li{font:500 15px 'Fredoka',sans-serif;color:#182D54}
.widget li::before{color:#0745B2}
.widget li em,.widget li .widget-fishn{font-weight:500;color:#182D54}
.widget-open>ol>li:first-child em,.widget-open>ol>li:first-child .widget-fishn{font-weight:600}
.widget .widget-cols{font:500 13px 'Fredoka',sans-serif;color:#0745B2}
.widget .widget-go{font:500 14px 'Fredoka',sans-serif;letter-spacing:0;text-transform:none;color:#0745B2}

/* the post-it in the same type as the Team Rankings card */
.note,.note .note-q,.note .note-testline,.note .note-lab,.note .note-foot,.note .note-tape,.note .note-teamname,.note .note-go{font-family:'Fredoka',sans-serif}
.note .note-q,.note .note-testline{font-weight:500;font-size:15px;color:#182D54}
.note .note-lab{font-weight:500;letter-spacing:.06em}
.note .note-tape,.note .note-go{font-weight:500}