/* ============================================================================
   B15 — blocks leftovers (PARITY B15): custom widget + shared type utilities.
   ----------------------------------------------------------------------------
   Three kinds of rule live here:

   1. The reference's custom `@utility` type faces (`text-mono-label`,
      `text-data-lg`, `text-caption`, `text-label`, `text-headline`). These
      are the old app.css's bespoke utilities — NOT standard Tailwind, so the
      tailwind bundle never emits them. Components ported from the reference
      keep the class names verbatim, so these definitions must match the
      reference's @utility values exactly (see old/core/app/app.css).
      Definitions are plain classes (not @utility) because this is app CSS,
      not the tailwind pipeline.

   2. `.b15-icon` — sizing an inline lucide glyph. `icons::lucide` renders an
      svg with fixed 24×24 width/height attributes; the reference's Icon sizes
      the glyph from a caller `size-*` utility via `[&_svg]:!size-full`. This
      wrapper does the same: a `size-*` utility on the wrapper sets its box,
      and the inner svg fills it. Colour flows through currentColor.

   3. The custom widget's panel shell — the reference `Panel` grammar
      (glass-card + bordered headline header + flex body). Self-contained with
      a b15 namespace so it never races the list/detail `.block-panel` frame
      that lands later via related.css.
   ========================================================================== */

/* ---- 1. The reference type utilities ----------------------------------- */

/* These sit in the `utilities` layer (like the reference's `@utility` blocks)
   so standard utilities can interleave with them by source order exactly as
   they do in the reference — e.g. `text-caption font-medium` resolves to 500
   (font-medium wins) because tailwind.css loads after modern.css within the
   layer. */
@layer utilities {
  .text-headline {
    font-size: 1.0625rem;
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: -0.014em;
  }

  .text-mono-label {
    font-family: var(--ta-mono);
    font-size: 11px;
    line-height: 1.4;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ta-muted);
    font-variant-numeric: tabular-nums;
  }

  .text-data-lg {
    font-family: var(--ta-mono);
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }

  .text-caption {
    font-size: 0.75rem;
    line-height: 1.3;
    font-weight: 400;
  }

  .text-label {
    font-size: 0.8125rem;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: 0;
  }
}

/* ---- 2. Inline lucide glyph sizing ------------------------------------- */

.b15-icon {
  display: block;
  flex: none;
}

.b15-icon svg {
  width: 100%;
  height: 100%;
}

/* ---- 3. Custom widget panel shell --------------------------------------- */

/* Element+class so the glass-card's default padding/radius lose regardless of
   load order (vitrine.css sits late in modern.css). */
.b15-panel.glass-card {
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--ta-r-xl);
  /* A clipping pane in the app-main flex column must not be shrinkable. */
  flex-shrink: 0;
}

.b15-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--ta-border);
}

.b15-panel-title {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.014em;
}

.b15-panel-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

/* The custom bar chart's track. The reference draws it `bg-muted` — the
   `--muted` token is a 5% translucent tint of the deep field hue — but the
   tailwind bundle maps `bg-muted` to the OPAQUE `--ta-surface-2`, so a
   bespoke class carries the reference value (light + dark, matching the
   reference's `--muted`). */
.b15-bar-track {
  background: oklch(0.3 0.015 260 / 5%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .b15-bar-track {
    background: oklch(1 0 0 / 6%);
  }
}

:root[data-theme="dark"] .b15-bar-track {
  background: oklch(1 0 0 / 6%);
}

/* The custom list's rows. base.css gives every `li` line-height 1.55, but the
   reference list items inherit the body's 1.5 (24px at 16px) — element+class
   restores the reference leading. */
li.b15-list-item {
  line-height: 1.5;
}