/* Dwelling: original colour palette and semantic priority signals. */
:root {
  --ink:#242521;
  --muted:#777971;
  --line:#e4e3dd;
  --paper:#fff;
  --canvas:#f5f4f0;
  --sage:#dfe9de;
  --sage-ink:#46614b;
  --amber:#f4e7cf;
  --amber-ink:#805b20;
  --rose:#f1dfdc;
  --rose-ink:#8a5149;
  --blue:#e4eaf1;
  --blue-ink:#4f6277;
  --accent:#353a34;
  --radius:12px;
  font-family:'DM Sans',sans-serif;
  color:var(--ink);
  background:var(--canvas);
  font-synthesis:none
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  min-width:320px;
  min-height:100vh
}
button,input,select,textarea {
  font:inherit
}
button {
  cursor:pointer;
  color:inherit
}
.app-shell {
  min-height:100vh
}
.sidebar {
  width:244px;
  position:fixed;
  inset:0 auto 0 0;
  background:#eeede8;
  border-right:1px solid #deddd6;
  padding:25px 16px 15px;
  display:flex;
  flex-direction:column;
  z-index:5
}
.brand {
  display:flex;
  gap:11px;
  align-items:center;
  margin:0 8px 42px;
  text-decoration:none;
  color:var(--ink);
  font-family:Manrope,sans-serif;
  font-size:16px;
  font-weight:800;
  letter-spacing:-.5px
}
.brand small {
  display:block;
  font:600 8px 'DM Sans',sans-serif;
  letter-spacing:1.6px;
  color:#888980;
  margin-top:3px
}
.brand-mark {
  display:grid;
  place-items:center;
  width:35px;
  height:35px;
  background:#333831;
  color:#fff;
  border-radius:10px;
  font:700 18px Manrope
}
.household-label,.member-label {
  font-size:9px;
  font-weight:700;
  letter-spacing:1.4px;
  color:#96978f;
  margin:0 10px 12px
}
.primary-nav {
  display:grid;
  gap:5px
}
.nav-link {
  display:flex;
  align-items:center;
  gap:12px;
  background:transparent;
  border:0;
  text-align:left;
  border-radius:8px;
  padding:11px 10px;
  font-size:12px;
  color:#62645d
}
.nav-link:hover,.nav-link.active {
  background:#fff;
  color:#282a25
}
.nav-link.active {
  font-weight:700;
  box-shadow:0 1px 2px #1c1c1910
}
.nav-icon {
  font-size:16px;
  width:20px;
  text-align:center;
  color:#777970
}
.nav-count {
  margin-left:auto;
  font-size:10px;
  background:#f1f0eb;
  padding:2px 7px;
  border-radius:10px;
  color:#777970
}
.sidebar-bottom {
  margin-top:auto
}
.sync-note {
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 9px;
  border-top:1px solid #deddd6;
  border-bottom:1px solid #deddd6;
  margin-bottom:19px
}
.sync-note strong,.sync-note small {
  display:block
}
.sync-note strong {
  font-size:10px
}
.sync-note small {
  font-size:9px;
  color:#898a82;
  margin-top:3px
}
.local-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#6e8d68;
  display:inline-block;
  flex:none
}
.member-label {
  display:block;
  margin-bottom:8px
}
.sidebar select {
  width:100%;
  border:1px solid #d8d7d0;
  background:#f8f7f3;
  border-radius:7px;
  padding:9px;
  font-size:11px
}
.sidebar-foot {
  border-top:1px solid #deddd6;
  margin-top:22px;
  padding:15px 8px 0;
  font-size:8px;
  font-weight:700;
  letter-spacing:1.3px;
  color:#a1a198
}
.sidebar-foot span {
  float:right;
  letter-spacing:0;
  font-weight:500
}
.main-area {
  margin-left:244px;
  min-height:100vh
}
.topbar {
  height:65px;
  background:#fbfaf7;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 42px;
  position:sticky;
  top:0;
  z-index:4
}
.breadcrumbs {
  font-size:11px;
  color:#92938b
}
.breadcrumbs strong {
  color:#3d3f39;
  font-weight:600
}
.crumb-slash {
  margin:0 10px;
  color:#c4c3bc
}
.top-actions {
  display:flex;
  align-items:center;
  gap:18px
}
.local-pill {
  font-size:10px;
  color:#787a71;
  display:flex;
  gap:6px;
  align-items:center
}
.button {
  border:1px solid var(--line);
  background:#fff;
  border-radius:7px;
  padding:9px 13px;
  font-size:11px;
  font-weight:600
}
.button:hover {
  border-color:#aaa
}
.button-dark {
  background:#333831;
  color:white;
  border-color:#333831
}
.button-dark:hover {
  background:#222620
}
.button-small {
  padding:7px 10px
}
.button-quiet {
  background:transparent
}
.view-root {
  max-width:1350px;
  margin:0 auto;
  padding:38px 42px 60px
}
.page-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:25px
}
.eyebrow {
  font-size:9px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  font-weight:700;
  color:#9a9b92;
  margin-bottom:9px
}
.page-head h1 {
  font:700 27px Manrope,sans-serif;
  letter-spacing:-1px;
  margin:0
}
.page-head p {
  margin:7px 0 0;
  color:#85867e;
  font-size:11px
}
.date-heading {
  font:600 11px Manrope,sans-serif;
  color:#777970
}
.summary-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-bottom:24px
}
.summary-card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:15px 17px;
  min-height:83px
}
.summary-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#777970;
  font-size:10px
}
.summary-icon {
  font-size:15px;
  color:#787a71
}
.summary-value {
  font:700 22px Manrope,sans-serif;
  letter-spacing:-.7px;
  margin-top:10px
}
.summary-value small {
  font:500 10px 'DM Sans',sans-serif;
  color:#96978f;
  letter-spacing:0;
  margin-left:4px
}
.panel {
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius)
}
.agenda-toolbar {
  display:flex;
  gap:8px;
  align-items:center;
  padding:13px 15px;
  border-bottom:1px solid var(--line);
  flex-wrap:wrap
}
.segmented {
  display:flex;
  padding:3px;
  background:#f4f3ef;
  border-radius:7px;
  gap:2px
}
.segmented button {
  border:0;
  background:transparent;
  border-radius:5px;
  padding:6px 10px;
  color:#81827a;
  font-size:10px
}
.segmented button.active {
  background:white;
  color:#33352f;
  box-shadow:0 1px 2px #1111;
  font-weight:600
}
.filter-select,.search-input {
  border:1px solid var(--line);
  border-radius:6px;
  background:white;
  color:#66685f;
  padding:7px 9px;
  font-size:10px
}
.filter-select {
  max-width:150px
}
.search-input {
  margin-left:auto;
  width:170px
}
.filter-reset {
  background:none;
  border:0;
  font-size:10px;
  color:#777970;
  padding:7px
}
.agenda-day {
  padding:17px 16px 3px
}
.day-heading {
  display:flex;
  align-items:baseline;
  gap:8px;
  padding-bottom:10px;
  border-bottom:1px solid #efeee9
}
.day-heading strong {
  font:700 11px Manrope,sans-serif
}
.day-heading span {
  font-size:9px;
  color:#999a91
}
.agenda-item {
  display:grid;
  grid-template-columns:42px minmax(100px,1fr) auto;
  gap:11px;
  align-items:center;
  padding:13px 5px;
  border-bottom:1px solid #f0efeb
}
.agenda-item:last-child {
  border-bottom:0
}
.item-mark {
  width:34px;
  height:34px;
  border-radius:9px;
  display:grid;
  place-items:center;
  font-size:15px;
  background:#f1f0eb
}
.item-mark.bill {
  background:var(--amber)
}
.item-mark.shopping {
  background:#e7ede4
}
.item-mark.event {
  background:var(--blue)
}
.item-main {
  min-width:0
}
.item-title {
  font-size:11px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:7px
}
.item-sub {
  display:flex;
  gap:6px;
  align-items:center;
  color:#8a8b83;
  font-size:9px;
  margin-top:5px;
  flex-wrap:wrap
}
.item-side {
  display:flex;
  align-items:center;
  gap:13px
}
.amount {
  font:700 11px Manrope,sans-serif;
  white-space:nowrap
}
.status-pill,.priority-pill,.category-pill {
  display:inline-flex;
  align-items:center;
  border-radius:12px;
  font-size:8px;
  font-weight:600;
  padding:4px 7px;
  white-space:nowrap
}
.status-upcoming {
  background:#f3f2ed;
  color:#77786f
}
.status-paid,.status-done {
  background:var(--sage);
  color:var(--sage-ink)
}
.status-overdue {
  background:var(--rose);
  color:var(--rose-ink)
}
.status-planned {
  background:var(--blue);
  color:var(--blue-ink)
}
.priority-high {
  color:var(--rose-ink);
  background:#f7eeec
}
.priority-normal {
  color:#707168;
  background:#f1f0ec
}
.priority-low {
  color:#55715a;
  background:#eff4ee
}
.creator {
  display:flex;
  align-items:center;
  gap:5px;
  color:#82837a;
  font-size:9px;
  white-space:nowrap
}
.avatar {
  display:inline-grid;
  place-items:center;
  border-radius:50%;
  width:21px;
  height:21px;
  background:#e9e7df;
  color:#55564e;
  font-size:8px;
  font-weight:700;
  flex:none
}
.avatar.tone-1 {
  background:#e5ebe3;
  color:#47614b
}
.avatar.tone-2 {
  background:#ebe5df;
  color:#755943
}
.empty-state {
  padding:34px 20px;
  text-align:center;
  color:#888980;
  font-size:11px
}
.empty-state strong {
  display:block;
  color:#454740;
  font-size:12px;
  margin-bottom:6px
}
.filter-chip {
  background:#f3f2ee;
  border:1px solid var(--line);
  border-radius:20px;
  padding:5px 8px;
  font-size:9px;
  color:#71736b
}
.lists-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:13px
}
.list-card {
  padding:16px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  cursor:pointer;
  transition:.15s
}
.list-card:hover {
  border-color:#b8b8ae;
  transform:translateY(-1px)
}
.list-card-top {
  display:flex;
  justify-content:space-between;
  align-items:flex-start
}
.list-icon {
  width:36px;
  height:36px;
  border-radius:10px;
  background:#f0efe9;
  display:grid;
  place-items:center;
  font-size:16px
}
.list-card h3 {
  font:700 13px Manrope,sans-serif;
  margin:15px 0 5px
}
.list-card p {
  font-size:10px;
  color:#898a82;
  margin:0
}
.list-card-bottom {
  margin-top:18px;
  padding-top:11px;
  border-top:1px solid #efeee9;
  display:flex;
  justify-content:space-between;
  color:#898a82;
  font-size:9px
}
.list-detail-head {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:20px
}
.back-button {
  border:1px solid var(--line);
  background:#fff;
  border-radius:7px;
  padding:8px 10px;
  font-size:10px
}
.list-detail-icon {
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#f0efe9;
  font-size:18px
}
.list-detail-head h1 {
  font:700 22px Manrope,sans-serif;
  margin:0
}
.list-detail-head p {
  font-size:10px;
  color:#85867e;
  margin:4px 0 0
}
.entry-row {
  display:grid;
  grid-template-columns:25px minmax(100px,1fr) auto;
  gap:10px;
  align-items:center;
  padding:13px 15px;
  border-bottom:1px solid #efeee9
}
.entry-row:last-child {
  border-bottom:0
}
.entry-title {
  font-size:11px;
  font-weight:600
}
.entry-row.is-done .entry-title {
  text-decoration:line-through;
  color:#96978f
}
.entry-meta {
  font-size:9px;
  color:#909188;
  margin-top:4px
}
.entry-actions {
  display:flex;
  align-items:center;
  gap:7px
}
.icon-button {
  border:0;
  background:transparent;
  color:#85867e;
  font-size:14px;
  padding:5px
}
.section-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:13px 15px;
  border-bottom:1px solid var(--line)
}
.section-head strong {
  font:700 11px Manrope,sans-serif
}
.section-head span {
  font-size:9px;
  color:#8e8f87
}
.bill-table {
  width:100%;
  border-collapse:collapse
}
.bill-table th {
  text-align:left;
  padding:10px 13px;
  color:#96978f;
  text-transform:uppercase;
  font-size:8px;
  letter-spacing:1px;
  border-bottom:1px solid #efeee9
}
.bill-table td {
  padding:13px;
  border-bottom:1px solid #efeee9;
  font-size:10px
}
.bill-table tr:last-child td {
  border-bottom:0
}
.bill-name {
  font-weight:700
}
.bill-name small {
  display:block;
  color:#909188;
  font-weight:400;
  margin-top:4px
}
.manage-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px
}
.manage-card {
  padding:17px
}
.manage-card h3 {
  font:700 13px Manrope,sans-serif;
  margin:0 0 6px
}
.manage-card>p {
  font-size:10px;
  color:#87887f;
  margin:0 0 15px;
  line-height:1.5
}
.type-row,.category-row,.member-row {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 0;
  border-top:1px solid #efeee9
}
.type-row:first-of-type,.category-row:first-of-type {
  border-top:0
}
.type-row .type-icon {
  width:30px;
  height:30px;
  border-radius:8px;
  background:#f2f1ec;
  display:grid;
  place-items:center
}
.type-name {
  font-size:10px;
  font-weight:600;
  flex:1
}
.type-meta {
  font-size:9px;
  color:#909188
}
.text-button {
  border:0;
  background:transparent;
  color:#6d7167;
  font-size:9px;
  text-decoration:underline;
  text-underline-offset:2px
}
.manage-actions {
  display:flex;
  gap:8px;
  flex-wrap:wrap
}
.danger {
  color:#96574f
}
.subheading {
  font:700 11px Manrope,sans-serif;
  margin:20px 0 8px
}
.helper {
  font-size:9px;
  color:#92938a;
  line-height:1.5
}
.modal {
  border:0;
  border-radius:14px;
  padding:0;
  width:min(520px,calc(100vw - 28px));
  max-height:90vh;
  box-shadow:0 18px 70px #1719142b
}
.modal::backdrop {
  background:#1f211d66;
  backdrop-filter:blur(2px)
}
.modal-inner {
  padding:22px
}
.modal-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:18px
}
.modal-head h2 {
  font:700 19px Manrope,sans-serif;
  margin:0
}
.modal-head p {
  font-size:10px;
  color:#898a82;
  margin:5px 0 0
}
.modal-close {
  border:0;
  background:#f2f1ed;
  border-radius:7px;
  width:28px;
  height:28px
}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}
.field {
  display:grid;
  gap:6px
}
.field.full {
  grid-column:1/-1
}
.field label {
  font-size:9px;
  font-weight:700;
  color:#73756d
}
.field input,.field select,.field textarea {
  border:1px solid #deddd7;
  border-radius:7px;
  padding:10px;
  font-size:11px;
  background:white;
  min-width:0
}
.field textarea {
  min-height:76px;
  resize:vertical
}
.form-help {
  font-size:9px;
  color:#8d8e86;
  line-height:1.45
}
.modal-actions {
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:18px;
  padding-top:15px;
  border-top:1px solid var(--line)
}
.checkbox-row {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:10px;
  color:#62645d
}
.checkbox-row input {
  accent-color:#394139
}
.comment-list {
  max-height:180px;
  overflow:auto;
  margin:10px 0
}
.comment {
  padding:9px 0;
  border-bottom:1px solid #efeee9;
  font-size:10px
}
.comment small {
  display:block;
  color:#8c8d84;
  margin-top:4px
}
.toast {
  position:fixed;
  bottom:25px;
  left:50%;
  transform:translate(-50%,12px);
  background:#333831;
  color:white;
  padding:10px 15px;
  border-radius:8px;
  font-size:10px;
  opacity:0;
  pointer-events:none;
  transition:.2s;
  z-index:20
}
.toast.show {
  opacity:1;
  transform:translate(-50%,0)
}
.mobile-nav {
  display:none
}
.inline-icon {
  width:14px;
  height:14px;
  vertical-align:middle
}
@media(max-width:1000px) {
  .view-root {
    padding:30px 26px 50px
  }
  .topbar {
    padding:0 26px
  }
  .lists-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .item-side .creator {
    display:none
  }
}
@media(max-width:700px) {
  .sidebar {
    display:none
  }
  .main-area {
    margin-left:0;
    padding-bottom:67px
  }
  .topbar {
    height:55px;
    padding:0 17px
  }
  .top-actions {
    gap:9px
  }
  .local-pill {
    display:none
  }
  .view-root {
    padding:24px 16px 35px
  }
  .page-head {
    align-items:center;
    margin-bottom:19px
  }
  .page-head h1 {
    font-size:23px
  }
  .page-head p {
    max-width:230px;
    line-height:1.45
  }
  .date-heading {
    display:none
  }
  .summary-grid {
    gap:7px;
    margin-bottom:16px
  }
  .summary-card {
    padding:11px 10px;
    min-height:72px
  }
  .summary-top {
    font-size:8px
  }
  .summary-value {
    font-size:18px
  }
  .summary-value small {
    display:block;
    margin:2px 0 0;
    font-size:8px
  }
  .agenda-toolbar {
    padding:10px;
    gap:6px
  }
  .search-input {
    order:2;
    flex:1;
    min-width:100px;
    width:auto;
    margin-left:0
  }
  .filter-select {
    max-width:none;
    flex:1
  }
  .segmented {
    width:100%;
    order:0
  }
  .segmented button {
    flex:1
  }
  .filter-reset {
    order:3
  }
  .agenda-item {
    grid-template-columns:35px minmax(85px,1fr) auto;
    gap:8px;
    padding:12px 1px
  }
  .item-mark {
    width:30px;
    height:30px
  }
  .item-title {
    font-size:10px
  }
  .item-sub {
    font-size:8px;
    gap:4px
  }
  .item-side {
    gap:6px
  }
  .item-side .status-pill {
    font-size:7px;
    padding:4px 5px
  }
  .amount {
    font-size:10px
  }
  .creator {
    display:none
  }
  .lists-grid {
    grid-template-columns:1fr 1fr;
    gap:8px
  }
  .list-card {
    padding:12px
  }
  .list-card h3 {
    font-size:11px;
    margin-top:11px
  }
  .list-card p {
    font-size:9px
  }
  .list-card-bottom {
    font-size:8px;
    margin-top:12px
  }
  .manage-grid {
    grid-template-columns:1fr
  }
  .manage-card {
    padding:14px
  }
  .bill-table th:nth-child(3),.bill-table td:nth-child(3) {
    display:none
  }
  .bill-table th,.bill-table td {
    padding:11px 8px
  }
  .bill-table th {
    font-size:7px
  }
  .mobile-nav {
    position:fixed;
    inset:auto 0 0;
    height:64px;
    background:#fbfaf7;
    border-top:1px solid var(--line);
    display:grid;
    grid-template-columns:repeat(4,1fr);
    z-index:8;
    padding-bottom:env(safe-area-inset-bottom)
  }
  .mobile-nav-link {
    border:0;
    background:transparent;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:3px;
    color:#898a82;
    font-size:9px
  }
  .mobile-nav-link span {
    font-size:16px
  }
  .mobile-nav-link.active {
    color:#2f342e;
    font-weight:700
  }
  .form-grid {
    grid-template-columns:1fr
  }
  .field.full {
    grid-column:auto
  }
  .modal-inner {
    padding:18px
  }
  .modal-actions {
    position:sticky;
    bottom:0;
    background:white
  }
  .page-head .button {
    padding:8px 9px;
    font-size:10px
  }
}
/* Dwelling identity and clearer reading hierarchy */
:root {
  --ink:#292d2b;
  --muted:#737872;
  --line:#dedfd8;
  --canvas:#f7f6f1;
  --paper:#fff;
  --sage:#e4eee7;
  --sage-ink:#41614c;
  --amber:#f4e9c9;
  --amber-ink:#7a5b1e;
  --rose:#f5e2dd;
  --rose-ink:#914b40;
  --blue:#e4edf4;
  --blue-ink:#4a657a;
  --accent:#31584f;
  --radius:10px;
  background:var(--canvas);
  color:var(--ink)
}
* {
  box-shadow:none!important
}
.sidebar {
  background:#eeefe9;
  border-color:#d8ddd7
}
.brand {
  font-size:19px;
  letter-spacing:-.8px;
  margin-bottom:39px
}
.brand small {
  font-size:8px;
  letter-spacing:1.4px;
  color:#747e77
}
.brand-mark {
  background:var(--accent);
  border-radius:8px
}
.brand-mark svg {
  width:25px;
  height:25px;
  fill:none;
  stroke:#fff;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round
}
.household-label,.member-label {
  color:#758079;
  font-size:9px
}
.nav-link {
  color:#626c65
}
.nav-link.active,.nav-link:hover {
  background:#dfe9e3;
  color:#294b42
}
.nav-link.active {
  border-left:3px solid var(--accent);
  padding-left:7px
}
.nav-count {
  background:#f8faf7;
  color:#496357
}
.local-dot {
  background:#587f68
}
.topbar {
  background:#fbfaf6;
  border-color:var(--line)
}
.mobile-wordmark {
  display:none
}
.button {
  border-color:#d5d9d3;
  border-radius:6px;
  font-size:12px
}
.button-dark {
  background:var(--accent);
  border-color:var(--accent)
}
.button-dark:hover {
  background:#25483f
}
.button:hover {
  border-color:#8f9d93
}
.page-head {
  margin-bottom:23px
}
.page-head h1 {
  font-size:31px;
  letter-spacing:-1.1px
}
.page-head p {
  font-size:13px;
  color:#6f7771
}
.eyebrow {
  color:#6e8076;
  font-size:10px;
  letter-spacing:1.5px
}
.summary-card {
  border-radius:9px;
  padding:16px 18px
}
.summary-top {
  font-size:11px;
  color:#69736c
}
.summary-value {
  font-size:24px;
  color:#303834
}
.summary-value small {
  font-size:11px;
  color:#7b837d
}
.panel {
  border-radius:10px
}
.agenda-toolbar {
  gap:9px;
  padding:14px;
  border-color:var(--line)
}
.segmented {
  background:#edf0eb
}
.segmented button {
  font-size:11px;
  color:#68736c
}
.segmented button.active {
  color:#294b42;
  background:#fff
}
.filter-select,.search-input {
  font-size:11px;
  color:#465149;
  border-color:#d9ded8;
  padding:8px 10px
}
.filter-select:focus,.search-input:focus,.field input:focus,.field select:focus,.field textarea:focus {
  outline:2px solid #97b2a2;
  outline-offset:1px
}
.agenda-day {
  padding:18px 18px 4px
}
.day-heading {
  border-color:#e9ece7
}
.day-heading strong {
  font-size:13px
}
.day-heading span {
  font-size:10px;
  color:#7a827c
}
.agenda-item {
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  padding:13px 6px;
  border-color:#edf0eb
}
.agenda-open {
  grid-column:1;
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  align-items:center;
  gap:11px;
  border:0;
  padding:0;
  background:transparent;
  text-align:left;
  min-width:0
}
.item-mark {
  width:36px;
  height:36px;
  border-radius:9px;
  background:#edece5
}
.item-mark.bill {
  background:#f5e7d9;
  color:#915b38
}
.item-mark.shopping {
  background:#e2eee5;
  color:#4e7558
}
.item-mark.event {
  background:#e4ebf3;
  color:#55718b
}
.item-mark.list {
  background:#f3edcf;
  color:#806e35
}
.item-title {
  font-size:14px;
  line-height:1.25;
  color:#2d332f
}
.item-sub {
  font-size:11px;
  color:#737e76;
  margin-top:5px;
  gap:7px
}
.category-info {
  color:#8b938d
}
.priority-pill {
  font-size:9px;
  padding:4px 8px
}
.priority-high {
  color:#8e473e;
  background:#f6e6e2
}
.priority-normal {
  color:#647168;
  background:#edf0eb
}
.priority-low {
  color:#4b7055;
  background:#e8f0e8
}
.item-side {
  gap:9px;
  justify-content:flex-end;
  white-space:nowrap
}
.amount {
  font-size:13px;
  color:#3c5147
}
.status-pill {
  font-size:9px;
  padding:5px 9px
}
.status-upcoming {
  background:#f1f1ec;
  color:#626a64
}
.status-paid,.status-done {
  background:#e2eee5;
  color:#3f674c
}
.status-overdue {
  background:#f6e2dc;
  color:#944b40
}
.status-planned {
  background:#e6edf3;
  color:#496579
}
.agenda-item.is-done .agenda-open {
  opacity:.74
}
.agenda-item.is-done .item-title {
  text-decoration:line-through;
  color:#727a74
}
.creator {
  font-size:10px;
  color:#748078
}
.avatar {
  background:#e4ebe5;
  color:#46614d
}
.avatar.tone-1 {
  background:#e7eaf0;
  color:#4e637b
}
.avatar.tone-2 {
  background:#f0e8df;
  color:#806347
}
.empty-state {
  font-size:12px;
  color:#737b75
}
.empty-state strong {
  font-size:14px;
  color:#343a36
}
.helper {
  font-size:11px;
  color:#727b74
}
.lists-grid {
  gap:14px
}
.list-card {
  border-color:#dfe2dc;
  border-radius:10px;
  padding:17px
}
.list-card:hover {
  border-color:#96a99a;
  transform:translateY(-1px)
}
.list-card h3 {
  font-size:15px;
  margin-top:14px
}
.list-card p {
  font-size:11px;
  color:#737c75
}
.list-icon {
  background:#e5eee8;
  color:#41634c;
  border-radius:9px
}
.list-card-bottom {
  font-size:10px;
  border-color:#edf0eb;
  color:#6f7971
}
.list-detail-head h1 {
  font-size:25px
}
.list-detail-head p {
  font-size:12px
}
.entry-row {
  padding:15px 17px;
  border-color:#edf0eb
}
.entry-title {
  font-size:13px
}
.entry-meta {
  font-size:10px;
  line-height:1.5;
  color:#727c75
}
.entry-actions .icon-button {
  font-size:12px
}
.section-head strong {
  font-size:13px
}
.section-head span {
  font-size:10px;
  color:#778078
}
/* Bills are grouped by identity first, then context, schedule and action. */
.bill-list {
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden
}
.bill-list-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 18px;
  border-bottom:1px solid var(--line)
}
.bill-list-heading h2 {
  font:700 14px Manrope,sans-serif;
  margin:0
}
.bill-list-heading>span {
  font-size:10px;
  color:#788179
}
.bill-card {
  padding:17px 18px;
  border-bottom:1px solid #edf0eb
}
.bill-card:last-child {
  border-bottom:0
}
.bill-card-head,.bill-card-foot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px
}
.bill-card-title {
  min-width:0
}
.bill-name {
  display:block;
  border:0;
  background:transparent;
  padding:0;
  text-align:left;
  font:700 16px Manrope,sans-serif;
  color:#2d3530
}
.bill-name:hover {
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:3px
}
.bill-context {
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:5px;
  font-size:11px;
  color:#737d76
}
.bill-category {
  background:#f5eadf;
  color:#8a5b3c;
  border-radius:4px;
  padding:3px 7px;
  font-size:9px;
  font-weight:700;
  letter-spacing:.2px
}
.bill-separator {
  color:#acb1ab
}
.bill-amount {
  font:700 17px Manrope,sans-serif;
  color:#344f43;
  white-space:nowrap
}
.bill-card-foot {
  margin-top:15px;
  align-items:flex-end
}
.bill-facts {
  display:flex;
  align-items:center;
  gap:26px;
  flex-wrap:wrap
}
.bill-fact {
  display:grid;
  gap:4px
}
.bill-fact small {
  font-size:8px;
  letter-spacing:1px;
  color:#89928c;
  font-weight:700
}
.bill-fact strong {
  font-size:11px;
  color:#46514a;
  font-weight:600
}
.bill-attribution {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  color:#788179
}
.bill-card .status-overdue+.button {
  border-color:#e4b8ad;
  color:#8d493f
}
.bill-card .status-paid+.button {
  color:#68766c
}
/* Emoji selection stays within a consistent, accessible palette. */
.emoji-picker {
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:6px
}
.emoji-option {
  height:38px;
  border:1px solid #e0e4de;
  border-radius:7px;
  background:#fafbf9;
  font-size:19px
}
.emoji-option:hover,.emoji-option.selected {
  border-color:#668673;
  background:#e8f0ea
}
.emoji-option.selected {
  outline:2px solid #b4c9b8;
  outline-offset:1px
}
.checkbox-row {
  font-size:11px;
  padding:3px 0
}
.modal {
  box-shadow:0 0 0 1px #cfd5ce!important
}
.modal-inner {
  padding:24px
}
.modal-head h2 {
  font-size:21px
}
.modal-head p {
  font-size:11px
}
.field label {
  font-size:10px
}
.field input,.field select,.field textarea {
  font-size:12px;
  border-color:#d8ded8
}
.toast {
  background:#29483f;
  font-size:11px
}
/* Filters stay quiet on phones until someone asks for them. */
.filter-menu {
  display:contents
}
.filter-menu>summary {
  display:none
}
.filter-panel {
  display:contents
}
.filter-panel .filter-select {
  max-width:140px
}
.filter-reset {
  font-size:10px;
  color:#566b5d
}
@media(max-width:700px) {
  .topbar {
    height:58px;
    padding:0 16px
  }
  .breadcrumbs {
    display:flex;
    align-items:center;
    gap:8px
  }
  .mobile-wordmark {
    display:inline;
    font:800 15px Manrope,sans-serif;
    letter-spacing:-.6px;
    color:var(--accent)
  }
  .breadcrumbs>span:not(.mobile-wordmark),.crumb-slash {
    display:none
  }
  .breadcrumbs strong {
    font-size:12px;
    border-left:1px solid #d9ded8;
    padding-left:9px
  }
  .local-pill {
    display:none
  }
  .view-root {
    padding:22px 15px 31px
  }
  .page-head {
    align-items:center;
    gap:12px;
    margin-bottom:17px
  }
  .page-head h1 {
    font-size:25px
  }
  .page-head p {
    font-size:11px;
    line-height:1.45;
    max-width:235px
  }
  .page-head .button {
    font-size:10px;
    white-space:nowrap
  }
  .date-heading {
    display:none
  }
  .summary-grid {
    gap:7px;
    margin-bottom:14px
  }
  .summary-card {
    padding:10px 9px;
    min-height:68px
  }
  .summary-top {
    font-size:9px;
    gap:5px
  }
  .summary-icon {
    font-size:12px
  }
  .summary-value {
    font-size:17px;
    margin-top:8px
  }
  .summary-value small {
    font-size:8px;
    margin:2px 0 0;
    display:block
  }
  .agenda-toolbar {
    padding:9px;
    gap:7px
  }
  .segmented {
    width:100%;
    order:0
  }
  .segmented button {
    font-size:9px;
    padding:7px 3px
  }
  .search-input {
    order:1;
    width:auto;
    min-width:0;
    flex:1;
    margin:0
  }
  .filter-menu {
    display:block;
    position:relative;
    order:2
  }
  .filter-menu>summary {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    list-style:none;
    cursor:pointer;
    padding:8px 11px;
    border:1px solid #d9ded8;
    border-radius:6px;
    background:#fff;
    color:#526458;
    font-size:10px;
    white-space:nowrap
  }
  .filter-menu>summary::-webkit-details-marker {
    display:none
  }
  .filter-menu>summary span {
    display:grid;
    place-items:center;
    min-width:17px;
    height:17px;
    border-radius:9px;
    background:#e2eee5;
    color:#365a48;
    font-size:9px
  }
  .filter-panel {
    display:none
  }
  .filter-menu[open] .filter-panel {
    position:absolute;
    right:0;
    top:calc(100% + 7px);
    z-index:7;
    width:min(330px,calc(100vw - 32px));
    padding:12px;
    background:#fff;
    border:1px solid #d8ded8;
    border-radius:8px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px
  }
  .filter-panel .filter-select {
    width:100%;
    max-width:none;
    min-width:0
  }
  .filter-panel .filter-reset {
    grid-column:1/-1;
    text-align:left;
    padding:6px 2px
  }
  .agenda-day {
    padding:13px 11px 2px
  }
  .day-heading {
    padding-bottom:8px
  }
  .day-heading strong {
    font-size:12px
  }
  .day-heading span {
    font-size:9px
  }
  .agenda-item {
    grid-template-columns:minmax(0,1fr) auto;
    gap:6px;
    padding:11px 1px
  }
  .agenda-open {
    grid-template-columns:32px minmax(0,1fr);
    gap:8px
  }
  .item-mark {
    width:29px;
    height:29px;
    border-radius:8px;
    font-size:13px
  }
  .item-title {
    font-size:12px;
    line-height:1.3
  }
  .item-sub {
    font-size:9px;
    margin-top:4px;
    gap:5px
  }
  .category-info,.creator {
    display:none
  }
  .priority-pill {
    font-size:8px;
    padding:3px 6px;
    text-transform:capitalize
  }
  .item-side {
    gap:5px;
    flex-direction:column;
    align-items:flex-end
  }
  .item-side .amount {
    font-size:11px
  }
  .status-pill {
    font-size:8px;
    padding:4px 7px
  }
  .bill-card {
    padding:14px 13px
  }
  .bill-card-head {
    align-items:flex-start;
    gap:8px
  }
  .bill-name {
    font-size:14px
  }
  .bill-context {
    font-size:9px;
    gap:5px;
    flex-wrap:wrap
  }
  .bill-category {
    font-size:8px
  }
  .bill-amount {
    font-size:14px
  }
  .bill-card-foot {
    align-items:flex-start;
    flex-direction:column;
    gap:12px;
    margin-top:12px
  }
  .bill-facts {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 14px;
    width:100%
  }
  .bill-fact small {
    font-size:7px
  }
  .bill-fact strong {
    font-size:10px
  }
  .bill-attribution {
    font-size:9px;
    grid-column:1/-1
  }
  .bill-attribution .avatar {
    width:18px;
    height:18px
  }
  .bill-list-heading {
    padding:12px 13px
  }
  .bill-list-heading h2 {
    font-size:12px
  }
  .lists-grid {
    grid-template-columns:1fr 1fr;
    gap:8px
  }
  .list-card {
    padding:12px
  }
  .list-card h3 {
    font-size:12px;
    margin:10px 0 4px
  }
  .list-card p {
    font-size:9px;
    line-height:1.4
  }
  .list-card-bottom {
    font-size:8px;
    margin-top:11px;
    padding-top:8px
  }
  .manage-grid {
    grid-template-columns:1fr
  }
  .manage-card {
    padding:14px
  }
  .list-detail-head {
    gap:8px;
    flex-wrap:wrap
  }
  .list-detail-head h1 {
    font-size:19px
  }
  .list-detail-head p {
    font-size:9px
  }
  .list-detail-head>.button {
    margin-left:auto!important
  }
  .entry-row {
    grid-template-columns:22px minmax(0,1fr);
    gap:8px;
    padding:12px 11px
  }
  .entry-actions {
    grid-column:2;
    justify-content:flex-end
  }
  .entry-meta {
    font-size:9px
  }
  .mobile-nav {
    height:65px
  }
  .modal-inner {
    padding:18px
  }
  .emoji-picker {
    grid-template-columns:repeat(6,minmax(0,1fr))
  }
  .toast {
    bottom:76px
  }
}
/* Stronger bill amounts and calmer list creation. */
.amount-block,.bill-amount-block {
  display:grid;
  justify-items:end;
  gap:3px;
  min-width:104px;
  padding:8px 11px;
  border:1px solid #eee1c9;
  border-radius:8px;
  background:#fbf5e7;
  color:#604918;
  white-space:nowrap
}
.amount-block small,.bill-amount-block small {
  font-size:7px;
  letter-spacing:1.15px;
  font-weight:700;
  color:#8b7445
}
.amount-block strong,.bill-amount-block strong {
  font:800 17px Manrope,sans-serif;
  line-height:1.1;
  color:#594316
}
.item-side .amount-block {
  margin-right:2px
}
.bill-amount-block {
  min-width:124px;
  padding:10px 13px
}
.bill-amount-block strong {
  font-size:21px
}
.bill-head-actions {
  display:flex;
  align-items:center;
  gap:7px
}
.bill-overview {
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 17px;
  margin:0 0 15px;
  background:#f4eddb;
  border:1px solid #e9dfc8;
  border-radius:9px
}
.bill-overview-label {
  font-size:9px;
  letter-spacing:1.2px;
  font-weight:700;
  color:#79653b
}
.bill-overview>strong {
  font:800 21px Manrope,sans-serif;
  color:#564219
}
.bill-overview-note {
  font-size:10px;
  color:#7b704f;
  border-left:1px solid #dacba7;
  padding-left:14px
}
.type-choice-grid {
  display:grid;
  gap:7px
}
.type-choice {
  display:grid;
  grid-template-columns:40px minmax(0,1fr) 20px;
  align-items:center;
  gap:12px;
  text-align:left;
  padding:11px;
  border:1px solid #dfe4de;
  background:#fff;
  border-radius:8px;
  min-height:62px
}
.type-choice:hover {
  background:#f3f7f3;
  border-color:#99b09f
}
.type-choice-icon {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#e9f0eb;
  font-size:19px
}
.type-choice strong,.type-choice small {
  display:block
}
.type-choice strong {
  font-size:12px;
  color:#303a34
}
.type-choice small {
  font-size:10px;
  color:#7c867e;
  margin-top:4px
}
.type-choice-arrow {
  font-size:16px;
  color:#63806a;
  text-align:center
}
/* Short, tactile feedback; focus remains clear without relying on colour alone. */
button,a,.list-card,.bill-card,.nav-link,select,input,textarea,.type-choice,.emoji-option {
  transition:color .14s ease,background-color .14s ease,border-color .14s ease,transform .14s ease
}
button:active,.list-card:active,.type-choice:active {
  transform:translateY(1px)
}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:3px solid #668b75!important;
  outline-offset:2px!important;
  z-index:1
}
.agenda-open:hover .item-title {
  color:#31584f
}
.bill-card:hover {
  background:#fdfdfa
}
.emoji-option:active {
  transform:scale(.96)
}
@media(max-width:700px) {
  .bill-head-actions {
    gap:4px
  }
  .bill-head-actions .button {
    font-size:9px;
    padding:8px 7px
  }
  .bill-overview {
    gap:8px;
    flex-wrap:wrap;
    padding:11px 12px;
    margin-bottom:11px
  }
  .bill-overview-label {
    font-size:8px;
    width:100%
  }
  .bill-overview>strong {
    font-size:19px
  }
  .bill-overview-note {
    font-size:9px;
    padding-left:9px
  }
  .bill-amount-block {
    min-width:92px;
    padding:8px 9px
  }
  .bill-amount-block strong {
    font-size:16px
  }
  .amount-block {
    min-width:84px;
    padding:6px 8px
  }
  .amount-block small {
    font-size:6px
  }
  .amount-block strong {
    font-size:14px
  }
  .type-choice-grid {
    gap:6px
  }
  .type-choice {
    grid-template-columns:35px minmax(0,1fr) 15px;
    padding:8px;
    gap:9px;
    min-height:55px
  }
  .type-choice-icon {
    width:34px;
    height:34px;
    font-size:17px
  }
  .type-choice strong {
    font-size:11px
  }
  .type-choice small {
    font-size:9px
  }
  .agenda-item {
    gap:5px
  }
  .item-side {
    min-width:84px
  }
  .bill-facts {
    gap:9px 10px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important
  }
}
.bill-list-heading>span {
  display:flex;
  align-items:baseline;
  gap:9px
}
.bill-list-heading>span small {
  font-size:10px;
  color:#7a847d
}
.bill-list-heading .text-button {
  font-size:10px;
  text-decoration:none;
  color:#31584f
}
.bill-list-heading .text-button:hover {
  text-decoration:underline;
  text-underline-offset:3px
}
.summary-card:first-child {
  border-left:3px solid #4d7661;
  background:#f0f5f0
}
.summary-card:first-child .summary-value {
  font-size:26px;
  color:#31584f
}
@media(max-width:700px) {
  .summary-card:first-child .summary-value {
    font-size:18px
  }
  .bill-list-heading>span {
    display:grid;
    gap:2px
  }
  .bill-list-heading .text-button {
    font-size:9px
  }
  .list-author {
    gap:4px
  }
  .list-author .avatar {
    width:18px;
    height:18px
  }
  .list-card-bottom {
    gap:5px
  }
}
/* v0.4: quieter information hierarchy and semantic priority signals */
:root {
  --accent:#353a37;
  --sage:#e8efe9;
  --sage-ink:#46614c
}
.nav-link.active,.nav-link:hover {
  background:#e8e9e5;
  color:#303633
}
.nav-link.active {
  border-left-color:#555d58
}
.button-dark {
  background:#353a37;
  border-color:#353a37
}
.button-dark:hover {
  background:#252a27
}
.local-dot {
  background:#737a74
}
.summary-card:first-child {
  border-left-color:#777d78;
  background:#f0f1ed
}
.summary-card:first-child .summary-value {
  color:#343a36
}
.agenda-open:hover .item-title,.bill-name:hover {
  color:#343a36
}
.item-sub {
  gap:8px
}
.item-sub .creator {
  margin-left:2px
}
.creator .avatar,.bill-attribution .avatar {
  width:22px;
  height:22px;
  font-size:8px
}
.priority-marker {
  display:inline-grid;
  place-items:center;
  vertical-align:2px;
  width:17px;
  height:17px;
  margin-left:5px;
  border-radius:50%;
  font:800 10px/1 'DM Sans',sans-serif
}
.priority-marker.priority-high {
  background:#c84c43;
  color:#fff;
  border:1px solid #b43c35
}
.priority-marker.priority-low {
  border-radius:4px;
  background:#55945e;
  color:#fff;
  border:1px solid #43834d;
  font-size:11px
}
.amount-block,.bill-amount-block {
  background:#fbf5e7;
  border-color:#eee1c9
}
.amount-block strong,.bill-amount-block strong {
  color:#594316
}
.status-overdue {
  background:#fae5e1;
  color:#a23930
}
.status-paid,.status-done {
  background:#e7eee8;
  color:#4c6650
}
.payment-toggle {
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:1px solid #cbd2cc;
  border-radius:50%;
  background:#fff;
  color:#424943;
  font-weight:800
}
.payment-toggle:hover {
  background:#f0f2ef;
  border-color:#818b83
}
.payment-toggle.is-paid {
  background:#e7eee8;
  color:#47654d;
  border-color:#c5d5c8
}
.type-choice em {
  display:block;
  margin-top:5px;
  font-size:9px;
  line-height:1.4;
  color:#899089;
  font-style:normal
}
.capability-choice {
  display:grid;
  grid-template-columns:16px minmax(0,1fr);
  gap:9px;
  align-items:start;
  padding:9px 0;
  border-bottom:1px solid #edf0eb;
  cursor:pointer
}
.capability-choice input {
  margin:2px 0 0;
  accent-color:#555d58
}
.capability-choice strong,.capability-choice small {
  display:block
}
.capability-choice strong {
  font-size:11px;
  color:#39403b
}
.capability-choice small {
  margin-top:3px;
  font-size:9px;
  line-height:1.45;
  color:#7b837c
}
.entry-content {
  min-width:0
}
.entry-title {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:3px
}
.entry-meta {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px;
  margin-top:5px
}
.meta-separator {
  color:#b2b7b1
}
.entry-actions {
  gap:7px
}
.bill-attribution {
  min-width:22px
}
.form-help {
  display:block;
  margin-top:5px;
  font-size:9px;
  line-height:1.4;
  color:#818880
}
@media(max-width:700px) {
  .item-sub .creator {
    display:flex
  }
  .item-sub .creator .avatar {
    width:17px;
    height:17px;
    font-size:7px
  }
}
/* Completion/payment state is neutral so green stays specific to Low priority. */
.status-paid,.status-done {
  background:#eceeeb;
  color:#58605a
}
/* v0.5 comparison: higher contrast, stronger type, and priority as a surface signal. */
:root {
  --ink:#171918;
  --muted:#555c57;
  --line:#c7cbc7;
  --canvas:#f1f2f0;
  --paper:#fff;
  --accent:#171918;
  --radius:4px
}
.sidebar {
  background:#e7e9e6;
  border-color:#bfc4bf
}
.brand-mark,.button-dark {
  background:#171918;
  border-color:#171918
}
.button-dark:hover {
  background:#393e3a;
  border-color:#393e3a
}
.nav-link.active,.nav-link:hover {
  background:#fff;
  color:#171918
}
.nav-link.active {
  border-left-color:#171918
}
.page-head h1 {
  font-weight:800;
  color:#171918
}
.page-head p,.helper {
  color:#555c57
}
.panel,.bill-list,.summary-card,.list-card {
  border-color:#bfc4bf;
  border-radius:4px
}
.agenda-item {
  border-left:5px solid transparent;
  padding-left:10px;
  transition:background-color .14s ease,border-color .14s ease
}
.bill-card,.entry-row {
  border-left:5px solid transparent;
  transition:background-color .14s ease,border-color .14s ease
}
.priority-tone-normal {
  --priority-bg:#fff;
  --priority-line:transparent;
  --priority-amount:#fff;
  --priority-amount-line:#c7cbc7;
  --priority-amount-ink:#171918;
  background-color:#fff;
  border-left-color:transparent
}
.priority-tone-high {
  --priority-bg:#fff3f1;
  --priority-line:#d92e24;
  --priority-amount:#f9d9d5;
  --priority-amount-line:#d92e24;
  --priority-amount-ink:#721d18;
  background-color:var(--priority-bg);
  border-left-color:var(--priority-line)
}
.priority-tone-low {
  --priority-bg:#f5f9e8;
  --priority-line:#a7c83c;
  --priority-amount:#e5efbb;
  --priority-amount-line:#a7c83c;
  --priority-amount-ink:#3e5110;
  background-color:var(--priority-bg);
  border-left-color:var(--priority-line)
}
.priority-tone-high .amount-block,.priority-tone-high .bill-amount-block,.priority-tone-low .amount-block,.priority-tone-low .bill-amount-block {
  background:var(--priority-amount);
  border-color:var(--priority-amount-line);
  color:var(--priority-amount-ink)
}
.priority-tone-high .amount-block strong,.priority-tone-high .bill-amount-block strong,.priority-tone-low .amount-block strong,.priority-tone-low .bill-amount-block strong {
  color:var(--priority-amount-ink)
}
.priority-tone-high .amount-block small,.priority-tone-high .bill-amount-block small,.priority-tone-low .amount-block small,.priority-tone-low .bill-amount-block small {
  color:var(--priority-amount-ink)
}
.entry-row .amount {
  display:inline-block;
  margin-left:9px;
  padding:4px 8px;
  border:1px solid var(--priority-amount-line,#c7cbc7);
  background:var(--priority-amount,#f0f1ef);
  color:var(--priority-amount-ink,#171918);
  font-size:15px;
  font-weight:800
}
.item-title {
  font-weight:750;
  color:#171918
}
.bill-name {
  font-size:18px;
  font-weight:800;
  color:#171918
}
.bill-amount-block,.amount-block {
  border-width:2px;
  border-radius:4px;
  min-width:124px;
  padding:10px 13px;
  background:var(--priority-amount,#f0f1ef);
  border-color:var(--priority-amount-line,#c7cbc7);
  color:var(--priority-amount-ink,#171918)
}
.bill-amount-block strong,.amount-block strong {
  font-size:22px;
  color:var(--priority-amount-ink,#171918)
}
.bill-amount-block small,.amount-block small {
  color:var(--priority-amount-ink,#171918);
  font-size:8px
}
.bill-overview {
  background:#fff;
  border:2px solid #171918;
  border-radius:4px;
  color:#171918
}
.bill-overview-label,.bill-overview>strong,.bill-overview-note {
  color:#171918
}
.bill-list-heading h2,.section-head strong,.manage-card h3 {
  color:#171918;
  font-weight:800
}
.type-choice,.field input,.field select,.field textarea,.search-input,.filter-select {
  border-color:#999f99;
  border-radius:3px
}
.type-choice:hover {
  background:#f0f1ef;
  border-color:#171918
}
.modal {
  max-width:min(640px,calc(100vw - 24px));
  border:2px solid #171918;
  border-radius:4px;
  box-shadow:none!important
}
.modal-inner {
  gap:16px;
  padding:26px
}
.modal-head h2 {
  font-size:24px;
  font-weight:800;
  color:#171918
}
.modal-head p {
  font-size:12px;
  color:#555c57
}
.field label {
  font-size:11px;
  font-weight:750;
  color:#242825
}
.field input,.field select,.field textarea {
  min-height:42px;
  font-size:13px;
  border-width:1px;
  color:#171918
}
.field textarea {
  min-height:90px
}
.field-primary input {
  height:48px;
  font-size:17px;
  font-weight:700
}
.amount-field input {
  height:50px;
  max-width:250px;
  border:2px solid #171918;
  font-size:22px;
  font-weight:800;
  padding:9px 12px
}
.amount-field label {
  font-size:12px
}
.form-help {
  font-size:10px;
  color:#555c57
}
.button {
  border-radius:3px;
  font-weight:700
}
.button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:3px solid #171918!important;
  outline-offset:2px!important
}
.priority-tone-high .bill-amount-block,.priority-tone-high .amount-block {
  --priority-amount:#f9d9d5
}
.priority-tone-low .bill-amount-block,.priority-tone-low .amount-block {
  --priority-amount:#e5efbb
}
.recurrence-icon {
  display:inline-grid;
  place-items:center;
  width:18px;
  height:18px;
  margin:0 5px 0 2px;
  border:1px solid currentColor;
  border-radius:50%;
  font-size:12px;
  line-height:1;
  color:#343a36;
  vertical-align:middle
}
.bill-fact .recurrence-icon {
  width:16px;
  height:16px;
  font-size:11px
}
.payment-toggle {
  border-radius:3px;
  width:38px;
  height:38px;
  background:#171918;
  color:#fff;
  border-color:#171918;
  font-size:17px
}
.payment-toggle:hover {
  background:#393e3a;
  color:#fff;
  border-color:#393e3a
}
.status-paid,.status-done {
  background:#e7e9e6;
  color:#343a36
}
.bill-category {
  border-radius:2px;
  background:#e7e9e6;
  color:#343a36
}
@media(max-width:700px) {
  .agenda-item {
    padding-left:7px
  }
  .bill-card,.entry-row {
    border-left-width:4px
  }
  .bill-name {
    font-size:15px
  }
  .amount-block,.bill-amount-block {
    min-width:92px;
    padding:7px 8px
  }
  .amount-block strong,.bill-amount-block strong {
    font-size:17px
  }
  .entry-row .amount {
    font-size:13px
  }
  .modal-inner {
    padding:18px
  }
  .field-primary input {
    font-size:15px
  }
  .amount-field input {
    font-size:20px
  }
}
.priority-tone-normal {
  --priority-amount:#fff
}
.status-overdue {
  background:#171918;
  color:#fff
}
/* v0.6: yellow Low priority and touch-first compact row actions. */
.priority-tone-low {
  --priority-bg:#fffbe3;
  --priority-line:#e1b900;
  --priority-amount:#f8edb5;
  --priority-amount-line:#d7ad00;
  --priority-amount-ink:#4f4100;
  background-color:var(--priority-bg);
  border-left-color:#e1b900
}
.priority-tone-low .amount-block,.priority-tone-low .bill-amount-block {
  background:#f8edb5;
  border-color:#d7ad00;
  color:#4f4100
}
.priority-tone-low .amount-block strong,.priority-tone-low .bill-amount-block strong,.priority-tone-low .amount-block small,.priority-tone-low .bill-amount-block small {
  color:#4f4100
}
.priority-tone-normal {
  --priority-amount:#fff
}
.bill-card {
  position:relative
}
.bill-card-foot {
  margin-top:9px;
  align-items:center
}
.bill-facts {
  gap:18px
}
.bill-fact strong {
  font-size:12px;
  color:#171918
}
.bill-state {
  display:inline-flex;
  align-items:center
}
.back-button {
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:46px;
  padding:6px 13px;
  border:2px solid #171918;
  border-radius:3px;
  background:#fff;
  color:#171918;
  font-size:13px;
  font-weight:750
}
.back-button span:first-child {
  font-size:28px;
  line-height:1;
  font-weight:600
}
.back-button:hover {
  background:#171918;
  color:#fff
}
@media(max-width:700px) {
  .view-root {
    padding:20px 13px 34px
  }
  .page-head {
    align-items:flex-start;
    gap:12px;
    margin-bottom:16px
  }
  .page-head h1 {
    font-size:27px;
    line-height:1.12
  }
  .page-head p {
    font-size:13px;
    line-height:1.4;
    max-width:235px;
    color:#444a45
  }
  .page-head .button,.button {
    min-height:40px;
    font-size:12px;
    padding:9px 11px
  }
  .agenda-toolbar {
    gap:7px;
    padding:10px
  }
  .segmented button {
    font-size:11px;
    padding:8px 5px
  }
  .search-input,.filter-select {
    min-height:40px;
    font-size:12px
  }
  .filter-menu>summary {
    min-height:40px;
    font-size:12px
  }
  .agenda-day {
    padding:14px 10px 3px
  }
  .day-heading strong {
    font-size:14px
  }
  .day-heading span {
    font-size:11px
  }
  .agenda-item {
    min-height:62px;
    grid-template-columns:minmax(0,1fr) auto;
    gap:7px;
    padding:10px 6px
  }
  .agenda-open {
    grid-template-columns:34px minmax(0,1fr);
    gap:9px
  }
  .item-mark {
    width:31px;
    height:31px;
    font-size:14px
  }
  .item-title {
    font-size:14px;
    line-height:1.25
  }
  .item-sub {
    font-size:11px;
    margin-top:4px;
    gap:5px
  }
  .item-side {
    min-width:76px;
    gap:6px
  }
  .amount-block {
    min-width:90px;
    padding:7px 8px
  }
  .amount-block strong {
    font-size:17px
  }
  .status-pill {
    font-size:10px;
    padding:5px 7px
  }
  .bill-list-heading {
    padding:13px
  }
  .bill-list-heading h2 {
    font-size:15px
  }
  .bill-card {
    padding:12px 12px 11px
  }
  .bill-card-head {
    align-items:flex-start;
    gap:10px
  }
  .bill-name {
    font-size:16px;
    line-height:1.2
  }
  .bill-context {
    font-size:11px;
    gap:5px;
    margin-top:4px
  }
  .bill-category {
    font-size:10px;
    padding:3px 5px
  }
  .bill-amount-block {
    min-width:98px;
    padding:7px 8px
  }
  .bill-amount-block strong {
    font-size:18px
  }
  .bill-amount-block small {
    font-size:8px
  }
  .bill-card-foot {
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:7px;
    margin-top:8px;
    min-height:24px
  }
  .bill-facts {
    display:flex;
    flex:1;
    min-width:0;
    flex-wrap:wrap;
    align-items:center;
    gap:5px 12px
  }
  .bill-fact {
    display:flex;
    align-items:center;
    gap:5px
  }
  .bill-fact small {
    font-size:8px;
    letter-spacing:.4px
  }
  .bill-fact strong {
    font-size:11px;
    white-space:nowrap
  }
  .bill-attribution {
    display:inline-flex;
    grid-column:auto
  }
  .bill-attribution .avatar {
    width:18px;
    height:18px
  }
  .bill-state .status-pill {
    font-size:9px;
    padding:4px 6px
  }
  .bill-amount-block {
    margin-left:auto
  }
  .view-root .lists-grid {
    grid-template-columns:1fr!important;
    gap:10px
  }
  .list-card {
    padding:15px
  }
  .list-card h3 {
    font-size:16px;
    margin:12px 0 5px
  }
  .list-card p {
    font-size:12px;
    line-height:1.4
  }
  .list-card-bottom {
    font-size:10px;
    margin-top:13px;
    padding-top:9px
  }
  .list-detail-head {
    align-items:center;
    gap:10px
  }
  .list-detail-head h1 {
    font-size:23px;
    line-height:1.15
  }
  .list-detail-head p {
    font-size:11px;
    line-height:1.4
  }
  .back-button {
    min-height:48px;
    padding:5px 10px;
    gap:7px
  }
  .back-button span:first-child {
    font-size:30px
  }
  .back-button span:last-child {
    font-size:12px
  }
  .entry-title {
    font-size:14px
  }
  .entry-meta {
    font-size:11px;
    line-height:1.4
  }
  .entry-row {
    padding:13px 10px;
    min-height:58px
  }
  .mobile-nav-link {
    font-size:10px
  }
  .mobile-nav-link span {
    font-size:18px
  }
  .modal-inner {
    padding:18px
  }
  .modal-head h2 {
    font-size:22px
  }
  .field label {
    font-size:12px
  }
  .field input,.field select,.field textarea {
    font-size:16px;
    min-height:44px
  }
  .field textarea {
    min-height:90px
  }
  .field-primary input {
    font-size:17px
  }
  .amount-field input {
    font-size:22px
  }
  .form-help {
    font-size:11px;
    line-height:1.4
  }
}
@media(max-width:700px) {
  .summary-top {
    font-size:10px
  }
  .summary-value {
    font-size:20px
  }
  .summary-value small {
    font-size:9px
  }
  .bill-fact small {
    font-size:9px
  }
}
/* Keep yellow and red for priority; neutralize inherited green and category accents. */
.local-dot {
  background:#656b66
}
.avatar {
  background:#e7e9e6;
  color:#343a36
}
.avatar.tone-1 {
  background:#dfe2df;
  color:#343a36
}
.avatar.tone-2 {
  background:#f0f1ef;
  color:#343a36
}
.list-icon,.type-choice-icon,.list-detail-icon,.item-mark,.item-mark.bill,.item-mark.shopping,.item-mark.event,.item-mark.list {
  background:#e7e9e6;
  color:#303633
}
.summary-card:first-child {
  border-left-color:#777d78;
  background:#eceeeb
}
.summary-card:first-child .summary-value {
  color:#171918
}
.bill-list-heading .text-button {
  color:#171918
}
.bill-list-heading .text-button:hover {
  color:#171918
}
.type-choice:hover {
  background:#f0f1ef;
  border-color:#171918
}
.emoji-option:hover,.emoji-option.selected {
  border-color:#606762;
  background:#eceeeb
}
.emoji-option.selected {
  outline-color:#aeb4af
}
.toast {
  background:#171918
}
/* v0.8: one card rhythm for Bills and Agenda, with list checkboxes. */
.bill-card,.agenda-item {
  border-left-width:5px;
  transition:background-color .14s ease,border-color .14s ease
}
.bill-card {
  position:relative;
  padding:15px 16px
}
.bill-card.is-focused {
  outline:3px solid #171918;
  outline-offset:-3px
}
.bill-card-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 142px;
  align-items:start;
  gap:18px
}
.bill-card-info {
  display:grid;
  align-content:start;
  justify-items:start;
  min-width:0;
  gap:0
}
.bill-name {
  font-size:19px;
  line-height:1.22;
  font-weight:800;
  max-width:100%;
  overflow-wrap:anywhere
}
.bill-context {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin-top:5px;
  font-size:11px;
  line-height:1.35
}
.bill-facts {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  width:100%;
  gap:7px 18px;
  margin-top:14px
}
.bill-fact {
  display:grid;
  gap:3px;
  min-width:0
}
.bill-fact small {
  font-size:8px;
  line-height:1.1;
  letter-spacing:.7px
}
.bill-fact strong {
  display:inline-flex;
  align-items:center;
  min-height:19px;
  gap:0;
  white-space:normal;
  font-size:12px;
  line-height:1.25
}
.bill-attribution {
  display:inline-flex;
  align-items:center;
  align-self:center;
  grid-column:auto;
  margin:0;
  min-width:20px
}
.bill-state {
  display:inline-flex;
  align-items:center;
  align-self:center
}
.bill-financial {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-content:start;
  gap:6px;
  min-width:0
}
.bill-financial .bill-amount-block {
  width:100%;
  min-width:0;
  margin:0;
  padding:10px 11px;
  justify-items:end
}
.bill-financial .bill-amount-block strong {
  font-size:23px;
  line-height:1.1
}
.payment-toggle {
  display:block;
  width:100%;
  min-height:36px;
  padding:7px 9px;
  border:1px solid #171918;
  border-radius:4px;
  background:#171918;
  color:#fff;
  font-size:11px;
  font-weight:750;
  line-height:1.2;
  transition:background-color .14s ease,color .14s ease,border-color .14s ease
}
.payment-toggle:hover {
  background:#fff;
  color:#171918
}
.payment-toggle:active {
  background:#dfe1de;
  transform:translateY(1px)
}
.payment-toggle.is-paid {
  background:#e7e9e6;
  color:#343a36;
  border-color:#aeb3af
}
.payment-toggle.is-paid:hover {
  background:#fff;
  border-color:#171918
}
.bill-card.is-paid,.bill-card.is-paid:hover {
  background:#f0f1ef;
  border-left-color:#afb5b0
}
.bill-card.is-paid .bill-name {
  color:#626a64;
  text-decoration:line-through
}
.bill-card.is-paid .bill-context,.bill-card.is-paid .bill-facts {
  color:#707770
}
.bill-card.is-paid .bill-amount-block {
  background:#e4e6e3;
  border-color:#b7bdb8;
  color:#555d57
}
.bill-card.is-paid .bill-amount-block strong,.bill-card.is-paid .bill-amount-block small {
  color:#555d57
}
.agenda-day {
  padding:0
}
.agenda-day+.agenda-day {
  border-top:1px solid #e7e9e6
}
.day-heading {
  padding:13px 16px 10px;
  margin:0;
  border-bottom:1px solid #e7e9e6
}
.agenda-item {
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  min-height:74px;
  padding:15px 16px;
  border-bottom:1px solid #e7e9e6
}
.agenda-item:last-child {
  border-bottom:0
}
.agenda-open {
  grid-template-columns:34px minmax(0,1fr);
  gap:11px;
  min-height:38px
}
.item-mark {
  width:34px;
  height:34px;
  border-radius:5px;
  font-size:15px
}
.item-title {
  font-size:15px;
  line-height:1.25
}
.item-sub {
  font-size:11px;
  margin-top:5px;
  gap:8px
}
.item-side {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:5px;
  min-width:0
}
.item-side .amount-block {
  min-width:122px;
  margin:0;
  padding:9px 10px
}
.item-side .amount-block strong {
  font-size:20px
}
.recurrence-icon,.bill-fact .recurrence-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:19px;
  height:19px;
  min-width:19px;
  margin:0 7px 0 8px;
  padding:0;
  border:1px solid currentColor;
  border-radius:4px;
  font-size:13px;
  line-height:1;
  vertical-align:middle
}
.bill-fact .recurrence-icon {
  margin-left:0;
  margin-right:7px
}
.item-title .recurrence-icon {
  margin-left:1px;
  margin-right:0
}
.priority-marker,.local-dot {
  border-radius:3px
}
.status-pill,.nav-count,.filter-menu>summary span {
  border-radius:4px
}
.back-button {
  display:grid;
  place-items:center;
  flex:none;
  width:44px;
  min-width:44px;
  height:44px;
  min-height:44px;
  padding:0;
  border:0;
  border-radius:4px;
  background:transparent;
  color:#171918;
  font:400 30px/1 Arial,sans-serif;
  text-align:center
}
.back-button:hover {
  background:#e7e9e6;
  color:#171918
}
.entry-row {
  display:grid;
  grid-template-columns:24px minmax(0,1fr) 46px;
  align-items:center;
  gap:12px;
  padding:13px 16px
}
.entry-row.is-done {
  background:#f3f4f2;
  border-left-color:#b5bab6
}
.entry-row.is-done .entry-title {
  text-decoration:none;
  color:#5f6761
}
.entry-row.is-done .entry-name {
  text-decoration:line-through
}
.entry-row.is-done .amount {
  background:#e4e6e3;
  border-color:#b7bdb8;
  color:#555d57
}
.entry-content {
  min-width:0
}
.entry-title {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  font-size:14px;
  line-height:1.35
}
.entry-row .amount {
  margin:0
}
.entry-title .status-pill {
  display:inline-flex;
  align-items:center;
  border-radius:4px;
  padding:4px 7px;
  margin:0
}
.entry-meta {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin-top:5px
}
.entry-meta .creator {
  display:inline-flex;
  align-items:center
}
.entry-check {
  display:grid;
  place-items:center;
  grid-column:1;
  width:23px;
  height:23px;
  padding:0;
  border:2px solid #646b65;
  border-radius:4px;
  background:#fff;
  color:#fff;
  font-size:16px;
  font-weight:800;
  line-height:1;
  transition:background-color .14s ease,border-color .14s ease
}
.entry-check:hover {
  border-color:#171918;
  background:#e7e9e6
}
.entry-check.checked,.entry-check.checked:hover {
  background:#171918;
  border-color:#171918;
  color:#fff
}
.entry-actions {
  display:grid;
  grid-column:3;
  grid-template-rows:repeat(2,32px);
  align-content:center;
  justify-items:center;
  gap:5px;
  min-width:42px;
  padding-left:7px;
  border-left:1px solid #d8dad6
}
.entry-actions .icon-button {
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid #d6d9d5;
  border-radius:4px;
  background:#fff;
  font-size:14px;
  transition:background-color .14s ease,border-color .14s ease
}
.entry-actions .icon-button:hover {
  background:#e7e9e6;
  border-color:#171918
}
.entry-check:active,.entry-actions .icon-button:active {
  transform:translateY(1px)
}
@media(max-width:700px) {
  .bill-card {
    padding:12px
  }
  .bill-card-layout {
    grid-template-columns:minmax(0,1fr) 110px;
    gap:10px
  }
  .bill-name {
    font-size:16px;
    line-height:1.22
  }
  .bill-context {
    font-size:10px;
    gap:4px;
    margin-top:4px
  }
  .bill-category {
    font-size:9px;
    padding:3px 5px
  }
  .bill-facts {
    gap:5px 10px;
    margin-top:10px
  }
  .bill-fact {
    display:flex;
    align-items:center;
    gap:4px
  }
  .bill-fact small {
    font-size:8px;
    letter-spacing:.3px
  }
  .bill-fact strong {
    font-size:10px;
    min-height:17px
  }
  .bill-attribution {
    min-width:18px
  }
  .bill-financial .bill-amount-block {
    padding:8px 7px
  }
  .bill-financial .bill-amount-block strong {
    font-size:18px
  }
  .payment-toggle {
    min-height:34px;
    font-size:11px;
    padding:5px 4px
  }
  .day-heading {
    padding:12px 12px 9px
  }
  .agenda-item {
    grid-template-columns:minmax(0,1fr) auto;
    gap:9px;
    min-height:67px;
    padding:12px
  }
  .agenda-open {
    grid-template-columns:31px minmax(0,1fr);
    gap:8px
  }
  .item-mark {
    width:31px;
    height:31px;
    border-radius:4px;
    font-size:14px
  }
  .item-title {
    font-size:14px
  }
  .item-sub {
    font-size:11px
  }
  .item-side .amount-block {
    min-width:94px;
    padding:7px 7px
  }
  .item-side .amount-block strong {
    font-size:17px
  }
  .recurrence-icon,.bill-fact .recurrence-icon {
    width:18px;
    height:18px;
    min-width:18px;
    font-size:12px
  }
  .back-button {
    width:44px;
    min-width:44px;
    height:44px;
    min-height:44px;
    font-size:29px
  }
  .entry-row {
    grid-template-columns:23px minmax(0,1fr) 42px;
    gap:8px;
    padding:12px 10px
  }
  .entry-check {
    width:22px;
    height:22px
  }
  .entry-actions {
    grid-column:3;
    min-width:40px;
    padding-left:5px;
    gap:5px
  }
  .entry-actions .icon-button {
    width:29px;
    height:29px
  }
  .entry-title {
    font-size:14px
  }
}
/* v0.9: visible entry notes, comment presence, and a clearer repeat mark. */
.entry-note {
  margin:6px 0 0;
  max-width:65ch;
  color:#4e5650;
  font-size:12px;
  line-height:1.45;
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
.entry-row.is-done .entry-note {
  color:#747c76
}
.entry-actions .comment-button {
  position:relative
}
.comment-indicator {
  position:absolute;
  top:2px;
  right:2px;
  width:8px;
  height:8px;
  border:1px solid #fff;
  border-radius:50%;
  background:#171918;
  pointer-events:none
}
.recurrence-icon svg {
  display:block;
  width:13px;
  height:13px;
  flex:none
}
@media(max-width:700px) {
  .entry-note {
    font-size:12px
  }
  .recurrence-icon svg {
    width:12px;
    height:12px
  }
}
/* Household access, shared with Dwelling's bold editorial system. */
.auth-mode .app-shell {
  display:none
}
.auth-mode.app-ready .app-shell {
  display:grid
}
.auth-mode.app-ready .auth-gate {
  display:none
}
.auth-gate {
  min-height:100vh;
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:22px;
  background:var(--canvas);
  color:var(--ink)
}
.auth-card {
  width:min(100%,540px);
  padding:clamp(24px,5vw,43px);
  background:#fff;
  border:2px solid var(--ink);
  border-radius:var(--radius)
}
.auth-brand {
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:35px;
  font:800 28px Manrope,sans-serif;
  letter-spacing:-1.3px;
  line-height:1
}
.auth-brand img {
  width:52px;
  height:52px;
  border-radius:7px
}
.auth-brand small {
  display:block;
  margin-top:6px;
  font:700 9px 'DM Sans',sans-serif;
  letter-spacing:1.5px;
  color:var(--muted)
}
.auth-card .eyebrow {
  color:var(--muted);
  font-size:10px
}
.auth-card h1 {
  font:800 clamp(2rem,6vw,3rem) Manrope,sans-serif;
  line-height:1.08;
  letter-spacing:-.045em;
  margin:12px 0 10px
}
.auth-card p {
  line-height:1.5;
  color:var(--muted);
  font-size:14px
}
.auth-form {
  display:grid;
  gap:15px;
  margin:25px 0 14px;
  border-top:1px solid var(--line);
  padding-top:22px
}
.auth-form label {
  display:grid;
  gap:8px;
  font-weight:700;
  font-size:13px
}
.auth-form input {
  width:100%;
  border:2px solid var(--ink);
  border-radius:var(--radius);
  padding:13px;
  font:inherit;
  font-size:16px;
  background:#fff;
  color:var(--ink)
}
.auth-form input:focus-visible,.household-choice:focus-visible,.household-invitation button:focus-visible {
  outline:3px solid var(--ink);
  outline-offset:3px
}
.auth-form .button {
  min-height:48px;
  font-size:14px
}
.auth-feedback {
  min-height:1.5em;
  font-weight:650;
  color:var(--ink)!important
}
.auth-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:24px 0
}
.auth-topline {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  font-size:12px;
  overflow-wrap:anywhere;
  border-bottom:1px solid var(--line);
  padding-bottom:15px
}
.auth-section-title {
  margin:24px 0 10px;
  font-size:10px;
  letter-spacing:1.5px;
  font-weight:800
}
.household-choices {
  display:grid;
  gap:8px
}
.household-choice,.household-invitation {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  width:100%;
  padding:15px;
  text-align:left;
  border:1px solid var(--ink);
  border-radius:var(--radius);
  background:#fff;
  color:var(--ink);
  font:inherit
}
.household-choice {
  cursor:pointer
}
.household-choice:hover,.household-invitation:hover {
  background:#f1f2f0
}
.household-choice strong,.household-invitation strong {
  display:block;
  font-size:17px;
  font-weight:800
}
.household-choice small,.household-invitation small {
  display:block;
  margin-top:5px;
  font-size:12px;
  color:var(--muted)
}
.household-invitation .button {
  flex:none
}
.auth-card .helper {
  font-size:12px
}
#shared-identity {
  display:grid;
  gap:6px;
  margin-top:12px
}
.signed-in-email {
  font-size:12px;
  overflow-wrap:anywhere
}
#shared-identity .text-button {
  justify-self:start
}
body:not(.auth-mode) #shared-identity {
  display:none
}
.auth-mode #local-identity {
  display:none
}
.member-role-select {
  border:1px solid var(--ink);
  background:#fff;
  border-radius:var(--radius);
  padding:6px;
  font-size:12px;
  min-width:85px
}
.invitation-email {
  display:block;
  color:var(--muted);
  font-size:11px;
  font-weight:400;
  margin-top:3px;
  overflow-wrap:anywhere
}
@media(max-width:600px) {
  .auth-gate {
    align-items:start;
    padding:0;
    background:#fff
  }
  .auth-card {
    min-height:100dvh;
    border:0;
    border-radius:0;
    padding:32px 22px 48px
  }
  .auth-brand {
    margin-bottom:45px
  }
  .member-row {
    flex-wrap:wrap
  }
  .member-role-select {
    margin-left:auto
  }
}
.access-error {
  border:1px solid #b74d43;
  background:#f9ece9;
  padding:10px;
  color:#7c3028!important
}
.auth-card [hidden] {
  display:none!important
}