/*
 * Parix.ai | AI Automation Checklist Generator — page styles.
 * Sits on top of px-kit.css. Only the pieces this page adds live here.
 */

/* department example cards */
.pxacg .deptgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pxacg .dept{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px 28px;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,border-color .22s}
.pxacg .dept:hover{transform:translateY(-3px);border-color:#f4b58c;
  box-shadow:0 18px 34px -26px rgba(26,21,18,.45)}
.pxacg .dept h3{margin-bottom:.5em}
.pxacg .dept > p{color:var(--muted);font-size:15px;margin-bottom:14px}
.pxacg .dept ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.pxacg .dept li{position:relative;padding-left:26px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.pxacg .dept li::before{content:"";position:absolute;left:2px;top:.46em;width:12px;height:7px;
  border-left:2.5px solid var(--b);border-bottom:2.5px solid var(--b);transform:rotate(-45deg)}

/* four criteria cards */
.pxacg .four-up{grid-template-columns:repeat(4,1fr)}

/* progress bars used in the visuals */
.pxacg .bar{height:9px;border-radius:999px;background:#f3e3d8;overflow:hidden}
.pxacg .bar > i{display:block;height:100%;width:var(--w,0%);border-radius:999px;background:var(--b)}
.pxacg .barline{display:grid;grid-template-columns:104px 1fr;gap:12px;align-items:center;
  font-size:12.5px;color:var(--muted);margin-bottom:10px}

@media (max-width:980px){
  .pxacg .deptgrid{grid-template-columns:1fr}
  .pxacg .four-up{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .pxacg .four-up{grid-template-columns:1fr}
  .pxacg .dept{padding:22px 20px}
}

/* ---------------------------------------------------------------
   The generator itself: markup, stylesheet and script untouched. Its
   variables hang off .acg-wrap, so re-pointing them here recolours it to the
   reference palette and drops its old standalone page layout.
   --------------------------------------------------------------- */
.pxacg .acg-wrap{
  --primary:#eb600e; --primary-2:#eb600e; --accent:#CF520F; --accent-2:#CF520F;
  --brand:#eb600e;
  --bg:#ffffff; --soft:#fef1ed; --card:#ffffff; --border:rgba(26,21,18,.08);
  --text:#1a1512; --muted:#6f655e; --ink:#1a1512;
  --radius:18px; --radius-sm:12px;
  --shadow:0 1px 2px rgba(26,21,18,.05),0 24px 48px -28px rgba(26,21,18,.28);
  --font:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  max-width:1080px; margin:28px auto 0; padding:0; color:#1a1512; text-align:left;
}
.pxacg .acg-wrap h2,.pxacg .acg-wrap h3{font-family:var(--head)}

/* Field labels read as labels, not accents. The tool colours them with
   --primary, which now resolves to orange; the icons keep the accent. */
.pxacg .acg-label{color:var(--ink)}
.pxacg .acg-label i{color:var(--b)}