/* ============================================================
   styles-homeos-enhanced.css — HomeOS · Supplies / Vendors / Bills
   Append the CONTENTS of this file to the end of apps/web/styles.css,
   OR keep it as a separate file and add one <link> after styles.css.

   Everything is scoped to .hx-scope (the section page wrapper) or to
   the .hx-* sheet / filter / toast layers, so existing HomeOS screens
   (dashboard, chores, calendar, meals) are NOT affected. Tokens with
   fallbacks reference the live design tokens already in styles.css.
   ============================================================ */
.hx-scope{
  --hx-ink:var(--ink,#1d2b30); --hx-body:#36474d; --hx-muted:#67797f; --hx-soft:#9aa9ad;
  --hx-teal:var(--accent-dark,#0f7d73); --hx-teal2:var(--accent,#33c3b4);
  --hx-line:rgba(35,60,65,0.1); --hx-line2:rgba(35,60,65,0.16);
  --hx-paper:#fff; --hx-amber:#946800; --hx-amberbg:#fbf3df; --hx-rose:#b4493a; --hx-rosebg:#fbeae6; --hx-blue:#2f6fab;
}

/* ---------- toolbar ---------- */
.hx-scope .hx-toolbar{display:flex;gap:9px;align-items:center;margin:14px 0 12px;}
.hx-scope .hx-primary{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:12px 14px;border:0;border-radius:13px;cursor:pointer;font-family:inherit;background:var(--hx-teal);color:#fff;font-size:13.5px;font-weight:700;box-shadow:0 10px 20px -12px rgba(17,125,116,0.8);}
.hx-scope .hx-primary svg{width:16px;height:16px;}
.hx-scope .hx-iconbtn{flex:0 0 auto;min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 12px;cursor:pointer;border:1px solid var(--hx-line2);border-radius:13px;background:#fff;color:var(--hx-ink);font-family:inherit;font-size:12.5px;font-weight:650;}
.hx-scope .hx-iconbtn svg{width:18px;height:18px;}
.hx-scope .hx-iconbtn.wide{width:auto;}

/* ---------- filter/sort bar ----------
   Uses the app's existing .filter-toolbar / .ft-icon-btn / .ft-badge / .ft-summary
   styles so Supplies / Vendors / Bills / Home chores / Meals all render identically.
   Filter + Sort sit on the RIGHT of the row everywhere; the summary text sits left.
   DOM order is [Filter][Sort][summary]; `order:-1` floats the summary to the front
   and `margin-right:auto` pushes the two buttons to the right edge. */
.filter-toolbar.hx-bar{margin:12px 0 0;}
.filter-toolbar{justify-content:flex-end;}
.filter-toolbar .ft-summary{order:-1;margin-left:0;margin-right:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48%;}

/* ---------- select head (shared by Supplies AND Home chores — un-scoped) ---------- */
.hx-select-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px;margin:12px 0 0;}
.hx-select-count{font-size:13px;font-weight:700;color:var(--accent-dark,#0f7d73);}
.hx-select-actions{display:flex;gap:8px;}

/* ---------- rows / list ---------- */
.hx-scope .os-card-list{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;border:1px solid var(--hx-line);}
.hx-scope .row-card{width:100%;text-align:left;cursor:pointer;font-family:inherit;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:13px 15px;border:0;border-bottom:1px solid var(--hx-line);background:#fff;transition:background 140ms ease;touch-action:manipulation;}
.hx-scope .os-card-list .row-card:last-child{border-bottom:0;}
.hx-scope .row-card:active{background:#f5fbfb;}
.hx-scope .row-card.sel{background:#eafaf7;}
.hx-scope .os-card-list.selecting .row-card{grid-template-columns:auto auto 1fr auto;}
.hx-scope .row-main{min-width:0;}
.hx-scope .row-main strong{display:block;font-size:16px;font-weight:400;color:var(--hx-ink);letter-spacing:-.005em;}
.hx-scope .row-main strong.strike{text-decoration:line-through;color:var(--hx-soft);}
.hx-scope .row-meta{display:flex;flex-wrap:wrap;align-items:center;gap:5px 11px;margin-top:5px;}
.hx-scope .row-meta .mi{display:inline-flex;align-items:center;gap:4px;color:var(--hx-muted);font-size:15px;}
.hx-scope .row-meta .mi svg{width:15px;height:15px;opacity:.85;}
.hx-scope .row-side{display:grid;gap:5px;justify-items:end;text-align:right;}
.hx-scope .row-by{font-size:15px;color:var(--hx-soft);}
.hx-scope .hx-dot{width:8px;height:8px;border-radius:50%;display:inline-block;}
.hx-scope .hx-chev{color:#c0cbce;font-size:19px;line-height:1;}

/* tick (multiselect + supplies bought) */
.hx-scope .hx-tick{width:24px;height:24px;flex:0 0 auto;border-radius:7px;cursor:pointer;border:1.8px solid var(--hx-line2);background:#fff;display:grid;place-items:center;color:transparent;}
.hx-scope .hx-tick svg{width:14px;height:14px;}
.hx-scope .hx-tick.on{background:var(--hx-teal);border-color:var(--hx-teal);color:#fff;}

/* pills */
.hx-scope .os-pill{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.02em;padding:3px 9px;border-radius:999px;white-space:nowrap;}
.hx-scope .os-pill.soft{background:rgba(35,60,65,0.07);color:var(--hx-muted);}
.hx-scope .os-pill.ok{background:#dff3ec;color:#0d6a55;}
.hx-scope .os-pill.warn{background:var(--hx-amberbg);color:var(--hx-amber);}
.hx-scope .os-pill.due{background:var(--hx-rosebg);color:var(--hx-rose);}
.hx-scope .os-pill.outline{background:transparent;border:1px solid var(--hx-line2);color:var(--hx-muted);}

/* bubbles */
.hx-scope .hx-bubble{width:38px;height:38px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;background:rgba(53,202,187,0.12);color:var(--hx-teal);}
.hx-scope .hx-bubble svg{width:18px;height:18px;}
.hx-scope .hx-bubble.lg{width:48px;height:48px;border-radius:14px;}
.hx-scope .hx-bubble.blue{background:rgba(63,111,171,0.14);color:#2f5688;}
.hx-scope .hx-bubble.gold{background:rgba(207,154,63,0.16);color:#946800;}

/* avatar */
.hx-avatar{flex:0 0 auto;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;}

/* ---------- detail ---------- */
.hx-scope .hx-detail-card{background:#fff;border:1px solid var(--hx-line);border-radius:18px;padding:16px;margin-top:12px;}
.hx-scope .hx-detail-head{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:center;}
.hx-scope .hx-detail-head.has-action{grid-template-columns:auto 1fr auto;}
.hx-scope .hx-detail-head h2{margin:0;font-size:18px;font-weight:740;color:var(--hx-ink);letter-spacing:-.02em;}
.hx-scope .hx-detail-head h2.strike{text-decoration:line-through;color:var(--hx-soft);}
.hx-scope .hx-detail-head p{margin:4px 0 0;color:var(--hx-muted);font-size:12.5px;}
.hx-scope .hx-drows{margin-top:6px;}
.hx-scope .hx-drow{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--hx-line2);opacity:1;border-color:#eef4f5;font-size:13.5px;}
.hx-scope .hx-drow:last-child{border-bottom:0;}
.hx-scope .hx-drow b{color:var(--hx-muted);font-weight:600;}
.hx-scope .hx-drow span{color:var(--hx-ink);}

.hx-scope .os-section-title.hx-sec{display:flex;align-items:center;gap:8px;margin:18px 2px 0;font-size:13px;font-weight:700;color:#2a4146;}
.hx-scope .os-section-title.hx-sec svg{width:16px;height:16px;color:var(--hx-teal);}
.hx-scope .hx-link{margin-left:auto;border:0;background:none;cursor:pointer;font-family:inherit;color:var(--hx-teal);font-size:12.5px;font-weight:650;}

/* contact actions */
.hx-scope .hx-contact-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:14px;}
.hx-scope .hx-contact-actions a{display:grid;gap:5px;justify-items:center;padding:12px 6px;cursor:pointer;border:1px solid var(--hx-line2);border-radius:14px;background:#fff;color:var(--hx-teal);font-size:12px;font-weight:650;text-decoration:none;}
.hx-scope .hx-contact-actions a svg{width:18px;height:18px;}
.hx-scope .hx-contact-actions a.off{opacity:.4;pointer-events:none;}

/* assoc tasks */
.hx-scope .hx-assoc{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;padding:12px 13px;border:1px solid var(--hx-line);border-radius:13px;background:#fff;}
.hx-scope .hx-assoc + .hx-assoc{margin-top:8px;}
.hx-scope .hx-adot{width:8px;height:8px;border-radius:50%;}
.hx-scope .hx-assoc strong{font-size:13.5px;color:var(--hx-ink);font-weight:650;}
.hx-scope .hx-asub{display:block;color:var(--hx-muted);font-size:11.5px;margin-top:2px;}
.hx-scope .hx-grp{margin:0 2px 8px;font-size:12px;font-weight:700;color:#46595e;}

/* comments */
.hx-scope .hx-comments{display:grid;gap:13px;}
.hx-scope .hx-comment{display:grid;grid-template-columns:32px 1fr;gap:10px;}
.hx-scope .hx-chead{display:flex;align-items:baseline;gap:8px;}
.hx-scope .hx-chead strong{font-size:13px;color:var(--hx-ink);}
.hx-scope .hx-chead em{font-style:normal;color:#93a2a6;font-size:11px;}
.hx-scope .hx-ctext{margin:3px 0 0;font-size:13px;color:#37484e;line-height:1.45;}
.hx-scope .hx-comment-form{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:14px;}

/* ---------- bills ---------- */
.hx-scope .hx-thumb{width:46px;height:56px;flex:0 0 auto;border-radius:9px;overflow:hidden;position:relative;border:1px solid var(--hx-line2);display:grid;place-items:center;background:repeating-linear-gradient(135deg,rgba(53,202,187,0.1) 0 6px,rgba(53,202,187,0.03) 6px 12px);color:#8a9a9e;}
.hx-scope .hx-thumb svg{width:20px;height:20px;}
.hx-scope .hx-thumb.lg{width:140px;height:176px;border-radius:12px;}
.hx-scope .hx-ext{position:absolute;bottom:3px;left:0;right:0;text-align:center;font-size:7.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7a8a8e;}
.hx-scope .hx-bill-tile .hx-amount,.hx-scope .hx-amount{font-size:16px;font-weight:740;color:var(--hx-ink);letter-spacing:-.02em;}
.hx-scope .hx-grphead{display:flex;align-items:center;justify-content:space-between;margin:16px 2px 8px;}
.hx-scope .hx-grphead h3{margin:0;font-size:15px;font-weight:700;color:#2a4146;}
.hx-scope .hx-grphead span{font-size:15px;font-weight:700;color:var(--hx-teal);}

.hx-scope .hx-total{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid var(--hx-line);border-radius:14px;padding:12px 14px;}
.hx-scope .hx-tcount{display:block;font-size:11.5px;color:var(--hx-muted);font-weight:600;}
.hx-scope .hx-tsum{display:block;font-size:20px;font-weight:760;color:var(--hx-ink);letter-spacing:-.02em;margin-top:2px;}
.hx-scope .hx-unpaid{display:inline-flex;align-items:center;gap:6px;border:0;cursor:pointer;font-family:inherit;background:var(--hx-amberbg);color:var(--hx-amber);font-size:12px;font-weight:700;padding:8px 12px;border-radius:11px;}
.hx-scope .hx-unpaid svg{width:14px;height:14px;}
.hx-scope .hx-allpaid{font-size:12px;font-weight:700;color:#0d6a55;}

.hx-scope .hx-review{border:1px solid rgba(53,202,187,0.3);border-radius:16px;background:#fbfffe;padding:13px;display:grid;gap:12px;box-shadow:0 4px 14px -10px rgba(17,125,116,0.5);margin-bottom:10px;}
.hx-scope .hx-rvtop{display:grid;grid-template-columns:46px 1fr auto;gap:11px;align-items:center;}
.hx-scope .hx-detected{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;color:var(--hx-teal);background:rgba(53,202,187,0.14);padding:4px 8px;border-radius:999px;}
.hx-scope .hx-detected svg{width:12px;height:12px;}
.hx-scope .hx-rvfile{display:block;margin-top:6px;font-size:13.5px;font-weight:650;color:var(--hx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hx-scope .hx-x{width:28px;height:28px;flex:0 0 auto;border:0;border-radius:50%;background:rgba(35,60,65,0.08);color:var(--hx-muted);font-size:14px;cursor:pointer;font-family:inherit;}
.hx-scope .hx-rvfields{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.hx-scope .hx-rvfields .full{grid-column:1/-1;}
.hx-scope .hx-rvfields label{display:grid;gap:6px;}
.hx-scope .hx-conf{font-size:11px;display:inline-flex;align-items:center;gap:5px;}
.hx-scope .hx-conf svg{width:12px;height:12px;}
.hx-scope .hx-conf.high{color:var(--hx-teal);} .hx-scope .hx-conf.med{color:var(--hx-amber);} .hx-scope .hx-conf.low{color:var(--hx-rose);}

/* ---------- forms (shared by scope + sheets) ---------- */
.hx-scope .field,.hx-sheet .field{display:grid;gap:6px;margin-top:14px;}
.hx-flabel{font-size:12.5px;font-weight:650;color:#46595e;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;}
.hx-flabel .opt{color:#9aa9ad;font-weight:400;}
.hx-field{font-family:inherit;font-size:14px;color:var(--ink,#1d2b30);width:100%;border:1px solid rgba(35,60,65,0.16);border-radius:12px;background:#fff;padding:11px 13px;outline:none;}
textarea.hx-field{resize:none;min-height:64px;line-height:1.45;}
.hx-field:focus{border-color:var(--accent,#33c3b4);box-shadow:0 0 0 3px rgba(53,202,187,0.16);}
.hx-field::placeholder{color:#9aa9ad;}
.hx-select-wrap{position:relative;}
.hx-select-wrap::after{content:"▾";position:absolute;right:13px;top:50%;transform:translateY(-50%);color:#9aa9ad;pointer-events:none;font-size:12px;}
select.hx-field{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;}

/* ---------- custom in-app picker (replaces native <select> option list) ---------- */
.hx-picker{position:relative;}
.hx-pick-trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;cursor:pointer;font-family:inherit;}
.hx-pick-trigger.open{border-color:var(--accent,#33c3b4);box-shadow:0 0 0 3px rgba(53,202,187,0.16);}
.hx-pick-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink,#1d2b30);}
.hx-pick-caret{color:#9aa9ad;font-size:12px;transition:transform .18s ease;}
.hx-pick-trigger.open .hx-pick-caret{transform:rotate(180deg);}
.hx-pick-menu{margin-top:6px;border:1px solid rgba(35,60,65,0.14);border-radius:13px;background:#fff;box-shadow:0 18px 40px -16px rgba(2,10,12,0.45);padding:5px;max-height:264px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.hx-pick-grp{margin:8px 8px 4px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8a9a9e;}
.hx-pick-grp:first-child{margin-top:4px;}
.hx-pick-opt{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:11px 12px;border:0;border-radius:9px;background:transparent;color:var(--ink,#1d2b30);font-size:14px;font-family:inherit;cursor:pointer;text-align:left;}
.hx-pick-opt:hover{background:rgba(53,202,187,0.09);}
.hx-pick-opt.active{background:rgba(53,202,187,0.13);color:var(--accent-dark,#0f7d73);font-weight:650;}
.hx-pick-tick{font-style:normal;color:var(--accent-dark,#0f7d73);font-size:13px;width:14px;text-align:center;}

/* fill-from-contact button + contact chooser rows */
.hx-contact-btn{display:inline-flex;align-items:center;gap:7px;width:100%;justify-content:center;margin:2px 0 4px;padding:11px;border:1px dashed rgba(53,202,187,0.55);border-radius:12px;background:rgba(53,202,187,0.06);color:var(--accent-dark,#0f7d73);font-size:13px;font-weight:650;font-family:inherit;cursor:pointer;}
.hx-contact-btn:hover{background:rgba(53,202,187,0.12);}
.hx-contact-btn svg{width:16px;height:16px;}
.hx-pick-section{margin:14px 2px 6px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#8a9a9e;}
.hx-pickrow{display:flex;align-items:center;gap:11px;padding:11px 12px;border:1px solid rgba(35,60,65,0.14);border-radius:12px;background:#fff;margin-bottom:7px;cursor:pointer;}
.hx-pickrow:has(.hx-pick-cb:checked){border-color:var(--accent,#33c3b4);background:rgba(53,202,187,0.07);}
.hx-pickrow .hx-pick-cb{width:18px;height:18px;accent-color:var(--accent-dark,#0f7d73);}
.hx-pickrow span{font-size:13.5px;color:var(--ink,#1d2b30);}

/* delete-vendor link + confirm dialog actions */
.hx-delete-link{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:9px 4px;border:0;background:transparent;color:#b4453a;font-size:13px;font-weight:650;font-family:inherit;cursor:pointer;}
.hx-delete-link svg{width:15px;height:15px;}
.hx-confirm-actions{display:flex;gap:10px;margin-top:16px;}
.hx-confirm-actions .hx-cancel,.hx-confirm-actions .hx-danger{flex:1;padding:14px;border-radius:13px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;}
.hx-confirm-actions .hx-cancel{border:1px solid rgba(35,60,65,0.18);background:#fff;color:#2a4146;}
.hx-confirm-actions .hx-danger{border:0;background:#b4453a;color:#fff;}
.hx-note.rose{background:rgba(180,69,58,0.08);border:1px solid rgba(180,69,58,0.2);}
.hx-note.rose svg{color:#b4453a;}
.hx-stepper{display:inline-flex;align-items:center;border:1px solid rgba(35,60,65,0.16);border-radius:12px;overflow:hidden;background:#fff;}
.hx-stepper button{width:42px;height:44px;border:0;background:transparent;color:var(--accent-dark,#0f7d73);font-size:20px;cursor:pointer;font-family:inherit;}
.hx-stepper span{min-width:44px;text-align:center;font-size:15px;font-weight:700;color:var(--ink,#1d2b30);}
.hx-submit{width:100%;margin-top:18px;padding:14px;border:0;border-radius:13px;cursor:pointer;font-family:inherit;background:var(--accent-dark,#0f7d73);color:#fff;font-size:15px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:7px;}
.hx-submit svg{width:16px;height:16px;}

/* ---------- notes / footers ---------- */
.hx-note{display:flex;align-items:flex-start;gap:9px;padding:11px 13px;border-radius:13px;font-size:12.5px;line-height:1.45;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;}
.hx-note svg{width:16px;height:16px;flex:0 0 auto;margin-top:1px;}
.hx-note.teal{background:rgba(53,202,187,0.1);color:#15706a;}
.hx-note.gold{background:#fbf3df;color:#7c5510;}
.hx-scope .hx-foot{margin:14px 2px 0;font-size:11.5px;line-height:1.5;color:#67797f;text-align:center;}
.hx-scope .hx-empty{text-align:center;padding:34px 18px;background:#fff;border:1px solid var(--hx-line);border-radius:18px;margin-top:12px;}
.hx-scope .hx-empty svg{width:30px;height:30px;color:var(--accent,#33c3b4);opacity:.75;}
.hx-scope .hx-empty h3{margin:12px 0 4px;font-size:15px;color:var(--hx-ink);}
.hx-scope .hx-empty p{margin:0;color:#67797f;font-size:13px;}

/* ============================================================
   Sheets / Filter / Select / Toast — fixed overlays appended to body.
   Not scoped to .hx-scope (they live outside #app), but all class
   names are hx-* so they don't collide with app styles.
   ============================================================ */
.hx-sheet-layer,.hx-scope ~ *[data-hx-flt],[data-hx-flt]{position:fixed;inset:0;z-index:90;}
.hx-sheet-layer{position:fixed;inset:0;z-index:90;}
[data-hx-flt]{position:fixed;inset:0;z-index:92;}
.hx-backdrop{position:absolute;inset:0;background:rgba(20,40,46,0.42);backdrop-filter:blur(3px);animation:hx-fade .2s ease;}
@keyframes hx-fade{from{opacity:0;}}
.hx-sheet{position:absolute;left:0;right:0;bottom:0;max-height:88%;overflow-y:auto;background:linear-gradient(180deg,#fbfffe,#f1f9f8);border-radius:24px 24px 0 0;padding:8px 20px 24px;box-shadow:0 -20px 50px -20px rgba(0,0,0,0.5);animation:hx-rise .26s cubic-bezier(.2,.9,.3,1);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;}
@keyframes hx-rise{from{transform:translateY(40px);opacity:.5;}}
.hx-grip{width:38px;height:4px;border-radius:999px;background:rgba(120,150,160,0.4);margin:6px auto 12px;}
.hx-sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.hx-sheet-title{margin:0;font-size:19px;font-weight:740;letter-spacing:-.02em;color:#1d2b30;}
.hx-sheet .folder-line{margin:4px 0 0;font-size:13px;color:#67797f;}
.hx-x{width:32px;height:32px;flex:0 0 auto;border-radius:50%;border:0;background:rgba(35,60,65,0.08);color:#67797f;font-size:15px;cursor:pointer;font-family:inherit;}
.hx-sheet-body{margin-top:4px;}

/* sort sheet options */
.hx-opt-list{display:flex;flex-direction:column;margin-top:10px;}
.hx-opt{display:flex;align-items:center;justify-content:space-between;padding:14px 4px;border:0;border-bottom:1px solid rgba(35,60,65,0.08);background:none;cursor:pointer;font-family:inherit;font-size:14.5px;color:#36474d;}
.hx-opt:last-child{border-bottom:0;}
.hx-opt.active{color:var(--accent-dark,#0f7d73);font-weight:700;}
.hx-tick-s{font-style:normal;color:var(--accent-dark,#0f7d73);}

/* filter sheet */
.hx-filter-sheet{padding-bottom:0;}
.hx-fhead{display:flex;align-items:center;justify-content:space-between;}
.hx-clear{border:0;background:none;color:var(--accent-dark,#0f7d73);font-family:inherit;font-size:13px;font-weight:650;cursor:pointer;}
.hx-fbody{display:grid;grid-template-columns:130px 1fr;gap:0;margin-top:12px;min-height:240px;max-height:50vh;}
.hx-rail{display:flex;flex-direction:column;gap:2px;border-right:1px solid rgba(35,60,65,0.1);padding-right:8px;overflow-y:auto;}
.hx-rail-item{position:relative;text-align:left;border:0;background:none;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:600;color:#5d7176;padding:11px 10px;border-radius:10px;display:flex;align-items:center;gap:6px;}
.hx-rail-item.active{background:rgba(53,202,187,0.12);color:var(--accent-dark,#0f7d73);}
.hx-railcount{font-style:normal;margin-left:auto;background:var(--accent-dark,#0f7d73);color:#fff;font-size:10px;font-weight:800;min-width:16px;height:16px;border-radius:999px;display:inline-grid;place-items:center;padding:0 4px;}
.hx-fopts{overflow-y:auto;padding-left:12px;}
.hx-fopt{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 4px;border:0;border-bottom:1px solid rgba(35,60,65,0.07);background:none;cursor:pointer;font-family:inherit;font-size:14px;color:#36474d;}
.hx-fopt:last-child{border-bottom:0;}
.hx-fopt .hx-dot{width:9px;height:9px;border-radius:50%;display:inline-block;}
.hx-box{font-style:normal;width:22px;height:22px;flex:0 0 auto;border:1.7px solid rgba(35,60,65,0.2);border-radius:6px;display:grid;place-items:center;color:#fff;font-size:13px;}
.hx-fopt.on .hx-box{background:var(--accent-dark,#0f7d73);border-color:var(--accent-dark,#0f7d73);}
.hx-empty-opt{color:#9aa9ad;font-size:13px;padding:14px 4px;}
.hx-ffoot{position:sticky;bottom:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 0 4px;background:linear-gradient(180deg,rgba(241,249,248,0),#f1f9f8 30%);margin-top:6px;}
.hx-fclose{padding:13px;border:1px solid rgba(35,60,65,0.16);border-radius:12px;background:#fff;color:#36474d;font-family:inherit;font-size:14px;font-weight:650;cursor:pointer;}
.hx-fapply{padding:13px;border:0;border-radius:12px;background:var(--accent-dark,#0f7d73);color:#fff;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;}

/* chip-pick (kept for any future use) */
.hx-chip-pick{display:flex;flex-wrap:wrap;gap:7px;}
.hx-chip-pick button{cursor:pointer;font-family:inherit;border:1px solid rgba(35,60,65,0.14);border-radius:999px;background:#fff;color:#5d7176;font-size:12.5px;font-weight:600;padding:7px 12px;display:inline-flex;align-items:center;gap:6px;}
.hx-chip-pick button.active{background:var(--accent-dark,#0f7d73);border-color:var(--accent-dark,#0f7d73);color:#fff;}

/* multiselect bar — Supplies renders the app's existing .multiselect-bar markup
   (same as Home chores), so no override here: both share the live app style. */

/* toast */
.hx-toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:95;background:rgba(18,33,33,0.94);color:#eafaf7;font-size:13px;font-weight:600;padding:11px 18px;border-radius:999px;box-shadow:0 14px 30px -12px rgba(0,0,0,0.6);animation:hx-toast-in .24s ease;white-space:nowrap;max-width:86%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;}
@keyframes hx-toast-in{from{opacity:0;transform:translate(-50%,8px);}}

/* dashboard household cards (used by the homeos.js patch) */
.hx-household{display:flex;flex-direction:column;gap:12px;margin-top:12px;}
.hx-hh-card{width:100%;text-align:left;cursor:pointer;font-family:inherit;display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:13px;padding:14px;border:1px solid rgba(35,60,65,0.08);border-radius:20px;background:#fff;box-shadow:0 10px 26px -16px rgba(8,27,32,0.4);}
.hx-hh-card:active{background:#f5fbfb;}
.hx-hh-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(53,202,187,0.12);color:var(--accent-dark,#0f7d73);}
.hx-hh-ico svg{width:19px;height:19px;}
.hx-hh-ico.blue{background:rgba(63,111,171,0.14);color:#2f5688;}
.hx-hh-ico.gold{background:rgba(207,154,63,0.16);color:#946800;}
.hx-hh-body{min-width:0;}
.hx-hh-body strong{display:block;font-size:18px;font-weight:680;color:#1d2b30;}
.hx-hh-body em{display:block;font-style:normal;font-size:12.5px;color:#67797f;margin-top:2px;}
.hx-hh-pill{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap;background:rgba(35,60,65,0.07);color:#67797f;}
.hx-hh-pill.due{background:#fbe7df;color:#b4493a;}
.hx-hh-pill.warn{background:#fbf3df;color:#946800;}

/* ============================================================
   Import-tasks screen (Home chores → Import) — themed to HomeOS.
   Restyles the existing .import-* markup so it matches the app.
   ============================================================ */
.import-page .import-drop{display:flex;align-items:center;gap:14px;width:100%;margin:14px 0 0;padding:18px 16px;border:1.5px dashed rgba(53,202,187,0.55);border-radius:18px;background:rgba(53,202,187,0.06);cursor:pointer;text-align:left;}
.import-page .import-drop:active{background:rgba(53,202,187,0.12);}
.import-page .import-drop-icon{width:44px;height:44px;flex:0 0 auto;display:grid;place-items:center;border-radius:13px;background:#fff;color:var(--accent-dark,#0f7d73);border:1px solid rgba(35,60,65,0.1);}
.import-page .import-drop-icon svg{width:22px;height:22px;}
.import-page .import-drop-text strong{display:block;font-size:14.5px;font-weight:680;color:var(--ink,#1d2b30);}
.import-page .import-drop-text em{display:block;font-style:normal;font-size:12.5px;color:#67797f;margin-top:2px;}
.import-page .import-status{margin:10px 2px 0;font-size:12.5px;color:#67797f;}
.import-page .import-status.error{color:#b4493a;}
.import-page .import-cols-wrap{margin:14px 0 0;border:1px solid rgba(35,60,65,0.1);border-radius:14px;background:#fff;overflow:hidden;}
.import-page .import-cols-wrap summary{display:flex;align-items:center;gap:9px;padding:13px 15px;cursor:pointer;font-size:13.5px;font-weight:650;color:var(--ink,#1d2b30);list-style:none;}
.import-page .import-cols-wrap summary::-webkit-details-marker{display:none;}
.import-page .import-cols-ico{display:inline-grid;place-items:center;color:var(--accent-dark,#0f7d73);}
.import-page .import-cols-ico svg{width:17px;height:17px;}
.import-page .import-cols-chev{margin-left:auto;color:#9aa9ad;transition:transform .18s ease;}
.import-page .import-cols-wrap[open] .import-cols-chev{transform:rotate(90deg);}
.import-page .import-cols{display:flex;flex-wrap:wrap;gap:7px;padding:0 15px 14px;}
.import-page .col-chip{font-size:11.5px;font-weight:600;color:#5d7176;background:rgba(35,60,65,0.06);border:1px solid rgba(35,60,65,0.08);border-radius:999px;padding:5px 11px;}
.import-page .import-review-title{display:flex;align-items:center;gap:8px;margin:20px 2px 4px;font-size:13px;font-weight:700;color:#2a4146;}
.import-page .import-review-title .review-count{margin-left:auto;font-size:12px;font-weight:600;color:#67797f;}
.import-page .import-select-all{margin:2px 0 10px;border:0;background:none;color:var(--accent-dark,#0f7d73);font-family:inherit;font-size:12.5px;font-weight:650;cursor:pointer;padding:2px;}
.import-page .import-list{display:flex;flex-direction:column;border:1px solid rgba(35,60,65,0.1);border-radius:16px;overflow:hidden;}
.import-page .import-row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;padding:13px 15px;background:#fff;border-bottom:1px solid rgba(35,60,65,0.08);}
.import-page .import-list .import-row:last-child{border-bottom:0;}
.import-page .import-row.invalid{background:rgba(180,73,58,0.04);}
.import-page .import-check{width:24px;height:24px;flex:0 0 auto;border-radius:7px;border:1.8px solid rgba(35,60,65,0.2);background:#fff;color:transparent;font-size:13px;display:grid;place-items:center;cursor:pointer;font-family:inherit;}
.import-page .import-check.on{background:var(--accent-dark,#0f7d73);border-color:var(--accent-dark,#0f7d73);color:#fff;}
.import-page .import-main{min-width:0;}
.import-page .import-main strong{display:block;font-size:14px;font-weight:650;color:var(--ink,#1d2b30);}
.import-page .import-main em{display:block;font-style:normal;font-size:12px;color:#67797f;margin-top:3px;line-height:1.35;}
.import-page .import-edit{border:1px solid rgba(35,60,65,0.16);background:#fff;border-radius:10px;font-family:inherit;font-size:12.5px;font-weight:650;color:var(--ink,#1d2b30);padding:7px 12px;cursor:pointer;}
.import-page .import-flag{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap;}
.import-page .import-flag.ok{background:#dff3ec;color:#0d6a55;}
.import-page .import-flag.fix{background:#fbe7df;color:#b4493a;}
.import-page .import-commit{width:100%;margin:16px 0 0;padding:14px;border:0;border-radius:13px;cursor:pointer;font-family:inherit;background:var(--accent-dark,#0f7d73);color:#fff;font-size:15px;font-weight:700;box-shadow:0 10px 20px -12px rgba(17,125,116,0.8);}
.import-page .settings-foot{margin:12px 2px 0;font-size:11.5px;line-height:1.5;color:#67797f;}

/* Meals — empty state card (no fabricated plan) */
.meals-empty{display:grid;justify-items:center;text-align:center;gap:6px;padding:26px 18px;}
.meals-empty-spark{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:rgba(53,202,187,0.12);color:var(--accent-dark,#0f7d73);}
.meals-empty-spark svg{width:20px;height:20px;}
.meals-empty strong{font-size:15.5px;color:var(--ink,#1d2b30);font-weight:700;}
.meals-empty em{font-style:normal;font-size:13px;color:#67797f;line-height:1.5;max-width:34ch;}
.meals-empty-actions{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:10px;}
.meals-empty-actions .mp-generate{width:auto;margin:0;padding:11px 16px;border:0;border-radius:12px;background:var(--accent-dark,#0f7d73);color:#fff;font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer;}
.meals-empty-actions .mp-bridge-btn{width:auto;margin:0;padding:11px 16px;border:1px solid rgba(35,60,65,0.16);border-radius:12px;background:#fff;color:var(--ink,#1d2b30);font-family:inherit;font-size:13.5px;font-weight:650;cursor:pointer;}