/*!
 * Circuit Craftworks - Computer Upgrades.
 *
 * Everything here is built on the design tokens the page already defines
 * (--panel, --text, --muted, --blue, --line, --lift-*, --r*, --shell,
 * --font-mono). Nothing re-declares a colour of its own, so a future palette
 * change moves this section with the rest of the page instead of leaving it
 * behind. Scoped to #ccgx-page to match the existing convention.
 */

/* ------------------------------------------------------------------ 0. hidden
 * The design system sets `.ccgx-btn{display:inline-flex}`, and a class selector
 * outranks the user-agent `[hidden]{display:none}` rule. Without this the Back
 * and Submit buttons, and the stepper, stay on screen after JavaScript hides
 * them - a customer would see "Send my upgrade request" on the first step.
 * The engine toggles `el.hidden`, so this is the rule that makes it mean
 * something inside this page.
 */
#ccgx-page [hidden]{display:none!important}

/* ------------------------------------------------------------------ 1. device selector */
#ccgx-page .ccui-devices{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2vw,28px);
  margin:0 0 30px;
}
#ccgx-page .ccui-device{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--lift-0);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
#ccgx-page .ccui-device:hover{transform:translateY(-2px);box-shadow:var(--lift-1);border-color:var(--line-lit)}
#ccgx-page .ccui-device__figure{margin:0;position:relative;aspect-ratio:16/9;background:var(--steel);overflow:hidden}
#ccgx-page .ccui-device__img{width:100%;height:100%;object-fit:cover;display:block}
#ccgx-page .ccui-device__body{padding:clamp(18px,1.7vw,26px);display:flex;flex-direction:column;gap:10px;flex:1}
#ccgx-page .ccui-device__body h3{margin:0;font-size:clamp(1.4rem,1.7vw,1.85rem);letter-spacing:-.02em}
#ccgx-page .ccui-device__body p{margin:0;color:var(--muted);font-size:.98rem;line-height:1.55;flex:1}
#ccgx-page .ccui-device .ccgx-btn{align-self:flex-start;margin-top:6px}

#ccgx-page .ccui-thirdway{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  padding:16px 20px;border:1px dashed var(--line);border-radius:var(--r-sm);
  background:var(--panel-2);
}
#ccgx-page .ccui-thirdway p{margin:0;color:var(--muted);font-size:.95rem}
#ccgx-page .ccui-devicehint{
  margin:12px 0 0;padding:12px 16px;border-radius:var(--r-sm);
  border:1px solid var(--line-lit);background:var(--panel-2);
  color:var(--text);font-size:.95rem;font-weight:600;
}

/* ------------------------------------------------------------------ 2. fast path */
#ccgx-page .ccui-fast{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  padding:clamp(16px,1.6vw,22px);border:1px solid var(--line);border-radius:var(--r);
  background:var(--surf-3);
}
#ccgx-page .ccui-fast__label{
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2);margin-right:6px;
}
#ccgx-page .ccui-fast__btn{
  appearance:none;cursor:pointer;font:inherit;font-weight:600;font-size:.94rem;
  min-height:44px;padding:10px 18px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel);color:var(--text);
  transition:border-color .16s ease,background .16s ease,transform .16s ease;
}
#ccgx-page .ccui-fast__btn:hover{border-color:var(--line-lit);background:var(--panel-2);transform:translateY(-1px)}

/* ------------------------------------------------------------------ 3. configurator shell */
#ccgx-page #ccui-configurator{
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  box-shadow:var(--lift-1);overflow:hidden;
}
#ccgx-page .ccui-shell{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,.95fr)}
#ccgx-page .ccui-main{padding:clamp(20px,2.2vw,34px);min-width:0}
#ccgx-page .ccui-aside{
  padding:clamp(20px,2.2vw,30px);background:var(--surf-3);
  border-left:1px solid var(--line);min-width:0;
}

/* stepper */
#ccgx-page .ccui-stepper{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 22px;padding:0}
#ccgx-page .ccui-stepper__item{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  padding:7px 12px;border-radius:999px;border:1px solid var(--line);
  color:var(--muted-2);background:var(--panel);white-space:nowrap;
}
#ccgx-page .ccui-stepper__item.is-done{color:var(--text);border-color:var(--line-lit)}
#ccgx-page .ccui-stepper__item.is-done::before{content:"\2713\00a0"}
#ccgx-page .ccui-stepper__item.is-current{
  color:var(--panel);background:var(--blue-2);border-color:var(--blue-2);font-weight:700;
}

