/* ============================================================
   Couple wallpaper maker (/couple-wallpaper-maker), loaded only on that page.
   Colours come from the design tokens in style.css, so both themes work.
   The preview reuses the site's phone drawing (.phone, .phone-ui, .lock-clock,
   .home-grid …) with a <canvas> as its screen.
   ============================================================ */
.ct-page{padding-bottom:8px;}
.ct-head{max-width:780px;padding-top:18px;}
.ct-head h1{font-size:clamp(2rem,4.2vw,var(--step-5));font-weight:800;letter-spacing:-.03em;line-height:1.04;margin:0 0 14px;}
.ct-lead{font-size:1.08rem;color:var(--muted);max-width:60ch;margin:0 0 16px;}
.ct-private{display:flex;gap:12px;align-items:flex-start;max-width:640px;margin:0;padding:12px 16px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--raised);color:var(--text-soft);font-size:.92rem;line-height:1.5;}
.ct-private svg{flex:none;color:var(--success-text);margin-top:1px;}
.ct-private strong{color:var(--text);}
.ct-noscript{margin:20px 0 0;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--raised);color:var(--text-soft);}

/* ---------- Layout: one column on phones, preview beside the steps on wide screens ---------- */
.ct-tool{
  display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:24px;
  grid-template-areas:"photos" "preview" "templates" "adjust" "finish";
}
.ct-photos{grid-area:photos;}
.ct-preview{grid-area:preview;}
.ct-templates{grid-area:templates;}
.ct-adjust{grid-area:adjust;}
.ct-finish{grid-area:finish;}
@media (min-width:900px){
  .ct-tool{
    grid-template-columns:auto minmax(0,560px);column-gap:48px;row-gap:16px;justify-content:center;align-items:start;
    grid-template-areas:"preview photos" "preview templates" "preview adjust" "preview finish";
    grid-template-rows:auto auto auto 1fr;
  }
  .ct-preview{position:sticky;top:calc(var(--header-h) + 16px);}
}
/* Below 1240px the header has a second row (search), so it's taller */
@media (min-width:900px) and (max-width:1240px){.ct-preview{top:136px;}}

/* ---------- Preview ---------- */
.ct-preview{display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0;}
.ct-stage{display:flex;justify-content:center;width:100%;}
.ct-phone{
  --bez-y:.08;   /* frame height ÷ screen width, added to the screen's own height */
  --pw:min(300px, 64vw, calc((100svh - 230px) / (1 / var(--r) + var(--bez-y))));
}
.ct-phone[data-frame="home"]{--bez-y:.4;}
@media (min-width:900px){
  .ct-phone{--pw:min(330px, calc((100dvh - 230px) / (1 / var(--r) + var(--bez-y))));}
}
@media (min-width:900px) and (max-width:1240px){
  .ct-phone{--pw:min(330px, calc((100dvh - 300px) / (1 / var(--r) + var(--bez-y))));}
}
.ct-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;outline:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
.ct-canvas:active{cursor:grabbing;}
/* Once a photo is in, one finger moves it (instead of scrolling the page) */
.ct-stage.is-live .ct-canvas{touch-action:none;}
.ct-phone.is-focus{outline:2px solid var(--accent);outline-offset:4px;}
.ct-phone .phone-cutout{z-index:4;}

/* Lock Screen / Home Screen overlay drawn over the canvas (style.css draws the parts) */
.ct-ui{pointer-events:none;z-index:3;}
.ct-stage[data-view="plain"] .ct-ui{display:none;}
.ct-stage[data-view="home"] .ct-ui .lock-clock,.ct-stage[data-view="home"] .ct-ui .lock-bottom{display:none;}
.ct-stage[data-view="home"] .ct-ui .home-grid,.ct-stage[data-view="home"] .ct-ui .home-dock{display:grid;}
.ct-ui .home-grid{gap:5.6cqw 6.5cqw;padding:13cqw 7cqw 0;}
.ct-ui .lock-bottom{padding-bottom:7cqw;}
.ct-ui .home-dock{margin-bottom:3.5cqw;}
.ct-phone[data-frame="home"] .ct-ui .home-dock{margin:auto 0 0;border-radius:0;}
.ct-phone[data-frame="home"] .ct-ui .lock-clock{margin-top:5cqw;}
.ct-phone[data-frame="home"] .ct-ui .status-bar{padding:1.2cqw 3cqw 0;font-size:max(9px,3.2cqw);}
.ct-phone[data-tone="light"] .ct-ui{color:rgba(20,20,24,.9);}
.ct-phone[data-tone="light"] .ct-ui .lock-clock{text-shadow:none;}
.ct-hint{margin:0;max-width:40ch;text-align:center;font-size:.82rem;color:var(--muted);line-height:1.45;}
@media (hover:none) and (pointer:coarse){.ct-kbd{display:none;}}   /* touch screens: no keyboard tip */

/* ---------- Steps ---------- */
.ct-step{min-width:0;padding:18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--raised);}
.ct-step-h{display:flex;align-items:center;gap:10px;font-size:var(--step-1);margin:0 0 14px;}
.ct-step-h::before{content:attr(data-n);display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;
  background:var(--text);color:var(--on-text);font-family:var(--font-ui);font-size:.88rem;font-weight:700;letter-spacing:0;}
.ct-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:12px;}
.ct-small{margin:0;font-size:.82rem;color:var(--muted);line-height:1.45;}
.ct-small strong{color:var(--text);}
.ct-tool .btn .icon,.ct-tool .btn svg{width:20px;height:20px;flex:none;}
.ct-tool .btn:disabled{opacity:.45;cursor:not-allowed;transform:none;}
.ct-error{margin:12px 0 0;color:var(--danger-text);font-size:.88rem;}

