/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* ── Typography ─────────────────────────────────────────────────────────── */
body {
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* Financial numbers rendered in mono with tabular spacing */
.font-numeric {
  font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-size: 0.9375em; /* optical compensation — mono reads slightly larger */
}

/* ── Global micro-transitions ───────────────────────────────────────────── */
a, button, [role="button"], input, select, textarea {
  transition-property: color, background-color, border-color, opacity, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease;
}

/* ── Card accent ─────────────────────────────────────────────────────────── */
/* Add class="card-accent" to section cards for a 3px indigo top border accent */
.card-accent {
  position: relative;
  overflow: hidden;
}
.card-accent::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #4f46e5; /* indigo-600 */
  border-radius: 0.5rem 0.5rem 0 0;
}

/* Pagy 43 nav (series_nav outputs nav.pagy) – from pagy.css, tuned for slate */
.pagy {
  --B: 1;
  --H: 220;
  --S: 13%;
  --L: 50%;
  --A: 1;
  --spacing: 0.25rem;
  --padding: 0.75rem;
  --rounding: 0.375rem;
  --border-width: 1px;
  --font-size: 0.875rem;
  --font-weight: 600;
  --line-height: 1.75;

  --text:               hsla(var(--H) var(--S) calc(var(--L) - (25 * var(--B))) / var(--A));
  --text-hover:         hsla(var(--H) var(--S) calc(var(--L) - (30 * var(--B))) / var(--A));
  --text-current:       hsla(var(--H) var(--S) calc(100 * (var(--B) + 1)) / var(--A));
  --background:         hsla(var(--H) var(--S) calc(var(--L) + (30 * var(--B))) / var(--A));
  --background-hover:   hsla(var(--H) var(--S) calc(var(--L) + (20 * var(--B))) / var(--A));
  --background-current: hsl(var(--H) var(--S) 18%);
  --background-input:   hsla(var(--H) var(--S) calc(var(--L) + (45 * var(--B))) / var(--A));

  color: var(--text);
  font-size: var(--font-size);
  line-height: var(--line-height);
  font-weight: var(--font-weight);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--spacing);
}

.pagy > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--spacing);
}

.pagy a:not([role="separator"]) {
  display: block;
  text-decoration: none;
  background-color: var(--background);
  padding: calc(var(--padding) / 3) var(--padding);
  border: var(--border-width) solid #e2e8f0;
  border-radius: var(--rounding);
  color: inherit;
}

.pagy a[href]:hover {
  background-color: var(--background-hover);
  color: var(--text-hover);
}

.pagy a:not([href]) {
  cursor: default;
}

.pagy a[role="link"]:not([aria-current]) {
  opacity: 0.6;
}

.pagy a[aria-current] {
  background-color: var(--background-current);
  color: var(--text-current);
  border-color: var(--background-current);
}

.pagy label {
  white-space: nowrap;
  display: inline-block;
  border: var(--border-width) solid var(--background-current);
  border-radius: var(--rounding);
  background-color: var(--background);
  padding: calc((var(--padding) / 3) - var(--border-width)) var(--padding);
}

.pagy label input {
  all: unset;
  border: var(--border-width) solid var(--background-current);
  border-radius: calc(var(--rounding) / 2) !important;
  background-color: var(--background-input);
}