/* 2026-10-11: live interface refinement; export layouts stay unchanged. */
.upload-actions { display:none; flex-shrink:0; padding:12px 24px max(16px,env(safe-area-inset-bottom)); background:#fffdfc; border-top:1px solid #e8ddd7; }
.app-container:has(#step-upload:not(.hidden)) .upload-actions { display:block; }
.app-container:has(#step-upload:not(.hidden)) #mainContainer { min-height:0; overscroll-behavior-y:contain; padding-bottom:20px; }
.upload-actions #analyzeBtn { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 12px; width:100%; min-height:56px; padding:14px 12px; border-radius:16px; color:#fffdfc; background:#3d342f; font-size:15px; letter-spacing:.04em; }
.upload-actions #analyzeBtn:disabled { color:#6f6058; background:#e8dfd5; cursor:not-allowed; }
.upload-actions .usage-label { font-size:12px; letter-spacing:0; }
.upload-actions button:focus-visible,.usage-details summary:focus-visible { outline:2px solid #8b5b49; outline-offset:3px; }
.usage-details { color:#6f6058; font-size:13px; line-height:1.8; margin-bottom:12px; }
.usage-details summary { cursor:pointer; min-height:44px; padding-block:10px; text-decoration:underline; text-underline-offset:4px; }
.usage-details p { margin:0 0 8px; }
@media(max-width:480px) {
 .app-container:has(#step-upload:not(.hidden)) { height:calc(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); min-height:0; }
 .app-container:has(#step-upload:not(.hidden)) #appHeader { padding-top:16px; padding-bottom:8px; }
 .app-container:has(#step-upload:not(.hidden)) .upload-actions { padding-inline:22px; }
}
#step-upload .photo-guide-item strong { font-size:13px; line-height:1.6; color:#51433c; }
#step-upload .photo-guide-item span:last-child { font-size:12px; line-height:1.6; color:#6f6058; }
#step-upload .photo-avoid { font-size:12px; line-height:1.8; color:#6f6058; }
#step-upload .upload-intro { font-size:13px; line-height:1.8; }
#step-upload .photo-guide-item { padding-inline:3px; }
#step-upload #analyzeBtn { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px 12px; min-height:56px; font-size:15px; letter-spacing:.04em; }
#step-upload #analyzeBtn .usage-label { font-size:12px; letter-spacing:0; font-weight:400; }
#step-upload #analyzeBtn:disabled { opacity:1; color:#6f6058; background:#e8dfd5; box-shadow:none; }
#step-upload .privacy-consent { flex-wrap:wrap; row-gap:0; }
#step-upload .privacy-consent label, #step-upload .privacy-policy-link { min-height:44px; display:inline-flex; align-items:center; }
#step-loading .analysis-meta, #step-loading .loading-note { font-size:13px; line-height:1.85; color:#6f6058; }
#step-loading .analysis-step { font-size:13px; line-height:1.7; }
#step-loading .analysis-cancel { min-height:44px; display:flex; align-items:center; justify-content:center; text-underline-offset:4px; }
#customAlert .modal-panel { background:#fffdfc; }
#customAlert #alertMessage { font-weight:400; line-height:1.8; }
#customAlert .modal-action { min-height:52px; }
#step-upload button:focus-visible, #step-loading button:focus-visible, #customAlert button:focus-visible { outline:2px solid #8b5b49; outline-offset:4px; }
/* Only the on-screen report gets larger utility text, never saved-image clones. */
.reference-reading:not(.reference-long-export) .archive-guide p,
.reference-reading:not(.reference-long-export) .archive-palette-note,
.reference-reading:not(.reference-long-export) .reference-export-note { font-size:13px; line-height:1.85; }
#step-result .report-action-note { font-size:13px; line-height:1.8; color:#6f6058; }
#step-result .report-index-links a { min-height:44px; display:inline-flex; align-items:center; justify-content:center; font-size:13px; }
#step-result .report-quick-save { min-height:44px; font-size:13px; }
#step-result .report-action { min-height:52px; }
#step-result .identity-assurance { font-size:13px; line-height:1.8; }
@media(max-width:480px) {
 #step-upload .upload-card { padding-inline:22px!important; }
 #step-upload .upload-card h2 { font-size:23px; letter-spacing:.06em; line-height:1.5; }
 #step-result .report-action-label { font-size:14px; letter-spacing:.025em; }
 #step-result .color-styling-tab { font-size:13px; min-height:44px; padding-inline:8px; }
}/* Narrow phones keep the upload heading on a deliberate reading line. */
@media(max-width:375px) { #step-upload .upload-card h2 { font-size:20px; letter-spacing:.025em; } }
#analysisBillingNote { text-wrap:pretty; }
#analysisBillingNote a { display:inline-block; white-space:nowrap; }

body:has(#saveOverlay:not(.hidden)) #toastContainer { bottom:auto; top:max(12px,env(safe-area-inset-top)); }

.reference-reading:not(.reference-long-export) .color-look-formula p,
.reference-reading:not(.reference-long-export) .archive-avoid-note,
.reference-reading:not(.reference-long-export) .dimension-appendix-note { font-size:14px; line-height:1.85; }
#step-result :is(button,a):focus-visible,#step-upload .privacy-policy-link:focus-visible { outline:2px solid #8b5b49; outline-offset:4px; }


.reference-reading:not(.reference-long-export) #dimensionDetails .dimension-appendix-note { font-size:14px; line-height:1.85; color:#6f6058; }

/* Report-only corrections shared by the live page and its long export. */
#captureArea.handbook-reading .report-index { background:#fbf8f3; z-index:30; isolation:isolate; padding:0; backdrop-filter:none; -webkit-backdrop-filter:none; }
#captureArea.handbook-reading .report-index-links { min-height:46px; padding-block:0; }
#captureArea.handbook-reading .report-index-summary { min-height:46px; }
#captureArea.handbook-reading .archive-section { scroll-margin-top:64px; }
#captureArea.handbook-reading .palette-primary { align-items:start; }
#captureArea.handbook-reading .palette-swatch { display:flex; flex-direction:column; align-items:center; text-align:center; }
#captureArea.handbook-reading .palette-swatch figcaption { width:100%; text-align:center; margin-top:12px; }
#captureArea.handbook-reading .palette-swatch figcaption b,
#captureArea.handbook-reading .palette-swatch-primary:first-child figcaption b { font-size:17px; line-height:1.5; font-weight:500; }
#captureArea.handbook-reading .palette-swatch figcaption span { font-size:11px; line-height:1.5; }
#captureArea.handbook-reading .palette-secondary .palette-swatch figcaption b { font-size:16px; }
#captureArea.handbook-reading .palette-primary>figure>i { flex:none; margin-bottom:0; }
#captureArea.handbook-reading .palette-secondary .palette-swatch>i { flex:none; margin-bottom:0; }

@media(max-width:640px) {
 #captureArea.handbook-reading:not(.reference-long-export) .archive-section { padding:24px 20px; }
 #captureArea.handbook-reading:not(.reference-long-export) .archive-title { font-size:28px!important; margin-bottom:14px; }
 #captureArea.handbook-reading:not(.reference-long-export) .reference-layout { gap:20px!important; margin-top:18px; }
 #captureArea.handbook-reading:not(.reference-long-export) .color-look-formula p { font-size:16px; line-height:1.75; }
 #captureArea.handbook-reading:not(.reference-long-export) .color-look-formula h3 { font-size:23px; }
}

/* Saved folios use explicit measured lines; each line has one paint operation. */
.reference-album-page [data-album-text-line] { min-width:0; overflow:visible; }
.reference-album-page .folio-status { text-wrap:normal; }
.consultant-r9 .folio-look { grid-template-columns:214px 250px; }
.consultant-r9 .folio-outfit-main { font-size:19px; line-height:1.65; }
.consultant-r9 .folio-trial .album-copy { font-size:18px; line-height:1.65; }
.consultant-r9 .folio-group-note { font-size:13px; line-height:1.6; }
.consultant-r9 .folio-signoff { font-size:19px; line-height:1.65; }


/* Keep palette names intact in scene paragraphs and saved long reports. */
.reference-reading .report-color-name { white-space:nowrap; }

/* Reading hierarchy: one paper, one evidence surface, one pocket spectrum. */
#captureArea.handbook-reading {
 --reading-paper:#fbf8f3; --reading-evidence:#f1ece5; --reading-pocket:#ede4d6;
 --reading-ink:#3d342f; --reading-copy:#51433c; --reading-muted:#6f6058;
 --reading-rule:rgba(81,67,60,.20);
 background:var(--reading-paper); color:var(--reading-copy);
}
#captureArea.handbook-reading :is(.report-masthead,.archive-cover,.archive-section,.report-quick-actions,.closing-note,.reference-export-note) { background:var(--reading-paper); }
#captureArea.handbook-reading #report-identity { background:var(--reading-evidence); }
#captureArea.handbook-reading .reference-pocket { background:var(--reading-pocket); }
#captureArea.handbook-reading .report-index { background:var(--reading-paper); }
#captureArea.handbook-reading :is(.archive-title,#res-season-name,.closing-note-title,.reference-pocket h3) { color:var(--reading-ink); }
#captureArea.handbook-reading :is(.archive-copy,.color-look-formula p,.reference-rationale,.reference-next-steps) { color:var(--reading-copy); }
#captureArea.handbook-reading :is(.reference-evidence-source,.reference-why,.reference-makeup-method,.reference-figure figcaption,.reference-figure figcaption span,.palette-swatch figcaption span,.reference-service-note,.reference-export-note,.reference-guidance-note p,.archive-guide p) { color:var(--reading-muted); }
#captureArea.handbook-reading :is(.color-styling-tabs,.color-look,.reference-service-note,.archive-avoid,.reference-guidance-note) { border-color:var(--reading-rule); }
#captureArea.handbook-reading .color-styling-tab { color:var(--reading-copy); background:transparent; border-color:var(--reading-rule); }
#captureArea.handbook-reading .color-styling-tab.active { background:var(--reading-evidence); border-color:#aa9486; }
#captureArea.handbook-reading .report-index-links a.active { color:var(--reading-paper); background:#6d4f42; }

/* A swatch and its two-line label form one vertically centered item. */
#captureArea.handbook-reading .color-ratio-legend { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px 12px; align-items:start; }
#captureArea.handbook-reading .color-ratio-legend > span { display:grid; grid-template-columns:16px minmax(0,1fr); gap:8px; align-items:center; min-width:0; }
#captureArea.handbook-reading .color-ratio-legend > span > i { grid-column:1; width:16px; height:16px; margin:0; }
#captureArea.handbook-reading .ratio-color-copy { display:grid; grid-template-columns:minmax(0,1fr); gap:2px; min-width:0; align-items:start; }
#captureArea.handbook-reading .ratio-color-name { font-size:15px; line-height:1.5; color:var(--reading-copy); overflow-wrap:anywhere; }
#captureArea.handbook-reading .ratio-color-copy em { font-size:12px; line-height:1.5; color:var(--reading-muted); font-style:normal; }

/* Reference images share available width; content controls their height. */
#captureArea.handbook-reading:not(.reference-long-export) .archive-cover .report-portrait { width:100%; max-width:280px; justify-self:center; }
#captureArea.handbook-reading:not(.reference-long-export) :is(#report-beauty,#report-outfit) .reference-layout { grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)!important; gap:24px 32px!important; }
#captureArea.handbook-reading:not(.reference-long-export) :is(#report-beauty,#report-outfit) .reference-figure { width:100%; max-width:none; margin:0; }
#captureArea.handbook-reading:not(.reference-long-export) :is(#report-beauty,#report-outfit) .reference-figure img { width:100%; height:auto; max-height:none; aspect-ratio:auto!important; object-fit:contain!important; }
#captureArea.handbook-reading:not(.reference-long-export) #report-beauty .reference-guidance { display:block; }
#captureArea.handbook-reading:not(.reference-long-export) #report-beauty .reference-makeup-index { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; margin:0; }
#captureArea.handbook-reading:not(.reference-long-export) #report-beauty .reference-makeup-index section { display:grid; grid-template-columns:48px minmax(0,1fr); column-gap:12px; align-items:baseline; }
#captureArea.handbook-reading:not(.reference-long-export) #report-beauty .reference-makeup-index small { color:var(--reading-muted); font-size:13px; line-height:1.6; }
#captureArea.handbook-reading:not(.reference-long-export) #report-beauty .reference-makeup-index h3 { font-size:24px; line-height:1.4; margin:0; }
#captureArea.handbook-reading:not(.reference-long-export) #report-beauty .reference-makeup-method { grid-column:2; font-size:16px; line-height:1.7; margin:6px 0 0; }
#captureArea.handbook-reading:not(.reference-long-export) #report-beauty .reference-why { margin:24px 0 0; padding:0; }
#captureArea.handbook-reading:not(.reference-long-export) #report-beauty .reference-ending { margin:20px 0 0; padding:0; }
#captureArea.handbook-reading:not(.reference-long-export) .reference-figure figcaption { font-size:12px; line-height:1.7; margin-top:10px; }
#captureArea.handbook-reading:not(.reference-long-export) .reference-figure figcaption strong { font-size:13px; color:var(--reading-copy); }
@media(max-width:899px) {
 #captureArea.handbook-reading:not(.reference-long-export) :is(#report-beauty,#report-outfit) .reference-layout { grid-template-columns:minmax(0,1fr)!important; gap:20px!important; }
 #captureArea.handbook-reading:not(.reference-long-export) :is(#report-beauty,#report-outfit) .reference-rationale { margin-top:0; }
}
@media(max-width:899px) {
 #captureArea.handbook-reading:not(.reference-long-export) .report-masthead { padding:20px 20px 16px; }
 #captureArea.handbook-reading:not(.reference-long-export) .report-masthead h1 { font-size:26px; }
 #captureArea.handbook-reading:not(.reference-long-export) .report-masthead-rule { margin-top:10px; }
 #captureArea.handbook-reading:not(.reference-long-export) .archive-cover { display:grid; grid-template-columns:minmax(0,1fr) 104px; column-gap:16px; row-gap:8px; padding:24px 20px; align-items:start; }
 #captureArea.handbook-reading:not(.reference-long-export) .archive-cover :is(.archive-cover-main,.archive-cover-copy) { display:contents; }
 #captureArea.handbook-reading:not(.reference-long-export) .archive-cover #res-season-name { grid-column:1; grid-row:1; font-size:34px; line-height:1.25; margin:0; }
 #captureArea.handbook-reading:not(.reference-long-export) .archive-cover #res-season-en { grid-column:1; grid-row:2; font-size:12px; margin:0; }
 #captureArea.handbook-reading:not(.reference-long-export) .archive-cover #res-identity-code { grid-column:1; grid-row:3; font-size:11px; line-height:1.7; margin:0; overflow-wrap:anywhere; }
 #captureArea.handbook-reading:not(.reference-long-export) .archive-cover #res-identity-assessment { grid-column:1 / -1; grid-row:4; font-size:14px; line-height:1.8; margin:12px 0 0; }
 #captureArea.handbook-reading:not(.reference-long-export) .archive-cover .report-portrait { grid-column:2; grid-row:1 / 4; width:104px; max-width:none; margin:0; align-self:start; justify-self:stretch; }
 #captureArea.handbook-reading:not(.reference-long-export) .archive-cover .report-portrait img { width:100%; height:auto; max-height:144px; object-fit:contain; }
 #captureArea.handbook-reading:not(.reference-long-export) .archive-cover .report-portrait figcaption { margin-top:8px; font-size:11px; line-height:1.5; text-align:left; }
 #captureArea.handbook-reading:not(.reference-long-export) .archive-cover .reference-personal-evidence { grid-column:1 / -1; grid-row:5; margin:16px 0 0; }
 #captureArea.handbook-reading:not(.reference-long-export) .archive-cover .archive-cover-summary { display:none; }
}
@media(max-width:359px) { #captureArea.handbook-reading .color-ratio-legend { grid-template-columns:repeat(2,minmax(0,1fr)); } }