/* Project app surfaces share one viewport. Marketing and gift pages keep their own layout. */
html.app-mode{height:100%;overflow:hidden;scroll-behavior:auto}
body.app-mode{position:fixed;inset-inline:0;top:var(--app-top,0px);height:var(--app-height,100dvh);min-height:0;overflow:hidden;display:flex;flex-direction:column;line-height:1.55}
.app-mode #app{flex:1;min-height:0;width:100%}
.app-mode .app-frame{height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:var(--paper)}
.app-mode .app-top{min-width:0;padding-top:env(safe-area-inset-top,0px);background:var(--paper);border-bottom:1px solid var(--rule)}
.app-mode .app-top-row{width:100%;min-height:72px;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px max(24px,env(safe-area-inset-right)) 10px max(24px,env(safe-area-inset-left));font-size:.82rem}
.app-mode .app-top-row>span{font-weight:550}
.app-mode .app-top a{display:inline-flex;align-items:center;min-height:44px;flex-shrink:0}
.app-mode .progress{height:2px;background:transparent}
.app-mode .app-main{min-height:0;min-width:0}
.app-mode .app-scroll{overflow:auto;overscroll-behavior:contain;scroll-padding-block:24px;min-height:0;min-width:0;-webkit-overflow-scrolling:touch}
.app-mode .app-content{width:min(100%,880px);margin-inline:auto;padding:40px 32px}
.app-mode .app-content>h1,.app-mode .compact-heading h1{font-family:var(--serif);font-size:clamp(1.8rem,3vw,2.5rem);line-height:1.18;letter-spacing:-.025em;margin:0}
.app-mode .app-content h2{font-family:var(--sans);font-size:1.1rem;font-weight:600;letter-spacing:0;line-height:1.4}
.app-mode .app-content h3{font-size:1rem;line-height:1.4}
.app-mode .app-content .page-header{margin-bottom:24px}
.app-mode .app-content .page-header h1{font-size:clamp(1.8rem,3vw,2.5rem);margin-bottom:12px}
.app-mode .app-content .lead{font-size:1rem;line-height:1.6}
.app-mode .app-content .eyebrow{display:none}
.app-mode .app-content .panel{margin-top:24px;padding-block:24px}
.app-mode .wizard-bottom{margin:0;min-height:80px;padding:12px max(24px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));gap:16px;background:var(--paper);border-top:1px solid var(--rule);flex-wrap:nowrap}
.app-mode .action-next{display:flex;align-items:center;justify-content:flex-end;gap:20px;min-width:0}
.app-mode .wizard-bottom .btn{min-height:48px;white-space:normal;text-align:center;padding:12px 22px}
.app-mode .wizard-bottom .text-btn{flex-shrink:0}
.app-mode .btn,.app-mode .text-btn{font-size:.85rem}
.app-mode button:disabled{cursor:default}
.app-mode :is(a,button,input,textarea,select,summary):focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.app-mode input:not([type=checkbox],[type=radio],[type=file]),.app-mode textarea,.app-mode select{border:0;border-bottom:1px solid #8f969d;border-radius:0;background:#ffffff66;box-shadow:none;font-size:1rem;padding:12px;min-height:48px}
.app-mode :is(input:not([type=checkbox],[type=radio],[type=file]),textarea,select):focus{background:#fffdf9;border-color:var(--ink);box-shadow:0 0 0 3px #192b4315,0 3px 12px #192b4310;outline:none}
.app-mode .field{margin:0}
.app-mode .field>span{font-size:.85rem;font-weight:550;margin-bottom:6px}
.app-mode textarea{line-height:1.55}
.app-mode .sr-only,.app-mode .visually-hidden-input{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;clip-path:inset(50%)!important}
.app-mode .info-button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;padding:11px;color:var(--muted);background:none;border:0;border-radius:50%;vertical-align:middle}
.app-mode .info-button:hover,.app-mode .info-button[aria-expanded=true]{color:var(--ink);background:#192b4309}
.app-mode .info-button svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round}
.app-mode .app-help{grid-column:1/-1;font-size:.88rem;font-weight:400;line-height:1.6;color:var(--muted);padding:12px 16px;background:#eee9df;border-radius:4px;margin-top:4px;max-width:100%;overflow-wrap:anywhere}
.app-mode .question-heading,.app-mode .compact-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 8px}
.app-mode .question-heading{margin-bottom:28px}
.app-mode .app-frame--question .app-main{display:flex;flex-direction:column}
.app-mode .question{width:min(100%,800px);margin:auto;padding:32px;flex-shrink:0}
.app-mode .question h1{font-size:clamp(1.8rem,3.2vw,2.75rem);line-height:1.2;letter-spacing:-.025em;margin:0;text-wrap:pretty}
.app-mode .question input[type=text]{font-size:1.2rem;padding:14px 12px}
.app-mode .question textarea{font-size:1.15rem;min-height:140px;height:22dvh;max-height:none;padding:14px 12px;resize:vertical}
.app-mode .question-choices{padding:0;margin:0;border:0;min-width:0}
.app-mode .question .choice{padding:12px 16px;margin:8px 0;border-color:var(--rule);background:transparent;font-size:.95rem;align-items:center;min-height:52px}
.app-mode .question .choice input{margin-block:0}
.app-mode .question .choice:has(input:checked){border-color:#8f969d;color:var(--ink);background:#fffdf9;box-shadow:0 3px 12px #192b4310}
.app-mode .save-status{margin-top:10px;font-size:.75rem;min-height:20px}
.app-mode .readonly{font-size:.85rem;line-height:1.55;padding:12px 16px;margin:12px 0}
.app-mode .notice{padding:16px;margin-block:16px;font-size:.9rem}
.app-mode .compact-heading{margin-bottom:24px}
.app-mode .upload-zone{border:1px dashed #a0a5aa;border-radius:6px;padding:28px 24px;margin:0 0 12px;background:#fffdf955;text-align:center}
.app-mode .upload-zone.drag{background:#f4e8e9;border-color:var(--ink)}
.app-mode .upload-zone .hint{font-size:.82rem;margin:10px 0 0}
.app-mode .file-chooser{position:relative;display:inline-block}
.app-mode .file-chooser label{cursor:pointer}
.app-mode .file-chooser:focus-within label{outline:2px solid var(--ink);outline-offset:4px}
.app-mode :is(.batch-details,.file-details,.review-disclosure){border-top:1px solid var(--rule);padding:4px 0;margin-top:12px}
.app-mode :is(.batch-details,.file-details,.review-disclosure,.more-details)>summary{cursor:pointer;min-height:44px;display:list-item;padding-block:10px;font-size:.85rem;color:var(--muted)}
.app-mode .batch-details .field{margin:12px 0}
.app-mode .batch-details textarea{min-height:100px}
.app-mode .toolbar{margin:16px 0;gap:8px 20px}
.app-mode .toolbar h2{margin-right:auto}
.app-mode .media-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:16px}
.app-mode .media-tile{min-width:0;border-radius:4px}
.app-mode .media-tile :is(img,video){display:block;background:#000;object-fit:contain}
.app-mode .media-tile p{font-size:.8rem}
.app-mode .media-tile .checkbox-label{margin:0 0 10px;font-size:.75rem;min-height:32px;align-items:center}
.app-mode .media-main{overflow:hidden}
.app-mode .media-context-form{height:100%;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto}
.app-mode .media-context-content{width:min(100%,704px);margin-inline:auto;padding:20px 32px 24px}
.app-mode .preview{width:100%;height:clamp(140px,30dvh,280px);min-height:0;padding:0;gap:0;overflow:hidden;background:#000;color:#fff;border-radius:4px;position:relative}
.app-mode .preview :is(img,video){display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;background:#000;flex-shrink:0}
.app-mode .preview audio{width:calc(100% - 40px);max-width:420px}
.app-mode .preview .file-icon{font-size:1.1rem;font-family:var(--sans)}
.app-mode .preview .hint{color:#e7e7e7;font-size:.82rem;padding:12px 20px}
.app-mode .context-fields{min-width:0;margin:16px 0 0;padding:0;border:0;display:grid;gap:12px}
.app-mode .context-fields textarea{min-height:80px;height:80px;resize:vertical}
.app-mode .more-details{margin:0;padding:0}
.app-mode .more-details .field{margin:12px 0}
.app-mode .file-details{margin:0}
.app-mode .file-details .text-btn{margin-right:24px}
.app-mode .handover-content{max-width:760px;padding-top:40px}
.app-mode .handover-explanation{font-size:.92rem;color:var(--muted);line-height:1.6;margin-top:12px;max-width:580px}
.app-mode .story-state{font-size:.85rem;margin-top:16px;color:var(--green)}
.app-mode .handover-summary{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:28px 0 20px}
.app-mode .handover-summary>div{display:flex;flex-direction:column;align-items:flex-start;border-top:1px solid var(--rule);padding-top:16px;gap:4px}
.app-mode .handover-summary strong{font-weight:600}
.app-mode .handover-summary .text-btn{font-size:.82rem}
.app-mode .review-disclosure{margin-top:0}
.app-mode .review-answer{padding:20px 0}
.app-mode .review-answer h2{font-size:.95rem;font-weight:550;margin-bottom:8px}
.app-mode .review-answer p,.app-mode .review-file p{font-size:.9rem;white-space:pre-wrap;overflow-wrap:anywhere}
.app-mode .review-file{padding:10px 0;border-top:1px solid var(--rule);overflow-wrap:anywhere}
.app-mode .overview-row{padding:20px 0}
.app-mode .overview-row h2{font-size:1.05rem}
.app-mode .thread{margin-top:16px}
.app-mode .thread-item .field{margin-bottom:16px}
.app-mode .connection{position:static;flex-shrink:0;padding:8px 16px}
.app-mode .toast{bottom:100px;font-size:.85rem;max-height:30dvh;overflow:auto}
.app-mode .unsaved-dialog{max-height:calc(100dvh - 32px);overflow:auto}
@media(min-width:1000px){.app-mode .app-top-row,.app-mode .wizard-bottom{padding-left:max(40px,env(safe-area-inset-left));padding-right:max(40px,env(safe-area-inset-right))}}
@media(max-width:600px){
 .app-mode .app-top-row{min-height:60px;padding-inline:max(16px,env(safe-area-inset-left));font-size:.75rem;gap:8px}
 .app-mode .app-content{padding:24px 20px}
 .app-mode .question{padding:24px 20px}
 .app-mode .question h1{font-size:1.85rem}
 .app-mode .question-heading{margin-bottom:20px}
 .app-mode .question textarea{font-size:1rem}
 .app-mode .wizard-bottom{padding:10px max(16px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));gap:10px;min-height:72px}
 .app-mode .wizard-bottom .btn{padding:10px 14px;font-size:.8rem}
 .app-mode .wizard-bottom .text-btn{font-size:.8rem}
 .app-mode .action-next{gap:12px}
 .app-mode .media-context-content{padding:16px 20px 20px}
 .app-mode .preview{height:clamp(140px,30dvh,260px)}
 .app-mode .media-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .app-mode .handover-summary{gap:16px;margin-top:24px}
 .app-mode .upload-zone{padding:24px 16px}
}
@media(max-height:650px){
 .app-mode .app-top-row{min-height:56px;padding-block:4px}
 .app-mode .wizard-bottom{min-height:68px;padding-top:8px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
 .app-mode .question{padding-block:24px}
 .app-mode .media-context-content{padding-top:12px}
 .app-mode .preview{height:clamp(120px,26dvh,220px)}
}
@media(max-width:360px){
 .app-mode .wizard-bottom{gap:8px;padding-inline:12px}
 .app-mode .action-next{gap:8px}
 .app-mode .wizard-bottom .btn{padding-inline:10px}
}