/* panels */
#ccgx-page .ccui-panel{margin:0}
#ccgx-page .ccui-panel > h3{
  margin:0 0 8px;font-size:clamp(1.28rem,1.6vw,1.7rem);letter-spacing:-.02em;
}
#ccgx-page .ccui-panel > h3:focus-visible{outline:3px solid var(--blue);outline-offset:4px;border-radius:4px}
#ccgx-page .ccui-panel__help{margin:0 0 20px;color:var(--muted);font-size:.97rem;line-height:1.6;max-width:62ch}

/* option cards - real radios and checkboxes underneath */
#ccgx-page .ccui-options{display:grid;gap:10px;margin:0 0 18px;border:0;padding:0}
#ccgx-page .ccui-options--two{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
#ccgx-page .ccui-options > legend{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2);padding:0;margin:0 0 10px;
}
#ccgx-page .ccui-opt{position:relative;display:block}
#ccgx-page .ccui-opt input{
  position:absolute;top:14px;left:14px;width:20px;height:20px;margin:0;
  accent-color:var(--blue);cursor:pointer;
}
#ccgx-page .ccui-opt > span{
  display:block;cursor:pointer;padding:14px 16px 14px 48px;min-height:44px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
#ccgx-page .ccui-opt b{display:block;font-size:1rem;line-height:1.35}
#ccgx-page .ccui-opt small{display:block;margin-top:4px;color:var(--muted);font-size:.9rem;line-height:1.5}
#ccgx-page .ccui-opt > span:hover{border-color:var(--line-lit);background:var(--panel-2)}
/* Selected state carries a border, a tint, a weight change AND a tick -
   never colour on its own. */
#ccgx-page .ccui-opt input:checked + span{
  border-color:var(--blue);background:var(--panel-2);
  box-shadow:inset 0 0 0 1px var(--blue),var(--lift-0);
}
#ccgx-page .ccui-opt input:checked + span b{font-weight:700}
#ccgx-page .ccui-opt input:checked + span b::after{content:"\00a0\2713";color:var(--blue-2);font-weight:700}
#ccgx-page .ccui-opt input:focus-visible + span{outline:3px solid var(--blue);outline-offset:3px}

/* plain fields */
#ccgx-page .ccui-fields{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin:0 0 18px}
#ccgx-page .ccui-field{display:flex;flex-direction:column;gap:6px;min-width:0}
#ccgx-page .ccui-field--wide{grid-column:1/-1}
#ccgx-page .ccui-field label{font-size:.9rem;font-weight:600;color:var(--text)}
#ccgx-page .ccui-field .ccui-hint{font-size:.85rem;color:var(--muted-2);line-height:1.45}
#ccgx-page .ccui-field input,
#ccgx-page .ccui-field textarea,
#ccgx-page .ccui-field select{
  font:inherit;font-size:1rem;min-height:44px;padding:10px 12px;color:var(--text);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);
  width:100%;box-sizing:border-box;
}
#ccgx-page .ccui-field textarea{min-height:96px;resize:vertical;line-height:1.55}
#ccgx-page .ccui-field input:focus-visible,
#ccgx-page .ccui-field textarea:focus-visible,
#ccgx-page .ccui-field select:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-color:var(--blue)}
#ccgx-page .ccui-field [aria-invalid="true"]{border-color:#b3261e;background:#fdf6f5}

/* errors: text, never colour alone */
#ccgx-page .ccui-err{margin:6px 0 0;color:#8c1d18;font-size:.9rem;font-weight:600}
#ccgx-page .ccui-err::before{content:"\26A0\00a0"}
#ccgx-page .ccui-formerror{
  margin:0 0 16px;padding:12px 16px;border-radius:var(--r-sm);
  border:1px solid #b3261e;background:#fdf6f5;color:#8c1d18;font-weight:600;
}

/* honeypot - removed from every accessibility tree and tab order */
#ccgx-page .ccui-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* navigation */
#ccgx-page .ccui-nav{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
#ccgx-page .ccui-nav__spacer{flex:1}
#ccgx-page .ccui-restart{
  appearance:none;background:none;border:0;cursor:pointer;font:inherit;font-size:.9rem;
  color:var(--muted);text-decoration:underline;text-underline-offset:3px;padding:10px 4px;min-height:44px;
}
#ccgx-page .ccui-restart:hover{color:var(--text)}

