/* Blanky shared stylesheet owns colors, fonts, navigation, buttons and spacing. */
.photo-hero { grid-template-rows:auto auto; row-gap:0; }
.photo-intro { grid-column:1; grid-row:1; align-self:end; }
.start { grid-column:1; grid-row:2; align-self:start; }
.example { grid-column:2; grid-row:1 / span 2; margin:0; min-width:0; }
.character-preview { max-width:390px; margin-left:auto; margin-right:auto; }
.character-art { padding:14px; }
.character-art img { width:100%; height:auto; border-radius:10px; }
.start .actions { margin-top:20px; }
button.button { font-family:inherit; cursor:pointer; }
button.button:disabled { cursor:wait; opacity:.75; }
.copy-status { color:var(--blue); min-height:24px; margin-bottom:16px; }
.next strong { color:var(--ink); font-weight:500; }
.privacy { margin-bottom:0; }
.photo-guide { padding-bottom:64px; }
.download-help h2 { margin-bottom:22px; }
.faq label { display:block; font-size:13px; color:var(--muted); margin:10px 0; }
.faq textarea { display:block; width:100%; padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--panel); color:var(--ink); font-size:14px; line-height:1.8; font-family:inherit; resize:vertical; }
.select-button { margin-top:12px; font-family:inherit; }
.help { margin-top:24px; border-top:1px solid var(--line); padding-top:24px; }
.help p { font-size:14px; color:var(--muted); }
.help strong { color:var(--ink); font-weight:500; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
@media(max-width:760px) {
  .photo-hero { gap:28px; }
  .photo-intro,.example,.start { grid-column:auto; grid-row:auto; }
  .character-preview { max-width:300px; }
  .start .actions { margin-top:0; }
  .start .button { width:100%; }
  .photo-guide { padding-bottom:40px; }
}
.photo-reference { display:grid; grid-template-columns:1fr 1.2fr; gap:40px; padding-bottom:56px; }
.photo-reference h2 { margin-bottom:0; }
.reference-body { min-width:0; }
.reference-body img { display:block; width:100%; max-width:320px; height:auto; margin-bottom:16px; background:#fff; border-radius:12px; }
.reference-body p { font-size:14px; color:var(--muted); }
.reference-body strong { color:var(--ink); font-weight:500; }
.reference-body .fine { margin-top:14px; font-size:12px; }
.mock-note strong { font-weight:500; }
#refine-panel > .button { margin-top:12px; }
#refine-panel .copy-status { margin-top:10px; margin-bottom:10px; }
@media(max-width:760px) { .photo-reference { grid-template-columns:1fr; gap:20px; padding-bottom:40px; } .reference-body img { max-width:280px; } }
.generation { min-width:0; }
.upload-label { display:block; font-weight:500; margin:18px 0 10px; }
.upload-label span { display:block; font-size:12px; color:var(--muted); font-weight:400; }
#photo-input { width:100%; font:inherit; font-size:13px; color:var(--muted); }
#photo-input::file-selector-button { background:var(--panel); color:var(--ink); padding:12px 16px; border:1px solid var(--line); border-radius:10px; margin-right:10px; cursor:pointer; }
.consent { display:flex; align-items:flex-start; gap:10px; font-size:13px; line-height:1.7; margin:20px 0; }
.consent input { flex:none; width:18px; height:18px; margin:3px 0 0; accent-color:var(--ink); }
.input-preview { max-width:140px; max-height:150px; border-radius:12px; object-fit:contain; margin:14px 0; }
.generation .button { width:100%; justify-content:center; }
.generation-privacy { line-height:1.8; margin:16px 0 12px; }
.generation-result { margin:24px 0; }
.generation-result img { width:100%; max-width:320px; display:block; border-radius:12px; margin:auto; }
.job-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.text-button { background:none; border:0; text-decoration:underline; color:var(--muted); font:inherit; font-size:13px; cursor:pointer; padding:10px 0; }
.progress { height:4px; background:var(--line); border-radius:3px; overflow:hidden; margin-top:20px; }
.progress span { display:block; width:35%; height:100%; background:#bd785b; animation:waiting 1.7s ease-in-out infinite alternate; }
@keyframes waiting { to { transform:translateX(180%); } }
@media(prefers-reduced-motion:reduce) { .progress span { animation:none; width:60%; } }
.manual-flow { padding-top:36px; padding-bottom:64px; border-top:1px solid var(--line); }
.manual-flow>summary { font-size:20px; cursor:pointer; font-weight:500; }
.manual-actions { padding:20px 0 40px; }
.manual-flow .photo-reference { margin-top:20px; }
.manual-flow .actions { display:flex; flex-wrap:wrap; gap:12px; }
[hidden] { display:none!important; }
@media(max-width:760px) { .manual-flow .actions .button { width:100%; } .manual-flow>summary { font-size:17px; } }

/* Keep the requested title/description at exactly two lines on narrow screens. */
#photo-title { font-size:clamp(26px,3vw,44px); }
.photo-intro .copy-line { white-space:nowrap; }

.file-picker { position:relative; display:inline-block; }
.file-picker #photo-input { position:absolute; inset:0; width:100%; height:100%; opacity:0; z-index:1; cursor:pointer; }
.file-picker:focus-within { outline:3px solid var(--blue); outline-offset:4px; border-radius:99px; }
.file-picker .button { pointer-events:none; }
#photo-name { margin:8px 0; overflow-wrap:anywhere; }
#local-preview-note { margin-bottom:0; }