/* LMS Examination Tracks - Front-end styles */

/* Lowepost design tokens, read off lowepost.com: Inter throughout, magenta
   primary, navy headings, 4px radius, 600-weight sentence-case button labels. */
:root {
  --lms-brand:       #cd1da0;
  --lms-brand-dark:  #a91783;
  --lms-accent:      #cc3366;
  --lms-ink:         #1c244b;
  --lms-text:        #333;
  --lms-muted:       #6b6b7b;
  --lms-line:        #e3e3ea;
  --lms-font:        Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.lms-track-wrap { max-width: 860px; margin: 0 auto; padding: 0 20px; font-family: var(--lms-font); color: var(--lms-text); }

/* ---------------------------------------------------------------------------
   Exam-live overlay
   ---------------------------------------------------------------------------
   While an attempt is running the exam interface covers the whole viewport, so
   the only thing on screen is the paper: no site navigation, no theme header or
   footer, no exam description, no "part of this track" links out, and none of
   the student's own attempt history.

   Done by promoting the exam app to a fixed full-screen layer rather than by
   hiding theme elements one selector at a time. Guessing at a theme's markup
   breaks on the next theme; covering the page cannot, and it cannot accidentally
   hide the exam itself either.

   z-index 9000 is deliberately BELOW the watermark (9990), the modals (9999)
   and the transient notices (10001/10003), all of which must still appear over
   the exam.

   Scrolling is locked on <html> by quiz.js, not here - a stylesheet cannot
   reach the document element from a class on the wrapper. */
.lms-exam-live #lms-quiz-app {
  position: fixed;
  inset: 0;
  z-index: 9000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  padding: 0 16px 64px;
}
.lms-exam-live #lms-quiz-app > .lms-quiz-screen,
.lms-exam-live #lms-quiz-app > form { max-width: 860px; margin: 0 auto; }

/* Only visible inside the overlay: the page title is behind it by then. */
.lms-exam-bar { display: none; }
.lms-exam-live .lms-exam-bar {
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 -16px 20px;
  padding: 14px 16px;
  background: #fff;
  border-bottom: 1px solid var(--lms-line);
}
.lms-exam-bar-title { font-weight: 700; color: var(--lms-ink); }
.lms-track-wrap h1,
.lms-track-wrap h2,
.lms-track-wrap h3 { font-family: var(--lms-font); color: var(--lms-ink); font-weight: 800; line-height: 1.25; }
.lms-track-wrap h2 { font-size: 24px; }
.lms-track-wrap h3 { font-size: 18px; }
.lms-track-wrap a  { color: var(--lms-accent); }

/* Buttons - Lowepost house style. Scoped to the plugin's own screens so the
   theme keeps ownership of everything else. Filled = the one action that moves
   the student forward; outlined = everything secondary. */