/* Photo slots: a real file input (focusable, visually hidden) and its label as the button */
.ct-slots{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.ct-slot{position:relative;min-width:0;}
.ct-file{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;}
.ct-slot-btn{
  display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;padding:14px 8px;
  border:1.5px dashed var(--line-strong);border-radius:var(--r-md);background:var(--raised-2);
  text-align:center;cursor:pointer;transition:border-color .15s,background-color .15s;
}
.ct-slot-btn:hover{border-color:var(--text);}
.ct-file:focus-visible + .ct-slot-btn{outline:2px solid var(--accent);outline-offset:3px;}
.ct-slot.has-photo .ct-slot-btn{border-style:solid;border-color:var(--line);}
.ct-slot.has-photo .ct-slot-btn:hover{border-color:var(--line-strong);}
.ct-slot.is-drop .ct-slot-btn{border-color:var(--accent);background:var(--ghost-hover);}
.ct-slot-img{width:56px;height:56px;border-radius:50%;background:var(--raised);box-shadow:0 0 0 1px var(--hairline);}
.ct-slot-text{display:flex;flex-direction:column;line-height:1.3;min-width:0;}
.ct-slot-text strong{font-size:.95rem;}
.ct-slot-text span{font-size:.8rem;color:var(--muted);}
.ct-slot-action{padding:5px 14px;border-radius:999px;background:var(--text);color:var(--on-text);font-size:.8rem;font-weight:600;}
.ct-slot.has-photo .ct-slot-action{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line-strong);}

/* Template picker: a row to swipe on phones, a grid beside the preview on wide screens */
.ct-tpl-list{
  display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  margin:0 -18px;padding:6px 18px 10px;scroll-padding:0 18px;scrollbar-width:thin;
}
.ct-tpl{position:relative;flex:0 0 74px;display:flex;flex-direction:column;align-items:stretch;gap:7px;scroll-snap-align:start;cursor:pointer;text-align:center;}
.ct-tpl input{position:absolute;top:0;left:0;width:100%;height:1px;opacity:0;margin:0;pointer-events:none;}
.ct-tpl canvas{display:block;width:100%;height:auto;aspect-ratio:var(--r);border-radius:10px;background:var(--raised-2);
  box-shadow:0 0 0 1px var(--line);transition:box-shadow .15s;}
.ct-tpl:hover canvas{box-shadow:0 0 0 1px var(--line-strong);}
.ct-tpl input:checked + canvas{box-shadow:0 0 0 2px var(--raised),0 0 0 4px var(--text);}
.ct-tpl input:focus-visible + canvas{outline:2px solid var(--accent);outline-offset:5px;}
.ct-tpl-name{font-size:.74rem;line-height:1.25;color:var(--muted);}
.ct-tpl input:checked ~ .ct-tpl-name{color:var(--text);font-weight:600;}
@media (min-width:900px){
  .ct-tpl-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:14px 10px;overflow:visible;margin:0;padding:4px;}
}

/* Segmented choices (radio buttons) */
.ct-seg{display:inline-flex;max-width:100%;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--raised-2);}
.ct-seg label{position:relative;cursor:pointer;}
.ct-seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;}
.ct-seg span{display:block;padding:7px 14px;border-radius:999px;font-size:.85rem;font-weight:600;line-height:20px;color:var(--muted);white-space:nowrap;}
.ct-seg label:hover span{color:var(--text);}
.ct-seg input:checked + span{background:var(--text);color:var(--on-text);}
.ct-seg input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px;}
@media (max-width:380px){.ct-view span{padding:7px 10px;font-size:.8rem;}}

.ct-zoom{display:grid;grid-template-columns:auto minmax(0,1fr) 3.4em;align-items:center;gap:12px;margin:16px 0 0;}
.ct-zoom label{font-weight:600;font-size:.92rem;}
.ct-zoom input{width:100%;height:32px;margin:0;accent-color:var(--accent);cursor:pointer;}
.ct-zoom output{text-align:right;font-size:.88rem;color:var(--muted);font-variant-numeric:tabular-nums;}

.ct-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.ct-field label{font-weight:600;font-size:.92rem;}
.ct-optional{font-weight:400;color:var(--muted);}
/* 16px text, so iPhone Safari doesn't zoom in on focus */
.ct-field input,.ct-field select{width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--raised-2);color:var(--text);font-size:1rem;}
.ct-field input::placeholder{color:var(--muted);opacity:1;}
.ct-field input:hover,.ct-field select:hover{border-color:var(--line-strong);}
.ct-field select{appearance:none;-webkit-appearance:none;padding-right:40px;text-overflow:ellipsis;cursor:pointer;
  background:var(--raised-2) var(--chevron) no-repeat right 14px center;}
.ct-need{margin-top:10px;text-align:center;}

/* The finished wallpaper */
.ct-result{display:grid;grid-template-columns:minmax(0,118px) minmax(0,1fr);gap:16px;align-items:start;margin-top:16px;padding:14px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--raised-2);}
.ct-result img{width:100%;height:auto;border-radius:12px;background:var(--raised);box-shadow:0 0 0 1px var(--hairline);
  -webkit-touch-callout:default;}
.ct-result-side{display:flex;flex-direction:column;gap:10px;min-width:0;}
.ct-result-h{margin:0;font-family:var(--font-display);font-size:var(--step-1);font-weight:700;line-height:1.2;outline:none;}
.ct-result-side a:not(.btn){color:var(--accent);text-decoration:underline;text-underline-offset:3px;}
@media (max-width:420px){.ct-result{grid-template-columns:minmax(0,96px) minmax(0,1fr);gap:12px;padding:12px;}}

.ct-how{margin-top:56px;}