/* Placeholder Image Generator landing page only (/tools/placeholder-image-generator).
   The live generator sits in the hero; ids are shared with /assets/tools/placeholder-image-generator.js. */

.tp-ph{--ph-ink:#071b35;--ph-muted:#52647b;--ph-line:#d7e1ee;--ph-blue:#1f5cf0;--ph-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.tp-ph.mt-public{padding-top:clamp(18px,3vw,40px)}
.tp-ph [hidden]{display:none !important}

/* hero: title, tool, then the intro on small screens; intro left, tool right on wide screens */
.tp-ph-hero{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "tool" "intro";gap:16px 0;align-items:start}
.tp-ph-head{grid-area:head;min-width:0}
.tp-ph-tool{grid-area:tool;min-width:0}
.tp-ph-intro{grid-area:intro;min-width:0}
@media (min-width:960px){
  .tp-ph-hero{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-areas:"head tool" "intro tool";grid-template-rows:auto 1fr;column-gap:clamp(28px,4vw,56px);row-gap:0}
  .tp-ph-head{padding-top:6px}
}
.tp-ph-head h1{margin:8px 0 0;font-size:clamp(1.85rem,3.6vw,3.3rem);line-height:1.04;letter-spacing:-.045em;overflow-wrap:anywhere}
.tp-ph-lede{margin:14px 0 16px;color:var(--ph-muted);font-size:1.06rem;line-height:1.6}
.tp-ph-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 16px;padding:10px 14px;border:1px solid var(--ph-line);border-radius:12px;background:#fff}
.tp-ph-price b{font-size:1.05rem;color:var(--ph-ink)}
.tp-ph-price span{color:var(--ph-muted);font-size:.9rem;font-weight:650}
.tp-ph-facts{margin:0 0 14px;padding:0;list-style:none;display:grid;gap:9px}
.tp-ph-facts li{position:relative;padding-left:22px;line-height:1.5;font-size:.95rem}
.tp-ph-facts li::before{content:"";position:absolute;left:4px;top:.55em;width:8px;height:8px;border-radius:2px;background:var(--ph-blue)}
.tp-ph-more{display:flex;flex-wrap:wrap;gap:0 20px;margin:0}
.tp-ph-more a{display:inline-flex;align-items:center;min-height:44px;color:var(--ph-blue);font-weight:800;text-underline-offset:3px}

/* tool card */
.tp-ph-tool{padding:clamp(14px,2vw,22px);border:1px solid var(--ph-line);border-radius:18px;background:#fff;box-shadow:0 18px 50px -32px rgba(7,27,53,.45)}
.tp-ph-stage{--ph-stage-h:clamp(170px,40vw,280px);display:flex;align-items:center;justify-content:center;height:var(--ph-stage-h);padding:12px;box-sizing:border-box;border:1px solid var(--ph-line);border-radius:12px;overflow:hidden;
  background-color:#f3f6fa;background-image:linear-gradient(45deg,#e6ebf2 25%,transparent 25%,transparent 75%,#e6ebf2 75%),linear-gradient(45deg,#e6ebf2 25%,transparent 25%,transparent 75%,#e6ebf2 75%);background-size:20px 20px;background-position:0 0,10px 10px}
.tp-ph-stage img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(var(--ph-stage-h) - 26px);min-width:0;object-fit:contain;box-shadow:0 6px 18px -10px rgba(7,27,53,.5)}
.tp-ph-info{margin:8px 0 0;min-height:1.3em;color:var(--ph-muted);font-size:.84rem;font-family:var(--ph-mono);overflow-wrap:anywhere}
.tp-ph-error{margin:6px 0 0;color:#b3261e;font-size:.88rem;font-weight:650}

.tp-ph-controls{display:grid;gap:12px;margin-top:14px}
.tp-ph-size{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) auto;gap:10px 12px;align-items:end}
.tp-ph-pair{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:10px 16px;align-items:end}
.tp-ph-inline{display:flex;gap:8px}
.tp-ph-inline input{flex:1 1 auto;min-width:0}
.tp-ph-field{min-width:0}
.tp-ph-field label{display:flex;justify-content:space-between;gap:8px;margin:0 0 6px;font-size:.82rem;font-weight:700;color:var(--ph-ink)}
.tp-ph-val{font-family:var(--ph-mono);font-weight:600;color:var(--ph-muted)}
.tp-ph select,.tp-ph input[type=number],.tp-ph input[type=text]{box-sizing:border-box;width:100%;min-height:42px;padding:8px 10px;border:1px solid #b9c6d8;border-radius:10px;background:#fff;color:var(--ph-ink);font:inherit;font-size:.95rem}
.tp-ph input[type=color]{box-sizing:border-box;display:block;width:64px;height:42px;padding:3px;border:1px solid #b9c6d8;border-radius:10px;background:#fff;cursor:pointer}
.tp-ph input[type=range]{width:100%;min-height:40px;margin:0;accent-color:var(--ph-blue);cursor:pointer}
.tp-ph input:focus-visible,.tp-ph select:focus-visible,.tp-ph button:focus-visible,.tp-ph a:focus-visible,.tp-ph summary:focus-visible{outline:3px solid var(--ph-blue);outline-offset:2px}

.tp-ph-checks{display:flex;flex-wrap:wrap;gap:4px 18px}
.tp-ph-check{display:inline-flex;align-items:center;gap:8px;min-height:40px;font-size:.92rem;font-weight:650;color:var(--ph-ink);cursor:pointer}
.tp-ph-check input{width:18px;height:18px;margin:0;accent-color:var(--ph-blue)}

.tp-ph-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tp-ph-btn{min-height:42px;padding:8px 14px;border:1px solid #b9c6d8;border-radius:10px;background:#fff;color:var(--ph-ink);font:inherit;font-size:.9rem;font-weight:750;cursor:pointer}
.tp-ph-btn:hover{border-color:var(--ph-blue);color:var(--ph-blue)}
.tp-ph-btn--main{border-color:var(--ph-blue);background:var(--ph-blue);color:#fff;padding-left:22px;padding-right:22px}
.tp-ph-btn--main:hover{background:#1747bf;color:#fff}
.tp-ph-swap,.tp-ph-inline .tp-ph-btn{white-space:nowrap}

.tp-ph-uri{margin-top:12px;border-top:1px solid var(--ph-line);padding-top:6px}
.tp-ph-uri summary{display:flex;align-items:center;min-height:40px;cursor:pointer;font-size:.88rem;font-weight:750;color:var(--ph-ink)}
.tp-ph-note{margin:6px 0 0;color:var(--ph-muted);font-size:.86rem;line-height:1.5}
.tp-ph-pre{margin:8px 0 0;padding:10px 12px;max-height:140px;overflow:auto;border-radius:10px;background:#0d1b33;color:#e6ecf7;font-family:var(--ph-mono);font-size:.76rem;line-height:1.5;white-space:pre-wrap;word-break:break-all;box-sizing:border-box;max-width:100%}
.tp-ph-pre:empty{display:none}

/* batch section */
.tp-ph-batch{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:clamp(32px,5vw,56px) 0 0;padding:clamp(16px,2.4vw,28px);border:1px solid var(--ph-line);border-radius:18px;background:#fff;scroll-margin-top:90px}
@media (min-width:900px){.tp-ph-batch{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px}}
.tp-ph-batch h2{margin:0 0 10px;font-size:clamp(1.3rem,2.2vw,1.7rem);letter-spacing:-.03em}
.tp-ph-batch-text p{margin:0;color:var(--ph-muted);line-height:1.6}
.tp-ph-batch-tool{min-width:0}
.tp-ph-batch-tool .tp-ph-actions{margin-top:12px}
.tp-ph-batch-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px}
.tp-ph-batch-list .bt-check{display:flex;align-items:center;gap:8px;min-height:42px;padding:0 10px;border:1px solid var(--ph-line);border-radius:10px;background:#f7f9fc;font-family:var(--ph-mono);font-size:.86rem;font-weight:600;color:var(--ph-ink);cursor:pointer}
.tp-ph-batch-list .bt-check:hover{border-color:var(--ph-blue)}
.tp-ph-batch-list input{width:18px;height:18px;margin:0;flex:none;accent-color:var(--ph-blue)}
.tp-ph-batch-list input:focus-visible{outline:3px solid var(--ph-blue);outline-offset:2px}

@media (max-width:420px){
  .tp-ph-size{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tp-ph-swap{grid-column:1/-1}
  .tp-ph-pair{grid-template-columns:auto auto minmax(0,1fr);gap:10px}
  .tp-ph input[type=color]{width:52px}
  .tp-ph-actions .tp-ph-btn{flex:1 1 auto}
  .tp-ph-batch-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (prefers-reduced-motion:reduce){.tp-ph *{transition:none !important;animation:none !important}}

/* the global footer note about 24-hour result expiry does not apply to this browser-only tool */
body.tp-ph-body .wt-foot-note{display:none}