/* gc-report.css — shared visual system for GrantCompass US data-report pages. Charts, animated stat tiles, badges, a sticky scroll-spy section nav, and aligned tables. Progressive enhancement: with no JS, charts show full bars and numbers show their final value (the `gcr-js` class on , set by gc-report.js, opts in to the from-zero animations). Respects reduced-motion. */ :root{ --gcr-track:#e7ded0; --gcr-bar:var(--sienna,#c4532b); --gcr-bar-2:var(--forest,#3f6f52); --gcr-ink:var(--ink,#1c1917); --gcr-mute:var(--ink-mute,#6b635a); --gcr-paper2:var(--paper-2,#f4efe7); --gcr-line:var(--line,#e7e2d9); } /* ---------- Visible breadcrumb ---------- */ .gcr-crumbs{font-size:.82rem;color:var(--gcr-mute);margin:0 0 .4rem;display:flex;gap:.4rem;flex-wrap:wrap;align-items:center} .gcr-crumbs a{color:var(--gcr-mute);text-decoration:none} .gcr-crumbs a:hover{color:var(--sienna,#c4532b);text-decoration:underline} .gcr-crumbs span[aria-current]{color:var(--gcr-ink)} /* ---------- Sticky scroll-spy section nav (NOT a 2-col TOC) ---------- Sticks BELOW the site header (.usn is position:sticky;top:0; ~61px tall), so --gcr-header-h must match the header's height or this pins behind it. */ :root{--gcr-header-h:61px} .gcr-subnav{position:sticky;top:calc(var(--gcr-header-h) - 1px);z-index:30;margin:1.25rem 0 0; background:color-mix(in srgb, var(--paper,#faf7f2) 92%, transparent); -webkit-backdrop-filter:saturate(1.2) blur(8px);backdrop-filter:saturate(1.2) blur(8px); border-top:1px solid var(--gcr-line);border-bottom:1px solid var(--gcr-line)} .gcr-subnav__scroll{display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none;padding:.5rem 0} .gcr-subnav__scroll::-webkit-scrollbar{display:none} .gcr-subnav a{flex:0 0 auto;white-space:nowrap;font-family:var(--font-body,sans-serif);font-size:.86rem;font-weight:600; color:var(--gcr-mute);text-decoration:none;padding:.4rem .75rem;border-radius:999px;transition:background .18s,color .18s} .gcr-subnav a:hover{color:var(--gcr-ink);background:var(--gcr-paper2)} .gcr-subnav a.is-active{color:#fff;background:var(--sienna,#c4532b)} /* offset anchored sections so BOTH sticky bars (header + subnav) clear the heading */ .gcr-section{scroll-margin-top:calc(var(--gcr-header-h) + 56px)} /* ---------- Stat tiles (animated count-up) ---------- */ .gcr-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.75rem;margin:1.25rem 0} .gcr-tile{background:var(--gcr-paper2);border:1px solid var(--gcr-line);border-radius:.6rem;padding:1.05rem 1.1rem;position:relative;overflow:hidden} .gcr-tile::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:var(--accent,40%);background:var(--sienna,#c4532b);opacity:.5} .gcr-tile__num{display:block;font-family:var(--font-display,'Fraunces',serif);font-weight:600;font-size:1.85rem;line-height:1.05;color:var(--sienna,#c4532b);font-variant-numeric:tabular-nums} .gcr-tile__label{display:block;font-size:.84rem;color:var(--gcr-mute);margin-top:.25rem} /* ---------- Bar chart (semantic: a
; bar is decorative) ---------- */ .gcr-chart{margin:1.1rem 0 .5rem;display:grid;grid-template-columns:minmax(7.5rem,auto) 1fr;gap:.45rem 1rem;align-items:center} .gcr-chart__label{font-size:.9rem;color:var(--gcr-ink);margin:0} .gcr-chart__label a{color:inherit;text-decoration:none;border-bottom:1px solid var(--gcr-line)} .gcr-chart__label a:hover{color:var(--sienna,#c4532b)} .gcr-chart__bar{display:flex;align-items:center;gap:.6rem;margin:0} .gcr-chart__track{flex:1;height:1.1rem;background:var(--gcr-track);border-radius:999px;overflow:hidden} .gcr-chart__fill{display:block;height:100%;width:var(--pct,0%);border-radius:999px; background:linear-gradient(90deg,var(--sienna,#c4532b),#d8794f)} .gcr-chart__fill.is-alt{background:linear-gradient(90deg,var(--forest,#3f6f52),#5a8f72)} .gcr-chart__val{flex:0 0 auto;font-size:.85rem;font-weight:600;color:var(--gcr-ink);font-variant-numeric:tabular-nums;min-width:5.5rem} .gcr-js .gcr-chart__fill{width:0} .gcr-js .gcr-chart.in-view .gcr-chart__fill{width:var(--pct,0%);transition:width .9s cubic-bezier(.2,.7,.2,1)} /* ---------- Badges (competition / ease / type) ---------- */ .gcr-badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:600;padding:.15rem .55rem;border-radius:999px;white-space:nowrap} .gcr-badge::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:currentColor} .gcr-badge--low{color:#2f6b46;background:#e3f0e7} .gcr-badge--mid{color:#8a5a17;background:#f6ecd8} .gcr-badge--high{color:#9a3520;background:#f6e2da} /* ---------- Mini meter (e.g. ease 0–14, competition 1–5) ---------- */ .gcr-meter{display:inline-flex;gap:2px;vertical-align:middle} .gcr-meter i{width:6px;height:14px;border-radius:1px;background:var(--gcr-track)} .gcr-meter i.on{background:var(--sienna,#c4532b)} /* ---------- Insight callout ---------- */ .gcr-callout{background:linear-gradient(180deg,var(--gcr-paper2),transparent);border:1px solid var(--gcr-line); border-radius:.6rem;padding:1.1rem 1.25rem;margin:1.25rem 0} .gcr-callout h3{margin:.1rem 0 .4rem;font-size:1.05rem} /* ---------- Tables: header alignment ALWAYS matches its column's data ---------- */ table.gc-data-table th.num,table.gc-data-table td.num{text-align:center} table.gc-data-table th.right,table.gc-data-table td.right{text-align:right} table.gc-data-table td .gcr-amount-bar{display:block;height:4px;margin-top:4px;border-radius:2px; background:var(--gcr-track);position:relative} table.gc-data-table td .gcr-amount-bar::before{content:"";position:absolute;left:0;top:0;height:100%;width:var(--pct,0%); border-radius:2px;background:var(--sienna,#c4532b);opacity:.65} /* ---------- Interactive table toolbar (search + filter chips + live count) ---------- */ .gcr-tabletools{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:1.1rem 0 .5rem} .gcr-search{flex:1 1 13rem;min-width:0;display:flex;align-items:center;gap:.45rem; background:var(--gcr-paper2);border:1px solid var(--gcr-line);border-radius:999px;padding:.45rem .85rem} .gcr-search:focus-within{border-color:var(--sienna,#c4532b);box-shadow:0 0 0 3px color-mix(in srgb,var(--sienna,#c4532b) 18%,transparent)} .gcr-search svg{flex:0 0 auto;opacity:.5} .gcr-search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;color:var(--gcr-ink);outline:none} .gcr-chip{font-family:var(--font-body,sans-serif);font-size:.82rem;font-weight:600;color:var(--gcr-mute); background:var(--gcr-paper2);border:1px solid var(--gcr-line);border-radius:999px;padding:.42rem .85rem;cursor:pointer;white-space:nowrap} .gcr-chip:hover{color:var(--gcr-ink)} .gcr-chip[aria-pressed="true"]{color:#fff;background:var(--sienna,#c4532b);border-color:var(--sienna,#c4532b)} .gcr-tablecount{font-size:.82rem;color:var(--gcr-mute);margin-left:auto;font-variant-numeric:tabular-nums} .gcr-empty{display:none;padding:1.1rem;text-align:center;color:var(--gcr-mute);font-size:.92rem} /* ---------- Sortable table headers + row hide ---------- */ table.gc-data-table th[data-sortable]{cursor:pointer;user-select:none;white-space:nowrap} table.gc-data-table th[data-sortable]:hover{color:var(--sienna,#c4532b)} table.gc-data-table th[data-sortable]::after{content:"\2195";opacity:.3;margin-left:.3rem;font-size:.85em;font-weight:400} table.gc-data-table th[aria-sort="ascending"]::after{content:"\2191";opacity:1;color:var(--sienna,#c4532b)} table.gc-data-table th[aria-sort="descending"]::after{content:"\2193";opacity:1;color:var(--sienna,#c4532b)} table.gc-data-table tr.is-filtered{display:none} table.gc-data-table td mark{background:color-mix(in srgb,var(--sienna,#c4532b) 24%,transparent);color:inherit;border-radius:2px;padding:0 .1em} /* ---------- Score / ease meter (in a table cell) ---------- */ .gcr-score{display:flex;align-items:center;gap:.5rem} .gcr-score__track{position:relative;width:3.2rem;height:.42rem;border-radius:999px;background:var(--gcr-track);overflow:hidden;flex:0 0 auto} .gcr-score__fill{position:absolute;left:0;top:0;height:100%;border-radius:999px;width:var(--pct,0%); background:linear-gradient(90deg,var(--forest,#3f6f52),#5a8f72)} .gcr-js .gcr-score__fill{width:0} .gcr-js .in-view .gcr-score__fill,.gcr-js tr .gcr-score__fill{width:var(--pct,0%);transition:width .8s cubic-bezier(.2,.7,.2,1)} .gcr-score__num{font-variant-numeric:tabular-nums;font-weight:600;font-size:.86rem;color:var(--gcr-ink)} /* amount cell: value + proportional bar (uses .gcr-amount-bar with --pct) */ .gcr-amtcell b{font-weight:600;white-space:nowrap;display:block} /* ---------- Donut / segmented ring (conic-gradient; set --seg inline) ---------- */ .gcr-donutwrap{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin:1.25rem 0} .gcr-donut{position:relative;width:9.5rem;height:9.5rem;flex:0 0 auto;border-radius:50%;background:conic-gradient(var(--seg,var(--sienna) 0 100%))} .gcr-js .gcr-donut{opacity:0;transform:scale(.92)} .gcr-js .gcr-donut.in-view{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease} .gcr-donut::after{content:"";position:absolute;inset:24%;border-radius:50%;background:var(--paper,#faf7f2)} .gcr-donut__c{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1.05} .gcr-donut__c b{font-family:var(--font-display,serif);font-size:1.5rem;color:var(--gcr-ink)} .gcr-donut__c span{font-size:.72rem;color:var(--gcr-mute)} .gcr-legend{display:grid;gap:.4rem;font-size:.9rem;min-width:11rem} .gcr-legend li{display:flex;align-items:center;gap:.55rem;list-style:none} .gcr-legend i{width:.8rem;height:.8rem;border-radius:3px;flex:0 0 auto} .gcr-legend b{font-variant-numeric:tabular-nums;margin-left:auto;color:var(--gcr-ink)} /* ---------- Inline tooltip (hover/focus) ---------- */ .gcr-tip{position:relative;border-bottom:1px dotted var(--gcr-mute);cursor:help} .gcr-tip__pop{position:absolute;left:50%;bottom:calc(100% + .5rem);transform:translateX(-50%) translateY(4px); width:max-content;max-width:16rem;background:var(--ink,#1c1917);color:#fff;font-size:.8rem;font-weight:500;line-height:1.35; padding:.5rem .7rem;border-radius:.45rem;box-shadow:0 10px 24px rgba(0,0,0,.22); opacity:0;visibility:hidden;transition:opacity .15s ease,transform .15s ease,visibility .15s ease;z-index:20;pointer-events:none} .gcr-tip__pop::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--ink,#1c1917)} .gcr-tip:hover .gcr-tip__pop,.gcr-tip:focus-visible .gcr-tip__pop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} /* ---------- Animated section reveal ---------- */ .gcr-js .gcr-reveal{opacity:0;transform:translateY(10px)} .gcr-js .gcr-reveal.in-view{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease} /* ---------- Responsive ---------- */ @media (max-width:620px){ .gcr-chart{grid-template-columns:1fr;gap:.15rem .5rem} .gcr-chart__label{font-size:.85rem;margin-top:.5rem} .gcr-chart__val{min-width:4.5rem} .gcr-tablecount{margin-left:0;flex-basis:100%} .gcr-donutwrap{gap:1rem;justify-content:center} } /* ---------- Reduced motion: no movement, show final state ---------- */ @media (prefers-reduced-motion:reduce){ .gcr-js .gcr-chart__fill{width:var(--pct,0%);transition:none} .gcr-js .gcr-reveal{opacity:1;transform:none;transition:none} .gcr-js .gcr-score__fill{width:var(--pct,0%);transition:none} .gcr-js .gcr-donut{opacity:1;transform:none;transition:none} }