/* introducing-v3-min.css : the "Introducing CPU-Z Validator V3" page, markup introducing-v3.php.
   Everything is scoped under .iv3-root, the tokens mirror the ones of validation-cpuz-v3.css. */
:root{
    --bg:    #1e1e22;
    --s1:    #242428;
    --s2:    #2a2a2f;
    --s3:    #313137;
    --s4:    #3a3a40;
    --b0:    rgba(255,255,255,0.08);
    --b1:    rgba(255,255,255,0.14);
    --t1:    #e0e0e4;
    --t2:    #b8b8c8;
    --t3:    #8f8fa8;
    --t4:    #7a7a98;
    --pur:   #a62393;
    --pur-hi:#d22dba;
    --pur-lo:rgba(166,35,147,0.10);
    --pur-md:rgba(166,35,147,0.18);
    --red:   #f87171;
    --amb:   #fbbf24;
    --grn:   #34d399;
    --blu:   #60a5fa;
    --red-bg:rgba(248,113,113,0.09);
    --amb-bg:rgba(251,191,36,0.09);
    --grn-bg:rgba(52,211,153,0.09);
    --blu-bg:rgba(96,165,250,0.09);
    --sans:  'Inter', sans-serif;
    --mono:  'IBM Plex Mono', monospace;
    --r:  8px;
    --r2: 12px;
}
.iv3-root *, .iv3-root *::before, .iv3-root *::after{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
/* px sizes on purpose : globals-min.css set the body at 62.5% with em headings. */
.iv3-root{
    background: var(--bg);
    font-family: var(--sans);
    color: var(--t2);
    font-size: 16px;
    line-height: 1.6;
    text-align: left;
    -webkit-font-smoothing: antialiased;
}
.iv3-root .page{
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 28px 90px;
}
.iv3-root a{ color: inherit; text-decoration: none; }
.iv3-root .iv3-link{
    color: var(--pur-hi);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.iv3-root .iv3-link:hover{ color: #e75bd3; }
.iv3-root .iv3-mono{
    font-family: var(--mono);
    font-size: .94em;
    color: var(--t1);
    background: var(--s2);
    border: 1px solid var(--b0);
    border-radius: 4px;
    padding: 0 5px;
}
.iv3-root strong{ color: var(--t1); font-weight: 600; }

/* HERO */
.iv3-root .iv3-hero{
    display: flex;
    gap: 36px;
    align-items: center;
    margin-bottom: 26px;
}
.iv3-root .iv3-hero-main{ flex: 1 1 0; min-width: 0; }
.iv3-root .iv3-hero-side{ flex: 0 0 44%; min-width: 0; }
.iv3-root .iv3-crumb{
    display: flex;
    gap: 8px;
    font-size: 13px;
    color: var(--t4);
    margin-bottom: 12px;
}
.iv3-root .iv3-crumb-cur{ color: var(--t3); }
.iv3-root .iv3-title{
    font-family: var(--sans);
    font-size: clamp(28px, 4.6vw, 44px);
    font-weight: 600;
    color: var(--t1);
    letter-spacing: -.8px;
    line-height: 1.12;
    margin-bottom: 16px;
    text-align: left;
}
.iv3-root .iv3-title-hl{ display: block; color: var(--pur-hi); }
.iv3-root .iv3-lead{
    font-size: 17px;
    line-height: 1.65;
    color: var(--t1);
    margin-bottom: 14px;
}
.iv3-root .iv3-hero-p{
    font-size: 15.5px;
    color: var(--t2);
    margin-bottom: 22px;
}
.iv3-root .iv3-hero-actions{ display: flex; gap: 10px; flex-wrap: wrap; }
.iv3-root .iv3-btn{
    display: inline-flex;
    align-items: center;
    padding: 11px 20px;
    background: var(--s2);
    border: 1px solid var(--b1);
    border-radius: var(--r);
    color: var(--t1);
    font-size: 14px;
    font-weight: 600;
    transition: background .14s, border-color .14s, color .14s;
}
.iv3-root .iv3-btn:hover{ background: var(--s3); border-color: rgba(255,255,255,.28); }
.iv3-root .iv3-btn--primary{
    background: var(--pur);
    border-color: var(--pur);
    color: #fff;
}
.iv3-root .iv3-btn--primary:hover{ background: var(--pur-hi); border-color: var(--pur-hi); }
.iv3-root .iv3-btn:active{ transform: translateY(1px); }

/* SCREENSHOT SLOT, --shot-ratio is set inline by iv3_shot() on the placeholder only */
.iv3-root .iv3-shot{ margin: 0; }
.iv3-root .iv3-shot img{
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--b0);
    border-radius: var(--r2);
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.iv3-root .iv3-shot figcaption{
    font-size: 12.5px;
    color: var(--t4);
    text-align: center;
    margin-top: 8px;
}
.iv3-root .iv3-shot--placeholder figcaption{ display: none; }
.iv3-root .iv3-shot-box{
    aspect-ratio: var(--shot-ratio, 16 / 9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 20px;
    text-align: center;
    color: var(--t4);
    background:
        linear-gradient(135deg, rgba(255,255,255,.025) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.025) 50%, rgba(255,255,255,.025) 75%, transparent 75%),
        var(--s1);
    background-size: 24px 24px, auto;
    border: 1px dashed var(--b1);
    border-radius: var(--r2);
}
.iv3-root .iv3-shot-lbl{
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--t3);
}
.iv3-root .iv3-shot-sub{ font-size: 13px; color: var(--t4); max-width: 34ch; }

/* PANEL + PROSE */
.iv3-root .iv3-panel{
    background: var(--s1);
    border: 1px solid var(--b0);
    border-radius: var(--r2);
    overflow: hidden;
}
.iv3-root .iv3-panel-body{ padding: 22px 24px; }
.iv3-root .iv3-prose p{
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--t2);
    margin-bottom: 14px;
}
.iv3-root .iv3-prose p.iv3-prose-last{ margin-bottom: 0; }

/* MODES SUMMARY */
.iv3-root .iv3-modes{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 26px 0 34px;
}
.iv3-root .iv3-mode{
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    background: var(--s1);
    border: 1px solid var(--b0);
    border-radius: var(--r2);
    transition: border-color .14s, background .14s;
}
.iv3-root .iv3-mode:hover{ border-color: var(--pur-md); background: var(--s2); }
.iv3-root .iv3-mode-num{
    font-family: var(--mono);
    font-size: 12px;
    color: var(--pur-hi);
}
.iv3-root .iv3-mode-txt{ display: flex; flex-direction: column; gap: 4px; flex: 1; }
.iv3-root .iv3-mode-name{ font-size: 15px; font-weight: 600; color: var(--t1); }
.iv3-root .iv3-mode-desc{ font-size: 13px; color: var(--t3); line-height: 1.5; }
.iv3-root .iv3-mode .iv3-pill{ align-self: flex-start; }

/* PILLS, same shape as the .stat-pill of the validation page */
.iv3-root .iv3-pill{
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}
.iv3-root .iv3-pill--now{ background: var(--grn-bg); color: var(--grn); }
.iv3-root .iv3-pill--soon{ background: var(--amb-bg); color: var(--amb); }

/* SECTIONS, header bar + body, same tray as the .sec of the validation page */
.iv3-root .iv3-sec{
    margin-top: 28px;
    border: 1px solid var(--b0);
    border-radius: var(--r2);
    overflow: hidden;
    background: var(--s1);
    scroll-margin-top: 20px;
}
.iv3-root .iv3-sec-head{
    display: flex;
    align-items: center;
    background: var(--s3);
    border-bottom: 1px solid var(--b0);
}
.iv3-root .iv3-sec-n{
    font-family: var(--mono);
    font-size: 11px;
    color: var(--t1);
    padding: 11px 14px;
    border-right: 1px solid rgba(255,255,255,.07);
    background: var(--s4);
    flex-shrink: 0;
}
.iv3-root .iv3-sec-t{
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--t1);
    text-transform: uppercase;
    letter-spacing: .8px;
    padding: 11px 18px;
    margin: 0;
    text-align: left;
    flex-shrink: 0;
}
.iv3-root .iv3-sec-rule{ flex: 1; }
.iv3-root .iv3-sec-head .iv3-pill{ margin-right: 14px; }
.iv3-root .iv3-sec-body{ padding: 22px 24px; }
.iv3-root .iv3-sec-cols{
    display: flex;
    gap: 30px;
    align-items: flex-start;
}
.iv3-root .iv3-sec-cols .iv3-prose{ flex: 1 1 0; min-width: 0; }
.iv3-root .iv3-sec-side{
    flex: 0 0 40%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Severity legend of the Standard section, dots take the diag colours */
.iv3-root .iv3-levels{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -2px 0 16px;
}
.iv3-root .iv3-level{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 600;
}
.iv3-root .iv3-level i{ width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.iv3-root .iv3-level--crit{ background: var(--red-bg); color: var(--red); }
.iv3-root .iv3-level--warn{ background: var(--amb-bg); color: var(--amb); }
.iv3-root .iv3-level--info{ background: var(--blu-bg); color: var(--blu); }

/* Callout of the XOC section */
.iv3-root .iv3-callout{
    background: var(--s2);
    border: 1px solid var(--b0);
    border-left: 3px solid var(--pur);
    border-radius: var(--r);
    padding: 12px 14px;
}
.iv3-root .iv3-callout-head{
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .9px;
    text-transform: uppercase;
    color: var(--t3);
    margin-bottom: 8px;
}
.iv3-root .iv3-callout-list > div{
    display: flex;
    gap: 10px;
    padding: 6px 0;
    border-top: 1px solid rgba(255,255,255,.05);
}
.iv3-root .iv3-callout-list > div:first-child{ border-top: none; }
.iv3-root .iv3-callout-list dt{
    font-family: var(--mono);
    font-size: 12px;
    color: var(--t1);
    flex: 0 0 88px;
    padding-top: 1px;
}
.iv3-root .iv3-callout-list dd{ font-size: 13px; color: var(--t2); line-height: 1.5; }

/* Details list */
.iv3-root .iv3-list{
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.iv3-root .iv3-list li{
    position: relative;
    padding-left: 22px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--t2);
}
.iv3-root .iv3-list li::before{
    content: '';
    position: absolute;
    left: 4px;
    top: 10px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pur);
}

/* DISCORD CTA */
.iv3-root .iv3-cta{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 28px;
    padding: 22px 26px;
    background: var(--s1);
    border: 1px solid var(--b0);
    border-radius: var(--r2);
    scroll-margin-top: 20px;
}
.iv3-root .iv3-cta-head{
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .9px;
    color: var(--t3);
    margin-bottom: 6px;
}
.iv3-root .iv3-cta p{ font-size: 15px; color: var(--t2); }
.iv3-root .iv3-discord-btn{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 13px 28px;
    background: var(--s3);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--r);
    color: var(--t1);
    font-size: 14px;
    font-weight: 600;
    transition: border-color .14s, color .14s;
}
.iv3-root .iv3-discord-btn:hover,
.iv3-root .iv3-discord-btn:focus-visible{ border-color: #e7e9ea; color: #e7e9ea; outline: none; }
.iv3-root .iv3-discord-btn:active{ transform: translateY(1px); }
.iv3-root .iv3-discord-btn svg{ display: block; flex-shrink: 0; }

/* RESPONSIVE, the base is desktop first */
@media (max-width: 1024px){
    .iv3-root .iv3-hero{ flex-direction: column; align-items: stretch; gap: 22px; }
    .iv3-root .iv3-hero-side{ flex-basis: auto; }
    .iv3-root .iv3-sec-cols{ flex-direction: column; gap: 18px; }
    .iv3-root .iv3-sec-side{ flex-basis: auto; width: 100%; }
    .iv3-root .iv3-modes{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
    .iv3-root .page{ padding: 16px 12px 64px; }
    .iv3-root .iv3-panel-body, .iv3-root .iv3-sec-body{ padding: 16px 14px; }
    .iv3-root .iv3-cta{ flex-direction: column; align-items: flex-start; }
    .iv3-root .iv3-discord-btn{ width: 100%; justify-content: center; }
    .iv3-root .iv3-sec-t{ flex-shrink: 1; font-size: 13px; letter-spacing: .5px; padding: 9px 12px; }
}