@charset "utf-8";
/* CSS Document */
/* © 2022 EX3 Inc. All Rights Reserved. */

/***************ASSESSMENT RESULTS*******************/
/* measure-your-hybrid-intelligence.html: the Hybrid Intelligence Matrix drawn
   in the last section ("Calculating Results") once the answers are scored.
   The panel is built by assess.js. Phone / tablet / landscape adjustments live
   in portrait_style.css and landscape_style.css. */

/* The results sit on black (the desktop question pages use a pale wash) */
html.horizontal body.horizontal section:last-of-type {
    background: var(--black);
}

/* On phones and tablets this section carries a photo; it fades back behind the results */
html.horizontal body.horizontal section:last-of-type::after {
    transition: opacity 0.6s ease-in-out;
}

html.horizontal body.horizontal section.hi_done::after {
    opacity: 0.12;
}

/* "Calculating Results" shows first; the panel replaces it when scored */
html.horizontal body.horizontal section.hi_done div.title_area.full_width {
    display: none;
}

html.horizontal body.horizontal div.hi_results {
    position: absolute;
    z-index: 300;
    left: 24%;              /* clear of the logo banner's column */
    right: 5%;
    top: 7%;
    bottom: calc(40px + 4%);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease-in-out, visibility 0s linear 0.6s;
    color: var(--white);
}

html.horizontal body.horizontal div.hi_results::-webkit-scrollbar {
    display: none;
}

html.horizontal body.horizontal section.hi_done div.hi_results {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease-in-out, visibility 0s;
}

/* Prev / Next have nothing to do on the results; Retake takes their place */
html.horizontal body.horizontal:has(section.hi_done.sectionFadein) div.button_group {
    display: none;
}

/* Head: title + position */
div.hi_results .hi_head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 18px 32px;
    padding-bottom: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

div.hi_results .hi_kicker,
div.hi_results .hi_scope,
div.hi_results .hi_axis,
div.hi_results .hi_k {
    font-family: 'Roboto', sans-serif;
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--light-grey);
}

div.hi_results .hi_title {
    opacity: 1;
    margin: 8px 0 0 0;
    font-family: 'Playfair Display';
    font-weight: 400;
    font-size: 30px;
    line-height: 1.15;
    color: var(--white);
}

div.hi_results .hi_score {
    text-align: right;
}

div.hi_results .hi_level {
    font-family: 'Playfair Display';
    font-size: 44px;
    line-height: 1;
    color: var(--white);
}

div.hi_results .hi_scope {
    margin-top: 8px;
}

/* Matrix */
div.hi_results .hi_axis_y {
    margin-bottom: 10px;
}

div.hi_results .hi_axis_x {
    margin-top: 10px;
    text-align: right;
}

div.hi_results .hi_matrix {
    display: grid;
    grid-template-columns: minmax(96px, 140px) repeat(6, minmax(0, 1fr));
    gap: 2px;
}

div.hi_results .hi_cell {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 50px;
    padding: 9px 9px;
    background: rgba(255, 255, 255, 0.035);
    font-family: 'Roboto', sans-serif;
}

div.hi_results .hi_corner {
    min-height: 0;
}

div.hi_results .hi_xhead {
    min-height: 0;
    padding: 0 9px 10px;
    background: none;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.8);
}

div.hi_results .hi_ylabel {
    justify-content: center;
    padding: 8px 14px 8px 0;
    background: none;
}

div.hi_results .hi_num {
    font-family: 'Playfair Display';
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--light-grey);
    margin-bottom: 3px;
}

div.hi_results .hi_name {
    font-family: 'Playfair Display';
    font-size: 16px;
    line-height: 1.15;
    color: var(--white);
}

div.hi_results .hi_below {
    background: rgba(255, 255, 255, 0.09);
}

div.hi_results .hi_here {
    background: rgba(255, 255, 255, 0.92);
    color: var(--black);
    outline: 1px solid rgba(255, 255, 255, 0.92);
    outline-offset: 2px;
}

div.hi_results .hi_here .hi_tag {
    font-family: 'Playfair Display';
    font-size: 12.5px;
    line-height: 1.2;
}

div.hi_results .hi_target {
    outline: 1px dashed rgba(255, 255, 255, 0.55);
    outline-offset: -1px;
}

div.hi_results .hi_target .hi_tag {
    font-size: 9.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
}

/* Readout */
div.hi_results .hi_readout {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

div.hi_results .hi_k {
    margin-bottom: 7px;
}

div.hi_results .hi_v {
    font-family: 'Playfair Display';
    font-size: 19px;
    line-height: 1.2;
    color: var(--white);
}

div.hi_results p.hi_n {
    opacity: 1;
    position: static;
    width: auto;
    margin: 7px 0 0 0;
    font-size: 12.5px;
    font-weight: 300;
    line-height: 1.55;
    color: var(--light-grey);
    animation: none;
}

/* Actions */
div.hi_results .hi_actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    padding-bottom: 4px;
}

div.hi_results .hi_actions a.cta_button:link,
div.hi_results .hi_actions a.cta_button:visited {
    float: none;
    width: auto;
    margin: 0;
    padding: 11px 22px;
    font-size: 15px;
    transform: none;
}

div.hi_results .hi_retake {
    font-family: 'Playfair Display';
    font-size: 15px;
    line-height: 1;
    padding: 11px 22px;
    color: var(--white);
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 7px;
    cursor: pointer;
    transition: border-color 0.3s ease-in-out;
}

div.hi_results .hi_retake:hover {
    border-color: var(--white);
}