/* The estate's return-to-camath.ai button. ONE canonical copy, copied into each component's /opt//frontend/ at deploy time — same distribution as _shared/estate_auth.py. Editing this means redeploying every component that uses it. Self-contained — no image asset. This markup: camath.ai Replaced five different `.home-link` treatments (2026-07-31). Before this the estate had four sizes (0.85 / 0.9 / 1.05 / 1.2rem), three placements and two arrow implementations — and the SMALLEST was chat's, at 0.85rem. ⚠ THE ARROW IS THE POINT — do not "restore the brand mark". Same day, this file briefly used the robot mark instead, because Cam said the old links were too small and inconsistent and I read that as the arrow treatment being wrong. It wasn't: he was naming SIZE and CONSISTENCY, both of which this file fixes on its own. His reason for the arrow, which the mark can't do: an arrow reads as BOTH "back" and "go" at once. A logo only reads as "home" to someone who already knows the convention, and a house icon he rejected outright. If a future change wants the brand in here, the wordmark is already in the label. ⚠ Inline SVG, not `←` and not a font glyph. `←` is East-Asian-Ambiguous width and renders near-emoji on some iOS builds; a glyph also can't be given its own stroke weight. Inline costs no request, and `stroke="currentColor"` inherits the --muted → --fg hover below for free, which is what keeps this theme-agnostic with zero per-component overrides. Theme-agnostic on purpose: it keys on --muted / --fg, which all four components define, so it works on watch/find (dark) and chat/image (light) with no per-component overrides — and follows chat's runtime dark-mode toggle for free. The hover background is a neutral grey wash rather than a themed colour for the same reason. */ .home-btn { display: inline-flex; align-items: center; /* ⚠ This is NOT the visible gap — do not "restore" it to a normal-looking 0.5rem. The arrow's path spans x=5..19 of a 24-wide viewBox, so 5 units of the SVG box are empty on its right: 5/24 × 26px ≈ 5.4px of dead space that lands between the glyph and the label before `gap` applies at all. Optical gap = 5.4px + this. At the original 0.5rem that totalled ~13.4px, which is what read as too wide (Cam, 2026-07-31); 0.2rem puts it at ~8.6px. Floor is ~5.4px at gap:0 — to go tighter than that the viewBox has to be cropped, which is a different change with its own size consequences. */ gap: 0.2rem; /* 44px is the tap-target floor. The old floating links were ~35px, which is what made them fiddly on a phone as much as their font size did. */ min-height: 50px; padding: 7px 16px; border-radius: 999px; /* ⚠ SIZE IS CAM'S CALL, NOT MINE — 2026-07-31. Every "that reads fine" I have given about this link was judged from one Chrome whose system font enlargement makes 1.05rem render ~7.5mm tall physically, against ~2.5-3mm on his phone. Same CSS, ~3x the physical size, and I only ever see the large one. That is a one-directional bias toward undersizing, and it is why this link has been too small for years. I judge ratios and structure; he judges size. */ font-size: 1.25rem; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; color: var(--muted, #6b7280); /* No focus ring and no mobile tap-flash, matching the portal tiles. */ outline: none; -webkit-tap-highlight-color: transparent; transition: background-color 0.16s ease, color 0.16s ease; } /* Sized to the label, not independently — keep the icon ≈1.3× the font-size if the label changes again. Held at 26px across the mark→arrow swap on purpose, so the pill geometry Cam already approved is unchanged and the glyph is the only variable he's judging. The tap target comes from the button's min-height, so this is purely visual. stroke-width lives in the markup rather than here because it's the one value that has to be re-judged if the size changes: a stroke reads lighter than a filled mark at the same box, and at --muted grey too thin a line is exactly the "too small" complaint in another form. */ .home-btn svg { width: 26px; height: 26px; display: block; /* kills the inline baseline gap that would offset the pill */ flex: none; } /* ⚠ Hover is gated on (hover: hover) — the same fix the portal tiles needed. A touch browser applies :hover on tap and has no pointer-leave to clear it, so an ungated rule leaves the button visibly stuck after you navigate and come back. Nothing to stick if the rule never applies. */ @media (hover: hover) { .home-btn:hover { background: rgba(128, 128, 128, 0.16); color: var(--fg, #1f2328); } } /* Mounting variant. watch and find are centred-card pages with no header chrome, so their button floats above the content. CENTRED, not cornered (Cam, 2026-07-31): on a centred-card layout a left-cornered mark fights the page's own axis, and centring it reads as the page's own header. Absolute (not fixed) so it scrolls away with the page instead of hovering over content. */ .home-btn.is-floating { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 10; } /* On a narrow phone the label is the first thing that can go if a header gets tight; the mark alone still reads as "home". Only chat needs this today (its header also carries a theme toggle and an engine dot), so it is opt-in per component rather than a blanket rule. */ @media (max-width: 380px) { .home-btn.hide-label-narrow span { display: none; } .home-btn.hide-label-narrow { padding-right: 5px; } }