/* ==========================================================================
   CinderTek - Product interfaces (case-study visuals)
   Drawn by js/product-ui.js. Sized entirely in container units, so a
   drawing scales like an image with its frame. The window floats on the
   frame's warm backdrop like a product shot.
   ========================================================================== */

.pui {
    position: absolute;
    inset: 0;
    container-type: inline-size;
    display: grid;
    place-items: center;
    padding: 6% 5.5%;
}

.pui__window {
    --pui-ink: #0c1015;
    --pui-panel: #121920;
    --pui-line: rgba(180, 185, 191, 0.13);
    --pui-line-strong: rgba(180, 185, 191, 0.3);
    --pui-text: #edebe6;
    --pui-muted: #8a9199;
    --pui-ember: #ff6a1f;
    --pui-ok: #5fbf8f;
    --pui-bar: #10161c;
    --pui-chip: #2a333d;
    --pui-track: #222b35;
    --pui-node: #161e26;
    --pui-ok-line: rgba(95, 191, 143, 0.5);
    --pui-hot-line: rgba(255, 106, 31, 0.6);
    --pui-hot-fill: rgba(255, 106, 31, 0.14);
    --pui-region: rgba(237, 235, 230, 0.02);
    --pui-bar-fill: rgba(180, 185, 191, 0.32);
    --pui-shadow: 0 3cqw 6cqw -2cqw rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06);

    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border-radius: 1.4cqw;
    background: var(--pui-ink);
    border: 1px solid var(--pui-line);
    box-shadow: var(--pui-shadow);
    font-family: var(--font-body);
    font-size: 1.55cqw;
    line-height: 1.35;
    color: var(--pui-muted);
    text-align: left;
}

/* Light theme: the same interfaces as light apps. */
:root[data-theme="light"] .pui__window {
    --pui-ink: #FFFFFF;
    --pui-panel: #F7F6F3;
    --pui-line: rgba(16, 24, 32, 0.1);
    --pui-line-strong: rgba(16, 24, 32, 0.24);
    --pui-text: #101820;
    --pui-muted: #5F6872;
    --pui-ember: #C4501A;
    --pui-ok: #1A8758;
    --pui-bar: #F3F1ED;
    --pui-chip: #D9D5CE;
    --pui-track: #E6E3DD;
    --pui-node: #FFFFFF;
    --pui-ok-line: rgba(26, 135, 88, 0.5);
    --pui-hot-line: rgba(196, 80, 26, 0.55);
    --pui-hot-fill: rgba(214, 88, 26, 0.1);
    --pui-region: rgba(16, 24, 32, 0.02);
    --pui-bar-fill: rgba(16, 24, 32, 0.16);
    --pui-shadow: 0 3cqw 6cqw -2.5cqw rgba(60, 40, 20, 0.28), 0 0.4cqw 1.2cqw rgba(60, 40, 20, 0.08);
}

:root[data-theme="light"] .pui__doc {
    background: #F4F1EA;
    box-shadow: inset 0 0 0 1px rgba(16, 24, 32, 0.08);
}

.pui__bar {
    display: flex;
    align-items: center;
    gap: 1.4cqw;
    padding: 1.3cqw 1.8cqw;
    border-bottom: 1px solid var(--pui-line);
    background: var(--pui-bar);
}

.pui__dots {
    display: flex;
    gap: 0.7cqw;
}

.pui__dots i {
    width: 1cqw;
    height: 1cqw;
    border-radius: 50%;
    background: var(--pui-chip);
}

.pui__title {
    font-weight: 500;
    color: var(--pui-text);
}

.pui__status {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.9em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pui-ember);
}

.pui__status::before {
    content: "";
    display: inline-block;
    width: 0.8cqw;
    height: 0.8cqw;
    margin-right: 0.8cqw;
    border-radius: 50%;
    background: currentColor;
    vertical-align: 0.1em;
}

.pui__body {
    display: grid;
    grid-auto-rows: auto;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 1.5cqw;
    padding: 1.8cqw;
    min-height: 0;
}

.pui__kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2cqw;
}

.pui__kpi,
.pui__panel {
    min-width: 0;
    min-height: 0;
    padding: 1.3cqw 1.5cqw;
    border-radius: 1cqw;
    background: var(--pui-panel);
    border: 1px solid var(--pui-line);
}

.pui__kpi span {
    display: block;
    font-size: 0.85em;
}

.pui__kpi strong {
    display: block;
    margin-top: 0.3cqw;
    font-family: var(--font-display);
    font-size: 2.1em;
    font-weight: 600;
    line-height: 1.1;
    color: var(--pui-text);
    font-variant-numeric: tabular-nums;
}

.pui__kpi strong.is-hot {
    color: var(--pui-ember);
}

.pui__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 1.2cqw;
    min-height: 0;
}