/* ------------------------------------------------------------------ 4. summary */
#ccgx-page .ccui-aside h3{
  margin:0 0 14px;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);font-weight:700;
}
#ccgx-page .ccui-sum__price{display:flex;flex-direction:column;gap:2px;padding-bottom:14px;border-bottom:1px solid var(--line)}
#ccgx-page .ccui-sum__prefix{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
#ccgx-page .ccui-sum__figure{font-size:clamp(2rem,3vw,2.8rem);line-height:1;letter-spacing:-.03em;color:var(--text)}
#ccgx-page .ccui-sum__hardware{font-size:.88rem;color:var(--muted);margin-top:4px}
#ccgx-page .ccui-sum__lines{list-style:none;margin:14px 0;padding:0;display:grid;gap:8px}
#ccgx-page .ccui-sum__lines li{display:flex;justify-content:space-between;gap:12px;font-size:.92rem;align-items:baseline}
#ccgx-page .ccui-sum__lines em{display:block;font-style:normal;color:var(--muted-2);font-size:.82rem}
#ccgx-page .ccui-sum__lines b{white-space:nowrap;font-variant-numeric:tabular-nums}
#ccgx-page .ccui-sum__meta{margin:14px 0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.88rem}
#ccgx-page .ccui-sum__meta dt{color:var(--muted-2);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;padding-top:2px}
#ccgx-page .ccui-sum__meta dd{margin:0;color:var(--text)}
#ccgx-page .ccui-sum__scopes,#ccgx-page .ccui-sum__review{
  margin-top:14px;padding:12px 14px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--panel);
}
#ccgx-page .ccui-sum__scopes span,#ccgx-page .ccui-sum__review span{
  display:block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:6px;
}
#ccgx-page .ccui-sum__scopes ul,#ccgx-page .ccui-sum__review ul{margin:0;padding-left:18px;display:grid;gap:6px}
#ccgx-page .ccui-sum__scopes li,#ccgx-page .ccui-sum__review li{font-size:.88rem;line-height:1.5;color:var(--muted)}
#ccgx-page .ccui-sum__scopes b{color:var(--text)}
#ccgx-page .ccui-sum__print{margin:16px 0 0;font-size:.84rem;line-height:1.55;color:var(--muted-2)}

/* ------------------------------------------------------------------ 5. routing notices */
#ccgx-page .ccui-route{
  margin:0 0 12px;padding:14px 16px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--panel);
}
#ccgx-page .ccui-route--primary{border-color:var(--blue);box-shadow:inset 3px 0 0 var(--blue)}
#ccgx-page .ccui-route__tag{
  display:inline-block;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:6px;
}
#ccgx-page .ccui-route p{margin:0 0 10px;font-size:.92rem;line-height:1.55;color:var(--text)}
#ccgx-page .ccui-route__actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
#ccgx-page .ccui-route__dismiss{
  appearance:none;background:none;border:0;cursor:pointer;font:inherit;font-size:.86rem;
  color:var(--muted);text-decoration:underline;text-underline-offset:3px;min-height:44px;padding:8px 2px;
}
#ccgx-page .ccui-route__dismiss:hover{color:var(--text)}

/* ------------------------------------------------------------------ 6. files */
#ccgx-page .ccui-filelist{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
#ccgx-page .ccui-filelist li{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--panel);font-size:.88rem;
}
#ccgx-page .ccui-filelist button{
  appearance:none;background:none;border:0;cursor:pointer;font:inherit;font-size:.84rem;
  color:var(--muted);text-decoration:underline;min-height:44px;padding:0 4px;
}
#ccgx-page .ccui-filestatus{margin:8px 0 0;font-size:.86rem;color:var(--muted)}

/* ------------------------------------------------------------------ 7. result */
#ccgx-page .ccui-result{
  padding:clamp(20px,2vw,30px);border:1px solid var(--blue);border-radius:var(--r);
  background:var(--panel-2);
}
#ccgx-page .ccui-result h3{margin:0 0 10px;font-size:clamp(1.3rem,1.8vw,1.8rem);color:var(--text);letter-spacing:-.02em}
#ccgx-page .ccui-result h3:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
#ccgx-page .ccui-result p{margin:0 0 10px;font-size:.96rem;line-height:1.6;color:var(--muted)}
#ccgx-page .ccui-result__state{padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--panel)}
#ccgx-page .ccui-result__price{font-size:1.02rem;color:var(--text)}
#ccgx-page .ccui-result__price b{font-size:1.3rem}

/* ------------------------------------------------------------------ 8. price cards */
#ccgx-page .ccui-prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(16px,1.6vw,22px)}
#ccgx-page .ccui-price{
  display:flex;flex-direction:column;gap:10px;padding:clamp(18px,1.8vw,26px);
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);box-shadow:var(--lift-0);
}
#ccgx-page .ccui-price h3{margin:0;font-size:1.2rem;letter-spacing:-.01em}
#ccgx-page .ccui-price__cost{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-block:1px solid var(--line)}
#ccgx-page .ccui-price__label{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
#ccgx-page .ccui-price__value{font-size:1.22rem;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
#ccgx-page .ccui-price p{margin:0;font-size:.93rem;line-height:1.6;color:var(--muted);flex:1}
#ccgx-page .ccui-price .ccui-fast__btn{align-self:flex-start}

