/* ══════════════════════════════════════════════════════════════════════════
   canon-figure-collapse.css — collapsible chrome for the canon "figure"
   panel at the top of a Books list (quotes, invoices, …). State machine
   lives in core/ui/figurebar.js.

   Kept OUT of canon-books.css on purpose: that file is a verbatim port of
   public/_canon-books-app-mockup.html, diffed pixel-for-pixel by
   scripts/canon-diff.js, so a new component that isn't in the mockup has
   nowhere safe to live in there.
   ══════════════════════════════════════════════════════════════════════════ */

@layer components {
  .fig-collapse { position: relative; }

  .fig-collapse__toggle {
    display: inline-flex; align-items: center; gap: var(--sp-1_5);
    margin-bottom: var(--sp-2_5); padding: var(--sp-1_5) var(--sp-2_5) var(--sp-1_5) var(--sp-2); border-radius: 999px;
    border: 1px solid var(--c-border); background: var(--c-card);
    color: var(--c-text-2); font: inherit; font-size: 12.5px; font-weight: 500;
    cursor: pointer;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
  }
  .fig-collapse__toggle:hover { color: var(--c-text); border-color: var(--c-border-2); background: var(--c-card-2); }
  .fig-collapse__toggle:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
  .fig-collapse__toggle i { font-size: 14px; transition: transform var(--dur) var(--ease); }
  .fig-collapse.is-collapsed .fig-collapse__toggle i { transform: rotate(-90deg); }

  /* grid-template-rows 1fr -> 0fr is the only height:auto-friendly CSS tween;
     the child needs min-height:0 + overflow:hidden to actually shrink with it. */
  .fig-collapse__body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dur) var(--ease); }
  .fig-collapse__body > * { min-height: 0; overflow: hidden; }
  .fig-collapse.is-collapsed .fig-collapse__body { grid-template-rows: 0fr; }
  @media (prefers-reduced-motion: reduce) { .fig-collapse__body { transition: none; } }

  .fig-collapse__peek {
    display: none; align-items: center; gap: var(--sp-3_5); flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); border-radius: 10px;
    border: 1px solid var(--c-border); background: var(--c-sunken);
    font-size: 13px; color: var(--c-text-2);
  }
  /* [hidden] is set by figurebar.js when a metric never rendered (still
     loading, or the page had nothing to show) — keep it winning over the
     collapsed-state display:flex below regardless of rule order. */
  .fig-collapse.is-collapsed .fig-collapse__peek:not([hidden]) { display: flex; }
  .fig-collapse__pk-val { font-weight: 700; color: var(--c-text); }
  .fig-collapse__pk-sep { width: 1px; height: 13px; background: var(--c-border); }

  /* Nothing to show yet (rows still loading, or the filtered list is empty) —
     hide the toggle too rather than showing a control over a blank panel. */
  .fig-collapse.is-empty { display: none; }

  /* A figure and its label wrap as one unit, never between the two. */
  .fig-collapse__pk { white-space: nowrap; }

  /* "Hide figures" lives in the toolbar's More menu on a page that has one
     (figurebar.js adoptMenu), so the pill only shows to bring them back. */
  .fig-collapse.has-menu-toggle:not(.is-collapsed) .fig-collapse__toggle { display: none; }
}