/* ⚠ ITS OWN STYLE BLOCK, IN HEAD, ON PURPOSE. 🔴 THIS CSS WAS ONCE APPENDED TO THE LAST STYLE-CLOSE TAG IN THE FILE. That tag is inside a JavaScript string -- openScript() builds a popup document with document.write and that markup contains one. The CSS landed mid-string-literal and killed the whole script block after it, which is why Scripts, Notes and every menu route silently stopped working. 🔴 AND THE COMMENT EXPLAINING THAT BUG THEN CAUSED A SECOND ONE. It quoted the closing tag literally. An HTML parser does not read CSS comments -- it saw the tag, ended the stylesheet there, and rendered the rest of the page as plain text. ⚠ NEVER WRITE A STYLE OR SCRIPT CLOSING TAG INSIDE A STYLE OR SCRIPT ELEMENT, not even in a comment, not even escaped-looking. Describe it in words instead, as here. */ /* ============================================================ GET CONTACT BUTTON — matches My Leads. ⚠ Sits inside a .prow value cell, so it must not inherit that row's color or line-height. Explicit on both. ⚠ 34px tall, not 44. It is inside an already-expanded panel the agent chose to open, not a primary target on a scrolling list -- and a 44px control here pushes the rows apart enough to lose a line. ============================================================ */ .getct{ display:inline-flex;align-items:center;gap:7px; background:rgba(255,204,51,.10); border:1px solid rgba(255,204,51,.42); color:#ffcc33; font-family:inherit;font-weight:700;font-size:14.5px;letter-spacing:.2px; padding:7px 12px;border-radius:7px;cursor:pointer;line-height:1; touch-action:manipulation;-webkit-tap-highlight-color:transparent; transition:background .12s,border-color .12s,opacity .12s; } .getct:hover{background:rgba(255,204,51,.17);border-color:rgba(255,204,51,.65)} .getct:active{transform:translateY(1px)} /* ⚠ Visibly dead while a trace runs. An enabled-looking button that does nothing is how a second charge happens. */ .getct:disabled{opacity:.55;cursor:default;transform:none} /* The credit pip — one lookup, one credit, said in the control itself rather than in a tooltip nobody opens. */ .getct .c{ display:inline-flex;align-items:center;justify-content:center; min-width:16px;height:16px;padding:0 4px;border-radius:4px; background:rgba(255,204,51,.22);color:#ffcc33; font-size:13px;font-weight:700; } [data-theme="light"] .getct{background:rgba(180,130,0,.10);border-color:rgba(180,130,0,.40);color:#8a6410} [data-theme="light"] .getct .c{background:rgba(180,130,0,.18);color:#8a6410} /* ============================================================ ACTION BUTTONS — 31 Aug 2026 Four instead of five, so each gets real width. Raised rather than flat: a translucent white face with a light edge above and a dark one below reads as a physical key, which is what you want on something pressed with a thumb while walking. 🔴 THE THREE TOUCH PROPERTIES ARE NOT OPTIONAL. Without them a long-press on iOS selects the label and raises the copy/share sheet OVER your own menu -- the single most common way this interaction feels broken. touch-action:manipulation kills the 300ms double-tap wait user-select:none stops the label highlighting blue -webkit-touch-callout:none stops the iOS callout ⚠ ON THE BUTTON, NOT THE CARD. On the card they would also block selecting the address, which agents copy. ============================================================ */ .act{ /* 🔴 SQUARE. aspect-ratio:1 makes height follow the width the flex row already assigns, so four buttons across a phone give four squares and the same markup gives four larger squares on a tablet. ⚠ NO min-height ALONGSIDE IT. A min-height taller than the computed width silently wins and the square becomes a rectangle again -- which is what min-height:64px was doing. ⚠ THE FLEX BASIS STILL COMES FROM .actions (flex:1 1 0). Width is decided there; this only ties height to it. */ aspect-ratio:1; padding:8px 6px 14px; border-radius:12px; background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035)); border:1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.34), 0 2px 5px rgba(0,0,0,.34); transition:transform .07s ease, box-shadow .07s ease, background .12s ease; touch-action:manipulation; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; } .act svg{width:23px;height:23px} .act .t{font-size:13.5px;letter-spacing:.01em} /* ⚠ TRANSFORM ON PRESS, NOT COLOUR. A color change is invisible with a thumb over the button. Movement is felt as well as seen. */ .act:active{ transform:translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.30); background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.05)); } /* ⚠ Hover only where a real pointer exists. On touch, :hover sticks after a tap and the button stays lit until something else is pressed. */ @media (hover:hover) and (pointer:fine){ .act:hover{ background:linear-gradient(180deg,rgba(255,255,255,.115),rgba(255,255,255,.05)); border-color:rgba(255,255,255,.22); } } /* ⚠ KEYBOARD REACH. A long-press has no keyboard equivalent, so the focus ring is the only way the menu is reachable without a pointer. */ .act:focus-visible{outline:2px solid var(--gold);outline-offset:2px} /* At 2.5px the dots read as a rendering artefact rather than an affordance. */ .act .more i{width:3px;height:3px;background:rgba(255,255,255,.68)} .act.menuopen .more i{background:var(--gold)} /* ⚠ menuopen must stay visibly different at the new depth, or an open menu looks the same as a resting button. */ .act.menuopen{ background:linear-gradient(180deg,rgba(255,204,51,.14),rgba(255,204,51,.06)); border-color:rgba(255,204,51,.55); box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1px rgba(255,204,51,.22); } @media (max-width:380px){ /* ⚠ NO min-height HERE EITHER. aspect-ratio handles small screens on its own -- the buttons get narrower and shorter together, which is the point. Only the label needs to come down. */ .act{padding:6px 4px 12px} .act .t{font-size:13px} .act svg{width:20px;height:20px} } /* ⚠ The press transform is the one animation here that carries meaning, so it stays. Nothing else should. */ @media (prefers-reduced-motion:reduce){ .act{transition:none} }