/* ------------------------------------------------------------------ 9. content blocks */
#ccgx-page .ccui-grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(16px,1.7vw,24px)}
#ccgx-page .ccui-block{
  padding:clamp(18px,1.8vw,26px);border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);box-shadow:var(--lift-0);
}
#ccgx-page .ccui-block h3{margin:0 0 8px;font-size:1.12rem;letter-spacing:-.01em}
#ccgx-page .ccui-block p{margin:0;font-size:.93rem;line-height:1.62;color:var(--muted)}
#ccgx-page .ccui-block__route{
  margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);
}
#ccgx-page .ccui-block__route b{display:block;margin-top:4px;color:var(--blue-2);letter-spacing:.06em}

#ccgx-page .ccui-steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:14px}
#ccgx-page .ccui-steps li{
  counter-increment:s;position:relative;padding:16px 18px 16px 62px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);
}
#ccgx-page .ccui-steps li::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:18px;top:16px;
  font-family:var(--font-mono);font-size:.95rem;font-weight:700;color:var(--blue-2);
}
#ccgx-page .ccui-steps b{display:block;font-size:1.02rem;margin-bottom:4px}
#ccgx-page .ccui-steps span{color:var(--muted);font-size:.93rem;line-height:1.6}

/* FAQ - native details/summary so the page's fragment script and the
   keyboard both behave without extra ARIA plumbing */
#ccgx-page .ccui-faq{display:grid;gap:10px}
#ccgx-page .ccui-faq details{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);overflow:hidden}
#ccgx-page .ccui-faq summary{
  cursor:pointer;list-style:none;padding:16px 52px 16px 18px;position:relative;
  font-weight:650;font-size:1.02rem;line-height:1.45;min-height:44px;box-sizing:border-box;
}
#ccgx-page .ccui-faq summary::-webkit-details-marker{display:none}
#ccgx-page .ccui-faq summary::after{
  content:"";position:absolute;right:20px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s ease;
}
#ccgx-page .ccui-faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
#ccgx-page .ccui-faq summary:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
#ccgx-page .ccui-faq details > div{padding:0 18px 18px;color:var(--muted);font-size:.95rem;line-height:1.65}

#ccgx-page .ccui-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
#ccgx-page .ccui-links a{
  font-size:.9rem;padding:9px 15px;border-radius:999px;min-height:44px;
  display:inline-flex;align-items:center;
  border:1px solid var(--line);background:var(--panel);color:var(--text);text-decoration:none;
}
#ccgx-page .ccui-links a:hover{border-color:var(--line-lit);background:var(--panel-2)}
#ccgx-page .ccui-links a:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* ------------------------------------------------------------------ 10. responsive */
@media (max-width:1120px){
  #ccgx-page .ccui-shell{grid-template-columns:1fr}
  #ccgx-page .ccui-aside{border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:760px){
  #ccgx-page .ccui-devices{grid-template-columns:1fr}
  #ccgx-page .ccui-device__figure{aspect-ratio:16/10}
  #ccgx-page .ccui-fast{flex-direction:column;align-items:stretch}
  #ccgx-page .ccui-fast__btn{width:100%;text-align:center;justify-content:center}
  #ccgx-page .ccui-fields{grid-template-columns:1fr}
  #ccgx-page .ccui-nav{flex-direction:column;align-items:stretch}
  #ccgx-page .ccui-nav .ccgx-btn{width:100%;text-align:center;justify-content:center}
  #ccgx-page .ccui-nav__spacer{display:none}
  #ccgx-page .ccui-sum__meta{grid-template-columns:1fr;gap:2px 0}
  #ccgx-page .ccui-sum__meta dd{margin-bottom:8px}
  #ccgx-page .ccui-stepper{gap:4px}
  #ccgx-page .ccui-stepper__item{font-size:.62rem;padding:6px 9px}
}

/* Without JavaScript every panel stays open and readable, and the stepper,
   which would be meaningless, is hidden. */
#ccgx-page #ccui-configurator:not(.ccui-js) .ccui-stepper,
#ccgx-page #ccui-configurator:not(.ccui-js) .ccui-nav{display:none}
#ccgx-page #ccui-configurator:not(.ccui-js) .ccui-panel{
  margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--line);
}

@media (prefers-reduced-motion:reduce){
  #ccgx-page .ccui-device,#ccgx-page .ccui-fast__btn,#ccgx-page .ccui-opt > span,
  #ccgx-page .ccui-faq summary::after{transition:none}
  #ccgx-page .ccui-device:hover,#ccgx-page .ccui-fast__btn:hover{transform:none}
}