/*
 * Platform fixes for the ported FRS assessment pages (generated by
 * scripts/port_frs_assessment.py). The ported CSS is unchanged; this undoes
 * what our own site CSS does to it.
 */

/* Indigo forces `font-family: Inter !important` on body, headings, p, label
   and button site-wide. The assessment is set in Open Sans throughout. */
.frs-page, .frs-page * { font-family: 'Open Sans', sans-serif !important; }

/* The Tailwind reset our pages load sets h1-h6 to `font-size/weight: inherit`
   and zeroes margins. The assessment page relied on the browser defaults for
   its headings and paragraph spacing, so restore those there. */
.frs-page-assessment h1 { font-size: 2em; font-weight: 700; margin: .67em 0; }
.frs-page-assessment h2 { font-size: 1.5em; font-weight: 700; margin: .83em 0; }
.frs-page-assessment h3 { font-size: 1.17em; font-weight: 700; margin: 1em 0; }
.frs-page-assessment p { margin: 1em 0; }

/* Links: the platform's `a:not(.btn)` and `a:hover:not(.btn)` colour rules
   outrank these pages' own link rules, so their colours are pinned here with
   !important (the guard CLAUDE.md documents for every custom page). Values are
   the ported stylesheets' own. */
.frs-page .home-button,
.frs-page .home-button:visited,
.frs-page .home-button:hover,
.frs-page .home-button:focus { color: #ffffff !important; text-decoration: none !important; }
/* Every state, :visited included: the platform's `a:visited:not(.btn)` turns a
   visited link #1b6d99, which left "Begin Assessment" dark on its blue button
   for anyone who had taken the test before. (Headless browsers keep no link
   history, so automated checks cannot see this state; it is pinned here.) */
.frs-page .pa-btn-primary,
.frs-page .pa-btn-primary:visited,
.frs-page .pa-btn-primary:hover,
.frs-page .pa-btn-primary:focus { color: #ffffff !important; text-decoration: none !important; }
.frs-page .pa-roles-link,
.frs-page .pa-roles-link:visited { color: var(--pa-blue-primary) !important; }
.frs-page .pa-roles-link:hover,
.frs-page .pa-roles-link:focus { color: var(--pa-blue-hover) !important; text-decoration: underline !important; }

/* Buttons: the platform styles every <button> (an inset shadow), and the
   Tailwind reset, injected at runtime after this file, sets `line-height:
   inherit`. Two element selectors (0,0,2) beat both, and still lose to any
   class rule in the ported CSS, so the buttons' own styling wins. The line
   height is Google Open Sans's own "normal" (1.362): the platform ships an
   Open Sans @font-face with different metrics, and `normal` there comes out
   4px taller. */
main:where(.frs-page) button { line-height: 1.362; box-shadow: none; }

/* The platform's hover gradient and focus/active inset shadow, cancelled at
   its own specificity for the states these pages never style. The boosted
   copies of their own button rules below come later, so they still win. */
:where(.frs-page) button:hover:not(:disabled) { background-image: none; }
:where(.frs-page) button:focus:not(:disabled),
:where(.frs-page) button:active:not(:disabled) { box-shadow: none; }

/* The Request a Copy form: cancel what the platform's form styles add, above
   their specificity; the boosted form rules below still win over this. */
main.frs-page input, main.frs-page textarea, main.frs-page label {
  font-style: normal; font-weight: 400; box-shadow: none; height: auto; line-height: normal;
}
main.frs-page input::placeholder, main.frs-page textarea::placeholder { font-style: normal; }

/* The results page was built on the browser's default line-height; ours is 1.6,
   and the platform gives headings their own. Two element selectors (0,0,2)
   beat the platform's heading rule; their class rules still win. */
main.frs-page-results { line-height: normal; }

/* Headings: browsers make them bold and let them inherit line-height, and the
   ported pages rely on both. The platform gives headings its own line-height
   (1.2em/1.4em) and the Tailwind reset makes their weight inherit, so restore
   the browser behaviour. Two element selectors (0,0,2) beat those; the ported
   class rules still win. */
main:where(.frs-page) :is(h1, h2, h3, h4, h5, h6) { font-weight: bold; line-height: inherit; }

/* Bootstrap's `.badge` (line-height: 1) collides with the results badge. */
main.frs-page .badge { line-height: normal; }

/* ---- Their own button and form rules, boosted (see BOOST in the script) ---- */
main.frs-page .assessment-landing-wrapper .frs-nav-search input {
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  padding: 7px 16px 7px 38px;
  color: #1a2634;
  font-size: 13px;
  font-family: 'Open Sans', sans-serif;
  width: 180px;
  transition: all 0.3s ease;
  outline: none;
}
main.frs-page .assessment-landing-wrapper .frs-nav-search input::placeholder {
  color: #999999;
}
main.frs-page .assessment-landing-wrapper .frs-nav-search input:focus {
  background: #ffffff;
  border-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
  width: 220px;
}
@media (max-width: 1200px) {
main.frs-page .assessment-landing-wrapper .frs-nav-search input {
  width: 140px;
}
}
@media (max-width: 1200px) {
main.frs-page .assessment-landing-wrapper .frs-nav-search input:focus {
  width: 170px;
}
}
@media (max-width: 1024px) {
main.frs-page .assessment-landing-wrapper .frs-nav-search input {
  width: 120px;
    font-size: 12px;
    padding: 6px 12px 6px 34px;
}
}
@media (max-width: 1024px) {
main.frs-page .assessment-landing-wrapper .frs-nav-search input:focus {
  width: 140px;
}
}
@media (max-width: 900px) {
main.frs-page .assessment-landing-wrapper .frs-nav-search input {
  width: 100px;
}
}
@media (max-width: 860px) {
main.frs-page .assessment-landing-wrapper .frs-nav-search input {
  width: 100%;
    padding: 10px 16px 10px 42px;
    font-size: 14px;
    background: #ffffff;
    color: #1a2634;
}
}
@media (max-width: 860px) {
main.frs-page .assessment-landing-wrapper .frs-nav-search input::placeholder {
  color: #999999;
}
}
@media (max-width: 860px) {
main.frs-page .assessment-landing-wrapper .frs-nav-search input:focus {
  width: 100%;
}
}
main.frs-page .emoji-btn {
  font-size: 40px;
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
}
main.frs-page .emoji-btn:hover {
  transform: scale(1.3);
}
main.frs-page .emoji-btn.selected {
  transform: scale(1.5);
}
main.frs-page .emoji-btn.selected+.emoji-label {
  color: #003963;
    font-weight: 700;
}
main.frs-page .likert-container.has-selection .likert-option:not(:has(.selected)) .emoji-btn {
  opacity: 0.4;
    transform: scale(0.85);
}
main.frs-page .likert-container.has-selection .likert-option:not(:has(.selected)):hover .emoji-btn {
  opacity: 1;
    transform: scale(1.2);
}
main.frs-page .nav-btn {
  background-color: #0072c6;
    color: white;
    border: none;
    padding: 14px 28px;
    font-size: 16px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    float: right;
    margin-top: 20px;
    box-shadow: 0 4px 6px rgba(0, 114, 198, 0.2);
}
main.frs-page .nav-btn:hover {
  background-color: #009dff;
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(0, 157, 255, 0.3);
}
main.frs-page .back-button,
main.frs-page .next-button {
  border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-family: 'Open Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}
main.frs-page .back-button {
  background: #EEF2F6;
    color: #344054;
}
main.frs-page .back-button:hover {
  background: #E1E7EE;
}
main.frs-page .next-button {
  background: #0072CE;
    color: #ffffff;
}
main.frs-page .next-button:hover {
  background: #005FAE;
}
@media (max-width: 500px) {
main.frs-page .back-button,
main.frs-page .next-button {
  padding: 6px 10px; font-size: 11px;
}
}
main.frs-page .screenshot-message-overlay .msg-box .ok-button {
  background: #019CFE;
  color: #fff;
  border: none;
  padding: 0.75rem 2.5rem;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  font-family: 'Open Sans', sans-serif;
  display: block;
  margin: 0 auto;
}
main.frs-page .screenshot-message-overlay .msg-box .ok-button:hover {
  background: #0a8ad6;
  transform: scale(1.02);
}
main.frs-page .screenshot-message-overlay .msg-box .ok-button:active {
  transform: scale(0.98);
}
main.frs-page .frs-page input,
main.frs-page .frs-page textarea {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
main.frs-page .screenshot-message-overlay .msg-box .ok-button {
  background: #019CFE;
  color: #fff;
  border: none;
  padding: 0.75rem 2.5rem;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  font-family: 'Open Sans', sans-serif;
}
main.frs-page .screenshot-message-overlay .msg-box .ok-button:hover {
  background: #0a8ad6;
  transform: scale(1.02);
}
main.frs-page .screenshot-message-overlay .msg-box .ok-button:active {
  transform: scale(0.98);
}
main.frs-page .close-detail {
  background: transparent;
  border: none;
  color: #9fa4aa;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background 0.2s;
  align-self: flex-start;
}
main.frs-page .close-detail:hover {
  background: #f0f4fa;
  color: #4a4f5a;
}
main.frs-page .request-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.8rem;
  background: linear-gradient(145deg, #28a745, #1e7e34);
  color: #ffffff;
  border: none;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(40, 167, 69, 0.35);
  font-family: 'Open Sans', sans-serif;
  letter-spacing: 0.3px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
main.frs-page .request-copy-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s ease;
}
main.frs-page .request-copy-btn:hover::before {
  left: 100%;
}
main.frs-page .request-copy-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: #ffffff;
  fill: none;
}
main.frs-page .request-copy-btn:hover {
  background: linear-gradient(145deg, #1e7e34, #166b2a);
  box-shadow: 0 6px 24px rgba(40, 167, 69, 0.5);
  transform: translateY(-2px) scale(1.02);
}
main.frs-page .request-copy-btn:active {
  transform: scale(0.96);
}
main.frs-page .modal-close {
  position: absolute;
  top: 1rem;
  right: 1.2rem;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: #9fa4aa;
  cursor: pointer;
  transition: color 0.2s, transform 0.2s;
  padding: 4px 8px;
  border-radius: 8px;
  line-height: 1;
}
main.frs-page .modal-close:hover {
  color: #1a2634;
  transform: rotate(90deg);
}
main.frs-page .modal-form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #2e3b48;
  margin-bottom: 0.4rem;
}
main.frs-page .modal-form-group input {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 2px solid #e5eaf0;
  border-radius: 12px;
  font-size: 0.95rem;
  font-family: 'Open Sans', sans-serif;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: #f8faff;
  color: #1a2634;
}
main.frs-page .modal-form-group input:focus {
  outline: none;
  border-color: #019CFE;
  box-shadow: 0 0 0 3px rgba(1, 156, 254, 0.15);
}
main.frs-page .modal-form-group input::placeholder {
  color: #b0b8c4;
}
main.frs-page .modal-submit-btn {
  width: 100%;
  padding: 0.8rem;
  background: linear-gradient(145deg, #019CFE, #0a8ad6);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(1, 156, 254, 0.3);
  margin-top: 0.5rem;
}
main.frs-page .modal-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(1, 156, 254, 0.4);
}
main.frs-page .modal-submit-btn:active {
  transform: scale(0.97);
}
@media (max-width: 600px) {
main.frs-page .request-copy-btn {
  padding: 0.6rem 1.4rem;
    font-size: 13px;
    gap: 0.4rem;
}
}
@media (max-width: 600px) {
main.frs-page .request-copy-btn svg {
  width: 17px;
    height: 17px;
}
}
@media (max-width: 600px) {
main.frs-page .modal-form-group input {
  padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
}
}
main.frs-page .frs-nav-search input {
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  padding: 7px 16px 7px 38px;
  color: #1a2634;
  font-size: 13px;
  font-family: 'Open Sans', sans-serif;
  width: 180px;
  transition: all 0.3s ease;
  outline: none;
}
main.frs-page .frs-nav-search input::placeholder {
  color: #999999;
}
main.frs-page .frs-nav-search input:focus {
  background: #ffffff;
  border-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
  width: 220px;
}
@media (max-width: 1200px) {
main.frs-page .frs-nav-search input {
  width: 140px;
}
}
@media (max-width: 1200px) {
main.frs-page .frs-nav-search input:focus {
  width: 170px;
}
}
@media (max-width: 1024px) {
main.frs-page .frs-nav-search input {
  width: 120px;
    font-size: 12px;
    padding: 6px 12px 6px 34px;
}
}
@media (max-width: 1024px) {
main.frs-page .frs-nav-search input:focus {
  width: 140px;
}
}
@media (max-width: 900px) {
main.frs-page .frs-nav-search input {
  width: 100px;
}
}
@media (max-width: 860px) {
main.frs-page .frs-nav-search input {
  width: 100%;
    padding: 10px 16px 10px 42px;
    font-size: 14px;
    background: #ffffff;
    color: #1a2634;
}
}
@media (max-width: 860px) {
main.frs-page .frs-nav-search input::placeholder {
  color: #999999;
}
}
@media (max-width: 860px) {
main.frs-page .frs-nav-search input:focus {
  width: 100%;
}
}