/* =========================================================================
PatientFi Help Center — shared theme
Dark, on-brand. Matches patientfi.com (dark base) + brand standards
(Laguna teal hero color, Montserrat, leaf motif, pill buttons).
========================================================================= */
:root {
/* Surfaces — official PatientFi dark palette (Carbon replaces true black) */
--bg: #17232E; /* Midnight Carbon 2 — page background */
--surface-1: #1E2D3C; /* Midnight Carbon 1 — large content blocks */
--surface-2: #243748; /* Carbon — cards */
--surface-3: #2C4357; /* lifted Carbon (overlay shade) — hovered cards */
--surface-line: rgba(255,255,255,.08); /* whisper-thin hairlines only */
/* Brand — exact 2025 guideline values */
--laguna: #29DBC2; /* THE star color */
--laguna-50: #B2EDE5;
--laguna-15: #E5FCFA;
--carbon: #243748;
--carbon-1: #1E2D3C; /* Midnight Carbon 1 */
--carbon-2: #17232E; /* Midnight Carbon 2 */
--breeze: #F27D62; /* accents — used sparingly */
--charge: #F79C37;
--blue-jeans: #60B0FB;
--bubble: #FFC8EB;
/* Text — white foundation on dark Carbon */
--text: #F4F8FA; /* primary on dark */
--text-soft: rgba(244,248,250,.74); /* secondary */
--text-muted: rgba(244,248,250,.5); /* tertiary / meta */
--on-laguna: var(--carbon); /* Carbon text on Laguna fills (brand-correct) */
/* Shape */
--r-sm: 12px;
--r-md: 18px;
--r-lg: 28px;
--r-xl: 36px;
--r-pill: 999px;
/* Spacing rhythm */
--container: 1140px;
--gap: 24px;
/* Motion */
--ease: cubic-bezier(.22,.61,.36,1);
/* Ambient shadow (no hard drop shadows) */
--shadow: 0 20px 40px rgba(0,0,0,.35);
--glow-laguna: 0 8px 30px rgba(41,219,194,.25);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: "Montserrat", system-ui, -apple-system, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: 24px;
}
/* =================== Brand shape system (PDF p.36) ====================
Four building blocks — Leaf, Circle, Semi-circle, Quarter-circle —
built in pure CSS so they can take any brand color + transparency.
===================================================================== */
.pf-shape { position: absolute; display: block; }
.pf-circle { border-radius: 50%; }
.pf-leaf { border-radius: 0 50% 0 50%; } /* two opposite corners rounded */
.pf-leaf-alt{ border-radius: 50% 0 50% 0; } /* mirrored leaf */
.pf-semi { border-radius: 999px 999px 0 0; } /* semi-circle (flat bottom) */
.pf-quarter { border-radius: 100% 0 0 0; } /* quarter-circle */
/* color fills */
.fill-laguna { background: var(--laguna); }
.fill-charge { background: var(--charge); }
.fill-breeze { background: var(--breeze); }
.fill-blue { background: var(--blue-jeans); }
.fill-bubble { background: var(--bubble); }
.fill-carbon1{ background: var(--carbon-1); }
/* Page-wide ambient pattern — "Transparency Carbon": Midnight Carbon
shapes barely lifting off the background. Subtle, never distracting. */
.bg-decor {
position: fixed;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
}
.bg-decor .pf-shape { background: #34516B; will-change: transform, opacity; }
.bg-decor .b1 { width: 460px; height: 460px; top: -120px; right: -90px; animation: pfFloatA 26s ease-in-out infinite; }
.bg-decor .b2 { width: 300px; height: 300px; top: 180px; right: 220px; animation: pfFloatB 32s ease-in-out infinite -6s; }
.bg-decor .b3 { width: 520px; height: 520px; bottom: -200px; left: -160px; animation: pfFloatC 30s ease-in-out infinite -12s; }
.bg-decor .b4 { width: 240px; height: 240px; bottom: 80px; left: 260px; animation: pfFloatB 24s ease-in-out infinite -3s; }
/* slow drift + fade — keeps the dark canvas alive without distracting */
@keyframes pfFloatA {
0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: .5; }
50% { transform: translate(-34px, 30px) rotate(9deg); opacity: .82; }
}
@keyframes pfFloatB {
0%, 100% { transform: translate(0, 0); opacity: .44; }
50% { transform: translate(30px, -26px); opacity: .74; }
}
@keyframes pfFloatC {
0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: .52; }
50% { transform: translate(26px, 22px) rotate(-8deg); opacity: .85; }
}
/* gentle lift for the hero + CTA clusters (cluster moves as a unit) */
.hero-shapes { animation: pfBob 13s ease-in-out infinite; }
.cta-shapes { animation: pfBob 16s ease-in-out infinite -4s; }
@keyframes pfBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) {
.bg-decor .pf-shape, .hero-shapes, .cta-shapes { animation: none; }
}
/* settings toggle: animate_background = false */
body.no-bg-anim .bg-decor .pf-shape,
body.no-bg-anim .hero-shapes,
body.no-bg-anim .cta-shapes { animation: none; }
/* =========================== Header / nav =============================== */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(8,20,32,.72);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-bottom: 1px solid var(--surface-line);
}
.nav {
display: flex;
align-items: center;
gap: 28px;
height: 72px;
}
.brand {
display: flex;
align-items: center;
gap: 12px;
font-weight: 700;
font-size: 20px;
letter-spacing: -.02em;
}
.brand-logo { height: 38px; width: auto; display: block; }
.site-footer .brand-logo { height: 30px; }
.brand .support-tag {
font-weight: 500;
font-size: 12px;
color: var(--laguna);
border: 1px solid rgba(41,219,194,.35);
padding: 2px 9px;
border-radius: var(--r-pill);
margin-left: 4px;
}
.nav-links {
display: flex;
align-items: center;
gap: 26px;
margin-left: 12px;
list-style: none;
padding: 0; margin-block: 0;
font-size: 14px;
font-weight: 500;
color: var(--text-soft);
}
.nav-links a:hover { color: var(--text); }
.nav-right {
margin-left: auto;
display: flex;
align-items: center;
gap: 14px;
}
.nav-login {
font-size: 14px;
font-weight: 600;
color: var(--text-soft);
}
.nav-login:hover { color: var(--laguna); }
/* =============================== Buttons ================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: inherit;
font-weight: 600;
font-size: 15px;
border: none;
cursor: pointer;
border-radius: var(--r-pill);
padding: 12px 26px;
transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
background: var(--laguna);
color: var(--on-laguna);
box-shadow: var(--glow-laguna);
}
.btn-primary:hover { box-shadow: 0 12px 36px rgba(41,219,194,.4); }
.btn-secondary {
background: rgba(255,255,255,.06);
color: var(--text);
border: 1px solid var(--surface-line);
}
.btn-secondary:hover { background: rgba(255,255,255,.1); }
.btn-ghost {
background: transparent;
color: var(--text-soft);
}
.btn-ghost:hover { color: var(--text); }
.btn-sm { padding: 9px 18px; font-size: 14px; }
/* =============================== Hero =================================== */
.hero {
text-align: center;
padding: 88px 0 64px;
position: relative;
}
.hero h1 {
font-size: clamp(2.4rem, 5vw, 3.6rem);
line-height: 1.08;
letter-spacing: -.03em;
font-weight: 700;
margin: 0 auto 16px;
max-width: 720px;
}
.hero h1 .accent { color: var(--laguna); }
.hero .sub {
color: var(--text-soft);
font-size: 1.05rem;
max-width: 540px;
margin: 0 auto 36px;
}
/* Search — prominent, the focal point of the hero */
.search {
position: relative;
max-width: 680px;
margin: 0 auto;
/* soft Laguna halo so the bar lifts off the page */
box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(41,219,194,.12);
border-radius: var(--r-pill);
transition: box-shadow .25s var(--ease);
}
.search:focus-within {
box-shadow: 0 24px 70px rgba(0,0,0,.5), 0 0 0 2px rgba(41,219,194,.55), 0 0 40px rgba(41,219,194,.25);
}
.search input {
width: 100%;
font-family: inherit;
font-size: 17px;
color: var(--text);
background: var(--surface-2);
border: 1px solid var(--surface-line);
border-radius: var(--r-pill);
padding: 22px 150px 22px 60px;
transition: border-color .2s var(--ease);
}
.search input::placeholder { color: var(--text-muted); }
.search input:focus { outline: none; border-color: transparent; }
.search .search-icon {
position: absolute;
left: 24px; top: 50%;
transform: translateY(-50%);
color: var(--laguna);
z-index: 2;
}
.search-btn {
position: absolute;
right: 8px; top: 50%;
transform: translateY(-50%);
z-index: 2;
border: none;
cursor: pointer;
font-family: inherit;
font-weight: 600;
font-size: 15px;
color: var(--on-laguna);
background: var(--laguna);
border-radius: var(--r-pill);
padding: 13px 26px;
display: inline-flex;
align-items: center;
gap: 8px;
transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.search-btn:hover { transform: translateY(-50%) scale(1.03); box-shadow: var(--glow-laguna); }
.search-suggest {
margin-top: 16px;
font-size: 13px;
color: var(--text-muted);
}
.search-suggest a {
color: var(--text-soft);
border-bottom: 1px solid transparent;
}
.search-suggest a:hover { color: var(--laguna); border-color: var(--laguna); }
/* ============================ Section bits ============================== */
.section { padding: 28px 0; }
.section-head {
display: flex;
align-items: end;
justify-content: space-between;
margin-bottom: 22px;
gap: 16px;
}
.section-head h2 {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -.02em;
margin: 0;
}
.eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--laguna);
margin-bottom: 10px;
}
/* Category grid */
.cat-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--gap);
}
.cat-card {
background: var(--surface-2);
border-radius: var(--r-lg);
padding: 32px;
transition: transform .25s var(--ease), background .25s var(--ease);
position: relative;
overflow: hidden;
}
.cat-card:hover { transform: translateY(-4px); background: var(--surface-3); }
.cat-card .icon {
width: 52px; height: 52px;
border-radius: 15px;
display: grid; place-items: center;
background: rgba(41,219,194,.12);
color: var(--laguna);
margin-bottom: 18px;
}
.cat-card h3 {
font-size: 1.15rem;
font-weight: 700;
margin: 0 0 8px;
}
.cat-card p {
color: var(--text-soft);
font-size: .95rem;
margin: 0 0 18px;
}
.cat-card .tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
font-size: 12px;
color: var(--text-soft);
background: rgba(255,255,255,.05);
border-radius: var(--r-pill);
padding: 5px 12px;
}
/* ---- Brand shape clusters: tasteful arrangements per the Four C's ----
Contrast (varied size/color/opacity), Color (harmonized), Corners
(round + sharp mixed), Complexity (restrained). ---------------------- */
.shape-cluster {
position: absolute;
pointer-events: none;
z-index: 0;
}
.hero { overflow: hidden; }
.hero .container { position: relative; z-index: 1; }
/* Hero cluster, top-right — a Laguna leaf anchored by harmonized accents */
.hero-shapes { top: 40px; right: max(16px, calc((100% - var(--container)) / 2 - 40px)); width: 300px; height: 260px; }
.hero-shapes .s1 { width: 120px; height: 120px; top: 20px; right: 30px; opacity: .9; } /* laguna leaf */
.hero-shapes .s2 { width: 64px; height: 64px; top: 0; right: 150px; opacity: .85; } /* blue quarter */
.hero-shapes .s3 { width: 80px; height: 40px; top: 140px; right: 130px; opacity: .9; } /* charge semi */
.hero-shapes .s4 { width: 46px; height: 46px; top: 150px; right: 18px; opacity: .8; } /* breeze circle */
.hero-shapes .s5 { width: 150px; height: 150px; top: 70px; right: 60px; opacity: .12; } /* carbon circle (depth) */
/* keep CTA copy + buttons above the decorative shapes */
.cta-band > *:not(.shape-cluster) { position: relative; z-index: 1; }
/* CTA cluster — tucked into the bottom-right corner, behind content */
.cta-shapes { right: 0; bottom: 0; width: 150px; height: 120px; z-index: 0; overflow: hidden; }
.cta-shapes .s1 { width: 84px; height: 84px; bottom: -22px; right: -18px; opacity: .85; } /* laguna leaf, corner */
.cta-shapes .s2 { width: 46px; height: 46px; bottom: 44px; right: 30px; opacity: .8; } /* charge quarter */
.cta-shapes .s3 { width: 26px; height: 26px; bottom: 18px; right: 78px; opacity: .75; } /* bubble circle */
@media (max-width: 900px) {
.hero-shapes { display: none; }
.cta-shapes { opacity: .7; }
}
/* CTA band */
.cta-band {
margin: 56px 0 24px;
background: linear-gradient(135deg, var(--carbon), var(--carbon-2));
/* extended-leaf: two diagonal corners rounded (PDF p.38) */
border-radius: var(--r-xl) 10px var(--r-xl) 10px;
padding: 48px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
position: relative;
overflow: hidden;
}
.cta-band h2 { font-size: 1.7rem; margin: 0 0 8px; letter-spacing: -.02em; }
.cta-band p { color: var(--text-soft); margin: 0; max-width: 420px; }
.cta-band .actions { display: flex; gap: 12px; flex-shrink: 0; }
/* CTA band: an overlapping colored petal pair, lower-right */
.cta-shapes { right: 36px; bottom: -28px; }
.cta-shapes .leaf-a { width: 96px; transform: rotate(-8deg); }
.cta-shapes .leaf-b { width: 72px; transform: rotate(28deg) translate(-22px, 16px); }
@media (max-width: 900px) { .cta-shapes { display: none; } }
/* =============================== Footer ================================ */
.site-footer {
margin-top: 72px;
border-top: 1px solid var(--surface-line);
padding: 40px 0;
}
.footer-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}
.footer-links {
display: flex; gap: 24px;
list-style: none; padding: 0; margin: 0;
font-size: 14px; color: var(--text-soft);
}
.footer-links a:hover { color: var(--laguna); }
.footer-copy { font-size: 13px; color: var(--text-muted); }
/* ============================ Breadcrumbs ============================== */
.breadcrumbs {
display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
font-size: 14px; font-weight: 500; color: var(--text-soft);
padding: 26px 0 10px;
}
.breadcrumbs a { color: var(--text-soft); transition: color .15s var(--ease); }
.breadcrumbs a:hover { color: var(--laguna); text-decoration: underline; text-underline-offset: 3px; }
/* current page — brightest, so you always know where you are */
.breadcrumbs > span:last-child { color: var(--text); font-weight: 600; }
/* chevron separators (clearer than a slash) */
.breadcrumbs .sep { font-size: 0; color: var(--text-muted); }
.breadcrumbs .sep::before { content: "›"; font-size: 16px; font-weight: 600; }
/* ===================== Category page: article list ===================== */
.cat-hero {
padding: 40px 0 16px;
}
.cat-hero .eyebrow { font-size: 12px; }
.cat-hero h1 {
font-size: clamp(2rem, 4vw, 2.8rem);
letter-spacing: -.03em;
margin: 0 0 12px;
}
.cat-hero h1 .accent { color: var(--breeze); }
.cat-hero p { color: var(--text-soft); max-width: 560px; }
.cat-layout {
display: grid;
grid-template-columns: 240px 1fr;
gap: 40px;
align-items: start;
padding-top: 24px;
}
.side-nav {
position: sticky; top: 96px;
background: var(--surface-1);
border-radius: var(--r-lg);
padding: 14px;
}
.side-nav a {
display: block;
padding: 11px 16px;
border-radius: var(--r-sm);
font-size: 14px;
font-weight: 500;
color: var(--text-soft);
}
.side-nav a:hover { background: rgba(255,255,255,.04); color: var(--text); }
.side-nav a.active {
color: var(--text);
background: rgba(41,219,194,.1);
border-left: 3px solid var(--laguna);
}
.article-list { display: flex; flex-direction: column; gap: 16px; }
.article-row {
display: flex;
align-items: flex-start;
gap: 18px;
background: var(--surface-2);
border-radius: var(--r-md);
padding: 22px 26px;
transition: transform .2s var(--ease), background .2s var(--ease);
}
.article-row:hover { transform: translateX(4px); background: var(--surface-3); }
.article-row .icon {
flex-shrink: 0;
width: 40px; height: 40px;
border-radius: 11px;
display: grid; place-items: center;
background: rgba(41,219,194,.12);
color: var(--laguna);
}
.article-row h3 { margin: 0 0 4px; font-size: 1.05rem; font-weight: 600; }
.article-row p { margin: 0; color: var(--text-soft); font-size: .9rem; }
.article-row .chev { margin-left: auto; color: var(--text-muted); align-self: center; }
/* feature article (top of category) */
.feature-article {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 0;
background: var(--surface-2);
border-radius: var(--r-lg);
overflow: hidden;
margin-bottom: 28px;
}
.feature-article .media {
background: linear-gradient(135deg, #1f4a4f, var(--carbon-1));
min-height: 220px;
display: grid; place-items: center;
color: var(--laguna);
}
.feature-article .body { padding: 32px; }
.feature-article h3 { font-size: 1.4rem; margin: 10px 0; letter-spacing: -.02em; }
.feature-article p { color: var(--text-soft); margin: 0 0 18px; }
/* =========================== Article page ============================== */
.article-wrap {
display: grid;
grid-template-columns: 1fr 280px;
gap: 48px;
align-items: start;
padding-top: 8px;
}
.article-main { max-width: 720px; }
.article-main h1 {
font-size: clamp(2rem, 4vw, 2.7rem);
letter-spacing: -.03em;
line-height: 1.12;
margin: 8px 0 16px;
}
.article-main h1 .accent { color: var(--breeze); font-style: italic; }
.article-meta {
display: flex; align-items: center; gap: 12px;
color: var(--text-muted); font-size: 13px;
margin-bottom: 28px;
}
.article-meta .avatar {
width: 34px; height: 34px; border-radius: 50%;
background: linear-gradient(135deg, var(--laguna), var(--blue-jeans));
}
.article-hero-img {
width: 100%; height: 260px;
/* extended-leaf corners */
border-radius: var(--r-xl) 12px var(--r-xl) 12px;
background: linear-gradient(135deg, #1f4a4f, var(--carbon-1));
display: grid; place-items: center;
color: var(--laguna);
margin-bottom: 32px;
}
.article-body p { color: var(--text-soft); margin: 0 0 20px; font-size: 1.02rem; }
.article-body h2 { font-size: 1.5rem; margin: 36px 0 14px; letter-spacing: -.02em; }
.callout {
background: rgba(41,219,194,.08);
border-left: 3px solid var(--laguna);
border-radius: var(--r-sm);
padding: 20px 24px;
margin: 28px 0;
}
.callout strong { color: var(--laguna); }
.steps { counter-reset: step; list-style: none; padding: 0; margin: 24px 0; }
.steps li {
position: relative;
padding: 0 0 24px 56px;
color: var(--text-soft);
}
.steps li::before {
counter-increment: step;
content: counter(step);
position: absolute; left: 0; top: 0;
width: 38px; height: 38px;
border-radius: 50%;
background: rgba(41,219,194,.12);
color: var(--laguna);
font-weight: 700;
display: grid; place-items: center;
}
.steps li strong { color: var(--text); display: block; margin-bottom: 2px; }
/* article sidebar */
.article-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 16px; }
.side-card {
background: var(--surface-2);
border-radius: var(--r-lg);
padding: 24px;
}
.side-card.accent {
background: linear-gradient(135deg, var(--carbon), var(--carbon-2));
border-radius: var(--r-lg) 6px var(--r-lg) 6px;
}
.side-card h4 { margin: 0 0 6px; font-size: 1.05rem; }
.side-card p { margin: 0 0 16px; color: var(--text-soft); font-size: .9rem; }
.side-card .btn { width: 100%; }
.was-helpful { display: flex; gap: 10px; margin-top: 8px; }
/* count pill on category cards */
.tag--count { background: rgba(41,219,194,.14); color: var(--laguna); }
/* ===================== Section accordion (category page) ============== */
.cat-toolbar {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; margin: 4px 0 20px; flex-wrap: wrap;
}
.cat-toolbar .count { color: var(--text-muted); font-size: 14px; font-weight: 500; }
.cat-toolbar .count b { color: var(--text); font-weight: 700; }
.acc-expand {
background: none; border: none; cursor: pointer; font-family: inherit;
color: var(--laguna); font-weight: 600; font-size: 14px; padding: 6px 4px;
}
.acc-expand:hover { text-decoration: underline; }
.section-accordion { display: flex; flex-direction: column; gap: 14px; }
.acc-item {
background: var(--surface-1);
border-radius: var(--r-lg) 8px var(--r-lg) 8px; /* extended-leaf */
overflow: hidden;
border: 1px solid transparent;
transition: border-color .2s var(--ease), background .2s var(--ease);
}
.acc-item.is-open { border-color: var(--surface-line); }
/* the header bar — bold, icon-led, can't get lost */
.acc-head {
width: 100%;
display: flex; align-items: center; gap: 16px;
padding: 20px 24px;
background: none; border: none; cursor: pointer;
font-family: inherit; text-align: left;
transition: background .2s var(--ease);
}
.acc-head:hover { background: rgba(255,255,255,.03); }
.acc-icon {
flex-shrink: 0;
width: 44px; height: 44px; border-radius: 13px;
display: grid; place-items: center;
background: rgba(41,219,194,.12); color: var(--laguna);
}
.acc-title {
flex: 1;
font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em;
color: var(--text);
}
.acc-count {
flex-shrink: 0;
font-size: 13px; font-weight: 600;
color: var(--text-soft);
background: rgba(255,255,255,.06);
border-radius: var(--r-pill);
padding: 4px 13px;
}
.acc-chev {
flex-shrink: 0; color: var(--text-muted);
transition: transform .3s var(--ease), color .2s var(--ease);
}
.acc-item.is-open .acc-chev { transform: rotate(180deg); color: var(--laguna); }
/* collapsible body — smooth grid-rows reveal */
.acc-body {
display: grid; grid-template-rows: 0fr;
transition: grid-template-rows .35s var(--ease);
}
.acc-item.is-open .acc-body { grid-template-rows: 1fr; }
.acc-body > .acc-inner { overflow: hidden; }
.acc-articles { list-style: none; margin: 0; padding: 0 16px 12px 16px; }
.acc-articles li { margin: 0; }
.acc-articles a {
display: flex; align-items: center; gap: 12px;
padding: 13px 16px;
color: var(--text-soft); font-size: .98rem; font-weight: 500;
border-radius: var(--r-sm);
transition: background .15s var(--ease), color .15s var(--ease);
}
.acc-articles a:hover { background: rgba(255,255,255,.04); color: var(--text); }
.acc-articles a::before {
content: ""; flex-shrink: 0;
width: 16px; height: 16px; border-radius: 0 50% 0 50%; /* mini leaf marker */
background: var(--laguna); opacity: .55;
transition: opacity .15s var(--ease);
}
.acc-articles a:hover::before { opacity: 1; }
.acc-articles .chev { margin-left: auto; color: var(--text-muted); }
.acc-articles li.acc-hidden { display: none; }
.acc-articles.show-all li.acc-hidden { display: block; }
.acc-more {
background: none; border: none; cursor: pointer; font-family: inherit;
color: var(--laguna); font-weight: 600; font-size: 14px;
margin: 2px 0 14px 32px; padding: 6px 4px;
display: inline-flex; align-items: center; gap: 6px;
}
.acc-more:hover { text-decoration: underline; }
.acc-more::after { content: "↓"; font-size: 12px; }
.acc-more.expanded::after { content: "↑"; }
/* ===== Zendesk WYSIWYG article body — style author-generated HTML ===== */
.article-body { color: var(--text-soft); font-size: 1.02rem; }
.article-body > *:first-child { margin-top: 0; }
.article-body p { margin: 0 0 18px; line-height: 1.7; }
.article-body h1, .article-body h2, .article-body h3, .article-body h4 {
color: var(--text); letter-spacing: -.02em; line-height: 1.3;
font-weight: 700; scroll-margin-top: 96px;
}
.article-body h1 { font-size: 1.7rem; margin: 36px 0 14px; }
.article-body h2 {
font-size: 1.45rem; margin: 42px 0 16px; padding-bottom: 10px;
border-bottom: 1px solid var(--surface-line);
}
.article-body h3 { font-size: 1.2rem; margin: 32px 0 12px; color: var(--laguna-50); }
/* H4 is the heading authors use most — give it a lively, on-brand label look */
.article-body h4 {
font-size: .9rem; margin: 30px 0 12px;
text-transform: uppercase; letter-spacing: .06em;
color: var(--laguna);
display: flex; align-items: center; gap: 10px;
}
.article-body h4::before {
content: ""; flex-shrink: 0;
width: 15px; height: 15px; border-radius: 0 50% 0 50%; /* mini leaf marker */
background: var(--laguna);
}
/* Links: normalize authored light-mode inline colors to brand Laguna */
.article-body a, .article-body a span { color: var(--laguna) !important; }
.article-body a { text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.article-body a:hover, .article-body a:hover span { color: var(--laguna-50) !important; }
/* neutralize other authored inline text colors so nothing turns invisible on dark */
.article-body p span[style*="color"], .article-body li span[style*="color"] { color: inherit; }
.article-body ul, .article-body ol { margin: 0 0 18px; padding-left: 24px; }
.article-body li { margin: 6px 0; line-height: 1.6; }
.article-body ul li::marker { color: var(--laguna); }
.article-body img { max-width: 100%; height: auto; border-radius: var(--r-md); margin: 18px 0; }
.article-body blockquote {
margin: 22px 0; padding: 14px 22px;
background: rgba(41,219,194,.07);
border-left: 3px solid var(--laguna);
border-radius: var(--r-sm);
}
.article-body blockquote p:last-child { margin-bottom: 0; }
.article-body code {
background: rgba(255,255,255,.08); padding: 2px 6px; border-radius: 6px;
font-size: .9em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.article-body pre {
background: var(--carbon-2); padding: 18px; border-radius: var(--r-md);
overflow-x: auto; margin: 18px 0;
}
.article-body pre code { background: none; padding: 0; }
.article-body table {
width: 100%; border-collapse: collapse; margin: 20px 0; font-size: .95rem;
border-radius: var(--r-md); overflow: hidden;
}
.article-body th, .article-body td {
padding: 11px 14px; text-align: left;
border-bottom: 1px solid var(--surface-line);
}
.article-body th { background: rgba(255,255,255,.04); color: var(--text); font-weight: 600; }
/* authors use
heavily as section separators — make it a brand divider */
.article-body hr {
border: none; height: 2px; margin: 34px 0; border-radius: 2px;
background: linear-gradient(90deg, var(--laguna), rgba(41,219,194,0) 72%);
opacity: .55;
}
.article-body h2:first-of-type { margin-top: 8px; }
/* lead paragraph (when an article opens with a paragraph) */
.article-body > p:first-child { font-size: 1.13rem; color: var(--text); line-height: 1.7; }
/* native accordions authors can drop in */
.article-body details {
background: var(--surface-1); border-radius: var(--r-md);
padding: 2px 20px; margin: 18px 0; border: 1px solid var(--surface-line);
}
.article-body summary { cursor: pointer; padding: 15px 0; font-weight: 600; color: var(--text); }
.article-body figure { margin: 22px 0; }
.article-body figcaption { font-size: .85rem; color: var(--text-muted); text-align: center; margin-top: 8px; }
/* ---- Opt-in callout components (authors add a class in the editor) ---- */
.article-body .pf-callout {
display: flex; gap: 14px; padding: 18px 20px; margin: 24px 0;
border-radius: var(--r-md) 4px var(--r-md) 4px; /* extended-leaf */
border-left: 3px solid var(--laguna);
background: rgba(41,219,194,.08);
}
.article-body .pf-callout::before {
content: ""; flex-shrink: 0; width: 18px; height: 18px; margin-top: 3px;
border-radius: 0 50% 0 50%; background: var(--laguna);
}
.article-body .pf-callout p { margin: 0 0 8px; }
.article-body .pf-callout p:last-child { margin-bottom: 0; }
.article-body .pf-callout strong { color: var(--text); }
.article-body .pf-callout--tip { border-color: var(--charge); background: rgba(247,156,55,.1); }
.article-body .pf-callout--tip::before { background: var(--charge); }
.article-body .pf-callout--warning { border-color: var(--breeze); background: rgba(242,125,98,.1); }
.article-body .pf-callout--warning::before { background: var(--breeze); }
.article-body .pf-callout--note { border-color: var(--blue-jeans); background: rgba(96,176,251,.1); }
.article-body .pf-callout--note::before { background: var(--blue-jeans); }
/* ---- Step-by-step box (authors add class) ---- */
.article-body .pf-steps { counter-reset: pfstep; list-style: none; margin: 24px 0; padding: 0; }
.article-body .pf-steps > li {
position: relative; padding: 4px 0 22px 60px; margin: 0;
color: var(--text-soft); line-height: 1.6;
}
.article-body .pf-steps > li:last-child { padding-bottom: 0; }
.article-body .pf-steps > li::before {
counter-increment: pfstep; content: counter(pfstep);
position: absolute; left: 0; top: 0;
width: 40px; height: 40px; border-radius: 50%;
background: rgba(41,219,194,.14); color: var(--laguna);
font-weight: 700; font-size: 1rem; display: grid; place-items: center;
}
/* connecting line between steps */
.article-body .pf-steps > li:not(:last-child)::after {
content: ""; position: absolute; left: 19px; top: 44px; bottom: 6px;
width: 2px; background: rgba(41,219,194,.2);
}
.article-body .pf-steps > li strong { color: var(--text); display: block; margin-bottom: 3px; }
.article-body .pf-steps > li p { margin: 0; }
/* ---- Comparison table (authors add class="pf-compare") ---- */
.article-body table.pf-compare { border-collapse: separate; border-spacing: 0; }
.article-body table.pf-compare thead th {
background: rgba(41,219,194,.12); color: var(--text);
border-bottom: 2px solid var(--laguna);
}
.article-body table.pf-compare thead th:first-child { background: transparent; }
.article-body table.pf-compare tbody tr:nth-child(even) { background: rgba(255,255,255,.025); }
.article-body table.pf-compare td:first-child { font-weight: 600; color: var(--text); }
.article-body table.pf-compare td, .article-body table.pf-compare th { text-align: center; }
.article-body table.pf-compare td:first-child, .article-body table.pf-compare th:first-child { text-align: left; }
/* ---- Related links block (authors add class="pf-related") ---- */
.article-body .pf-related {
background: var(--surface-1); border: 1px solid var(--surface-line);
border-radius: var(--r-lg) 6px var(--r-lg) 6px; padding: 22px 26px; margin: 26px 0;
}
.article-body .pf-related > h4,
.article-body .pf-related > strong:first-child {
display: flex; align-items: center; gap: 10px;
margin: 0 0 12px; color: var(--laguna);
font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
}
.article-body .pf-related > h4::before { content: ""; width: 15px; height: 15px; border-radius: 0 50% 0 50%; background: var(--laguna); }
.article-body .pf-related ul { list-style: none; margin: 0; padding: 0; }
.article-body .pf-related li { margin: 0; border-bottom: 1px solid var(--surface-line); }
.article-body .pf-related li:last-child { border-bottom: none; }
.article-body .pf-related li a {
display: flex; align-items: center; gap: 10px; padding: 11px 0;
font-weight: 500; text-decoration: none !important;
}
.article-body .pf-related li a::after { content: "→"; margin-left: auto; color: var(--text-muted); }
/* ---- Key takeaways summary box (authors add class="pf-takeaways") ---- */
.article-body .pf-takeaways {
background: linear-gradient(135deg, rgba(41,219,194,.13), rgba(41,219,194,.03));
border: 1px solid rgba(41,219,194,.28);
border-radius: var(--r-lg) 6px var(--r-lg) 6px;
padding: 22px 26px; margin: 26px 0;
}
.article-body .pf-takeaways > h4 {
display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
color: var(--laguna); font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
}
.article-body .pf-takeaways > h4::before { content: ""; width: 15px; height: 15px; border-radius: 0 50% 0 50%; background: var(--laguna); }
.article-body .pf-takeaways ul { list-style: none; margin: 0; padding: 0; }
.article-body .pf-takeaways li { position: relative; padding: 7px 0 7px 30px; margin: 0; color: var(--text-soft); line-height: 1.55; }
.article-body .pf-takeaways li::before { content: "✓"; position: absolute; left: 3px; top: 7px; color: var(--laguna); font-weight: 700; }
/* ---- Responsive video embed (authors add class="pf-video") ---- */
.article-body .pf-video {
position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 24px 0;
border-radius: var(--r-md); overflow: hidden;
background: var(--carbon-2); border: 1px solid var(--surface-line);
}
.article-body .pf-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* placeholder look when no iframe present (e.g., in the style guide) */
.article-body .pf-video .pf-video-ph {
position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-muted);
}
.article-body .pf-video .pf-video-ph::before {
content: ""; width: 64px; height: 64px; border-radius: 50%;
background: var(--laguna); opacity: .9;
-webkit-mask: no-repeat center / 22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
mask: no-repeat center / 22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
}
/* ---- Contact / CTA block (authors add class="pf-cta") ---- */
.article-body .pf-cta {
display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
background: linear-gradient(135deg, var(--carbon), var(--carbon-2));
border-radius: var(--r-lg) 8px var(--r-lg) 8px;
padding: 24px 28px; margin: 28px 0;
}
.article-body .pf-cta .pf-cta-text strong { display: block; color: var(--text); font-size: 1.1rem; margin-bottom: 2px; }
.article-body .pf-cta .pf-cta-text span { color: var(--text-soft); font-size: .95rem; }
.article-body .pf-cta .pf-cta-btn {
flex-shrink: 0; background: var(--laguna); color: var(--carbon) !important;
font-weight: 700; padding: 12px 26px; border-radius: var(--r-pill);
text-decoration: none !important; white-space: nowrap;
}
.article-body .pf-cta .pf-cta-btn:hover { background: var(--laguna-50); }
/* ---- "On this page" table of contents (auto-generated) ---- */
.toc-card .toc-title {
font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
color: var(--text-muted); font-weight: 600; margin-bottom: 10px;
}
.toc-list { list-style: none; margin: 0; padding: 0; }
.toc-list a {
display: block; padding: 6px 0 6px 14px; border-left: 2px solid var(--surface-line);
color: var(--text-soft); font-size: .9rem; line-height: 1.45;
transition: color .15s var(--ease), border-color .15s var(--ease);
}
.toc-list a:hover { color: var(--text); }
.toc-list a.active { color: var(--laguna); border-left-color: var(--laguna); font-weight: 600; }
.toc-list .toc-h3, .toc-list .toc-h4 { padding-left: 26px; font-size: .85rem; }
/* mobile collapsible "On this page" (hidden on desktop, shown ≤900px) */
.toc-mobile { display: none; margin: 0 0 24px; background: var(--surface-1); border: 1px solid var(--surface-line); border-radius: var(--r-md); overflow: hidden; }
.toc-mobile > summary {
list-style: none; cursor: pointer; padding: 14px 18px;
display: flex; align-items: center; gap: 10px;
font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--laguna);
}
.toc-mobile > summary::-webkit-details-marker { display: none; }
.toc-mobile > summary::before { content: ""; width: 15px; height: 15px; border-radius: 0 50% 0 50%; background: var(--laguna); }
.toc-mobile > summary::after { content: "⌄"; margin-left: auto; font-size: 16px; color: var(--text-muted); transition: transform .25s var(--ease); }
.toc-mobile[open] > summary::after { transform: rotate(180deg); }
.toc-mobile .toc-list { padding: 0 18px 14px; }
/* =============================== Responsive ============================ */
@media (max-width: 900px) {
.nav-links { display: none; }
.cat-grid { grid-template-columns: 1fr; }
/* #3 — topics first, category list below, on mobile */
.cat-layout { display: flex; flex-direction: column; gap: 24px; }
/* category cross-nav -> horizontal scrolling pill row at the TOP on mobile */
.cat-layout { min-width: 0; }
.cat-layout > aside.side-nav { order: -1; }
.side-nav {
position: static;
display: flex; gap: 8px;
width: 100%; min-width: 0; max-width: 100%;
overflow-x: auto;
padding: 2px 0 8px;
background: none;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.side-nav::-webkit-scrollbar { display: none; }
.side-nav a {
flex: 0 0 auto;
white-space: nowrap;
padding: 8px 14px;
border: 1px solid var(--surface-line);
border-radius: var(--r-pill);
background: var(--surface-1);
}
.side-nav a.active {
border: 1px solid rgba(41,219,194,.4);
background: rgba(41,219,194,.12);
color: var(--laguna);
}
.article-wrap { grid-template-columns: 1fr; }
.article-side { position: static; }
.feature-article { grid-template-columns: 1fr; }
.cta-band { flex-direction: column; align-items: flex-start; text-align: left; }
/* #2 — show collapsible TOC at top, hide the sidebar copy */
.toc-card { display: none; }
.toc-mobile { display: block; }
}
@media (max-width: 560px) {
.nav-right .nav-login { display: none; }
.footer-row { flex-direction: column; align-items: flex-start; }
.search input { padding-right: 56px; }
.search-btn { padding: 11px; }
.search-btn .label { display: none; }
}
/* ===== Color-coded icons — placed last to win specificity over =====
both .cat-card .icon and .article-row .icon (each 0,2,0). */
.icon.icon--laguna { background: rgba(41,219,194,.14); color: var(--laguna); }
.icon.icon--blue { background: rgba(96,176,251,.14); color: var(--blue-jeans); }
.icon.icon--charge { background: rgba(247,156,55,.16); color: var(--charge); }
.icon.icon--breeze { background: rgba(242,125,98,.16); color: var(--breeze); }
/* ===== Live-chat preview (prototype stand-in for Zendesk Messaging) ===== */
.pf-chat {
position: fixed; bottom: 24px; right: 24px; z-index: 200;
width: 348px; max-width: calc(100vw - 32px);
background: var(--surface-2); border: 1px solid var(--surface-line);
border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow);
display: flex; flex-direction: column; font-size: 14px;
animation: pfChatIn .25s var(--ease);
}
@keyframes pfChatIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.pf-chat-head {
background: linear-gradient(135deg, var(--carbon), var(--carbon-2));
padding: 16px 18px; display: flex; align-items: center; gap: 11px;
}
.pf-chat-head .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--laguna); box-shadow: 0 0 0 3px rgba(41,219,194,.2); }
.pf-chat-head strong { font-size: 15px; color: var(--text); }
.pf-chat-head .sub { color: var(--text-muted); font-size: 12px; }
.pf-chat-close { margin-left: auto; background: none; border: none; color: var(--text-soft); cursor: pointer; font-size: 20px; line-height: 1; }
.pf-chat-close:hover { color: var(--text); }
.pf-chat-body { padding: 18px; background: var(--surface-1); }
.pf-chat-msg { background: var(--surface-3); padding: 11px 15px; border-radius: 14px 14px 14px 4px; color: var(--text-soft); max-width: 88%; line-height: 1.5; }
.pf-chat-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--surface-line); }
.pf-chat-input input { flex: 1; background: var(--surface-3); border: none; border-radius: var(--r-pill); padding: 10px 15px; color: var(--text); font-family: inherit; }
.pf-chat-input input:focus { outline: none; box-shadow: 0 0 0 2px rgba(41,219,194,.4); }
.pf-chat-note { text-align: center; font-size: 11px; color: var(--text-muted); padding: 9px; background: var(--surface-1); border-top: 1px solid var(--surface-line); }
/* ===== "Internal" badge — staff-only / restricted content indicator =====
Maps to Hudson's {{#if article.internal}}. Charge-toned so it stands out
from the all-Laguna public UI without alarming. */
.pf-internal {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
color: var(--charge); background: rgba(247,156,55,.14);
border: 1px solid rgba(247,156,55,.32); border-radius: var(--r-pill);
padding: 3px 10px 3px 8px; line-height: 1.4; white-space: nowrap; vertical-align: middle;
}
.pf-internal svg { width: 11px; height: 11px; }
/* compact lock-only variant for tight spots */
.pf-internal--icon { padding: 4px; gap: 0; }
.pf-internal--icon .pf-internal-label { display: none; }
/* tint a restricted row/card so it reads as "different" at a glance */
.acc-articles a.is-internal { background: rgba(247,156,55,.05); }
.acc-articles a.is-internal::before { background: var(--charge); opacity: .8; }
.cat-card.is-internal, .acc-item.is-internal-section {
border: 1px solid rgba(247,156,55,.3);
background: linear-gradient(180deg, rgba(247,156,55,.04), transparent 60%), var(--surface-1);
}
/* =========================================================================
ZENDESK INTEGRATION LAYER
Glue between our design system and Zendesk's Curlybars-rendered elements
(search widget, forms, vote, comments, pagination, dropdowns, etc.)
========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; }
/* --- Search widget ({{search}}) wrapped in our .search container --- */
.search form { margin: 0; }
.search input[type="search"], .search input.search-input, .search #query {
width: 100%; font-family: inherit; font-size: 16px; color: var(--text);
background: var(--surface-2); border: 1px solid var(--surface-line);
border-radius: var(--r-pill); padding: 18px 150px 18px 54px;
}
.search input[type="search"]::placeholder { color: var(--text-muted); }
.search input[type="search"]:focus { outline: none; border-color: rgba(41,219,194,.5); box-shadow: 0 0 0 4px rgba(41,219,194,.12); }
/* instant-search results dropdown */
.search-results-dropdown, .instant-search__results {
background: var(--surface-2); border: 1px solid var(--surface-line);
border-radius: var(--r-md); margin-top: 8px; overflow: hidden;
}
.search-results-dropdown a, .instant-search__results a { color: var(--text-soft); padding: 12px 16px; display:block; }
.search-results-dropdown a:hover, .instant-search__results a:hover { background: rgba(255,255,255,.05); color: var(--text); }
/* --- Generic forms (request, profile, comment) — functional baseline --- */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="url"], input[type="tel"], textarea, select {
background: var(--surface-2); color: var(--text);
border: 1px solid var(--surface-line); border-radius: var(--r-sm);
padding: 12px 14px; font-family: inherit; font-size: 15px; width: 100%;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: rgba(41,219,194,.5); box-shadow: 0 0 0 3px rgba(41,219,194,.12); }
label, .form-field label { color: var(--text); font-weight: 500; display: block; margin-bottom: 6px; }
.form-field { margin-bottom: 18px; }
::placeholder { color: var(--text-muted); }
/* Zendesk button helper outputs (map to our pill style) */
.button, button.button, input[type="submit"], .submit, [type="submit"] {
background: var(--laguna); color: var(--on-laguna); border: none;
border-radius: var(--r-pill); padding: 12px 26px; font-weight: 600;
font-family: inherit; cursor: pointer;
}
.button:hover, input[type="submit"]:hover { filter: brightness(1.05); }
.button-secondary, .button.secondary { background: rgba(255,255,255,.06); color: var(--text); border: 1px solid var(--surface-line); }
/* --- Article vote --- */
.article-votes, .vote { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.article-vote-label, .vote-label { color: var(--text-soft); }
.button-group .button, .vote .button {
background: rgba(255,255,255,.06) !important; color: var(--text) !important; border: 1px solid var(--surface-line) !important;
}
.button-group .button:hover { background: rgba(41,219,194,.12) !important; color: var(--laguna) !important; }
/* --- Comments --- */
.comment, .comment-list > li { border-top: 1px solid var(--surface-line); padding: 22px 0; }
.comment-author, .comment .author { color: var(--text); font-weight: 600; }
.comment-meta, .comment .meta, .meta-data { color: var(--text-muted); font-size: 13px; }
.comment-body { color: var(--text-soft); }
.comment-avatar img, .avatar img, .user-avatar { border-radius: 50%; }
.comment-form, .comments { margin-top: 24px; }
/* --- Pagination --- */
.pagination { display: flex; gap: 6px; justify-content: center; margin: 32px 0; list-style: none; padding: 0; flex-wrap: wrap; }
.pagination a, .pagination span, .pagination .current {
display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px;
padding: 0 10px; border-radius: var(--r-sm); color: var(--text-soft); background: var(--surface-1); text-decoration: none;
}
.pagination a:hover { background: var(--surface-3); color: var(--text); }
.pagination .current, .pagination [aria-current="page"] { background: var(--laguna); color: var(--on-laguna); font-weight: 700; }
/* --- Header user menu / dropdowns --- */
.dropdown-menu, .menu, [role="menu"] {
background: var(--surface-2); border: 1px solid var(--surface-line); border-radius: var(--r-md); padding: 6px; box-shadow: var(--shadow);
}
.dropdown-menu a, [role="menu"] a, [role="menuitem"] { color: var(--text-soft); padding: 9px 14px; display: block; border-radius: var(--r-sm); }
.dropdown-menu a:hover, [role="menu"] a:hover { background: rgba(255,255,255,.05); color: var(--text); }
/* --- Notifications / system messages --- */
.notification, .alert, .notice {
background: var(--surface-1); border: 1px solid var(--surface-line); border-left: 3px solid var(--laguna);
border-radius: var(--r-sm); padding: 14px 18px; color: var(--text-soft); margin: 16px 0;
}
.notification-error, .alert-error { border-left-color: var(--breeze); }
/* generic tables outside article body */
table { border-collapse: collapse; width: 100%; }
.table th, .table td { padding: 11px 14px; border-bottom: 1px solid var(--surface-line); text-align: left; color: var(--text-soft); }
.table th { color: var(--text); }
/* skip-link + a11y */
.skip-navigation { position: absolute; left: -9999px; }
.skip-navigation:focus { left: 16px; top: 16px; background: var(--laguna); color: var(--on-laguna); padding: 10px 16px; border-radius: var(--r-sm); z-index: 100; }
/* hero search wraps the Zendesk {{search}} helper (no custom button) */
.hero .search { position: relative; max-width: 680px; margin: 28px auto 0; box-shadow: 0 18px 50px rgba(0,0,0,.4); border-radius: var(--r-pill); }
.hero .search form { margin: 0; }
.hero .search input[type="search"] { padding: 18px 24px 18px 56px; }
.hero .search .search-icon { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); color: var(--laguna); z-index: 2; width: 20px; height: 20px; }
/* ---- Home: category tiles + promoted cards (rebuild) ---- */
@media (min-width: 900px){ .cat-grid { grid-template-columns: repeat(3,1fr); } }
.cat-card__icon { display:block; width:48px; height:48px; border-radius:0 50% 0 50%; background:rgba(41,219,194,.15); position:relative; margin-bottom:16px; }
.cat-card__icon::after { content:""; position:absolute; inset:15px; border-radius:0 50% 0 50%; background:var(--laguna); }
.cat-card__more { color:var(--laguna); font-weight:600; font-size:.9rem; }
.cat-card:nth-child(6n+2) .cat-card__icon { background:rgba(96,176,251,.15); } .cat-card:nth-child(6n+2) .cat-card__icon::after { background:var(--blue-jeans); }
.cat-card:nth-child(6n+3) .cat-card__icon { background:rgba(247,156,55,.16); } .cat-card:nth-child(6n+3) .cat-card__icon::after { background:var(--charge); }
.cat-card:nth-child(6n+4) .cat-card__icon { background:rgba(242,125,98,.16); } .cat-card:nth-child(6n+4) .cat-card__icon::after { background:var(--breeze); }
.cat-card:nth-child(6n+5) .cat-card__icon { background:rgba(255,200,235,.18); } .cat-card:nth-child(6n+5) .cat-card__icon::after { background:var(--bubble); }
.promoted-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:900px){ .promoted-grid { grid-template-columns:1fr; } }
.promoted-card { display:block; background:var(--surface-2); border:1px solid var(--surface-line); border-radius:var(--r-lg) 8px var(--r-lg) 8px; padding:24px; transition:background .2s var(--ease), transform .2s var(--ease); }
.promoted-card:hover { background:var(--surface-3); transform:translateY(-3px); }
.promoted-card__date { color:var(--text-muted); font-size:13px; }
.promoted-card h3 { color:var(--text); font-size:1.1rem; font-weight:700; margin:8px 0; }
.promoted-card p { color:var(--text-soft); font-size:.9rem; margin:0; }
/* hero title accent word (wrapped by script.js) */
.hero .hero-title .accent { color: var(--laguna); }
/* mobile nav (rebuild) */
.menu-list-mobile { display:none; }
.menu-button-mobile { display:none; background:none; border:none; color:var(--text); cursor:pointer; padding:6px; }
@media (max-width: 900px){
.nav-links { display:none; }
.menu-button-mobile { display:inline-flex; }
.menu-list-mobile.is-open { display:block; background:var(--surface-1); border-top:1px solid var(--surface-line); }
.menu-list-mobile ul { list-style:none; margin:0; padding:12px 24px; }
.menu-list-mobile li { padding:10px 0; }
.menu-list-mobile .nav-divider { border-top:1px solid var(--surface-line); padding:0; margin:6px 0; }
}
.promoted-card__icon { display:block; width:40px; height:40px; border-radius:0 50% 0 50%; background:rgba(41,219,194,.15); position:relative; margin-bottom:14px; }
.promoted-card__icon::after { content:""; position:absolute; inset:12px; border-radius:0 50% 0 50%; background:var(--laguna); }
/* ===== Preview fixes (round 1) ===== */
/* hide screen-reader-only headings (was showing "PatientFi"/"Search" text) */
.visibility-hidden, .visually-hidden, .sr-only {
position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* user dropdown menu: hidden until opened (Copenhagen JS toggles aria-expanded) */
.dropdown-menu { display:none; position:absolute; right:0; top:calc(100% + 8px); min-width:200px; z-index:60; }
.dropdown-menu[aria-expanded="true"],
.dropdown-toggle[aria-expanded="true"] + .dropdown-menu { display:block; }
.user-info.dropdown { position:relative; }
.dropdown-toggle { background:none; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.dropdown .separator { height:1px; background:var(--surface-line); margin:6px 0; }
/* search field: icon + clear 'X' + green Search button alignment */
.hero .search { display:flex; align-items:center; }
.hero .search form[role="search"] { position:relative; flex:1; margin:0; }
.hero .search input[type="search"] { -webkit-appearance:none; appearance:none; height:60px; padding:0 132px 0 56px; }
/* Copenhagen injects a .clear-button into the form; show only when typing, sit left of the green button */
.hero .search .clear-button { position:absolute; right:108px; top:50%; transform:translateY(-50%); display:none; background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:18px; line-height:1; padding:6px; }
.hero .search form[role="search"].search-has-value .clear-button { display:inline-flex; }
/* green Search submit button overlaid at the right of the field */
.hero .search .search-go {
position:absolute; right:8px; top:50%; transform:translateY(-50%); z-index:3;
display:inline-flex; align-items:center; gap:7px;
background:var(--laguna); color:var(--on-laguna); border:none; cursor:pointer;
font-family:inherit; font-weight:600; font-size:15px; padding:11px 20px; border-radius:var(--r-pill);
}
.hero .search .search-go:hover { background:var(--laguna-50); }
/* content-aware category icons (JS-injected SVG) */
.cat-card__icon { display:grid; place-items:center; color:var(--laguna); }
.cat-card__icon.has-icon::after { display:none; }
.cat-card__icon svg { width:26px; height:26px; }
.cat-card:nth-child(6n+2) .cat-card__icon { color:var(--blue-jeans); }
.cat-card:nth-child(6n+3) .cat-card__icon { color:var(--charge); }
.cat-card:nth-child(6n+4) .cat-card__icon { color:var(--breeze); }
.cat-card:nth-child(6n+5) .cat-card__icon { color:var(--bubble); }
/* logged-in user avatar in header (was rendering full size) */
.user-avatar, .nav-login .user-avatar, .dropdown-toggle .user-avatar { width:32px !important; height:32px !important; border-radius:50%; object-fit:cover; flex-shrink:0; }
.menu-profile-avatar { width:36px; height:36px; border-radius:50%; object-fit:cover; }
/* ===== Category/section page fixes ===== */
/* breadcrumbs: kill the numbers, use chevron separators */
.breadcrumbs { list-style:none !important; display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:24px 0 10px; padding:0; font-size:14px; font-weight:500; }
.breadcrumbs li { display:flex; align-items:center; gap:9px; color:var(--text-soft); }
.breadcrumbs li::before { content:"\203A"; color:var(--text-muted); font-weight:600; }
.breadcrumbs li:first-child::before { content:none; }
.breadcrumbs a { color:var(--text-soft); }
.breadcrumbs a:hover { color:var(--laguna); text-decoration:underline; text-underline-offset:3px; }
.breadcrumbs li:last-child, .breadcrumbs li:last-child a { color:var(--text); font-weight:600; }
/* "See all N articles" link */
.acc-more-link { display:inline-block; margin:2px 0 14px 32px; color:var(--laguna); font-weight:600; font-size:14px; text-decoration:none; }
.acc-more-link:hover { text-decoration:underline; }
/* section accordion icons (content-aware, JS-injected) + color cycle */
.acc-icon { display:grid; place-items:center; color:var(--laguna); }
.acc-icon svg { width:22px; height:22px; }
.acc-icon.has-icon::after { display:none; }
.acc-item:nth-child(6n+2) .acc-icon { color:var(--blue-jeans); background:rgba(96,176,251,.12); }
.acc-item:nth-child(6n+3) .acc-icon { color:var(--charge); background:rgba(247,156,55,.13); }
.acc-item:nth-child(6n+4) .acc-icon { color:var(--breeze); background:rgba(242,125,98,.13); }
.acc-item:nth-child(6n+5) .acc-icon { color:var(--bubble); background:rgba(255,200,235,.15); }
/* category layout: content column stacks accordion + CTA; graceful no-sidebar */
.cat-content { min-width:0; }
.cat-layout.no-sidenav { grid-template-columns:1fr; }
/* ===== Article page ===== */
.article-title { font-size:clamp(2rem,4vw,2.7rem); font-weight:700; line-height:1.12; margin:6px 0 4px; }
.article-title .icon-lock { display:none; }
.article-meta { display:flex; align-items:center; gap:12px; color:var(--text-muted); font-size:13px; margin:10px 0 28px; flex-wrap:wrap; }
.article-meta .avatar { display:inline-flex; }
.article-meta a { color:var(--text-soft); }
.article-meta .dot { opacity:.5; }
.article-subscribe .button, .article-subscribe button { background:rgba(255,255,255,.06)!important; color:var(--text)!important; border:1px solid var(--surface-line)!important; border-radius:var(--r-pill)!important; padding:7px 16px!important; font-size:13px!important; }
.article-votes { margin:36px 0; padding:24px; background:var(--surface-1); border-radius:var(--r-lg) 8px var(--r-lg) 8px; }
.article-votes-question { font-size:1.05rem; margin:0 0 12px; }
.article-votes-controls { display:inline-flex; gap:10px; }
.article-vote { background:rgba(255,255,255,.06)!important; color:var(--text)!important; border:1px solid var(--surface-line)!important; }
.article-vote.button-primary { background:var(--laguna)!important; color:var(--on-laguna)!important; border-color:var(--laguna)!important; }
.article-votes-count { display:block; margin-top:10px; color:var(--text-muted); }
.side-articles { list-style:none; margin:0; padding:0; }
.side-articles li { border-bottom:1px solid var(--surface-line); }
.side-articles li:last-child { border-bottom:none; }
.side-articles a { display:block; padding:10px 0; color:var(--text-soft); font-size:.92rem; }
.side-articles a:hover { color:var(--laguna); }
.side-articles a.is-current { color:var(--laguna); font-weight:600; }
.article-relatives { margin:32px 0; }
.article-relatives h3 { font-size:1.1rem; color:var(--text); }
.article-relatives ul { list-style:none; padding:0; margin:0; }
.article-relatives li a { display:block; padding:10px 0; color:var(--text-soft); border-bottom:1px solid var(--surface-line); }
.article-relatives li a:hover { color:var(--laguna); }
.comment-heading { font-size:1.4rem; }
.comment-author-name a { color:var(--text); font-weight:600; }
.comment-overview { display:flex; align-items:baseline; gap:14px; margin:32px 0 16px; }
.comment-form { margin-top:24px; }
.comment-container { margin-top:12px; }
/* ===== Article page fixes (round 2) ===== */
/* 1. "Was this helpful" — align in a row + thumbs on Yes/No */
.article-votes { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.article-votes-question { margin:0; }
.article-votes-controls { display:inline-flex; gap:10px; }
.article-votes-count { margin:0; }
.article-vote-up::before { content:"\1F44D"; margin-right:7px; }
.article-vote-down::before { content:"\1F44E"; margin-right:7px; }
/* 2. Related articles — branded list with leaf bullets */
.article-relatives { margin:40px 0; }
.article-relatives h2, .article-relatives h3, .related-articles h3, .recent-articles h3 { font-size:1.3rem; font-weight:700; color:var(--text); margin:0 0 8px; letter-spacing:-.01em; }
.article-relatives ul, .related-articles ul, .recent-articles ul { list-style:none; padding:0; margin:0; }
.article-relatives li, .related-articles li, .recent-articles li { border-bottom:1px solid var(--surface-line); }
.article-relatives li:last-child { border-bottom:none; }
.article-relatives li a, .related-articles li a, .recent-articles li a { display:flex; align-items:center; gap:12px; padding:14px 2px; color:var(--text-soft); font-weight:500; }
.article-relatives li a::before, .related-articles li a::before, .recent-articles li a::before { content:""; width:14px; height:14px; flex-shrink:0; border-radius:0 50% 0 50%; background:var(--laguna); opacity:.55; }
.article-relatives li a:hover, .related-articles li a:hover { color:var(--text); }
.article-relatives li a:hover::before { opacity:1; }
/* 3. Comment editor — brand the TinyMCE chrome, stabilize layout, no overlap */
.comment-form { display:flex; gap:14px; align-items:flex-start; margin-top:24px; }
.comment-form .comment-container { flex:1; min-width:0; }
.comment-form textarea { min-height:150px; background:var(--surface-2); border-radius:var(--r-md); }
.comment-form .tox-tinymce { border:1px solid var(--surface-line) !important; border-radius:var(--r-md) !important; overflow:hidden; min-height:170px; }
.comment-form .tox .tox-editor-header, .comment-form .tox .tox-toolbar, .comment-form .tox .tox-toolbar__primary, .comment-form .tox .tox-toolbar-overlord { background:var(--surface-2) !important; border:0 !important; box-shadow:none !important; }
.comment-form .tox .tox-tbtn { color:var(--text) !important; }
.comment-form .tox .tox-tbtn svg { fill:var(--text-soft) !important; }
.comment-form .tox .tox-tbtn:hover { background:rgba(255,255,255,.08) !important; }
.comment-form .comment-form-controls { clear:both; margin-top:16px; }
.comment-form-controls .button { background:var(--laguna); color:var(--on-laguna); }
/* collapsed comment box: slim placeholder until focused */
.pf-comment-placeholder { display:none; flex:1; text-align:left; background:var(--surface-2); border:1px solid var(--surface-line); color:var(--text-muted); border-radius:var(--r-pill); padding:14px 22px; cursor:text; font-family:inherit; font-size:15px; }
.pf-comment-placeholder:hover { border-color:rgba(41,219,194,.4); color:var(--text-soft); }
.pf-comment-collapsed .pf-comment-placeholder { display:block; }
.pf-comment-collapsed .comment-container { display:none; }
/* ===== Article body as a lifted reading panel ===== */
:root { --article-surface:#3A4B5A; }
.article-body {
background: var(--article-surface);
border-radius: var(--r-lg);
padding: 40px 44px;
box-shadow: 0 16px 44px rgba(0,0,0,.28);
}
.article-body > *:first-child { margin-top: 0; }
.article-body > *:last-child { margin-bottom: 0; }
/* code blocks sit darker than the panel for contrast */
.article-body pre { background: var(--bg); }
@media (max-width: 700px) { .article-body { padding: 24px 22px; } }
/* section page article list panel */
.section-panel { background:var(--surface-1); border:1px solid var(--surface-line); border-radius:var(--r-lg) 8px var(--r-lg) 8px; padding:10px 16px; margin-bottom:16px; }
.section-panel .acc-articles { padding:6px 0; }
.section-follow { display:inline-block; margin:10px 0 0; }
/* ===== Search results page ===== */
.search-results { display:grid; grid-template-columns:240px 1fr; gap:40px; align-items:start; margin-top:8px; }
@media (max-width:900px){ .search-results { grid-template-columns:1fr; } }
.search-results-sidebar { background:var(--surface-1); border:1px solid var(--surface-line); border-radius:var(--r-md); padding:16px; }
.collapsible-sidebar-title, .sidenav-title { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); font-weight:700; margin:6px 0 8px; }
.sidenav-item { display:flex; justify-content:space-between; gap:8px; padding:8px 10px; border-radius:var(--r-sm); color:var(--text-soft); }
.sidenav-item:hover { background:rgba(255,255,255,.04); color:var(--text); }
.sidenav-item.current { color:var(--laguna); background:rgba(41,219,194,.1); }
.doc-count { color:var(--text-muted); }
.search-results-column { min-width:0; }
.search-results-subheading { font-size:1.5rem; font-weight:700; margin:0 0 20px; }
.search-results-list { list-style:none; padding:0; margin:0; }
.search-results-list > li { margin:0 0 16px; }
.search-results-list article { background:var(--surface-2); border:1px solid var(--surface-line); border-radius:var(--r-lg) 8px var(--r-lg) 8px; padding:22px 26px; transition:background .2s var(--ease); }
.search-results-list article:hover { background:var(--surface-3); }
.search-result-title { font-size:1.15rem; margin:0 0 4px; font-weight:700; }
.search-result-title a { color:var(--text); }
.search-result-title a:hover { color:var(--laguna); }
.search-result-body { color:var(--text-soft); font-size:.95rem; margin:6px 0; }
.search-result-meta-container { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:8px; }
.search-result-icons { display:inline-flex; gap:14px; color:var(--text-muted); }
.search-results-subheading + *, .search-no-results, .no-results { color:var(--text-soft); }
/* search box on the results page (kept here — needed) */
.sub-nav { margin-top:8px; }
.sub-nav .search-container { position:relative; display:flex; align-items:center; margin:14px 0 26px; max-width:640px; }
.sub-nav .search-container form[role="search"] { flex:1; margin:0; position:relative; }
.sub-nav .search-container input[type="search"] { background:var(--surface-2)!important; border:1px solid var(--surface-line)!important; border-radius:var(--r-pill)!important; color:var(--text)!important; padding:15px 132px 15px 50px!important; width:100%; }
.sub-nav .search-container input[type="search"]:focus { border-color:rgba(41,219,194,.5)!important; box-shadow:0 0 0 4px rgba(41,219,194,.12); outline:none; }
.sub-nav .search-container .search-icon { position:absolute; left:18px; top:50%; transform:translateY(-50%); color:var(--laguna); width:20px; height:20px; z-index:2; pointer-events:none; }
/* green Search submit button overlaid at the right (mirrors the hero) */
.sub-nav .search-container .search-go {
position:absolute; right:6px; top:50%; transform:translateY(-50%); z-index:3;
display:inline-flex; align-items:center; gap:7px;
background:var(--laguna); color:var(--on-laguna); border:none; cursor:pointer;
font-family:inherit; font-weight:600; font-size:14px; padding:10px 18px; border-radius:var(--r-pill);
}
.sub-nav .search-container .search-go:hover { background:var(--laguna-50); }
/* clear 'x' sits just left of the green button when typing */
.sub-nav .search-container .clear-button { right:110px; }
/* ===== Search page polish ===== */
/* search box: align icon, clear 'x' inside-right and only when typing */
form[role="search"] { position:relative; margin:0; }
.clear-button { position:absolute; right:14px; top:50%; transform:translateY(-50%); display:none; background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:0; line-height:1; padding:6px; }
.clear-button::before { content:"\00D7"; font-size:20px; }
form[role="search"].search-has-value .clear-button { display:inline-flex; }
.sub-nav .search-container input[type="search"] { padding-right:46px !important; }
/* filters sidebar */
.multibrand-filter-list, .search-results-sidebar ul { list-style:none !important; padding:0 !important; margin:0 0 8px; }
.collapsible-sidebar-toggle { display:none !important; } /* expand/collapse toggles not needed; filters always shown */
.filters-in-section { margin-bottom:18px; }
.see-all-filters { background:none; border:none; color:var(--laguna); font-weight:600; font-size:13px; cursor:pointer; padding:8px 10px; }
.see-all-filters:hover { text-decoration:underline; }
.sidenav-item { align-items:center; }
.sidenav-subitem.filter-name { flex:1; }
.content-tag .label { color:var(--text); }
/* result cards: leaf icon + tidy meta */
.search-result-title { display:flex; align-items:flex-start; gap:11px; }
.search-result-title::before { content:""; flex-shrink:0; width:16px; height:16px; margin-top:5px; border-radius:0 50% 0 50%; background:var(--laguna); opacity:.6; }
.search-result-title-container { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.search-result-meta-container { color:var(--text-muted); font-size:13px; }
.search-result-meta-container .meta-data { color:var(--text-muted); }
.search-results-list .breadcrumbs.search-result-breadcrumbs { margin:0; }
.search-result-breadcrumbs li:last-child, .search-result-breadcrumbs li:last-child a { color:var(--text-soft); font-weight:500; }
/* ===== Quick Answer (Zendesk generative_answers) — branded facelift ===== */
.pf-quick-answer { margin:0 0 28px; }
.pf-quick-answer > * {
background:linear-gradient(135deg, rgba(41,219,194,.10), rgba(41,219,194,.02)) !important;
border:1px solid rgba(41,219,194,.28) !important;
border-radius:var(--r-lg) 8px var(--r-lg) 8px !important;
}
.pf-quick-answer, .pf-quick-answer p, .pf-quick-answer li, .pf-quick-answer span { color:var(--text-soft); }
.pf-quick-answer h1, .pf-quick-answer h2, .pf-quick-answer h3, .pf-quick-answer strong { color:var(--text); }
.pf-quick-answer a { color:var(--laguna) !important; }
.pf-quick-answer a:hover { color:var(--laguna-50) !important; }
.pf-quick-answer button, .pf-quick-answer [role="button"] { color:var(--text-soft); }
.pf-quick-answer svg { fill:currentColor; }
/* ===== Search page fixes (round 2) ===== */
/* 1. one clear control only — hide the injected/custom ones, keep native blue-on-hover */
.clear-button { display:none !important; }
.clear-button::before { content:none !important; }
/* 2. Quick Answer: single branded frame (remove Zendesk's inner white frame; match its size) */
.pf-quick-answer { background:linear-gradient(135deg, rgba(41,219,194,.10), rgba(41,219,194,.02)); border:1px solid rgba(41,219,194,.30); border-radius:var(--r-lg) 8px var(--r-lg) 8px; margin:0 0 28px; overflow:hidden; }
.pf-quick-answer > * { background:transparent !important; border:none !important; box-shadow:none !important; border-radius:0 !important; }
.pf-quick-answer div, .pf-quick-answer section, .pf-quick-answer article { background:transparent !important; border-color:transparent !important; box-shadow:none !important; }
.pf-quick-answer, .pf-quick-answer p, .pf-quick-answer li, .pf-quick-answer span { color:var(--text-soft); }
.pf-quick-answer h1, .pf-quick-answer h2, .pf-quick-answer h3, .pf-quick-answer strong { color:var(--text); }
.pf-quick-answer a { color:var(--laguna) !important; }
.pf-quick-answer a:hover { color:var(--laguna-50) !important; }
/* 3. entire result card is clickable (JS adds cursor + handler) */
.search-results-list article { cursor:pointer; }
/* 4. pagination — one pill per control; inner spans/icons must NOT get their own border */
.pagination, .pagination ul, nav.pagination, nav.pagination ul { list-style:none !important; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:36px 0; justify-content:center; align-items:center; }
.pagination li { list-style:none !important; display:inline-flex; }
/* style only the clickable controls themselves */
.pagination > a, .pagination > span, .pagination > button,
.pagination li > a, .pagination li > span, .pagination li > button {
display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:44px; height:44px;
padding:0 18px; border-radius:var(--r-pill); background:var(--surface-2); border:1px solid var(--surface-line);
color:var(--text-soft); text-decoration:none; font-weight:600; box-sizing:border-box;
}
.pagination > a:hover, .pagination li > a:hover { background:var(--surface-3); color:var(--text); border-color:var(--laguna-50); }
.pagination .current, .pagination [aria-current="page"] { background:var(--laguna) !important; color:var(--on-laguna) !important; border-color:var(--laguna) !important; font-weight:700; }
/* disabled prev/first on page 1 */
.pagination [aria-disabled="true"], .pagination .is-disabled { opacity:.4; pointer-events:none; }
/* reset everything nested INSIDE a control so no double frames / boxes appear */
.pagination a *, .pagination span *, .pagination button * {
border:none !important; background:transparent !important; box-shadow:none !important;
padding:0 !important; margin:0 !important; min-width:0 !important; height:auto !important;
border-radius:0 !important; color:inherit !important; display:inline-flex; align-items:center;
}
/* ====================================================================== */
/* ACCOUNT & REQUESTS — functional pages (My Activities, request, profile) */
/* Lightly styled: on-brand, readable, usable. Reuses .btn/.form/comment */
/* styling already defined above. */
/* ====================================================================== */
/* --- shared page header / sub-nav for activity pages --- */
.my-activities-nav, .profile-nav { border-bottom:1px solid var(--surface-line); margin-bottom:28px; }
.my-activities-header { margin:24px 0 18px; }
.my-activities-header h1, .request-title { font-size:1.9rem; font-weight:800; color:var(--text); margin:0; }
.request-breadcrumbs { margin:14px 0 6px; }
/* collapsible nav (Activities / Following / Contributions tabs) — always shown, pill row */
.collapsible-nav-toggle { display:none !important; }
.collapsible-nav-list { list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0; }
.collapsible-nav-list li { list-style:none; }
.collapsible-nav-list a { display:inline-flex; align-items:center; padding:10px 18px; border-radius:var(--r-pill); color:var(--text-soft); font-weight:600; text-decoration:none; border:1px solid transparent; }
.collapsible-nav-list a:hover { color:var(--text); background:var(--surface-2); }
.collapsible-nav-list .current a, .collapsible-nav-list a[aria-current="page"] { color:var(--laguna); background:rgba(41,219,194,.1); }
/* --- tables (My Requests, Following) --- */
.table, .my-activities-table { width:100%; border-collapse:collapse; background:var(--surface-1); border:1px solid var(--surface-line); border-radius:var(--r-lg); overflow:hidden; }
.table thead th { text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); font-weight:700; padding:14px 18px; background:var(--surface-2); border-bottom:1px solid var(--surface-line); }
.table tbody td { padding:15px 18px; border-bottom:1px solid var(--surface-line); color:var(--text-soft); vertical-align:middle; }
.table tbody tr:last-child td { border-bottom:none; }
.table tbody tr:hover td { background:rgba(255,255,255,.02); }
.table a, .striped-list-title { color:var(--text); font-weight:600; text-decoration:none; }
.table a:hover, .striped-list-title:hover { color:var(--laguna); }
.subscriptions-subscribe { text-align:right; }
.no-activities, .no-activity, .private-activity { display:block; color:var(--text-soft); padding:40px 0; text-align:center; }
.private-activity-icon { color:var(--text-muted); margin-right:6px; }
/* status labels (open / pending / solved / answered …) */
.status-label { display:inline-flex; align-items:center; padding:4px 12px; border-radius:var(--r-pill); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; background:var(--surface-3); color:var(--text-soft); }
.status-label-new, .status-label-open { background:rgba(242,125,98,.16); color:#F9A892; }
.status-label-pending, .status-label-hold, .status-label-pending-moderation { background:rgba(247,156,55,.16); color:#F9B86A; }
.status-label-solved, .status-label-closed, .status-label-answered, .status-label-official { background:rgba(41,219,194,.16); color:var(--laguna); }
/* --- single request: two-column layout --- */
.request-container { display:grid; grid-template-columns:1fr 320px; gap:32px; align-items:start; margin-top:20px; }
@media (max-width:900px){ .request-container { grid-template-columns:1fr; } }
.request-main { min-width:0; }
.request-sidebar { background:var(--surface-1); border:1px solid var(--surface-line); border-radius:var(--r-lg); padding:22px 24px; }
.request-sidebar .collapsible-sidebar-title { font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); font-weight:700; margin:0 0 14px; }
.request-details { display:grid; grid-template-columns:auto 1fr; gap:8px 16px; margin:0 0 18px; }
.request-details dt { color:var(--text-muted); font-size:13px; }
.request-details dd { color:var(--text); font-size:14px; margin:0; text-align:right; }
.request-collaborators { list-style:none; padding:0; margin:0; }
/* request comments reuse comment-list styling; give each comment a card */
.request-main .comment-list { list-style:none; padding:0; margin:0 0 24px; display:flex; flex-direction:column; gap:16px; }
.request-main .comment { background:var(--surface-1); border:1px solid var(--surface-line); border-radius:var(--r-lg); padding:20px 22px; }
.comment-author { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.comment-avatar .user-avatar { width:36px; height:36px; border-radius:50%; }
.comment-meta span[title] { color:var(--text); font-weight:600; }
.comment-meta .meta-data, .meta-data { color:var(--text-muted); font-size:13px; }
.comment-body { color:var(--text-soft); line-height:1.7; }
.attachments { list-style:none; padding:0; margin:12px 0 0; }
.attachment-item { display:flex; align-items:center; gap:8px; padding:6px 0; color:var(--text-soft); font-size:14px; }
.attachment-item a { color:var(--laguna); text-decoration:none; }
.attachment-icon { color:var(--text-muted); flex-shrink:0; }
/* large/secondary buttons used in the request comment form */
.button-large { padding:12px 24px; font-size:15px; }
.button-secondary, .mark-as-solved { background:var(--surface-2); color:var(--text); border:1px solid var(--surface-line); border-radius:var(--r-pill); cursor:pointer; font-family:inherit; font-weight:600; padding:11px 22px; }
.button-secondary:hover, .mark-as-solved:hover { background:var(--surface-3); }
.comment-form-controls { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:14px; }
.comment-show-container { background:var(--surface-2); border:1px solid var(--surface-line); color:var(--text-soft); border-radius:var(--r-pill); padding:12px 20px; cursor:pointer; font-family:inherit; width:100%; text-align:left; }
.comment-show-container:hover { background:var(--surface-3); color:var(--text); }
.comment-fields.shown { margin-top:8px; }
/* submit-a-request form container */
#main-content.form, .form .form-field { max-width:720px; }
.form { color:var(--text-soft); }
/* --- user profile --- */
.profile-header { background:var(--surface-1); border-bottom:1px solid var(--surface-line); padding:40px 0 30px; margin-bottom:0; }
.profile-info { display:flex; flex-wrap:wrap; align-items:center; gap:20px; }
.profile-avatar .user-avatar { width:84px; height:84px; border-radius:50%; border:2px solid var(--surface-line); }
.basic-info { flex:1; min-width:200px; }
.basic-info .name { font-size:1.8rem; font-weight:800; color:var(--text); margin:0 0 6px; }
.basic-info .name a { color:var(--text); text-decoration:none; }
.community-badge-titles, .community-badge-achievements { list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:8px 0 0; }
.community-badge-title { background:rgba(41,219,194,.12); color:var(--laguna); padding:3px 12px; border-radius:var(--r-pill); font-size:12px; font-weight:700; }
.description { color:var(--text-soft); width:100%; margin:14px 0 0; }
.profile-private-badge { display:inline-flex; align-items:center; gap:6px; color:var(--text-muted); font-size:13px; }
.profile-stats { list-style:none; display:flex; flex-wrap:wrap; gap:28px; padding:0; margin:18px 0 0; }
.profile-stats .stat { display:flex; flex-direction:column; gap:2px; }
.stat-label { color:var(--text-muted); font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.stat-value { color:var(--text); font-weight:700; font-size:1.05rem; }
.profile-stats-counters { border-top:1px solid var(--surface-line); margin-top:24px; padding-top:20px; }
/* profile activity / contributions list */
.profile-section { padding:8px 0 40px; }
/* header lays out as: title on its own row, then description (left) + sort (right) */
.profile-section-header { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin:10px 0 20px; }
.profile-section-title { flex:1 1 100%; font-size:1.35rem; font-weight:800; color:var(--text); margin:0; text-transform:capitalize; }
.profile-section-description { color:var(--text-muted); font-size:14px; }
.profile-section-sorter { margin-left:auto; }
.profile-contribution-list, .profile-activity-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.profile-contribution, .profile-activity { background:var(--surface-1); border:1px solid var(--surface-line); border-radius:var(--r-lg); padding:18px 22px; display:grid; grid-template-columns:auto 1fr; gap:6px 14px; }
.profile-contribution-icon, .profile-activity-icon { color:var(--laguna); grid-row:span 2; align-self:start; padding-top:2px; }
.profile-contribution-title { font-size:1.05rem; margin:0; }
.profile-contribution-title a { color:var(--text); text-decoration:none; }
.profile-contribution-title a:hover { color:var(--laguna); }
.profile-contribution-body { color:var(--text-soft); margin:6px 0; grid-column:2; }
.profile-contribution-header { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.profile-contribution .meta-group, .profile-activity .meta-group { grid-column:2; display:flex; gap:14px; flex-wrap:wrap; }
.profile-contribution-breadcrumbs { grid-column:2; }
.profile-activity-header { display:flex; align-items:center; gap:10px; }
.profile-activity-header .user-avatar { width:28px; height:28px; border-radius:50%; }
/* profile badges grid */
.profile-badges-items { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.profile-badges-item { background:var(--surface-1); border:1px solid var(--surface-line); border-radius:var(--r-lg); padding:18px; display:flex; gap:14px; align-items:flex-start; }
.profile-badges-item-title { color:var(--text); font-weight:700; }
.profile-badges-item-description, .profile-badges-item-metadata-description { color:var(--text-muted); font-size:13px; }
.profile-badges-item-metadata-title { color:var(--text-soft); font-size:12px; text-transform:uppercase; margin-top:8px; }
/* following-filter dropdown header */
.my-activities-following-header { margin:0 0 16px; }
/* ====================================================================== */
/* ZENDESK ADMIN-PREVIEW CHROME FIX */
/* The theme-editor preview bar (Templates page-picker + Preview-role */
/* switcher) injects Garden v9 floating menus into the previewed document. */
/* They carry data-garden-id="dropdowns.menu.floating". Our dark theme */
/* bleeds dark text/background onto them -> unreadable. Our own UI never */
/* creates Garden floating menus, so forcing these back to a readable light */
/* surface is safe and does NOT change the published Help Center. */
/* (Also covers the older non-floating ids, just in case.) */
/* ====================================================================== */
[data-garden-id="dropdowns.menu.floating"],
[data-garden-id="dropdowns.menu"],
[data-garden-id^="dropdowns.menu"],
[data-garden-id^="menus."] {
background-color:#fff !important;
color:#2f3941 !important;
border:1px solid #d8dcde !important;
border-radius:8px !important;
box-shadow:0 8px 28px rgba(0,0,0,.22) !important;
}
/* every descendant: dark legible text, and clear any dark bg our theme set */
[data-garden-id="dropdowns.menu.floating"] *,
[data-garden-id^="dropdowns.menu"] *,
[data-garden-id^="menus."] * {
color:#2f3941 !important;
background-color:transparent !important;
border-color:#e9ebed !important;
}
/* the filter/search field inside the template-picker menu */
[data-garden-id="dropdowns.menu.floating"] input,
[data-garden-id^="dropdowns.menu"] input,
[data-garden-id^="menus."] input {
background-color:#fff !important;
color:#2f3941 !important;
border:1px solid #d8dcde !important;
box-shadow:none !important;
}
[data-garden-id="dropdowns.menu.floating"] input::placeholder,
[data-garden-id^="dropdowns.menu"] input::placeholder { color:#68737d !important; }
/* hovered / selected item stays light + legible */
[data-garden-id="dropdowns.menu.floating"] [aria-selected="true"],
[data-garden-id="dropdowns.menu.floating"] [role="option"]:hover,
[data-garden-id="dropdowns.menu.floating"] li:hover,
[data-garden-id^="dropdowns.menu"] [aria-selected="true"],
[data-garden-id^="dropdowns.menu"] [role="option"]:hover {
background-color:#edf7ff !important;
color:#1f73b7 !important;
}
[data-garden-id="dropdowns.menu.floating"] [aria-selected="true"] *,
[data-garden-id="dropdowns.menu.floating"] [role="option"]:hover * { color:#1f73b7 !important; }
/* Fallback: match Garden floating menus by their styled-component class names */
/* too (in case data-garden-id changes). Our theme never uses Styled* classes. */
[class*="StyledFloatingMenu"],
[class*="StyledFloatingListbox"],
[class*="StyledFloatingMenu"] [class*="StyledMenuItem"],
[class*="StyledFloatingListbox"] [class*="StyledItem"] {
background-color:#fff !important;
color:#2f3941 !important;
}
[class*="StyledFloatingMenu"], [class*="StyledFloatingListbox"] {
border:1px solid #d8dcde !important;
border-radius:8px !important;
box-shadow:0 8px 28px rgba(0,0,0,.22) !important;
}
[class*="StyledFloatingMenu"] *,
[class*="StyledFloatingListbox"] * {
color:#2f3941 !important;
background-color:transparent !important;
}
[class*="StyledFloatingMenu"] input,
[class*="StyledFloatingListbox"] input {
background-color:#fff !important; color:#2f3941 !important; border:1px solid #d8dcde !important;
}
[class*="StyledFloatingMenu"] [aria-selected="true"],
[class*="StyledFloatingListbox"] [aria-selected="true"],
[class*="StyledFloatingMenu"] [role="option"]:hover,
[class*="StyledFloatingListbox"] [role="option"]:hover {
background-color:#edf7ff !important; color:#1f73b7 !important;
}
/* ====================================================================== */
/* COMMUNITY / DISCUSSIONS */
/* Topic list (community home), posts list, single post + comments, and */
/* the new-post form. Reuses .article-body, .comment*, .button, status */
/* labels already defined above. */
/* ====================================================================== */
/* --- community search hero --- */
.community-hero { position:relative; padding:46px 0 30px; }
.community-hero .hero-inner { position:relative; max-width:640px; margin:0 auto; display:flex; align-items:center; }
.community-hero .search-icon { position:absolute; left:20px; top:50%; transform:translateY(-50%); color:var(--laguna); width:20px; height:20px; z-index:2; pointer-events:none; }
.community-hero form[role="search"], .community-hero .search-full { flex:1; margin:0; position:relative; }
.community-hero input[type="search"] { width:100%; background:var(--surface-2); border:1px solid var(--surface-line); border-radius:var(--r-pill); color:var(--text); padding:16px 22px 16px 52px; font-size:16px; }
.community-hero input[type="search"]:focus { outline:none; border-color:rgba(41,219,194,.5); box-shadow:0 0 0 4px rgba(41,219,194,.12); }
/* --- page header (title + "new post") --- */
.page-header { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:10px 0 20px; }
.page-header h1, .page-header .title { font-size:1.8rem; font-weight:800; color:var(--text); margin:0; display:inline-flex; align-items:center; gap:10px; }
.community-header { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.page-header-description { color:var(--text-soft); margin:0 0 18px; max-width:70ch; }
/* --- topics grid --- */
.blocks-list.topics-list { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; }
.blocks-item { list-style:none; }
.blocks-item-link { display:flex; flex-direction:column; gap:8px; height:100%; background:var(--surface-1); border:1px solid var(--surface-line); border-radius:var(--r-lg) 8px var(--r-lg) 8px; padding:22px 24px; transition:background .2s var(--ease), transform .2s var(--ease); }
.blocks-item-link:hover { background:var(--surface-2); transform:translateY(-2px); }
.blocks-item-title { color:var(--text); font-weight:700; font-size:1.15rem; display:flex; align-items:center; gap:8px; }
.blocks-item-link:hover .blocks-item-title { color:var(--laguna); }
.blocks-item-description { color:var(--text-soft); font-size:.95rem; flex:1; }
.blocks-item .meta-group { list-style:none; display:flex; gap:16px; padding:0; margin:6px 0 0; }
.blocks-item .meta-data { color:var(--text-muted); font-size:13px; }
.icon-lock { color:var(--charge); vertical-align:middle; flex-shrink:0; }
.blocks-item-internal .blocks-item-link { border-color:rgba(247,156,55,.4); }
/* --- posts striped list (topic page + all posts) --- */
.topic-header { margin:0 0 18px; }
.topic-filters { display:flex; gap:12px; flex-wrap:wrap; }
.posts-list.striped-list ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.striped-list-item { display:flex; align-items:center; justify-content:space-between; gap:20px; background:var(--surface-1); border:1px solid var(--surface-line); border-radius:var(--r-lg); padding:18px 22px; transition:background .2s var(--ease); }
.striped-list-item:hover { background:var(--surface-2); }
.striped-list-info { display:flex; flex-direction:column; gap:6px; min-width:0; }
.striped-list-info .striped-list-title { font-size:1.1rem; font-weight:700; }
.striped-list-item:hover .striped-list-title { color:var(--laguna); }
.post-overview-item { display:flex; gap:8px; flex-wrap:wrap; }
.striped-list-count, .post-overview-count { display:flex; gap:22px; flex-shrink:0; }
.striped-list-count-item { display:flex; flex-direction:column; align-items:center; color:var(--text-muted); font-size:12px; }
.striped-list-number { color:var(--text); font-weight:700; font-size:1.1rem; }
.post-featured { border-color:rgba(41,219,194,.4); }
.no-posts-with-filter { color:var(--text-soft); padding:30px 0; }
/* extra status labels for community */
.status-label-pinned { background:rgba(96,176,251,.16); color:#8FC4FD; }
.status-label-featured { background:rgba(41,219,194,.16); color:var(--laguna); }
.escalation-badge { background:var(--surface-3); color:var(--text-soft); text-decoration:none; }
/* featured posts / recent activity / footer CTA */
.community-featured-posts { margin:42px 0 0; }
.community-featured-posts .title, .community-footer-title { font-size:1.3rem; font-weight:700; color:var(--text); margin:0 0 16px; }
.promoted-articles { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.promoted-articles-item a { display:block; background:var(--surface-1); border:1px solid var(--surface-line); border-radius:var(--r-md); padding:16px 18px; color:var(--text); font-weight:600; text-decoration:none; }
.promoted-articles-item a:hover { background:var(--surface-2); color:var(--laguna); }
.community-activity { margin:42px 0 0; }
.community-footer { text-align:center; padding:48px 0; margin-top:28px; border-top:1px solid var(--surface-line); }
/* --- single post --- */
.post-container { display:grid; grid-template-columns:1fr 280px; gap:32px; align-items:start; margin-top:20px; }
@media (max-width:900px){ .post-container { grid-template-columns:1fr; } }
.post { min-width:0; }
.post-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.post-title { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.post-title h1 { font-size:1.9rem; font-weight:800; color:var(--text); margin:0; }
.post-info-container { margin:16px 0; }
.post-author { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.post-avatar .user-avatar { width:44px; height:44px; border-radius:50%; }
.post-meta { display:flex; flex-direction:column; gap:3px; }
.post-meta > span[title] a, .post-meta > span[title] { color:var(--text); font-weight:700; text-decoration:none; }
.post-actions-wrapper { display:flex; align-items:center; gap:18px; margin-top:18px; }
.content-tags { margin:24px 0 0; }
.content-tags > p { color:var(--text-muted); font-size:13px; margin:0 0 8px; }
.content-tag-list { list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0; }
.content-tag-list a { display:inline-flex; background:var(--surface-2); border:1px solid var(--surface-line); color:var(--text-soft); padding:5px 12px; border-radius:var(--r-pill); font-size:13px; text-decoration:none; }
.content-tag-list a:hover { color:var(--laguna); border-color:var(--laguna-50); }
/* vote controls (post + comment) */
.post-vote, .comment-vote { display:inline-flex; align-items:center; gap:6px; background:var(--surface-2); border:1px solid var(--surface-line); border-radius:var(--r-pill); padding:4px 10px; }
.vote-up, .vote-down { background:none; border:none; cursor:pointer; color:var(--text-muted); display:inline-flex; padding:4px; border-radius:50%; }
.vote-up:hover { color:var(--laguna); }
.vote-down svg { transform:rotate(180deg); }
.vote-down:hover { color:var(--breeze); }
.vote-sum { color:var(--text); font-weight:700; min-width:20px; text-align:center; }
.vote-voted { color:var(--laguna); }
.post-actions, .comment-actions { color:var(--text-muted); }
.actions svg { cursor:pointer; }
/* post footer (share + jump-to-comments) */
.post-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:20px 0; flex-wrap:wrap; }
.post-comment-count { display:inline-flex; align-items:center; gap:6px; color:var(--text-soft); text-decoration:none; }
.post-comment-count:hover { color:var(--laguna); }
/* post comments list (card style, like requests) */
.post .comment-list { list-style:none; padding:0; margin:16px 0 24px; display:flex; flex-direction:column; gap:14px; }
.post .comment { background:var(--surface-1); border:1px solid var(--surface-line); border-radius:var(--r-lg); padding:18px 22px; }
.comment-official { border-color:rgba(41,219,194,.4) !important; }
.comment-labels { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.comment-actions-container { display:flex; align-items:center; gap:16px; margin-top:10px; }
.comment-sorter { margin-left:auto; }
/* post sidebar CTA */
.post-sidebar { background:var(--surface-1); border:1px solid var(--surface-line); border-radius:var(--r-lg); padding:22px 24px; text-align:center; }
.post-sidebar-title { font-size:1.05rem; color:var(--text); margin:0 0 14px; }
.post-sidebar .button { width:100%; }
/* new-post form extras */
.form-header { font-size:1.8rem; font-weight:800; color:var(--text); margin:10px 0 22px; }
.optional { color:var(--text-muted); font-weight:400; margin-left:6px; font-size:.9em; }
.suggestion-list { background:var(--surface-1); border:1px solid var(--surface-line); border-radius:var(--r-md); margin:0 0 18px; padding:8px; }
.suggestion-list:empty { display:none; }
.content-tags-add-hint { display:block; color:var(--text-muted); font-size:13px; margin-bottom:6px; }
.notification-error, .notification-inline { color:#F9A892; font-size:13px; margin-top:6px; }
/* ====================================================================== */
/* USER PROFILE — rework: sort/filter dropdown toggles + edit-profile btn */
/* ====================================================================== */
.dropdown { position:relative; }
/* sort / filter toggles render as pills (profile sorter, following filter, */
/* community topic filters, comment sorter) */
.profile-section-sorter .dropdown-toggle,
.my-activities-following-header .dropdown-toggle,
.topic-filters .dropdown-toggle,
.comment-sorter .dropdown-toggle {
background:var(--surface-2); border:1px solid var(--surface-line); color:var(--text);
border-radius:var(--r-pill); padding:9px 16px; font-size:14px; font-weight:600;
}
.profile-section-sorter .dropdown-toggle:hover,
.my-activities-following-header .dropdown-toggle:hover,
.topic-filters .dropdown-toggle:hover,
.comment-sorter .dropdown-toggle:hover { background:var(--surface-3); }
.dropdown-chevron-icon { color:var(--text-muted); flex-shrink:0; }
/* profile header: keep the action buttons + follow on the right, tidy */
.profile-info .options { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.user-profile-actions a, .user-profile-actions button, .user-profile-actions .button {
display:inline-flex; align-items:center; gap:6px;
background:var(--surface-2); border:1px solid var(--surface-line); color:var(--text);
border-radius:var(--r-pill); padding:8px 16px; font-weight:600; text-decoration:none; cursor:pointer; font-size:14px;
}
.user-profile-actions a:hover, .user-profile-actions button:hover, .user-profile-actions .button:hover { background:var(--surface-3); }
/* private badge on own profile */
.profile-private-badge { background:var(--surface-2); border:1px solid var(--surface-line); border-radius:var(--r-pill); padding:6px 12px; }
/* ====================================================================== */
/* REQUESTS LIST (Zendesk "request-list" React/Garden bundle) */
/* The My-Requests / CC'd / Organizational tabs, search + filter, table, */
/* status tags and buttons are rendered by a Garden bundle into */
/* #main-content. We brand its controls via stable data-garden-id values. */
/* Scoped to #main-content so it can't touch other Garden chrome (the */
/* preview bar is handled separately). Also styles the new-request form. */
/* ====================================================================== */
/* toolbar buttons (Filter / Follow organization) -> visible branded pills */
#main-content [data-garden-id="buttons.button"] {
background:var(--surface-2) !important; border:1px solid var(--surface-line) !important;
color:var(--text) !important; border-radius:var(--r-pill) !important; font-weight:600 !important;
}
#main-content [data-garden-id="buttons.button"]:hover { background:var(--surface-3) !important; color:var(--text) !important; }
#main-content [data-garden-id="buttons.button"][disabled],
#main-content [data-garden-id="buttons.button"][aria-disabled="true"] { opacity:.5 !important; }
/* a primary/submit button (e.g. on the request form) reads as laguna */
#main-content [data-garden-id="buttons.button"][type="submit"] {
background:var(--laguna) !important; border-color:var(--laguna) !important; color:var(--on-laguna) !important;
}
/* search + organization inputs / selects */
#main-content [data-garden-id="forms.input"],
#main-content [data-garden-id="forms.faux_input"],
#main-content [data-garden-id="forms.media_input"],
#main-content [data-garden-id="forms.textarea"],
#main-content [data-garden-id="dropdowns.select"] {
background:var(--surface-2) !important; border:1px solid var(--surface-line) !important;
color:var(--text) !important; border-radius:var(--r-md) !important;
}
#main-content [data-garden-id="forms.input"]:focus,
#main-content [data-garden-id="forms.faux_input"]:focus-within,
#main-content [data-garden-id="dropdowns.select"]:focus {
border-color:rgba(41,219,194,.5) !important; box-shadow:0 0 0 3px rgba(41,219,194,.12) !important;
}
#main-content [data-garden-id="forms.media_input"] svg { color:var(--text-muted) !important; }
#main-content [data-garden-id="forms.input"]::placeholder { color:var(--text-muted) !important; }
/* tabs */
#main-content [data-garden-id="tabs.tab_list"] { border-bottom:1px solid var(--surface-line) !important; }
#main-content [data-garden-id="tabs.tab"] { color:var(--text-soft) !important; font-weight:600 !important; }
#main-content [data-garden-id="tabs.tab"]:hover { color:var(--text) !important; }
#main-content [data-garden-id="tabs.tab"][aria-selected="true"] { color:var(--laguna) !important; border-color:var(--laguna) !important; }
/* table */
#main-content [data-garden-id="tables.table"] { color:var(--text-soft) !important; }
#main-content [data-garden-id="tables.header_cell"],
#main-content [data-garden-id="tables.sortable_cell"] { color:var(--text-muted) !important; font-weight:700 !important; }
#main-content [data-garden-id="tables.header_cell"] svg,
#main-content [data-garden-id="tables.sortable_cell"] svg { color:var(--text-muted) !important; }
#main-content [data-garden-id="tables.row"] { border-color:var(--surface-line) !important; }
#main-content [data-garden-id="tables.cell"] { color:var(--text-soft) !important; }
#main-content [data-garden-id="tables.cell"] a,
#main-content [data-garden-id="tables.cell"] a span { color:var(--laguna) !important; text-decoration:none !important; }
#main-content [data-garden-id="tables.cell"] a:hover { text-decoration:underline !important; }
/* status tags -> rounded brand pills (Garden sets the hue) */
#main-content [data-garden-id="tags.tag_view"],
#main-content [data-garden-id="tags.tag"] { border-radius:var(--r-pill) !important; font-weight:700 !important; letter-spacing:.02em; }
/* pagination buttons inside the bundle */
#main-content [data-garden-id="pagination.page"],
#main-content [data-garden-id="pagination.previous"],
#main-content [data-garden-id="pagination.next"] { color:var(--text-soft) !important; }
#main-content [data-garden-id="pagination.page"][aria-current="true"] { color:var(--laguna) !important; }
/* ====================================================================== */
/* USER PROFILE — redesigned hero + activity timeline (overrides earlier) */
/* ====================================================================== */
/* hero: one cohesive card with a unified stat strip */
.profile-header { background:var(--surface-1); border-bottom:1px solid var(--surface-line); padding:36px 0; margin-bottom:0; }
.profile-card { width:100%; }
.profile-top { display:flex; align-items:flex-start; gap:22px; flex-wrap:wrap; }
.profile-avatar { position:relative; flex-shrink:0; }
.profile-avatar .user-avatar { width:84px; height:84px; border-radius:50%; border:3px solid rgba(41,219,194,.55); box-shadow:0 0 0 4px var(--surface-1); }
.profile-avatar .icon-agent { position:absolute; right:-2px; bottom:-2px; width:22px; height:22px; color:var(--laguna); background:var(--surface-1); border-radius:50%; padding:2px; }
.profile-identity { flex:1; min-width:220px; }
.profile-identity .name { font-size:1.95rem; font-weight:800; color:var(--text); margin:0; display:flex; align-items:center; gap:12px; flex-wrap:wrap; line-height:1.15; }
.profile-identity .name a { color:var(--text); text-decoration:none; }
.profile-since { color:var(--text-muted); font-size:14px; margin:5px 0 0; }
.profile-identity .community-badge-titles { margin:12px 0 0; }
.profile-identity .description { color:var(--text-soft); margin:12px 0 0; max-width:65ch; }
.profile-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-left:auto; }
.profile-private-badge { display:inline-flex; align-items:center; gap:5px; background:var(--surface-2); border:1px solid var(--surface-line); border-radius:var(--r-pill); padding:4px 10px; font-size:12px; font-weight:600; color:var(--text-muted); text-transform:none; letter-spacing:0; }
/* unified stat strip: 6 tiles split by hairline dividers */
.profile-stats-grid { list-style:none; display:grid; grid-template-columns:repeat(6,1fr); gap:1px; margin:28px 0 0; padding:0; background:var(--surface-line); border:1px solid var(--surface-line); border-radius:var(--r-lg); overflow:hidden; }
@media (max-width:820px){ .profile-stats-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:460px){ .profile-stats-grid { grid-template-columns:repeat(2,1fr); } }
.profile-stats-grid .stat { display:flex; flex-direction:column; gap:5px; align-items:flex-start; padding:16px 18px; background:var(--surface-1); }
.profile-stats-grid .stat-value { color:var(--text); font-weight:800; font-size:1.3rem; line-height:1.1; }
.profile-stats-grid .stat-label { color:var(--text-muted); font-size:11px; text-transform:uppercase; letter-spacing:.05em; }
/* activity overview: a timeline (no more card-in-card) */
.profile-activity-list { list-style:none; padding:0; margin:0; }
.profile-activity { display:block; position:relative; background:none !important; border:none !important; border-radius:0 !important; padding:0 0 26px 40px !important; margin:0 !important; }
.profile-activity-icon { position:absolute; left:0; top:0; width:28px; height:28px; display:grid; place-items:center; background:rgba(41,219,194,.12); color:var(--laguna); border-radius:50%; }
.profile-activity-icon svg { width:14px; height:14px; }
.profile-activity:not(:last-child)::before { content:""; position:absolute; left:13px; top:34px; bottom:0; width:2px; background:var(--surface-line); }
.profile-activity-header { display:flex; align-items:center; gap:9px; margin:3px 0 12px; color:var(--text); font-weight:600; }
.profile-activity-header .user-avatar { width:24px; height:24px; border-radius:50%; }
.profile-activity-description { margin:0; color:var(--text-soft); }
.profile-activity-contribution.profile-contribution { display:block !important; background:var(--surface-1); border:1px solid var(--surface-line); border-radius:var(--r-lg); padding:18px 22px; }
.profile-activity-contribution .profile-contribution-title { margin:0 0 4px; }
.profile-activity-contribution .meta-group, .profile-activity-contribution .profile-contribution-body, .profile-activity-contribution .profile-contribution-breadcrumbs { grid-column:auto; }
/* ====================================================================== */
/* Profile hero spacing + universal pointer cursor on interactive things */
/* ====================================================================== */
/* give the hero clear separation from the tabs / activity below */
.profile-header { padding:38px 0 42px; }
.profile-nav { margin-top:0; padding:18px 0 0; }
.profile-nav .collapsible-nav-list { padding-bottom:6px; }
.profile-section { padding:26px 0 44px; }
/* ensure links/controls show the pointer cursor (the Zendesk preview frame */
/* sometimes suppresses it; this guarantees it on the published site) */
a[href], [role="button"], button:not([disabled]), summary, label[for], .btn,
[data-garden-id="buttons.button"], [data-garden-id^="tabs.tab"] { cursor:pointer; }
/* ====================================================================== */
/* Contributions / Following nav spacing + Following "unfollow" button */
/* ====================================================================== */
/* breathing room for the top nav (Contributions / Following) — match the */
/* profile page treatment so tabs aren't crammed under the header */
.my-activities-nav { padding:20px 0 0; }
.my-activities-header { margin:26px 0 16px; }
.my-activities-sub-nav { margin:16px 0 8px; }
.my-activities-sub-nav .collapsible-nav { display:flex; }
/* Following page: redesign the follow/unfollow control as a clear pill; */
/* hover hints removal in coral so "unfollow" reads as the action */
.subscriptions-subscribe { text-align:right; }
.subscriptions-subscribe button,
.subscriptions-subscribe .button,
.subscriptions-subscribe input[type="submit"],
.subscriptions-subscribe [data-garden-id="buttons.button"] {
background:var(--surface-2) !important; border:1px solid var(--surface-line) !important;
color:var(--text) !important; border-radius:var(--r-pill) !important;
padding:8px 18px !important; font-weight:600 !important; font-size:14px !important; cursor:pointer;
}
.subscriptions-subscribe button:hover,
.subscriptions-subscribe .button:hover,
.subscriptions-subscribe input[type="submit"]:hover,
.subscriptions-subscribe [data-garden-id="buttons.button"]:hover {
background:rgba(242,125,98,.14) !important; border-color:rgba(242,125,98,.5) !important; color:#F9A892 !important;
}
/* ====================================================================== */
/* Promoted Articles cards: excerpt + "View article" link (match tiles) */
/* ====================================================================== */
.promoted-card { display:flex; flex-direction:column; }
.promoted-card h3 { margin:8px 0 0; }
.promoted-card__excerpt { color:var(--text-soft); font-size:.9rem; line-height:1.55; margin:10px 0 14px; flex:1; }
.promoted-card__excerpt:empty { margin:10px 0; }
.promoted-card__more { color:var(--laguna); font-weight:600; font-size:.9rem; margin-top:auto; }
/* Instant-search dropdown () — dark brand. */
/* Result items render in LIGHT DOM, so recolor ALL descendants here; the */
/* shadow-root injection in document_head is the backup for shadow content. */
zd-autocomplete { display:block; border:1px solid var(--surface-line) !important; border-radius:14px !important; box-shadow:0 18px 50px rgba(0,0,0,.45) !important; overflow:hidden; }
/* every descendant: light, readable text on a transparent layer */
zd-autocomplete, zd-autocomplete * { color:#E2EBF2 !important; background-color:transparent !important; border-color:rgba(255,255,255,.07) !important; }
/* the panel itself stays dark (descendants transparent above let it show) */
zd-autocomplete { background-color:var(--surface-1) !important; }
/* article title link -> laguna (anchors, headings, strong, any "title" node) */
zd-autocomplete a, zd-autocomplete a *,
zd-autocomplete [class*="title"], zd-autocomplete h1, zd-autocomplete h2,
zd-autocomplete h3, zd-autocomplete strong, zd-autocomplete b { color:#29DBC2 !important; text-decoration:none !important; }
zd-autocomplete a:hover, zd-autocomplete [role="option"]:hover,
zd-autocomplete li:hover, zd-autocomplete [aria-selected="true"] { background-color:rgba(41,219,194,.10) !important; }
/* ====================================================================== */
/* Error / 404 page */
/* ====================================================================== */
.error-page { position:relative; max-width:640px; margin:0 auto; text-align:center; padding:90px 20px 110px; }
.error-page .eyebrow { color:var(--laguna); }
.error-page h1 { font-size:2.6rem; font-weight:800; color:var(--text); margin:10px 0 14px; }
.error-page p { color:var(--text-soft); font-size:1.05rem; margin:0 0 8px; }
.error-actions { display:flex; gap:14px; justify-content:center; margin-top:30px; flex-wrap:wrap; }
.error-shapes { position:absolute; inset:0; pointer-events:none; z-index:-1; }
.error-shapes .pf-shape { position:absolute; opacity:.45; }
.error-shapes .s1 { top:0; left:50%; margin-left:-150px; }
.error-shapes .s2 { top:46px; left:50%; margin-left:110px; }
.error-shapes .s3 { bottom:60px; left:50%; margin-left:-40px; }
/* ====================================================================== */
/* Mobile fixes (≤640px): header crowding/overlap + CTA-band button clip */
/* ====================================================================== */
@media (max-width: 640px) {
/* header: tighten, shrink logo, drop the decorative "Support" tag so the */
/* logo + Apply Now + hamburger fit without overlapping */
.nav { gap: 10px; height: 64px; }
.brand { min-width: 0; flex-shrink: 1; }
.brand-logo { height: 30px; }
.brand .support-tag { display: none; }
.nav-right { gap: 8px; flex-shrink: 0; }
.nav-right .btn-sm { padding: 9px 14px; font-size: 13px; }
/* CTA band: stack the action buttons full-width so neither clips off-screen */
.cta-band { overflow: hidden; }
.cta-band .actions { flex-direction: column; align-items: stretch; width: 100%; gap: 10px; }
.cta-band .actions .btn { width: 100%; justify-content: center; }
}