/* v242: the Invitation designs' "Reply" and section list (js/occasi-invite-nav.js). A slim bar at the foot of the screen in
   the design's own paper, ink and fonts (read from the page: --oin-paper, --oin-ink, --oin-body, --oin-label; the list and the line in the middle use the body face, so they read at 15-17 px). The page keeps
   its height free at the end, so the last words are never under it. No blur. */
.oin{--oin-h:52px;--oin-paper:#fffdf8;--oin-ink:#2b2a33;--oin-body:Georgia,serif;--oin-label:Georgia,serif;
  position:fixed;left:0;right:0;bottom:0;z-index:2147482000;padding-bottom:env(safe-area-inset-bottom,0px);
  background:var(--oin-paper);color:var(--oin-ink);border-top:1px solid color-mix(in srgb,var(--oin-ink) 22%,transparent);
  box-shadow:0 -10px 24px -18px color-mix(in srgb,var(--oin-ink) 60%,transparent);
  animation:oin-in .35s cubic-bezier(.16,1,.3,1)}
.oin[hidden]{display:none}
.oin-in{display:flex;align-items:center;gap:10px;height:var(--oin-h);max-width:620px;margin:0 auto;padding:0 max(12px,env(safe-area-inset-left,0px)) 0 max(12px,env(safe-area-inset-right,0px))}
.oin-menu{display:inline-flex;align-items:center;gap:7px;min-height:44px;min-width:44px;padding:0 12px 0 10px;border:1px solid color-mix(in srgb,var(--oin-ink) 30%,transparent);border-radius:999px;
  background:transparent;color:inherit;font:600 12px/1 var(--oin-label);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.oin-here{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font:italic 400 15px/1.2 var(--oin-body);opacity:.85}
.oin-reply{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:88px;padding:0 18px;border-radius:999px;background:var(--oin-ink);color:var(--oin-paper);
  font:600 12.5px/1 var(--oin-label);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:opacity .2s,visibility .2s}
.oin-reply[hidden]{display:none}
.oin-reply.is-away{opacity:0;visibility:hidden;pointer-events:none}
.oin-menu:focus-visible,.oin-reply:focus-visible,.oin-list a:focus-visible{outline:3px solid color-mix(in srgb,var(--oin-ink) 70%,transparent);outline-offset:2px}
/* the list opens above the bar: one short line per section, at least 44 px each */
.oin-list{position:absolute;left:max(8px,env(safe-area-inset-left,0px));bottom:calc(100% + 8px);width:min(300px,calc(100vw - 16px));max-height:min(70dvh,560px);overflow:auto;
  background:var(--oin-paper);color:var(--oin-ink);border:1px solid color-mix(in srgb,var(--oin-ink) 22%,transparent);border-radius:14px;box-shadow:0 18px 40px -16px rgba(20,20,30,.35)}
.oin-list[hidden]{display:none}
@media (min-width:640px){.oin-list{left:calc(50% - 300px)}}
.oin-list ul{list-style:none;margin:0;padding:6px}
.oin-list a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:9px;color:inherit;text-decoration:none;font:400 17px/1.2 var(--oin-body)}
.oin-list a:hover{background:color-mix(in srgb,var(--oin-ink) 7%,transparent)}
.oin-list a[aria-current]{font-weight:600;background:color-mix(in srgb,var(--oin-ink) 10%,transparent)}
/* the page keeps the bar's height free at its end; the language picker and the sample's corner button stand above it */
html.oin-on body{padding-bottom:calc(52px + env(safe-area-inset-bottom,0px))}
html.oin-on #oc-language{bottom:calc(64px + env(safe-area-inset-bottom,0px))!important}
html.oin-open #oc-language{opacity:0;visibility:hidden;pointer-events:none}
@media (max-width:1023px),(max-height:599px){html.oin-on .osv-make{bottom:calc(68px + env(safe-area-inset-bottom,0px))}}
@media (max-width:359px){.oin-menu span{display:none}.oin-menu{padding:0;justify-content:center}}
@keyframes oin-in{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.oin{animation:none}.oin-reply{transition:none}}
@media print{.oin{display:none!important}}
/* v244 (usability study #2, #22): bar labels at 13.5 px; the language choice inside the Sections menu while the bar is on */
.oin-menu,.oin-reply{font-size:13.5px;letter-spacing:.1em}
.oin-list #oc-language.oin-lang{position:static;left:auto;bottom:auto;z-index:auto;margin:8px 4px 2px;font:400 15px/1.2 var(--oin-body,inherit)}
.oin-list #oc-language.oin-lang label{justify-content:space-between;min-height:44px;padding:4px 10px 4px 14px;border-radius:9px;background:transparent;color:inherit;box-shadow:none;border:1px solid color-mix(in srgb,var(--oin-ink,#1f2b26) 22%,transparent)}
.oin-list #oc-language.oin-lang .oc-language-label{display:inline!important}
.oin-list #oc-language.oin-lang select{max-width:60%;font-size:15px}
html.oin-on .oin-list #oc-language.oin-lang{bottom:auto!important}
html.oin-open .oin-list #oc-language.oin-lang{opacity:1;visibility:visible;pointer-events:auto}
/* v285.1 (lead 2 Nov, no "…" anywhere): the section name in the middle wraps, balanced, onto a second line inside the
   52 px bar rather than being cut ("When & wh…" at 360) */
.oin-here{overflow:visible;text-overflow:clip;white-space:normal;text-wrap:balance;line-height:1.1;overflow-wrap:anywhere}
@media (max-width:400px){.oin-here{font-size:14px}}