/*
 * Dedicated candidate-experience stylesheet -- loaded only by
 * base_candidate.html, the standalone base every candidate-facing
 * template extends. Deliberately not shared with project.css (base.html)
 * or itesthub/static/css/industry/ (base_industry.html): a marketing-site
 * restyle must never be able to change what a candidate mid-test sees.
 * See BACKLOG.md's base-template-split entry for why this file exists.
 *
 * Moved here verbatim from the inline <style> block that used to live at
 * the end of candidate_base.html's <body> -- same rules, same selectors,
 * now a real cacheable stylesheet loaded from <head> instead.
 */

/* Item stems (ff-*, ec-*, na-*, nc-*) live in stems.css so Evenhand can
   load the very same rules from its stable URL -- see that file's header.
   @import must precede every rule in this file. Bump ?v= when stems.css
   changes (same reason as the ?v= on this file's own <link>). */
@import url("stems.css?v=1");

.candidate-experience {
  background: #fff;
  color: #212529;
  font-family: 'Trebuchet MS', Arial, sans-serif;
}

/* Copy protection: on by default, deters casual copy/paste of test
   content. Scoped to the main content area only -- never the header,
   footer, or form controls -- and switched off per-candidate (see
   Candidate.copy_protection_disabled) for anyone who's told us they
   need a screen reader or other assistive technology this would get
   in the way of. */
body.copy-protected main {
  -webkit-user-select: none;
  user-select: none;
}

body.copy-protected main input,
body.copy-protected main textarea,
body.copy-protected main select,
body.copy-protected main button,
body.copy-protected main a,
body.copy-protected main label {
  -webkit-user-select: auto;
  user-select: auto;
}

.candidate-page-width {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 3rem);
}

.candidate-header {
  padding-block: 0.75rem;
  background: #fff;
}

.candidate-brand {
  font-size: 1.125rem;
  font-weight: 600;
}

.candidate-experience main {
  font-size: 1.25rem;
  line-height: 1.5;
}

.candidate-experience .card-body {
  font-size: 1.25rem;
  line-height: 1.55;
}

.candidate-experience .response-matrix th,
.candidate-experience .response-matrix td {
  font-size: 1.25rem;
}

.candidate-experience main {
  width: 100%;
}

.candidate-experience main>.container {
  width: 100%;
  max-width: 2000px;
  padding-inline: clamp(1rem, 3vw, 3rem);
}

.candidate-experience main .w-75 {
  width: 100% !important;
  max-width: 1900px;
}

.candidate-experience main .mt-5 {
  margin-top: 1.5rem !important;
}

.candidate-footer {
  margin-top: 2rem;
  padding-block: 1rem;
  background: #f8f9fa;
}

.candidate-footer a {
  color: #0a58ca;
}

.candidate-skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2000;
  padding: 0.75rem 1rem;
  color: #fff;
  background: #0d6efd;
  border-radius: 0.25rem;
  transform: translateY(-150%);
}

.candidate-skip-link:focus {
  transform: translateY(0);
}

.candidate-experience :focus-visible {
  outline: 3px solid #0b5ed7;
  outline-offset: 3px;
}

.candidate-experience .asteriskField {
  display: none;
}

/* Radio/checkbox answer options: make the whole row (not just the small
   input or the text itself) a single, generously-sized click/tap target,
   with hover shading so it's clear the row is selectable. Scoped to
   plain form-check rows only -- the response-matrix table (used for
   True/False/Cannot-Tell style items) already has its own full-cell
   clickable styling and isn't affected by this. */
.candidate-experience .form-check {
  padding-left: 0;
  margin-bottom: 0.5rem;
}

.candidate-experience .form-check-input {
  margin-left: 0;
  margin-top: 0;
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
}

.candidate-experience .form-check-label {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 2.75rem;
  margin-left: 0.65rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  cursor: pointer;
}

.candidate-experience .form-check {
  display: flex;
  align-items: center;
}

.candidate-experience .form-check-label:hover {
  background-color: #f0f4f9;
}

@media (prefers-contrast: more) {
  .candidate-experience .form-check-label:hover {
    outline: 2px solid currentColor;
  }
}

/* Candidate Hub components -- self-contained equivalents of a few Industry
   design-system patterns (blueprint card + corner marks, tag, kicker,
   ghost button), copied for LOOK only, at the values Industry already uses
   (#416180 is its --color-accent-700, already verified >=4.5:1 on white
   elsewhere in this app; 2-4px radii match its --radius-md). This file
   does not import or reference Industry's stylesheet or var() tokens --
   see base_candidate.html for why that dependency is exactly what this
   file exists to avoid. */
.candidate-kicker {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #416180;
}

.candidate-card {
  position: relative;
  border: 1px solid rgba(29, 31, 32, 0.16);
  border-radius: 2px;
}

.candidate-card .corner {
  position: absolute;
  width: 11px;
  height: 11px;
  color: rgba(29, 31, 32, 0.55);
}

