@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',system-ui,sans-serif;color:#263b36;background:#f7f6f1;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #e7aa72;outline-offset:2px}h1,h2,h3,p{margin:0}h1,h2,h3,.brand{font-family:Manrope,system-ui,sans-serif}h1{font-size:clamp(1.9rem,5vw,3rem);letter-spacing:-.055em;line-height:1.08}h2{font-size:1.24rem;letter-spacing:-.035em}h3{font-size:1rem}.muted{color:#798981}.eyebrow{font-size:.7rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:#83958c}.small{font-size:.82rem}.tiny{font-size:.74rem}.shell{max-width:1320px;margin:auto;display:grid;grid-template-columns:240px 1fr;min-height:100vh}.sidebar{background:#eef1e9;border-right:1px solid #dce4da;padding:32px 22px;display:flex;flex-direction:column;gap:38px}.brand{font-size:1.25rem;font-weight:800;letter-spacing:-.06em;display:flex;align-items:center;gap:10px}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#264b3e;color:#fff;font-size:1.2rem}.side-label{margin:0 12px 12px}.nav{display:grid;gap:5px}.nav button{border:0;background:transparent;text-align:left;padding:12px;border-radius:11px;color:#75877d;font-weight:700}.nav button.active{background:#fff;color:#294d3f;box-shadow:0 2px 12px #1f423b0a}.nav button span{display:inline-block;width:28px;font-size:1.1rem}.side-bottom{margin-top:auto;border-top:1px solid #dce4da;padding:20px 10px 0}.main{padding:38px clamp(20px,4vw,58px) 80px;min-width:0}.topbar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:46px}.house-pill,.avatar{background:#e7ece4;border-radius:100px;padding:9px 14px;font-weight:700;font-size:.8rem}.avatar{width:36px;height:36px;padding:0;display:grid;place-items:center;background:#d9e7d7;color:#315949}.row{display:flex;align-items:center;gap:10px}.spread{display:flex;justify-content:space-between;align-items:center;gap:16px}.intro{margin-bottom:28px}.intro p{margin-top:10px;color:#84938b}.grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:20px}.stack{display:grid;align-content:start;gap:20px}.card{background:#fff;border:1px solid #e7ebe4;border-radius:18px;padding:22px;box-shadow:0 6px 24px #203b3008}.card-head{margin-bottom:18px}.hero{background:#dbe8d7;border:0;position:relative;overflow:hidden;min-height:180px}.hero:after{content:'✳';position:absolute;right:22px;bottom:-42px;color:#c3d8bd;font-size:180px;line-height:1}.hero>*{position:relative;z-index:1}.hero h2{font-size:1.65rem;margin:10px 0}.hero p{max-width:380px;color:#5f7b6b;line-height:1.5}.chip{display:inline-flex;align-items:center;gap:6px;border-radius:100px;background:#eef4ec;color:#4d725a;padding:6px 10px;font-size:.73rem;font-weight:700}.chip.warn{background:#fff0e0;color:#a46638}.chip.gray{background:#f2f3ef;color:#829087}.dot{width:7px;height:7px;border-radius:50%;background:#88ad83}.list{display:grid}.item{padding:15px 0;border-top:1px solid #eef0eb}.item:first-child{border-top:0;padding-top:0}.item:last-child{padding-bottom:0}.item p{line-height:1.5}.item .meta{font-size:.75rem;color:#98a69d;margin-top:5px}.empty{padding:20px 0;color:#9ba9a0;font-size:.88rem;line-height:1.5}.button,button.primary{border:0;background:#2f604b;color:white;border-radius:10px;padding:11px 15px;font-weight:700;font-size:.82rem}.button:hover,button.primary:hover{background:#234d3c}.secondary{background:#f0f4ee;border:0;color:#416351;border-radius:10px;padding:10px 13px;font-weight:700;font-size:.8rem}.text-button{border:0;background:none;padding:0;color:#538369;font-weight:700;font-size:.8rem}.danger{color:#9a5f4e}.form{display:grid;gap:12px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field{display:grid;gap:6px;font-size:.75rem;color:#6c8074;font-weight:700}input,select,textarea{width:100%;border:1px solid #e1e8df;background:#fafbf9;border-radius:9px;padding:11px;color:#2d4238;font-size:.87rem}textarea{min-height:76px;resize:vertical}input[type=file]{padding:8px}details>summary{cursor:pointer;list-style:none}details>summary::-webkit-details-marker{display:none}details[open]>summary{margin-bottom:16px}.machine{background:#f8faf7;border:1px solid #e9eee7;border-radius:14px;padding:17px}.machine-icon{width:40px;height:40px;border-radius:12px;background:#e6eee3;display:grid;place-items:center;font-size:1.25rem}.machine .time{font-family:Manrope;font-weight:800;font-size:1.35rem;letter-spacing:-.04em;margin-top:15px}.divider{height:1px;background:#edf1eb;margin:16px 0}.photos{display:flex;gap:8px;margin:12px 0}.photos img{width:90px;height:75px;object-fit:cover;border-radius:8px}.expense-amount{font-family:Manrope;font-size:1.15rem;font-weight:800}.auth{min-height:100vh;display:grid;place-items:center;padding:24px}.auth-wrap{width:min(100%,460px)}.auth .brand{margin-bottom:36px}.auth h1{margin:10px 0 12px}.auth .card{margin-top:24px}.tabs{display:flex;gap:8px;margin-bottom:20px}.tabs button{flex:1}.loading{padding:40px;color:#789}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#263f34;color:white;padding:12px 18px;border-radius:12px;z-index:5;box-shadow:0 5px 24px #0002;max-width:90vw;font-size:.85rem}#toast:empty{display:none}.token-box{overflow-wrap:anywhere;background:#f7f9f5;padding:12px;border-radius:10px;font-family:monospace;font-size:.75rem;line-height:1.6}.bottom-nav{display:none}a{color:#3d785a}.notice{padding:12px;border-radius:10px;background:#fff4e6;color:#956341;font-size:.82rem;line-height:1.4}.section-gap{margin-top:20px}@media(max-width:760px){.shell{display:block}.sidebar{display:none}.main{padding:22px 18px 100px}.topbar{margin-bottom:32px}.grid{grid-template-columns:1fr}.bottom-nav{position:fixed;z-index:4;bottom:0;left:0;right:0;display:flex;justify-content:space-around;background:#fff;border-top:1px solid #e7ebe4;padding:8px 5px calc(8px + env(safe-area-inset-bottom))}.bottom-nav button{background:none;border:0;color:#9aa89e;font-size:.65rem;display:grid;gap:4px;justify-items:center;padding:4px}.bottom-nav button span{font-size:1.15rem}.bottom-nav button.active{color:#31664d;font-weight:800}.card{padding:19px}.form-grid{grid-template-columns:1fr 1fr}.hero:after{font-size:140px}.topbar .small{display:none}}@media(max-width:390px){.form-grid{grid-template-columns:1fr}}
.photo-picker,.member-picker{border:0;margin:0;padding:0;min-width:0}.photo-picker legend,.member-picker legend{font-size:.75rem;color:#6c8074;font-weight:700;margin-bottom:8px}.member-picker{display:grid;gap:8px}.member-option{display:flex;align-items:center;gap:8px;font-size:.85rem;color:#416351}.member-option input{width:auto;accent-color:#2f604b}

/* Bootstrap Icons 1.13.1 subset. See interface-icons.LICENSE.txt. */
@font-face { font-family: Commonplace Icons; src: url('/interface-icons.woff2') format('woff2'); font-display: block; }
.ui-icon { display: inline-block; font: normal 1em/1 Commonplace Icons; }
.icon-send::before { content: "\f148"; }
.icon-camera::before { content: "\f220"; }
.icon-chat::before { content: "\f24a"; }
.icon-chevron::before { content: "\f282"; }
.icon-folder::before { content: "\f3d9"; }
.icon-images::before { content: "\f42b"; }
.icon-people::before { content: "\f4cf"; }
.icon-reply::before { content: "\f520"; }
.icon-close::before { content: "\f659"; }

.photo-menu summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 10px 14px; border: 1px solid #dce6db; border-radius: 10px;
  background: #fafbf9; color: #365b49; font-size: .87rem; font-weight: 700;
}
.photo-menu summary:focus-visible { outline: 3px solid #e7aa72; outline-offset: 2px; }
.photo-menu[open] > summary { margin-bottom: 7px; }
.photo-menu[open] summary .ui-icon { transform: rotate(180deg); }
.photo-options { overflow: hidden; border-radius: 16px; background: #505050; color: #f5f5f5; }
.photo-options button {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 46px; padding: 10px 17px; text-align: left;
  border: 0; background: transparent; color: inherit; font-size: 1rem;
}
.photo-options button + input + button { border-top: 1px solid #666; }
.photo-options button:hover, .photo-options button:focus-visible { background: #626262; }
.photo-options button:focus-visible { outline-offset: -4px; }
.photo-options .ui-icon { font-size: 1.15rem; }
.photo-selection { display: block; margin-top: 6px; color: #506c5d; font-size: .78rem; overflow-wrap: anywhere; }
.photo-selection:empty { display: none; }

.chat-panel {
  width: min(100%, 850px); height: clamp(360px, calc(100dvh - 155px), 790px);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden; margin: 0 auto; border: 1px solid #d9e5da; border-radius: 22px;
  background: #edf3eb; box-shadow: 0 10px 30px #203b3010;
}
.chat-header { display: flex; align-items: center; gap: 13px; padding: 16px 22px; background: #fff; border-bottom: 1px solid #e0e9e0; }
.chat-avatar { flex: 0 0 43px; height: 43px; display: grid; place-items: center; border-radius: 50%; background: #d9eadd; color: #2b5b44; font-size: 1.15rem; }
.chat-header h1 { font-size: 1.12rem; letter-spacing: -.025em; }
.chat-header > div:nth-child(2) { min-width: 0; }
.chat-header p { margin-top: 4px; color: #546f60; font-size: .77rem; overflow-wrap: anywhere; }
.chat-log { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 18px clamp(12px, 3vw, 28px); display: flex; flex-direction: column; gap: 13px; }
.chat-log:focus-visible { outline: 2px solid #659279; outline-offset: -2px; }
.chat-empty { display: grid; justify-items: center; gap: 8px; margin: auto; color: #526c5e; text-align: center; font-size: .9rem; }
.chat-empty .ui-icon { font-size: 1.5rem; }
.chat-message { position: relative; display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-start; align-self: flex-start; max-width: min(76%, 540px); }
.chat-outgoing { align-items: flex-end; align-self: flex-end; }
.chat-author { margin: 0 7px 4px; font-size: .75rem; font-weight: 700; color: #466a56; overflow-wrap: anywhere; }
.chat-bubble {
  max-width: 100%; min-width: 74px; padding: 9px 12px 7px; border-radius: 16px 16px 16px 5px;
  background: #fff; color: #263b36; box-shadow: 0 1px 2px #203b301a;
}
.chat-outgoing .chat-bubble { background: #d2e9d8; border-radius: 16px 16px 5px 16px; }
.chat-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4; font-size: .92rem; }
.chat-bubble time { display: block; margin-top: 4px; text-align: right; color: #4e695a; font-size: .68rem; }
.chat-bubble blockquote, .chat-quote {
  min-width: 0; margin: 0 0 7px; border-inline-start: 3px solid #7fa88f; border-radius: 6px;
  padding: 6px 9px; background: #4a745517; font-size: .75rem;
}
.chat-bubble blockquote p, .chat-quote p { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-reply, .chat-quote button {
  border: 0; color: #365b49; width: 34px; height: 34px; border-radius: 50%; background: transparent; display: grid; place-items: center;
}
.chat-reply { position: absolute; bottom: 0; inset-inline-start: 100%; }
.chat-outgoing .chat-reply { inset-inline-start: auto; inset-inline-end: 100%; }
.chat-reply:hover, .chat-quote button:hover { background: #dce8dd; }
.chat-composer { padding: 11px 16px; background: #fff; border-top: 1px solid #e0e9e0; }
.chat-quote { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.chat-compose-row { display: flex; align-items: flex-end; gap: 9px; }
.chat-composer textarea { min-height: 44px; max-height: 96px; resize: none; border-radius: 22px; padding: 11px 14px; font-size: 1rem; }
.chat-send {
  flex: 0 0 44px; height: 44px; display: grid; place-items: center; border: 0;
  border-radius: 50%; background: #2f604b; color: #fff; font-size: 1.12rem;
}
.chat-send:hover { background: #234d3c; }
.chat-send:disabled { opacity: .6; cursor: wait; }
@media (max-width: 760px) {
  .bottom-nav button { flex: 1 1 0; min-width: 0; min-height: 44px; color: #52665a; }
  .shell:has(.chat-panel) { display: grid; grid-template: minmax(0, 1fr) auto / minmax(0, 1fr); height: 100dvh; min-height: 0; }
  .shell:has(.chat-panel) .bottom-nav { position: static; }
  .main:has(.chat-panel) { min-height: 0; padding: 0; }
  .main:has(.chat-panel) .topbar { display: none; }
  #content:has(.chat-panel), .chat-panel { height: 100%; }
  .chat-panel { border: 0; border-radius: 0; }
  .chat-header { padding: 12px 16px; }
  .chat-composer { padding: 9px 12px; }
  .toast { bottom: calc(62px + env(safe-area-inset-bottom)); }
}

[hidden] { display: none !important; }
.choice-fieldset { border: 0; margin: 0; min-width: 0; padding: 0; }
.choice-fieldset legend { color: #416351; font-size: .85rem; font-weight: 700; margin-bottom: 10px; padding: 0; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.option-tile { align-items: center; background: #fafbf9; border: 1px solid #dce6db; border-radius: 10px; color: #416351; cursor: pointer; display: flex; font-size: .84rem; gap: 8px; min-height: 44px; padding: 8px 11px; }
.option-tile:has(:checked) { background: #e7f1e6; border-color: #659279; color: #254a39; font-weight: 700; }
.option-tile input { accent-color: #2f604b; margin: 0; padding: 0; width: auto; }
.schedule-grid { align-items: start; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.schedule-grid .option-tile { flex: 1 1 155px; }
.schedule-times { display: grid; gap: 14px; }
.schedule-times .choice-fieldset { background: #f4f7f2; border-radius: 10px; padding: 0 12px 12px; }
.schedule-times .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.schedule-times input, .schedule-times select { min-width: 0; }
.plan-entry { display: grid; gap: 6px; overflow-wrap: anywhere; }
.plan-entry h3 { margin-top: 7px; }
.plan-details { color: #526c5d; margin-top: 5px; white-space: pre-wrap; }
.payment-links { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 10px; }
.payment-links .button { text-decoration: none; }
.avatar { overflow: hidden; flex: 0 0 auto; }
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.profile-button { padding: 0; border: 0; border-radius: 50%; background: transparent; }
.profile-button .avatar { width: 44px; height: 44px; }
.profile-dialog { width: min(380px, calc(100% - 32px)); max-height: calc(100% - 32px); color: inherit; }
.profile-dialog::backdrop { background: #263b3673; }
.profile-dialog .card-head button { width: 36px; height: 36px; font-size: 1rem; }
.profile-household-actions { display: grid; justify-items: start; gap: 12px; margin-top: 14px; }
.account-notice { background: #e7f1e6; border-radius: 10px; padding: 12px; color: #315949; font-size: .9rem; }
.account-notice:empty { display: none; }
.account-help { margin-bottom: 14px; }
.chat-profile { display: none; margin-inline-start: auto; }
.chat-task-actions { display: grid; justify-items: start; gap: 7px; margin: 9px 0 4px; padding: 10px; border-radius: 9px; background: #f7faf5; color: #365b49; }
.chat-task-title { font-size: .9rem; overflow-wrap: anywhere; }
.claimed-chores:empty { display: none; }
.chat-task-actions button { min-height: 44px; }
.chat-task-shortcut { padding: 6px 10px; margin-top: 5px; border-radius: 7px; background: #eef4ec; }
.utility-list { margin: 0; padding: 0; list-style: none; }
.expense-scroll { max-height: min(22rem, 45dvh); overflow-y: auto; padding-inline-end: 8px; scrollbar-gutter: stable; }
.expense-scroll .item { overflow-wrap: anywhere; }
.expense-scroll:focus-visible { outline: 2px solid #659279; outline-offset: 3px; }
.utility-trend { display: block; width: 100%; height: 220px; }
.utility-totals { margin-top: 14px; }
@media (max-width: 760px) { .chat-profile { display: block; } }
@media (max-width: 900px) { .schedule-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 370px) { .schedule-times .form-grid { grid-template-columns: minmax(0, 1fr); } }