/* dash-gap-miner.css - Procurement Requirements Gap Miner.
 *
 * Aesthetic flavor: FIELD GEOLOGY / MARKET ORE ASSAY.
 *
 * The surface treats procurement requirements as ore samples: dark moss
 * ground, limestone cards, mineral color chips for maturity tiers, and
 * compact assay tables. It avoids procurement-ledger styling.
 */

.gm-page {
  --gm-bg: #20271c;
  --gm-bg-2: #151b12;
  --gm-card: #f0ead6;
  --gm-ink: #171b13;
  --gm-soft: #646b55;
  --gm-line: #879064;
  --gm-lime: #b8d957;
  --gm-gold: #c9972c;
  --gm-red: #bd4f3d;
  --gm-blue: #4f94a8;
  --gm-green: #4e995f;
  color: var(--gm-card);
  background: var(--gm-bg);
}
body.mc.gm-page {
  background:
    radial-gradient(circle at 15% 15%, rgba(184,217,87,0.13), transparent 34%),
    repeating-linear-gradient(28deg, rgba(240,234,214,0.035) 0 2px, transparent 2px 24px),
    var(--gm-bg-2);
  background-image: var(--bg, none) !important;
}
.gm-hud { background: #0d110b; border-bottom: 2px solid var(--gm-lime); font-family: "IBM Plex Mono", monospace; }
.gm-page .callsign,
.gm-page .hud-mode { color: var(--gm-lime); font-family: "Archivo Black", sans-serif; letter-spacing: 0.06em; }
.gm-page .hud-sub { color: #bdc8a1; }
.gm-page .hud-pill { border-radius: 0; background: #171d13; border: 1px solid var(--gm-line); color: var(--gm-lime); }
.gm-page .hud-link { text-decoration: none; }
.gm-stage { max-width: 1440px; padding: 24px 28px 80px; font-family: "Public Sans", sans-serif; }
.gm-hero { max-width: 1080px; padding: 24px; margin-bottom: 18px; border: 1px solid rgba(184,217,87,0.45); background: rgba(13,17,11,0.72); }
.gm-kicker { margin: 0 0 8px; color: var(--gm-gold); font: 800 12px "IBM Plex Mono", monospace; letter-spacing: 0.16em; text-transform: uppercase; }
.gm-hero h1 { margin: 0; font: 800 clamp(36px, 7vw, 78px)/0.94 "Archivo Black", sans-serif; letter-spacing: -0.05em; text-transform: uppercase; }
.gm-hero p:last-child { color: #d0d8b8; max-width: 780px; line-height: 1.55; }
.gm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 0.72fr); gap: 18px; }
.gm-panel { background: var(--gm-card); color: var(--gm-ink); border: 1px solid var(--gm-line); box-shadow: 7px 7px 0 rgba(0,0,0,0.48); margin-bottom: 18px; }
.gm-panel header { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #c9bd91; background: #fbf6e4; }
.gm-panel header span { display: grid; place-items: center; width: 34px; height: 34px; background: var(--gm-bg); color: var(--gm-lime); font: 800 12px "IBM Plex Mono", monospace; }
.gm-panel h2 { margin: 0; font: 800 20px "Archivo Black", sans-serif; text-transform: uppercase; }
.gm-gaps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; padding: 14px; }
.gm-gap-card { border: 1px solid #c9bd91; background: #fff9e8; padding: 12px; }
.gm-gap-card header { display: flex; justify-content: space-between; padding: 0; border: 0; background: transparent; font: 800 12px "IBM Plex Mono", monospace; text-transform: uppercase; }
.gm-gap-card p { color: var(--gm-soft); line-height: 1.4; }
.gm-examples p { font-size: 12px; margin: 7px 0 0; }
.gm-tier { display: inline-block; padding: 3px 7px; color: #111; font: 800 11px "IBM Plex Mono", monospace; text-transform: uppercase; background: #d8d0b8; }
.gm-tier-missing { background: var(--gm-red); color: white; }
.gm-tier-scaffold-only { background: var(--gm-gold); }
.gm-tier-executable { background: var(--gm-blue); color: white; }
.gm-tier-e2e-tested { background: var(--gm-green); color: white; }
.gm-tier-production-used { background: var(--gm-lime); }
.gm-plan { padding: 14px; }
.gm-plan-row { display: grid; grid-template-columns: 46px 1fr; gap: 10px; border-bottom: 1px solid #c9bd91; padding: 10px 0; }
.gm-step { display: grid; place-items: center; background: var(--gm-bg); color: var(--gm-lime); font: 800 13px "IBM Plex Mono", monospace; }
.gm-plan-row h3 { margin: 0; font: 800 16px "Archivo Black", sans-serif; text-transform: uppercase; }
.gm-plan-row p { margin: 4px 0; color: var(--gm-soft); }
.gm-plan-row small { font: 800 11px "IBM Plex Mono", monospace; color: var(--gm-bg); text-transform: uppercase; }
.gm-filter { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px; border-bottom: 1px solid #c9bd91; }
.gm-filter-btn { border: 1px solid var(--gm-line); background: #fff9e8; padding: 7px 10px; cursor: pointer; font: 800 11px "IBM Plex Mono", monospace; text-transform: uppercase; }
.gm-filter-active, .gm-filter-btn:hover { background: var(--gm-lime); }
.gm-reqs { padding: 14px; overflow-x: auto; }
.gm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.gm-table th { text-align: left; background: var(--gm-bg); color: var(--gm-lime); padding: 8px; font: 800 11px "IBM Plex Mono", monospace; text-transform: uppercase; }
.gm-table td { border-bottom: 1px solid #d5c9a0; padding: 8px; vertical-align: top; }
.gm-table p { margin: 4px 0 0; color: var(--gm-soft); }
.gm-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; padding: 14px; }
.gm-legend article { border: 1px solid #c9bd91; background: #fff9e8; padding: 10px; }
.gm-legend p { margin: 8px 0 0; color: var(--gm-soft); }
.gm-foot { display: flex; justify-content: space-between; gap: 18px; color: #d0d8b8; font-size: 12px; line-height: 1.45; }
.gm-foot p { margin: 0; }
.gm-empty { padding: 16px; }
code { font-family: "IBM Plex Mono", monospace; background: rgba(184,217,87,0.16); padding: 1px 4px; }
@media (max-width: 980px) { .gm-stage { padding: 18px 14px 60px; } .gm-grid { grid-template-columns: 1fr; } .gm-foot { flex-direction: column; } }