/* Paper V3: approved A/B/C/D/E concepts, isolated presentation layer. */
:root {
 --easy-canvas:#fffbf6; --easy-surface:#fffefd; --easy-ink:#173653; --easy-ink-soft:#657281;
 --easy-coral:#e27660; --easy-coral-action:#b94735; --easy-coral-pressed:#a53b2d;
 --easy-line:#eee3da; --easy-shadow:0 8px 24px rgb(117 77 45 / .065);
 --app-height:100dvh; --app-top:0px; --nav-height:68px;
}
html,body { height:100%; overflow:hidden; }
body:not(.guide-page) { background:var(--easy-canvas) url('ui-assets/girl-v1/background-clouds.webp') center / cover fixed; }
body:not(.guide-page) main { min-height:0; }
.site-nav { height:var(--nav-height); margin:0 auto; padding:10px 24px 0; border:0; }
.brand { display:inline-flex; align-items:baseline; gap:7px; text-decoration:none; }
.brand span { position:relative; font:italic 800 37px/1 Georgia,serif; letter-spacing:-2px; }
.brand span::after { position:absolute; top:-5px; right:2px; width:4px; height:10px; border-radius:4px; background:var(--easy-coral); transform:rotate(22deg); content:''; }
.brand small { color:var(--easy-ink); font:700 23px/1 var(--easy-display); letter-spacing:-.05em; }
.nav-action { border:0; background:transparent; box-shadow:none; color:var(--easy-ink); }
.nav-action .ph { font-size:25px; }
.one-screen { display:flex; flex-direction:column; height:calc(var(--app-height) - var(--nav-height)); padding:12px 24px max(18px,env(safe-area-inset-bottom)); }
.one-screen::before,.one-screen::after { content:none; }
.mini-step { position:static; flex:none; display:block; width:fit-content; height:auto; clip:auto; overflow:visible; padding:6px 12px; border:0; border-radius:99px; background:#f5ece5; color:var(--easy-ink-soft); font:600 12px/1.2 var(--easy-reading); letter-spacing:.08em; }
.page-intro,.result-page .page-intro { position:relative; display:flex; flex:none; min-height:56px; align-items:center; margin:10px 0 14px; }
.one-screen h1 { display:block; margin:0; font:700 clamp(35px,9vw,44px)/1.2 var(--easy-display); letter-spacing:-.045em; }
.page-paper-art { position:absolute; right:-5px; bottom:-8px; width:115px; height:100px; object-fit:contain; pointer-events:none; }
.materials-form,.confirm-form { flex:1; min-height:0; gap:12px; }
.button { min-height:56px; border-radius:16px; font:700 20px/1 var(--easy-display); letter-spacing:.02em; }
.button.primary { border:1px solid #bb4a37; background:linear-gradient(115deg,#bf4e3c,#b94735); box-shadow:inset 0 1px 0 rgb(255 255 255 / .2),0 5px 12px rgb(185 71 53 / .1); }
.button.primary:hover { background:var(--easy-coral-pressed); }
.button.secondary { background:rgb(255 255 255 / .9); border:1px solid var(--easy-line); }
.button[aria-busy=true] { cursor:wait; opacity:.7; }
.prompt-panel { min-height:0; padding:26px 0 0; border-radius:9px 9px 32px 9px; background:rgb(255 254 250 / .94); box-shadow:0 8px 18px rgb(149 110 65 / .1),inset 0 0 0 1px rgb(255 255 255 / .9); }
.prompt-panel::before { position:absolute; top:13px; left:12px; right:12px; height:10px; background:radial-gradient(circle,#faeddb 0 4px,transparent 4.8px) 0 0 / 29px 10px repeat-x; content:''; pointer-events:none; }
.prompt-panel::after { display:block; position:absolute; right:0; bottom:0; width:30px; height:30px; border-radius:0 0 30px 0; background:linear-gradient(135deg,transparent 43%,#f8e5cd 45%,#fff5e8 70%); pointer-events:none; content:''; }
.prompt-panel textarea { width:100%; height:100%; min-height:0; padding:18px 22px 24px; border:1px solid transparent; border-radius:8px 8px 30px 8px; background:transparent; box-shadow:none; font:500 21px/1.65 var(--easy-reading); overflow:auto; overscroll-behavior:contain; }
.prompt-panel textarea:focus { border-color:#e8bbaa; outline:none; box-shadow:inset 0 0 0 2px #f6dfd1; }
.optional-panel { border:1px solid rgb(255 255 255 / .9); box-shadow:0 3px 12px rgb(117 77 45 / .035); border-radius:20px; background:rgb(255 255 255 / .94); }
.optional-panel summary { min-height:50px; padding:0 19px; font:700 19px/1 var(--easy-display); }
.optional-panel summary>span { display:inline-flex; align-items:center; gap:12px; }
.optional-panel summary .ph { color:var(--easy-ink); }
.app-sheet summary>.ph-x { display:none; }
.app-sheet[open] summary>.ph-x { display:inline-grid; }
.app-sheet[open] summary>.ph-plus,.app-sheet[open] summary>.ph-caret-down { display:none; }
/* Replace historical rules that hid context or replaced next-step text. */
.materials-page:has(.app-sheet[open]) h1,.confirm-page:has(.app-sheet[open]) h1 { display:block; }
.confirm-page:has(.app-sheet[open]) .check-stack { display:flex; }
.confirm-page:has(.app-sheet[open]) .app-sheet:not([open]) { display:block; }
.materials-page:has(.app-sheet[open]) .button.primary { font-size:20px; }
.materials-page:has(.app-sheet[open]) .button.primary::after { content:none; }
.materials-page:has(.app-sheet[open])::after,.confirm-page:has(.app-sheet[open])::after { position:fixed; inset:0; width:auto; height:auto; border-radius:0; z-index:30; background:rgb(45 32 26 / .08); content:''; pointer-events:none; }
.app-sheet[open] { position:fixed; z-index:40; bottom:max(0px,calc(100dvh - var(--app-height) - var(--app-top))); left:50%; width:min(calc(100% - 16px),504px); max-height:calc(var(--app-height) - 12px); margin:0; transform:translateX(-50%); border:1px solid #efe4da; border-radius:25px 25px 16px 16px; background:#fffefa; box-shadow:0 -12px 50px rgb(48 36 26 / .13); }
.app-sheet[open] summary { min-height:60px; }
.app-sheet[open] .optional-body { max-height:none; overflow:visible; padding:0 20px 18px; }
.app-sheet .field { min-width:0; margin:8px 0 12px; }
.app-sheet .field label { display:inline-flex; align-items:center; gap:8px; font:600 16px/1.3 var(--easy-reading); }
.app-sheet input:not([type=radio]):not([type=checkbox]),.app-sheet textarea { max-width:100%; border:1px solid #e5e1de; background:#fbfaf8; color:var(--easy-ink); font:400 17px/1.5 var(--easy-reading); }
.app-sheet input:not([type=radio]):not([type=checkbox]) { min-height:44px; }
.app-sheet textarea { height:min(24dvh,180px); min-height:60px; resize:none; overflow:auto; overscroll-behavior:contain; }
.app-sheet .sheet-close { display:flex; width:100%; min-height:44px; margin-top:12px; font-size:18px; }
.file-name { display:block; max-height:3.1em; overflow:hidden; overflow-wrap:anywhere; font-size:12px; }
.file-name:empty { display:none; }
.file-picker label { width:100%; }
.confirm-form .check-stack { display:flex; flex-direction:column; gap:7px; padding:12px; border:1px solid #fff; border-radius:24px; background:rgb(255 255 255 / .94); overflow:hidden; box-shadow:var(--easy-shadow); }
.confirm-form .check-item { display:flex; flex:none; align-items:center; gap:12px; margin:0; padding:9px; min-height:56px; border:1px solid transparent; border-radius:17px; background:#faf8f5; box-shadow:none; color:var(--easy-ink); font:600 17px/1.55 var(--easy-reading); overflow-wrap:anywhere; }
.confirm-form .check-item .knowledge-text {
 flex:1; min-width:0;
 font-family:var(--easy-reading);
 font-weight:400; font-synthesis:none;
}
.knowledge-icon { display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:12px; background:#eaf2ff; color:#4279bc; font-size:22px; }
.knowledge-icon[data-tone=peach] { background:#fff0e1; color:#bc6736; }
.knowledge-icon[data-tone=mint] { background:#e7f4ec; color:#347d68; }
.knowledge-icon[data-tone=rose] { background:#fdebe7; color:#b94f3e; }
.confirm-form .check-item input { flex:none; order:2; align-self:center; width:24px; height:24px; margin:0; accent-color:var(--easy-coral-action); cursor:pointer; }
.confirm-form .check-item:has(input:checked) { background:#fcf7f3; border-color:#f2e5db; }
.check-item[hidden],.knowledge-pager[hidden] { display:none !important; }
.knowledge-pager { display:flex; flex:none; align-items:center; justify-content:center; gap:16px; height:44px; }
.knowledge-pager button { display:grid; place-items:center; width:44px; height:44px; border:1px solid #eee7e0; border-radius:50%; color:var(--easy-ink); background:#fffcf8; cursor:pointer; font-size:24px; }
.knowledge-pager button:disabled { opacity:.3; cursor:default; }
.knowledge-pager output { min-width:52px; text-align:center; color:var(--easy-ink-soft); font:600 14px var(--easy-reading); }
.preference-copy strong { font:600 16px var(--easy-reading); }
.confirm-form .density>div { gap:3px; padding:4px; background:#f4f1ed; border-radius:14px; }
.confirm-form .density>div>div { border:1px solid transparent; border-radius:11px; }
.confirm-form .density>div>div label { min-height:44px; padding:0 3px; font:500 15px/1 var(--easy-reading); }
.confirm-form .density>div>div:has(input:checked) { background:#fff0e8; border-color:#ebbaaa; color:var(--easy-coral-action); }
.compact-auth { height:calc(var(--app-height) - var(--nav-height)); min-height:0; max-width:520px; margin:0 auto; padding:0 24px max(18px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; justify-content:flex-end; gap:12px; }
.auth-nav { justify-content:center; }
.auth-paper-art { display:block; flex:1 1 auto; min-height:0; max-height:215px; width:min(70%,240px); object-fit:contain; align-self:center; }
.compact-auth .auth-panel { flex:none; width:100%; padding:23px; border:1px solid #fff; border-radius:25px; background:rgb(255 255 255 / .94); box-shadow:var(--easy-shadow); }
.compact-auth .auth-tabs { margin-bottom:22px; }
.compact-auth .auth-tabs a { font:700 23px var(--easy-display); color:#8b94a1; }
.compact-auth .auth-tabs a.active { color:var(--easy-ink); }
.compact-auth .auth-tabs a.active::after { height:3px; background:var(--easy-coral); }
.compact-auth .field { margin-bottom:17px; gap:7px; }
.compact-auth .field label { display:inline-flex; align-items:center; gap:10px; color:var(--easy-ink); font:600 18px var(--easy-reading); }
.compact-auth input { min-height:48px; padding:10px 14px; border:1px solid #dedfdf; border-radius:13px; background:#fbfaf8; font:500 18px var(--easy-reading); }
.compact-auth input[aria-invalid=true] { border-color:#b94735; }
.compact-auth form .button { width:100%; margin-top:6px; }
.form-error { flex:none; margin:0; padding:7px 10px; border-radius:10px; background:#fff0e9; color:#a13c30; font:500 14px/1.4 var(--easy-reading); overflow-wrap:anywhere; }
.form-error:empty { display:none; }
.result-page .status-card { padding:22px; border:1px solid rgb(255 255 255 / .85); border-radius:25px; background:rgb(255 255 255 / .74); box-shadow:var(--easy-shadow); }
.status-card .ui-status-character { position:static; flex:0 1 auto; min-height:0; max-height:min(28dvh,220px); margin:0 0 22px; }
.status-card>p { font:700 28px/1.3 var(--easy-display); }
.result-actions { flex:none; gap:8px; margin-top:8px; }
.result-actions .button { padding-inline:12px; }
.result-stage { padding:0 44px 30px; box-shadow:var(--easy-shadow); border:5px solid #fffefa; border-radius:22px; }
.result-stage .result-slide { left:44px; right:44px; bottom:30px; }
.result-stage:not(:has(.result-arrow)) .result-slide { left:0; right:0; }
.result-arrow { top:calc(50% - 15px); bottom:auto; width:44px; height:44px; transform:translateY(-50%); background:#fff7ee; border-color:var(--easy-line); }
.result-previous { left:0; } .result-next { right:0; }
.result-arrow span { width:10px; height:10px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); }
.result-previous span { transform:rotate(-135deg); }
.result-arrow:focus-visible { outline:3px solid var(--easy-coral-action); outline-offset:1px; }
.result-arrow:disabled { opacity:.3; }
.result-version { top:auto; bottom:9px; left:50%; right:auto; margin:0; padding:5px 10px; border:0; font-size:12px; transform:translateX(-50%); }
.result-version strong { display:none; }
.download-feedback { display:flex; flex:none; align-items:center; gap:8px; min-height:44px; margin-top:8px; padding:5px 9px; border-radius:12px; background:#fff7ee; color:var(--easy-ink); font:500 14px var(--easy-reading); }
.download-feedback span { flex:1; }
.download-feedback button { min-width:44px; min-height:44px; border:0; background:transparent; color:var(--easy-coral-action); font:inherit; cursor:pointer; }
.status-card:has(.research-journey) { display:flex; overflow:visible; padding:0; border:0; background:transparent; box-shadow:none; }
.research-journey { display:flex; flex:1; flex-direction:column; min-height:0; padding:0; }
.research-journey__visual { flex:1 1 auto; min-height:40px; max-height:240px; height:auto; margin:6px auto 14px; }
.research-mascot { min-height:0; max-height:100%; }
.research-journey__visual:has(img) .research-orbit,.research-signal { display:none; }
.research-journey__visual:not(:has(img)) { display:none; }
.status-card .research-kicker { font:600 12px/1.3 var(--easy-reading); margin:4px 0 8px; color:var(--easy-coral-action); }
.research-journey h2 { font:700 29px/1.3 var(--easy-display); }
.status-card .research-summary { margin:9px 0 16px; font:400 15px/1.6 var(--easy-reading); color:var(--easy-ink-soft); }
.research-track,.research-detail,.research-journey__topline { flex:none; }
.research-track { padding:11px 16px; border:1px solid #fff; border-radius:22px; background:rgb(255 255 255 / .85); }
.research-track li { min-height:48px; }
.research-track__icon { border:0; background:#edf2f4; }
.research-track .is-active .research-track__icon { background:#f8e5d8; color:#a14c32; box-shadow:none; }
.research-detail { margin-top:10px; }
.status-card .research-detail p { font:400 14px/1.6 var(--easy-reading); }
.research-journey:has(.research-detail[open]) .research-journey__visual { max-height:90px; }
.research-journey:has(.research-detail[open]) .research-kicker { display:none; }
/* Native keyboard: fixed outer viewport, scroll only inside editable fields. */
body.keyboard-open:not(.guide-page) { position:fixed; top:var(--app-top); width:100%; height:var(--app-height); }
.keyboard-open { --nav-height:44px; }
.keyboard-open .site-nav { padding-top:0; }
.keyboard-open .brand span { font-size:27px; }
.keyboard-open .brand small { font-size:18px; }
.keyboard-open .one-screen { padding-top:4px; padding-bottom:8px; }
.keyboard-open .mini-step,.keyboard-open .page-intro,.keyboard-open .auth-paper-art,.keyboard-open .resume-section { display:none; }
.keyboard-open .materials-form,.keyboard-open .confirm-form { gap:6px; }
.keyboard-open .optional-panel summary { min-height:44px; }
.keyboard-open .button { min-height:44px; }
.keyboard-open .app-sheet textarea { height:max(60px,min(100px,calc(var(--app-height) - 220px))); }
.keyboard-open .app-sheet .field { margin:4px 0 7px; }
.keyboard-open .app-sheet summary { min-height:44px; }
.keyboard-open .app-sheet .optional-body { padding-bottom:8px; }
.keyboard-open .materials-form .app-sheet[open]:has(input:focus) .field:not(:focus-within) { display:none; }
.keyboard-open .compact-auth { gap:0; justify-content:center; }
.keyboard-open .auth-panel { padding:10px 16px; }
.keyboard-open .auth-tabs { margin-bottom:8px; }
.keyboard-open .auth-panel .field { margin-bottom:6px; gap:2px; }
.keyboard-open .auth-panel input { min-height:38px; padding:5px 10px; }
@media(max-height:700px) {
 :root { --nav-height:60px; }
 .one-screen { padding-top:6px; padding-bottom:max(10px,env(safe-area-inset-bottom)); }
 .page-intro,.result-page .page-intro { min-height:44px; margin:9px 0 12px; }
 .one-screen h1 { font-size:32px; }
 .page-paper-art { width:88px; height:75px; }
 .button { min-height:48px; }
 .optional-panel summary { min-height:48px; }
 .materials-form,.confirm-form { gap:8px; }
 .confirm-form .check-stack { padding:8px; }
 .confirm-form .check-item { padding:9px; gap:9px; min-height:56px; font-size:16px; }
 .knowledge-icon { width:30px; height:34px; font-size:20px; }
 .compact-auth { gap:8px; }
 .auth-paper-art { max-height:112px; }
 .compact-auth .auth-panel { padding:17px; }
 .compact-auth .auth-tabs { margin-bottom:12px; }
 .compact-auth .field { margin-bottom:10px; }
 .compact-auth input { min-height:44px; }
 .research-track li { min-height:40px; }
 .research-detail summary { min-height:44px; }
 .research-journey h2 { font-size:26px; }
 .status-card .research-summary { margin:7px 0; font-size:13px; }
 .research-journey:has(.research-detail[open]) .research-journey__visual { display:none; }
 .keyboard-open { --nav-height:40px; }
}
@media(max-width:360px) {
 .site-nav { padding-inline:16px; }
 .one-screen,.compact-auth { padding-inline:16px; }
 .result-actions .button { min-width:0; padding-inline:8px; font-size:16px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
.source-review-page { display:flex; flex-direction:column; gap:12px; }
.source-gap { flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center; }
.source-gap strong { overflow-wrap:anywhere; font-size:clamp(14px,3.5vw,18px); }
.source-gap-nav { display:flex; justify-content:center; gap:12px; }
.source-gap-nav .button { min-width:64px; min-height:44px; }
.source-decision { flex:none; display:grid; gap:8px; }
.source-decision .status-note { font-size:12px; text-align:center; }
