/* =========================================================
   P-Q Curve Interactive Demo — embed styles
   Scoped under .pq-curve-embed so it never leaks into the
   surrounding article layout. Self-contained, reusable.
========================================================= */

.pq-curve-embed{
    --pc-accent:#1677ff;
    --pc-danger:#ef4444;
    --pc-bg:#f5f7fa;
    --pc-card:#ffffff;
    --pc-border:#dfe5ee;
    --pc-muted:#64748b;
    --pc-text:#071b3a;
    box-sizing:border-box;
    width:100%;
    margin:28px 0;
    padding:0;
}

.pq-curve-embed *,
.pq-curve-embed *::before,
.pq-curve-embed *::after{
    box-sizing:border-box;
}

.pq-curve-embed .pqc-card{
    background:var(--pc-card);
    border:1px solid var(--pc-border);
    border-radius:18px;
    overflow:hidden;
}

.pq-curve-embed .pqc-chart-card{
    padding:22px;
}

.pq-curve-embed .pqc-canvas-wrap{
    position:relative;
    width:100%;
}

.pq-curve-embed canvas#pqCanvas{
    width:100%;
    height:560px;
    display:block;
    background:var(--pc-card);
}

.pq-curve-embed .pqc-legend{
    display:flex;
    align-items:center;
    gap:28px;
    padding:10px 4px 4px;
    flex-wrap:wrap;
    font-size:14px;
    color:var(--pc-text);
}

.pq-curve-embed .pqc-legend-item{
    display:flex;
    align-items:center;
    gap:8px;
}

.pq-curve-embed .pqc-physical-card{
    margin-top:18px;
    padding:22px;
    border:1px solid var(--pc-border);
    border-radius:18px;
    background:linear-gradient(135deg,#f8fbff 0%,#eef6ff 100%);
    color:var(--pc-text);
}

.pq-curve-embed .pqc-physical-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:18px;
}

.pq-curve-embed .pqc-physical-head span{
    color:var(--pc-accent);
    font-size:13px;
    font-weight:700;
}

.pq-curve-embed .pqc-air-path{
    --pqc-flow-duration:1s;
    display:grid;
    grid-template-columns:110px minmax(90px,1fr) 170px minmax(90px,1fr) 110px;
    align-items:center;
    gap:10px;
    min-height:116px;
    padding:16px;
    border-radius:14px;
    background:#ffffff;
    border:1px solid #dbeafe;
    overflow:hidden;
}

.pq-curve-embed .pqc-air-node{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    text-align:center;
}

.pq-curve-embed .pqc-fan-mark,
.pq-curve-embed .pqc-load-mark{
    display:grid;
    place-items:center;
    width:58px;
    height:58px;
    border-radius:50%;
    background:#dbeafe;
    border:2px solid #60a5fa;
    color:#075985;
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
}

