:root {
  color-scheme: light;
  --ink: #22372d; --soft: #56695e; --brand: #214c39; --deep: #193e31;
  --mint: #d7e9c2; --paper: #fff; --bg: #f5f7f2; --line: #dce4d9; --wash: #eef3e9;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink); background: var(--bg); font-size: 15px;
}
* { box-sizing: border-box }
[hidden] { display: none !important }
body, h1, h2, h3, p, fieldset { margin: 0 }
body { min-height: 100vh }
button, input, textarea, select { font: inherit; color: inherit }
button { cursor: pointer; border: 0; background: none; touch-action: manipulation }
button:disabled { opacity: .55; cursor: default }
button:focus-visible, input:focus, textarea:focus, select:focus { outline: 3px solid #89a27a; outline-offset: 2px }
.frame { width: min(1224px, 100%); margin: 0 auto; padding: 0 clamp(16px, 4vw, 52px) }
main.frame { padding-bottom: 3.5rem }
.topbar { background: var(--paper); border-bottom: 1px solid var(--line) }
.mast, .brand, nav, .pagehead, .tools, .filters, .panel-bar, .month-actions, .dialoghead, .dialogfoot, .row, .row-main, .person, .kicker { display: flex; align-items: center }
.mast { min-height: 74px; justify-content: space-between; gap: 14px }
.brand { gap: 10px; letter-spacing: -.07em; font-size: 27px; color: var(--deep) }
.brandmark { position: relative; width: 37px; height: 39px; background: var(--deep); color: var(--mint); display: grid; place-items: center; font-size: 28px; font-weight: 750; border-radius: 11px; line-height: 1 }
.brandmark span { position: absolute; font-size: 22px; top: -2px; right: 8px }
.brand-sub { border-left: 1px solid var(--line); margin-left: 4px; padding-left: 14px; color: var(--soft); font-size: 10px; font-weight: 750; letter-spacing: .16em }
nav { gap: 5px }
.nav-link, .plain, .seg button, .outlined, .primary, .icon { font-weight: 650; border-radius: 8px; line-height: 1.25 }
.nav-link { font-size: 14px; color: var(--soft); padding: 10px 14px }
.nav-link[aria-current=page], .nav-link:hover, .plain:hover { color: var(--brand); background: var(--wash) }
.primary, .outlined, .plain { min-height: 42px; padding: 10px 16px }
.primary { color: white; background: var(--brand); white-space: nowrap }
.primary:hover { background: #143c28 }
.primary span { margin-right: 3px }
.outlined, .icon, .plain { border: 1px solid var(--line); background: var(--paper) }
.outlined:hover, .icon:hover { background: var(--wash) }
.icon { width: 36px; height: 36px; display: grid; place-items: center; font-size: 23px; padding: 0 0 2px }
.pagehead { margin: 38px 0 25px; justify-content: space-between; gap: 18px }
.kicker, .micro { color: #52704e; font-size: 10px; font-weight: 750; letter-spacing: .14em }
.kicker { gap: 8px }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #85a777 }
h1 { font-size: clamp(32px, 4vw, 49px); line-height: 1.1; font-weight: 650; letter-spacing: -.055em; margin: 9px 0 }
h2 { font-size: 21px; letter-spacing: -.035em; font-weight: 650; line-height: 1.25 }
p { color: var(--soft); line-height: 1.5 }
.tools { gap: 16px; justify-content: space-between; flex-wrap: wrap; margin: 24px 0 16px }
.seg { display: inline-flex; align-items: center; padding: 4px; background: #e8ede5; border-radius: 10px }
.seg button { font-size: 14px; color: var(--soft); padding: 7px 13px }
.seg button[aria-pressed=true] { color: var(--brand); background: white; box-shadow: 0 1px 3px #1e3e2920 }
.filters { flex-wrap: wrap; gap: 10px }
.filter { font-weight: 600; font-size: 12px; color: var(--soft); display: flex; align-items: center; gap: 6px }
.filter select { font-size: 13px; background: var(--paper); padding: 7px 8px; border-radius: 6px; max-width: 180px }
.panel, .auth-card, .collection { background: var(--paper); border: 1px solid var(--line); border-radius: 15px; min-width: 0 }
.panel-bar, .collection-head { padding: 17px 21px }
.panel-bar { justify-content: space-between; gap: 12px }
.panel-bar h2 { margin-top: 4px; font-size: 23px }
.month-actions { gap: 5px }
.month-actions .plain { min-height: 36px; padding: 6px 11px }
.weekdays,.month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) }
.weekdays { background: #f7f9f5; color: var(--soft); border-top: 1px solid var(--line) }
.weekdays span { font-size: 11px; font-weight: 700; padding: 8px 10px }
.month-grid { border-radius: 0 0 15px 15px; overflow: hidden }
.day { min-height: 100px; padding: 4px 5px 6px; border-top: 1px solid var(--line); border-right: 1px solid var(--line); position: relative; min-width: 0 }
.day:nth-child(7n) { border-right: 0 }
.day.out { background: #f7f9f5; color: #66736a }
.day.chosen { background: #f0f5e9; box-shadow: inset 0 0 0 1.5px #91ab7b }
.pick-day { display: flex; align-items: center; gap: 4px; width: 100%; text-align: left; padding: 1px 3px; margin-bottom: 2px; color: inherit }
.day-num { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; font-size: 13px; font-weight: 650 }
.is-today .day-num { background: var(--brand); color: white }
.mobile-count { display: none }
.mini-task, .more { display: block; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; font-size: 11px; border-radius: 4px; line-height: 1.55 }
.mini-task { margin: 2px 0; padding: 2px 5px; color: #304f2d; background: #e0ebd7; border-left: 2px solid #72995f }
.mini-task.done { color: #59665e; background: #eaf0ed; border-color: #a4b5a9; text-decoration: line-through }
.more { color: var(--soft); padding: 0 5px; font-size: 10px; font-weight: 650 }
.task-collections { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 15px; margin-top: 16px }
.task-collections.list { grid-template-columns: minmax(0, 1fr) }
.collection-head { display: flex; align-items: center; justify-content: space-between; gap: 10px }
.collection-head h2 { font-size: 18px; margin-top: 4px }
.count-tag, .badge { white-space: nowrap; display: inline-block; border-radius: 999px; font-size: 11px; font-weight: 600; padding: 4px 8px }
.count-tag { color: var(--brand); background: var(--wash) }
.badge { background: #eaf2dd; color: #3b572b }
.badge.done,.badge.off { background: #edf1ee; color: #516356 }
.list-body { border-top: 1px solid var(--line); padding: 0 16px }
.row { justify-content: space-between; padding: 11px 0; gap: 10px }
.row + .row { border-top: 1px solid var(--line) }
.row-main { min-width: 0; flex: 1; align-items: flex-start; text-align: left; gap: 9px; border-radius: 5px; padding: 3px 2px }
.row-main:hover strong { text-decoration: underline }
.row-main span:last-child { min-width: 0 }
.task-dot { width: 8px; height: 8px; flex-shrink: 0; margin: 5px 2px 0 0; border-radius: 2px; background: #71965c }
.task-dot.done { background: #aab4ae }
.row strong, .person strong { display: block; font-size: 14px; overflow-wrap: anywhere }
.row small, .person small { display: block; color: var(--soft); font-size: 12px; line-height: 1.4; margin-top: 3px; overflow-wrap: anywhere }
.empty { padding: 16px 2px 19px; font-size: 14px }
.padded { padding: 22px }
.roster { margin-top: 16px }
.person { gap: 12px; padding: 13px 0; border-top: 1px solid var(--line) }
.person-info { flex: 1; min-width: 0 }
.avatar { height: 36px; width: 36px; border-radius: 10px; background: var(--wash); color: var(--brand); display: grid; place-items: center; font-size: 13px; font-weight: 750 }
.person .plain { min-height: 34px; padding: 6px 11px; font-size: 13px }
.account-panel { max-width: 480px }
.loading, .message, .flash { border-radius: 8px; padding: 12px 15px }
.loading { margin-top: 24px; color: var(--soft) }
.message.bad { color: #802c28; background: #fff0ec; border: 1px solid #edc5b9; font-size: 14px }
#appError { margin-top: 14px }
.flash { background: var(--deep); color: #fff; position: fixed; z-index: 5; bottom: 22px; right: 22px; max-width: min(88vw, 420px); box-shadow: 0 6px 18px #1c352420 }
.auth { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; margin: clamp(30px,9vh,95px) auto; max-width: 930px; gap: clamp(24px, 5vw, 72px) }
.auth-copy { background: var(--deep); padding: clamp(30px, 4vw, 64px); border-radius: 22px; color: #fff; position: relative; overflow: hidden }
.auth-copy .kicker { color: var(--mint) }
.auth-copy .live-dot { background: var(--mint) }
.auth-copy h1 { font-size: clamp(42px, 5vw, 65px); margin: 20px 0 18px }
.auth-copy p { color: #dcead7; max-width: 30ch }
.auth-lines { margin-top: 36px; display: flex; align-items: flex-end; height: 42px; gap: 6px }
.auth-lines i { display: block; height: 14px; width: 22%; background: #547452; border-radius: 3px }
.auth-lines i:nth-child(2) { height: 23px; background: #7e9a6b }
.auth-lines i:nth-child(3) { height: 32px; background: #a5bf8d }
.auth-lines i:nth-child(4) { height: 41px; background: #d7e9bd }
.auth-card { padding: clamp(23px, 4vw, 42px) }
.auth-card h2 { font-size: 28px; margin-top: 7px }
.stack { display: flex; flex-direction: column; gap: 16px }
.auth-card .stack, .account-panel .stack { margin-top: 22px }
.stack label, legend { font-size: 13px; font-weight: 650 }
.stack label { display: flex; flex-direction: column; gap: 6px }
input:not([type=checkbox]), select, textarea { border: 1px solid #bac9bb; border-radius: 7px; background: white; padding: 10px 11px; min-width: 0; width: 100%; font-size: 15px; font-weight: 400 }
textarea { resize: vertical }
input:disabled, select:disabled, textarea:disabled { color: #58665c; background: #f5f6f3; opacity: 1 }
.fieldpair,.pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px }
.help { color: var(--soft); font-size: 12px; line-height: 1.5 }
dialog { width: min(94vw, 530px); max-height: 93dvh; border: 1px solid var(--line); border-radius: 16px; padding: 0; color: var(--ink); background: #fff }
dialog::backdrop { background: #152a1e72 }
.modalbody { padding: clamp(18px, 4vw, 28px) }
.dialoghead, .dialogfoot { justify-content: space-between; gap: 12px }
.dialoghead { margin-bottom: 2px }
.dialoghead h2 { font-size: 25px; margin-top: 4px }
.dialogfoot { justify-content: flex-end; padding-top: 4px }
fieldset { min-width: 0; padding: 0; border: 0 }
legend { margin-bottom: 7px }
.checks { display: flex; gap: 6px; flex-wrap: wrap; max-height: 135px; overflow: auto }
.checks label, .stack label.toggle { display: inline-flex; flex-direction: row; gap: 6px; align-items: center }
.checks label { background: #f5f8f1; border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px; font-size: 12px; font-weight: 550 }
input[type=checkbox] { accent-color: var(--brand); width: 16px; height: 16px; margin: 0 }
@media (max-width: 760px) {
  .brand-sub { display: none }
  .task-collections { grid-template-columns: 1fr }
  .day { min-height: 76px }
  .pagehead { margin: 25px 0 18px }
  .auth { gap: 16px }
  .nav-link { padding: 9px }
}
@media (max-width: 600px) {
  .mast { min-height: 61px }
  .brand { gap: 5px; font-size: 23px }
  .brandmark { width: 29px; height: 32px; font-size: 23px; border-radius: 8px }
  .brandmark span { font-size: 18px; right: 7px }
  nav { gap: 0 }
  .nav-link { font-size: 12px; padding: 8px 7px }
  .pagehead { flex-wrap: wrap; gap: 10px }
  .pagehead p { font-size: 14px }
  .tools { gap: 10px; margin-top: 16px }
  .filters { width: 100%; gap: 8px }
  .filter { flex-direction: column; align-items: flex-start; flex: 1; gap: 3px }
  .filter select { max-width: 100% }
  .day { padding: 1px; min-height: 49px }
  .pick-day { margin: 0; min-height: 46px; flex-direction: column; justify-content: flex-start; gap: 0; padding: 2px 0 }
  .mobile-count { display: block; font-size: 10px; padding: 0 5px; border-radius: 5px; background: #dce9d4; color: #345333; font-weight: 650 }
  .mini-task, .more { display: none }
  .weekdays span { padding: 6px 0; text-align: center }
  .panel-bar, .collection-head { padding: 13px 14px }
  .panel-bar h2 { font-size: 20px }
  .auth { grid-template-columns: 1fr; margin-top: 20px }
  .auth-copy { padding: 22px }
  .auth-copy h1 { font-size: 35px; margin: 11px 0 }
  .auth-copy h1 br { display: none }
  .auth-copy p { max-width: none; font-size: 14px }
  .auth-lines { display: none }
  .person { gap: 7px }
  .kicker, .micro { font-size: 9px }
}
@media (max-width: 360px) { .frame { padding-left: 10px; padding-right: 10px } .brand { font-size: 19px } .pair { grid-template-columns: 1fr } }