/* ============================================================
   GLOBAL MISSION ACADEMY — components.css
   Reusable UI primitives. Requires colors_and_type.css.
   Scope under .gm. No gradients, no pills, sharp/2–4px radii.
   ============================================================ */

/* ---------------- Buttons ---------------- */
.gm .btn{
  font-family:var(--font-label);
  font-weight:700;
  font-size:.8125rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  line-height:1;
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding:14px 26px;
  border:1.5px solid transparent;
  border-radius:var(--radius-2);
  cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  text-decoration:none;
  white-space:nowrap;
}
.gm .btn:active{transform:translateY(1px);}
.gm .btn:focus-visible{outline:2px solid var(--focus-ring); outline-offset:2px;}

.gm .btn--primary{background:var(--accent); color:var(--on-accent); border-color:var(--accent);}
.gm .btn--primary:hover{background:var(--accent-hover); border-color:var(--accent-hover);}
.gm .btn--primary:active{background:var(--accent-press); border-color:var(--accent-press);}

.gm .btn--navy{background:var(--navy-800); color:var(--fg-on-dark-1); border-color:var(--navy-800);}
.gm .btn--navy:hover{background:var(--navy-700); border-color:var(--navy-700);}

/* Outline — on light surfaces */
.gm .btn--outline{background:transparent; color:var(--navy-800); border-color:var(--navy-800);}
.gm .btn--outline:hover{background:var(--navy-800); color:var(--fg-on-dark-1);}

/* Ghost — on dark surfaces */
.gm .btn--ghost-light{background:transparent; color:var(--fg-on-dark-1); border-color:var(--line-on-dark);}
.gm .btn--ghost-light:hover{border-color:var(--beige-400); background:rgba(244,241,235,.06);}

.gm .btn--sm{padding:9px 16px; font-size:.75rem; letter-spacing:.12em;}
.gm .btn--lg{padding:18px 34px; font-size:.875rem;}

/* ---------------- Badges / chips ---------------- */
.gm .badge{
  font-family:var(--font-label);
  font-weight:700;
  font-size:.6875rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  padding:5px 10px;
  border-radius:var(--radius-1);
  display:inline-flex; align-items:center; gap:.4em;
  border:1px solid var(--line);
  color:var(--fg2);
  background:var(--surface);
}
.gm .badge--navy{background:var(--navy-800); color:var(--beige-400); border-color:var(--navy-800);}
.gm .badge--brown{background:var(--brown-100); color:var(--brown-700); border-color:var(--brown-300);}
.gm .badge--outline{background:transparent; color:var(--accent); border-color:var(--accent);}

/* ---------------- STANAG / certification level chip ---------------- */
.gm .level-chip{
  display:inline-flex; flex-direction:column; align-items:center;
  border:1.5px solid var(--brown-700);
  border-radius:var(--radius-2);
  background:var(--navy-800);
  color:var(--fg-on-dark-1);
  min-width:108px;
  overflow:hidden;
}
.gm .level-chip__code{
  font-family:var(--font-label); font-weight:700;
  font-size:1.5rem; letter-spacing:.16em;
  padding:12px 16px 8px;
  font-variant-numeric:tabular-nums;
}
.gm .level-chip__label{
  font-family:var(--font-label); font-weight:700;
  font-size:.625rem; letter-spacing:.18em; text-transform:uppercase;
  width:100%; text-align:center;
  background:var(--brown-700); color:var(--paper);
  padding:5px 8px;
}

/* ---------------- Cards ---------------- */
.gm .card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-2);
  box-shadow:var(--shadow-1);
}
.gm .card--bordered{box-shadow:none; border-color:var(--line);}
.gm .card--accent{border-top:3px solid var(--brown-700);}
.gm .card--navy{background:var(--navy-800); border-color:var(--navy-700); color:var(--fg-on-dark-1);}

/* ---------------- Inputs ---------------- */
.gm .field{display:flex; flex-direction:column; gap:7px;}
.gm .field__label{
  font-family:var(--font-label); font-weight:700;
  font-size:.6875rem; text-transform:uppercase; letter-spacing:.16em;
  color:var(--fg2);
}
.gm .input{
  font-family:var(--font-sans); font-size:1rem;
  padding:12px 14px;
  background:var(--paper-raised);
  border:1.5px solid var(--line);
  border-radius:var(--radius-1);
  color:var(--fg1);
  transition:border-color var(--dur) var(--ease);
}
.gm .input::placeholder{color:var(--fg3);}
.gm .input:focus{outline:none; border-color:var(--brown-700);}
.gm .input:focus-visible{outline:2px solid var(--focus-ring); outline-offset:2px;}

/* ---------------- Utility ---------------- */
.gm .container{max-width:var(--maxw); margin:0 auto; padding:0 var(--space-6);}
.gm .stack > * + *{margin-top:var(--space-4);}
.gm .rule-accent{height:2px; width:56px; background:var(--brown-700); border:0;}
.gm .seal{
  /* simple bracket frame motif used around level codes & numbers */
  border:1.5px solid var(--brown-700);
  border-radius:var(--radius-1);
  padding:2px 8px;
  display:inline-block;
}