/* Celebrate Highwood board hub. Same design system as Highwood HQ:
   Bricolage Grotesque + Hanken Grotesk, canvas page, white and cream cards,
   the dark stat band, pill tabs, and the logo's red and orange ovals. */
:root{
  --red:#b42424;--red2:#8e1b1b;--orange:#f06c24;--yellow:#ffc233;--cream:#fbf3e8;--canvas:#e7e3da;--ink:#1f1813;
  --surface:#fff;--chip:#f6e9d8;--chip-warm:#f6e3cf;--line:#ecdcc6;--line2:#d5c3a9;
  --fg:#1f1813;--fg2:#5b4f44;--fg3:#6b5d4f;
  --on-ink:#fbf3e8;--on-ink2:#d8c9b6;--on-ink3:#a89681;--ink-line:#3f352c;
  --done:#1f8a4c;--done2:#17703d;
  --kraft:repeating-linear-gradient(45deg,#f0e2cd,#f0e2cd 10px,#ead9c0 10px,#ead9c0 20px);
  --shadow-card:0 4px 10px -4px rgba(31,24,19,.3);
  --shadow-float:0 12px 30px -10px rgba(31,24,19,.3);
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Hanken Grotesk',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0}
body{background:var(--canvas);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.5}
a{color:var(--red)}
a:hover{color:var(--red2)}
h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;margin:0;color:var(--ink);text-wrap:balance}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
[hidden]{display:none!important}
.emo{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-style:normal;font-weight:400}

/* The logo's ovals as a small row: footer mark and the loading state. */
.fan{display:inline-flex;gap:7px}
.fan i{width:22px;height:32px;border-radius:50%;background:var(--red)}
.fan i:nth-child(even){background:var(--orange)}
.fan.sm{gap:4px}
.fan.sm i{width:13px;height:19px}

/* Masthead: a dark bar that stays put while the page scrolls. Logo, page tabs, who is signed in. */
nav.top{position:sticky;top:0;z-index:30;background:var(--ink);color:var(--on-ink);padding:10px max(16px,calc((100% - 1008px)/2));display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
nav.top .brand{display:block;line-height:0;border-radius:6px}
nav.top .brand img{height:40px;width:auto}
nav.top .tabs{order:2;flex:1 1 auto}
nav.top .who{order:3;margin-left:auto;font-size:14px;font-weight:600;color:var(--on-ink2);white-space:nowrap}
nav.top .who a{font-weight:700;color:var(--on-ink)}
nav.top .menu{display:none;order:1;margin-left:auto;align-items:center;gap:10px;background:transparent;border:2px solid #5d5046;border-radius:999px;color:var(--on-ink);width:46px;height:42px;justify-content:center;padding:0;cursor:pointer}
nav.top .menu .bars{width:18px;height:2px;border-radius:2px;background:currentColor;box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor}
nav.top.open .menu{background:var(--on-ink);border-color:var(--on-ink);color:var(--ink)}
nav.top .tab{border-color:#5d5046;color:var(--on-ink);padding:7px 15px}
nav.top .tab:hover{background:var(--on-ink);border-color:var(--on-ink);color:var(--ink)}
nav.top .tab.on,nav.top .tab.on:hover{background:var(--red);border-color:var(--red);color:#fff}
.tabs{display:flex;flex-wrap:wrap;gap:8px}
.tab{display:inline-flex;align-items:center;gap:7px;font-family:var(--body);font-size:14.5px;font-weight:700;line-height:1.2;border:2px solid var(--ink);background:transparent;color:var(--ink);border-radius:999px;padding:9px 18px;cursor:pointer;text-decoration:none;transition:transform .1s ease}
.tab:hover{background:var(--ink);color:var(--on-ink)}
.tab:active{transform:translateY(1px)}
.tab.on,.tab.on:hover{background:var(--red);border-color:var(--red);color:#fff}

.wrap{max-width:1040px;margin:0 auto;padding:30px 16px 56px;display:flex;flex-direction:column;gap:30px}

/* Page header */
header.page{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 24px}
header.page .titles{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;max-width:780px}
.eyebrow{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red);background:var(--chip-warm);padding:7px 14px;border-radius:17px}
header.page h1{font-size:clamp(32px,6.2vw,48px);font-weight:800;line-height:1.02}
header.page .side{font-size:14.5px;color:var(--fg2)}
.hello{font-size:17px;color:var(--fg2);max-width:62ch}
.hello a{font-weight:700}
.lede{font-size:15.5px;color:var(--fg2);max-width:62ch}

/* Dark stat band */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px 20px;background:var(--ink);border-radius:24px;padding:28px 30px;color:var(--on-ink)}
.stat{display:block;min-width:0;color:inherit;text-decoration:none}
a.stat:hover{color:inherit}
a.stat:hover .l{text-decoration:underline}
.stat .n{font-family:var(--display);font-weight:800;font-size:46px;line-height:1;color:var(--orange);font-variant-numeric:tabular-nums}
.stat.hot .n{color:#ff6b57}
.stat .l{font-size:15px;font-weight:600;color:var(--on-ink);margin-top:6px}
.stat .s{font-size:13px;color:var(--on-ink3);margin-top:2px}
.stats .label{color:var(--orange)}
.bar{height:10px;border-radius:999px;background:var(--ink-line);overflow:hidden;margin-top:12px}
.bar i{display:block;height:100%;background:var(--orange);border-radius:999px;transition:width .4s}
.stat .bar{max-width:220px}

/* Sections */
.block{display:flex;flex-direction:column;gap:14px}
.sections{display:flex;flex-direction:column;gap:30px}
.block h2{font-size:28px;font-weight:700;letter-spacing:-.01em}
.blockhead{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
.h2sub{font-size:14.5px;color:var(--fg3);margin-top:-8px}

/* Countdown cards */
.events{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:16px}
.evcard{display:flex;flex-direction:column;max-width:440px;background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;color:inherit;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
a.evcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-float);color:inherit}
.evcard .photo{background:var(--kraft);height:74px;position:relative;display:flex;align-items:center;justify-content:center;font-size:34px}
.evcard .chip{position:absolute;right:10px;bottom:-18px;background:#fff;border-radius:10px;padding:6px 10px;min-width:52px;text-align:center;box-shadow:var(--shadow-card)}
.evcard .chip .m{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fg3)}
.evcard .chip .d{font-family:var(--display);font-weight:800;font-size:20px;line-height:1;color:var(--ink)}
.evcard .body{padding:22px 16px 16px;flex:1;display:flex;flex-direction:column}
.evcard h3{font-size:19px;font-weight:700;letter-spacing:-.01em}
.evcard .meta{font-size:13.5px;font-weight:600;color:var(--fg3);margin-top:2px}
.evcard .body .d{font-size:14px;color:var(--fg2);margin-top:6px}
.evcard .count{margin-top:auto;padding-top:12px;display:flex;align-items:baseline;gap:7px}
.evcard .count .n{font-family:var(--display);font-weight:800;font-size:44px;line-height:1;color:var(--red)}
.evcard.alt .count .n{color:var(--orange)}
.evcard .count .u{font-size:14.5px;font-weight:600;color:var(--fg3)}

/* Cream columns */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:16px}
.col{background:var(--cream);border:1px solid var(--line);border-radius:24px;padding:20px 22px;display:flex;flex-direction:column;gap:10px;min-width:0}
.col h3{font-size:19px;font-weight:700;letter-spacing:-.01em}
.col ul{list-style:none;margin:0;padding:0}
.col li{font-size:14.5px;color:var(--fg2);padding:10px 0;border-bottom:1px solid var(--line)}
.col li:first-child{padding-top:2px}
.col li:last-child{border-bottom:none}
.col li b{color:var(--ink);font-weight:700}
.col .more{align-self:flex-start;margin-top:auto;font-size:14.5px;font-weight:700;text-decoration:none}
.col .more:hover{text-decoration:underline}
.col input[type=text],.col textarea{background:#fff}

/* White cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:22px 24px;display:flex;flex-direction:column;gap:12px;min-width:0}
.card.rows{padding:6px 0;gap:0}
.card h2{font-size:28px;font-weight:800;line-height:1.05}
.card h3{font-size:17px;font-weight:700;letter-spacing:-.01em;margin-top:6px}
.cardtop{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px 12px}
.two{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start}
.muted{color:var(--fg2);font-size:14.5px}
.small{font-size:13px;color:var(--fg3)}
.label{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg3)}
.tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--chip);color:var(--fg3);border-radius:999px;padding:3px 10px;vertical-align:1px;white-space:nowrap}
.tag.wait{background:var(--yellow);color:var(--ink)}
ol.agenda{list-style:none;margin:0;padding:0;counter-reset:item}
ol.agenda li{counter-increment:item;display:grid;grid-template-columns:30px minmax(0,1fr);align-items:baseline;padding:9px 0;border-bottom:1px solid var(--chip)}
ol.agenda li:last-child{border-bottom:none}
ol.agenda li::before{content:counter(item);font-family:var(--display);font-weight:800;font-size:18px;color:var(--red)}
.stack{display:flex;flex-direction:column;gap:6px}

/* Rows inside a card */
.row{display:grid;grid-template-columns:110px minmax(0,1fr);gap:4px 14px;padding:14px 22px;border-bottom:1px solid var(--chip)}
.row:last-child{border-bottom:none}
.row .when{font-family:var(--display);font-weight:700;font-size:15px;color:var(--red)}
.row .t{font-weight:700;color:var(--ink)}
.row .d{font-size:14.5px;color:var(--fg2)}
.row .note{font-style:italic}
.row.task{grid-template-columns:30px minmax(0,1fr)}
.row.task input[type=checkbox]{width:22px;height:22px;margin:1px 0 0;accent-color:var(--done);cursor:pointer}
.row.done .t{text-decoration:line-through;color:var(--fg3)}
.hand{padding:12px 0;border-top:1px solid var(--line)}
.hand .t{font-weight:700;color:var(--ink)}

/* Buttons and pills */
.btn{border:0;border-radius:999px;padding:10px 18px;font-weight:700;font-size:14.5px;cursor:pointer;background:var(--red);color:#fff;text-decoration:none;display:inline-block;line-height:1.2;transition:transform .1s ease}
.btn:hover{background:var(--red2);color:#fff}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink);padding:8px 16px}
.btn.ghost:hover{background:var(--ink);color:var(--on-ink)}
.btn.link{background:transparent;color:var(--red);padding:4px 0;font-size:13.5px}
.btn.link:hover{background:transparent;color:var(--red2);text-decoration:underline}
.btn.small{padding:7px 14px;font-size:13.5px}
.btn:disabled{opacity:.5;cursor:default}
.pill{display:inline-block;background:var(--chip);border:0;border-radius:999px;padding:5px 12px;font-size:13.5px;font-weight:600;line-height:1.2;color:var(--ink)}
.pill.open{background:transparent;border:1.5px dashed var(--line2);color:var(--fg2);font-weight:700;padding:3.5px 12px;cursor:pointer}
.pill.open:hover,.hand .pill.open{background:var(--red);border:1.5px solid var(--red);color:#fff}
.hand .pill.open{padding:6px 15px}
.hand .pill.open:hover{background:var(--red2);border-color:var(--red2)}
.pill.mine{background:var(--done2);color:#fff;font-weight:700;cursor:pointer}
.pill.mine:hover{background:#115a30}
button.pill:disabled{opacity:.5;cursor:default}
.names{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:6px}
.meta .who{border:1.5px solid var(--red);color:var(--red);border-radius:999px;padding:2px 10px;font-size:12.5px;font-weight:700}
.meta .area{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fg3)}
.meta .ev{font-size:12px;font-weight:600;color:var(--fg2);background:var(--chip);border-radius:999px;padding:3px 9px}
.status{display:inline-block;border-radius:999px;padding:3px 10px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--chip);color:var(--fg3);white-space:nowrap}
.status.good{background:var(--done2);color:#fff}
.status.warm{background:var(--yellow);color:var(--ink)}

/* Shifts */
.shift{display:grid;grid-template-columns:150px minmax(0,1.3fr) minmax(0,1fr);gap:10px 18px;padding:16px 22px;border-bottom:1px solid var(--chip);align-items:start}
.shift:last-child{border-bottom:none}
.shift .when{font-family:var(--display);font-weight:700;font-size:15.5px;color:var(--red)}
.shift .t{font-weight:700;color:var(--ink)}
.shift .d{font-size:14.5px;color:var(--fg2)}
.shift .side{display:flex;flex-direction:column;gap:8px}
.meterline{display:flex;align-items:center;gap:10px}
.meter{display:inline-flex;gap:4px}
.meter i{width:12px;height:18px;border-radius:50%;border:2px solid var(--line2)}
.meter i.on{border-color:transparent;background:var(--red)}
.meter i.on:nth-child(even){background:var(--orange)}

/* Work plan summary: the stat band with a month strip */
.stats.summary{grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr);align-items:end;gap:22px 30px}
.summary .big{font-family:var(--display);font-weight:800;font-size:46px;line-height:1;margin-top:10px;color:var(--orange);font-variant-numeric:tabular-nums}
.summary .big small{font-family:var(--body);font-size:16px;font-weight:600;color:var(--on-ink2);margin-left:8px}
.summary .muted{color:var(--on-ink2);font-size:14px;margin-top:10px}
.months{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.mtile{background:transparent;border:1.5px solid var(--ink-line);border-radius:14px;padding:10px 9px 9px;text-align:left;cursor:pointer;color:var(--on-ink);display:flex;flex-direction:column;gap:6px;min-width:0}
.mtile:hover,.mtile.on{border-color:var(--orange)}
.mtile.on{background:#342b23}
.mtile .mn{font-family:var(--display);font-weight:700;font-size:15px}
.mtile .mc{font-size:12.5px;color:var(--on-ink2);font-variant-numeric:tabular-nums}
.mtile .mb{height:5px;border-radius:999px;background:var(--ink-line);overflow:hidden}
.mtile .mb i{display:block;height:100%;background:var(--orange)}
.mtile.full .mb i{background:var(--done)}

/* Sponsor table */
.tablecard{padding:8px 24px}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th{text-align:left;padding:12px 10px 10px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg3);border-bottom:2px solid var(--ink)}
td{padding:12px 10px;border-bottom:1px solid var(--chip);vertical-align:top;color:var(--fg2)}
tbody tr:last-child td{border-bottom:none}
th:first-child,td:first-child{padding-left:0}
td:first-child{font-weight:700;color:var(--ink)}
.scroll{overflow-x:auto}

/* Forms */
form.inline{display:flex;flex-direction:column;gap:10px}
form.inline .fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:10px}
label.f{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fg3)}
input[type=text],input[type=password],textarea,select{width:100%;background:var(--cream);border:1.5px solid var(--line2);border-radius:12px;padding:10px 13px;font-size:16px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--fg)}
textarea{min-height:76px;resize:vertical}
select{width:auto;border:2px solid var(--ink);border-radius:999px;background-color:transparent;font-size:14.5px;font-weight:700;padding:8px 14px;cursor:pointer}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.err{color:var(--red);font-size:14px;font-weight:600}
.err:empty{display:none}

/* Comments */
.comments{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:6px}
.comments form{align-self:stretch}
.comment{font-size:14.5px;background:var(--chip);border-radius:14px 14px 14px 4px;padding:9px 13px}
.comment b{font-weight:700}
.comment .small{display:block}

.toast{position:fixed;left:50%;bottom:22px;z-index:40;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--on-ink);border-radius:999px;padding:11px 20px;font-size:14.5px;font-weight:600;opacity:0;transition:.2s;pointer-events:none;max-width:calc(100% - 32px);text-align:center;box-shadow:var(--shadow-float)}
.toast.show{opacity:1;transform:translateX(-50%)}
.confetto{position:fixed;z-index:50;width:10px;height:15px;border-radius:50%;pointer-events:none}

/* Loading and errors */
.state{display:flex;flex-direction:column;align-items:center;gap:14px;padding:34px 24px;border:2px dashed var(--line2);border-radius:24px;color:var(--fg2);text-align:center}
.state .fan i{animation:hop 1s ease-in-out infinite}
.state .fan i:nth-child(2){animation-delay:.12s}
.state .fan i:nth-child(3){animation-delay:.24s}
.state .fan i:nth-child(4){animation-delay:.36s}
@keyframes hop{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-9px)}}

footer.foot{max-width:1040px;margin:0 auto;padding:0 16px 36px;font-size:13.5px;color:var(--fg3);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px 16px}
footer.foot::before{content:"";flex:1 0 100%;border-top:1px solid var(--line2);margin-bottom:8px}
footer.foot .fan{flex:1 0 100%}

/* Sign-in */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px 16px 44px}
.login .box{width:100%;max-width:460px;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:30px 28px;display:flex;flex-direction:column;gap:18px;box-shadow:var(--shadow-float)}
.login img{height:78px;width:auto;align-self:flex-start}
.login h1{font-size:32px;font-weight:800;line-height:1.05}
.login .lede{margin-top:6px}
.field{display:flex;flex-direction:column;gap:8px}
.showpw{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-size:14.5px;color:var(--fg2);cursor:pointer}
.showpw input{width:18px;height:18px;margin:0;accent-color:var(--red)}
.login .btn{padding:13px 24px;font-size:16px}
.namechips{display:flex;flex-wrap:wrap;gap:7px}
.namechip{border:0;background:var(--chip);color:var(--ink);border-radius:999px;padding:8px 14px;font-size:14.5px;font-weight:700;line-height:1.2;cursor:pointer}
.namechip:hover{background:#efd9bd}
.namechip[aria-pressed=true]{background:var(--red);color:#fff}
.namechip.other{background:transparent;box-shadow:inset 0 0 0 2px var(--line2);font-weight:600}
.namechip.other[aria-pressed=true]{background:var(--ink);box-shadow:none;color:var(--on-ink)}

@media(max-width:760px){
  .two{grid-template-columns:1fr}
  .stats.summary{grid-template-columns:1fr}
  .months{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:680px){
  /* Phone: one slim bar with a Menu button; the pages drop down from it */
  nav.top{padding:8px 16px;gap:0 12px}
  nav.top .brand img{height:38px}
  nav.top .menu{display:inline-flex}
  nav.top .tabs,nav.top .who{display:none}
  nav.top.open .tabs{display:flex;flex-direction:column;flex:1 0 100%;gap:4px;padding:12px 0 6px}
  nav.top.open .tab{justify-content:flex-start;border-color:transparent;border-radius:12px;padding:12px 14px;font-size:16px;gap:10px}
  nav.top.open .who{display:block;order:3;flex:1 0 100%;margin:0;padding:12px 14px 8px;border-top:1px solid var(--ink-line);font-size:15px}
  .tab{font-size:14px;padding:8px 13px;gap:6px}
  .stats{padding:22px 22px;gap:22px 16px;grid-template-columns:repeat(auto-fit,minmax(105px,1fr))}
  .stat .n,.summary .big{font-size:40px}
  .block h2{font-size:25px}
  .card{padding:20px 18px}
  .card.rows{padding:4px 0}
  .row{padding:14px 18px}
  .shift{grid-template-columns:1fr;padding:16px 18px}
  .tablecard{padding:4px 18px}
  /* Sponsor table becomes one stacked block per sponsor */
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  table,tbody,tr,td{display:block}
  tr{padding:12px 0;border-bottom:1px solid var(--chip)}
  tbody tr:last-child{border-bottom:none}
  td{border:0;padding:1px 0}
  td:first-child{font-size:16px;padding-bottom:3px}
  td:empty{display:none}
  td[data-label]:not(:first-child):not(.bare)::before{content:attr(data-label) ": ";font-weight:700;color:var(--fg3)}
  td.bare{padding:4px 0}
}
@media(max-width:520px){
  .row{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .state .fan i{animation:none}
  .tab,.btn,.evcard,.bar i,.toast{transition:none}
  a.evcard:hover{transform:none}
}