.pq-curve-embed .pqc-load-mark{background:#fff7ed;border-color:#fb923c;color:#9a3412}
.pq-curve-embed .pqc-air-node small,.pq-curve-embed .pqc-restriction small{color:var(--pc-muted);font-size:11px}

.pq-curve-embed .pqc-flow-lane{
    position:relative;
    height:26px;
    border-top:2px solid #93c5fd;
    border-bottom:2px solid #93c5fd;
    overflow:hidden;
}

.pq-curve-embed .pqc-flow-lane::after{
    content:"";
    position:absolute;
    right:2px;
    top:7px;
    border-left:10px solid #1677ff;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
}

.pq-curve-embed .pqc-flow-lane i{
    position:absolute;
    top:8px;
    left:-12px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#1677ff;
    animation:pqc-flow var(--pqc-flow-duration) linear infinite;
}

.pq-curve-embed .pqc-flow-lane i:nth-child(2){animation-delay:-.2s}
.pq-curve-embed .pqc-flow-lane i:nth-child(3){animation-delay:-.4s}
.pq-curve-embed .pqc-flow-lane i:nth-child(4){animation-delay:-.6s}
.pq-curve-embed .pqc-flow-lane i:nth-child(5){animation-delay:-.8s}

@keyframes pqc-flow{to{transform:translateX(calc(100% + 24px))}}

.pq-curve-embed .pqc-flow-lane span{position:absolute;left:50%;top:30px;transform:translateX(-50%);font-size:11px;color:#2563eb;font-weight:700;white-space:nowrap}

.pq-curve-embed .pqc-restriction{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:70px;
    padding:8px;
    border-left:8px solid #f59e0b;
    border-right:8px solid #f59e0b;
    background:#fffbeb;
    text-align:center;
    color:#92400e;
    font-size:11px;
    font-weight:800;
    letter-spacing:.06em;
}

.pq-curve-embed .pqc-air-path[data-resistance="high"] .pqc-restriction,
.pq-curve-embed .pqc-air-path[data-resistance="very-high"] .pqc-restriction{border-color:#ef4444;background:#fff1f2;color:#991b1b}

.pq-curve-embed .pqc-physical-note{margin:16px 0 0;color:#52647c;font-size:13px;line-height:1.5}

.pq-curve-embed .pqc-legend-line{
    width:28px;
    height:3px;
    border-radius:2px;
}

.pq-curve-embed .pqc-blue{
    background:var(--pc-accent);
}

.pq-curve-embed .pqc-red{
    background:var(--pc-danger);
}

.pq-curve-embed .pqc-legend-point{
    width:12px;
    height:12px;
    border-radius:50%;
    background:white;
    border:3px solid var(--pc-accent);
    box-sizing:border-box;
}

.pq-curve-embed .pqc-controls{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-top:20px;
}

.pq-curve-embed .pqc-control{
    background:var(--pc-card);
    border:1px solid var(--pc-border);
    border-radius:16px;
    padding:20px;
}

.pq-curve-embed .pqc-control-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-weight:700;
    margin-bottom:18px;
    color:var(--pc-text);
}

.pq-curve-embed .pqc-control-value{
    color:var(--pc-accent);
}

.pq-curve-embed input[type="range"]{
    width:100%;
    accent-color:var(--pc-accent);
}

.pq-curve-embed .pqc-range-labels{
    display:flex;
    justify-content:space-between;
    color:var(--pc-muted);
    font-size:13px;
    margin-top:9px;
}

.pq-curve-embed .pqc-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
    gap:22px;
}

.pq-curve-embed .pqc-side-card{
    padding:22px;
}

.pq-curve-embed .pqc-side-card h2{
    margin:0 0 18px;
    font-size:20px;
    color:var(--pc-text);
}

.pq-curve-embed .pqc-metric{
    padding:18px;
    background:var(--pc-bg);
    border-radius:14px;
    margin-bottom:12px;
}

.pq-curve-embed .pqc-metric-label{
    color:var(--pc-muted);
    font-size:13px;
}

.pq-curve-embed .pqc-metric-number{
    margin-top:7px;
    color:var(--pc-accent);
    font-size:31px;
    font-weight:800;
}

.pq-curve-embed .pqc-metric-number small{
    font-size:13px;
}

.pq-curve-embed .pqc-tip{
    margin-top:20px;
    padding:20px;
    border-radius:16px;
    background:#eaf4ff;
    color:#244467;
}

.pq-curve-embed .pqc-tip strong{
    display:block;
    margin-bottom:12px;
}

.pq-curve-embed .pqc-tip p{
    margin:8px 0;
    line-height:1.4;
}

.pq-curve-embed .pqc-presets{
    margin-top:18px;
}

.pq-curve-embed .pqc-presets-title{
    font-weight:700;
    margin-bottom:12px;
    color:var(--pc-text);
}

.pq-curve-embed .pqc-preset-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
}

.pq-curve-embed .pqc-preset{
    background:var(--pc-card);
    border:1px solid var(--pc-border);
    border-radius:12px;
    padding:13px;
    cursor:pointer;
    text-align:left;
    color:var(--pc-text);
    font:inherit;
}

.pq-curve-embed .pqc-preset:hover{
    border-color:var(--pc-accent);
}

.pq-curve-embed .pqc-preset.active{
    border-color:var(--pc-accent);
    background:#eef6ff;
}

.pq-curve-embed .pqc-preset strong{
    display:block;
    color:#0b1f3a;
}

.pq-curve-embed .pqc-preset span{
    display:block;
    color:var(--pc-muted);
    font-size:12px;
    margin-top:5px;
}

.pq-curve-embed .pqc-note{
    margin-top:22px;
    padding:16px 18px;
    border-radius:12px;
    background:#eef6ff;
    color:#385470;
    font-size:14px;
}

@media(max-width:900px){
    .pq-curve-embed .pqc-layout{
        grid-template-columns:1fr;
    }
    .pq-curve-embed .pqc-controls{
        grid-template-columns:1fr;
    }
    .pq-curve-embed .pqc-preset-grid{
        grid-template-columns:1fr 1fr;
    }
    .pq-curve-embed canvas#pqCanvas{
        height:430px;
    }
    .pq-curve-embed .pqc-physical-head{align-items:flex-start;flex-direction:column}
    .pq-curve-embed .pqc-air-path{grid-template-columns:80px minmax(70px,1fr) 110px minmax(70px,1fr) 80px;gap:5px;padding:10px}
    .pq-curve-embed .pqc-fan-mark,.pq-curve-embed .pqc-load-mark{width:46px;height:46px}
}

@media(prefers-reduced-motion:reduce){
    .pq-curve-embed .pqc-flow-lane i{animation:none;display:none}
}