/*
 * Parix.ai | Splash Screen Generator - page styles.
 *
 * Loaded after assets/css/tool-ds.css (design system, scoped .pxtool) and
 * scoped again to .pxss. The generator's own .ssg-* markup, its two canvases
 * and every id are untouched: only the appearance changes, so drawOn() and
 * the PNG download keep working exactly as before.
 *
 * @package Arolax Child
 */

/* ====================== bridge: the live generator ====================== */

.pxss#content-area{max-width:1120px;margin:0 auto;padding:0 24px}
.pxss > .section.tint{box-shadow:0 0 0 100vmax var(--mist);clip-path:inset(0 -100vmax)}
.pxss > .section{padding:72px 0}

.pxss .ssg-head{padding:30px 0 34px;text-align:center}
.pxss .ssg-badge{display:inline-block;font-size:14px;font-weight:700;color:#eb600e;margin-bottom:6px}
.pxss .ssg-head h1{font-family:var(--font-head);font-size:clamp(2.1rem,4.6vw,3.3rem);line-height:1.06;
  font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:.1em 0 .3em}
.pxss .ssg-head>p{font-size:1.12rem;color:var(--muted);max-width:640px;margin:0 auto}

.pxss .ssg-grid{max-width:1040px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;align-items:start}
.pxss .ssg-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px;
  box-shadow:0 1px 2px rgba(58,42,33,.04),0 24px 48px -30px rgba(58,42,33,.28)}