.candidate-card .corner::before,
.candidate-card .corner::after {
  content: "";
  position: absolute;
  background: currentColor;
}

.candidate-card .corner::before {
  left: 5px;
  top: 0;
  width: 1px;
  height: 100%;
}

.candidate-card .corner::after {
  top: 5px;
  left: 0;
  width: 100%;
  height: 1px;
}

.candidate-card .corner.tl {
  top: -6px;
  left: -6px;
}

.candidate-card .corner.tr {
  top: -6px;
  right: -6px;
}

.candidate-card .corner.bl {
  bottom: -6px;
  left: -6px;
}

.candidate-card .corner.br {
  bottom: -6px;
  right: -6px;
}

.candidate-progress-track {
  flex: 1;
  height: 6px;
  border: 1px solid rgba(29, 31, 32, 0.16);
  border-radius: 2px;
  overflow: hidden;
}

.candidate-progress-fill {
  height: 100%;
  background: #416180;
}

.candidate-tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: 3px;
  white-space: nowrap;
}

.candidate-tag-neutral {
  background: #f5f5f8;
  color: #424244;
}

.candidate-tag-accent {
  background: #eef6ff;
  color: #2c455d;
}

.candidate-tag-outline {
  border: 1px solid #416180;
  color: #416180;
}

.candidate-btn-ghost {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border: 1px solid #416180;
  border-radius: 0.375rem;
  color: #416180;
  text-decoration: none;
  background: transparent;
}

.candidate-btn-ghost:hover {
  background: #eef6ff;
  color: #2c455d;
}

.candidate-details {
  border: 1px solid rgba(29, 31, 32, 0.16);
  border-radius: 2px;
}

.candidate-details summary {
  cursor: pointer;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 15px;
}

/* ---------------------------------------------------------------------
   Integrity presentation (see clients/candidate_base.html and
   clients/templatetags/candidate_integrity.py). Ported from Evenhand's
   own .stamp / .watermark rules so a candidate sees the same thing
   whichever runner delivers their test.

   STIMULUS INTEGRITY, which is the whole constraint here: the watermark
   is painted at 4.5% opacity BEHIND every piece of page content, never
   over it. The header, main content and footer each get their own
   stacking context above it, and the item stimulus card is given an
   explicitly opaque background, so no test item is ever seen through a
   watermarked surface. An item whose contrast or polarity has been
   altered is no longer the item the norms were built on (CLAUDE.md).
   --------------------------------------------------------------------- */

.candidate-watermark {
  position: fixed;
  inset: -20%;
  z-index: 0;
  opacity: 0.045;
  pointer-events: none;
  background-repeat: repeat;
  background-size: 560px 340px;
  transform: rotate(-18deg);
}

/* The viewer-driven half of the watermark suppression rule (the
   profile-driven half is accommodations.watermark_suppressed, which stops
   the element being rendered at all).

   Someone running OS high contrast, or Windows forced-colors, has told the
   browser precisely this: transform the page so I can read it. A 4.5%
   repeating tile is exactly the kind of thing such a transform lifts out of
   the background and puts across the text, and believing them costs
   nothing -- the name and reference stamps stay, so the page is still
   traceable. This catches the candidates who never declared an adjustment,
   which is most of them.

   Only the tile goes. Nothing else about the page changes, and in
   particular no stimulus is re-rendered: altering an item's contrast or
   polarity changes what it measures (CLAUDE.md). forced-colors is the
   browser's own transform, not ours. */
@media (prefers-contrast: more) {
  .candidate-watermark {
    display: none;
  }
}

@media (forced-colors: active) {
  .candidate-watermark {
    display: none;
  }
}

/* Everything the candidate actually reads sits above the watermark. A
   z-index:-1 watermark would NOT work here: .candidate-experience paints
   an opaque white background on <body>, which would hide it entirely. */
.candidate-experience>.candidate-header,
.candidate-experience>main,
.candidate-experience>footer,
.candidate-experience>.candidate-stamp,
.candidate-experience>.container {
  position: relative;
  z-index: 1;
}

/* The stimulus never shows the watermark through it. Bootstrap's .card is
   already opaque, but saying so here means a future card restyle cannot
   quietly make a test item translucent. */
.candidate-experience .assessment-passage,
.candidate-experience .assessment-passage .card-body {
  background-color: #fff;
}

.candidate-stamp {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1em;
  padding: 0.25rem clamp(1rem, 3vw, 3rem);
  /* #595959 on #fff is 7.0:1 -- comfortably past the 4.5:1 the stamps need
     as ordinary body text, at the small size they are set in. Bootstrap's
     own .text-muted (#6c757d) is only 4.68:1 and would leave no margin. */
  color: #595959;
  background: #fff;
  font-size: 0.8125rem;
  line-height: 1.3;
}

.candidate-stamp-top {
  border-bottom: 1px solid #dee2e6;
}

