.ui-root .ui-journey { width: min(100%, var(--ui-content-max)); min-height:100%; margin-inline:auto; padding:16px 12px 24px; display:flex; flex-direction:column; gap:16px; }
.ui-root .ui-journey--list { gap:12px; padding-inline:4px; container:journey / inline-size; --ui-journey-fringe-start:calc(var(--ui-journey-shell-gutter,0px) + 29px); --ui-journey-fringe-end:calc(var(--ui-journey-shell-gutter,0px) + 4px); }
/* Keep Journey's full-frame owner. Transfer the shell's existing symmetric
   gutter into inner padding so saved text and postcards stay in place.
   Standalone mounts keep their original content cap and padding above. */
.ui-root :is(.ui-shell__body,.ui-shell__outgoing-page) > .ui-journey {
  --ui-journey-shell-gutter:max(12px,env(safe-area-inset-left));
  width:calc(100% + var(--ui-journey-shell-gutter) + var(--ui-journey-shell-gutter));
  max-width:var(--ui-frame-max);
  margin-inline:calc(-1 * var(--ui-journey-shell-gutter));
  padding-inline:calc(12px + var(--ui-journey-shell-gutter));
}
.ui-root :is(.ui-shell__body,.ui-shell__outgoing-page) > .ui-journey--list { padding-inline:calc(4px + var(--ui-journey-shell-gutter)); }
.ui-root .ui-journey__intro { color:var(--ui-secondary); font-size:var(--ui-secondary-size); line-height:var(--ui-secondary-line); }
.ui-root .ui-journey__actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.ui-root .ui-journey__actions .ui-button { flex:1 1 9rem; }
.ui-root .ui-journey .ui-button__label { text-wrap:balance; }
.ui-root .ui-journey-toolbar { display:grid; grid-template-columns:minmax(0,1fr) 44px; gap:8px; align-items:start; align-self:stretch; min-width:0; min-height:44px; }
.ui-root .ui-journey-toolbar__refresh { position:relative; grid-column:2; width:44px; height:44px; min-width:44px; min-height:44px; padding:9px; gap:0; }
.ui-root .ui-journey-toolbar__refresh .ui-button__label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.ui-root .ui-journey-toolbar__icon { display:block; width:24px; height:24px; flex:0 0 24px; }
.ui-root .ui-journey-toolbar__refresh[aria-busy="true"] .ui-journey-toolbar__icon { display:none; }
/* Keep selected type sizes when the native shell leaves a short reading area. */
@media (max-height:640px) { .ui-root .ui-journey--list { padding-block-start:8px; gap:4px; } }
.ui-root .ui-journey__timeline { list-style:none; margin:0 0 0 8px; padding:0 0 0 16px; border-left:1px solid #a5b99a; display:flex; flex-direction:column; gap:24px; }
.ui-root .ui-journey__item { position:relative; min-width:0; }
.ui-root .ui-journey__item::before { content:''; position:absolute; left:-24px; top:7px; width:14px; height:14px; background:radial-gradient(circle at 35% 25%,#75996b,#4c7950); border:1px solid #5f8359; box-shadow:0 0 0 3px var(--ui-page); border-radius:50%; }
.ui-root .ui-journey__date { color:var(--ui-heading); font-family:Georgia,'Songti SC','SimSun',serif; font-size:1.375rem; line-height:1.75rem; font-weight:700; margin-bottom:10px; }
.ui-root .ui-journey__card { padding:0; border:1px solid #e8e0cf; border-radius:12px; background:linear-gradient(110deg,rgb(255 255 255 / .94),rgb(255 254 248 / .84)); box-shadow:0 2px 4px rgb(102 83 43 / .07),inset 0 0 0 1px rgb(255 255 255 / .65); display:flex; flex-direction:column; min-width:0; }
.ui-root .ui-journey__card > .ui-journal-art { width:calc(100% - 16px); margin:0 8px; border-radius:10px; }
.ui-root .ui-journey__caption { padding:4px 10px var(--ui-space-4); display:flex; flex-direction:column; gap:2px; min-width:0; }
/* The complete groups retain their own geometry if an image fails. Compact
   text layouts give them a separate row after every native control. */
.ui-root .ui-journey__fringes { display:flex; justify-content:space-between; inline-size:100%; pointer-events:none; user-select:none; }
.ui-root .ui-journey__fringe { flex:0 0 min(80px,50%); inline-size:min(80px,50%); aspect-ratio:1; }
.ui-root .ui-journey__fringe > .ui-block-art__content { display:none; }
.ui-root .ui-journey__fringe > .ui-block-art__visual { position:absolute; inset:0; inline-size:100%; block-size:100%; }
/* Ordinary FINAL composition: page-edge flowers overlap only the lower outer
   corners of the last real card. The item reserves the 24px exterior tail;
   its paper stays visible there instead of adding an empty white card row.
   The selection's native input/label sit between the complete image frames. */
@container journey (min-width:21em) {
  .ui-root .ui-journey__item:has(> [data-report-fringe-owner]) { padding-block-end:24px; }
  .ui-root .ui-journey__card[data-report-fringe-owner] { position:relative; }
  .ui-root [data-report-fringe-owner] > .ui-journey__fringes { position:absolute; inline-size:auto; block-size:80px; inset-block-end:-24px; inset-inline-start:calc(-1 * var(--ui-journey-fringe-start)); inset-inline-end:calc(-1 * var(--ui-journey-fringe-end)); }
  .ui-root [data-report-fringe-owner] .ui-journey__select { padding-inline:48px 72px; }
}
.ui-root .ui-journey__identity { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:12px; row-gap:0; min-width:0; }
.ui-root .ui-journey__identity h2 { flex:1 1 auto; min-width:0; }
.ui-root .ui-journey__identity .ui-journal-source { flex:0 1 auto; margin:0; padding-block:4px; }
.ui-root .ui-journey__source-leaf { display:inline-block; width:17px; height:20px; margin-inline-end:4px; vertical-align:-4px; object-fit:contain; pointer-events:none; }
.ui-root .ui-journey__card .ui-journal-description { color:var(--ui-text); line-height:1.6; }
.ui-root .ui-journey__card .ui-journal-facts:empty { display:none; }
.ui-root .ui-journey__record-link { display:inline-flex; align-items:center; min-height:44px; max-width:100%; font:inherit; font-family:Georgia,'Songti SC','SimSun',serif; font-size:var(--ui-title-size); line-height:var(--ui-title-line); color:var(--ui-heading); border:0; background:transparent; text-align:start; font-weight:700; padding:0; cursor:pointer; overflow-wrap:anywhere; text-decoration:none; }
.ui-root .ui-journey__record-link:hover { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.ui-root .ui-journey__record-link:focus-visible { outline:2px solid var(--ui-focus); outline-offset:4px; border-radius:4px; text-decoration:underline; text-underline-offset:4px; }
.ui-root .ui-journal-art { position:relative; width:100%; border-radius:12px; overflow:hidden; pointer-events:none; background:#f1f2e6; }
.ui-root .ui-journal-art--scene { aspect-ratio:2 / 1; }
.ui-root .ui-journal-art--scene img { position:absolute; width:100%; height:auto; left:0; top:-50%; max-width:none; }
/* Four Report-only whole scenes; shared legacy art keeps its original window. */
.ui-root .ui-journal-art--report { aspect-ratio:2.1 / 1; }
.ui-root .ui-journal-art--report img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ui-root .ui-journal-art--object { min-height:88px; display:flex; align-items:center; justify-content:center; }
.ui-root .ui-journal-art--object img { width:80px; height:80px; object-fit:contain; }
.ui-root .ui-journal-art[data-unavailable] { min-height:24px; aspect-ratio:auto; }
.ui-root .ui-journal-facts { display:flex; flex-direction:column; gap:8px; min-width:0; }
.ui-root .ui-journal-source { color:var(--ui-secondary); font-size:var(--ui-secondary-size); line-height:var(--ui-secondary-line); white-space:normal; overflow-wrap:anywhere; }
.ui-root .ui-journal-description { white-space:pre-wrap; overflow-wrap:anywhere; }
.ui-root .ui-journey__select { display:flex; gap:10px; align-items:center; min-height:44px; color:var(--ui-secondary); cursor:pointer; }
.ui-root .ui-journey__select input { width:20px; height:20px; flex-shrink:0; accent-color:var(--ui-primary); }
.ui-root .ui-journey__caption .ui-journey__select { border-top:1px solid rgb(177 168 143 / .2); margin-top:6px; font-size:var(--ui-secondary-size); line-height:var(--ui-secondary-line); }
.ui-root .ui-journey__detail { display:flex; flex-direction:column; gap:16px; }
/* Keep the selected title size while leaving complete wrapped lines readable
   inside the shorter native reader between the fixed header and navigation. */
@media (max-height:640px) { .ui-root .ui-journey__detail > h3 { line-height:1.25; } }
.ui-root .ui-journey__detail dl { display:grid; gap:4px; margin:0; overflow-wrap:anywhere; }
.ui-root .ui-journey__detail dt { margin-top:8px; color:var(--ui-secondary); font-size:var(--ui-secondary-size); line-height:var(--ui-secondary-line); }
.ui-root .ui-journey__detail dd { margin:0; }
.ui-root .ui-journal-export { border-color:#cfc6ad; background:linear-gradient(145deg,rgb(255 255 255 / .55),transparent 65%),var(--ui-raised); box-shadow:0 8px 32px rgb(35 72 50 / .15); }
.ui-root .ui-journal-export__period { overflow-wrap:anywhere; }
.ui-root .ui-journal-export__preview { margin:0; padding:12px; white-space:pre-wrap; overflow-wrap:anywhere; border:1px solid #d9d2bf; border-radius:12px; font:inherit; background:var(--ui-surface); box-shadow:inset 0 2px 5px rgb(74 69 38 / .045); }
.ui-root .ui-journal-export input[type="date"] { max-width:100%; min-width:0; }
@media (max-width:359px) {
  .ui-root .ui-journal-export { width:calc(100% - 24px); }
  .ui-root .ui-journal-export .ui-dialog__header, .ui-root .ui-journal-export .ui-dialog__actions { padding:16px; }
  .ui-root .ui-journal-export .ui-dialog__body { padding:2px 16px 16px; }
  .ui-root .ui-journal-export .ui-button, .ui-root .ui-journal-export .ui-field__control { padding:12px; }
}
@media (max-width:359px) { .ui-root .ui-journey--list { --ui-journey-fringe-start:calc(var(--ui-journey-shell-gutter,0px) + 20px); } .ui-root .ui-journey__timeline { margin-left:5px; padding-left:10px; } .ui-root .ui-journey__item::before { left:-18px; } }
@media (forced-colors:active) { .ui-root .ui-journey__card, .ui-root .ui-journal-art, .ui-root .ui-journal-export, .ui-root .ui-journal-export__preview { background:Canvas; border-color:CanvasText; box-shadow:none; } .ui-root .ui-journey__record-link { color:LinkText; } .ui-root .ui-journey__record-link:focus-visible { outline-color:Highlight; } }
