/* ============================================================================
   RostraIQ — Industrial Skeuomorphism
   Single source of truth for design tokens (marketing + app share this file).
   Light-mode neumorphic "chassis": matte plastic panels under top-left light.
   Base/brand swatch = signal GREEN; Procure secondary = signal amber.
   ========================================================================== */
:root {
  /* -- Materials (elevation hierarchy) -- */
  --chassis:   #e0e5ec; /* Level 0  — base plastic everything mounts to       */
  --panel:     #eef1f6; /* Level +1 — slightly raised panel surface           */
  --recessed:  #d1d9e6; /* Level -1 — sunken wells (inputs, screens, grooves) */

  /* -- Ink -- */
  --ink:   #2d3436;     /* primary text (soft charcoal)                       */
  --muted: #4a5568;     /* labels / metadata (WCAG-AA slate)                  */

  /* -- Accent: the base swatch is GREEN (industrial signal-green) -- */
  --accent:        #16a34a;
  --accent-strong: #128a3e;
  --accent-ink:    #0b5d2c; /* green text legible on the light chassis        */
  --accent-fg:     #ffffff;

  /* -- Secondary accent (Rostra Procure) — signal amber -- */
  --accent-2:        #e0901a;
  --accent-2-strong: #c67c0d;

  /* -- Neumorphic light pair -- */
  --sh:   #b7bfca;      /* shadow half (bottom-right)                         */
  --hi:   #ffffff;      /* highlight half (top-left)                          */
  --edge: #a3b1c6;      /* deep divider where extra contrast is needed        */

  /* -- Legacy aliases: keep the previous class vocabulary working -- */
  --paper:  var(--chassis);
  --slate:  var(--ink);
  --mist:   var(--edge);
  --signal: var(--accent);

  /* -- Radii (injection-molded, soft) -- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px;

  /* -- Neumorphic shadow system (the visual signature) -- */
  --shadow-card:     8px 8px 16px var(--sh), -8px -8px 16px var(--hi);
  --shadow-floating: 12px 12px 22px var(--sh), -10px -10px 20px var(--hi), inset 1px 1px 0 rgba(255,255,255,.5);
  --shadow-pressed:  inset 5px 5px 11px var(--sh), inset -5px -5px 11px var(--hi);
  --shadow-recessed: inset 4px 4px 8px var(--sh), inset -4px -4px 8px var(--hi);
  --glow:            0 0 0 3px rgba(22,163,74,.22), 0 0 14px 2px rgba(22,163,74,.30);

  /* -- Motion: mechanical spring with slight overshoot -- */
  --ease: cubic-bezier(.175,.885,.32,1.275);

  /* -- Corner-screw texture for "bolted" panels -- */
  --screws:
    radial-gradient(circle at 13px 13px, rgba(0,0,0,.16) 1.5px, rgba(255,255,255,.55) 2.6px, transparent 3.3px),
    radial-gradient(circle at calc(100% - 13px) 13px, rgba(0,0,0,.16) 1.5px, rgba(255,255,255,.55) 2.6px, transparent 3.3px),
    radial-gradient(circle at 13px calc(100% - 13px), rgba(0,0,0,.16) 1.5px, rgba(255,255,255,.55) 2.6px, transparent 3.3px),
    radial-gradient(circle at calc(100% - 13px) calc(100% - 13px), rgba(0,0,0,.16) 1.5px, rgba(255,255,255,.55) 2.6px, transparent 3.3px);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
  /* Top-left lighting hotspot baked into the chassis */
  background:
    radial-gradient(120% 90% at 18% 0%, #eef2f8 0%, rgba(238,242,248,0) 55%),
    var(--chassis);
  background-attachment: fixed;
}

/* Matte-plastic micro-noise overlay (simulates real ABS surface) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3 { font-family: "Inter", system-ui, sans-serif; color: var(--ink); font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: 30px; margin: 28px 0 6px; text-shadow: 0 1px 0 var(--hi); }
a { color: var(--accent-ink); }
mark { background: rgba(224,144,26,.30); padding: 0 3px; border-radius: 2px; color: var(--ink); }

/* "Stamped label" treatment for technical metadata */
.mono, .crumbs, .stat-label, .match-meta, .price span, .card h4,
.kicker, .label, .eyebrow { font-family: "JetBrains Mono", ui-monospace, monospace; }

/* ----- Top bar (clean, high-contrast rail — flat, no neumorphic "billets") ----- */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 24px; background: var(--panel);
  border-bottom: 1px solid var(--edge);
  box-shadow: 0 2px 6px -4px var(--sh);
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 800; color: var(--ink); text-decoration: none; font-size: 17px; letter-spacing: -.02em; }
.topbar nav { display: flex; flex-wrap: wrap; gap: 2px 4px; align-items: center; justify-content: flex-end; }
/* Plain links: dark, legible, flat. :not(.btn) so the green CTA keeps its white text. */
.topbar nav a:not(.btn) {
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: 13.5px;
  padding: 7px 10px; border-radius: var(--r-sm); transition: color .15s ease, background .15s ease;
}
.topbar nav a:not(.btn):hover { color: var(--accent-ink); background: rgba(45,52,54,.06); }
.topbar .linklike { color: var(--ink); }
.topbar .linklike:hover { color: var(--accent-ink); }