.lms-track-wrap .button,
.lms-modal .button {
  display: inline-block;
  font-family: var(--lms-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  padding: 8px 24px;
  border-radius: 4px;
  border: 1.5px solid var(--lms-brand);
  background: transparent;
  color: var(--lms-brand);
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.lms-track-wrap .button:hover,
.lms-modal .button:hover,
.lms-track-wrap .button:focus-visible,
.lms-modal .button:focus-visible {
  background: var(--lms-brand);
  color: #fff;
}

.lms-track-wrap .button-primary,
.lms-modal .button-primary {
  background: var(--lms-brand);
  border-color: var(--lms-brand);
  color: #fff;
}
.lms-track-wrap .button-primary:hover,
.lms-modal .button-primary:hover,
.lms-track-wrap .button-primary:focus-visible,
.lms-modal .button-primary:focus-visible {
  background: var(--lms-brand-dark);
  border-color: var(--lms-brand-dark);
  color: #fff;
}

/* Hero = Start / Submit: the same button, sized for the moment. */
.lms-track-wrap .button-hero,
.lms-modal .button-hero { font-size: 17px; padding: 13px 36px; }

.lms-track-wrap .button:disabled,
.lms-modal .button:disabled { opacity: .55; cursor: not-allowed; }

/* Modals (integrity notice, submit confirmation) */
.lms-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(16, 12, 24, .62);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.lms-modal-card {
  background: #fff;
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 4px;
  padding: 36px 32px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .3);
  font-family: var(--lms-font);
}
.lms-modal-title   { margin: 0 0 16px; font-size: 20px; font-weight: 800; color: var(--lms-ink); }
.lms-modal-text    { margin: 0 0 24px; color: #444; line-height: 1.7; }
.lms-modal-warn    { margin: 0 0 12px; padding: 10px 14px; border-radius: 4px; background: #fff3cd; border: 1px solid #ffc107; color: #6b5200; font-size: 14px; }
.lms-modal-actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }

.lms-track-header { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--lms-line); }
.lms-track-title  { font-size: 34px; margin-bottom: 10px; }
.lms-track-meta   { display: flex; gap: 10px 18px; flex-wrap: wrap; color: var(--lms-muted); font-size: 14px; }
/* Separator between meta items only - a leading bullet on the first one reads as
   a stray glyph, and the items ran together entirely without the stylesheet. */
.lms-track-meta span + span::before { content: '·'; margin-right: 18px; color: #c3c3d0; }

/* Quiz screens */
.lms-quiz-screen { margin: 32px 0; }

/* Timer */
.lms-timer { font-family: var(--lms-font); font-size: 18px; font-weight: 700; text-align: right; color: var(--lms-ink); margin-bottom: 16px; }
/* Final minute: red, and only red. It used to blink once a second, which is
   the last thing someone racing a clock needs in their peripheral vision -
   and flashing content is a genuine accessibility problem, not only a
   distracting one. The colour change carries the message on its own. */
.lms-timer-warning { color: #c62828; }

/* Why the exam closed itself, above the ordinary result. Neutral by default;
   the passing version reads as good news, because it is. */
.lms-time-note {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 4px;
  background: #f0f0f4;
  border-left: 4px solid var(--lms-muted);
  color: var(--lms-text);
  line-height: 1.6;
}
.lms-time-note.is-good {
  background: #e6f4ec;
  border-left-color: #1e6f4a;
}
.lms-time-note strong { color: var(--lms-ink); }
.lms-time-note.is-good strong { color: #1e6f4a; }

/* Questions */
.lms-question { background: #fff; border: 1px solid var(--lms-line); border-radius: 6px; padding: 24px; margin-bottom: 20px; }
.lms-q-number { font-family: var(--lms-font); font-size: 12px; color: var(--lms-muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin-bottom: 6px; }
.lms-q-points { font-weight: 400; text-transform: none; letter-spacing: 0; }
.lms-q-title  { font-size: 18px; font-weight: 700; color: var(--lms-ink); margin-bottom: 16px; }
.lms-q-content { margin-bottom: 16px; color: #444; }
/* "Select all that apply." - marks a multiple-correct question. */
.lms-q-hint { margin: -6px 0 12px; font-size: 13px; color: var(--lms-muted); }
.lms-option   { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--lms-line); border-radius: 4px; cursor: pointer; margin-bottom: 8px; transition: border-color .15s, background .15s; }
.lms-option:hover { border-color: var(--lms-brand); background: #fdf5fb; }
.lms-option:has(input:checked) { border-color: var(--lms-brand); background: #fdf0f9; }
.lms-option input { margin-top: 3px; flex-shrink: 0; accent-color: var(--lms-brand); }
/* Form controls measured border-box.
   width:100% on a control that also carries padding and a border resolves to
   100% of the container PLUS that padding and border, so the short-answer box
   rendered 26px wider than the question card and hung over its right edge.
   Scoped to the plugin's own controls rather than set globally: the exam
   description is theme content and is none of our business. */
.lms-track-wrap input,
.lms-track-wrap textarea,
.lms-track-wrap select,
.lms-modal input,
.lms-modal textarea { box-sizing: border-box; }

.lms-short-answer { width: 100%; font-family: var(--lms-font); padding: 11px 12px; border: 1px solid var(--lms-line); border-radius: 4px; font-size: 15px; }
.lms-short-answer:focus { border-color: var(--lms-brand); outline: 2px solid rgba(205, 29, 160, .15); outline-offset: 0; }

.lms-quiz-footer { margin-top: 24px; text-align: center; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* One question per page. The paper ends at its last question, where Next is
   replaced by Submit - there is no review grid and no flagging to feed it. */
.lms-progress { color: var(--lms-muted); font-size: 14px; margin: 0 0 12px; text-align: center; }
.lms-quiz-paging { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 20px; }
.lms-quiz-paging .button { flex: 0 0 auto; }
/* With Previous disabled on question one, the only control left is Submit -
   which space-between would strand on the left. */
.lms-quiz-paging #lms-submit-btn { margin-left: auto; }

/* Forensic watermark. Tiled identity text at ~1.5% opacity: not readable while
   sitting the exam, but present in the rendered pixels, so a leaked screenshot
   names its source once the levels are pushed. Never printed - a print stylesheet
   would only give someone a clean copy. */
#lms-watermark {
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  justify-content: space-around;
  gap: 40px 60px;
  padding: 30px;
}
#lms-watermark span {
  font-family: var(--lms-font);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  white-space: nowrap;
  color: rgba(0, 0, 0, 0.015);
  transform: rotate(-24deg);
}
@media print { #lms-watermark { display: none; } }

/* Progress bar (track completion) */
.lms-progress-bar { background: #ecedf2; border-radius: 999px; height: 10px; overflow: hidden; margin: 10px 0 24px; max-width: 520px; }
.lms-progress-fill { background: var(--lms-brand); height: 100%; border-radius: 999px; transition: width .3s; }

/* Access / login boxes */
.lms-no-access-box, .lms-login-box { text-align: center; padding: 40px; background: #fbfbfd; border: 1px solid var(--lms-line); border-radius: 6px; }

/* Results - a professional record of an outcome, not a scoreboard. Both states
   share one calm card; the accent bar carries the difference, so a miss is
   stated plainly without an alarm-red panel. */
.lms-result-banner {
  padding: 32px;
  border: 1px solid #e3e3ea;
  border-top: 4px solid var(--lms-ink);
  border-radius: 6px;
  text-align: center;
  margin-bottom: 24px;
  background: #fbfbfd;
  color: var(--lms-ink);
}
.lms-result-banner h2 { font-size: 24px; font-weight: 800; margin: 0; color: var(--lms-ink); }
.lms-result-pass   { border-top-color: #2e9e6b; }
.lms-result-fail   { border-top-color: #8a8fa8; }
.lms-result-sub    { margin-top: 10px; color: #555; font-size: 15px; line-height: 1.6; }
.lms-result-score  { font-size: 15px; margin-top: 14px; color: #6b6b7b; }
.lms-cert-prompt   { text-align: center; margin: 24px 0; }

/* Several tracks completed by one pass: one grouped card. The lead certificate
   keeps the hero button and the share row; the rest are compact rows, so the
   screen still has exactly one primary action. */
.lms-cert-group {
    border: 1px solid #e2e4e7;
    border-radius: 6px;
    padding: 16px 18px;
    background: #fcfcfc;
}
.lms-cert-group-title { font-weight: 600; }
.lms-cert-lead        { padding-bottom: 12px; }
.lms-cert-more        { list-style: none; margin: 0; padding: 0; border-top: 1px solid #e8e8e8; }
.lms-cert-more li {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #f0f0f0;
}
.lms-cert-more li:last-child { border-bottom: 0; }
.lms-cert-more-title { font-weight: 600; }
.lms-cert-more-share { font-size: 13px; color: #0a66c2; text-decoration: underline; }

/* Submission receipt (uploads only - no per-question marking is shown) */
.lms-feedback h3  { margin-bottom: 16px; }
.lms-fb-item      { display: flex; gap: 16px; padding: 16px; border-radius: 8px; margin-bottom: 12px; }
.lms-fb-icon      { font-size: 22px; flex-shrink: 0; }
.lms-fb-q-title   { font-weight: 600; font-size: 14px; margin-bottom: 4px; color: #333; }

/* Warning/notice box (cooldown, resume, maintenance) */
.lms-notice-warn { background: #fff8ec; border: 1px solid #f0d9a8; border-left: 4px solid #e0a12b; border-radius: 4px; padding: 12px 16px; font-size: 14px; color: #6b5200; }

/* Tables (past attempts, exams in a track) */
.lms-past-attempts { margin-top: 48px; }
.lms-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lms-attempts-table { width: 100%; border-collapse: collapse; min-width: 480px; font-size: 15px; }
.lms-attempts-table th { padding: 10px 12px; text-align: left; border-bottom: 2px solid var(--lms-line); color: var(--lms-ink); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .4px; }
.lms-attempts-table td { padding: 12px; text-align: left; border-bottom: 1px solid #f0f0f4; }
/* Best passing result per exam on the track page. Tabular figures so a column
   of percentages lines up on the decimal rather than wandering. */
.lms-best-score { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lms-muted { color: var(--lms-muted); }
.lms-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.lms-badge-passed  { background: #e6f4ec; color: #1e6f4a; }
.lms-badge-failed  { background: #f0f0f4; color: #55596e; }
.lms-badge-pending { background: #fff4e0; color: #8a6100; }
.lms-badge-in_progress { background: #e8effb; color: #1b4a91; }

/* No-JS fallback - hidden when JS is present (quiz.js adds lms-js-loaded to body) */
.lms-nojs-only { display: block; }
.lms-js-loaded .lms-nojs-only { display: none !important; }

.lms-nojs-disclosure { background: #f9f9f9; border: 1px solid #ddd; border-radius: 6px; padding: 20px 24px; margin: 16px 0 24px; }
.lms-nojs-disclosure h3 { margin: 0 0 10px; font-size: 16px; }
.lms-nojs-disclosure ul { margin: 8px 0 8px 20px; line-height: 1.9; }
.lms-nojs-notice { background: #fff3cd; border: 1px solid #ffc107; border-radius: 4px; padding: 10px 14px; margin-top: 12px; font-size: 13px; }

/* No-JS result box - same treatment as the scripted one */
.lms-result-box { padding: 28px 32px; border: 1px solid #e3e3ea; border-top: 4px solid var(--lms-ink); border-radius: 6px; text-align: center; margin-bottom: 24px; background: #fbfbfd; color: var(--lms-ink); }
.lms-result-box h2 { font-size: 24px; font-weight: 800; margin: 0 0 10px; color: var(--lms-ink); }
.lms-result-box p  { color: #555; }
.lms-result-box.lms-passed  { border-top-color: #2e9e6b; }
.lms-result-box.lms-failed  { border-top-color: #8a8fa8; }
.lms-result-box.lms-pending { border-top-color: #1565c0; }

/* File upload question */
.lms-file-upload-wrap { margin-top: 8px; }
.lms-file-label { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.lms-file-label input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.lms-file-btn { display: inline-block; padding: 8px 16px; background: #f0f0f0; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; transition: background .15s; }
.lms-file-label:hover .lms-file-btn { background: #e0e0e0; }
.lms-file-name { font-size: 13px; color: #666; }

/* Drop target. Dragging or pasting a file opens no OS dialog, so the paper
   never leaves full screen - the quieter route, offered next to the button. */
.lms-file-drop {
  border: 1px dashed var(--lms-line);
  border-radius: 6px;
  padding: 18px;
  text-align: center;
  transition: border-color .15s, background .15s;
}
.lms-file-drop.is-over {
  border-color: var(--lms-accent);
  border-style: solid;
  background: #fdf3f7;
}
.lms-file-hint { margin: 10px 0 0; font-size: 13px; color: #666; }

/* Pending review result banner */
.lms-result-review { border-top-color: #1565c0; }

/* Upload feedback item */
.lms-fb-upload { background: #f3f4f6; border-left: 4px solid #9e9e9e; }

/* Badge for pending_review */
.lms-badge-pending_review { background: #e3f2fd; color: #1565c0; }
.lms-badge-disqualified { background: #fdecea; color: #a52217; }
.lms-badge-abandoned { background: #f0f0f4; color: #55596e; }

/* Examiner feedback on a manually marked submission. */

/* Public verification page */
.lms-verify-wrap { max-width: 620px; margin: 60px auto; }
.lms-verify-card { background: #fff; border: 1px solid var(--lms-line); border-top: 4px solid var(--lms-ink); border-radius: 6px; padding: 36px 32px; text-align: center; }
.lms-verify-card h1 { font-size: 24px; font-weight: 800; color: var(--lms-ink); margin: 0 0 20px; }
.lms-verify-card p  { color: #555; }
.lms-verify-status  { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; margin: 0 0 8px; }
.lms-verify-valid   { border-top-color: #2e9e6b; }
.lms-verify-valid   .lms-verify-status { color: #1e6f4a; }
.lms-verify-expired { border-top-color: #e0a12b; }
.lms-verify-expired .lms-verify-status { color: #8a6100; }
.lms-verify-missing { border-top-color: #8a8fa8; }
.lms-verify-missing .lms-verify-status { color: var(--lms-muted); }
.lms-verify-table   { width: 100%; border-collapse: collapse; text-align: left; margin-bottom: 20px; }
.lms-verify-table th { padding: 11px 0; color: var(--lms-muted); font-weight: 400; font-size: 14px; border-bottom: 1px solid #f0f0f4; }
.lms-verify-table td { padding: 11px 0; font-weight: 600; color: var(--lms-ink); text-align: right; border-bottom: 1px solid #f0f0f4; }
.lms-verify-issuer  { font-size: 13px; color: var(--lms-muted); margin-bottom: 18px; }

/* Certificates list (shortcode) */
.lms-certificates-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; font-family: var(--lms-font); }
.lms-cert-card { padding: 24px; background: #fff; border: 1px solid var(--lms-line); border-top: 4px solid var(--lms-brand); border-radius: 6px; }
.lms-cert-card h3 { margin-bottom: 8px; color: var(--lms-ink); font-weight: 800; }

/* Credits box (shortcode) */
.lms-credits-box { font-family: var(--lms-font); padding: 24px; background: #fbfbfd; border: 1px solid var(--lms-line); border-radius: 6px; }
.lms-credits-box p { margin: 0 0 12px; }
.lms-credits-box .button { margin: 4px 6px 4px 0; }

/* Share row - LinkedIn and X keep their own brand colours, so they are set
   inline in the templates; this only lays them out. */
.lms-share-prompt { text-align: center; margin: 8px 0 12px; }
.lms-share-prompt a { margin: 4px 4px; }