/* A print table and a single editing rail, with the saved artwork at the centre. */
/* One opaque sheet leaves the physical slot. Its editor arrives underneath it. */
.result-photo-flight { position: fixed; left: 0; top: 0; display: block; z-index: 5; max-width: none; max-height: none; margin: 0; object-fit: fill; transform-origin: 0 0; will-change: transform; pointer-events: none; box-shadow: 0 18px 34px #0005; border-radius: 2px; }
.result-dialog[data-reveal="staging"],.result-dialog[data-reveal="flying"] { overflow: visible; }
.result-dialog[data-reveal="staging"] { background: transparent; border-color: transparent; box-shadow: none; }
.result-dialog[data-reveal="staging"]::backdrop { background: transparent; backdrop-filter: none; }
.result-dialog[data-reveal="staging"] .result-layout,.result-dialog[data-reveal="staging"] .result-close { opacity: 0; }
.result-dialog:is([data-reveal="staging"],[data-reveal="flying"]) #export-image { visibility: hidden; }
.result-dialog[data-reveal="flying"] { animation: result-surface-arrive 650ms 160ms both; }
.result-dialog[data-reveal="flying"]::backdrop { animation: result-backdrop-arrive 700ms both; }
.result-dialog[data-reveal="flying"] .result-layout { animation: result-controls-arrive 600ms 190ms both; }
.result-dialog[data-reveal="flying"] .result-close { animation: result-controls-arrive 450ms 350ms both; }
@keyframes result-controls-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes result-backdrop-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes result-surface-arrive { from { background-color: transparent; border-color: transparent; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) {
  .result-dialog[data-reveal="flying"],.result-dialog[data-reveal="flying"]::backdrop,.result-dialog[data-reveal="flying"] .result-layout,.result-dialog[data-reveal="flying"] .result-close { animation: none; }
}

@font-face { font-family: "Falao Figures"; src: url("fonts/manrope-figures.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
/* A photographic spread and one editing column. The artwork is the thing to share. */
.result-dialog { --result-paper:#e4d3b5; --result-ink:#f0eae0; --result-muted:#b9b4a9; --result-line:#3c3b35; width:min(1400px,calc(100vw - 36px)); max-height:calc(100dvh - 32px); padding:0; border:1px solid #555044; border-radius:12px; background:#191a17; color:var(--result-ink); overflow:auto; }
.result-dialog::backdrop { background:#040505d9; backdrop-filter:blur(12px); }
.result-layout { display:grid; grid-template-columns:minmax(0,1fr) 348px; min-height:min(760px,calc(100dvh - 34px)); }
.result-artwork { display:flex; flex-direction:column; align-items:center; justify-content:center; align-self:stretch; position:relative; padding:30px 40px; gap:23px; border-right:1px solid var(--result-line); background:radial-gradient(ellipse at 45% 45%,#4a494333,transparent 70%),#111310; }
.artwork-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; color:#ded5c5; font:12px/1.6 var(--font-ui); }
.artwork-heading small { color:#aaa99e; font-size:11px; }
.result-formats { display:flex; align-items:center; gap:3px; padding:4px; border:1px solid #4a473d; border-radius:7px; background:#191b17; }
.result-formats button { display:flex; align-items:baseline; gap:9px; min-height:40px; padding:9px 17px; border:0; border-radius:4px; color:#c3beb2; font:13px/1.4 var(--font-ui); background:transparent; }
.result-formats button small { font:10px/1.4 var(--font-ui); color:inherit; opacity:.8; }
.result-formats button[aria-pressed="true"] { background:#e4d3b5; color:#26261f; box-shadow:0 1px 4px #0003; }
.result-dialog .export-preview { display:flex; align-items:center; justify-content:center; width:100%; height:min(66dvh,630px); margin:0; overflow:visible; aspect-ratio:auto; }
.result-dialog .export-preview #export-image { width:auto; height:min(66dvh,630px); max-width:100%; max-height:min(66dvh,630px); object-fit:contain; border-radius:1px; filter:drop-shadow(0 18px 26px #0007); box-shadow:none; }
.result-dialog .export-preview[data-format="album"] { height:auto; aspect-ratio:3/2; }
.result-dialog .export-preview[data-format="album"] #export-image { width:100%; height:auto; max-height:none; }
.result-caption { margin:0; color:#beb7a7; font:15px/1.7 "Moments Hand",serif; text-align:center; }
.result-close { z-index:6; top:12px; right:12px; width:34px; height:34px; padding:0; border:1px solid #656052; border-radius:50%; background:#24251fe6; color:#e8e0d0; font-size:24px; line-height:1; }
.result-editor,.result-editor:has(.result-growth:not([hidden])) { padding:35px 27px 24px; align-self:center; background:#191a17; }
.result-eyebrow,.result-editor:has(.result-growth:not([hidden])) .result-eyebrow { display:block; margin-bottom:10px; color:#cbbb9d; font:11px/1.6 var(--font-ui); letter-spacing:.8px; }
.result-editor h2,.result-editor:has(.result-growth:not([hidden])) h2 { color:#f2ede4; font:500 29px/1.3 var(--font-ui); letter-spacing:-.8px; margin:0; }
#result-people { margin-top:12px; color:var(--result-muted); font:11px/1.8 var(--font-ui); overflow-wrap:anywhere; }
.result-message { margin:22px 0 0; padding:17px 0; border-top:1px solid var(--result-line); border-bottom:0; }
.result-message > div { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.result-message > div > span { color:#bbb5a8; font:11px/1.6 var(--font-ui); }
.result-message #change-message { min-height:32px; padding:4px 10px; background:transparent; border:1px solid #6a604d; border-radius:5px; color:#e0cbaa; font-size:11px; }
.result-message #message-preview { margin:10px 0 0; color:#f0e3cc; font:25px/1.5 "Moments Hand",serif; overflow-wrap:anywhere; }
#message-subtitle { display:block; margin-top:6px; color:#bdb4a1; font:12px/1.8 "Moments Hand",serif; }
#message-subtitle:empty { display:none; }
.message-editor { margin-top:11px; font-family:var(--font-ui); }
.message-editor summary,.result-observation > summary,.result-share-copy > summary { cursor:pointer; padding:5px 0; color:#cbb99a; font:11px/1.7 var(--font-ui); }
.message-mode { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:10px 0; }
.message-editor button { min-height:36px; border:1px solid #70634d; border-radius:5px; padding:7px 10px; background:#25261f; color:#e0d3bd; font:11px/1.5 var(--font-ui); }
.message-editor button[aria-pressed="true"],.message-editor #apply-custom-message,.message-editor #apply-preset-message { background:#e4d3b5; border-color:#e4d3b5; color:#27271f; }
.message-editor label { display:block; color:#d2c7b4; font-size:11px; margin:12px 0 6px; }
.message-editor label span { color:#b2ac9e; margin-left:6px; }
.message-editor :is(input,textarea,select),#share-caption-preview { width:100%; min-width:0; padding:10px; border:1px solid #6c624f; border-radius:5px; background:#11130f; color:#e7dfd0; font:12px/1.7 var(--font-ui); }
.message-editor :is(input,textarea)::placeholder { color:#b6afa0; }
.message-editor textarea { resize:vertical; min-height:78px; max-height:160px; }
.message-editor small { display:block; color:#b9ae9b; font:10px/1.6 var(--font-ui); margin-top:6px; }
.message-editor #preset-message-note { color:#d4c9b4; font:14px/1.7 "Moments Hand",serif; margin:10px 0; }
.message-editor #custom-message-error { color:#f1b8a7; font:11px/1.5 var(--font-ui); margin-top:6px; }
.message-editor #custom-message-error:empty { display:none; }
.message-edit-actions { display:flex; gap:6px; margin-top:10px; }
.result-styles,.result-editor:has(.result-growth:not([hidden])) .result-styles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:7px 0 16px; }
.result-styles legend { margin-bottom:10px; padding:0; color:#c2baaa; font:11px/1.5 var(--font-ui); }
.result-styles button,.result-editor:has(.result-growth:not([hidden])) .result-styles button { display:flex; flex-direction:column; gap:8px; align-items:flex-start; position:relative; min-height:78px; margin:0; padding:9px 8px; border:1px solid #4d493e; border-radius:5px; background:#22241d; color:#e7dcc6; }
.result-styles button[aria-pressed="true"] { border-color:#ddc397; background:#363124; box-shadow:inset 0 0 0 1px #ddc397; }
.result-styles i,.result-editor:has(.result-growth:not([hidden])) .result-styles i { display:block; width:100%; height:18px; flex:none; border:0; border-radius:1px; box-shadow:0 1px 2px #0002; transform:none; }
.result-styles [data-result-theme="silver"] i { background:linear-gradient(100deg,#f1f1eb,#d9ddd5); }
.result-styles [data-result-theme="moss"] i { background:linear-gradient(100deg,#e9eddf,#bdc8aa); }
.result-styles [data-result-theme="night"] i { background:linear-gradient(100deg,#48463b,#171815); border:1px solid #8c805f; }
.result-styles strong { white-space:nowrap; font:11px/1.5 var(--font-ui); }
.result-styles small,.result-editor:has(.result-growth:not([hidden])) .result-styles small { display:none; }
.result-styles b { position:absolute; right:5px; top:31px; font-size:10px; }
.result-observation { margin:0 0 15px; }
.result-growth,.result-editor:has(.result-growth:not([hidden])) .result-growth { margin:9px 0 0; padding:12px 0 0; border:0; border-top:1px solid var(--result-line); }
.result-growth h3 { display:flex; justify-content:space-between; align-items:baseline; font:11px/1.6 var(--font-ui); color:#c5b99f; margin:0 0 8px; }
.result-growth h3 small { color:#b2ab9b; font-size:10px; }
.growth-pair { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.growth-pair > div { min-width:0; }
.growth-pair span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#bdb6a5; font:11px/1.6 var(--font-ui); }
.growth-pair strong { display:block; margin-top:4px; color:#e8dfcc; font:500 20px/1.4 "Falao Figures",sans-serif; letter-spacing:-.3px; }
#growth-time { margin-top:7px; color:#b6ae9d; font:10px/1.6 var(--font-ui); }
.result-save-area { padding-top:16px; border-top:1px solid var(--result-line); }
.result-file-label { margin:0 0 9px; color:#c7bdab; font:11px/1.6 var(--font-ui); }
.result-dialog .dialog-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0; }
.result-dialog .dialog-actions > a { grid-column:1 / -1; display:flex; justify-content:center; align-items:center; width:100%; min-height:48px; margin:0; padding:11px 16px; border:1px solid #e4d3b5; border-radius:5px; background:#e4d3b5; color:#25251e; text-decoration:none; font:600 13px/1.4 var(--font-ui); }
.result-dialog .dialog-actions > button,.result-dialog #share-result-x { display:block; min-height:40px; padding:9px 8px; border:1px solid #5a5649; border-radius:5px; background:#25271f; color:#e5dccb; opacity:1; font:12px/1.5 var(--font-ui); white-space:nowrap; }
.result-dialog :is(button,a)[hidden] { display:none; }
.result-dialog :is(button,a):disabled,.result-dialog a[aria-disabled="true"] { opacity:.45; cursor:wait; }
.result-share-copy { margin-top:11px; }
#share-caption-preview { margin-top:8px; resize:vertical; max-height:240px; }
.result-share-note { margin-top:11px; color:#c0b6a3; font:11px/1.8 var(--font-ui); }
#result-status { min-height:18px; margin:10px 0 0; color:#c4bba8; font:11px/1.6 var(--font-ui); }
.result-dialog :is(button,a,input,textarea,select,summary):focus-visible { outline:2px solid #edcf9d; outline-offset:3px; }
@media(min-width:901px) { .result-artwork { position:sticky; top:0; align-self:start; min-height:min(760px,calc(100dvh - 34px)); } }
@media(min-width:901px) and (max-height:780px) {
  .result-editor,.result-editor:has(.result-growth:not([hidden])) { padding:24px 24px 18px; }
  .result-editor h2,.result-editor:has(.result-growth:not([hidden])) h2 { font-size:25px; }
  .result-editor h2 br { display:none; }
  .result-message { margin-top:15px; padding:12px 0; }
  .result-message #message-preview { font-size:22px; }
  .result-styles,.result-editor:has(.result-growth:not([hidden])) .result-styles { margin-bottom:10px; }
  .result-observation { margin-bottom:10px; }
  .result-save-area { padding-top:12px; }
}
@media(max-width:900px) {
  .result-dialog { width:calc(100vw - 20px); max-height:calc(100dvh - 20px); border-radius:9px; }
  .result-layout { grid-template-columns:1fr; min-height:0; }
  .result-artwork { position:relative; padding:25px 23px 23px; gap:18px; border-right:0; border-bottom:1px solid var(--result-line); }
  .artwork-heading { padding-right:28px; }
  .artwork-heading small { display:none; }
  .result-editor,.result-editor:has(.result-growth:not([hidden])) { padding:25px; align-self:start; }
  .result-editor h2,.result-editor:has(.result-growth:not([hidden])) h2 { font-size:25px; }
  .result-editor h2 br { display:none; }
  .result-dialog .export-preview,.result-dialog .export-preview #export-image { height:auto; max-height:none; }
  .result-dialog .export-preview #export-image { width:min(100%,380px); }
  .result-dialog .export-preview[data-format="album"] #export-image { width:100%; }
  .result-formats { width:min(100%,380px); display:grid; grid-template-columns:1fr 1fr; }
  .result-formats button { justify-content:center; min-height:44px; padding-inline:8px; }
  .result-formats button small { font-size:9px; }
  .result-caption { font-size:14px; }
  .result-dialog .dialog-actions > button,.result-dialog #share-result-x,.message-editor button,.result-message #change-message { min-height:44px; }
  .result-save-area { position:sticky; bottom:-26px; margin:0 -25px -1px; padding:16px 25px 12px; background:#191a17f7; box-shadow:0 -12px 20px #191a1740; z-index:2; }
  .result-share-note { display:none; }
  .result-close { position:sticky; float:right; top:10px; margin:10px 10px -44px 0; }
}
@media(prefers-reduced-motion:reduce) { .result-dialog::backdrop { backdrop-filter:none; } }