.pxss .ssg-field{margin:0 0 14px}
.pxss .ssg-field label{display:block;font-weight:700;font-size:14px;margin-bottom:6px;color:var(--ink)}
.pxss .ssg-in{width:100%;padding:11px 12px;border:1px solid var(--line-2);border-radius:10px;
  background:#fff;font:inherit;font-size:16px;color:var(--ink)}
.pxss .ssg-in:focus{outline:2px solid #eb600e;outline-offset:0;border-color:#eb600e}
.pxss .ssg-colors{display:flex;gap:10px;flex-wrap:wrap}
.pxss .ssg-colors input[type=color]{width:56px;height:40px;padding:2px;border:1px solid var(--line-2);
  border-radius:10px;background:#fff;cursor:pointer}

/* the preview reads as a phone */
.pxss .ssg-preview-card{display:grid;place-items:center;gap:14px;text-align:center;background:var(--mist)}
.pxss .ssg-preview-card canvas#ssgPrev{border-radius:20px;padding:8px;background:#2b211b;
  box-shadow:0 30px 60px -30px rgba(58,42,33,.55);display:block}
.pxss .ssg-preview-card br{display:none}
.pxss .ssg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;
  border-radius:999px;font:600 15px/1.2 var(--font-body);border:0;cursor:pointer;text-decoration:none;
  background:#eb600e;color:#fff;transition:background .15s}
.pxss .ssg-btn:hover{background:#d4560c;color:#fff}

/* the colour presets added beside the pickers */
.pxss .ssg-themes{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.pxss .ssg-themes button{display:flex;width:52px;height:30px;padding:3px;border:1.5px solid var(--line-2);
  border-radius:10px;background:#fff;cursor:pointer;overflow:hidden}
.pxss .ssg-themes button i{flex:1}
.pxss .ssg-themes button i:first-child{border-radius:6px 0 0 6px}
.pxss .ssg-themes button i:last-child{border-radius:0 6px 6px 0}
.pxss .ssg-themes button.on,.pxss .ssg-themes button:hover{border-color:#eb600e}

/* ====================== new sections ====================== */

/* how it works: a mini phone that fills in as the copy is typed */
.pxss .sp-demo{width:min(100%,420px);display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center}
.pxss .mini-phone{aspect-ratio:1242/2688;border-radius:24px;border:7px solid #2b211b;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#16385F;
  transition:background .5s;padding:10px}
.pxss .mp-mark{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  font:800 26px/1 var(--font-head);background:rgba(255,255,255,.15);color:#fff;transition:color .5s}
.pxss .mp-name{font:800 16px/1.2 var(--font-head);min-height:1.2em;color:#fff;transition:color .5s;text-align:center}
.pxss .mp-tag{font-size:10.5px;min-height:1.2em;color:#fff;opacity:.75;transition:color .5s;text-align:center}
.pxss .sp-demo-side{display:grid;gap:12px}
.pxss .sp-dots{display:flex;gap:8px;flex-wrap:wrap}
.pxss .sp-dots i{width:26px;height:26px;border-radius:8px;border:2px solid #fff;
  box-shadow:0 0 0 1.5px var(--line-2);transition:box-shadow .3s,transform .3s;cursor:pointer}
.pxss .sp-dots i.on{box-shadow:0 0 0 2.5px #eb600e;transform:scale(1.1)}
.pxss .sp-demo .demo-toggle{justify-self:start}

/* sizes and safe area */
.pxss .safe{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.pxss .safe-phone{position:relative;width:150px;aspect-ratio:1242/2688;border-radius:26px;
  border:7px solid #2b211b;background:#fff4ec;display:grid;place-items:center;flex:0 0 auto}
.pxss .safe-notch{position:absolute;top:6px;left:50%;width:44px;height:12px;margin-left:-22px;
  border-radius:99px;background:#2b211b}
.pxss .safe-zone{position:absolute;left:12%;right:12%;top:26%;bottom:26%;border:1.5px dashed #eb600e;
  border-radius:12px;background:rgba(235,96,14,.06);font-size:10.5px;font-weight:700;color:#b8520f;
  display:flex;justify-content:center;padding-top:6px}
.pxss .safe-mark{position:relative;width:44px;height:44px;border-radius:12px;background:#eb600e;color:#fff;
  display:grid;place-items:center;font:800 22px/1 var(--font-head)}
.pxss .safe-key{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14px;color:var(--ink-2)}
.pxss .safe-key b{display:block;color:var(--ink);font-size:15px}

/* the launch moment */
.pxss .launch{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.pxss .ln-phone{position:relative;width:150px;aspect-ratio:9/19.5;border-radius:26px;border:7px solid #2b211b;
  background:#f5ede7;overflow:hidden;flex:0 0 auto}
.pxss .ln-home{position:absolute;inset:0;padding:26px 12px;display:grid;grid-template-columns:repeat(4,1fr);
  gap:10px;align-content:start;transition:opacity .3s}
.pxss .ln-home i{aspect-ratio:1;border-radius:8px;background:#e8dcd3;font-style:normal}
.pxss .ln-home i.app{background:#eb600e;color:#fff;display:grid;place-items:center;
  font:800 13px/1 var(--font-head);transition:transform .2s}
.pxss .ln-home i.app.press{transform:scale(.85)}
.pxss .ln-splash{position:absolute;inset:0;background:#16385F;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;opacity:0;transform:scale(.3);transform-origin:57% 17%;
  transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.pxss .ln-splash span{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;
  display:grid;place-items:center;font:800 22px/1 var(--font-head)}
.pxss .ln-splash b{font:800 15px/1 var(--font-head);color:#fff}
.pxss .ln-splash.on{opacity:1;transform:none}
.pxss .ln-app{position:absolute;inset:0;background:#fff4ec;padding:26px 12px;display:flex;
  flex-direction:column;gap:8px;opacity:0;transition:opacity .5s}
.pxss .ln-app em{display:block;height:34px;border-radius:9px;background:#fff;border:1px solid #f3dccb}
.pxss .ln-app em.s{height:14px;width:60%;background:#fde0cc;border:0}
.pxss .ln-app.on{opacity:1}
.pxss .ln-tap{position:absolute;width:26px;height:26px;border-radius:50%;background:rgba(235,96,14,.35);
  left:57%;top:17%;margin:-13px 0 0 -13px;opacity:0;transform:scale(.4)}
.pxss .ln-tap.on{animation:lntap .5s ease-out}
@keyframes lntap{0%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(2.2)}}
.pxss .ln-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:l}
.pxss .ln-steps li{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:700;
  color:var(--muted);transition:color .3s}
.pxss .ln-steps li::before{counter-increment:l;content:counter(l);width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;background:#fde9dc;color:#eb600e;font-size:13px;transition:all .3s}
.pxss .ln-steps li.on{color:var(--ink)}
.pxss .ln-steps li.on::before{background:#eb600e;color:#fff}

/* contrast check, reading the two colours from the tool */
.pxss .ct{display:grid;gap:14px}
.pxss .ct-prev{height:130px;border-radius:14px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4px;transition:background .3s}
.pxss .ct-prev b{font:800 1.8rem/1.1 var(--font-head)}
.pxss .ct-prev span{font-size:14px;opacity:.75}
.pxss .ct-score{display:flex;justify-content:space-between;align-items:center}
.pxss .ct-score small{display:block;font-size:12.5px;font-weight:700;color:var(--muted)}
.pxss .ct-score strong{font:800 2.2rem/1 var(--font-head);color:var(--ink);font-variant-numeric:tabular-nums}
.pxss .ct-badge{font-size:13px;font-weight:800;border-radius:999px;padding:5px 12px;background:#f3ebe6;color:var(--muted)}
.pxss .ct-badge.good{background:#eb600e;color:#fff}
.pxss .ct-badge.ok{background:#fde9dc;color:#b8520f}
.pxss .ct-bar{position:relative;height:10px;border-radius:99px;background:#f3e3d8;margin-bottom:18px}
.pxss .ct-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:#eb600e;width:0;
  transition:width .6s ease}
.pxss .ct-bar span{position:absolute;top:14px;font-size:11.5px;font-weight:700;color:var(--muted);
  transform:translateX(-50%)}
.pxss .ct-bar span::before{content:"";position:absolute;left:50%;top:-16px;width:2px;height:14px;background:#fff}

/* do's and don'ts */
.pxss .sdd{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pxss .sdd-card{margin:0;background:#fff;border:1px solid #f8e6da;border-radius:20px;padding:14px;
  display:flex;flex-direction:column;gap:12px;position:relative}
.pxss .sdd-card.ok{border-color:#eb600e}
.pxss .sdd-card::after{content:"\2713";position:absolute;top:10px;right:10px;width:28px;height:28px;
  border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;background:#eb600e;color:#fff}
.pxss .sdd-card.no::after{content:"\2715";background:#f3ebe6;color:var(--muted)}
.pxss .sdd-ph{height:210px;width:110px;margin:0 auto;border-radius:20px;border:6px solid #2b211b;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px;text-align:center}
.pxss .sdd-ph i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  font:800 16px/1 var(--font-head);font-style:normal;color:#fff}
.pxss .sdd-ph b{font:800 13px/1 var(--font-head)}
.pxss .sdd-ph small{font-size:8px;line-height:1.3;color:#6b5a4f}
.pxss .sdd-card figcaption{font-size:14px;color:var(--ink-2)}
.pxss .sdd-card figcaption b{display:block;color:var(--ink);font-size:15px;margin-bottom:2px}

/* ====================== responsive ====================== */
@media (max-width:900px){
  .pxss .ssg-grid{grid-template-columns:1fr}
  .pxss .sdd{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .pxss#content-area{padding:0 16px}
  .pxss > .section{padding:52px 0}
  .pxss .ssg-card{padding:18px}
  .pxss .sp-demo{grid-template-columns:120px 1fr}
  .pxss .launch,.pxss .safe{flex-direction:column;align-items:flex-start}
}
@media (max-width:480px){ .pxss .sdd{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){
  .pxss .ln-tap.on{animation:none}
  .pxss .ln-splash,.pxss .ln-app,.pxss .ct-bar i,.pxss .mini-phone{transition:none}
}