/* Graylark LRM: the brand refresh, as kept after the first review (2 October 2026).
 *
 * Loaded after the theme (styles_v7.css) by the layouts when ui.refresh.enabled is on, with the
 * body marked .ui-refresh. The first version re-dressed the whole product in the marketing site's
 * colours; the review kept two things and sent the rest back:
 *   - the dark top bar on the public pages (login, forgot password, set password, confirm
 *     registration, about, modules); once signed in the app's bar is the theme's white one;
 *   - the motion (graylark-motion.js): stat tiles arriving in sequence, their figures counting up,
 *     progress bars growing from the left.
 * 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 defined for later steps and change nothing on their own.
 */

/* ----------------------------------------------------------------- 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);
}

/* ---------------------------------------------------------------- top bar
 * The dark bar on the public pages only (body.gl-public: login, forgot password, set password,
 * confirm registration, about, modules, all sharing fragments/public-nav). Once signed in the app's
 * own top bar (fragments/nav-layout) is the theme's white one, as it was. Navy, as the sidebar and
 * the card headers, so the two chromes belong to one product. */

.gl-public .topnav {
  background-color: var(--navy) !important;
  box-shadow: 0 0.15rem 1.75rem 0 rgba(33, 40, 50, 0.3) !important;
}
.gl-public .topnav .navbar-brand,
.gl-public .topnav .nav-link,
.gl-public .topnav .nav-link .fw-500,
.gl-public .topnav .dropdown-arrow { color: #fff !important; }
.gl-public .topnav .nav-link:hover,
.gl-public .topnav .nav-link:hover .fw-500 { color: rgba(255, 255, 255, 0.75) !important; }
.gl-public .topnav .nav-link.active { box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.85); }
.gl-public .topnav .navbar-toggler { border-color: rgba(255, 255, 255, 0.4); }
.gl-public .topnav .navbar-toggler-icon { filter: invert(1) brightness(2); }
/* The drawer under md (public-nav.html styles it white with green accents). */
@media (max-width: 767.98px) {
  .gl-public .topnav .navbar-collapse { background: var(--navy); border-top-color: rgba(255, 255, 255, 0.12); box-shadow: none; }
  .gl-public .topnav .navbar-collapse .nav-item { border-bottom-color: rgba(255, 255, 255, 0.1); }
  .gl-public .topnav .navbar-collapse .nav-item .nav-link { color: #fff; }
  .gl-public .topnav .navbar-collapse .nav-item .nav-link:hover,
  .gl-public .topnav .navbar-collapse .nav-item .nav-link:focus { background-color: rgba(255, 255, 255, 0.06); color: #fff; }
  .gl-public .topnav .navbar-collapse .nav-item .nav-link.active { color: #fff; border-left-color: #fff; background-color: rgba(255, 255, 255, 0.06); }
}

/* ------------------------------------------------------------ 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
 * graylark-motion.js adds gl-reveal to a stat tile the moment it is seen, then gl-in a frame later,
 * each tile in a row 90ms after the one before; the classes go once the tile is shown. */

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

@media (prefers-reduced-motion: reduce) {
  .ui-refresh .gl-reveal, .ui-refresh .gl-reveal.gl-in { opacity: 1; transform: none; transition: none; }
}