@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --font-mono: 'JetBrains Mono', monospace;
    
    --background: 210 20% 97%;
    --foreground: 210 25% 15%;
    
    --card: 0 0% 100%;
    --card-foreground: 210 25% 15%;
    
    --popover: 0 0% 100%;
    --popover-foreground: 210 25% 15%;
    
    --primary: 210 80% 25%;
    --primary-foreground: 210 20% 98%;
    
    --secondary: 210 15% 90%;
    --secondary-foreground: 210 25% 15%;
    
    --muted: 210 15% 94%;
    --muted-foreground: 210 50% 30%;
    
    --accent: 210 30% 85%;
    --accent-foreground: 210 25% 15%;
    
    --destructive: 0 70% 60%;
    --destructive-foreground: 210 20% 98%;
    
    --border: 210 15% 86%;
    --input: 210 15% 86%;
    --ring: 210 80% 25%;
    
    --radius: 0.25rem;
  }
}

@layer base {
  * {
    @apply border-border;
    font-family: var(--font-mono);
    -webkit-font-smoothing: none;
    font-smooth: never;
  }

  body {
    @apply bg-background text-foreground;
    margin: 0;
    min-height: 100vh;
    font-feature-settings: "ss01", "ss02", "cv01", "cv02";
  }
}

@layer components {
  .btn-primary {
    @apply inline-flex items-center justify-center bg-primary px-4 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
  }

  .btn-ghost {
    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
  }

  .card {
    @apply border bg-card text-card-foreground shadow-sm;
  }
}

/* Animated ellipsis */
@keyframes ellipsis {
  0% { content: "Search Caliber"; }
  25% { content: "Search Caliber."; }
  50% { content: "Search Caliber.."; }
  75% { content: "Search Caliber..."; }
  100% { content: "Search Caliber"; }
}

.search-input::placeholder {
  animation: ellipsis 2s steps(1) infinite;
}

/* Subtle scanlines effect */
.scanlines {
  position: relative;
}

.scanlines::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.02) 0,
    rgba(0, 0, 0, 0.02) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
}
/* ---------------------------------------------------------------------------------------------
   Zeroing sections (spec §2). Every zero panel is in the HTML on load. Without JS everything is
   visible and stacked; the zero-toggle controller adds .js-enabled and collapses the inactive
   panels with display:none. No `hidden` attribute, no aria-hidden on indexable content. */
@layer components {
  .zero-panel { display: block; }
  .js-enabled .zero-panel { display: none; }
  .js-enabled .zero-panel.is-active { display: block; }

  .zero-tab[aria-selected="true"] { @apply border-primary bg-primary text-primary-foreground; }

  /* Drop-unit columns: all three are rendered; the table's class decides which is shown. */
  .zero-table.drop-in  .col-moa, .zero-table.drop-in  .col-mil,
  .zero-table.drop-moa .col-in,  .zero-table.drop-moa .col-mil,
  .zero-table.drop-mil .col-in,  .zero-table.drop-mil .col-moa { display: none; }
  .drop-unit[aria-pressed="true"] { @apply border-primary bg-primary text-primary-foreground; }
}
/*
 * 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.
 *


 */

/* Hunt-unit topographic map (Leaflet, loaded on demand) */
.topo-unit-label {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: hsl(var(--muted-foreground));
  font-size: 11px;
  font-weight: 600;
  text-shadow: 0 0 3px hsl(var(--background)), 0 0 3px hsl(var(--background));
}
.topo-unit-label--active { color: hsl(var(--primary)); font-size: 13px; }
.leaflet-container { border-radius: var(--radius); font: inherit; }