:root{
  --bg:#F7F6F2; --surface:#FFFFFF; --ink:#1B2327; --ink-2:#4A5459; --muted:#7C858A;
  --rule:#E1DDD5; --rule-2:#EEEBE4;
  --accent:#2E5B4F; --accent-ink:#FFFFFF; --accent-soft:#E4EFE9;
  --open:#9A5F0B; --open-soft:#F8EBD4;
  --late:#A93B26; --late-soft:#F9E4DE;
  --na:#9AA0A3; --focus:#2E5B4F;
  --gutter:max(24px, calc(50vw - 456px));
  color-scheme:light;
}*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:16px/1.5 "IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
main{max-width:960px;margin:0 auto;padding:44px 24px 110px}
h1,h2,h3{font-family:"Bricolage Grotesque","IBM Plex Sans",system-ui,sans-serif;text-wrap:balance;margin:0}
h1{font-size:clamp(34px,5vw,48px);font-weight:700;line-height:1.05;letter-spacing:-.015em;font-variation-settings:"opsz" 96}
h2{font-size:24px;font-weight:700;letter-spacing:-.01em;font-variation-settings:"opsz" 40}
.eyebrow{margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.lede{max-width:64ch;margin:14px 0 0;color:var(--ink-2);font-size:17px}
.lede b{color:var(--ink);font-weight:600}
.top{padding-bottom:28px;border-bottom:1px solid var(--rule)}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
.stat{display:flex;flex-direction:column;gap:2px;text-align:left;padding:14px 16px;border:1px solid var(--rule);border-radius:6px;background:var(--surface);cursor:pointer}
.stat:hover{border-color:var(--ink-2)}
.stat[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.stat .k{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.stat .v{font-family:"Bricolage Grotesque",sans-serif;font-size:30px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.stat .v small{font-size:15px;font-weight:500;color:var(--muted);margin-left:4px}
.stat.warn .v{color:var(--open)}
.stat.late .v{color:var(--late)}
.stat.good .v{color:var(--accent)}

.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:18px}
.chip{border:1px solid var(--rule);background:transparent;border-radius:999px;padding:5px 12px;font-size:13px;font-weight:500;color:var(--ink-2);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.toolbar .spacer{flex:1}

.banner{margin:20px 0 0;padding:12px 16px;border-radius:6px;background:var(--open-soft);color:var(--ink);border:1px solid var(--open);font-size:15px}

section{margin-top:44px}
.sec-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.sec-head .count{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.sec-head .spacer{flex:1}
.sec-blurb{margin:6px 0 16px;max-width:66ch;color:var(--ink-2)}

/* attention list */
.attn{margin-top:30px;border:1px solid var(--rule);border-left:4px solid var(--open);border-radius:6px;background:var(--surface);padding:16px 18px 10px}
.attn.has-late{border-left-color:var(--late)}
.attn.calm{border-left-color:var(--accent)}
.attn h2{font-size:18px}
.attn .sub{margin:2px 0 10px;font-size:14px;color:var(--muted)}
.attn ul{list-style:none;margin:0;padding:0}
.attn li{display:grid;grid-template-columns:120px minmax(0,1fr) 170px 100px;gap:0 14px;align-items:center;padding:8px 0;border-top:1px solid var(--rule-2)}
.attn li .job{font-weight:500}
.attn li .where{display:block;font-size:13px;color:var(--muted);font-weight:400}
.attn li .own{font-size:14px}
.attn li .own.none{color:var(--open);font-weight:600}
.attn li .done{justify-content:flex-end}
.due{display:inline-block;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;font-weight:500;border-radius:4px;padding:2px 7px;white-space:nowrap;background:var(--rule-2);color:var(--ink-2);font-variant-numeric:tabular-nums}
.due.soon{background:var(--open-soft);color:var(--open)}
.due.late{background:var(--late-soft);color:var(--late)}
.due.none{background:transparent;color:var(--muted);padding-left:0}

/* buttons */
.btn{border:1px solid var(--rule);background:var(--surface);border-radius:5px;padding:6px 12px;font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--ink-2)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--ink-2);padding:6px 8px}
.btn.ghost:hover{color:var(--ink);background:var(--rule-2)}
.btn.danger{color:var(--late);border-color:transparent;background:transparent}
.btn.danger:hover{background:var(--rule-2)}
.btn.small{font-size:13px;padding:4px 9px}

/* key info */
.kv{display:grid;grid-template-columns:repeat(2,1fr);gap:0 32px;margin:0;border-top:1px solid var(--rule)}
.kv > div{display:grid;grid-template-columns:1fr;gap:1px;padding:10px 0;border-bottom:1px solid var(--rule-2)}
.kv dt{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.kv dd{margin:0;font-size:15px;overflow-wrap:anywhere}
.kv dd.empty{color:var(--muted);font-style:italic}
.info-form{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 24px;margin-top:8px}
.info-form label,.editor label,.export label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.info-form input,.editor input,.editor select,.export input{border:1px solid var(--rule);background:var(--surface);border-radius:5px;padding:7px 10px;font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink);min-width:0}
.info-form .full,.editor .full{grid-column:1/-1}
.form-actions{grid-column:1/-1;display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}
.form-actions .spacer{flex:1}
.newline{display:grid;grid-template-columns:1fr 1.4fr;gap:8px}

/* export */
.export{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:end;margin-top:16px;padding:14px 16px;border:1px solid var(--rule);border-radius:6px;background:var(--surface)}
.export p{grid-column:1/-1;margin:0 0 4px;font-size:14px;color:var(--ink-2)}

/* task rows */
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.row{display:grid;grid-template-columns:14px minmax(0,1fr) 170px 190px 110px;gap:0 16px;align-items:start;padding:12px 0;border-bottom:1px solid var(--rule-2)}
.row .dot{width:10px;height:10px;border-radius:50%;margin-top:7px;background:var(--open)}
.row.is-covered .dot,.row.is-service .dot,.row.is-done .dot{background:var(--accent)}
.row.is-na .dot{background:transparent;border:1.5px solid var(--na)}
.row.is-na .name,.row.is-done .name{color:var(--muted);text-decoration:line-through}
.row .name{font-weight:500;display:block}
.row .note{display:block;color:var(--ink-2);font-size:14px;margin-top:2px;max-width:60ch}
.row .when{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.cad{display:inline-block;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;color:var(--ink-2);background:var(--rule-2);border-radius:4px;padding:2px 7px;white-space:normal}
.win{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.who{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:30px}
.owner{font-weight:600}
.owner .tag{font-weight:500;color:var(--muted)}
.owner.na{color:var(--muted);font-weight:400}
.donecol{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
.editor{padding:14px 16px 14px 30px;border-bottom:1px solid var(--rule-2);background:var(--surface);display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:10px 16px}
.editor input,.editor select{background:var(--bg)}
.editor .full{grid-column:1/-1}
.editor .half{grid-column:span 2}
.add{margin-top:10px}
.empty-note{padding:18px 0;color:var(--muted)}

#toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);opacity:0;background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:6px;font-size:14px;pointer-events:none;transition:opacity .2s,transform .2s;max-width:90vw}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion:reduce){#toast{transition:none}}

footer{margin-top:64px;padding-top:18px;border-top:1px solid var(--rule);color:var(--muted);font-size:13.5px;max-width:66ch}

@media (max-width:820px){
  main{padding:28px 16px 100px}
  .stats{grid-template-columns:1fr}
  .kv,.info-form{grid-template-columns:1fr}
  .row{grid-template-columns:14px minmax(0,1fr);gap:6px 12px}
  .row .when,.row .who,.row .donecol{grid-column:2}
  .row .when{flex-direction:row;flex-wrap:wrap;align-items:center}
  .donecol{flex-direction:row;align-items:center;justify-content:flex-start}
  .editor{grid-template-columns:1fr 1fr;padding-left:16px}
  .editor .half{grid-column:1/-1}
  .attn li{grid-template-columns:1fr;gap:4px}
  .attn li .done{justify-content:flex-start}
  .export{grid-template-columns:1fr}
}

/* sign-in box and who-bar (added for the server version) */
.whobar{margin:20px 0 0;font-size:14.5px;color:var(--ink-2);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.whobar b{color:var(--ink)}
.whobar .tag{color:var(--muted)}
.banner.signin{background:var(--surface);border-color:var(--rule)}
.signin-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.signin-head .spacer{flex:1}
.signin-form{display:grid;grid-template-columns:1fr auto;gap:10px 12px;align-items:end;margin-top:12px}
.signin-form.three{grid-template-columns:1fr 1fr 1.2fr auto}
.signin-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.signin-form input{border:1px solid var(--rule);background:var(--bg);border-radius:5px;padding:7px 10px;font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink);min-width:0}
.signin-form .hint{grid-column:1/-1;margin:0;font-size:13.5px;color:var(--muted)}
main noscript ul{padding-left:20px}
main a{color:var(--accent)}
@media (max-width:820px){
  .signin-form,.signin-form.three{grid-template-columns:1fr}
}

/* roles, views, crew page (added with section owners) */
.views{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.chip.nav{text-decoration:none;display:inline-block}
.badge{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;border-radius:4px;padding:2px 7px;background:var(--rule-2);color:var(--ink-2);white-space:nowrap;margin-right:6px}
.badge.owner{background:var(--accent-soft);color:var(--accent);text-transform:none;letter-spacing:0;font-size:13px}
.badge.warn{background:var(--open-soft);color:var(--open)}
.owner-line{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}
.banner.alert{background:var(--late-soft);border-color:var(--late);color:var(--ink)}
.banner.alert a{color:var(--late);font-weight:600}
.blurb-form,.owner-form{display:grid;gap:8px 12px;align-items:end;margin:8px 0 14px;padding:12px 14px;border:1px solid var(--rule);border-radius:6px;background:var(--surface)}
.blurb-form{grid-template-columns:1fr auto auto}
.owner-form{grid-template-columns:1fr auto 1fr 1fr}
.owner-form .or{font-size:13px;color:var(--muted);padding-bottom:9px}
.owner-form label,.blurb-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.owner-form input,.owner-form select,.blurb-form input{border:1px solid var(--rule);background:var(--bg);border-radius:5px;padding:7px 10px;font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink);min-width:0}
.owner-form .form-actions{grid-column:1/-1;margin-top:0}
.owner-editor{display:block;padding:0;border:0;background:transparent}
.owner-editor .owner-form{margin:0 0 4px}
.rows.plain .row{grid-template-columns:minmax(0,1fr) auto 150px;align-items:center}
.rows.plain .row .who{justify-content:flex-start}
.row.is-mine .name{color:var(--accent)}
.invite-form{margin-top:16px;padding:14px 16px;border:1px solid var(--rule);border-radius:6px;background:var(--surface)}
.invite-form select{border:1px solid var(--rule);background:var(--bg);border-radius:5px;padding:7px 10px;font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink)}
.btn.google{text-decoration:none;display:inline-block;background:var(--surface)}
.form-actions .hint{font-size:13px;color:var(--muted)}
.prefs{margin-top:22px;display:grid;gap:14px;max-width:60ch}
.prefs fieldset{border:1px solid var(--rule);border-radius:6px;padding:10px 14px;display:grid;gap:8px}
.prefs legend{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:0 4px}
.prefs .check{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.prefs .check input{margin-top:5px}
.prefs .btn{justify-self:start}
@media (max-width:820px){
  .owner-form,.blurb-form{grid-template-columns:1fr}
  .rows.plain .row{grid-template-columns:1fr}
  .rows.plain .row .who,.rows.plain .row .donecol{grid-column:1}
}

/* Phase 2: households, house registry, join gate */
.eyebrow a.plain{color:inherit;text-decoration:none}
.eyebrow a.plain:hover{text-decoration:underline}
.badge.sens-public{background:var(--accent-soft);color:var(--accent)}
.badge.sens-crew{background:var(--open-soft);color:var(--open)}
.badge.sens-admin{background:var(--late-soft);color:var(--late)}
.fact-chip{display:inline-block;font-size:13px;color:var(--ink-2);background:var(--rule-2);border-radius:4px;padding:2px 7px;margin:3px 6px 0 0}
.fact-chip b{color:var(--ink);font-weight:600}
.row .note.equip{margin-top:4px}
.row .note.equip a{color:var(--accent);font-weight:500}
.facts-inline{padding:4px 0 12px;border-bottom:1px solid var(--rule-2)}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin:12px 0}
.photo-card{border:1px solid var(--rule);border-radius:6px;background:var(--surface);padding:8px;display:flex;flex-direction:column;gap:8px}
.photo-card img{width:100%;height:auto;border-radius:4px;display:block}
.photo-actions{display:flex;gap:6px;flex-wrap:wrap}
.photo-actions form{display:inline}
.fact-review{display:grid;grid-template-columns:1fr 1.4fr auto auto;gap:8px 12px;padding:10px 0;border-top:1px solid var(--rule-2)}
.question-row{display:grid;grid-template-columns:2fr 1fr auto;gap:8px 12px;align-items:end;padding:8px 0;border-top:1px solid var(--rule-2)}
.check-line{flex-direction:row !important;align-items:center;gap:8px;text-transform:none !important;letter-spacing:0 !important;font-size:14px !important;font-weight:400 !important;color:var(--ink) !important}
.info-form textarea,.info-form select{border:1px solid var(--rule);background:var(--surface);border-radius:5px;padding:7px 10px;font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink);font-family:inherit;min-width:0}
.info-form .hint{font-size:13.5px;color:var(--muted);text-transform:none;letter-spacing:0;font-weight:400}
.kv.answers{margin-top:8px;grid-template-columns:1fr}
.kv.answers > div{padding:6px 0}
.signin-form input[type=file]{padding:6px 0;border:0;background:transparent}
.whobar form{display:inline}
main > header .whobar{margin-top:16px}
@media (max-width:720px){.fact-review,.question-row{grid-template-columns:1fr}}

/* ================= refinements ================= */

/* Navigation and filtering were both pills, so neither read as itself.
   Views become a tab bar; the filter chips below stay pills. */
.views.tabs{gap:2px;margin-top:22px;border-bottom:1px solid var(--rule)}
.views.tabs .chip.nav{
  border:0;border-radius:0;background:transparent;padding:9px 13px;
  font-size:14.5px;font-weight:500;color:var(--muted);
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.views.tabs .chip.nav:hover{color:var(--ink)}
.views.tabs .chip.nav[aria-pressed="true"]{
  background:transparent;color:var(--ink);font-weight:600;border-bottom-color:var(--accent);
}
.toolbar{margin-top:14px}

/* Urgency needs a scale: overdue, imminent, and merely scheduled should not
   all be the same amber. */
.due{font-weight:500}
.due.late{background:var(--late-soft);color:var(--late);font-weight:600}
.due.now{background:var(--open-soft);color:var(--open);font-weight:600}
.due.soon{background:var(--rule-2);color:var(--ink-2);font-weight:500}

/* Needs attention: a triage panel, not a second copy of the roster. */
.attn li.band{
  display:block;border-top:0;padding:16px 0 4px;
  font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.attn li.band:first-child{padding-top:2px}
.attn li .own.none{color:var(--muted);font-weight:400}
.attn-more{margin:12px 0 6px}

/* Roomier tap targets and fewer stacked lines on a phone. */
@media (max-width:820px){
  .attn li{grid-template-columns:1fr;gap:8px;padding:12px 0}
  .attn li > .due{justify-self:start}
  .attn li .who.done{justify-content:flex-start;gap:8px}
  .row .btn,.attn .btn{min-height:38px;padding-left:12px;padding-right:12px}
  .donecol{margin-top:2px}
}

/* ================= header ================= */
/* A photographic band behind the household name, set by that household's
   admin. With no image the page is plain paper, which is the default. */
body{overflow-x:clip}
.top{position:relative;padding-top:8px}
.top.has-hero::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:calc(50% - 50vw);right:calc(50% - 50vw);top:-44px;height:300px;
  background-image:
    linear-gradient(180deg,
      rgba(247,246,242,.50) 0%,
      rgba(247,246,242,.68) 42%,
      rgba(247,246,242,.93) 78%,
      var(--bg) 100%),
    var(--hero);
  background-size:cover,cover;
  background-position:center,center 55%;
  background-repeat:no-repeat,no-repeat;
}
.top > *{position:relative;z-index:1}
.top.has-hero h1{text-shadow:0 1px 2px rgba(255,255,255,.7)}
.top.has-hero .eyebrow{text-shadow:0 1px 2px rgba(255,255,255,.85)}
.stat{box-shadow:0 1px 2px rgba(27,35,39,.04)}

/* Settings: the header image control */
.header-preview{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;margin:2px 0 6px}
.header-preview img{width:280px;max-width:100%;height:96px;object-fit:cover;border-radius:6px;border:1px solid var(--rule)}
.header-form{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.header-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

@media (max-width:820px){
  .top.has-hero::before{height:230px;top:-28px}
}

/* ================= volunteering and matching ================= */
/* "Ready for work" is the triage panel of people rather than jobs, so it
   borrows the attention panel's shape and takes the accent edge. */
.attn.ready{border-left-color:var(--accent);margin-top:30px}
.attn.ready h2{font-size:20px}
.attn li.ready-row{grid-template-columns:minmax(0,1fr) 220px 150px;align-items:center}
.attn li.ready-row .job{font-weight:600}
.attn li.ready-row .where{color:var(--ink-2);font-size:13.5px}
.attn li.ready-panel{display:block;grid-template-columns:1fr;padding:0 0 10px}

/* One line of profile under a crew member's name. */
.member-row .note.skills{display:block;color:var(--ink-2);font-size:14px;margin-top:3px;max-width:70ch}
.member-row .who{align-items:center}
.profile-detail{display:block;padding:14px 16px}
.profile-detail .kv{grid-template-columns:1fr;border-top:0}
.notes-form{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:end;margin-top:10px}
.notes-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.notes-form input{border:1px solid var(--rule);background:var(--bg);border-radius:5px;padding:7px 10px;font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink);min-width:0}

/* The assign panel: unclaimed jobs, the plausible ones first. */
.assign-panel{display:block;padding:14px 16px}
.assign-head{font-family:"Bricolage Grotesque","IBM Plex Sans",system-ui,sans-serif;font-size:15px;font-weight:700;
  margin:14px 0 2px;letter-spacing:-.005em}
.assign-list{border-top:1px solid var(--rule);margin-bottom:6px}
.assign-list .row{grid-template-columns:14px minmax(0,1fr) 170px 190px 110px}
.note.match{display:block;font-size:13px;color:var(--accent);margin-top:2px}
.owner-free[hidden]{display:none!important}

@media (max-width:820px){
  .attn li.ready-row{grid-template-columns:1fr}
  .notes-form{grid-template-columns:1fr}
}

/* Admin previewing the link-holder's view */
.banner.preview{background:var(--accent-soft);border:1px solid var(--accent);color:var(--ink);
  border-radius:6px;padding:10px 14px;margin:22px 0 0;font-size:15px}