/* Graylark LRM: the brand layer, loaded after the theme (styles_v7.css) by nav-layout and the public pages.
 *
 * Always on since 7 October 2026 (the ui.refresh.enabled switch is gone). The first version, on
 * 2 October, re-dressed the whole product in the marketing site's colours; the review kept the motion
 * (graylark-motion.js: stat tiles arriving in sequence, their figures counting up, progress bars
 * growing from the left) and the public pages' dark top bar, which the public pages' own stylesheet
 * (graylark-public.css, 7 October) has since replaced. Plus the optional flat page header
 * (.header-flat) behind ui.header.particles.enabled or ?header=flat, which the particle animation
 * stays the default for. docs/ui-refresh.md has the account; the brand tokens below are what
 * graylark-public.css paints with. And one contrast fix the theme lacks: pills whose text meets AA.
 */

/* ----------------------------------------------------------------- tokens
 * The marketing site's palette (site.css), under the same names. Not yet applied to components. */

:root {
  --slate: #495a58;
  --slate-deep: #3f4a49;
  --ink: #263130;
  --ink-2: #1c2423;
  --sand: #dcd9d0;
  --sand-2: #e9e7e0;
  --paper: #f4f3ee;
  --clay: #d4967d;
  --clay-deep: #c4826a;
  --clay-soft: #ecc9b8;
  --rust: #9c5a40;
  --navy: #272f3b;         /* the product's own chrome: sidebar, card headers, the public pages' top bar */
  --mint: #9fb3ad;
  --moss: #6b8e7a;
  --amber: #d9a85c;
  --late: #c96b55;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ------------------------------------------------------------ page header
 * The flat header: the viewer chose ?header=flat, or ui.header.particles.enabled is off. */

.header-flat .page-header.bg-gradient-gray {
  background-color: var(--navy) !important;
  background-image: none !important;
}
.header-flat #particles-js { display: none !important; }

/* ----------------------------------------------------------------- motion
 * The tiles (cards that lift on hover, graylark-motion.js's definition too) and progress bars that
 * are animated in must never be shown, taken away and shown again. So they are hidden from the first paint: the layout adds gl-prepaint to
 * <html> in the head, and these rules hold the tiles faint and the bars at zero width until the
 * script takes over, puts its own gl-reveal on the tiles, and removes gl-prepaint. If the script
 * never runs (blocked, failed), the zero-length animation with a 1.5s delay shows everything.
 * Then, as a row comes into view, each tile gets gl-in 90ms after the one before. */

html.gl-prepaint .card.lift:not(.nudge-item) { opacity: 0; transform: translateY(10px); animation: gl-failsafe 0s 1.5s forwards; }
html.gl-prepaint .progress .progress-bar { transform: scaleX(0); transform-origin: left center; animation: gl-failsafe-bar 0s 1.5s forwards; }
@keyframes gl-failsafe { to { opacity: 1; transform: none; } }
@keyframes gl-failsafe-bar { to { transform: none; } }

.gl-reveal { opacity: 0; transform: translateY(10px); }
.gl-reveal.gl-in { opacity: 1; transform: none; transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  html.gl-prepaint .card.lift:not(.nudge-item),
  html.gl-prepaint .progress .progress-bar,
  .gl-reveal, .gl-reveal.gl-in { opacity: 1; transform: none; transition: none; animation: none; }
}

/* --------------------------------------------------------------- pill ink
 * Every pill's text meets WCAG AA (4.5:1). Templates append a status colour to "badge text-white"
 * (the change, jurisdiction, record, question and health pills take theirs from their enums), and
 * white fails on the theme's light backgrounds: about 2.1:1 on amber (bg-warning and bg-yellow are the
 * same colour), 3.0:1 on green, 1.9:1 on cyan, 2.1:1 on the light slate. So a light pill takes the
 * theme's dark ink here whatever its text class (5:1 on green, 7:1 on amber): both rules are
 * !important and this one is more specific. The two mid tones that fail with either ink take a
 * slightly deeper shade of their own colour in a pill, with white. StatusPillContrastGuardTest reads
 * this block and the theme's colours and fails a pill under 4.5:1. */

:root {
  --pill-iris: #6e719c;    /* bg-secondary-supporting-8 in a pill: white 4.7:1 (the theme's is 4.4:1) */
  --pill-moss: #5d7c6a;    /* bg-secondary-supporting-11 in a pill: white 4.6:1 (the theme's is 3.6:1) */
  --pill-mauve: #886d79;   /* bg-secondary-supporting-12 in a pill: white 4.7:1 (the theme's is 3.3:1) */
}

.badge.bg-warning,
.badge.bg-yellow,
.badge.bg-green,
.badge.bg-success,
.badge.bg-info,
.badge.bg-cyan,
.badge.bg-teal,
.badge.bg-orange,
.badge.bg-light,
.badge.bg-white,
.badge.bg-secondary-supporting-2,
.badge.bg-secondary-supporting-3,
.badge.bg-secondary-supporting-4,
.badge.bg-secondary-supporting-5,
.badge.bg-secondary-supporting-6,
.badge.bg-secondary-supporting-7 {
  color: var(--bs-dark) !important;
}

.badge.bg-secondary-supporting-8 { background-color: var(--pill-iris) !important; color: var(--bs-white) !important; }
.badge.bg-secondary-supporting-11 { background-color: var(--pill-moss) !important; color: var(--bs-white) !important; }
.badge.bg-secondary-supporting-12 { background-color: var(--pill-mauve) !important; color: var(--bs-white) !important; }

/* --------------------------------------------------------- search results
 * The agreement search (fragments/agreement-provisions.html, fragments/search-relevance.html): how well each
 * result matches, as a five-bar meter rising left to right with the bars it earns filled; the snippet of a
 * provision's text around its matches; its whole text, kept in its own lines and scrolled when long; the dots
 * between an agreement's details. The theme's own colours, nothing new. */

.gl-relevance { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; color: var(--bs-gray-700); }
.gl-relevance-meter { display: inline-flex; align-items: flex-end; gap: 2px; height: 0.9rem; }
.gl-relevance-meter > span { width: 4px; border-radius: 1px; background-color: var(--bs-gray-300); }
.gl-relevance-meter > span:nth-child(1) { height: 40%; }
.gl-relevance-meter > span:nth-child(2) { height: 55%; }
.gl-relevance-meter > span:nth-child(3) { height: 70%; }
.gl-relevance-meter > span:nth-child(4) { height: 85%; }
.gl-relevance-meter > span:nth-child(5) { height: 100%; }
.gl-relevance-meter > span.on { background-color: var(--bs-primary); }

.gl-search-title { min-width: 0; }
.gl-search-meta { display: flex; flex-wrap: wrap; align-items: center; }
.gl-search-meta > span + span::before { content: "\00B7"; margin: 0 0.4rem; }
.small .gl-relevance .small { font-size: inherit; }
.gl-snippet { line-height: 1.55; color: var(--bs-gray-800); }
.gl-provision-text {
  white-space: pre-line;
  max-height: 28rem;
  overflow-y: auto;
  padding-left: 1rem;
  border-left: 3px solid var(--bs-gray-300);
  color: var(--bs-gray-800);
}