/* ============================================================================
   QUICK TILE — single source of truth.
   Canonical CSS for category entry-point tiles (.quick-tile + type/count/name/
   desc/more) used on the home / landing layout. Shared by comp-quick-tile.html
   and any future consumer. Import AFTER colors_and_type.css. The raised surface
   flips in dark via --color-bg-raised.

   Each tile carries a doc-type modifier (.quick-tile--cos/stanag/stanrec/ap)
   that sets --qt-accent (the doc-type ink, brighter in dark) + --qt-accent-bg
   (the ready-made tonal tint). The TYPE eyebrow wears that ink; on hover the
   COUNT colourises to it and a diagonal tint gradient slides in from the
   top-left corner. Reduced motion is handled by the global policy.
   ============================================================================ */

.quick-tile {
  /* Accent falls back to the primary scale if no doc-type modifier is set. */
  --qt-accent: var(--gov-color-primary-600);
  --qt-accent-bg: var(--gov-color-primary-50);

  /* Animated-number recipe for VALUE CHANGES (settled Jun 2026) — motion/
     effect/limit attrs are stamped by _quick-tile.js; tokens live here:
     per-digit at 800/100, heat flashes the SATURATED doc-type accent in
     BOTH directions (paired with fade via the "heat fade" combo), with a
     long 5 s cooldown (settled Jun 2026). */
  --num-dur: 800ms; /* @kind other */
  --num-stag: 100ms; /* @kind other */
  --num-heat-dur: 5000ms; /* @kind other */
  --num-heat-up: var(--qt-accent);
  --num-heat-down: var(--qt-accent);

  /* Motion tokens — read by _quick-tile.js at play time (the compound-contract
     rule: timing rides custom props, never JS consts). Declared ON .quick-tile,
     so overrides (Inspector / per-instance) must be set inline on the TILE —
     an element's own declaration beats an inherited one (the --st-* lesson).
     Values mirror the `gentle` preset in _quick-tile.config.js. */
  --qt-count-dur: 1100ms;    /* @kind other */ /* count-up duration */
  --qt-count-pow: 3;         /* @kind other */ /* ease-out exponent (1 = linear, higher = harder brake) */
  --qt-count-blur: 0;        /* @kind other */ /* px — motion-blur on fast digits (0 = off) */
  --qt-count-hot: 85;        /* @kind other */ /* % — "hot → calm" accent mix on the digits (0 = off; 85 = settled default — the reveal count-up wears the doc-type accent, matching the value-change heat recipe) */
  --qt-rise-dur: 460ms;      /* @kind other */ /* number fade + rise-in */
  --qt-rise-dist: 7px;
  --qt-rise-ease: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --qt-in-stag: 0ms;         /* @kind other */ /* content cascade stagger; 0 = only the number animates */
  --qt-in-dur: 420ms;        /* @kind other */ /* content cascade duration */

  position: relative;
  overflow: hidden;            /* clip the diagonal gradient to the radius */
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  padding: 18px 18px 16px;
  text-align: left; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 6px;
  cursor: pointer;
  /* The whole tile is one click target (navigation control) — double-clicking
     the big count must not text-select it. */
  user-select: none; -webkit-user-select: none;
  transition: border-color 160ms ease-out, box-shadow 220ms ease-out, transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Doc-type accents — ink + tonal tint (both theme-aware via the doc tokens). */
.quick-tile--cos     { --qt-accent: var(--doc-cos);     --qt-accent-bg: var(--doc-cos-bg); }
.quick-tile--stanag  { --qt-accent: var(--doc-stanag);  --qt-accent-bg: var(--doc-stanag-bg); }
.quick-tile--stanrec { --qt-accent: var(--doc-stanrec); --qt-accent-bg: var(--doc-stanrec-bg); }
.quick-tile--ap      { --qt-accent: var(--doc-ap);      --qt-accent-bg: var(--doc-ap-bg); }

/* Diagonal tint that slides in from the top-left corner toward the opposite
   one. Sits ABOVE the opaque tile surface but BELOW the content (children are
   lifted to z-index 1 below). Saturation is driven by --qt-g1/--qt-g2 so the
   PRESSED state can deepen it. Rest = parked off the top-left + faded out. */
.quick-tile::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  --qt-g1: 30%;   /* corner saturation */
  --qt-g2: 11%;   /* mid saturation */
  /* RADIAL corner glow (not a linear band) so the far right + bottom edges are
     guaranteed fully transparent — a linear 135° gradient left a faintly-tinted
     hard edge along the right side mid-animation. */
  background: radial-gradient(125% 118% at 0% 0%,
    color-mix(in oklab, var(--qt-accent) var(--qt-g1), transparent) 0%,
    color-mix(in oklab, var(--qt-accent) var(--qt-g2), transparent) 26%,
    transparent 58%);
  opacity: 0;                 /* rule-driven (NOT transitioned) — opacity-from-0
                                 parks at 0 in capture/hidden contexts; only the
                                 transform animates the slide-in / press-grow. */
  transform: translate(-20%, -20%) scale(1.12);
  transform-origin: top left;
  transition: transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}
