Add favicon and improve code formatting in app components

Track logo.png with Git LFS so Hugging Face Xet accepts the push.

Co-authored-by: Cursor <cursoragent@cursor.com>

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+frontend/app/logo.png filter=lfs diff=lfs merge=lfs -text

frontend/app/app.jsx

@@ -2,26 +2,29 @@
    Mini Fam — app shell
    ============================================================ */
 const NAV = [
-  { id: "home",     label: "Family Brief", icon: "home" },
-  { id: "chat",     label: "Chat",         icon: "chat" },
-  { id: "calendar", label: "Calendar",     icon: "calendar" },
-  { id: "recipes",  label: "Recipes",      icon: "recipes" },
-  { id: "meals",    label: "Meal plan",    icon: "meals" },
-  { id: "notes",    label: "Notes",        icon: "notes" },
+  { id: "home", label: "Family Brief", icon: "home" },
+  { id: "chat", label: "Chat", icon: "chat" },
+  { id: "calendar", label: "Calendar", icon: "calendar" },
+  { id: "recipes", label: "Recipes", icon: "recipes" },
+  { id: "meals", label: "Meal plan", icon: "meals" },
+  { id: "notes", label: "Notes", icon: "notes" },
 ];
 const TITLES = {
-  home:     ["", ""],
-  chat:     ["Chat", "One assistant, the whole family's context — running on your device"],
+  home: ["", ""],
+  chat: [
+    "Chat",
+    "One assistant, the whole family's context — running on your device",
+  ],
   calendar: ["Calendar", "The shared family week"],
-  recipes:  ["Recipes", "Your recipe box, stored as plain Markdown"],
-  meals:    ["Meal plan", "A week of dinners, planned and shopped for"],
-  notes:    ["Notes", "A private space for each person"],
+  recipes: ["Recipes", "Your recipe box, stored as plain Markdown"],
+  meals: ["Meal plan", "A week of dinners, planned and shopped for"],
+  notes: ["Notes", "A private space for each person"],
   settings: ["Settings", "Your family, stored locally in data/members.json"],
 };
 
 function App() {
   const [route, setRoute] = useState("home");
-  const [active, setActive] = useState(null);         // who's talking (null until roster loads)
+  const [active, setActive] = useState(null); // who's talking (null until roster loads)
   const [chatSeed, setChatSeed] = useState(null);
   const [recipeOpen, setRecipeOpen] = useState(null); // recipe forwarded from meal plan
 
@@ -29,18 +32,26 @@ function App() {
   // setMembers (from seed.jsx) updates the shared global every screen reads;
   // the local state mirror just forces a re-render so changes propagate.
   const [members, setMembersState] = useState([]);
-  const applyMembers = (list) => { setMembers(list); setMembersState(list || []); };
+  const applyMembers = (list) => {
+    setMembers(list);
+    setMembersState(list || []);
+  };
   useEffect(() => {
     MFLive.members()
       .then((list) => {
         applyMembers(list);
-        setActive((a) => (a && list.some((x) => x.id === a)) ? a : (list[0] ? list[0].id : null));
+        setActive((a) =>
+          a && list.some((x) => x.id === a) ? a : list[0] ? list[0].id : null,
+        );
       })
       .catch((e) => console.warn("Mini Fam: member roster load failed —", e));
   }, []);
 
   const addMember = (name, veg) =>
-    MFLive.addMember(name, veg).then((list) => { applyMembers(list); return list; });
+    MFLive.addMember(name, veg).then((list) => {
+      applyMembers(list);
+      return list;
+    });
   const removeMember = (id) =>
     MFLive.removeMember(id).then((list) => {
       applyMembers(list);
@@ -53,7 +64,10 @@ function App() {
   const [plan] = useLive(() => MFLive.mealPlan(), [], emptyPlan);
 
   const go = (r) => setRoute(r);
-  const ask = (text) => { setChatSeed(text); setRoute("chat"); };
+  const ask = (text) => {
+    setChatSeed(text);
+    setRoute("chat");
+  };
 
   const [title, sub] = TITLES[route];
 
@@ -63,12 +77,18 @@ function App() {
       <aside className="sidebar">
         <div className="brand">
           <div className="mark" />
-          <div className="word">Mini<b>Fam</b></div>
+          <div className="word">
+            Mini<b>Fam</b>
+          </div>
         </div>
 
         <nav>
-          {NAV.map(n => (
-            <button key={n.id} className={`nav-item ${route === n.id ? "active" : ""}`} onClick={() => go(n.id)}>
+          {NAV.map((n) => (
+            <button
+              key={n.id}
+              className={`nav-item ${route === n.id ? "active" : ""}`}
+              onClick={() => go(n.id)}
+            >
               <Icon name={n.icon} size={18} />
               <span>{n.label}</span>
               {n.badge && <span className="badge">{n.badge}</span>}
@@ -78,26 +98,29 @@ function App() {
 
         <div className="nav-spacer" />
 
-        <button className={`nav-item ${route === "settings" ? "active" : ""}`} onClick={() => go("settings")}><Icon name="settings" size={18} /><span>Settings</span></button>
-        <div className="account" style={{ marginTop: 8 }}>
-          <div className="gmail"><Icon name="mail" size={15} style={{ color: "var(--ash)" }} /></div>
+        <button
+          className={`nav-item ${route === "settings" ? "active" : ""}`}
+          onClick={() => go("settings")}
+        >
+          <Icon name="settings" size={18} />
+          <span>Settings</span>
+        </button>
+        {/* <div className="account" style={{ marginTop: 8 }}>
+          <div className="gmail">
+            <Icon name="mail" size={15} style={{ color: "var(--ash)" }} />
+          </div>
           <div className="meta">
             <div className="t">The Soto Family</div>
             <div className="s">soto.family@gmail.com</div>
           </div>
           <div className="dot" title="Running locally" />
-        </div>
+        </div> */}
       </aside>
 
       {/* ---- main ---- */}
       <main className="main">
         <header className="topbar">
-          {route === "home" ? (
-            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
-              <div className="mark" style={{ width: 26, height: 26, borderRadius: 8, background: "var(--spectrum)" }} />
-              <span style={{ fontSize: 14, fontWeight: 600, letterSpacing: "-.01em" }}>Family Brief</span>
-            </div>
-          ) : (
+          {route === "home" ? null : (
             <div>
               <h1>{title}</h1>
               {sub && <div className="sub">{sub}</div>}
@@ -105,11 +128,18 @@ function App() {
           )}
 
           <div className="topbar-right">
-            <button className="btn btn-icon btn-ghost" title="Notifications"><Icon name="bell" size={18} /></button>
+            <button className="btn btn-icon btn-ghost" title="Notifications">
+              <Icon name="bell" size={18} />
+            </button>
             <div className="member-switch">
               <span className="who">Who's here?</span>
-              {members.map(mem => (
-                <button key={mem.id} className={`m-chip ${active === mem.id ? "on" : ""}`} onClick={() => setActive(mem.id)} title={mem.full}>
+              {members.map((mem) => (
+                <button
+                  key={mem.id}
+                  className={`m-chip ${active === mem.id ? "on" : ""}`}
+                  onClick={() => setActive(mem.id)}
+                  title={mem.full}
+                >
                   <Avatar member={mem} size="sm" ring={active === mem.id} />
                   <span className="name">{mem.name}</span>
                 </button>
@@ -118,18 +148,52 @@ function App() {
           </div>
         </header>
 
-        <div className={`view scroll ${route === "chat" ? "" : ""}`} style={route === "chat" ? { paddingBottom: 18, display: "flex", flexDirection: "column" } : {}}>
-          {route === "home" && <Home activeMember={active} onNavigate={go} onAsk={ask} plan={plan} recipes={recipes} />}
-          {route === "chat" && <Chat activeMember={active} seedInput={chatSeed} clearSeed={() => setChatSeed(null)} recipes={recipes} />}
+        <div
+          className={`view scroll ${route === "chat" ? "" : ""}`}
+          style={
+            route === "chat"
+              ? { paddingBottom: 18, display: "flex", flexDirection: "column" }
+              : {}
+          }
+        >
+          {route === "home" && (
+            <Home
+              activeMember={active}
+              onNavigate={go}
+              onAsk={ask}
+              plan={plan}
+              recipes={recipes}
+            />
+          )}
+          {route === "chat" && (
+            <Chat
+              activeMember={active}
+              seedInput={chatSeed}
+              clearSeed={() => setChatSeed(null)}
+              recipes={recipes}
+            />
+          )}
           {route === "calendar" && <Calendar onNavigate={go} />}
           {route === "recipes" && <Recipes recipes={recipes} />}
-          {route === "meals" && <Meals plan={plan} onOpenRecipe={(r) => setRecipeOpen(r)} />}
-          {route === "notes" && <Notes activeMember={active} members={members} />}
-          {route === "settings" && <Settings members={members} onAdd={addMember} onRemove={removeMember} />}
+          {route === "meals" && (
+            <Meals plan={plan} onOpenRecipe={(r) => setRecipeOpen(r)} />
+          )}
+          {route === "notes" && (
+            <Notes activeMember={active} members={members} />
+          )}
+          {route === "settings" && (
+            <Settings
+              members={members}
+              onAdd={addMember}
+              onRemove={removeMember}
+            />
+          )}
         </div>
       </main>
 
-      {recipeOpen && <RecipeDrawer recipe={recipeOpen} onClose={() => setRecipeOpen(null)} />}
+      {recipeOpen && (
+        <RecipeDrawer recipe={recipeOpen} onClose={() => setRecipeOpen(null)} />
+      )}
     </div>
   );
 }

frontend/app/minifam.css

@@ -7,31 +7,51 @@
 
 :root {
   /* ---- neutral scale (achromatic, faintly warm) ---- */
-  --ink:        #1a1a18;   /* near-black text */
-  --ink-soft:   #4a4a46;   /* secondary heading */
-  --ash:        #84847d;   /* secondary body / captions */
-  --ash-light:  #a6a69f;   /* tertiary / placeholder */
-  --pebble:     #dcdcd6;   /* borders / neutral buttons */
-  --fog:        #ececE7;   /* hairlines / fills */
-  --canvas:     #f4f3ef;   /* app background */
-  --snow:       #ffffff;   /* card base */
+  --ink: #1a1a18; /* near-black text */
+  --ink-soft: #4a4a46; /* secondary heading */
+  --ash: #84847d; /* secondary body / captions */
+  --ash-light: #a6a69f; /* tertiary / placeholder */
+  --pebble: #dcdcd6; /* borders / neutral buttons */
+  --fog: #ecece7; /* hairlines / fills */
+  --canvas: #f4f3ef; /* app background */
+  --snow: #ffffff; /* card base */
 
   /* ---- the spectrum (the brand's only color) ---- */
-  --spectrum: linear-gradient(100deg,
-      #c679c4 0%, #fa3d1d 24%, #ffb005 48%, #c9c9fe 74%, #0358f7 100%);
-  --spectrum-soft: linear-gradient(100deg,
-      #e6c3e5 0%, #fbb6aa 24%, #ffe2a3 48%, #e7e7ff 74%, #aac4fc 100%);
-  --rose:   #c679c4;
-  --ember:  #fa3d1d;
-  --marigold:#ffb005;
-  --lavender:#8f8ff0;
+  --spectrum: linear-gradient(
+    100deg,
+    #c679c4 0%,
+    #fa3d1d 24%,
+    #ffb005 48%,
+    #c9c9fe 74%,
+    #0358f7 100%
+  );
+  --spectrum-soft: linear-gradient(
+    100deg,
+    #e6c3e5 0%,
+    #fbb6aa 24%,
+    #ffe2a3 48%,
+    #e7e7ff 74%,
+    #aac4fc 100%
+  );
+  --spectrum-accent: linear-gradient(
+    100deg,
+    #b898b6 0%,
+    #c89888 24%,
+    #c8b888 48%,
+    #b0b0c8 74%,
+    #7890b8 100%
+  );
+  --rose: #c679c4;
+  --ember: #fa3d1d;
+  --marigold: #ffb005;
+  --lavender: #8f8ff0;
   --signal: #0358f7;
 
   /* ---- member identity hues (used only as tints + dots) ---- */
-  --m-elena:  #c25aa6;
+  --m-elena: #c25aa6;
   --m-marcus: #2f6df0;
-  --m-maya:   #d98a12;
-  --m-leo:    #1aa06b;
+  --m-maya: #d98a12;
+  --m-leo: #1aa06b;
 
   /* ---- type ---- */
   --font-sans: "Hanken Grotesk", system-ui, sans-serif;
@@ -43,16 +63,25 @@
   --r-md: 14px;
   --r-sm: 10px;
   --r-pill: 999px;
-  --spectrum-amount: 1;   /* tweakable */
+  --spectrum-amount: 1; /* tweakable */
 
   /* ---- shadows: soft, low, like paper lift ---- */
-  --shadow-sm: 0 1px 2px rgba(26,26,24,.04), 0 1px 1px rgba(26,26,24,.03);
-  --shadow-md: 0 4px 16px -6px rgba(26,26,24,.10), 0 1px 3px rgba(26,26,24,.05);
-  --shadow-lg: 0 18px 50px -16px rgba(26,26,24,.18), 0 4px 12px -6px rgba(26,26,24,.08);
+  --shadow-sm:
+    0 1px 2px rgba(26, 26, 24, 0.04), 0 1px 1px rgba(26, 26, 24, 0.03);
+  --shadow-md:
+    0 4px 16px -6px rgba(26, 26, 24, 0.1), 0 1px 3px rgba(26, 26, 24, 0.05);
+  --shadow-lg:
+    0 18px 50px -16px rgba(26, 26, 24, 0.18),
+    0 4px 12px -6px rgba(26, 26, 24, 0.08);
 }
 
-* { box-sizing: border-box; }
-html, body { height: 100%; }
+* {
+  box-sizing: border-box;
+}
+html,
+body {
+  height: 100%;
+}
 body {
   margin: 0;
   font-family: var(--font-sans);
@@ -61,14 +90,33 @@ body {
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
 }
-#root { height: 100%; }
-button { font-family: inherit; cursor: pointer; }
-::selection { background: rgba(143,143,240,.28); }
+#root {
+  height: 100%;
+}
+button {
+  font-family: inherit;
+  cursor: pointer;
+}
+::selection {
+  background: rgba(143, 143, 240, 0.28);
+}
 
 /* scrollbars: thin, quiet */
-.scroll::-webkit-scrollbar { width: 10px; height: 10px; }
-.scroll::-webkit-scrollbar-thumb { background: rgba(132,132,125,.28); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
-.scroll::-webkit-scrollbar-thumb:hover { background: rgba(132,132,125,.45); background-clip: padding-box; border: 3px solid transparent; }
+.scroll::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+.scroll::-webkit-scrollbar-thumb {
+  background: rgba(132, 132, 125, 0.28);
+  border-radius: 999px;
+  border: 3px solid transparent;
+  background-clip: padding-box;
+}
+.scroll::-webkit-scrollbar-thumb:hover {
+  background: rgba(132, 132, 125, 0.45);
+  background-clip: padding-box;
+  border: 3px solid transparent;
+}
 
 /* ============================================================
    App shell
@@ -86,10 +134,11 @@ button { font-family: inherit; cursor: pointer; }
   content: "";
   position: absolute;
   inset: -20% -10% auto auto;
-  width: 70vw; height: 60vh;
+  width: 70vw;
+  height: 60vh;
   background: var(--spectrum);
   filter: blur(120px);
-  opacity: calc(.10 * var(--spectrum-amount));
+  opacity: calc(0.1 * var(--spectrum-amount));
   pointer-events: none;
   z-index: 0;
 }
@@ -106,461 +155,1641 @@ button { font-family: inherit; cursor: pointer; }
   flex-direction: column;
   gap: 4px;
   border-right: 1px solid var(--fog);
-  background: rgba(255,255,255,.45);
+  background: rgba(255, 255, 255, 0.45);
   backdrop-filter: blur(18px);
 }
-.brand { display: flex; align-items: center; gap: 11px; padding: 6px 8px 20px; }
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+  padding: 6px 8px 20px;
+}
 .brand .mark {
-  width: 30px; height: 30px; border-radius: 9px;
-  background: var(--spectrum);
-  box-shadow: 0 2px 8px -2px rgba(250,61,29,.35);
+  width: 42px;
+  height: 42px;
+  background: url("logo.png?v=3") center/contain no-repeat;
   flex: none;
 }
-.brand .word { font-size: 19px; font-weight: 500; letter-spacing: -.02em; }
-.brand .word b { font-weight: 700; }
+.brand .word {
+  font-size: 22px;
+  font-weight: 500;
+  letter-spacing: -0.02em;
+}
+.brand .word b {
+  font-weight: 700;
+}
 
-.nav-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ash-light); padding: 14px 12px 6px; font-weight: 600; }
+.nav-label {
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--ash-light);
+  padding: 14px 12px 6px;
+  font-weight: 600;
+}
 .nav-item {
-  display: flex; align-items: center; gap: 12px;
-  padding: 9px 12px; border-radius: 11px;
-  color: var(--ink-soft); font-size: 14.5px; font-weight: 500;
-  border: none; background: none; width: 100%; text-align: left;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 9px 12px;
+  border-radius: 11px;
+  color: var(--ink-soft);
+  font-size: 14.5px;
+  font-weight: 500;
+  border: none;
+  background: none;
+  width: 100%;
+  text-align: left;
   white-space: nowrap;
-  transition: background .15s, color .15s;
+  transition:
+    background 0.15s,
+    color 0.15s;
+}
+.nav-item > span {
+  white-space: nowrap;
+}
+.nav-item:hover {
+  background: rgba(26, 26, 24, 0.045);
+  color: var(--ink);
+}
+.nav-item.active {
+  background: var(--snow);
+  color: var(--ink);
+  box-shadow: var(--shadow-sm);
+}
+.nav-item .ico {
+  color: var(--ash);
+  flex: none;
+}
+.nav-item.active .ico {
+  color: var(--ink);
 }
-.nav-item > span { white-space: nowrap; }
-.nav-item:hover { background: rgba(26,26,24,.045); color: var(--ink); }
-.nav-item.active { background: var(--snow); color: var(--ink); box-shadow: var(--shadow-sm); }
-.nav-item .ico { color: var(--ash); flex: none; }
-.nav-item.active .ico { color: var(--ink); }
 .nav-item .badge {
-  margin-left: auto; font-size: 11px; font-weight: 600;
-  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
-  background: var(--ink); color: #fff; display: grid; place-items: center;
+  margin-left: auto;
+  font-size: 11px;
+  font-weight: 600;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 999px;
+  background: var(--ink);
+  color: #fff;
+  display: grid;
+  place-items: center;
+}
+.nav-spacer {
+  flex: 1;
 }
-.nav-spacer { flex: 1; }
 
 .account {
-  display: flex; align-items: center; gap: 10px;
-  padding: 10px; border-radius: 13px; border: 1px solid var(--fog);
-  background: rgba(255,255,255,.6);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px;
+  border-radius: 13px;
+  border: 1px solid var(--fog);
+  background: rgba(255, 255, 255, 0.6);
+}
+.account .gmail {
+  width: 26px;
+  height: 26px;
+  border-radius: 7px;
+  background: var(--fog);
+  display: grid;
+  place-items: center;
+  flex: none;
+}
+.account .meta {
+  min-width: 0;
+}
+.account .meta .t {
+  font-size: 12.5px;
+  font-weight: 600;
+  line-height: 1.2;
+}
+.account .meta .s {
+  font-size: 11px;
+  color: var(--ash);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.account .dot {
+  margin-left: auto;
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+  background: var(--m-leo);
+  flex: none;
+  box-shadow: 0 0 0 3px rgba(26, 160, 107, 0.16);
 }
-.account .gmail { width: 26px; height: 26px; border-radius: 7px; background: var(--fog); display: grid; place-items: center; flex: none; }
-.account .meta { min-width: 0; }
-.account .meta .t { font-size: 12.5px; font-weight: 600; line-height: 1.2; }
-.account .meta .s { font-size: 11px; color: var(--ash); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.account .dot { margin-left: auto; width: 7px; height: 7px; border-radius: 999px; background: var(--m-leo); flex: none; box-shadow: 0 0 0 3px rgba(26,160,107,.16); }
 
 /* ---- main ---- */
-.main { position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100vh; }
+.main {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  height: 100vh;
+}
 .topbar {
-  display: flex; align-items: center; gap: 16px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
   padding: 18px 30px 14px;
   flex: none;
 }
-.topbar h1 { font-size: 27px; font-weight: 300; letter-spacing: -.03em; margin: 0; }
-.topbar .sub { font-size: 13px; color: var(--ash); margin-top: 2px; }
-.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
+.topbar h1 {
+  font-size: 27px;
+  font-weight: 300;
+  letter-spacing: -0.03em;
+  margin: 0;
+}
+.topbar .sub {
+  font-size: 13px;
+  color: var(--ash);
+  margin-top: 2px;
+}
+.topbar-right {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
 
-.member-switch { display: flex; align-items: center; gap: 6px; padding: 4px; background: rgba(255,255,255,.6); border: 1px solid var(--fog); border-radius: var(--r-pill); }
-.member-switch .who { font-size: 11px; color: var(--ash); padding: 0 8px 0 6px; font-weight: 500; white-space: nowrap; }
+.member-switch {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px;
+  background: rgba(255, 255, 255, 0.6);
+  border: 1px solid var(--fog);
+  border-radius: var(--r-pill);
+}
+.member-switch .who {
+  font-size: 11px;
+  color: var(--ash);
+  padding: 0 8px 0 6px;
+  font-weight: 500;
+  white-space: nowrap;
+}
 .m-chip {
-  display: flex; align-items: center; gap: 7px;
-  padding: 4px 11px 4px 4px; border-radius: var(--r-pill);
-  border: 1px solid transparent; background: none; transition: background .15s;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 4px 11px 4px 4px;
+  border-radius: var(--r-pill);
+  border: 1px solid transparent;
+  background: none;
+  transition: background 0.15s;
+}
+.m-chip:hover {
+  background: rgba(26, 26, 24, 0.04);
+}
+.m-chip.on {
+  background: var(--snow);
+  box-shadow: var(--shadow-sm);
+}
+.m-chip .name {
+  font-size: 13px;
+  font-weight: 500;
+  display: none;
+}
+.m-chip.on .name {
+  display: inline;
 }
-.m-chip:hover { background: rgba(26,26,24,.04); }
-.m-chip.on { background: var(--snow); box-shadow: var(--shadow-sm); }
-.m-chip .name { font-size: 13px; font-weight: 500; display: none; }
-.m-chip.on .name { display: inline; }
 
-.view { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 30px 36px; }
-.view-wide { max-width: 1180px; }
+.view {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 6px 30px 36px;
+}
+.view-wide {
+  max-width: 1180px;
+}
 
 /* ============================================================
    Avatars
    ============================================================ */
 .av {
   --c: var(--ash);
-  border-radius: 999px; flex: none;
-  display: grid; place-items: center;
-  font-weight: 600; letter-spacing: -.01em;
+  border-radius: 999px;
+  flex: none;
+  display: grid;
+  place-items: center;
+  font-weight: 600;
+  letter-spacing: -0.01em;
   background: color-mix(in srgb, var(--c) 16%, white);
   color: color-mix(in srgb, var(--c) 62%, #20201c);
   border: 1px solid color-mix(in srgb, var(--c) 24%, white);
 }
-.av-xs { width: 22px; height: 22px; font-size: 10px; }
-.av-sm { width: 30px; height: 30px; font-size: 12px; }
-.av-md { width: 40px; height: 40px; font-size: 15px; }
-.av-lg { width: 54px; height: 54px; font-size: 19px; }
-.av-ring { box-shadow: 0 0 0 2px var(--snow), 0 0 0 3.5px color-mix(in srgb, var(--c) 55%, white); }
+.av-xs {
+  width: 22px;
+  height: 22px;
+  font-size: 10px;
+}
+.av-sm {
+  width: 30px;
+  height: 30px;
+  font-size: 12px;
+}
+.av-md {
+  width: 40px;
+  height: 40px;
+  font-size: 15px;
+}
+.av-lg {
+  width: 54px;
+  height: 54px;
+  font-size: 19px;
+}
+.av-ring {
+  box-shadow:
+    0 0 0 2px var(--snow),
+    0 0 0 3.5px color-mix(in srgb, var(--c) 55%, white);
+}
 
 /* the assistant's mark — the spectrum, alive */
-.orb { border-radius: 999px; background: var(--spectrum); flex: none; position: relative; }
-.orb::after { content:""; position:absolute; inset: 22%; border-radius: 999px; background: rgba(255,255,255,.55); filter: blur(2px); }
-.orb-xs { width: 22px; height: 22px; }
-.orb-sm { width: 30px; height: 30px; }
-.orb-md { width: 40px; height: 40px; }
+.orb {
+  border-radius: 999px;
+  background: var(--spectrum);
+  flex: none;
+  position: relative;
+}
+.orb::after {
+  content: "";
+  position: absolute;
+  inset: 22%;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.55);
+  filter: blur(2px);
+}
+.orb-xs {
+  width: 22px;
+  height: 22px;
+}
+.orb-sm {
+  width: 30px;
+  height: 30px;
+}
+.orb-md {
+  width: 40px;
+  height: 40px;
+}
 
 /* ============================================================
    Cards & primitives
    ============================================================ */
 .card {
-  background: rgba(255,255,255,.78);
+  background: rgba(255, 255, 255, 0.78);
   backdrop-filter: blur(14px);
-  border: 1px solid rgba(255,255,255,.9);
+  border: 1px solid rgba(255, 255, 255, 0.9);
   box-shadow: var(--shadow-md);
   border-radius: var(--r-xl);
 }
-.card-flat { background: var(--snow); border: 1px solid var(--fog); box-shadow: var(--shadow-sm); border-radius: var(--r-lg); }
-.card-pad { padding: 22px 24px; }
+.card-flat {
+  background: var(--snow);
+  border: 1px solid var(--fog);
+  box-shadow: var(--shadow-sm);
+  border-radius: var(--r-lg);
+}
+.card-pad {
+  padding: 22px 24px;
+}
 
-.eyebrow { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ash); font-weight: 600; }
-.muted { color: var(--ash); }
-.mono { font-family: var(--font-mono); }
+.eyebrow {
+  font-size: 11.5px;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--ash);
+  font-weight: 600;
+}
+.muted {
+  color: var(--ash);
+}
+.mono {
+  font-family: var(--font-mono);
+}
 
 .btn {
-  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
-  font-size: 13.5px; font-weight: 500; border: 1px solid var(--pebble);
-  background: var(--snow); color: var(--ink);
-  padding: 9px 16px; border-radius: var(--r-pill);
-  transition: transform .08s, background .15s, box-shadow .15s, border-color .15s;
-}
-.btn:hover { background: #fbfbf9; box-shadow: var(--shadow-sm); }
-.btn:active { transform: translateY(1px); }
-.btn-ink { background: var(--ink); color: #fff; border-color: var(--ink); }
-.btn-ink:hover { background: #2a2a26; }
-.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-soft); }
-.btn-ghost:hover { background: rgba(26,26,24,.05); box-shadow: none; }
-.btn-sm { padding: 6px 12px; font-size: 12.5px; }
-.btn-icon { padding: 9px; border-radius: 999px; }
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  justify-content: center;
+  font-size: 13.5px;
+  font-weight: 500;
+  border: 1px solid var(--pebble);
+  background: var(--snow);
+  color: var(--ink);
+  padding: 9px 16px;
+  border-radius: var(--r-pill);
+  transition:
+    transform 0.08s,
+    background 0.15s,
+    box-shadow 0.15s,
+    border-color 0.15s;
+}
+.btn:hover {
+  background: #fbfbf9;
+  box-shadow: var(--shadow-sm);
+}
+.btn:active {
+  transform: translateY(1px);
+}
+.btn-ink {
+  background: var(--ink);
+  color: #fff;
+  border-color: var(--ink);
+}
+.btn-ink:hover {
+  background: #2a2a26;
+}
+.btn-ghost {
+  background: transparent;
+  border-color: transparent;
+  color: var(--ink-soft);
+}
+.btn-ghost:hover {
+  background: rgba(26, 26, 24, 0.05);
+  box-shadow: none;
+}
+.btn-sm {
+  padding: 6px 12px;
+  font-size: 12.5px;
+}
+.btn-icon {
+  padding: 9px;
+  border-radius: 999px;
+}
 
 .chip {
-  display: inline-flex; align-items: center; gap: 6px;
-  font-size: 12px; font-weight: 500; color: var(--ink-soft);
-  background: rgba(255,255,255,.7); border: 1px solid var(--fog);
-  padding: 4px 10px; border-radius: var(--r-pill);
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--ink-soft);
+  background: rgba(255, 255, 255, 0.7);
+  border: 1px solid var(--fog);
+  padding: 4px 10px;
+  border-radius: var(--r-pill);
+}
+.chip .d {
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+  background: var(--c, var(--ash));
 }
-.chip .d { width: 7px; height: 7px; border-radius: 999px; background: var(--c, var(--ash)); }
 
-.tabs { display: inline-flex; gap: 2px; padding: 3px; background: rgba(26,26,24,.04); border-radius: var(--r-pill); }
-.tab { border: none; background: none; padding: 7px 15px; border-radius: var(--r-pill); font-size: 13px; font-weight: 500; color: var(--ash); }
-.tab.on { background: var(--snow); color: var(--ink); box-shadow: var(--shadow-sm); }
+.tabs {
+  display: inline-flex;
+  gap: 2px;
+  padding: 3px;
+  background: rgba(26, 26, 24, 0.04);
+  border-radius: var(--r-pill);
+}
+.tab {
+  border: none;
+  background: none;
+  padding: 7px 15px;
+  border-radius: var(--r-pill);
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--ash);
+}
+.tab.on {
+  background: var(--snow);
+  color: var(--ink);
+  box-shadow: var(--shadow-sm);
+}
 
-.divider { height: 1px; background: var(--fog); border: none; margin: 0; }
+.divider {
+  height: 1px;
+  background: var(--fog);
+  border: none;
+  margin: 0;
+}
 
 /* ============================================================
    Assistant Bar (the composer) — the brand's animated moment
    ============================================================ */
-.askbar-wrap { position: relative; }
+.askbar-wrap {
+  position: relative;
+}
 .askbar {
-  display: flex; align-items: flex-end; gap: 10px;
+  display: flex;
+  align-items: flex-end;
+  gap: 10px;
   background: var(--snow);
   border: 1px solid var(--pebble);
   border-radius: 22px;
   padding: 10px 10px 10px 16px;
   box-shadow: var(--shadow-md);
-  transition: box-shadow .2s, border-color .2s;
+  transition:
+    box-shadow 0.2s,
+    border-color 0.2s;
+}
+.askbar:focus-within {
+  border-color: transparent;
+  box-shadow:
+    var(--shadow-lg),
+    0 0 0 2px #fff,
+    0 0 0 4px transparent;
+}
+.askbar:focus-within {
+  background-image: linear-gradient(#fff, #fff), var(--spectrum);
+  background-origin: border-box;
+  background-clip: padding-box, border-box;
+  border-color: transparent;
 }
-.askbar:focus-within { border-color: transparent; box-shadow: var(--shadow-lg), 0 0 0 2px #fff, 0 0 0 4px transparent; }
-.askbar:focus-within { background-image: linear-gradient(#fff,#fff), var(--spectrum); background-origin: border-box; background-clip: padding-box, border-box; border-color: transparent; }
 .askbar textarea {
-  flex: 1; border: none; outline: none; resize: none; background: none;
-  font-family: inherit; font-size: 15px; color: var(--ink); line-height: 1.5;
-  max-height: 140px; padding: 6px 0;
+  flex: 1;
+  border: none;
+  outline: none;
+  resize: none;
+  background: none;
+  font-family: inherit;
+  font-size: 15px;
+  color: var(--ink);
+  line-height: 1.5;
+  max-height: 140px;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  padding: 6px 0;
+  transition: height 0.15s ease;
+}
+.askbar textarea::-webkit-scrollbar {
+  display: none;
+}
+.askbar textarea::placeholder {
+  color: var(--ash-light);
+}
+.askbar > .av {
+  margin-bottom: 4px;
+}
+.ask-tools {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding-bottom: 2px;
 }
-.askbar textarea::placeholder { color: var(--ash-light); }
-.ask-tools { display: flex; align-items: center; gap: 4px; padding-bottom: 2px; }
 .ask-send {
-  width: 38px; height: 38px; border-radius: 999px; border: none;
-  background: var(--spectrum); color: #fff; display: grid; place-items: center;
-  flex: none; transition: transform .12s, filter .15s; box-shadow: 0 3px 10px -3px rgba(250,61,29,.4);
+  width: 38px;
+  height: 38px;
+  border-radius: 999px;
+  border: none;
+  background: var(--spectrum);
+  color: #fff;
+  display: grid;
+  place-items: center;
+  flex: none;
+  transition:
+    transform 0.12s,
+    filter 0.15s;
+  box-shadow: 0 3px 10px -3px rgba(250, 61, 29, 0.4);
+}
+.ask-send:hover {
+  transform: scale(1.05);
+}
+.ask-send:disabled {
+  background: var(--pebble);
+  box-shadow: none;
+  color: var(--ash);
+  cursor: default;
+  transform: none;
+}
+.ask-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--ash);
+  border: 1px solid var(--fog);
+  background: #fff;
+  padding: 5px 10px;
+  border-radius: 999px;
+}
+.ask-pill .ico {
+  color: var(--ash-light);
 }
-.ask-send:hover { transform: scale(1.05); }
-.ask-send:disabled { background: var(--pebble); box-shadow: none; color: var(--ash); cursor: default; transform: none; }
-.ask-pill { display:inline-flex; align-items:center; gap:6px; font-size:12px; color: var(--ash); border:1px solid var(--fog); background:#fff; padding:5px 10px; border-radius:999px; }
-.ask-pill .ico { color: var(--ash-light); }
 
-.suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
+.suggestions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 12px;
+}
 .suggestion {
-  text-align: left; border: 1px solid var(--fog); background: rgba(255,255,255,.6);
-  border-radius: var(--r-pill); padding: 8px 14px; font-size: 13px; color: var(--ink-soft);
-  font-weight: 500; transition: background .15s, box-shadow .15s, transform .08s;
+  text-align: left;
+  border: 1px solid var(--fog);
+  background: rgba(255, 255, 255, 0.6);
+  border-radius: var(--r-pill);
+  padding: 8px 14px;
+  font-size: 13px;
+  color: var(--ink-soft);
+  font-weight: 500;
+  transition:
+    background 0.15s,
+    box-shadow 0.15s,
+    transform 0.08s;
+}
+.suggestion:hover {
+  background: #fff;
+  box-shadow: var(--shadow-sm);
+}
+.suggestion:active {
+  transform: translateY(1px);
 }
-.suggestion:hover { background: #fff; box-shadow: var(--shadow-sm); }
-.suggestion:active { transform: translateY(1px); }
 
 /* ============================================================
    Chat
    ============================================================ */
-.chat { display: flex; flex-direction: column; height: 100%; }
-.chat-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 4px 18px; }
-.chat-inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
-.chat-foot { max-width: 760px; margin: 10px auto 0; width: 100%; }
-
-.msg { display: flex; gap: 12px; align-items: flex-start; }
-.msg.me { flex-direction: row-reverse; }
-.msg .bubble { max-width: 78%; }
+.chat {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.chat-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 12px 4px 18px;
+}
+.chat-inner {
+  max-width: 760px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+.chat-foot {
+  max-width: 760px;
+  margin: 10px auto 0;
+  width: 100%;
+}
+
+.msg {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+}
+.msg.me {
+  flex-direction: row-reverse;
+}
+.msg .bubble {
+  max-width: 78%;
+}
 .bubble .body {
-  font-size: 14.5px; line-height: 1.6; color: var(--ink);
-  background: var(--snow); border: 1px solid var(--fog);
-  padding: 12px 16px; border-radius: 16px; box-shadow: var(--shadow-sm);
-}
-.msg.me .bubble .body { background: var(--ink); color: #fff; border-color: var(--ink); }
-.bubble .who { font-size: 11.5px; color: var(--ash); margin: 0 4px 5px; font-weight: 600; }
-.msg.me .bubble .who { text-align: right; }
-.bubble .body p { margin: 0 0 8px; }
-.bubble .body p:last-child { margin: 0; }
-.bubble .body .md-h { font-size: 14.5px; font-weight: 700; margin: 12px 0 6px; letter-spacing: -.01em; }
-.bubble .body .md-h:first-child { margin-top: 0; }
-.bubble .body .md-list { margin: 0 0 8px; padding-left: 20px; }
-.bubble .body .md-list:last-child { margin: 0; }
-.bubble .body .md-list li { margin: 2px 0; }
-.bubble .body code { font-family: var(--font-mono); font-size: 12.5px; background: rgba(26,26,24,.06); padding: 1px 5px; border-radius: 5px; }
-.msg.me .bubble .body code { background: rgba(255,255,255,.16); }
+  font-size: 14.5px;
+  line-height: 1.6;
+  color: var(--ink);
+  background: var(--snow);
+  border: 1px solid var(--fog);
+  padding: 12px 16px;
+  border-radius: 16px;
+  box-shadow: var(--shadow-sm);
+}
+.msg.me .bubble .body {
+  background: var(--ink);
+  color: #fff;
+  border-color: var(--ink);
+}
+.bubble .who {
+  font-size: 11.5px;
+  color: var(--ash);
+  margin: 0 4px 5px;
+  font-weight: 600;
+}
+.msg.me .bubble .who {
+  text-align: right;
+}
+.bubble .body p {
+  margin: 0 0 8px;
+}
+.bubble .body p:last-child {
+  margin: 0;
+}
+.bubble .body .md-h {
+  font-size: 14.5px;
+  font-weight: 700;
+  margin: 12px 0 6px;
+  letter-spacing: -0.01em;
+}
+.bubble .body .md-h:first-child {
+  margin-top: 0;
+}
+.bubble .body .md-list {
+  margin: 0 0 8px;
+  padding-left: 20px;
+}
+.bubble .body .md-list:last-child {
+  margin: 0;
+}
+.bubble .body .md-list li {
+  margin: 2px 0;
+}
+.bubble .body code {
+  font-family: var(--font-mono);
+  font-size: 12.5px;
+  background: rgba(26, 26, 24, 0.06);
+  padding: 1px 5px;
+  border-radius: 5px;
+}
+.msg.me .bubble .body code {
+  background: rgba(255, 255, 255, 0.16);
+}
 
 /* tool-call chip inside chat — shows the agent doing something */
 .toolcard {
-  margin-top: 9px; border: 1px solid var(--fog); border-radius: 14px;
-  background: rgba(255,255,255,.7); overflow: hidden;
-}
-.toolcard .head { display: flex; align-items: center; gap: 9px; padding: 9px 13px; font-size: 12.5px; font-weight: 600; }
-.toolcard .head .ico { color: var(--ash); }
-.toolcard .head .ok { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: var(--m-leo); font-size: 11.5px; font-weight: 600; }
-.toolcard .det { padding: 0 13px 11px; font-size: 13px; }
-.toolcard .det .row { display: flex; gap: 10px; padding: 4px 0; }
-.toolcard .det .row .k { color: var(--ash); min-width: 76px; font-size: 12px; }
-.toolcard .det .row .v { color: var(--ink); font-weight: 500; }
-
-.typing { display: inline-flex; gap: 4px; padding: 14px 16px; }
-.typing i { width: 7px; height: 7px; border-radius: 999px; background: var(--ash-light); animation: bounce 1.2s infinite ease-in-out; }
-.typing i:nth-child(2){ animation-delay: .15s } .typing i:nth-child(3){ animation-delay: .3s }
-@keyframes bounce { 0%,80%,100%{ transform: translateY(0); opacity:.5 } 40%{ transform: translateY(-5px); opacity:1 } }
+  margin-top: 9px;
+  border: 1px solid var(--fog);
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.7);
+  overflow: hidden;
+}
+.toolcard .head {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 9px 13px;
+  font-size: 12.5px;
+  font-weight: 600;
+}
+.toolcard .head .ico {
+  color: var(--ash);
+}
+.toolcard .head .ok {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  color: var(--m-leo);
+  font-size: 11.5px;
+  font-weight: 600;
+}
+.toolcard .det {
+  padding: 0 13px 11px;
+  font-size: 13px;
+}
+.toolcard .det .row {
+  display: flex;
+  gap: 10px;
+  padding: 4px 0;
+}
+.toolcard .det .row .k {
+  color: var(--ash);
+  min-width: 76px;
+  font-size: 12px;
+}
+.toolcard .det .row .v {
+  color: var(--ink);
+  font-weight: 500;
+}
+
+.typing {
+  display: inline-flex;
+  gap: 4px;
+  padding: 14px 16px;
+}
+.typing i {
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+  background: var(--ash-light);
+  animation: bounce 1.2s infinite ease-in-out;
+}
+.typing i:nth-child(2) {
+  animation-delay: 0.15s;
+}
+.typing i:nth-child(3) {
+  animation-delay: 0.3s;
+}
+@keyframes bounce {
+  0%,
+  80%,
+  100% {
+    transform: translateY(0);
+    opacity: 0.5;
+  }
+  40% {
+    transform: translateY(-5px);
+    opacity: 1;
+  }
+}
 
 /* @mention popover */
-.mention-pop { position: absolute; bottom: calc(100% + 8px); left: 14px; width: 280px; background: var(--snow); border: 1px solid var(--fog); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 30; }
-.mention-pop .gl { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ash-light); padding: 8px 10px 4px; font-weight: 600; }
-.mention-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 13.5px; }
-.mention-row:hover, .mention-row.hl { background: rgba(26,26,24,.05); }
-.token { display:inline; background: color-mix(in srgb, var(--lavender) 16%, white); color: #5a4fd0; border-radius: 5px; padding: 0 4px; font-weight: 600; }
+.mention-pop {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 14px;
+  width: 280px;
+  background: var(--snow);
+  border: 1px solid var(--fog);
+  border-radius: 16px;
+  box-shadow: var(--shadow-lg);
+  padding: 6px;
+  z-index: 30;
+}
+.mention-pop .gl {
+  font-size: 10.5px;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--ash-light);
+  padding: 8px 10px 4px;
+  font-weight: 600;
+}
+.mention-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border-radius: 10px;
+  font-size: 13.5px;
+}
+.mention-row:hover,
+.mention-row.hl {
+  background: rgba(26, 26, 24, 0.05);
+}
+.token {
+  display: inline;
+  background: color-mix(in srgb, var(--lavender) 16%, white);
+  color: #5a4fd0;
+  border-radius: 5px;
+  padding: 0 4px;
+  font-weight: 600;
+}
 
 /* ============================================================
    Home — Family Brief
    ============================================================ */
-.brief-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 20px; align-items: start; }
-.greet { font-size: 40px; font-weight: 300; letter-spacing: -.035em; line-height: 1.05; margin: 4px 0 2px; }
-.greet .accent { background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; }
-.greet-sub { color: var(--ash); font-size: 15px; margin-bottom: 22px; }
-
-.sect-h { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; }
-.sect-h h3 { font-size: 14px; font-weight: 600; margin: 0; letter-spacing: -.01em; white-space: nowrap; }
-.toolcard .det .row { align-items: baseline; }
-.sect-h .ico { color: var(--ash); }
-.sect-h .more { margin-left: auto; font-size: 12.5px; color: var(--ash); font-weight: 500; background:none;border:none; }
-.sect-h .more:hover { color: var(--ink); }
-
-.timeline { display: flex; flex-direction: column; }
-.tl-item { display: flex; gap: 14px; padding: 11px 4px; border-bottom: 1px solid var(--fog); }
-.tl-item:last-child { border-bottom: none; }
-.tl-time { font-size: 12.5px; color: var(--ash); width: 70px; flex: none; padding-top: 1px; font-variant-numeric: tabular-nums; }
-.tl-body { flex: 1; min-width: 0; }
-.tl-body .t { font-size: 14px; font-weight: 500; }
-.tl-body .s { font-size: 12.5px; color: var(--ash); margin-top: 1px; }
-.tl-bar { width: 3px; border-radius: 999px; background: var(--c, var(--ash)); flex: none; }
-
-.mini-list { display: flex; flex-direction: column; gap: 2px; }
-.mini-row { display: flex; align-items: center; gap: 11px; padding: 9px 6px; border-radius: 10px; }
-.mini-row:hover { background: rgba(26,26,24,.035); }
-.mini-row .t { font-size: 13.5px; font-weight: 500; }
-.mini-row .s { font-size: 12px; color: var(--ash); }
-.mini-row .r { margin-left: auto; font-size: 12px; color: var(--ash); }
-
-.suggest-card { display: flex; gap: 13px; align-items: flex-start; padding: 15px 16px; border-radius: 16px; border: 1px solid var(--fog); background: rgba(255,255,255,.55); margin-bottom: 10px; }
-.suggest-card .txt { flex: 1; }
-.suggest-card .txt .t { font-size: 13.5px; font-weight: 500; line-height: 1.45; }
-.suggest-card .acts { display: flex; gap: 7px; margin-top: 10px; }
-
-.stat-row { display: flex; gap: 12px; }
-.stat { flex: 1; padding: 15px 16px; border-radius: 16px; background: rgba(255,255,255,.6); border: 1px solid var(--fog); }
-.stat .n { font-size: 26px; font-weight: 300; letter-spacing: -.02em; }
-.stat .l { font-size: 12px; color: var(--ash); margin-top: 2px; }
+.brief-grid {
+  display: grid;
+  grid-template-columns: 1.55fr 1fr;
+  gap: 20px;
+  align-items: start;
+}
+.greet {
+  font-size: 40px;
+  font-weight: 300;
+  letter-spacing: -0.035em;
+  line-height: 1.05;
+  margin: 4px 0 2px;
+}
+.greet .accent {
+  background: var(--spectrum);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+.greet-sub {
+  color: var(--ash);
+  font-size: 15px;
+  margin-bottom: 22px;
+}
+
+.sect-h {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 4px 0 12px;
+}
+.sect-h h3 {
+  font-size: 14px;
+  font-weight: 600;
+  margin: 0;
+  letter-spacing: -0.01em;
+  white-space: nowrap;
+}
+.toolcard .det .row {
+  align-items: baseline;
+}
+.sect-h .ico {
+  color: var(--ash);
+}
+.sect-h .more {
+  margin-left: auto;
+  font-size: 12.5px;
+  color: var(--ash);
+  font-weight: 500;
+  background: none;
+  border: none;
+}
+.sect-h .more:hover {
+  color: var(--ink);
+}
+
+.timeline {
+  display: flex;
+  flex-direction: column;
+}
+.tl-item {
+  display: flex;
+  gap: 14px;
+  padding: 11px 4px;
+  border-bottom: 1px solid var(--fog);
+}
+.tl-item:last-child {
+  border-bottom: none;
+}
+.tl-time {
+  font-size: 12.5px;
+  color: var(--ash);
+  width: 70px;
+  flex: none;
+  padding-top: 1px;
+  font-variant-numeric: tabular-nums;
+}
+.tl-body {
+  flex: 1;
+  min-width: 0;
+}
+.tl-body .t {
+  font-size: 14px;
+  font-weight: 500;
+}
+.tl-body .s {
+  font-size: 12.5px;
+  color: var(--ash);
+  margin-top: 1px;
+}
+.tl-bar {
+  width: 3px;
+  border-radius: 999px;
+  background: var(--c, var(--ash));
+  flex: none;
+}
+
+.mini-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.mini-row {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+  padding: 9px 6px;
+  border-radius: 10px;
+}
+.mini-row:hover {
+  background: rgba(26, 26, 24, 0.035);
+}
+.mini-row .t {
+  font-size: 13.5px;
+  font-weight: 500;
+}
+.mini-row .s {
+  font-size: 12px;
+  color: var(--ash);
+}
+.mini-row .r {
+  margin-left: auto;
+  font-size: 12px;
+  color: var(--ash);
+}
+
+.suggest-card {
+  display: flex;
+  gap: 13px;
+  align-items: flex-start;
+  padding: 15px 16px;
+  border-radius: 16px;
+  border: 1px solid var(--fog);
+  background: rgba(255, 255, 255, 0.55);
+  margin-bottom: 10px;
+}
+.suggest-card .txt {
+  flex: 1;
+}
+.suggest-card .txt .t {
+  font-size: 13.5px;
+  font-weight: 500;
+  line-height: 1.45;
+}
+.suggest-card .acts {
+  display: flex;
+  gap: 7px;
+  margin-top: 10px;
+}
+
+.stat-row {
+  display: flex;
+  gap: 12px;
+}
+.stat {
+  flex: 1;
+  padding: 15px 16px;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.6);
+  border: 1px solid var(--fog);
+}
+.stat .n {
+  font-size: 26px;
+  font-weight: 300;
+  letter-spacing: -0.02em;
+}
+.stat .l {
+  font-size: 12px;
+  color: var(--ash);
+  margin-top: 2px;
+}
 
 /* ============================================================
    Calendar
    ============================================================ */
-.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--fog); border: 1px solid var(--fog); border-radius: var(--r-lg); overflow: hidden; }
-.cal-h { background: rgba(255,255,255,.7); padding: 10px 12px; font-size: 11.5px; font-weight: 600; color: var(--ash); text-transform: uppercase; letter-spacing: .05em; }
-.cal-h .dn { color: var(--ink); font-size: 17px; font-weight: 300; letter-spacing: -.02em; margin-top: 3px; }
-.cal-h.today .dn { color: var(--ember); }
-.cal-col { background: var(--snow); min-height: 360px; padding: 8px 8px 14px; display: flex; flex-direction: column; gap: 6px; }
+.cal {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 1px;
+  background: var(--fog);
+  border: 1px solid var(--fog);
+  border-radius: var(--r-lg);
+  overflow: hidden;
+}
+.cal-h {
+  background: rgba(255, 255, 255, 0.7);
+  padding: 10px 12px;
+  font-size: 11.5px;
+  font-weight: 600;
+  color: var(--ash);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.cal-h .dn {
+  color: var(--ink);
+  font-size: 17px;
+  font-weight: 300;
+  letter-spacing: -0.02em;
+  margin-top: 3px;
+}
+.cal-h.today .dn {
+  color: var(--ember);
+}
+.cal-col {
+  background: var(--snow);
+  min-height: 360px;
+  padding: 8px 8px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
 .ev {
-  border-radius: 10px; padding: 7px 9px; font-size: 12px; line-height: 1.3;
+  border-radius: 10px;
+  padding: 7px 9px;
+  font-size: 12px;
+  line-height: 1.3;
   background: color-mix(in srgb, var(--c) 13%, white);
   border: 1px solid color-mix(in srgb, var(--c) 24%, white);
   border-left: 3px solid var(--c);
-  cursor: pointer; transition: transform .08s, box-shadow .15s;
+  cursor: pointer;
+  transition:
+    transform 0.08s,
+    box-shadow 0.15s;
+}
+.ev:hover {
+  box-shadow: var(--shadow-sm);
+  transform: translateY(-1px);
+}
+.ev .et {
+  font-size: 10.5px;
+  color: color-mix(in srgb, var(--c) 55%, #333);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+.ev .en {
+  font-weight: 500;
+  color: #2a2a26;
+  margin-top: 1px;
 }
-.ev:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
-.ev .et { font-size: 10.5px; color: color-mix(in srgb, var(--c) 55%, #333); font-weight: 600; font-variant-numeric: tabular-nums; }
-.ev .en { font-weight: 500; color: #2a2a26; margin-top: 1px; }
 
 /* ============================================================
    Recipes
    ============================================================ */
-.recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
-.rcard { border-radius: var(--r-lg); overflow: hidden; background: var(--snow); border: 1px solid var(--fog); box-shadow: var(--shadow-sm); transition: transform .1s, box-shadow .18s; cursor: pointer; }
-.rcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
-.rcard .ph { height: 132px; position: relative; display: grid; place-items: center; overflow: hidden;
+.recipe-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+  gap: 18px;
+}
+.rcard {
+  border-radius: var(--r-lg);
+  overflow: hidden;
+  background: var(--snow);
+  border: 1px solid var(--fog);
+  box-shadow: var(--shadow-sm);
+  transition:
+    transform 0.1s,
+    box-shadow 0.18s;
+  cursor: pointer;
+}
+.rcard:hover {
+  transform: translateY(-3px);
+  box-shadow: var(--shadow-md);
+}
+.rcard .ph {
+  height: 132px;
+  position: relative;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
   background:
-    repeating-linear-gradient(135deg, rgba(0,0,0,.025) 0 9px, transparent 9px 18px),
+    repeating-linear-gradient(
+      135deg,
+      rgba(0, 0, 0, 0.025) 0 9px,
+      transparent 9px 18px
+    ),
     color-mix(in srgb, var(--c, var(--ash)) 18%, white);
 }
-.rcard .ph .gl { font-size: 11px; color: color-mix(in srgb, var(--c) 50%, #555); font-family: var(--font-mono); letter-spacing: .04em; }
-.rcard .ph .tags { position: absolute; top: 10px; left: 10px; display: flex; gap: 5px; }
-.tag-veg { font-size: 10px; font-weight: 700; color: #1aa06b; background: rgba(26,160,107,.14); border-radius: 999px; padding: 2px 8px; letter-spacing: .03em; }
-.rcard .info { padding: 13px 15px 16px; }
-.rcard .info .t { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
-.rcard .info .meta { display: flex; gap: 12px; margin-top: 7px; font-size: 12px; color: var(--ash); }
+.rcard .ph .gl {
+  font-size: 11px;
+  color: color-mix(in srgb, var(--c) 50%, #555);
+  font-family: var(--font-mono);
+  letter-spacing: 0.04em;
+}
+.rcard .ph .tags {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  display: flex;
+  gap: 5px;
+}
+.tag-veg {
+  font-size: 10px;
+  font-weight: 700;
+  color: #1aa06b;
+  background: rgba(26, 160, 107, 0.14);
+  border-radius: 999px;
+  padding: 2px 8px;
+  letter-spacing: 0.03em;
+}
+.rcard .info {
+  padding: 13px 15px 16px;
+}
+.rcard .info .t {
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+.rcard .info .meta {
+  display: flex;
+  gap: 12px;
+  margin-top: 7px;
+  font-size: 12px;
+  color: var(--ash);
+}
 
 /* recipe detail / drawer */
-.drawer-scrim { position: fixed; inset: 0; background: rgba(26,26,24,.28); backdrop-filter: blur(3px); z-index: 60; animation: fade .2s; }
-.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 92vw); background: var(--canvas); z-index: 61; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; animation: slidein .26s cubic-bezier(.2,.8,.2,1); }
-@keyframes slidein { from { transform: translateX(30px); opacity: 0 } to { transform: none; opacity: 1 } }
-@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
-.drawer-head { padding: 18px 22px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--fog); flex: none; }
-.drawer-body { flex: 1; overflow-y: auto; padding: 22px; }
-.ingredient { display: flex; align-items: center; gap: 11px; padding: 8px 0; border-bottom: 1px solid var(--fog); font-size: 14px; }
-.ingredient .ck { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--pebble); flex: none; }
-.step { display: flex; gap: 13px; padding: 11px 0; }
-.step .n { width: 24px; height: 24px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; display: grid; place-items: center; flex: none; }
-.step .x { font-size: 14px; line-height: 1.55; }
+.drawer-scrim {
+  position: fixed;
+  inset: 0;
+  background: rgba(26, 26, 24, 0.28);
+  backdrop-filter: blur(3px);
+  z-index: 60;
+  animation: fade 0.2s;
+}
+.drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: min(560px, 92vw);
+  background: var(--canvas);
+  z-index: 61;
+  box-shadow: var(--shadow-lg);
+  display: flex;
+  flex-direction: column;
+  animation: slidein 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+@keyframes slidein {
+  from {
+    transform: translateX(30px);
+    opacity: 0;
+  }
+  to {
+    transform: none;
+    opacity: 1;
+  }
+}
+@keyframes fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.drawer-head {
+  padding: 18px 22px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  border-bottom: 1px solid var(--fog);
+  flex: none;
+}
+.drawer-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 22px;
+}
+.ingredient {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--fog);
+  font-size: 14px;
+}
+.ingredient .ck {
+  width: 18px;
+  height: 18px;
+  border-radius: 6px;
+  border: 1.5px solid var(--pebble);
+  flex: none;
+}
+.step {
+  display: flex;
+  gap: 13px;
+  padding: 11px 0;
+}
+.step .n {
+  width: 24px;
+  height: 24px;
+  border-radius: 999px;
+  background: var(--ink);
+  color: #fff;
+  font-size: 12px;
+  font-weight: 600;
+  display: grid;
+  place-items: center;
+  flex: none;
+}
+.step .x {
+  font-size: 14px;
+  line-height: 1.55;
+}
 
 /* the markdown peek */
-.md-peek { background: #1d1d1a; color: #e8e8e2; border-radius: var(--r-md); padding: 16px 18px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; overflow-x: auto; }
-.md-peek .fm { color: #84847d; }
-.md-peek .key { color: #ffb005; }
-.md-peek .str { color: #c9c9fe; }
-.md-peek .h { color: #fff; font-weight: 700; }
+.md-peek {
+  background: #1d1d1a;
+  color: #e8e8e2;
+  border-radius: var(--r-md);
+  padding: 16px 18px;
+  font-family: var(--font-mono);
+  font-size: 12.5px;
+  line-height: 1.7;
+  overflow-x: auto;
+}
+.md-peek .fm {
+  color: #84847d;
+}
+.md-peek .key {
+  color: #ffb005;
+}
+.md-peek .str {
+  color: #c9c9fe;
+}
+.md-peek .h {
+  color: #fff;
+  font-weight: 700;
+}
 
 /* ============================================================
    Meals — planner + shopping list
    ============================================================ */
-.meal-layout { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
-.week { display: flex; flex-direction: column; gap: 10px; }
-.day-row { display: flex; align-items: center; gap: 16px; padding: 14px 18px; background: var(--snow); border: 1px solid var(--fog); border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
-.day-row .dow { width: 44px; flex: none; }
-.day-row .dow .d3 { font-size: 13px; font-weight: 600; }
-.day-row .dow .num { font-size: 12px; color: var(--ash); }
-.day-row .dish { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
-.day-row .dish .sw { width: 34px; height: 34px; border-radius: 9px; flex: none;
-  background: repeating-linear-gradient(135deg, rgba(0,0,0,.03) 0 6px, transparent 6px 12px), color-mix(in srgb, var(--c, var(--ash)) 20%, white); }
-.day-row .dish .t { font-size: 14px; font-weight: 500; }
-.day-row .dish .s { font-size: 12px; color: var(--ash); }
-.day-row .swap { opacity: 0; transition: opacity .15s; }
-.day-row:hover .swap { opacity: 1; }
-
-.shop { position: sticky; top: 6px; }
-.shop .grp { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ash-light); font-weight: 600; margin: 14px 0 4px; }
-.shop-item { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13.5px; border-bottom: 1px solid var(--fog); }
-.shop-item .ck { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--pebble); flex: none; }
-.shop-item.done { color: var(--ash-light); text-decoration: line-through; }
-.shop-item .q { margin-left: auto; font-size: 12px; color: var(--ash); }
+.meal-layout {
+  display: grid;
+  grid-template-columns: 1fr 320px;
+  gap: 20px;
+  align-items: start;
+}
+.week {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.day-row {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 14px 18px;
+  background: var(--snow);
+  border: 1px solid var(--fog);
+  border-radius: var(--r-md);
+  box-shadow: var(--shadow-sm);
+}
+.day-row .dow {
+  width: 44px;
+  flex: none;
+}
+.day-row .dow .d3 {
+  font-size: 13px;
+  font-weight: 600;
+}
+.day-row .dow .num {
+  font-size: 12px;
+  color: var(--ash);
+}
+.day-row .dish {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+.day-row .dish .sw {
+  width: 34px;
+  height: 34px;
+  border-radius: 9px;
+  flex: none;
+  background:
+    repeating-linear-gradient(
+      135deg,
+      rgba(0, 0, 0, 0.03) 0 6px,
+      transparent 6px 12px
+    ),
+    color-mix(in srgb, var(--c, var(--ash)) 20%, white);
+}
+.day-row .dish .t {
+  font-size: 14px;
+  font-weight: 500;
+}
+.day-row .dish .s {
+  font-size: 12px;
+  color: var(--ash);
+}
+.day-row .swap {
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+.day-row:hover .swap {
+  opacity: 1;
+}
+
+.shop {
+  position: sticky;
+  top: 6px;
+}
+.shop .grp {
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ash-light);
+  font-weight: 600;
+  margin: 14px 0 4px;
+}
+.shop-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 7px 0;
+  font-size: 13.5px;
+  border-bottom: 1px solid var(--fog);
+}
+.shop-item .ck {
+  width: 16px;
+  height: 16px;
+  border-radius: 5px;
+  border: 1.5px solid var(--pebble);
+  flex: none;
+}
+.shop-item.done {
+  color: var(--ash-light);
+  text-decoration: line-through;
+}
+.shop-item .q {
+  margin-left: auto;
+  font-size: 12px;
+  color: var(--ash);
+}
 
 /* ============================================================
    Notes
    ============================================================ */
-.notes-layout { display: grid; grid-template-columns: 200px 1fr; gap: 22px; align-items: start; }
-.note-members { display: flex; flex-direction: column; gap: 3px; }
-.note-mtab { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 11px; border: none; background: none; width: 100%; text-align: left; font-size: 13.5px; font-weight: 500; color: var(--ink-soft); }
-.note-mtab:hover { background: rgba(26,26,24,.04); }
-.note-mtab.on { background: var(--snow); box-shadow: var(--shadow-sm); color: var(--ink); }
-.note-mtab .ct { margin-left: auto; font-size: 11px; color: var(--ash); }
-.note-cols { columns: 2; column-gap: 16px; }
+.notes-layout {
+  display: grid;
+  grid-template-columns: 200px 1fr;
+  gap: 22px;
+  align-items: start;
+}
+.note-members {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+.note-mtab {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 9px 11px;
+  border-radius: 11px;
+  border: none;
+  background: none;
+  width: 100%;
+  text-align: left;
+  font-size: 13.5px;
+  font-weight: 500;
+  color: var(--ink-soft);
+}
+.note-mtab:hover {
+  background: rgba(26, 26, 24, 0.04);
+}
+.note-mtab.on {
+  background: var(--snow);
+  box-shadow: var(--shadow-sm);
+  color: var(--ink);
+}
+.note-mtab .ct {
+  margin-left: auto;
+  font-size: 11px;
+  color: var(--ash);
+}
+.note-cols {
+  columns: 2;
+  column-gap: 16px;
+}
 .note {
-  break-inside: avoid; margin-bottom: 16px; padding: 16px 17px;
-  border-radius: var(--r-md); border: 1px solid var(--fog);
-  background: var(--snow); box-shadow: var(--shadow-sm);
+  break-inside: avoid;
+  margin-bottom: 16px;
+  padding: 16px 17px;
+  border-radius: var(--r-md);
+  border: 1px solid var(--fog);
+  background: var(--snow);
+  box-shadow: var(--shadow-sm);
   border-top: 3px solid var(--c, var(--ash));
 }
-.note .t { font-size: 14px; font-weight: 600; margin-bottom: 7px; }
-.note .body { font-size: 13px; line-height: 1.6; color: var(--ink-soft); white-space: pre-wrap; }
-.note .check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; padding: 3px 0; }
-.note .check .b { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--pebble); flex: none; margin-top: 2px; }
-.note .check.done { color: var(--ash-light); }
-.note .check.done .b { background: var(--m-leo); border-color: var(--m-leo); }
-.note .foot { font-size: 11px; color: var(--ash-light); margin-top: 11px; font-family: var(--font-mono); }
+.note .t {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 7px;
+}
+.note .body {
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--ink-soft);
+  white-space: pre-wrap;
+}
+.note .check {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+  font-size: 13px;
+  padding: 3px 0;
+}
+.note .check .b {
+  width: 15px;
+  height: 15px;
+  border-radius: 4px;
+  border: 1.5px solid var(--pebble);
+  flex: none;
+  margin-top: 2px;
+}
+.note .check.done {
+  color: var(--ash-light);
+}
+.note .check.done .b {
+  background: var(--m-leo);
+  border-color: var(--m-leo);
+}
+.note .foot {
+  font-size: 11px;
+  color: var(--ash-light);
+  margin-top: 11px;
+  font-family: var(--font-mono);
+}
 
 /* ============================================================
    Settings — family roster
    ============================================================ */
 .set-input {
-  width: 100%; padding: 10px 12px; font-size: 14px; font-family: inherit;
-  border: 1px solid var(--pebble); border-radius: var(--r-md);
-  background: var(--snow); color: var(--ink); outline: none;
-}
-.set-input:focus { border-color: var(--ash); }
-.set-veg { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-soft); margin-top: 12px; cursor: pointer; user-select: none; }
-.set-veg .b { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--pebble); flex: none; }
-.member-list { display: flex; flex-direction: column; gap: 10px; }
+  width: 100%;
+  padding: 10px 12px;
+  font-size: 14px;
+  font-family: inherit;
+  border: 1px solid var(--pebble);
+  border-radius: var(--r-md);
+  background: var(--snow);
+  color: var(--ink);
+  outline: none;
+}
+.set-input:focus {
+  border-color: var(--ash);
+}
+.set-veg {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  font-size: 13.5px;
+  color: var(--ink-soft);
+  margin-top: 12px;
+  cursor: pointer;
+  user-select: none;
+}
+.set-veg .b {
+  width: 16px;
+  height: 16px;
+  border-radius: 5px;
+  border: 1.5px solid var(--pebble);
+  flex: none;
+}
+.member-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
 .member-row {
-  display: flex; align-items: center; gap: 13px; padding: 13px 15px;
-  border-radius: var(--r-md); border: 1px solid var(--fog);
-  background: var(--snow); box-shadow: var(--shadow-sm);
+  display: flex;
+  align-items: center;
+  gap: 13px;
+  padding: 13px 15px;
+  border-radius: var(--r-md);
+  border: 1px solid var(--fog);
+  background: var(--snow);
+  box-shadow: var(--shadow-sm);
 }
 
 /* ============================================================
    Inbox — email → event
    ============================================================ */
-.inbox-layout { display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 760px; }
+.inbox-layout {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 14px;
+  max-width: 760px;
+}
 .mail {
-  display: flex; gap: 14px; padding: 17px 19px; border-radius: var(--r-lg);
-  background: var(--snow); border: 1px solid var(--fog); box-shadow: var(--shadow-sm);
+  display: flex;
+  gap: 14px;
+  padding: 17px 19px;
+  border-radius: var(--r-lg);
+  background: var(--snow);
+  border: 1px solid var(--fog);
+  box-shadow: var(--shadow-sm);
+}
+.mail .from-av {
+  flex: none;
+}
+.mail .m-main {
+  flex: 1;
+  min-width: 0;
+}
+.mail .m-top {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+}
+.mail .m-from {
+  font-size: 14px;
+  font-weight: 600;
+}
+.mail .m-date {
+  margin-left: auto;
+  font-size: 12px;
+  color: var(--ash);
+  flex: none;
+}
+.mail .m-subj {
+  font-size: 13.5px;
+  font-weight: 500;
+  margin-top: 3px;
+}
+.mail .m-prev {
+  font-size: 13px;
+  color: var(--ash);
+  margin-top: 3px;
+  line-height: 1.5;
 }
-.mail .from-av { flex: none; }
-.mail .m-main { flex: 1; min-width: 0; }
-.mail .m-top { display: flex; align-items: baseline; gap: 10px; }
-.mail .m-from { font-size: 14px; font-weight: 600; }
-.mail .m-date { margin-left: auto; font-size: 12px; color: var(--ash); flex: none; }
-.mail .m-subj { font-size: 13.5px; font-weight: 500; margin-top: 3px; }
-.mail .m-prev { font-size: 13px; color: var(--ash); margin-top: 3px; line-height: 1.5; }
 
 .proposal {
-  margin-top: 13px; border-radius: 14px; padding: 14px 16px;
-  background: rgba(255,255,255,.7);
+  margin-top: 13px;
+  border-radius: 14px;
+  padding: 14px 16px;
+  background: rgba(255, 255, 255, 0.7);
   border: 1px solid transparent;
-  background-image: linear-gradient(rgba(255,255,255,.85),rgba(255,255,255,.85)), var(--spectrum-soft);
-  background-origin: border-box; background-clip: padding-box, border-box;
-}
-.proposal .ph { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-bottom: 10px; }
-.proposal .ph .orb { width: 18px; height: 18px; }
-.proposal .pe { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--snow); border: 1px solid var(--fog); border-radius: 11px; }
-.proposal .pe .when { text-align: center; flex: none; padding-right: 12px; border-right: 1px solid var(--fog); }
-.proposal .pe .when .mo { font-size: 10px; text-transform: uppercase; color: var(--ember); font-weight: 700; letter-spacing: .05em; }
-.proposal .pe .when .dd { font-size: 20px; font-weight: 300; line-height: 1; }
-.proposal .pe .det .t { font-size: 13.5px; font-weight: 600; }
-.proposal .pe .det .s { font-size: 12px; color: var(--ash); margin-top: 2px; }
-.proposal .acts { display: flex; gap: 8px; margin-top: 12px; }
-.mail.handled { opacity: .62; }
-.confirmed-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--m-leo); }
+  background-image:
+    linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
+    var(--spectrum-soft);
+  background-origin: border-box;
+  background-clip: padding-box, border-box;
+}
+.proposal .ph {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--ink-soft);
+  margin-bottom: 10px;
+}
+.proposal .ph .orb {
+  width: 18px;
+  height: 18px;
+}
+.proposal .pe {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  background: var(--snow);
+  border: 1px solid var(--fog);
+  border-radius: 11px;
+}
+.proposal .pe .when {
+  text-align: center;
+  flex: none;
+  padding-right: 12px;
+  border-right: 1px solid var(--fog);
+}
+.proposal .pe .when .mo {
+  font-size: 10px;
+  text-transform: uppercase;
+  color: var(--ember);
+  font-weight: 700;
+  letter-spacing: 0.05em;
+}
+.proposal .pe .when .dd {
+  font-size: 20px;
+  font-weight: 300;
+  line-height: 1;
+}
+.proposal .pe .det .t {
+  font-size: 13.5px;
+  font-weight: 600;
+}
+.proposal .pe .det .s {
+  font-size: 12px;
+  color: var(--ash);
+  margin-top: 2px;
+}
+.proposal .acts {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+}
+.mail.handled {
+  opacity: 0.62;
+}
+.confirmed-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--m-leo);
+}
 
 /* ============================================================
    misc
    ============================================================ */
-.empty { text-align: center; padding: 60px 20px; color: var(--ash); }
-.fade-in { animation: fade .3s ease both; }
-.rise { animation: rise .35s cubic-bezier(.2,.8,.2,1) both; }
-@keyframes rise { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
+.empty {
+  text-align: center;
+  padding: 60px 20px;
+  color: var(--ash);
+}
+.fade-in {
+  animation: fade 0.3s ease both;
+}
+.rise {
+  animation: rise 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+@keyframes rise {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
 
 @media (prefers-reduced-motion: reduce) {
-  * { animation-duration: .001ms !important; transition-duration: .05ms !important; }
+  * {
+    animation-duration: 0.001ms !important;
+    transition-duration: 0.05ms !important;
+  }
 }
 
 /* ---- tweak-driven states ---- */
-html.surf-solid .card { background: var(--snow); backdrop-filter: none; border-color: var(--fog); }
-html.surf-solid .sidebar { background: rgba(255,255,255,.92); backdrop-filter: none; }
+html.surf-solid .card {
+  background: var(--snow);
+  backdrop-filter: none;
+  border-color: var(--fog);
+}
+html.surf-solid .sidebar {
+  background: rgba(255, 255, 255, 0.92);
+  backdrop-filter: none;
+}
 html.surf-solid .chip,
 html.surf-solid .suggestion,
 html.surf-solid .member-switch,
-html.surf-solid .proposal { background-color: var(--snow); }
-html.names-on .m-chip .name { display: inline; }
-html.names-on .m-chip { padding-right: 11px; }
+html.surf-solid .proposal {
+  background-color: var(--snow);
+}
+html.names-on .m-chip .name {
+  display: inline;
+}
+html.names-on .m-chip {
+  padding-right: 11px;
+}

frontend/app/screens1.jsx

@@ -20,8 +20,17 @@ function AskBar({
   const grow = () => {
     const t = taRef.current;
     if (!t) return;
-    t.style.height = "auto";
-    t.style.height = Math.min(t.scrollHeight, 140) + "px";
+    const prev = t.offsetHeight;
+    t.style.transition = "none";
+    t.style.height = "0px";
+    const next = Math.min(t.scrollHeight, 140);
+    t.style.height = `${prev}px`;
+    void t.offsetHeight;
+    requestAnimationFrame(() => {
+      if (!taRef.current) return;
+      taRef.current.style.transition = "";
+      taRef.current.style.height = `${next}px`;
+    });
   };
   useEffect(grow, [value]);
   useEffect(() => {

frontend/index.html

@@ -4,6 +4,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Mini Fam — the family assistant that stays home</title>
+  <link rel="icon" type="image/png" href="app/logo.png?v=3" />
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />