/* =============================================================================
 * CoAnalyst360 -- page styles
 * -----------------------------------------------------------------------------
 * Served from:  /wp-content/uploads/penlink-pages/coanalyst360/page.css
 * Loaded by:    WPCode snippet "Penlink per-page assets", after
 *               _shared/tokens.css (declared as a dependency, so the cascade
 *               order is guaranteed).
 *
 * This file is short, and that is worth understanding before you go looking
 * for the page's styling. Almost all of it is in inline style attributes in
 * the page's HTML code box -- 132 elements, 78 distinct style strings. That
 * was a reasonable call at the time: inline styles cannot be overridden by
 * site-wide Tailwind, which is why this page renders correctly. It also means
 * this stylesheet has very little to do.
 *
 * If you are restyling this page, the markup is where the work is.
 * If you are building a NEW page, prefer classes and var(--token) here over
 * inline literals. See the note at the top of tokens.css.
 * ============================================================================= */


/* ---- Header clearance -----------------------------------------------------
 * The site header is out of flow and overlays page content, and its height
 * changes with viewport width and with webfont loading. page.js measures it at
 * runtime and publishes the result as --pl-header-clear.
 *
 * The 100px fallback exists so a failed measurement degrades to roughly the
 * old hard-coded guess rather than to zero. 100 + 60 = 160px, which is exactly
 * what the inline style used to say.
 *
 * WHY !important: it is overriding an inline `padding` on #top, and inline
 * styles otherwise win. Once that inline padding-top is removed from the
 * markup, drop the !important and the #top selector in favour of a class.
 * ------------------------------------------------------------------------- */

.penlink-page #top {
  padding-top: calc(var(--pl-header-clear, 100px) + 60px) !important;
}


/* ---- Page-specific keyframes ----------------------------------------------
 * The shared animation vocabulary lives in tokens.css. These two are tied to
 * specific artwork on this page and would mean nothing anywhere else:
 * plGauge78 animates one SVG gauge to one particular value, and
 * plReportScroll assumes a list duplicated to exactly twice its height.
 * ------------------------------------------------------------------------- */

@keyframes plGauge78 { to { stroke-dashoffset: 33; } }
@keyframes plReportScroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }