@import "tailwindcss";

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex/ibm-plex-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex/ibm-plex-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex/ibm-plex-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex/ibm-plex-sans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex/ibm-plex-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@source inline("inline-flex items-center gap-2 whitespace-nowrap rounded-full border px-2.5 py-1 text-xs font-medium leading-none before:block before:size-1.5 before:shrink-0 before:rounded-full");
@source inline("border-red-400/20 bg-red-500/[0.08] text-red-200 before:bg-red-400 border-amber-400/20 bg-amber-500/[0.08] text-amber-200 before:bg-amber-300 border-emerald-400/20 bg-emerald-500/[0.10] text-emerald-200 before:bg-emerald-400 border-emerald-400/25 bg-emerald-500/[0.12]");
@source inline("bg-red-500/45 border-red-300/20 bg-amber-500/35 border-amber-300/20 bg-amber-300/60 border-amber-200/25 bg-emerald-500/55 border-emerald-300/25 bg-emerald-300/75 border-emerald-200/30 bg-white/[0.035] border-white/[0.07]");
@source inline("bg-red-500/10 text-red-300 border-red-500/20 bg-amber-500/10 text-amber-300 border-amber-500/20 bg-emerald-500/10 text-emerald-300 border-emerald-500/20 bg-red-400 bg-amber-300 bg-emerald-400 text-white/50");
@source inline("w-full w-2.5 h-2.5 aspect-square rounded-[2px] border p-0 cursor-default invisible transition-transform hover:scale-125 focus:outline-none focus:ring-1 focus:ring-white/30");
@source inline("relative h-2 w-full overflow-hidden rounded-full bg-black/40 ring-1 ring-inset ring-white/10 flex h-full pointer-events-none absolute inset-x-0 top-0 top-1/2 h-1/2 rounded-t-full bg-gradient-to-b from-white/15 to-transparent h-4 w-4 -translate-x-1/2 -translate-y-1/2 items-center justify-center bg-[var(--color-kova-base)] shadow-md shadow-black/60 ring-white/20 h-2 w-2");
/* Strategy board fallbacks: alignment_dot_class / alignment_badge_class when a score
   falls outside every AlignmentScale band. */
@source inline("bg-white/40 bg-white/5 border-white/10");

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

@theme {
  /* KOVA Brand Colors */
  --color-kova-base: #0D0D0F;
  --color-kova-panel: #151517;
  --color-kova-tile: #1E1E22;
  --color-kova-tile-hi: #26262B;
  --color-kova-cream: #ECE7DA;
  --color-kova-ink: #15130E;
  --color-kova-text: #E8E6E1;
  --color-kova-accent: #2F7FE0;
  --color-kova-accent-on-light: #2569C2;
  --color-kova-muted: #8D8D93;
  --color-kova-faint: #5C5C62;

  /* Semantic status (alignment scale + connect/verdict states) */
  --color-kova-green: #4CC38A;
  --color-kova-amber: #E5B454;
  --color-kova-red: #E5635C;

  /* Kova brand type */
  --font-sans: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Shape + motion (from the onboarding design system) */
  --radius-kova: 10px;
  --radius-kova-sm: 7px;
  --ease-kova: cubic-bezier(0.16, 1, 0.3, 1);
}

body {
  background: var(--color-kova-base);
  color: var(--color-kova-cream);
  font-family: var(--font-sans);
}

/* Clamped strategy-document preview: fixed height with a fade until opened. */
.clamp {
  position: relative;
  max-height: 132px;
  overflow: hidden;
}
.clamp::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 64px;
  background: linear-gradient(180deg, rgba(21, 21, 23, 0) 0%, var(--color-kova-panel) 92%);
  pointer-events: none;
}
.clamp--open {
  max-height: none;
}
.clamp--open::after {
  display: none;
}

@layer base {
  /* Tailwind v4 Preflight ships interactive controls with the default (arrow)
     cursor; restore the pointer so buttons, toggles, and summaries read as clickable. */
  button:not(:disabled),
  [role="button"],
  input[type="submit"]:not(:disabled),
  input[type="button"]:not(:disabled),
  input[type="reset"]:not(:disabled),
  summary,
  label[for] {
    cursor: pointer;
  }

  /* Keyboard users get a visible accent ring; pointer clicks stay clean. */
  :focus-visible {
    outline: 2px solid var(--color-kova-accent);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    /* html sets scroll-behavior: smooth above. In-page jumps through long
       documents are exactly what this preference asks us to drop, so reset it
       here rather than only zeroing durations. */
    html {
      scroll-behavior: auto;
    }

    *,
    ::before,
    ::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

@media (max-width: 639.98px) {
  .kova-mobile-nav {
    padding-top: calc(0.75rem + env(safe-area-inset-top, 0px));
  }

  .kova-mobile-nav-offset {
    padding-top: calc(5rem + env(safe-area-inset-top, 0px));
  }

  /* The admin nav stacks its brand, links, and account row on mobile, making
     it taller than the app-wide 5rem flash offset. Keep its toast below all
     navigation controls with the same safe-area treatment. */
  .kova-admin-layout .kova-flash-offset {
    top: calc(8.5rem + env(safe-area-inset-top, 0px));
  }
}

/* Applies at every width, unlike the mobile-only rules above: clears both the
   fixed mobile nav bar and the desktop corner logo/menu (fixed top-6/right-6
   in shared/_nav), which a top-6 toast would collide with. */
.kova-flash-offset {
  top: calc(5rem + env(safe-area-inset-top, 0px));
}

/* Markdown content styling */
.markdown-content h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: white;
}

.markdown-content h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: white;
}

.markdown-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  color: white;
}

.markdown-content p {
  margin-bottom: 1rem;
  line-height: 1.6;
  color: var(--color-kova-muted);
}

.markdown-content ul, .markdown-content ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
  color: var(--color-kova-muted);
}

.markdown-content ul {
  list-style-type: disc;
}

.markdown-content ol {
  list-style-type: decimal;
}

.markdown-content li {
  margin-bottom: 0.5rem;
}

.markdown-content strong {
  font-weight: 600;
  color: white;
}

.markdown-content hr {
  margin: 2rem 0;
  border-color: rgba(255, 255, 255, 0.1);
}

.markdown-content table {
  width: 100%;
  margin: 1rem 0;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.markdown-content th {
  text-align: left;
  padding: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  font-weight: 600;
}

.markdown-content td {
  padding: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-kova-muted);
}

.markdown-content tr:last-child td {
  border-bottom: none;
}

.markdown-content code {
  background: rgba(255, 255, 255, 0.1);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.875em;
  color: white;
}

.markdown-content pre {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 1rem 0;
}

.markdown-content pre code {
  background: none;
  padding: 0;
}

.markdown-content a {
  color: var(--color-kova-accent);
  text-decoration: none;
}

.markdown-content a:hover {
  text-decoration: underline;
}

/* Strategy documents use a compact reading hierarchy inside the strategy card
   and editor preview. Keep this scoped so briefs, reports, and public Markdown
   retain their existing presentation. */
.strategy-document > :first-child {
  margin-top: 0;
}

.strategy-document > :last-child {
  margin-bottom: 0;
}

.strategy-document h2 {
  margin: 0 0 1.25rem;
  color: var(--color-kova-text);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
}

.strategy-document h3 {
  margin: 1.75rem 0 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-kova-text);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.strategy-document > h3:first-child,
.strategy-document h2 + h3 {
  padding-top: 0;
  border-top: 0;
}

.strategy-document h4 {
  margin: 1.25rem 0 0.5rem;
  color: var(--color-kova-text);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
}

.strategy-document h3 + h4 {
  margin-top: 0.875rem;
}

.strategy-document h5,
.strategy-document h6 {
  margin: 1rem 0 0.5rem;
  color: var(--color-kova-text);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.45;
}

.strategy-document p {
  margin-bottom: 0.875rem;
  line-height: 1.65;
}

.strategy-document ul,
.strategy-document ol {
  margin: 0.75rem 0 1rem;
  padding-left: 1.25rem;
}

.strategy-document li {
  margin-bottom: 0.35rem;
}

.strategy-document strong {
  color: var(--color-kova-text);
}

.strategy-document hr {
  margin: 1.5rem 0;
}

/* A block table keeps its semantic table structure while containing wide
   allocation grids within the document on small screens. */
.strategy-document table {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 1.25rem 0;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius-kova-sm);
  background: rgba(255, 255, 255, 0.025);
}

.strategy-document th,
.strategy-document td {
  padding: 0.625rem 0.75rem;
  white-space: nowrap;
}

.strategy-document th {
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-kova-text);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.strategy-document td {
  color: var(--color-kova-muted);
}

.markdown-content h2,
.markdown-content h3,
.markdown-content h4 {
  position: relative;
}

.heading-anchor {
  opacity: 0;
  margin-left: 0.4rem;
  font-weight: 400;
  font-size: 0.9em;
  color: var(--color-kova-accent);
  text-decoration: none !important;
  transition: opacity 0.15s;
}

.markdown-content h2:hover .heading-anchor,
.markdown-content h3:hover .heading-anchor,
.markdown-content h4:hover .heading-anchor {
  opacity: 1;
}

/* Fade-in animation for metric values */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 0.6s ease-out;
}

/* Strategy version diff */
.strategy-diff {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  font-size: 0.8125rem;
  line-height: 1.6;
}

.strategy-diff ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.strategy-diff li {
  padding: 0.125rem 0.75rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.strategy-diff li.del {
  background: rgba(239, 68, 68, 0.1);
  border-left: 3px solid rgba(239, 68, 68, 0.5);
  color: #fca5a5;
}

.strategy-diff li.del del {
  text-decoration: none;
}

.strategy-diff li.ins {
  background: rgba(34, 197, 94, 0.08);
  border-left: 3px solid rgba(34, 197, 94, 0.4);
  color: #86efac;
}

.strategy-diff li.ins ins {
  text-decoration: none;
}

.strategy-diff li.unchanged {
  color: rgba(141, 141, 147, 0.72);
  border-left: 3px solid transparent;
}

/* Privacy Mode - blur sensitive currency values */
body.privacy-mode [data-sensitive="currency"] {
  filter: blur(8px);
  user-select: none;
  pointer-events: none;
}