/* The Wall in the folio (the Wall, WallPhoto and PinMore boards, group 8B, 2026-10-05): the strips, on the Wall and on a
   Profile alike; the Wall's page, a photograph alone on the night plate, and Pin more. Their dress went with the deck
   log's sheets on 1 Oct. */

/* the strips, wherever they hang */
.wall-root .wall-strip { position: relative; }
.wall-root .wall-strip + .wall-strip { margin-top: 2px; }
.wall-root .wall-reel { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
.wall-root .wall-reel::-webkit-scrollbar { display: none; }
.wall-root .wall-reel.is-drifting { scroll-snap-type: none; }
.wall-root .wall-frame { position: relative; flex-shrink: 0; height: 150px; aspect-ratio: var(--ar, 1.5); padding: 0; border: none; background: #E3E1DA; overflow: hidden; scroll-snap-align: start; cursor: pointer; }
.wall-root .wall-frame img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .4s; }
.wall-root .wall-frame img.is-in { opacity: 1; }
.wall-root .wall-frame:has(img:not(.is-in)) { background: var(--fo-bone, #E3E1DA); animation: wl-breathe 1.6s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .wall-root .wall-frame { animation: none !important; } }
.wall-root .wall-vmark { position: absolute; right: 6px; bottom: 6px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; background: rgba(26,22,20,0.6); fill: #FDFCFA; }
.wall-root .wall-vbare { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; fill: var(--fo-graphite); }
/* A journey's name, when names are shown: a chip on the strip's lower left, its month and how many (the Wall board; owner,
   2026-10-05: 照画板，叠在照片左下角 … profile里的照片墙也用 … 两个地方统一). It does not take a tap: the strip under it does. */
.wall-root .wall-strip-head { display: none; }
.wall-root .is-named .wall-strip-head { position: absolute; left: var(--fo-gutter, 24px); bottom: 8px; z-index: 1; display: flex; flex-direction: column; gap: 2px; max-width: calc(100% - 2 * var(--fo-gutter, 24px)); padding: 6px 9px; box-sizing: border-box; background: rgba(247,246,243,0.92); pointer-events: none; }
.wall-root .wall-strip-name { font-family: var(--fo-serif); font-size: 14px; line-height: 1.1; color: var(--fo-ink); overflow-wrap: anywhere; }
.wall-root .wall-strip-meta { display: none; }
.wall-root .wall-strip-sum { font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }

/* the Wall's page */
.wl-page.active { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: var(--fo-paper); color: var(--fo-ink); font-family: var(--fo-sans); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 40px); }
.wl-page .wall-bar { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; box-sizing: content-box; height: 44px; padding: env(safe-area-inset-top, 0px) var(--fo-gutter) 0; border-bottom: 1px dashed var(--fo-hair); background: var(--fo-paper); }
.wl-page .wall-back, .wl-page .wall-names { min-height: 44px; padding: 0; border: none; background: none; font: inherit; font-size: 14px; color: var(--fo-ink); cursor: pointer; }
.wl-page .wall-back { justify-self: start; }
.wl-page .wall-names { justify-self: end; }
.wl-page .wall-title { margin: 0; font-family: var(--fo-mono); font-weight: 400; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.wl-page #wallStrips { padding-top: 20px; margin-bottom: 22px; }   /* the least between the last strip and the foot */
.wl-page .wall-foot { display: flex; justify-content: space-between; align-items: center; margin: auto var(--fo-gutter) 0; padding-top: 6px; border-top: 1px dashed var(--fo-hair); }
.wl-page .wall-foot[hidden] { display: none; }
.wl-page .wall-foot-word { min-height: 44px; padding: 0; border: none; background: none; font: inherit; font-size: 14px; color: var(--fo-ink); cursor: pointer; }
.wl-page .wall-foot-word.is-mark { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.wl-page .wall-pin-first { display: flex; align-items: center; justify-content: center; width: calc(100% - 2 * var(--fo-gutter)); height: 150px; margin: 0 var(--fo-gutter); border: 1px dashed rgba(26,22,20,0.35); background: none; font: inherit; font-size: 14px; color: var(--fo-ink); cursor: pointer; }
.wl-page .wall-empty { margin: 16px var(--fo-gutter) 0; display: flex; flex-direction: column; gap: 12px; font-family: var(--fo-serif); font-style: italic; font-size: 16px; line-height: 1.35; }
.wl-page .wall-empty > span { font-family: var(--fo-sans); font-style: normal; font-size: 12px; line-height: 1.5; color: var(--fo-graphite); }
.wl-page .wall-empty .wall-foot-word { min-height: 0; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.wl-page .wall-waiting { display: flex; flex-direction: column; gap: 2px; }
.wl-page .wall-waiting i { display: block; height: 150px; background: #EFEEE9; animation: wl-breathe 1.6s ease-in-out infinite alternate; }
.wl-page .wall-waiting-word { margin: 16px var(--fo-gutter) 0; font-family: var(--fo-serif); font-style: italic; font-size: 16px; display: flex; flex-direction: column; gap: 6px; }
.wl-page .wall-waiting-word span { font-family: var(--fo-sans); font-style: normal; font-size: 12px; color: var(--fo-graphite); }
.wl-page .wall-waiting-word.is-late { display: none; font-family: var(--fo-sans); font-style: normal; font-size: 12px; color: var(--fo-graphite); }
@keyframes wl-breathe { from { opacity: 1; } to { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .wl-page .wall-waiting i { animation: none; } }
.wl-page :focus-visible { outline: 2px solid var(--fo-ink); outline-offset: 2px; }
.wl-page .wall-back:focus-visible, .wl-page .wall-names:focus-visible { outline-offset: -4px; }
.wall-root .wall-frame:focus-visible { outline: 2px solid var(--fo-ink); outline-offset: -2px; }

/* a photograph alone, on the night plate (put on <body>) */
.wall-view { position: fixed; inset: 0; z-index: 900; display: none; flex-direction: column; background: #1A1614; font-family: var(--fo-sans, sans-serif); }
.wall-view.is-open { display: flex; }
.wall-view-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; box-sizing: content-box; height: 44px; padding: env(safe-area-inset-top, 0px) var(--fo-gutter, 24px) 0; }
.wall-view-close { justify-self: start; min-height: 44px; padding: 0; border: none; background: none; font: inherit; font-size: 14px; color: #FDFCFA; cursor: pointer; }
.wall-view-index { font-family: var(--fo-mono, monospace); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(253,252,250,0.7); }
.wall-view-plate { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.wall-view-plate img, .wall-view-plate video { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.wall-view-plate img { width: 100%; height: 100%; transition: filter .3s ease-out; }
.wall-view-plate img.is-blurred { filter: blur(6px); }
.wall-view-side { position: absolute; top: 0; bottom: 0; z-index: 1; width: 30%; padding: 0; border: none; background: transparent; cursor: pointer; }
.wall-view-side.is-prev { left: 0; }
.wall-view-side.is-next { right: 0; }
.wall-view-plate video ~ .wall-view-side, .wall-view-plate:has(video) .wall-view-side { bottom: 64px; }   /* a video's own controls stay pressable */
.wall-view-card { display: flex; flex-direction: column; gap: 10px; padding: 18px var(--fo-gutter, 24px) max(calc(env(safe-area-inset-bottom, 0px) + 8px), 30px); background: var(--fo-paper, #F7F6F3); color: var(--fo-ink, #1A1614); }
.wall-view-caption { margin: 0; font-family: var(--fo-serif); font-style: italic; font-size: 16px; line-height: 1.45; }
.wall-view-caption.is-none { color: var(--fo-graphite); }
.wall-view-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding-top: 10px; border-top: 1px dashed var(--fo-hair); }
.wall-view-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wall-view-mark { padding: 0; border: none; background: none; font-family: var(--fo-serif); font-size: 16px; color: var(--fo-ink); text-align: left; }
.wall-view-mark.is-way { cursor: pointer; }
.wall-view-line { font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.wall-view-note { margin: 0; text-transform: none; letter-spacing: 0; font-family: var(--fo-sans); font-size: 12px; }
.wall-unpin { position: relative; flex-shrink: 0; height: 36px; padding: 0 14px; border: 1px solid var(--fo-ink); background: transparent; font-family: var(--fo-sans); font-size: 12px; font-weight: 500; color: var(--fo-ink); cursor: pointer; }
.wall-unpin::after { content: ''; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
.wall-view-hint { margin: 0; font-size: 12px; color: var(--fo-graphite); }
.wall-view :focus-visible { outline: 2px solid #FDFCFA; outline-offset: 2px; }
.wall-view-card :focus-visible { outline-color: var(--fo-ink); }
.wall-view .wall-view-close:focus-visible { outline-offset: -4px; }

/* Pin more: a page of its own over the wall (the PinMore board). Put on <body>. */
.pm { position: fixed; inset: 0; z-index: 900; display: none; flex-direction: column; background: var(--fo-paper); color: var(--fo-ink); font-family: var(--fo-sans); }
.pm.is-open { display: flex; }
.pm .pm-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; box-sizing: content-box; height: 44px; padding: env(safe-area-inset-top, 0px) var(--fo-gutter) 0; border-bottom: 1px dashed var(--fo-hair); }
.pm .pm-cancel { justify-self: start; min-height: 44px; padding: 0; border: none; background: none; font: inherit; font-size: 14px; color: var(--fo-ink); cursor: pointer; }
.pm .pm-title { font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.pm .pm-body { flex: 1; min-height: 0; overflow-y: auto; }
.pm .pm-find { padding: 16px var(--fo-gutter) 0; }
.pm .pm-input { width: 100%; height: 44px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--fo-rule); border-radius: 0; background: var(--fo-card); outline: none; font-family: var(--fo-sans); font-size: 14px; color: var(--fo-ink); -webkit-appearance: none; appearance: none; }   /* the board's box and the kit's .fo-search, without the glass (owner, 2026-10-05) */
.pm .pm-input::placeholder { color: var(--fo-pale); }
.pm .pm-input:not(:placeholder-shown) { border-color: var(--fo-ink); }
.pm .pm-input:focus-visible { outline: none; }
.pm .pm-list { padding: 8px var(--fo-gutter) 0; }
.pm .pm-row { width: 100%; min-height: 52px; padding: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; border: none; border-bottom: 1px dashed var(--fo-hair); background: transparent; font: inherit; color: var(--fo-ink); text-align: left; cursor: pointer; }
.pm .pm-row-name { font-family: var(--fo-serif); font-size: 16px; }
.pm .pm-row-tag { flex-shrink: 0; font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.pm .pin-trip { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px var(--fo-gutter) 12px; }
.pm .pin-trip-name { font-family: var(--fo-serif); font-size: 16px; }
.pm .pm-change { position: relative; padding: 0; border: none; background: none; font: inherit; font-size: 12px; color: var(--fo-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pm .pm-change::after { content: ''; position: absolute; left: -8px; right: -8px; top: -14px; bottom: -14px; }
.pm .pm-count { margin: 0; padding: 0 var(--fo-gutter); font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.pm .pin-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 10px var(--fo-gutter) 16px; }
.pm .pin-tile { position: relative; aspect-ratio: 1; padding: 0; border: none; background: #E3E1DA; overflow: hidden; cursor: pointer; }
.pm .pin-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pm .pin-tile.is-picked { outline: 2px solid var(--fo-ink); outline-offset: -2px; }
.pm .pin-num { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; display: none; align-items: center; justify-content: center; background: var(--fo-ink); color: #FDFCFA; font-family: var(--fo-mono); font-size: 10px; }
.pm .pin-tile.is-picked .pin-num { display: flex; }
.pm .pin-tile .wall-vmark { position: absolute; left: 6px; bottom: 6px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; background: rgba(26,22,20,0.6); fill: #FDFCFA; }
.pm .pm-empty { margin: 18px var(--fo-gutter) 0; font-family: var(--fo-serif); font-style: italic; font-size: 16px; }
.pm .pm-foot { padding: 14px var(--fo-gutter) max(calc(env(safe-area-inset-bottom, 0px) + 8px), 30px); border-top: 1px dashed var(--fo-hair); }
.pm .pm-go { width: 100%; height: 52px; border: none; background: var(--fo-ink); font-family: var(--fo-sans); font-size: 14px; font-weight: 500; color: #FDFCFA; cursor: pointer; }
.pm .pm-go[disabled] { background: var(--fo-rule); color: var(--fo-pale); cursor: default; }
.pm :focus-visible { outline: 2px solid var(--fo-ink); outline-offset: 2px; }
.pm .pm-cancel:focus-visible, .pm .pm-row:focus-visible { outline-offset: -2px; }
.pm .pin-tile:focus-visible { outline: 2px solid var(--fo-ink); outline-offset: 2px; }
/* A foot's room under its button (owner, 2026-10-05: 页脚都比页眉高): the boards' 30 under the button already IS the room for
   a phone's home bar, so it is the larger of the two, not the sum; it was 30 + 34 on an iPhone, the foot 130 to the head's 44. */