/* StellarKickoff: phone-first, in The Stellar Group's brand colours (violet / pink), light or dark. */
:root{--bg:#f4f5fb;--card:#ffffff;--card2:#f1f2f9;--line:#e3e5f1;--text:#2b2d42;--muted:#6e7290;--accent:#7d7ff0;--accent-text:#6466d8;--accent2:#d975b8;--on-accent:#ffffff;--grad:linear-gradient(135deg,#6d7ff2 0%,#9b79ec 60%,#c47fd9 100%);--bad:#e0577b;--warn:#d98a1c;--top:#ffffff;--field:#f1f2f9;--sel:#eef0ff;--okbg:#e4f6ef;--okline:#9fdcc5;--badbg:#fdeef3;--badline:#f2b4c6;--warnbg:#fdf3e1;--warnline:#f0cf94;--tag:#eef0ff;--tagok:#d5f2e6;--tagoktx:#1f8566;--tagbad:#fbe0e9;--tagbadtx:#c63b62;--tagwarn:#fdf0d5;--tagwarntx:#8a5a0b;--shadow:0 6px 24px rgba(43,45,66,.08);--r:14px}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#15162b;--card:#1e2040;--card2:#24264a;--line:#33365f;--text:#f1f1fb;--muted:#a3a6c8;--accent:#8f91ff;--accent-text:#aeb0ff;--accent2:#e48bc0;--on-accent:#ffffff;--bad:#ef6f92;--warn:#f0b04a;--top:#0e0f22;--field:#16172f;--sel:#2a2c5a;--okbg:#123a2e;--okline:#22714f;--badbg:#3d1626;--badline:#7d2a47;--warnbg:#3a2a0b;--warnline:#8a5a0b;--tag:#2a2c5a;--tagok:#134e3a;--tagoktx:#b6f5d2;--tagbad:#5a1b33;--tagbadtx:#ffd0dc;--tagwarn:#5a3d0a;--tagwarntx:#ffe2a6;--shadow:0 8px 30px rgba(0,0,0,.35)}}
:root[data-theme=dark]{--bg:#15162b;--card:#1e2040;--card2:#24264a;--line:#33365f;--text:#f1f1fb;--muted:#a3a6c8;--accent:#8f91ff;--accent-text:#aeb0ff;--accent2:#e48bc0;--on-accent:#ffffff;--bad:#ef6f92;--warn:#f0b04a;--top:#0e0f22;--field:#16172f;--sel:#2a2c5a;--okbg:#123a2e;--okline:#22714f;--badbg:#3d1626;--badline:#7d2a47;--warnbg:#3a2a0b;--warnline:#8a5a0b;--tag:#2a2c5a;--tagok:#134e3a;--tagoktx:#b6f5d2;--tagbad:#5a1b33;--tagbadtx:#ffd0dc;--tagwarn:#5a3d0a;--tagwarntx:#ffe2a6;--shadow:0 8px 30px rgba(0,0,0,.35)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--accent-text)}
main{max-width:760px;margin:0 auto;padding:16px 16px 24px}
h1{font-size:1.6rem;margin:.4rem 0 1rem;line-height:1.2}
h2{font-size:1.15rem;margin:1.6rem 0 .6rem}
h3{font-size:1rem;margin:1rem 0 .4rem}
p{margin:.5rem 0}
.top{display:flex;align-items:center;gap:18px;height:60px;padding:0 20px;background:var(--top);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;box-sizing:border-box}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:800;letter-spacing:.2px;font-size:1.1rem}
.ball{width:26px;height:16px;border-radius:50%;background:#8a4b22;position:relative;transform:rotate(-25deg);box-shadow:inset 0 0 0 2px #6b3818}
.ball::after{content:"";position:absolute;left:7px;right:7px;top:7px;height:2px;background:#fff;border-radius:2px}
.site-nav{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a{color:var(--muted);text-decoration:none;font-weight:600;font-size:.95rem;padding:7px 12px;border-radius:9px;transition:background .15s,color .15s;white-space:nowrap}
.nav-links a:hover{color:var(--text);background:var(--card2)}
.nav-links a.on{color:var(--accent-text);background:var(--sel)}
.nav-end{display:flex;align-items:center;gap:10px;margin-left:auto}
.signout{background:none;border:1px solid var(--line);color:var(--muted);font:inherit;font-size:.9rem;font-weight:600;padding:6px 12px;border-radius:999px;cursor:pointer}
.signout:hover{color:var(--text);border-color:var(--muted)}
.burger{display:none;margin-left:auto;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:var(--card2);cursor:pointer;position:relative;padding:0}
.burger span,.burger span::before,.burger span::after{position:absolute;left:11px;width:18px;height:2px;border-radius:2px;background:var(--text);transition:transform .2s,opacity .2s;content:""}
.burger span{top:19px}
.burger span::before{left:0;top:-6px}
.burger span::after{left:0;top:6px}
.top.open .burger span{background:transparent}
.top.open .burger span::before{transform:translateY(6px) rotate(45deg)}
.top.open .burger span::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:760px){
  .top{gap:10px;padding:0 16px}
  .burger{display:block}
  .site-nav{display:none;position:absolute;top:60px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:8px 12px 14px;background:var(--top);border-bottom:1px solid var(--line);box-shadow:0 18px 30px rgba(20,22,43,.14)}
  .top.open .site-nav{display:flex}
  .nav-links{flex-direction:column;align-items:stretch;gap:2px}
  .nav-links a{font-size:1.05rem;padding:13px 12px;border-radius:11px}
  .nav-end{margin:10px 0 0;padding-top:12px;border-top:1px solid var(--line);justify-content:space-between}
}
.inline{display:inline;margin:0}
.linkish{background:none;border:0;color:var(--muted);font:inherit;font-weight:600;cursor:pointer;padding:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:12px 0;box-shadow:var(--shadow)}
.muted{color:var(--muted)}.small{font-size:.85rem}
.flash{padding:12px 14px;border-radius:10px;background:var(--okbg);border:1px solid var(--okline)}
.flash.bad{background:var(--badbg);border-color:var(--badline)}
.flash.warn{background:var(--warnbg);border-color:var(--warnline)}
label{display:block;font-weight:600;margin:.8rem 0 .3rem}
input[type=text],input[type=search],input[type=email],input[type=password],input[type=date],input[type=number],select,textarea{width:100%;padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--field);color:var(--text);font:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.code-input{font-size:1.8rem;letter-spacing:.35em;text-transform:uppercase;text-align:center;font-weight:800}
.btn{display:inline-block;background:linear-gradient(135deg,#6d7ff2 0%,#9b79ec 60%,#c47fd9 100%);color:var(--on-accent);border:0;border-radius:12px;padding:12px 18px;font:inherit;font-weight:800;cursor:pointer;text-decoration:none;text-align:center}
.btn.wide{display:block;width:100%}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn.secondary{background:var(--card2);color:var(--text);border:1px solid var(--line)}
.btn.danger{background:var(--bad);color:#fff}
.btn.small{padding:7px 12px;font-size:.9rem;border-radius:9px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row>*{flex:0 0 auto}
.split{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.boards{display:grid;gap:12px}
.board{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;color:var(--text);text-decoration:none}
.board:hover{border-color:var(--accent)}
.board .name{font-weight:800;font-size:1.1rem}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--muted);margin-right:6px;vertical-align:1px}
.dot.on{background:var(--accent);box-shadow:0 0 0 3px rgba(52,179,138,.25);background:#34b38a}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip{background:var(--c,#334);color:var(--f,#fff);border-radius:7px;padding:2px 8px;font-weight:800;font-size:.8rem;letter-spacing:.3px;border:1px solid rgba(255,255,255,.12)}
.teams fieldset{border:0;padding:0;margin:0 0 10px}
.teams legend{font-weight:700;color:var(--muted);font-size:.85rem;margin-bottom:6px;text-transform:uppercase;letter-spacing:.06em}
.tgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media(min-width:560px){.tgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.team{position:relative;display:flex;align-items:center;gap:8px;margin:0;padding:10px;border-radius:11px;border:1px solid var(--line);background:var(--field);cursor:pointer;font-weight:600;min-height:48px}
.team input{position:absolute;opacity:0;pointer-events:none}
.team .sw{width:28px;height:28px;border-radius:7px;background:var(--c);color:var(--f);display:grid;place-items:center;font-size:.62rem;font-weight:900;flex:0 0 auto}
.team .nm{font-size:.86rem;line-height:1.15}
.team:has(input:checked){border-color:var(--accent);background:var(--sel);box-shadow:inset 0 0 0 1px var(--accent)}
.team:has(input:focus-visible){outline:2px solid var(--accent2)}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:500;margin:.8rem 0}
.check input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--accent);flex:0 0 auto}
input[type=range]{width:100%;accent-color:var(--accent)}
details{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;margin:12px 0}
summary{cursor:pointer;font-weight:700}
.sticky-save{position:sticky;bottom:0;background:linear-gradient(transparent,var(--bg) 30%);padding:18px 0 6px}
.preview-wrap{display:flex;justify-content:center}
canvas.lcd{width:100%;max-width:400px;aspect-ratio:4/3;border-radius:12px;border:10px solid #1b1b1f;box-shadow:0 8px 30px rgba(0,0,0,.35);background:#000}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--muted);font-weight:700}
.table-wrap{overflow-x:auto}
.tag{display:inline-block;border-radius:6px;padding:1px 7px;font-size:.78rem;font-weight:800;background:var(--tag)}
.tag.ok{background:var(--tagok);color:var(--tagoktx)}.tag.bad{background:var(--tagbad);color:var(--tagbadtx)}.tag.warn{background:var(--tagwarn);color:var(--tagwarntx)}
.steps{counter-reset:s;list-style:none;padding:0}
.steps>li{counter-increment:s;position:relative;padding-left:46px;margin:18px 0}
.steps>li::before{content:counter(s);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-weight:900;display:grid;place-items:center}
code,kbd{background:var(--field);border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-size:.9em}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 14px}
.tabs a{padding:8px 12px;border-radius:9px;background:var(--card);border:1px solid var(--line);color:var(--muted);text-decoration:none;font-weight:700}
.tabs a.on{color:var(--text);border-color:var(--accent)}
.hero{padding:22px 4px 8px}
.hero h1{font-size:2rem}
.foot{text-align:center;padding:24px 16px 32px;border-top:1px solid var(--line);margin-top:24px}
.copyright{color:var(--muted);font-size:.8rem;margin:.3rem 0}
.center{text-align:center}
esp-web-install-button button{font:inherit}
.first{margin-top:0}
.editor-stage{display:flex;justify-content:center;margin:12px 0}
.editor-stage canvas{width:100%;max-width:280px;aspect-ratio:1;touch-action:none;border-radius:14px;border:1px solid var(--line);cursor:grab}
.editor-stage canvas:active{cursor:grabbing}
.team-pic{display:flex;flex-direction:column;gap:2px}
.team-pic .team{width:100%;color:var(--text);font:inherit;text-align:left}
img.sw{object-fit:cover;background:var(--card2)}
input[type=color]{width:38px;height:28px;border:0;background:none;padding:0;vertical-align:middle}
fieldset.plain{border:0;padding:0;margin:0}
.label{font-weight:600;margin:.2rem 0}
.foot .links{margin:.2rem 0 .6rem}
.foot .links a{color:var(--muted);margin:0 8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.picker .chosen{margin:6px 0 10px;min-height:28px}
.chip.removable{cursor:pointer;font:inherit;font-weight:800;font-size:.8rem}
.picker-bar{flex-wrap:nowrap}
.picker-bar select{flex:1 1 45%;min-width:0}
.picker-bar input{flex:1 1 55%;min-width:0}
.picker-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px;max-height:420px;overflow:auto;padding:2px}
@media(min-width:560px){.picker-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.picker-list>p{grid-column:1/-1}
.pick{display:flex;align-items:center;gap:8px;padding:8px;border-radius:11px;border:1px solid var(--line);background:var(--field);color:var(--text);font:inherit;font-size:.86rem;font-weight:600;text-align:left;cursor:pointer;min-height:46px}
.pick[aria-pressed=true]{border-color:var(--accent);background:var(--sel);box-shadow:inset 0 0 0 1px var(--accent)}
.pick .sw,.team .sw{width:30px;height:30px;border-radius:7px;background:var(--c,#334155);color:var(--f,#fff);display:grid;place-items:center;font-size:.6rem;font-weight:900;flex:0 0 auto;overflow:hidden}
.pick .sw img{width:100%;height:100%;object-fit:cover}
.pick .nm{line-height:1.15}
.check.tight{margin:.2rem 0}
.btn.google{background:#fff;color:#1f2937;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:10px}
.btn.google .g{font-weight:900;color:#4285f4;font-size:1.1rem}
.or{display:flex;align-items:center;gap:10px;margin:14px 0}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--line)}
.ball.big{display:inline-block;width:56px;height:34px;margin:8px 0}
.ball.big::after{left:14px;right:14px;top:16px}
.welcome-steps{border-color:var(--accent)}
.terms h2{margin-top:1.8rem}
.terms li{margin:.4rem 0}

.seg{display:inline-flex;gap:4px;padding:4px;border-radius:12px;background:var(--card2);border:1px solid var(--line);margin:6px 0 4px;flex-wrap:wrap}
.seg button,.seg label{border:0;background:none;color:var(--muted);font:inherit;font-weight:700;padding:8px 14px;border-radius:9px;cursor:pointer;margin:0;display:flex;gap:6px;align-items:center}
.seg button[aria-selected=true],.seg label:has(input:checked){background:var(--card);color:var(--text);box-shadow:var(--shadow)}
.seg label input{accent-color:var(--accent)}
.seg-field{border:0;padding:0;margin:0}
.seg-field legend{font-weight:600;margin:.2rem 0 .1rem}
.color-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.color-row .check{margin:.6rem 0}
.color-row input[type=color]{width:52px;height:36px;border-radius:8px;border:1px solid var(--line)}
.color-row input[type=color]:disabled{opacity:.35}
/* Light / dark: a small pill with a sun and a moon; the current one is highlighted. */
.look-toggle{display:inline-flex;align-items:center;gap:2px;padding:3px;margin:0;border-radius:999px;background:var(--card2);border:1px solid var(--line)}
.look-toggle button{display:grid;place-items:center;width:30px;height:26px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--muted);cursor:pointer;transition:background .2s,color .2s}
.look-toggle svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.look-toggle .look-dark svg{fill:currentColor;stroke:none}
.look-toggle button:hover{color:var(--text)}
.look-toggle .look-light,:root[data-theme=dark] .look-toggle .look-dark{background:var(--card);color:var(--accent-text);box-shadow:0 1px 4px rgba(0,0,0,.18)}
:root[data-theme=dark] .look-toggle .look-light{background:transparent;color:var(--muted);box-shadow:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .look-toggle .look-dark{background:var(--card);color:var(--accent-text);box-shadow:0 1px 4px rgba(0,0,0,.25)}
  :root:not([data-theme=light]) .look-toggle .look-light{background:transparent;color:var(--muted);box-shadow:none}
}
.brand{background:none}
.feedback-card{display:flex;gap:14px;align-items:center;color:var(--text);text-decoration:none;margin-top:18px}
.feedback-card:hover{border-color:var(--accent)}
.fb-icon{font-size:1.6rem;line-height:1}
.burger:focus-visible,.nav-links a:focus-visible,.signout:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Countdowns on a board's page */
.event-row{border:1px solid var(--line);border-radius:12px;padding:4px 14px 6px;margin:0 0 12px}
.event-row .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.event-row input[type=color]{width:100%;height:44px;padding:2px}
.event-row .row{justify-content:space-between;margin:.6rem 0 .2rem}
@media (max-width:420px){.event-row .two{grid-template-columns:1fr}}
/* Collapsible sections on a board's page (owner, Nov 3, 2026); the preview above them always shows. */
details.sec{padding:0}
details.sec>summary{display:flex;align-items:center;gap:10px;padding:14px 16px;list-style:none;font-weight:700}
details.sec>summary::-webkit-details-marker{display:none}
details.sec>summary::after{content:"";width:9px;height:9px;flex:0 0 auto;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin:-4px 2px 0 0;transition:transform .15s}
details.sec[open]>summary::after{transform:rotate(-135deg);margin-top:4px}
details.sec>summary .sec-t{font-size:1.05rem;white-space:nowrap}
details.sec>summary .sec-s{margin-left:auto;font-weight:500;font-size:.85rem;color:var(--muted);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
details.sec[open]>summary{border-bottom:1px solid var(--line)}
details.sec>:not(summary){margin-left:16px;margin-right:16px}
details.sec>:last-child{margin-bottom:16px}
details.sec>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r)}
.sec-all{text-align:right;margin:.2rem 0 -.2rem}
@media (prefers-reduced-motion:reduce){details.sec>summary::after{transition:none}}
html:has(.sticky-save){scroll-padding-bottom:120px}   /* keep focused / scrolled-to fields clear of the Save bar */
.event-active{margin-top:.9rem}
/* Clock & weather on a board's page */
.wx-find input{flex:1 1 12em;min-width:0}
.wx-results{display:flex;flex-direction:column;gap:6px;margin:6px 0}
.wx-results .pick{width:100%;text-align:left}
/* The StellarKickoff logo (owner, Nov 3, 2026): navy version in the light look, light version in the dark look. */
.logo-d{display:none!important}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .logo-l{display:none!important}:root:not([data-theme=light]) .logo-d{display:inline-block!important}}
:root[data-theme=dark] .logo-l{display:none!important}:root[data-theme=dark] .logo-d{display:inline-block!important}
.brand-mark{height:34px;width:auto}
.logo-hero{width:min(220px,60vw);height:auto;margin:4px 0 6px}
.board-wrap{display:flex;flex-direction:column;gap:4px}.board-dup{align-self:flex-end;margin-right:6px}

/* Lists of items (owner, Nov 3, 2026: "sleek like the other table lines ... for all pages"): every row is at most two
   lines, the name and its tags on the first, the details on the second, the buttons on the right. */
.vlist{list-style:none;margin:0;padding:0}
.vlist li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;row-gap:3px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.vlist li:first-child{border-top:0;padding-top:4px}
.vl-1,.vl-2{grid-column:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vl-1{display:flex;align-items:center;gap:8px}
.vl-1>*{flex:0 0 auto}.vl-1 .small{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis}
.vl-1 code,.vl-2 code{font-size:.82rem}
.vl-act{grid-column:2;grid-row:1 / span 2;display:flex;gap:8px;align-items:center;justify-content:flex-end}
.vl-act form{display:flex;gap:8px;margin:0;align-items:center}
.vlist .dot{margin-right:0}
@media (max-width:600px){.vl-act{grid-column:1;grid-row:auto;justify-content:flex-start;flex-wrap:wrap;margin-top:6px}.vl-1{flex-wrap:wrap;white-space:normal}}
/* Buttons: two sizes, one shape (owner, Nov 3, 2026: "standardize the button sizing and styling"). */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:12px;line-height:1.2;white-space:nowrap;vertical-align:middle;box-sizing:border-box}
.btn.small{min-height:36px;padding:0 14px;font-size:.9rem;border-radius:10px}
.btn.wide{display:flex;width:100%}
.btn.ghost,.btn.secondary{background:var(--card);color:var(--text);border:1px solid var(--line)}
.btn.ghost:hover,.btn.secondary:hover{border-color:var(--accent);color:var(--accent-text)}
.btn.danger{background:transparent;color:var(--bad);border:1px solid var(--badline)}
.btn.danger:hover{background:var(--badbg)}
.vbtn{width:9.5em;padding-left:6px;padding-right:6px}
.vl-2 .seen{color:var(--text);font-weight:600}
select.sel-sm{min-height:36px;height:36px;padding:0 30px 0 10px;font-size:.9rem;border-radius:10px;width:12.5em;margin:0}
/* A board's facts (About this board). */
.kv{margin:4px 0 10px}
.kv>div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.kv>div:first-child{border-top:0}
.kv dt{color:var(--muted);font-weight:600}.kv dd{margin:0;text-align:right}
/* Install buttons' "can't do this here" notes stay inside the card. */
esp-web-install-button .flash{display:block;margin:8px 0 0}
.warn-note{background:var(--warnbg);border:1px solid var(--warnline);border-radius:10px;padding:.55em .8em;margin:.6em 0 0}
.gift-note{margin:.6em 0;padding:.6em .9em;border-left:3px solid var(--accent);background:var(--card2);border-radius:8px;font-style:italic}
.welcome-card{border:2px solid var(--accent)}