/* The countdown badge (_assessment_timer.html) is position:fixed at the top
   right of the viewport, so on a timed test it floats over whatever is up
   there -- which is now this stamp's right-hand text. Reserve the width of
   the badge plus its margin so the two never overlap. Only on a page that
   actually has a timer: :has() is already relied on elsewhere in this file's
   sibling rules (see candidate_test_wizard_question.html), and a browser
   without it simply shows the pre-existing overlap rather than a blank gap
   on every untimed page. */
@media (min-width: 601px) {
  body:has(.assessment-timer) .candidate-stamp-top {
    padding-right: 15rem;
  }
}

.candidate-stamp-bottom {
  border-top: 1px solid #dee2e6;
}

@media (max-width: 600px) {
  .candidate-stamp {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
  }
}

/* The instruction to AI assistants, sitting directly beneath the stimulus
   and above the response options (clients/_ai_assistant_notice.html).

   SIZE: the same 0.8125rem / 0.75rem pair .candidate-stamp uses -- the size
   this notice had while it lived in the footer. Rob, 16 Sep 2026, on seeing
   it at body size on the Numerical, Verbal and SJT screens: "The text is
   very big and distracts from the test. Keep it the same font size as
   before and place in the current position." So the POSITION stays (under
   the stimulus, inside any crop of the item) and only the weight comes
   back down.

   COLOUR: #495057 on this band is 7.6:1, kept deliberately dark rather than
   reverted to Bootstrap's .text-muted (#6c757d, 4.68:1 on white and below
   the bar on a tint). At a smaller size contrast matters more, not less,
   for coming through a photograph and an OCR pass.

   WEIGHT: it still has to be distinguishable from the item so it cannot be
   mistaken for an instruction to the CANDIDATE -- but at this size the
   earlier 2px rule, 4px edge marker and #f1f3f5 band read as a heavy slab
   next to small type. They are dialled back to a hairline, a thin marker
   and the lighter #f8f9fa: the block is still visibly not part of the
   question, and now sits quietly. Its first two words say who it addresses.
   No max-width or truncation -- every word has to be legible in a crop. */

.candidate-ai-notice {
  margin: 0.6rem 0 0;
  padding: 0.4rem 0.6rem;
  border-top: 1px solid #dee2e6;
  border-left: 3px solid #ced4da;
  border-radius: 0 0.25rem 0.25rem 0;
  background-color: #f8f9fa;
  color: #495057;
  font-size: 0.8125rem;
  line-height: 1.35;
}

@media (max-width: 600px) {
  .candidate-ai-notice {
    padding: 0.35rem 0.55rem;
    font-size: 0.75rem;
  }
}

/* ---------------------------------------------------------------------
   The SJT conversation summary, as a filled banner flush beneath the
   video (clients/_sjt_video_stimulus.html). Rob, 16 Sep 2026, matching
   how his other platform presents the Empathic Leader.

   These rules live HERE rather than in the question step's own <style>
   block because the video partial is also included by the "before you
   begin" step's example question, which has a different style block --
   a shared partial should not depend on which page happens to include it.

   COLOUR: #416180 is Industry's --color-accent-700, the same step
   bootstrap-bridge.css already uses wherever white text sits on the
   accent (the raw --color-accent is only 2.9:1 with white and fails).
   White on #416180 is 6.5:1 -- comfortably past the 4.5:1 that is the
   hard constraint here. The literal value, not a var(): this file
   deliberately does not reference Industry's tokens (see the Candidate
   Hub components block above, and base_candidate.html for why).

   FONT: inherited, which on candidate pages is the Trebuchet MS stack
   .candidate-experience sets -- NOT Barlow. Barlow is the Industry
   design system's font, loaded from Google Fonts by base_industry.html;
   the candidate experience deliberately does not load it, because a
   render-blocking third-party font request on every page of a timed test
   is exactly the dependency base_candidate.html exists to avoid. --------------------------------------------------------------------- */

.sjt-video--with-summary {
  /* Flush to the banner: the two read as one block. */
  border-radius: 0.375rem 0.375rem 0 0;
  margin-bottom: 0;
}

.sjt-summary {
  display: block;
  padding: 0.6rem 0.9rem;
  background-color: #416180;
  color: #fff;
  border-radius: 0 0 0.375rem 0.375rem;
  font-size: 1rem;
  line-height: 1.4;
}

/* No video above it (a browser that cannot play the file, or a text-only
   variant): the banner is then the whole block and rounds on all corners. */
.sjt-summary--standalone {
  border-radius: 0.375rem;
}

.sjt-summary-label {
  font-weight: 700;
  margin-right: 0.35rem;
}

/* stem_context arrives as authored HTML (a <p>), so the paragraph's own
   margins have to come off for the banner to sit two lines deep rather
   than carrying a blank line above and below its text. */
.sjt-summary-text,
.sjt-summary-text p {
  display: inline;
  margin: 0;
}

/* The standing instruction above the Most/Least matrix. Centred, matching
   the reference layout; the wording is in the template. */
.sjt-prompt {
  margin: 1rem 0 0.75rem;
  text-align: center;
  font-weight: 600;
}