/* fin-kit.css — generic component skin (FinIcon/FinPageHead/FinPanel/FinStatusPill). */

.fin-ic { display: inline-block; vertical-align: middle; flex: none; }

.fin-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--fin-s-4); flex-wrap: wrap; margin-bottom: var(--fin-s-6); }
.fin-pagehead-main { display: flex; flex-direction: column; gap: var(--fin-s-1); min-width: 0; }
.fin-eyebrow { font-size: var(--fin-fs-meta); font-weight: var(--fin-fw-semi); letter-spacing: .04em; text-transform: uppercase; color: var(--fin-text-3); }
.fin-pagehead h1 { margin: 0; font-family: var(--fin-font-display); font-size: var(--fin-fs-title); font-weight: var(--fin-fw-bold); color: var(--fin-text-1); }
.fin-pagehead-sub { margin: 2px 0 0; font-size: var(--fin-fs-body); color: var(--fin-text-2); }
.fin-pagehead-cta { display: flex; align-items: center; gap: var(--fin-s-2); flex: none; }

.fin-panel {
  display: flex; flex-direction: column; gap: var(--fin-s-3); min-width: 0;
  padding: 20px; border-radius: 16px; background: #1A1E1C;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 4px 14px rgba(0,0,0,.32), 0 28px 64px -18px rgba(0,0,0,.72);
}
.fin-panel-h { display: flex; align-items: flex-start; gap: var(--fin-s-3); }
.fin-panel-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--fin-r-sm); background: var(--fin-surface-2); color: var(--fin-text-2); }
.fin-panel-ht { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fin-panel-t { margin: 0; font-family: var(--fin-font-display); font-size: var(--fin-fs-card); font-weight: var(--fin-fw-semi); color: var(--fin-text-1); }
.fin-panel-sub { margin: 0; font-size: var(--fin-fs-meta); color: var(--fin-text-3); }
.fin-panel-act { flex: none; }
.fin-panel.is-warn { box-shadow: 0 0 0 1px var(--fin-warn-soft), var(--fin-shadow-soft); }
.fin-panel.is-crit { box-shadow: 0 0 0 1px var(--fin-crit-soft), var(--fin-shadow-soft); }

.fin-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--fin-r-pill);
  font-size: var(--fin-fs-meta); font-weight: var(--fin-fw-semi); white-space: nowrap;
  background: var(--fin-neutral-soft); color: var(--fin-neutral-ink);
}
.fin-pill.is-ok   { background: var(--fin-ok-soft);   color: var(--fin-ok-ink); }
.fin-pill.is-warn { background: var(--fin-warn-soft); color: var(--fin-warn-ink); }
.fin-pill.is-crit { background: var(--fin-crit-soft); color: var(--fin-crit-ink); }
.fin-pill.is-info { background: var(--fin-info-soft); color: var(--fin-info-ink); }
.fin-pill-dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; flex: none; }

.fin-btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--fin-s-2);
  height: var(--fin-ctl-h); padding: 0 var(--fin-s-4); border: 0; border-radius: var(--fin-r-sm);
  font: inherit; font-size: var(--fin-fs-body); font-weight: var(--fin-fw-semi); cursor: pointer;
  transition: background-color var(--fin-t-fast) var(--fin-ease), opacity var(--fin-t-fast) var(--fin-ease),
    transform var(--fin-t-fast) var(--fin-ease), box-shadow var(--fin-t-fast) var(--fin-ease);
}
.fin-btn.is-primary { background: var(--fin-accent); color: var(--fin-text-on-accent); box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 8px 20px -10px var(--fin-accent-soft); }
.fin-btn.is-primary:hover:not(:disabled) { background: var(--fin-accent-hover); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,.14), 0 14px 26px -10px var(--fin-accent-soft); }
.fin-btn.is-primary:active:not(:disabled) { transform: translateY(0); }
.fin-btn.is-ghost { background: var(--fin-surface-2); color: var(--fin-text-1); box-shadow: 0 0 0 1px var(--fin-border); }
.fin-btn.is-ghost:hover:not(:disabled) { background: var(--fin-surface-hover); box-shadow: 0 0 0 1px var(--fin-border-strong); }
.fin-btn:disabled { opacity: .55; cursor: default; transform: none !important; }

.fin-input {
  width: 100%; height: var(--fin-ctl-h); padding: 0 var(--fin-s-3); box-sizing: border-box;
  border: 1px solid var(--fin-border-strong); border-radius: var(--fin-r-sm); background: var(--fin-surface-2);
  color: var(--fin-text-1); font: inherit; font-size: var(--fin-fs-body);
  transition: border-color var(--fin-t-fast) var(--fin-ease), box-shadow var(--fin-t-fast) var(--fin-ease), background-color var(--fin-t-fast) var(--fin-ease);
}
.fin-input::placeholder { color: var(--fin-text-3); }
.fin-input:hover { background: var(--fin-surface-1); }
.fin-input:focus-visible { outline: none; border-color: var(--fin-focus); background: var(--fin-surface-1); box-shadow: 0 0 0 3px var(--fin-accent-soft); }