.wrap { max-width: 880px; margin: 0 auto; padding: 18px 24px 72px; }
.foot { text-align: center; color: var(--muted); font-size: 12px; padding: 28px; margin-top: 24px; box-shadow: inset 0 1px 0 var(--hi); border-top: 1px solid var(--edge); font-family: "JetBrains Mono", monospace; }
.muted { color: var(--muted); font-weight: 400; }
.err { color: #b23b2e; font-size: 14px; }
.empty {
  border-radius: var(--r-lg); padding: 30px; color: var(--muted); margin-top: 18px; text-align: center;
  background: var(--chassis); box-shadow: var(--shadow-recessed);
}
.lockout {
  background: var(--chassis); border-left: 4px solid var(--accent-2); border-radius: var(--r-md);
  padding: 12px 16px; margin-top: 18px; font-size: 14px; box-shadow: var(--shadow-card);
}

/* ----- Buttons ("physical keys") ----- */
.btn {
  position: relative; display: inline-block; border: 0; cursor: pointer;
  background: var(--accent); color: var(--accent-fg);
  font: inherit; font-weight: 700; font-size: 14px; letter-spacing: .04em; text-transform: uppercase;
  padding: 12px 22px; border-radius: var(--r-md); text-decoration: none;
  box-shadow: 5px 5px 12px rgba(13,93,44,.30), -4px -4px 10px rgba(255,255,255,.55), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), filter .15s ease;
}
.btn:hover { filter: brightness(1.07); }
.btn:active {
  transform: translateY(2px);
  box-shadow: inset 4px 4px 9px rgba(13,93,44,.40), inset -3px -3px 8px rgba(255,255,255,.25);
}
.btn-sm { padding: 8px 15px; font-size: 12px; }
/* Secondary chassis key (used in some app contexts) */
.btn-ghost { background: var(--chassis); color: var(--ink); box-shadow: var(--shadow-card); }
.btn-ghost:hover { color: var(--accent-ink); filter: none; }
.btn-ghost:active { box-shadow: var(--shadow-pressed); }

.linklike { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; font-size: 13.5px; color: var(--muted); cursor: pointer; text-transform: uppercase; letter-spacing: .04em; }
.linklike:hover { color: var(--accent-ink); }
.linklike.danger { color: #b23b2e; }
.inline { display: inline; }

/* ----- Recessed input wells ----- */
.authcard input, .row input[type="text"], .row input[type="search"],
.row select, .filters select {
  width: 100%; padding: 13px 14px; border: 0; border-radius: var(--r-md);
  font: 500 14px/1.4 "JetBrains Mono", ui-monospace, monospace; color: var(--ink);
  background: var(--chassis); box-shadow: var(--shadow-recessed); transition: box-shadow .2s var(--ease);
}
.authcard input::placeholder, .row input::placeholder { color: var(--muted); opacity: .55; }
.authcard input:focus-visible, .row input:focus-visible, .row select:focus-visible, .filters select:focus-visible {
  outline: none; box-shadow: var(--shadow-recessed), var(--glow);
}

/* ----- Auth card ----- */
.authcard {
  max-width: 400px; margin: 56px auto; background: var(--chassis); border-radius: var(--r-lg);
  padding: 30px 30px 34px; box-shadow: var(--shadow-card); background-image: var(--screws); background-clip: padding-box;
}
.authcard h1 { font-size: 22px; margin: 0 0 14px; }
.authcard label { display: block; margin: 14px 0 5px; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-family: "JetBrains Mono", monospace; }
.authcard .btn { width: 100%; margin-top: 20px; }

/* ----- Bolted panels (cards) ----- */
.card, .match, .plan {
  position: relative; background: var(--chassis); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card); transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card  { padding: 20px 24px; margin: 18px 0; background-image: var(--screws); background-clip: padding-box; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; }
.card h2 { margin: 0; font-size: 19px; }
.card h4 { margin: 16px 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 0; }
.chips li { background: var(--chassis); border-radius: 999px; padding: 5px 13px; font-size: 12.5px; display: flex; align-items: center; gap: 6px; box-shadow: var(--shadow-card); font-family: "JetBrains Mono", monospace; }
.chips .x { background: none; border: 0; cursor: pointer; color: var(--muted); font-size: 15px; padding: 0; line-height: 1; }
.chips .x:hover { color: #b23b2e; }
.row { display: flex; gap: 10px; margin: 10px 0 4px; }
.row input[type="text"], .row input[type="search"], .row select { flex: 1; }
.newlist { margin-top: 20px; }

/* ----- Keyword matches ----- */
.match { padding: 15px 18px 15px 20px; margin: 14px 0; overflow: hidden; }
.match::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); box-shadow: var(--glow); }
.match h3 { margin: 2px 0 4px; font-size: 16px; }
.match-meta { font-size: 12px; color: var(--muted); letter-spacing: .03em; }
.match-kw { font-size: 13.5px; }
.snippet { font-size: 13.5px; color: var(--muted); margin: 6px 0 0; }

