/* Classie homepage — round 6 styles: console gallery side-scroller + charts. */

.pcg{position:relative;}
.pcg-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px max(24px,calc((100vw - var(--maxw)) / 2 + 24px)) 18px;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-mask:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
  mask:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);}
.pcg-track::-webkit-scrollbar{display:none;}
.pcg-screen{flex:0 0 auto;width:min(560px,84vw);scroll-snap-align:center;
  background:var(--bg-base);border:1px solid var(--border-default);border-radius:16px;
  box-shadow:var(--shadow-chrome);overflow:hidden;display:flex;flex-direction:column;}
.pcg-tb{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border-default);background:var(--bg-surface);}
.pcg-dots{display:flex;gap:6px;}
.pcg-dots i{width:8px;height:8px;border-radius:50%;background:var(--bg-raised-2);}
.pcg-tb-t{font-size:13px;font-weight:600;color:var(--fg-secondary);font-family:var(--f-display);}
.pcg-tb-r{margin-left:auto;display:flex;align-items:center;gap:5px;font-family:var(--f-mono);font-size:10px;color:var(--brand-primary-hover);background:var(--brand-primary-10);border:1px solid var(--brand-primary-16);border-radius:6px;padding:4px 8px;}
.pcg-body{padding:20px;flex:1;display:flex;flex-direction:column;min-height:300px;}
.pcg-sub{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-tertiary);margin-bottom:18px;}

.pcg-ctrls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:18px;}
.pcg-btn{width:40px;height:40px;border-radius:10px;border:1px solid var(--border-strong);background:var(--bg-surface);
  color:var(--fg-secondary);font-size:17px;cursor:pointer;transition:all .16s var(--ease-out);display:flex;align-items:center;justify-content:center;}
.pcg-btn:hover{border-color:var(--brand-primary);color:var(--brand-primary);background:var(--brand-primary-10);}
.pcg-hint{font-family:var(--f-mono);font-size:11px;color:var(--fg-muted);letter-spacing:.04em;}

/* ① cost area chart */
.chart{flex:1;display:grid;grid-template-columns:34px 1fr;grid-template-rows:1fr 20px;gap:4px;}
.chart-yaxis{display:flex;flex-direction:column;justify-content:space-between;font-family:var(--f-mono);font-size:10px;color:var(--fg-muted);text-align:right;padding-right:6px;}
.chart-svg{width:100%;height:100%;min-height:170px;border-left:1px solid var(--border-quiet);border-bottom:1px solid var(--border-quiet);}
.chart-xaxis{grid-column:2;display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:10px;color:var(--fg-muted);}

/* ② usage by intent */
.intent{display:flex;flex-direction:column;gap:13px;flex:1;justify-content:center;}
.intent-row{display:grid;grid-template-columns:130px 1fr;align-items:center;gap:12px;}
.intent-l{font-size:11.5px;color:var(--fg-tertiary);text-align:right;line-height:1.2;}
.intent-bar{display:flex;height:22px;border-radius:5px;overflow:hidden;background:var(--bg-raised);}
.intent-seg{display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-size:10px;font-weight:600;color:rgba(0,0,0,.55);transition:width .8s var(--ease-out);min-width:0;overflow:hidden;white-space:nowrap;}
@media(max-width:480px){.intent-row{grid-template-columns:96px 1fr;}.intent-l{font-size:10px;}}

/* ③ detections */
.detm{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:center;}
.detm-cell{display:flex;flex-direction:column;align-items:center;gap:10px;}
.detm-donut{position:relative;width:130px;height:130px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.detm-donut::after{content:"";position:absolute;inset:20px;border-radius:50%;background:var(--bg-base);}
.detm-donut.sev{background:conic-gradient(var(--danger) 0 79%,var(--warning) 79% 88%,#c9c93a 88% 94%,var(--accent-mint) 94% 100%);}
.detm-donut.sev span{position:absolute;inset:0;}
.detm-donut.traces{background:conic-gradient(var(--accent-mint) 0 96%,var(--danger) 96% 100%);}
.detm-donut.traces b{position:relative;z-index:1;font-family:var(--f-display);font-weight:700;font-size:22px;color:var(--fg-primary);}
.detm-donut.traces em{position:relative;z-index:1;font-style:normal;font-family:var(--f-mono);font-size:9px;color:var(--fg-tertiary);letter-spacing:.1em;}
.detm-cap{font-size:13px;font-weight:600;color:var(--fg-secondary);font-family:var(--f-display);}
.detm-legend{display:flex;flex-wrap:wrap;gap:8px 12px;justify-content:center;}
.detm-legend span{display:flex;align-items:center;gap:5px;font-family:var(--f-mono);font-size:10px;color:var(--fg-tertiary);}
.detm-legend i{width:8px;height:8px;border-radius:2px;}
@media(max-width:480px){.detm{grid-template-columns:1fr;}}

/* ④ top apps */
.topapps{display:flex;flex-direction:column;gap:11px;flex:1;justify-content:center;}
.topapps-row{display:grid;grid-template-columns:120px 1fr 36px;align-items:center;gap:10px;}
.topapps-n{font-size:11.5px;color:var(--fg-tertiary);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.topapps-track{height:18px;background:var(--bg-raised);border-radius:5px;overflow:hidden;}
.topapps-fill{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--brand-primary),var(--brand-primary-hover));transition:width .8s var(--ease-out);}
.topapps-v{font-family:var(--f-mono);font-size:11px;color:var(--fg-secondary);}

.motion-off .intent-seg,.motion-off .topapps-fill{transition:none !important;}