/* Shared page headings and button variants; shadcn Button/Tabs patterns, adapted to existing DOM. */
:root{--hz-accent:#57b7b7;--hz-accent-hover:#49a6a6;--hz-accent-soft:#e3f2f1;--hz-accent-ink:#173c3c;--hz-heading-size:38px;--hz-page-top:40px;--hz-heading-height:164px}
#eventHubRoot .hz-discovery,#eventMyEventsRoot .ma-dashboard,#profileView .profile-section,#feedView .treehole-app.treehole-web{width:100%;max-width:1200px;margin-inline:auto;padding-top:var(--hz-page-top);padding-inline:24px;box-sizing:border-box}
#feedView .treehole-app.treehole-web{grid-template-columns:minmax(0,1fr) 240px}
#eventHubRoot .hz-discovery-heading,#eventMyEventsRoot .ma-heading,#profileView .profile-page-header,#feedView .treehole-head-top{min-height:var(--hz-heading-height);margin:0 0 24px;padding:0;box-sizing:border-box;text-align:left;align-items:flex-start}
#eventHubRoot .hz-discovery-heading h1,#eventMyEventsRoot .ma-heading h1,#profileView .profile-page-header h2,#feedView .treehole-header h1,#profilePageView .profile-hero h2{font-size:var(--hz-heading-size);line-height:1.25;font-weight:700;letter-spacing:-.025em;color:var(--hz-accent);margin:12px 0 14px;background:none;-webkit-text-fill-color:currentColor}
#eventHubRoot .hz-discovery-heading h1 span,#profileView .profile-page-header h2 span{color:inherit;background:none;-webkit-text-fill-color:currentColor}
#eventHubRoot .hz-discovery-heading p:first-child,#eventMyEventsRoot .ma-heading p:first-child,#profileView .profile-page-header .sec-eyebrow,#feedView .treehole-kicker,#profilePageView .profile-kicker{display:block;font-size:11px;line-height:18px;font-weight:600;letter-spacing:.12em;color:#647d7c;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
#profileView .profile-page-header .sec-eyebrow i{display:none}
#eventHubRoot .hz-discovery-heading p:last-child,#eventMyEventsRoot .ma-heading p:last-child,#profileView .profile-page-header .sec-desc,#feedView .treehole-head-title>p:last-child{font-size:14px;line-height:1.75;color:#6d7e78;margin:0;max-width:none}
#eventHubRoot .hz-discovery-heading>button,#eventMyEventsRoot .ma-heading>.event-btn,#feedView .treehole-head-actions{margin-top:32px}
#feedView .treehole-header{gap:0}
/* Consistent outline, solid, selected and focus variants. No business/status colors changed. */
#eventHubRoot :is(.hz-discovery-action,.hz-discovery-heading>button),#eventMyEventsRoot .event-btn,#feedView :is(.treehole-compose-header,.treehole-notification-btn){min-height:42px;padding:10px 18px;border:1px solid var(--hz-accent);border-radius:10px;background:var(--hz-accent-soft);color:var(--hz-accent-ink);font-size:14px;font-weight:600;line-height:1.4;box-shadow:none;transition:background-color .16s ease,transform .16s ease}
#eventMyEventsRoot .event-btn-primary,#feedView .treehole-compose-header{background:var(--hz-accent);color:var(--hz-accent-ink);border-color:var(--hz-accent)}
#eventMyEventsRoot .ma-filters button,#feedView .treehole-tabs :is(button,[role=tab]){min-height:42px;border-radius:10px;color:var(--hz-accent-ink);border:1px solid transparent;transition:background-color .16s ease}
#eventMyEventsRoot .ma-filters button[aria-pressed=true],#feedView .treehole-tabs :is(button.active,[data-state=active]){background:var(--hz-accent);color:var(--hz-accent-ink);border-color:var(--hz-accent)}
#eventHubRoot .hz-discovery-action:hover:not(:disabled),#eventMyEventsRoot .event-btn:hover:not(:disabled),#feedView :is(.treehole-compose-header,.treehole-notification-btn):hover:not(:disabled){background:var(--hz-accent);border-color:var(--hz-accent);color:var(--hz-accent-ink);box-shadow:none}
#eventMyEventsRoot .ma-filters button:hover:not([aria-pressed=true]),#feedView .treehole-tabs [role=tab]:hover:not([data-state=active]){background:var(--hz-accent-soft);border-color:var(--hz-accent)}
:is(#eventHubRoot,#eventMyEventsRoot,#feedView) :is(button,a,[role=tab]):focus-visible{outline:3px solid #277778;outline-offset:3px}
:is(#eventHubRoot,#eventMyEventsRoot,#feedView) button:disabled{opacity:.5;cursor:not-allowed;transform:none}
@media(max-width:900px){#feedView .treehole-app.treehole-web{display:block;max-width:1200px}}
@media(max-width:700px){:root{--hz-heading-size:28px;--hz-page-top:24px;--hz-heading-height:150px}#eventHubRoot .hz-discovery,#eventMyEventsRoot .ma-dashboard,#profileView .profile-section,#feedView .treehole-app.treehole-web{padding-inline:16px}#eventHubRoot .hz-discovery-heading,#eventMyEventsRoot .ma-heading,#feedView .treehole-head-top{flex-wrap:wrap;gap:12px}#feedView .treehole-head-top{grid-template-columns:1fr}#eventHubRoot .hz-discovery-heading>button,#eventMyEventsRoot .ma-heading>.event-btn,#feedView .treehole-head-actions{margin-top:0}#profilePageView .profile-hero{min-height:var(--hz-heading-height);padding-top:var(--hz-page-top)}#profilePageView .profile-title-icon{display:none}#eventHubRoot .hz-discovery-heading h1 span{display:inline}}
@media(prefers-reduced-motion:reduce){:is(#eventHubRoot,#eventMyEventsRoot,#feedView) :is(button,a,[role=tab]){transition:none}}

/* Normalize outer gutters before aligning the three-line heading stack. */
#activityView #eventHubRoot,#myEventsView #eventMyEventsRoot{width:100%;max-width:none;margin:0;padding:0}
#profileView .profile-page-header.sec-head{padding:0;margin:0 0 24px;text-align:left}
#eventHubRoot .hz-discovery-heading>div,#eventMyEventsRoot .ma-heading>div,#feedView .treehole-head-title,#profileView .profile-page-header.sec-head{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;font-family:inherit}
#eventHubRoot .hz-discovery-heading>div>p:first-child,#eventMyEventsRoot .ma-heading>div>p:first-child,#feedView .treehole-head-title>p.treehole-kicker,#profileView .profile-page-header.sec-head>.sec-eyebrow{font-family:inherit;font-size:11px;font-weight:600;line-height:18px;letter-spacing:.12em;margin:0;padding:0;min-height:18px;color:#647d7c}
#eventHubRoot .hz-discovery-heading>div>h1,#eventMyEventsRoot .ma-heading>div>h1,#feedView .treehole-head-title>h1,#profileView .profile-page-header.sec-head>.sec-title{font-family:inherit;font-size:var(--hz-heading-size);font-weight:700;line-height:1.25;letter-spacing:-.025em;margin:12px 0 14px;padding:0;color:var(--hz-accent);-webkit-text-fill-color:currentColor}
#profileView .profile-page-header.sec-head>.sec-title span{font:inherit;color:inherit;-webkit-text-fill-color:currentColor}
#eventHubRoot .hz-discovery-heading>div>p:last-child,#eventMyEventsRoot .ma-heading>div>p:last-child,#feedView .treehole-head-title>p:last-child,#profileView .profile-page-header.sec-head>.sec-desc{font-family:inherit;font-size:14px;font-weight:400;line-height:1.75;letter-spacing:normal;margin:0;padding:0;max-width:none;color:#6d7e78}
#profileView .profile-page-header.sec-head>.sec-eyebrow::before,#profileView .profile-page-header.sec-head>.sec-eyebrow::after{display:none}

/* Content-driven heading height: avoid empty space below the introduction. */
#eventHubRoot .hz-discovery-heading,
#eventMyEventsRoot .ma-heading,
#profileView .profile-page-header.sec-head,
#feedView .treehole-head-top,
#profilePageView .profile-hero {
  min-height: 0;
  height: auto;
  margin-bottom: 24px;
}
@media(max-width:700px) {
  #eventHubRoot .hz-discovery-heading,
  #eventMyEventsRoot .ma-heading,
  #profileView .profile-page-header.sec-head,
  #feedView .treehole-head-top,
  #profilePageView .profile-hero { margin-bottom:20px; }
}

/* Low-contrast dot pattern, inspired by Magic UI's masked Dot Pattern.
   Native CSS adaptation; no new runtime dependency. Business pages only. */
body:has(:is(#activityView,#myEventsView,#feedView,#profileView,#profilePageView).active){
 background:radial-gradient(ellipse 55% 45% at 98% 0%,#f7edde 0%,transparent 72%),#f7f5ef;
 background-attachment:fixed;
 isolation:isolate;
}
body:has(:is(#activityView,#myEventsView,#feedView,#profileView,#profilePageView).active)::before{
 content:"";position:fixed;inset:88px 0 0;z-index:-1;pointer-events:none;opacity:1;mix-blend-mode:normal;
 background-image:radial-gradient(circle,rgba(65,143,143,.18) .8px,transparent 1px);
 background-size:22px 22px;
 -webkit-mask-image:linear-gradient(90deg,#000,transparent 15%,transparent 85%,#000);
 mask-image:linear-gradient(90deg,#000,transparent 15%,transparent 85%,#000);
}
body:has(:is(#activityView,#myEventsView,#feedView,#profileView,#profilePageView).active)::after{
 content:"";position:fixed;top:88px;right:0;width:min(760px,65vw);height:330px;z-index:-1;pointer-events:none;
 background:radial-gradient(ellipse at 68% 24%,rgba(87,183,183,.16),rgba(179,222,213,.07) 45%,transparent 72%);
 animation:hz-soft-light 22s ease-in-out infinite alternate;
}
@keyframes hz-soft-light{from{transform:translate3d(0,-5px,0);opacity:.8}to{transform:translate3d(-24px,12px,0);opacity:1}}
@media(max-width:700px){
 body:has(:is(#activityView,#myEventsView,#feedView,#profileView,#profilePageView).active)::before{inset:0;opacity:.5;background-size:20px 20px;-webkit-mask-image:linear-gradient(90deg,#000,transparent 8%,transparent 92%,#000);mask-image:linear-gradient(90deg,#000,transparent 8%,transparent 92%,#000)}
 body:has(:is(#activityView,#myEventsView,#feedView,#profileView,#profilePageView).active)::after{top:0;width:85vw;height:250px;animation:none;opacity:.7}
}
@media(prefers-reduced-motion:reduce){body:has(:is(#activityView,#myEventsView,#feedView,#profileView,#profilePageView).active)::after{animation:none;transform:none}}