/* ----- Plans ----- */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 22px; }
.plan { padding: 22px; }
.plan-current { box-shadow: var(--shadow-floating), 0 0 0 2px var(--accent); }
.plan h3 { margin: 0; font-size: 17px; }
.price { font-family: "JetBrains Mono", monospace; font-weight: 600; font-size: 32px; color: var(--ink); margin: 8px 0; letter-spacing: -.02em; }
.price span { font-size: 13px; color: var(--muted); font-weight: 500; }
.plan ul { padding-left: 18px; font-size: 13.5px; margin: 0 0 14px; color: var(--muted); }
.plan li { margin: 5px 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===== Opportunity feed & project pages ===== */
.page-head { margin: 10px 0 20px; }
.page-head .sub { color: var(--muted); margin-top: 4px; }

/* Stat tiles — recessed gauges with monospace readouts */
.statbar { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; }
.stat {
  display: flex; flex-direction: column; align-items: center; border: 0; border-radius: var(--r-md);
  padding: 12px 18px; text-decoration: none; background: var(--chassis); min-width: 96px;
  box-shadow: var(--shadow-recessed); transition: box-shadow .2s var(--ease);
}
.stat:hover { box-shadow: var(--shadow-recessed), var(--glow); }
.stat.active { box-shadow: var(--shadow-recessed), 0 0 0 2px var(--accent); }
.stat-num { font-size: 24px; font-weight: 700; color: var(--ink); font-family: "JetBrains Mono", monospace; }
.stat.active .stat-num { color: var(--accent-ink); }
.stat-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }

.filters { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 20px; }

/* Project cards */
.project-card h2 { margin: 4px 0 8px; font-size: 20px; }
.project-card h2 a { color: var(--ink); text-decoration: none; }
.project-card h2 a:hover { color: var(--accent-ink); }
.project-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-floating); }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.crumbs { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.crumbs a { color: var(--muted); }

/* Opportunity score — illuminated readout */
.score { background: var(--accent); color: var(--accent-fg); font-weight: 700; border-radius: 999px; padding: 5px 14px; font-size: 14px; font-family: "JetBrains Mono", monospace; box-shadow: var(--glow), inset 0 1px 0 rgba(255,255,255,.3); }

.metrics { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--muted); margin: 6px 0 10px; }
.metrics .badge { background: var(--ink); color: #fff; border-radius: var(--r-sm); padding: 3px 9px; font-size: 11px; font-family: "JetBrains Mono", monospace; box-shadow: var(--shadow-card); }

/* Status chips — LED-style indicators (colored dot + recessed pill) */
.status { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 4px 11px 4px 9px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-family: "JetBrains Mono", monospace; background: var(--chassis); color: var(--muted); box-shadow: var(--shadow-recessed); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 7px 1px currentColor; }
.status-approved { color: #1f8a3b; }
.status-denied, .status-withdrawn { color: #b23b2e; }
.status-hearing_scheduled, .status-continued { color: #b8770b; }
.status-new { color: #1d6fae; }

.card-actions { display: flex; gap: 10px; margin-top: 10px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; font-size: 14px; margin: 8px 0; }
.kv dt { color: var(--muted); font-family: "JetBrains Mono", monospace; font-size: 12.5px; }
.kv dd { margin: 0; color: var(--ink); }

/* Evidence — a machined groove holding a quoted line */
.evidence { border-radius: var(--r-md); background: var(--chassis); box-shadow: var(--shadow-recessed); border-left: 3px solid var(--accent); padding: 11px 15px; margin: 10px 0; font-size: 14px; color: var(--muted); font-style: italic; }
.event-card { margin-bottom: 10px; }

@media (max-width: 640px) {
  .topbar { flex-direction: column; gap: 10px; }
  .row { flex-direction: column; }
  .wrap { padding: 14px 18px 56px; }
}