/* TOKYO VIP SELECTION v004 — 2026-10-11 repairs only (the same rules as v009, without the A/B or price additions). */
/* Optional-analytics notice: full wording on arrival, one line after the first scroll (both experiences).
   The original box fades (no resize, so nothing shifts); a separate one-line box appears in its place. */
.analytics-notice .hp-notice-short{display:none}
.analytics-notice.hp-folded{visibility:hidden;opacity:0;pointer-events:none;transition:opacity .25s ease,visibility 0s linear .25s}
.analytics-notice a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.hp-notice-mini[hidden]{display:none!important}
.hp-notice-mini{position:fixed;bottom:14px;left:14px;right:14px;z-index:1000;max-width:650px;padding:10px 14px;background:#191916;color:#eee9dc;border:1px solid #65604e;box-shadow:0 5px 25px #0008;font:13px/1.5 system-ui,sans-serif}
.hp-notice-mini p{margin:0 0 6px}
.hp-notice-mini div{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px}
.hp-notice-mini button{border:1px solid #aea58c;color:#eee9dc;background:transparent;min-height:44px;padding:6px 12px;font:inherit;cursor:pointer}
.hp-notice-mini a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;color:#eee9dc}
@media(max-width:600px){.hp-notice-mini{bottom:8px;left:8px;right:8px;padding:8px 12px;font-size:12px}.hp-notice-mini p{margin:0 0 4px;line-height:1.45}}
/* Wide screens: both notices sit in the lower-right corner, clear of the gate's words (left) and the centred piece */
@media(min-width:1100px){
 .analytics-notice{left:auto;right:14px;max-width:520px}
 .hp-notice-mini{left:auto;right:14px;max-width:250px}
}
@media print{.hp-notice-mini{display:none!important}}
body:not(:has(#exhibit)){padding-bottom:var(--hp-notice-h,0px)}
/* A · the gate: lift the captions and the scroll hint above the notice while it is shown (transform, so nothing shifts) */
#hud{transform:translateY(min(0px,calc(clamp(88px,14vh,150px) - var(--hp-notice-h,0px) - 92px)))}
#hint{transform:translateX(-50%) translateY(min(0px,calc(26px - var(--hp-notice-h,0px) - 8px)))}
@media (max-width:700px){#hud{transform:translateY(min(0px,calc(96px - var(--hp-notice-h,0px) - 92px)))}}
/* A · the end of the museum page: seller policies stay reachable above the notice */
.release-footer{padding-bottom:calc(18px + var(--hp-notice-h,0px))}
/* A · the kura on very narrow phones: six piece tabs fit on one line (swipe and the side arrows still change pieces) */
@media (max-width:360px){#exhibit .dots .step{display:none}}
/* A · at the kura the seller links come forward as one fine line above the notice (they sat under the fixed exhibit) */
body.at-exhibit .release-footer{position:fixed;left:0;right:0;bottom:var(--hp-notice-h,0px);z-index:30;padding:0 12px 2px;background:linear-gradient(0deg,rgba(5,5,6,.82),rgba(5,5,6,0))}
body.at-exhibit .release-policies{margin:0;flex-wrap:nowrap;gap:0 14px;white-space:nowrap}
body.at-exhibit .release-policies a,body.at-exhibit .release-policies button{color:#a9a294}
@media(min-width:1100px){body.at-exhibit .release-footer{bottom:0}}
/* A · the kura folds step by step only when it does not fit: 1 history line → 2 smaller name → 3 slightly smaller blade → 4 poetic line → 5 smallest */
#exhibit[data-hp-tight] .hist{display:none}
#exhibit[data-hp-tight="0"] .hist{display:block}
#exhibit[data-hp-tight="2"] .name,#exhibit[data-hp-tight="3"] .name,#exhibit[data-hp-tight="4"] .name{font-size:clamp(40px,4.2vw,54px);margin:8px 0}
#exhibit[data-hp-tight="2"] .line,#exhibit[data-hp-tight="3"] .line{margin:8px 0 0}
#exhibit[data-hp-tight="3"] .pieces{width:min(84vw,860px,98vh)!important}
#exhibit[data-hp-tight="4"] .line,#exhibit[data-hp-tight="5"] .line{display:none}
#exhibit[data-hp-tight="4"] .pieces{width:min(72vw,700px,88vh)!important}
#exhibit[data-hp-tight="5"] .name{font-size:clamp(36px,4vw,50px);margin:6px 0}
#exhibit[data-hp-tight="5"] .pieces{width:min(58vw,520px)!important}
#exhibit[data-hp-tight="5"] .dots{margin-top:6px}
/* A · the kura on phones: the station rail steps back so it never sits on the piece controls (scrolling up still walks back) */
@media(max-width:700px){body.at-exhibit #rail{opacity:0;pointer-events:none}}
/* Wide screens: the notice is on the right, so the gate's words and the scroll hint stay where the design put them */
@media(min-width:1100px){#hud{transform:none}#hint{transform:translateX(-50%)}}
/* QA view only: the QA strip sits at the very bottom, so the seller links rise above it at the kura */
body.at-exhibit:has(.production-qa) .release-footer{bottom:calc(var(--hp-notice-h,0px) + 34px)}