/* ============================================================================
MOBILE AUDIT FIXES — 2026-06-30 (Philip mobile/desktop punchlist build pass)
----------------------------------------------------------------------------
WHY A SEPARATE, LAST-LINKED SHEET:
On the app pages (index / example-report / room) the real cascade winner is
the LAST glyph (footer watchdog measures .rdm-arrow), just rotate it down. Desktop
keeps the coral right-arrow + nudge fully untouched. */
@media (max-width:720px){
html body.ovh .record-detail-modal .rdm-arrow{
display:flex !important;flex-direction:column !important;
align-items:center !important;justify-content:center !important;
width:100% !important;text-align:center !important;gap:2px !important;
}
html body.ovh .record-detail-modal .rdm-arrow b{
transform:rotate(90deg) !important;animation:none !important;
}
/* [mobile] "Enter The Private Room" (public) / "Download This Record" (private)
spans the full footer row. The flex spacer (.rdm-grow) otherwise leaves the
primary CTA at half width beside it. */
html body.ovh .record-detail-modal .rdm-foot .rdm-grow{display:none !important;}
html body.ovh .record-detail-modal .rdm-foot a.rdm-g{flex:1 1 100% !important;}
}
/* ---------------------------------------------------------------------------
C6 · sale-value "$68M" pill (record_detail.jsx .rdm-head-sale). Philip: the
frame is still around it + the text reads fuzzy/blurry. The pill carries its
OWN 1px gold border + inset gold glow (separate from the #21 modal corner-frame
already hidden). Kill the border + glow and crisp the gold on mobile; desktop
keeps the framed pill.
--------------------------------------------------------------------------- */
@media (max-width:720px){
html body.ovh .record-detail-modal .rdm-head-sale{
border:none !important;box-shadow:none !important;background:transparent !important;
padding-left:0 !important;padding-right:0 !important;
}
html body.ovh .record-detail-modal .rdm-head-sale b{
color:#f0d6a8 !important;text-shadow:none !important;font-weight:600 !important;
}
}
/* ---------------------------------------------------------------------------
#15 · T1·2 — kill iOS tap-zoom on text fields (touch devices only)
--------------------------------------------------------------------------- */
/* iOS Safari auto-zooms when a FOCUSED text field has font-size < 16px. This
does NOT apply to (opens a native picker), so selects are left at
their design size and the compact filter grid is preserved. Scope: touch
devices only (hover:none + pointer:coarse) — desktop with a mouse is never
affected at any window width. Targeted per known context so we beat the
existing high-specificity !important font rules (report 11px, modal 13px). */
@media (hover:none) and (pointer:coarse){
html body.ovh input[type="text"],
html body.ovh input[type="search"],
html body.ovh input[type="email"],
html body.ovh input[type="tel"],
html body.ovh input[type="url"],
html body.ovh input[type="number"],
html body.ovh input[type="password"],
html body.ovh input:not([type]),
html body.ovh textarea,
html body.ovh .modal.ovh-fm .modal-row input,
html body.ovh .modal.ovh-fm .modal-row textarea,
html body.ovh .deal-registration-modal input,
html body.ovh .deal-registration-modal textarea{
font-size:16px !important;
}
}
/* ---------------------------------------------------------------------------
#18 / #21 / #22 · Add Property modal (record_add_property.jsx; example-report + room)
--------------------------------------------------------------------------- */
/* [global] #18 header (?) popover — self-contained (the pricing .qmark CSS + pricing.js tooltip
are NOT loaded on example-report/room). Mirror the pricing qmark look + a pure-CSS hover/focus
tip so the intro paragraph's content lives in the (?) instead of cluttering the header. */
html body.ovh .deal-modal-head .qmark{
display:inline-block;width:18px;height:18px;border-radius:50%;
border:1px solid rgba(217,168,113,.5);background:transparent;color:#ecc591;
font-size:11px;line-height:16px;text-align:center;cursor:pointer;margin-left:8px;
padding:0;font-family:inherit;vertical-align:middle;position:relative;
}
html body.ovh .deal-modal-head .qmark:hover,
html body.ovh .deal-modal-head .qmark:focus-visible{border-color:#f0d6a8;color:#f0d6a8}
html body.ovh .deal-modal-head .qmark[data-tip]:hover::after,
html body.ovh .deal-modal-head .qmark[data-tip]:focus::after{
content:attr(data-tip);position:absolute;top:150%;left:0;z-index:20;
width:260px;max-width:74vw;padding:11px 13px;background:#100c07;
border:1px solid rgba(217,168,113,.3);border-radius:9px;color:#cfc6b5;
font:400 11px/1.55 "JetBrains Mono",ui-monospace,monospace;letter-spacing:0;
text-transform:none;white-space:normal;text-align:left;box-shadow:0 14px 34px rgba(0,0,0,.55);
}
/* [mobile] #21 corner-frame brackets (vault-aesthetic ::after, 8 gradient arms at inset:0) mis-size
on the tall scrolling modal -> Philip's "picture-frame" artifact over the top half. Drop them on
phones; desktop keeps the intentional vault clamp where the modal fits without scrolling. */
@media (max-width:720px){
html body.ovh .deal-registration-modal::after,
html body.ovh .record-detail-modal::after{display:none !important;}
}
/* [mobile] #22 action bar: primary "Add Property" sits ABOVE "Cancel", both full-width
(JSX codes Cancel first; column-reverse flips the visual order on phones only). */
@media (max-width:720px){
html body.ovh .deal-registration-modal .deal-modal-actions{
flex-direction:column-reverse !important;gap:8px !important;
}
html body.ovh .deal-registration-modal .deal-modal-actions button{width:100% !important;}
}
/* ---------------------------------------------------------------------------
#20 · KPI board — drop the confusing per-card raw-ratio % (report + room)
--------------------------------------------------------------------------- */
/* Each ring's % was a DIFFERENT unlabeled ratio (activeValue/tracked, active/board,
insideTen/active, pipeline/board) -> confusing. Hide the bare number; the ring arc stays as a
decorative proportional fill and the anime.js hooks (data-pct/rg-prog) are untouched. The
"Days Remaining" -> "Closing ≤ 10 Days" label fix (count, not days) is in room_kpi_model.mjs. */
html body.ovh .kpirow .rg em,
html body.ovh .ovh-kpirow .rg em{display:none !important;}
/* ---------------------------------------------------------------------------
#23 · T3·2 — collapse oversized mobile topbar (every page) [mobile]
--------------------------------------------------------------------------- */
/* The topstrip was ~183px on phones (nav wraps to ~75px). Collapse to brand + Access Key on one row;
the full nav lives in the footer on mobile. */
@media (max-width:720px){
html body.ovh .topstrip .top-nav{display:none !important;}
html body.ovh .topstrip .topstrip-inner{justify-content:space-between !important;gap:10px !important;}
}
/* ---------------------------------------------------------------------------
#19 · T2·2 — Apply page (apply.html static + apply.js); my sheet is genuinely last here.
--------------------------------------------------------------------------- */
/* Enterprise condensed from a full panel to a small link (How-Access/What-You-Get panels removed). */
html body.ovh.apply .side .ent-mini{
display:inline-flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;
border:1px solid rgba(217,168,113,.3);border-radius:10px;padding:12px 16px;
color:#cfc6b5;text-decoration:none;background:rgba(0,0,0,.2);
font:500 11px/1.45 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.06em;
transition:border-color .15s ease,color .15s ease;
}
html body.ovh.apply .side .ent-mini:hover{border-color:rgba(236,197,145,.7);color:#f0d6a8;}
html body.ovh.apply .side .ent-mini .d{color:#ecc591;}
html body.ovh.apply .side .ent-mini .arr{margin-left:auto;color:#ecc591;}
/* Submit toast (apply.js showToast) — appended to , so NOT scoped to .ovh. Floats, fades. */
.apply-toast{
position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(18px);
z-index:9999;opacity:0;pointer-events:none;max-width:min(440px,calc(100vw - 32px));
padding:14px 20px;background:linear-gradient(180deg,#1c1610,#120d08);
border:1px solid rgba(217,168,113,.45);border-radius:12px;color:#f3ead9;text-align:center;
font:500 13px/1.5 "JetBrains Mono",ui-monospace,monospace;box-shadow:0 18px 44px rgba(0,0,0,.55);
transition:opacity .35s ease,transform .35s ease;
}
.apply-toast.is-in{opacity:1;transform:translateX(-50%) translateY(0);}
.apply-toast.is-out{opacity:0;transform:translateX(-50%) translateY(18px);}
/* ===========================================================================
ROUND 2 — Philip's annotated-screenshot corrections (mobile; desktop protected).
These win on example-report because ensureOverhaulAssets re-appends this sheet
LAST (injector unlock). All layout wrapped in @media (max-width:720px).
=========================================================================== */
/* [mobile] C2 — center the "Example Report" page title (report_panels.jsx ReportHero
-> .report-hero .in h1). Desktop keeps its left-aligned hero. */
@media (max-width:720px){
html body.ovh .report-hero .in{text-align:center !important;}
html body.ovh .report-hero .in h1{text-align:center !important;}
html body.ovh .report-hero .cta{justify-content:center !important;}
}
/* [mobile] C3 — STATS BOARD -> one compact SINGLE horizontal bar. Philip: "make it
smaller for mobile so it fits on one bar"; the centered 2x2 was the cramped-ugly
version. Four tiny metrics in ONE row; the confusing rings are dropped on mobile
(he's said 3x he doesn't get them + it's cleaner without). Desktop keeps the ring
board untouched. (report_panels.jsx ReportKpiRow -> .kpirow > .redit > .rcell). */
@media (max-width:720px){
html body.ovh .kpirow .redit{
display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;
align-items:stretch !important;gap:5px !important;
}
html body.ovh .kpirow .rcell{
flex:1 1 0 !important;min-width:0 !important;
display:flex !important;flex-direction:column !important;
align-items:center !important;justify-content:center !important;
text-align:center !important;gap:1px !important;padding:8px 2px !important;
}
html body.ovh .kpirow .rcell .rg{display:none !important;}
html body.ovh .kpirow .rcell .rm{
display:flex !important;flex-direction:column-reverse !important;
align-items:center !important;text-align:center !important;gap:2px !important;
}
html body.ovh .kpirow .rcell .rm span{
font-size:8px !important;line-height:1.15 !important;letter-spacing:.02em !important;
opacity:.65 !important;text-transform:uppercase !important;
}
html body.ovh .kpirow .rcell .rm b{font-size:15px !important;line-height:1.05 !important;}
}
/* [mobile] C12 — remove the ENTITY field from the record card. Philip: "WHY THE FUCK
IS ENTITY STILL THERE??? I SAID REMOVE THAT." (report_panels.jsx ReportRow ->
.hybrid-cell.hybrid-entity). Desktop card is fine per Philip -> mobile-only hide.
Must out-specify the !important display:flex rules in overhaul-report (0,5,3) and
tweaker-density (0,7,3); mirror the tweaker context + the extra .hybrid-cell -> (0,8,4). */
@media (max-width:720px){
html body:not([data-view-density="simple"]).ovh main.shell.report-page .report-board .hybrid-report-row > button > .hybrid-cell.hybrid-entity{display:none !important;}
}
/* [mobile] C4 — MY CONTACTS spans the full filter row (Philip: "expand across on
mobile"). .report-filter-grid is a 2-col grid; the toggle is the 5th item at auto
column -> force it to span both columns full-width. */
@media (max-width:720px){
html body.ovh .report-filter-grid .room-filter-toggle{
grid-column:1 / -1 !important;width:100% !important;justify-content:center !important;
}
}
/* [mobile] C5 — map STREET/SATELLITE/DARK layer control. Was a cramped 2-row wrapping
box on the map face (Philip: "looks like dog shit on mobile"). Make it a tidy compact
SINGLE-row segmented pill, top-left, smaller. (.report-layer-control on .report-map). */
@media (max-width:720px){
html body.ovh main.shell.report-page .report-map-card .leaflet-report-map-shell .report-layer-control.report-layer-control{
flex-wrap:nowrap !important;top:10px !important;left:10px !important;right:auto !important;
gap:2px !important;padding:3px !important;width:max-content !important;max-width:calc(100% - 68px) !important;
background:rgba(8,6,4,.82) !important;border-radius:9px !important;
-webkit-backdrop-filter:blur(4px) !important;backdrop-filter:blur(4px) !important;
}
html body.ovh main.shell.report-page .report-map-card .leaflet-report-map-shell .report-layer-control.report-layer-control button{
padding:5px 8px !important;font-size:9px !important;white-space:nowrap !important;
letter-spacing:.02em !important;border-radius:6px !important;flex:0 0 auto !important;
}
}
/* [mobile] C13 — Xavier launcher collapses to the ORB only. Philip: "the gear icon is over
the pill and the pill is supposed to be collapsed then expand out on mobile." Hide the gear
(.pill-gear-light) and the "Xavier / AI Advisor" copy on phones; the orb mark stays and its
tap opens the chat. Desktop keeps the full pill + gear. (app_site_guide.jsx SiteGuideLaunchRow) */
@media (max-width:720px){
html body.ovh .site-guide-launch-row .pill-gear-light{display:none !important;}
html body.ovh .site-guide-launch-row .site-guide-launch .site-guide-launch-copy{
width:0 !important;max-width:0 !important;min-width:0 !important;overflow:hidden !important;
opacity:0 !important;margin:0 !important;padding:0 !important;flex:0 0 0 !important;
}
html body.ovh .site-guide-launch-row .site-guide-launch{
padding:0 !important;gap:0 !important;min-width:0 !important;
}
}
/* [mobile] C11 — record card RE-LAYOUT (consolidated; supersedes the earlier gap-tweak + font-shrink
passes, which could not drop the ~378px height because the card rendered as a wrapping flex COLUMN:
the day-ring sat alone on its own row with the whole right side of the card wasted, then seller,
buyer, address, asset, value, date, status each stacked full-width = 8 tall rows.
Philip: "extremely cramped / too much scrolling; the card crams the left and wastes the right of the
day-ring." Fix: FORCE a compact 3-row GRID that seats the ring in a narrow left column and flows the
seller/buyer/value/status into the reclaimed space beside it, then one tight bottom band for
address / asset / date. Drops 8 rows -> 3 = ~240-260px. Mobile-only; desktop card untouched.
The rendered winner sets display:flex (report-hybrid family) so we force display:grid !important from
this last-linked sheet; extra .report-row class out-specifies the flex + tweaker-density armor. */
@media (max-width:720px){
html body:not([data-view-density="simple"]).ovh.ovh main.shell.report-page .report-board .report-row.hybrid-report-row.hybrid-report-row > button{
display:grid !important;
grid-template-columns:46px minmax(0,1fr) minmax(58px,auto) !important;
grid-template-areas:
"days seller value"
"days buyer status"
"addr asset date" !important;
flex-wrap:nowrap !important;
column-gap:12px !important;row-gap:8px !important;
align-items:center !important;
padding:14px 14px 14px !important;min-height:0 !important;
}
/* reset every cell's stray grid-row/col so the areas below place them cleanly */
html body:not([data-view-density="simple"]).ovh.ovh main.shell.report-page .report-board .report-row.hybrid-report-row.hybrid-report-row > button > .hybrid-cell{
grid-row:auto !important;grid-column:auto !important;min-width:0 !important;border-top:0 !important;
}
html body:not([data-view-density="simple"]).ovh.ovh main.shell.report-page .report-board .report-row.hybrid-report-row.hybrid-report-row > button > .hybrid-num{display:none !important;}
html body:not([data-view-density="simple"]).ovh.ovh main.shell.report-page .report-board .report-row.hybrid-report-row.hybrid-report-row > button > .hybrid-days-pill{
grid-area:days !important;width:44px !important;min-width:44px !important;height:44px !important;
justify-self:start !important;align-self:center !important;padding:0 !important;
}
html body:not([data-view-density="simple"]).ovh.ovh main.shell.report-page .report-board .report-row.hybrid-report-row.hybrid-report-row > button > .hybrid-party:nth-of-type(3){grid-area:seller !important;padding:0 !important;}
html body:not([data-view-density="simple"]).ovh.ovh main.shell.report-page .report-board .report-row.hybrid-report-row.hybrid-report-row > button > .hybrid-party:nth-of-type(4){grid-area:buyer !important;padding:0 !important;}
html body:not([data-view-density="simple"]).ovh.ovh main.shell.report-page .report-board .report-row.hybrid-report-row.hybrid-report-row > button > .hybrid-value{
grid-area:value !important;justify-self:end !important;text-align:right !important;padding:0 !important;font-size:15px !important;align-self:center !important;
}
html body:not([data-view-density="simple"]).ovh.ovh main.shell.report-page .report-board .report-row.hybrid-report-row.hybrid-report-row > button > .hybrid-status{
grid-area:status !important;justify-self:end !important;text-align:right !important;padding:0 !important;align-self:center !important;
}
/* bottom band: address / asset / date on ONE row, separated from the parties by a single hairline */
html body:not([data-view-density="simple"]).ovh.ovh main.shell.report-page .report-board .report-row.hybrid-report-row.hybrid-report-row > button > .hybrid-address{
grid-area:addr !important;display:block !important;border-top:1px solid rgba(217,168,113,.16) !important;padding:9px 0 0 !important;min-width:0 !important;
}
html body:not([data-view-density="simple"]).ovh.ovh main.shell.report-page .report-board .report-row.hybrid-report-row.hybrid-report-row > button > .hybrid-asset{
grid-area:asset !important;display:flex !important;flex-direction:column !important;gap:3px !important;border-top:1px solid rgba(217,168,113,.16) !important;padding:9px 0 0 !important;font-size:11px !important;line-height:1.2 !important;min-width:0 !important;
}
html body:not([data-view-density="simple"]).ovh.ovh main.shell.report-page .report-board .report-row.hybrid-report-row.hybrid-report-row > button > .hybrid-date{
grid-area:date !important;display:flex !important;flex-direction:column !important;gap:3px !important;border-top:1px solid rgba(217,168,113,.16) !important;padding:9px 0 0 !important;font-size:11px !important;line-height:1.2 !important;justify-self:end !important;text-align:right !important;min-width:0 !important;
}
/* keep the party rows tight */
html body:not([data-view-density="simple"]).ovh.ovh main.shell.report-page .report-board .report-row.hybrid-report-row.hybrid-report-row > button > .hybrid-party{
display:flex !important;flex-direction:column !important;row-gap:1px !important;
}
html body:not([data-view-density="simple"]).ovh.ovh main.shell.report-page .report-board .report-row.hybrid-report-row.hybrid-report-row > button > .hybrid-party small{line-height:1.2 !important;}
}
/* [mobile] C10 — record modal Building/Property Info. Philip: "not stacked like this,
too wide, too much scrolling." The facts were 1-per-row full-width boxes (very tall).
Make them a 2-column grid on mobile so the section is half the height + less scroll.
(.record-detail-modal .rdm-kv-grid.rdm-property-facts). */
@media (max-width:720px){
html body.ovh .record-detail-modal .rdm-kv-grid.rdm-property-facts{
grid-template-columns:1fr 1fr !important;gap:8px !important;
}
html body.ovh .record-detail-modal .rdm-kv-grid.rdm-property-facts .rdm-kv{
padding:10px 8px !important;
}
}
/* [global] C7 REMOVED — the from{stroke-dashoffset:0} keyframe started every ring FULL and
fought the real anime.js drain (site_motion.jsx animates .rg-prog 119 -> data-off, the correct
partial/drained resting arc). It also leaked onto desktop, so rings read as solid-filled instead
of drained. Rings now rest at their true pct offset (KPI via anime.js + inline offset) and the
day-pills keep their partial --day-pct conic fill. Drain restored; solid-fill bug gone. */
/* [global] MY CONTACTS green status dot — Philip: the My Contacts toggle (example-report + room,
shared .room-filter-toggle) should carry a green indicator like the login "online" dot (#7fc79a),
not the hollow gold ring / teal it had. Solid green + glow in both idle and active states so it
reads as a live availability signal. Same class on both pages -> one rule covers both. */
html body.ovh .room-filter-toggle .dot{
background:#7fc79a !important;border-color:#7fc79a !important;
box-shadow:0 0 8px rgba(127,199,154,.7) !important;
}
html body.ovh .room-filter-toggle.active .dot{
background:#8fe0a8 !important;border-color:#8fe0a8 !important;box-shadow:0 0 11px rgba(127,199,154,.9) !important;
}
/* [mobile] C11 — type sizing that COMPLEMENTS the grid re-layout above: keep the seller/buyer names
readable but tight so each fits cleanly in the reclaimed space beside the ring; slightly smaller
street line. Desktop untouched. */
@media (max-width:720px){
html body:not([data-view-density="simple"]).ovh main.shell.report-page .report-board .hybrid-report-row > button > .hybrid-party b{
font-size:16px !important;line-height:1.12 !important;
}
html body:not([data-view-density="simple"]).ovh main.shell.report-page .report-board .hybrid-report-row > button > .hybrid-address b{
font-size:14.5px !important;line-height:1.15 !important;
}
}
/* [mobile] R2 — the ROOM renders Add Property TWICE (.room-add-btn plain +
.room-add-btn.room-add-btn-mobile-primary). Keep the mobile-primary one; hide the dup. */
@media (max-width:720px){
html body.ovh .room-add-btn:not(.room-add-btn-mobile-primary){display:none !important;}
}
/* [mobile] E2 + ROOM STATS — SINGLE BAR, VALUE on top / LABEL below, NO rings. This was the
version Philip approved ("you made it correctly before"); the only fault was the label wording
sitting too close, so this restores it with real column breathing room. 4 across, one row.
Report .kpirow + room .ovh-kpirow. (.rm DOM order is label,value -> column-reverse puts value up.) */
@media (max-width:720px){
html body.ovh .kpirow,
html body.ovh .ovh-kpirow{display:block !important;}
html body.ovh .kpirow .redit,
html body.ovh .ovh-kpirow .redit{
display:grid !important;grid-template-columns:repeat(4,1fr) !important;
gap:14px !important;width:100% !important;align-items:start !important;
}
html body.ovh .kpirow .rcell,
html body.ovh .ovh-kpirow .rcell{
display:flex !important;flex-direction:column !important;align-items:center !important;
justify-content:flex-start !important;text-align:center !important;
width:auto !important;flex:1 1 0 !important;min-width:0 !important;gap:4px !important;
padding:4px 0 !important;border:none !important;background:transparent !important;min-height:0 !important;
}
html body.ovh .kpirow .rcell .rg,
html body.ovh .ovh-kpirow .rcell .rg{display:none !important;}
html body.ovh .kpirow .rcell .rm.rm,
html body.ovh .ovh-kpirow .rcell .rm.rm,
html body.ovh .kpirow .rcell > .rm,
html body.ovh .ovh-kpirow .rcell > .rm{
display:flex !important;flex-direction:column-reverse !important;flex-wrap:nowrap !important;
align-items:center !important;justify-content:flex-start !important;
text-align:center !important;width:100% !important;gap:4px !important;
}
html body.ovh .kpirow .rcell .rm span,
html body.ovh .ovh-kpirow .rcell .rm span{
font-size:8px !important;letter-spacing:.03em !important;opacity:.7 !important;
text-transform:uppercase !important;line-height:1.25 !important;text-align:center !important;
white-space:normal !important;overflow-wrap:break-word !important;word-break:normal !important;
max-width:100% !important;display:block !important;
}
html body.ovh .kpirow .rcell .rm b,
html body.ovh .ovh-kpirow .rcell .rm b{
font-size:18px !important;white-space:nowrap !important;text-align:center !important;line-height:1 !important;
}
}
/* [mobile] E1 — "Example Report" hero title was CROPPED at the top: .report-hero is
overflow:hidden and the h1 sat ~5px above the clip with 0 top padding. Add top padding on
mobile so the title clears. (report_panels.jsx ReportHero .report-hero) */
@media (max-width:720px){
html body.ovh .report-hero.rhead,
html body.ovh main.shell .report-hero{padding-top:22px !important;}
html body.ovh .report-hero .in{padding-top:14px !important;margin-top:0 !important;}
html body.ovh .report-hero .in h1{margin-top:0 !important;padding-top:20px !important;line-height:1.2 !important;}
}
/* [mobile] E5 — record modal: the address (record_detail.jsx:53) sat jammed under the
"ACTIVE" status chip. Add clear top space above the address on mobile. */
@media (max-width:720px){
html body.ovh .record-detail-modal .rdm-head h2,
html body.ovh .record-detail-modal > * h2:first-of-type{margin-top:12px !important;}
}
/* [mobile] H1 — after C1 removed the nav, .topstrip-inner wrapped so ACCESS KEY sat on its own
line ("floating in some bullshit" - Philip). Keep brand + Access Key on ONE aligned row. Global
topstrip (home + example-report + all pages). */
@media (max-width:720px){
html body.ovh .topstrip .topstrip-inner{
display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;
align-items:center !important;justify-content:space-between !important;gap:12px !important;
}
html body.ovh .topstrip .top-access-key{
flex:0 0 auto !important;margin:0 !important;white-space:nowrap !important;align-self:center !important;
}
}