/* Shared styles for the site pages (landing, results).
   The test player has its own self-contained styling, matched to the real
   computer-delivered exam interface - do not apply this file to it. */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: #111;
  background: #fff;
}

/* ---------- header ---------- */
header {
  border-bottom: 1px solid #e6e6e6;
  padding: 0 20px;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.logo {
  font-weight: 700;
  font-size: 20px;
  color: #e31837;
  text-decoration: none;
}
nav { margin-left: auto; display: flex; gap: 18px; }
nav a { color: #333; text-decoration: none; font-size: 15px; }
nav a:hover { text-decoration: underline; }

/* ---------- layout ---------- */
.wrap { max-width: 860px; margin: 0 auto; padding: 44px 20px 70px; }
h1 { font-size: 34px; line-height: 1.2; margin: 0 0 14px; }
h2.section { font-size: 22px; margin: 46px 0 14px; }
.lede { font-size: 18px; color: #444; margin: 0 0 30px; }
.note { font-size: 15px; color: #666; margin-top: 16px; }

/* ---------- buttons ---------- */
.cta {
  display: inline-block;
  background: #000; color: #fff;
  text-decoration: none;
  padding: 14px 28px;
  font-size: 16px; font-weight: 700;
  border: 0; cursor: pointer; font-family: inherit;
}
.cta:hover { background: #222; }
.cta.ghost { background: #efefef; color: #535353; font-weight: 400; margin-left: 8px; }
.cta:disabled { opacity: .5; cursor: default; }

/* ---------- module cards ---------- */
.modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
  margin: 20px 0 0;
}
.module {
  border: 1px solid #e0e0e0;
  padding: 20px;
  display: block;
  text-decoration: none;
  color: inherit;
}
.module.live { border-color: #111; border-width: 2px; }
.module.live:hover { background: #fafafa; }
.module.soon { background: #fafafa; color: #666; }
.mtop { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mname { font-size: 18px; font-weight: 700; }
.tag {
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  background: #e6e6e6; color: #555; padding: 3px 8px; border-radius: 2px;
}
.tag.ok { background: #128a12; color: #fff; }
.module p { margin: 0 0 14px; font-size: 15px; }
.module .go { font-size: 14px; font-weight: 700; }
.module.soon .go { font-weight: 400; color: #999; }

/* ---------- panels and forms ---------- */
.panel { background: #f7f7f5; padding: 26px; margin: 40px 0; }
.panel h2 { margin: 0 0 12px; font-size: 20px; }
label { display: block; font-size: 14px; font-weight: 700; margin: 14px 0 5px; }
input {
  width: 100%; max-width: 340px;
  padding: 11px 12px;
  font-family: inherit; font-size: 16px;
  border: 1px solid #595959;
}
input:focus { outline: none; border-color: #007af5; }
input.upper { text-transform: uppercase; max-width: 220px; }
.hint { font-size: 13px; color: #666; margin-top: 5px; }
.divider-line { margin-top: 26px; padding-top: 20px; border-top: 1px solid #ddd; }
.idbox {
  font-family: Consolas, Menlo, monospace;
  font-size: 20px; font-weight: 700;
  background: #fff; border: 2px solid #000;
  padding: 12px 16px; display: inline-block; margin: 10px 0;
}

/* ---------- tables ---------- */
table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; }
th, td { border: 1px solid #ddd; padding: 9px 11px; text-align: left; }
th { background: #f6f6f6; }
.band { font-weight: 700; font-size: 17px; }

/* ---------- misc ---------- */
.warn { color: #b00020; }
.empty { background: #f7f7f5; padding: 30px; text-align: center; color: #555; }
.chart { border: 1px solid #e3e3e3; padding: 16px; margin: 22px 0; }
.idline { color: #666; font-size: 14px; margin-bottom: 26px; }
.disclaim { font-size: 12px; color: #666; margin-top: 30px; line-height: 1.6; }

footer {
  border-top: 1px solid #e6e6e6;
  padding: 26px 20px;
  font-size: 13px; color: #666; line-height: 1.6;
}
footer .wrap { padding: 0; max-width: 860px; margin: 0 auto; }

@media (max-width: 560px) {
  h1 { font-size: 27px; }
  nav { gap: 12px; }
  nav a { font-size: 14px; }
  .cta.ghost { margin-left: 0; margin-top: 8px; }
}