.pui__split--even {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pui__panel {
    display: flex;
    flex-direction: column;
}

.pui__panel h4 {
    margin: 0 0 0.9cqw;
    font-family: var(--font-mono);
    font-size: 0.82em;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pui-muted);
}

.pui__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1cqw;
    padding: 0.85cqw 0;
    border-top: 1px solid var(--pui-line);
}

.pui__row:first-of-type {
    border-top: 0;
}

.pui__row em {
    font-style: normal;
    font-family: var(--font-mono);
    font-size: 0.85em;
}

.pui__row span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--pui-text);
}

.pui__pill {
    padding: 0.2cqw 0.9cqw;
    border: 1px solid var(--pui-line-strong);
    border-radius: 99px;
    font-family: var(--font-mono);
    font-size: 0.8em;
    white-space: nowrap;
}

.pui__pill--ok {
    border-color: var(--pui-ok-line);
    color: var(--pui-ok);
}

.pui__pill--hot {
    border-color: var(--pui-hot-line);
    background: var(--pui-hot-fill);
    color: var(--pui-ember);
}

/* Drawings inside panels */
.pui__svg {
    flex: 1;
    width: 100%;
    min-height: 0;
    overflow: visible;
}

.pui__svg text {
    font-family: var(--font-mono);
    font-size: 12px;
    fill: var(--pui-text);
}

.pui__road {
    fill: none;
    stroke: var(--pui-track);
    stroke-width: 9;
    stroke-linecap: round;
}

.pui__flow {
    fill: none;
    stroke: var(--pui-ember);
    stroke-width: 2;
    stroke-dasharray: 5 6;
}

.pui__edge {
    fill: none;
    stroke: var(--pui-line-strong);
    stroke-width: 1.5;
}

.pui__stop {
    fill: var(--pui-ink);
    stroke: var(--pui-text);
    stroke-width: 1.6;
}

.pui__mover {
    fill: var(--pui-ember);
    offset-rotate: 0deg;
}

.pui__node rect {
    fill: var(--pui-node);
    stroke: var(--pui-line-strong);
    stroke-width: 1.2;
}

.pui__node--ok rect {
    stroke: var(--pui-ok-line);
}

.pui__node--run rect {
    fill: var(--pui-hot-fill);
    stroke: var(--pui-ember);
}

.pui__region {
    fill: var(--pui-region);
    stroke: var(--pui-line-strong);
    stroke-dasharray: 4 5;
}

.pui__svg .pui__label {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    fill: var(--pui-muted);
}

/* Document */
.pui__doc {
    display: flex;
    flex-direction: column;
    gap: 0.8cqw;
    padding: 1.8cqw;
    border-radius: 0.8cqw;
    background: #e9e6df;
    min-height: 0;
    overflow: hidden;
}

.pui__doc i {
    display: block;
    height: 0.75cqw;
    border-radius: 0.4cqw;
    background: #c9c5bc;
}

.pui__doc .pui__doc-head {
    width: 46%;
    height: 1.3cqw;
    margin-bottom: 0.6cqw;
    background: #3b4148;
}

.pui__doc .is-hit {
    background: rgba(255, 106, 31, 0.5);
    box-shadow: 0 0 0 0.3cqw rgba(255, 106, 31, 0.2);
}

.pui__field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.3cqw 1.2cqw;
    padding: 0.9cqw 0;
    border-top: 1px solid var(--pui-line);
}

.pui__field:first-of-type {
    border-top: 0;
}

.pui__field span {
    font-size: 0.85em;
}

.pui__field b {
    grid-column: 1;
    font-weight: 500;
    color: var(--pui-text);
}

.pui__conf {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    display: block;
    width: 7cqw;
    height: 0.6cqw;
    overflow: hidden;
    border-radius: 0.3cqw;
    background: var(--pui-track);
}

.pui__conf i {
    display: block;
    height: 100%;
    background: var(--pui-muted);
}

.pui__conf .is-low {
    background: var(--pui-ember);
}

/* Bars */
.pui__bars {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 0.6cqw;
    min-height: 6cqw;
}

.pui__bars i {
    flex: 1;
    border-radius: 0.3cqw 0.3cqw 0 0;
    background: var(--pui-bar-fill);
}

.pui__bars i.is-hot {
    background: var(--pui-ember);
}

/* Motion: on screen only, never with reduced motion */
@media (prefers-reduced-motion: no-preference) {
    .pui.is-playing .pui__flow {
        animation: pui-flow 1.4s linear infinite;
    }

    .pui.is-playing .pui__mover {
        animation: pui-travel 6s linear infinite;
    }

    .pui.is-playing .pui__status::before,
    .pui.is-playing .pui__node--run rect {
        animation: pui-pulse 2s ease-in-out infinite;
    }
}

@keyframes pui-flow {
    to { stroke-dashoffset: -22; }
}

@keyframes pui-travel {
    from { offset-distance: 0%; }
    to { offset-distance: 100%; }
}

@keyframes pui-pulse {
    50% { opacity: 0.4; }
}