/* Web-only additions. The existing mountain, route and diary styles stay intact. */
.header-actions{display:flex;align-items:center;gap:8px}
#settings-button svg{width:17px;height:17px;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.settings-section{margin:22px 0;border-top:1px solid var(--line);padding-top:16px}
.settings-section h3,.settings-section summary{font-size:14px;font-weight:600;margin:0 0 12px}
.settings-section p,.settings-section li{font-size:12px;line-height:1.9;overflow-wrap:anywhere}
.settings-section ol{padding-left:21px}
.settings-section a{color:var(--green);text-underline-offset:3px}
.settings-section .save-button{height:auto;min-height:46px;padding:12px}
.backup-import-label{display:block;font-size:12px;margin:20px 0 8px}
#backup-file{font-size:12px;padding:10px;max-width:100%}
#backup-import-preview{white-space:pre-wrap;border:1px solid var(--line);border-radius:12px;background:#edf1e3;padding:14px;font-size:12px;line-height:1.8;overflow-wrap:anywhere;margin-top:16px}
#backup-status,#offline-status,#storage-status{font-size:12px;line-height:1.8;margin:12px 0;color:var(--green)}
#backup-current-export,#backup-cancel,#storage-persist{background:transparent;border:1px solid var(--line);border-radius:10px;width:100%;padding:12px;font-size:12px;margin:8px 0;line-height:1.6}
#backup-confirm{margin-top:10px}
#settings-dialog [hidden]{display:none!important}
#settings-dialog>.sheet-top{position:sticky;top:-9px;z-index:2;min-height:60px;margin-top:0;padding:8px 0;background:#fafaf2;justify-content:flex-end}
#settings-dialog>.sheet-top .close-button{flex-shrink:0;width:44px;height:44px;background:#fafaf2}
.settings-small{font-size:11px!important;color:#64766b}
.install-guide-button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:46px;margin-top:24px;padding:12px 16px;border:1px solid #b9cabb;border-radius:12px;background:#edf2e7;font-size:13px;text-align:left;color:var(--green)}
.help-install-note{margin:8px 0 0;font-size:11px;line-height:1.7;color:#64766b}
#help-dialog .help-item p{font-size:12px;color:#64766b}
#home-install-guide{scroll-margin-top:72px}
.install-steps li{margin:18px 0}
.install-steps strong{font-size:13px;font-weight:600}
.install-steps p{margin:7px 0}
.install-url{display:block;padding:10px;border:1px solid var(--line);border-radius:8px;background:#fffef7;font-size:12px;overflow-wrap:anywhere;user-select:all;-webkit-user-select:all}
#backup-section{scroll-margin-top:76px}
.backup-browser-help{margin-top:18px}
.backup-browser-help summary{font-size:12px;line-height:1.8;cursor:pointer}
.backup-browser-help p{margin:8px 0 0}
#home-install-guide #install-backup-note{margin:10px 0;color:#64766b;font-size:11px;line-height:1.8}
@media(display-mode:standalone){.app{height:calc(100dvh - env(safe-area-inset-top));margin-top:env(safe-area-inset-top)}.sheet{max-height:calc(100dvh - env(safe-area-inset-top) - 12px)}}

/* Keep the mountain mark and app name on one centered line. */
.brand{align-items:center}
.brand h1{margin:0;line-height:1}
.brand svg{width:28px;height:28px;flex-shrink:0;transform:translateY(-2px)}
.delete-entry-button{display:block;width:100%;min-height:44px;margin:18px 0 0;padding:11px 14px;border:1px solid #d8c1b9;border-radius:12px;background:transparent;color:#965e51;font:inherit;font-size:13px}
.delete-entry-button[hidden],#delete-entry-draft-note[hidden]{display:none}
#delete-entry-dialog .danger-button{background:#985e50;color:#fff}
#delete-entry-summary{white-space:pre-wrap;overflow-wrap:anywhere}

.cloud-state-button{display:block;width:100%;border:0;padding:5px 8px 0;background:transparent;color:#64766b;font:inherit;font-size:10px;line-height:1.5;text-align:center;text-decoration:underline;text-underline-offset:3px}
.cloud-state-button[data-status="saved"]{color:var(--green)}
.cloud-section{scroll-margin-top:12px}
.cloud-section #cloud-status{padding:12px 14px;border-radius:12px;background:#edf1e3;color:var(--green);font-size:12px;line-height:1.8}
.cloud-consent{font-size:11px!important;color:#526559}
.cloud-secondary{display:block;width:100%;min-height:44px;border:1px solid #b9cabb;border-radius:10px;padding:11px 14px;margin:10px 0;background:transparent;color:var(--green);font:inherit;font-size:12px;line-height:1.7}
.cloud-conflict,.cloud-choice{border:1px solid #c9d3c0;border-radius:12px;margin:16px 0;padding:14px;background:#fffef7}
.cloud-conflict p:first-child,.cloud-choice p:first-child{margin-top:0}
.cloud-help{margin:18px 0}
.cloud-help summary{font-size:12px;line-height:1.7;cursor:pointer}
#cloud-error{font-size:12px;line-height:1.8;color:#865d47;overflow-wrap:anywhere}
.cloud-section button:disabled{opacity:.55;cursor:wait}
.usage-option{display:flex;align-items:center;gap:10px;min-height:44px;font-size:13px;line-height:1.7;cursor:pointer}
.usage-option input{width:18px;height:18px;flex-shrink:0;accent-color:var(--green)}

/* Make the sample-to-personal start action easy to find. */
.storage-note{gap:8px}
#reset-demo{flex-shrink:0;min-height:30px;padding:5px 9px;border:1px solid #b9cabb;border-radius:9px;background:#edf2e7;color:var(--green);font-size:11px;font-weight:600;line-height:1.4;text-decoration:none}
#reset-demo:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* Change the actual card dimensions so the road layout measures the visible size. */
.dream-marker{max-width:min(85.8%,calc(100% - 36px));padding:9.9px 12.1px;border-radius:12.1px}
.dream-marker.long-dream{max-width:min(68.2%,calc(100% - 36px))}
.dream-marker strong{font-size:15.84px;margin-top:3.3px}
.dream-caption{gap:7.7px;font-size:7.7px}
.dream-caption>span{font-size:14.3px}
.preview{width:90%;height:196.2px;margin-inline:auto;padding:11.7px 14.4px 9.9px;border-radius:15.3px}
.preview-line{margin:5.4px 0 9px}
.preview-line>span:first-child{font-size:15.12px}
.preview-sub{margin-top:7.2px}
.map-caption{width:90%;margin-inline:auto}
@media(max-height:740px) and (min-height:501px), (max-height:500px) and (max-width:499px){
  .dream-marker{max-width:min(85.8%,calc(100% - 30px));padding:7.7px 9.9px}
  .dream-marker.long-dream{max-width:min(68.2%,calc(100% - 30px))}
  .dream-marker strong{font-size:13.2px}
  .dream-caption{font-size:6.6px}
  .preview{height:171px;padding:9.9px 12.6px 8.1px}
  .preview-line{margin:4.5px 0 6.3px}
  .preview-line>span:first-child{font-size:14.4px}
  .preview-sub{margin-top:4.5px}
}
@media(max-height:620px) and (min-height:501px), (max-height:500px) and (max-width:499px){
  .dream-marker{max-width:min(94.6%,calc(100% - 28px))}
  .preview{height:133.2px}
  .preview-line>span:first-child{font-size:12.96px}
}
@media(max-height:500px) and (min-width:500px){
  .dream-marker{max-width:min(85.8%,calc(100% - 20px));padding:6.6px 9.9px}
  .dream-marker.long-dream{max-width:min(68.2%,calc(100% - 20px))}
  .dream-marker strong{font-size:13.2px}
  .preview{height:90%;max-height:180px;padding:9px 10.8px}
  .preview-line{margin:3.6px 0 6.3px}
  .preview-line>span:first-child{font-size:12.96px}
}
@media(max-height:500px) and (max-width:499px){
  .preview{height:113.4px;padding:8.1px 10.8px 6.3px}
  .preview-line{margin:2.7px 0 4.5px}
}

/* A direct install action uses the existing header and shared settings guide. */
.home-install-button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:52px;min-height:44px;padding:4px 7px;border:1px solid #b9cabb;border-radius:10px;background:#edf2e7;color:var(--green);font-size:10px;line-height:1.5;white-space:nowrap}
.home-install-button[hidden],.install-guide-button[hidden],.help-install-note[hidden]{display:none}
.copy-install-button{min-height:44px;padding:10px 16px;border:1px solid #b9cabb;border-radius:10px;background:#edf2e7;color:var(--green);font-size:12px}
#install-browser-step[hidden],#install-confirm-step[hidden]{display:none}
#home-install-guide .install-steps{list-style:none;counter-reset:install-step;padding-left:0}
#home-install-guide .install-steps li{position:relative;margin:16px 0;min-height:28px;padding:2px 0 0 38px}
#home-install-guide .install-steps li:not([hidden]){counter-increment:install-step}
#home-install-guide .install-steps li:not([hidden])::before{content:counter(install-step);position:absolute;left:0;top:0;display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#476b53;color:#fffef7;font-size:13px;font-weight:600;line-height:1}
.install-share-icon{display:inline-block;width:22px;height:26px;margin-left:7px;vertical-align:middle;color:var(--green)}
.install-share-icon svg{display:block;width:100%;height:100%}
.install-share-icon[hidden]{display:none}
#install-copy-status:empty{display:none}
@media(max-width:359px){.header-actions{gap:5px}.home-install-button{min-width:48px;padding-inline:5px}}

/* Trial controls stay outside the existing illustration and diary editor. */
.trial-only{display:none}
html[data-journey-mode="trial"] .trial-only{display:block}
html[data-journey-mode="trial"] .existing-only,
html[data-journey-mode="trial"] #cloud-state-button,
html[data-journey-mode="trial"] #cloud-section,
html[data-journey-mode="trial"] #backup-section{display:none}
html[data-journey-mode="trial"] .trial-restore-open #cloud-section,
html[data-journey-mode="trial"] .trial-restore-open #backup-section{display:block}
html[data-journey-mode="trial"] #cloud-start,
html[data-journey-mode="trial"] .cloud-consent,
html[data-journey-mode="trial"] #cloud-setup>.settings-small,
html[data-journey-mode="trial"] #cloud-passkey-help,
html[data-journey-mode="trial"] #backup-export,
html[data-journey-mode="trial"] #backup-export+.settings-small{display:none}
.trial-intro{margin:0 0 5px;text-align:center;font-size:10px;line-height:1.5;color:#5d705c}
.trial-intro span{display:inline-block;margin-right:6px;padding:1px 7px;border:1px solid #a9bc9d;border-radius:10px;font-size:10px}
.trial-start{min-height:36px;padding:7px 14px;border:1px solid #92aa82;border-radius:18px;background:#eaf0df;color:#425c36;font-size:12px;font-weight:600}
.trial-start[hidden],.trial-intro[hidden],.trial-saved-install[hidden]{display:none}
.trial-editor-note{font-size:12px;line-height:1.65;color:#647456;margin:0 0 14px;padding:9px 12px;background:#eef2e7;border-radius:8px}
.trial-saved-install{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(350px,calc(100% - 32px));z-index:15;padding:16px 20px;background:#f8faef;border:1px solid #b0c39f;border-radius:16px;box-shadow:0 5px 25px #35462922;text-align:center}
.trial-saved-install p{margin:0 0 10px;font-size:13px;color:#45603a}
.trial-saved-install [data-install-action]{border:0;border-radius:22px;padding:12px 20px;background:#476b53;color:white;font-size:13px}
#dismiss-trial-install{position:absolute;right:5px;top:3px;border:0;background:transparent;font-size:20px;width:32px;height:32px;color:#647456}
html[data-journey-mode="trial"] .preview-footer:has(#trial-start){display:flex;justify-content:center}
html:not([data-journey-mode="trial"]) #trial-start{display:none}