.quick-tile > * { position: relative; z-index: 1; }

.quick-tile:hover,
.quick-tile[data-state~="hover"] {
  border-color: color-mix(in oklab, var(--qt-accent) 58%, var(--color-border-default));
  box-shadow: 0 6px 18px rgba(12,24,56,0.10), 0 2px 5px rgba(12,24,56,0.06);
  transform: translateY(-2px);
}
.quick-tile:hover::before,
.quick-tile[data-state~="hover"]::before {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}
/* Pressed — the gradient DEEPENS (stronger corner + mid colour) and grows
   outward a notch, an animated push the slide-in hands off into. */
.quick-tile:active,
.quick-tile[data-state~="pressed"] {
  border-color: var(--qt-accent);
  box-shadow: inset 0 1px 3px rgba(12,24,56,0.12);
  transform: translateY(0);
}
.quick-tile:active::before,
.quick-tile[data-state~="pressed"]::before {
  opacity: 1;
  --qt-g1: 50%;
  --qt-g2: 22%;
  transform: translate(0, 0) scale(1.22);
}

.quick-tile__type {
  font-family: var(--font-mono); font-weight: 700;
  font-size: 12.5px; letter-spacing: 0.04em;
  color: var(--qt-accent);
  text-transform: uppercase;
}
/* Big number — BOLD but a step LESS dark than the heading ink, so weight (not
   darkness) carries the emphasis. Colourises to a toned-down accent on hover. */
.quick-tile__count {
  font-family: var(--font-mono); font-size: 26px; font-weight: 700;
  color: var(--color-fg-secondary); line-height: 1.05; margin: 4px 0;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  transition: color 200ms ease-out;
}
.quick-tile:hover .quick-tile__count,
.quick-tile[data-state~="hover"] .quick-tile__count {
  color: color-mix(in oklab, var(--qt-accent) 72%, var(--color-fg-secondary));
}
/* While the figure is COUNTING UP (.is-counting, stamped by _quick-tile.js):
   optional style effects driven by inline custom props the controller updates
   per displayed tick (rule-driven — removing the class restores the normal
   color + transition with no snap, both props decay to 0 by the final tick):
     --qt-blur-now (px) — "motion blur" while increments are big, easing to 0;
     --qt-hot-now  (%)  — digits start at the saturated doc-type accent and
                          calm to the resting gray approaching the target.
   transition:none so the per-tick writes aren't smeared by the 200ms color
   transition above. Ties the hover recolor at (0,3,0) — placed LATER in source
   so a counting figure keeps its effect under hover. */
.quick-tile .quick-tile__count.is-counting {
  color: color-mix(in oklab, var(--qt-accent) calc(var(--qt-hot-now, 0) * 1%), var(--color-fg-secondary));
  filter: blur(calc(var(--qt-blur-now, 0) * 1px));
  transition: none;
}
.quick-tile__name { font-size: 15px; font-weight: 500; color: var(--color-fg-default); }
.quick-tile__desc { font-size: 12.5px; color: var(--color-fg-secondary); line-height: 1.45; margin-top: 2px; }
.quick-tile__more {
  margin-top: auto; padding-top: 10px;
  font-size: 12.5px; font-weight: 500;
  color: var(--gov-color-primary-500);
  display: inline-flex; align-items: center; gap: 5px;
  transition: color 160ms ease-out;
}
.quick-tile__more i { transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1); }
/* On hover the link recolours to the accent and the arrow nudges right — NO
   underline (the arrow must never gain one). */
.quick-tile:hover .quick-tile__more,
.quick-tile[data-state~="hover"] .quick-tile__more {
  color: color-mix(in oklab, var(--qt-accent) 78%, var(--color-fg-default));
}
.quick-tile:hover .quick-tile__more i,
.quick-tile[data-state~="hover"] .quick-tile__more i { transform: translateX(3px); }