/* Image-first cards: the social actions stay anchored on the photograph. */
.inline-profile-avatar{display:inline-grid;place-items:center;width:26px;height:26px;flex:0 0 26px;overflow:hidden;border:1px solid rgba(255,255,255,.72);border-radius:50%;background:#e3f0f0;vertical-align:middle}.inline-profile-avatar img,.inline-profile-avatar svg{display:block;width:100%;height:100%;object-fit:cover}.inline-profile-avatar.is-vector{background:#e3f0f0}.profile-name-with-avatar{display:inline-flex;align-items:center;gap:6px;direction:rtl;vertical-align:middle;min-width:0}.profile-name-with-avatar>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gallery-profile-name,.uploader-profile-name{font:inherit}.comment-author{display:inline-flex;align-items:center;gap:6px;min-width:0;color:#163547;font:800 15px Assistant,Arial,sans-serif}.comment-author .inline-profile-avatar{width:24px;height:24px;flex-basis:24px;border-color:rgba(43,110,143,.28)}.profile-notification p{display:flex;align-items:center;gap:7px}.profile-notification p .inline-profile-avatar{width:28px;height:28px;flex-basis:28px;border-color:rgba(43,110,143,.25)}
.today-coffee,.gallery-item{position:relative}.today-coffee-media,.gallery-media{position:relative;min-width:0}.today-coffee-photo,.gallery-image{position:relative;cursor:pointer}.today-coffee-photo:focus-visible,.gallery-image:focus-visible,.today-coffee-copy:focus-visible{outline:3px solid #2b6e8f;outline-offset:3px}
.featured-loader{display:grid;place-items:center;align-content:center;gap:15px;min-height:360px;padding:34px;border-radius:12px;background:linear-gradient(135deg,#e6f1f0,#f8f1e6);box-shadow:10px 11px 0 rgba(22,53,71,.08);text-align:center}.featured-loader-logo{display:flex;align-items:center;gap:12px;direction:rtl;color:#163547}.featured-loader-logo img{display:block;width:74px;height:74px;border-radius:50%;object-fit:contain;background:transparent;box-shadow:none;animation:coffee-logo-bob 1.35s ease-in-out infinite}.featured-loader-logo strong{font:900 29px/.83 Rubik,Arial,sans-serif;letter-spacing:-.06em;text-align:right}.featured-loader-logo i{color:#c96e4d;font-style:normal}.featured-loader p{margin:0;color:#55707d;font:800 15px Assistant,Arial,sans-serif}@keyframes coffee-logo-bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-11px) rotate(4deg)}}@media(prefers-reduced-motion:reduce){.featured-loader-logo img{animation:none}}
/* Keep the loading placeholder compact so empty daily gallery loads remain short. */
.featured-loader{min-height:clamp(220px, 35vw + 90px, 360px)}
@media(min-width:721px) and (max-width:899px){.featured-loader{min-height:clamp(240px, 35vw + 120px, 390px)}}
/* On phones keep the loading state compact; it now matches just enough space for the loader. */
@media(max-width:720px){.featured-loader{min-height:clamp(170px, 48vw, 220px)}}
.today.is-empty-today .featured-loader{min-height:clamp(140px, 40vw, 190px)}
.today-coffee-photo,.gallery-image{aspect-ratio:1!important}.today-coffee-photo img,.gallery-image img{object-fit:cover!important;object-position:center!important}
.photo-actions{position:absolute;z-index:2;bottom:10px;left:10px;display:flex;align-items:center;gap:7px;padding:0!important;pointer-events:auto}
.gallery-media .photo-actions{bottom:9px;left:9px}
.today-gallery .photo-actions{left:10px;right:10px;width:calc(100% - 20px);justify-content:flex-start}
.photo-actions .like-control,.photo-actions .comment-control{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:39px;width:auto!important;flex:0 0 auto;height:39px;margin:0!important;padding:0 10px!important;border:1px solid rgba(255,255,255,.68)!important;border-radius:999px!important;background:rgba(18,42,53,.78)!important;color:#fffdf9!important;font:800 13px Assistant,Arial,sans-serif;box-shadow:0 4px 14px rgba(0,0,0,.22)!important;backdrop-filter:blur(8px);cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease}.photo-actions .like-control:hover,.photo-actions .comment-control:hover{border-color:#fff!important;background:#2b6e8f!important;transform:translateY(-2px)}.photo-actions .like-control.active{background:#c96e4d!important;border-color:#ffd7cb!important}.photo-actions .like-control:disabled{opacity:1;cursor:default}.photo-actions .like-control.pending{opacity:.72}
.social-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}.like-control.active .social-icon{fill:currentColor}.today-coffee-copy{cursor:pointer}
.lightbox .like-control{background:rgba(18,42,53,.9)!important;border-color:rgba(255,255,255,.72)!important;color:#fffdf9!important;box-shadow:0 4px 14px rgba(0,0,0,.28)!important}.lightbox .like-control:hover:not(:disabled){background:#2b6e8f!important}.lightbox .like-control.active{background:#c96e4d!important;border-color:#ffd7cb!important;color:#fff!important}.lightbox-meta{display:flex;align-items:center;justify-content:space-between;gap:14px;width:min(620px,92vw);margin:10px auto 0;direction:rtl}.lightbox-meta .lightbox-uploader{margin:0!important;text-align:right}.lightbox-meta .lightbox-date{margin:0!important;color:#d5e8ea;text-align:left}.lightbox-beans{margin-top:7px!important;color:#f4c67b!important;font:800 15px/1.35 Assistant,Arial,sans-serif}
.lightbox-nav{position:fixed;top:50%;z-index:2;display:grid;place-items:center;width:50px;height:50px;padding:0;transform:translateY(-50%);border:1px solid rgba(255,255,255,.72);border-radius:50%;background:rgba(18,42,53,.82);color:#fffdf9;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.3);backdrop-filter:blur(8px);transition:transform .18s ease,background .18s ease,opacity .18s ease}.lightbox-nav svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.lightbox-nav:hover:not(:disabled){background:#2b6e8f;transform:translateY(-50%) scale(1.06)}.lightbox-nav:focus-visible{outline:3px solid #efaa5a;outline-offset:3px}.lightbox-nav:disabled{opacity:.25;cursor:default}.lightbox-prev{left:20px}.lightbox-next{right:20px}
.gallery-grid{display:block}.archive-date-group+.archive-date-group{margin-top:38px}.archive-date-heading{margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid rgba(22,53,71,.16);color:#55707d;font:800 18px/1.2 Rubik}.archive-date-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px}
@media(min-width:701px){.today-coffee{display:grid;grid-template-columns:minmax(320px,42%) minmax(0,1fr);align-items:stretch}.today-coffee-media{grid-column:1}.today-coffee-copy{grid-column:2}.today-gallery.has-multiple .today-coffee{display:block}.today-gallery.has-multiple .today-coffee-media .today-coffee-photo{min-height:0;aspect-ratio:4/3}.today-gallery.hide-copy-desktop .today-coffee{display:block}.today-gallery.hide-copy-desktop .today-coffee-copy{display:none}.today-gallery.hide-copy-desktop .today-coffee-media .today-coffee-photo{min-height:0;aspect-ratio:4/3}}
/* SVG and count share a single flex baseline instead of the text baseline. */
.like-control{align-items:center!important;line-height:1!important}.like-control .social-icon{display:block;flex:0 0 auto;align-self:center;margin:0!important;transform:translateY(2px);vertical-align:middle}.like-control>span{display:inline-flex;align-items:center;justify-content:center;align-self:center;min-width:1ch;height:20px;line-height:20px!important;vertical-align:middle}
.lightbox-social-meta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;width:min(620px,92vw);margin:12px auto 0;direction:rtl}.lightbox-social-meta .lightbox-beans{justify-self:start;margin:0!important;text-align:right}.lightbox-social-meta .like-control{grid-column:2;justify-self:end;margin:0!important}
.lightbox-social-meta{display:flex;justify-content:space-between;align-items:center}.lightbox-social-meta .lightbox-beans{flex:1 1 auto;min-width:0;justify-self:auto}.lightbox-controls{display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;flex:0 0 auto;min-height:45px;direction:ltr}.lightbox-controls .like-control,.lightbox-controls .share-control{display:inline-flex!important;align-items:center;justify-content:center;align-self:center;flex:0 0 auto;height:45px;min-width:45px;width:auto;margin:0!important;padding:0 12px;line-height:1;vertical-align:middle}.lightbox .share-control[hidden]{display:none!important}
.lightbox-social-meta{width:min(900px,92vw)}.lightbox-social-actions{display:flex;align-items:center;justify-content:flex-start;gap:8px;flex:0 0 auto;min-width:0;direction:rtl;flex-wrap:nowrap}.lightbox-social-actions .lightbox-edit-actions{display:contents}.lightbox-social-actions .lightbox-controls{flex:0 0 auto}
.lightbox-social-actions .lightbox-controls .like-control,.lightbox-social-actions .lightbox-controls .share-control{border:1px solid rgba(255,255,255,.45)!important;border-radius:999px!important;background:rgba(255,255,255,.12)!important;color:#fff!important;box-shadow:none!important;font:800 14px Assistant,system-ui,sans-serif!important}.lightbox-social-actions .lightbox-controls .like-control:hover:not(:disabled),.lightbox-social-actions .lightbox-controls .share-control:hover{border-color:#fff!important;background:rgba(255,255,255,.22)!important;transform:translateY(-1px)}.lightbox-social-actions .lightbox-controls .like-control.active{border-color:#ffd7cb!important;background:#c96e4d!important;color:#fff!important}.lightbox-social-actions .lightbox-controls .share-control.copied{border-color:#d9f0bd!important;background:#48711f!important}
.photo-share,.lightbox .share-control{display:inline-flex;align-items:center;justify-content:center;width:39px;height:39px;margin:0;padding:0;border:1px solid rgba(255,255,255,.68);border-radius:999px;background:rgba(18,42,53,.78);color:#fffdf9;box-shadow:0 4px 14px rgba(0,0,0,.22);backdrop-filter:blur(8px);cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease}
.photo-share{position:absolute;z-index:2;right:10px;bottom:10px}
.photo-share:hover,.lightbox .share-control:hover{border-color:#fff;background:#2b6e8f;transform:translateY(-2px)}
.photo-share.copied,.lightbox .share-control.copied{background:#48711f;border-color:#d9f0bd}
.today-share{position:absolute;right:0!important;left:auto!important}
/* Keep the daily-gallery share control in the action row at the image's far right.
   It must not be absolutely positioned relative to the action bar, otherwise it
   can sit on top of the like/comment controls when the card width changes. */
.today-gallery .photo-actions{direction:ltr}
.today-gallery .today-share{position:static!important;inset:auto!important;right:auto!important;left:auto!important;margin-left:auto!important;flex:0 0 auto}
.lightbox .share-control{width:45px;height:45px;background:rgba(18,42,53,.9);border-color:rgba(255,255,255,.72);box-shadow:0 4px 14px rgba(0,0,0,.28)}
.lightbox-image-frame{position:relative;display:grid;place-items:center;width:min(900px,92vw);max-height:min(55vh,620px);min-height:0;margin:0 auto;overflow:visible}
.lightbox-image-frame>img{display:block;max-width:100%;max-height:min(55vh,620px);width:auto;height:auto;object-fit:contain}
.lightbox-image-action{position:fixed;top:20px;right:76px;inset-inline-end:auto;z-index:2001;display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid rgba(255,255,255,.75);border-radius:50%;background:rgba(18,42,53,.84);color:#fffdf9;box-shadow:0 4px 14px rgba(0,0,0,.3);cursor:pointer;opacity:0;transform:none;transition:opacity .18s ease,transform .18s ease,background .18s ease}
.lightbox-image-action svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}
.lightbox-image-action:hover,.lightbox-image-action:focus-visible{background:#2b6e8f;opacity:1;transform:none;outline:3px solid #efaa5a;outline-offset:2px}
.lightbox-image-frame:hover .lightbox-image-action:not([hidden]){opacity:1;transform:none}
.lightbox:not(.image-fullscreen):hover .lightbox-image-expand:not([hidden]){opacity:.92;transform:none}
.lightbox-image-action[hidden]{display:none!important}
.lightbox.image-fullscreen{grid-template-rows:minmax(0,1fr);gap:0;padding:20px}
.lightbox.image-fullscreen .lightbox-image-frame{width:100%;height:100%;max-width:none;max-height:none}
.lightbox.image-fullscreen .lightbox-image-frame>img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;border-radius:0}
.lightbox.image-fullscreen .lightbox-caption{display:none}
.lightbox.image-fullscreen .lightbox-image-exit{top:20px;right:76px;inset-inline-end:auto;opacity:1;transform:none}
@media(min-width:701px){.lightbox-comments{width:min(900px,92vw)}}
@media(hover:none){.lightbox-image-expand{opacity:.92;transform:none}}
.photo-share,.lightbox .share-control{font:800 13px Assistant,Arial,sans-serif}.photo-share:focus-visible,.lightbox .share-control:focus-visible{outline:3px solid #efaa5a;outline-offset:3px}
.gallery-item .photo-share{display:inline-flex!important;width:39px!important;height:39px!important;padding:0!important;border:1px solid rgba(255,255,255,.68)!important;border-radius:999px!important;background:rgba(18,42,53,.78)!important;color:#fffdf9!important;box-shadow:0 4px 14px rgba(0,0,0,.22)!important;text-align:center!important}
.today-coffee .photo-share{display:inline-flex!important;width:39px!important;height:39px!important;padding:0!important;border:1px solid rgba(255,255,255,.68)!important;border-radius:999px!important;background:rgba(18,42,53,.78)!important;color:#fffdf9!important;box-shadow:0 4px 14px rgba(0,0,0,.22)!important;text-align:center!important}
@media(max-width:700px){.today-gallery .photo-actions{left:8px;right:8px;width:calc(100% - 16px)}.photo-share{right:8px;bottom:8px;width:36px;height:36px}.gallery-item .photo-share{width:36px!important;height:36px!important}.today-coffee .photo-share{width:36px!important;height:36px!important}.today-share{right:0!important}.lightbox .share-control{width:42px;height:42px}.lightbox-controls .like-control,.lightbox-controls .share-control{height:42px!important;align-self:center}.lightbox-social-actions{gap:6px;flex-wrap:wrap}.lightbox-social-actions .lightbox-edit-actions{flex-wrap:wrap}}
.profile-name-with-avatar{display:inline-flex;align-items:center;gap:6px;direction:rtl;vertical-align:middle;min-width:0;white-space:nowrap}.profile-name-with-avatar>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gallery-profile-name,.uploader-profile-name{display:inline-flex;align-items:center;gap:8px;direction:rtl;vertical-align:middle;min-width:0;white-space:nowrap}
.lightbox-meta .lightbox-uploader{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%;flex-wrap:nowrap;line-height:1;white-space:nowrap}.lightbox-uploader-prefix{display:inline-flex;align-items:center;flex:0 0 auto;line-height:1;white-space:nowrap}.lightbox-meta .lightbox-uploader .uploader-profile-name{min-width:0;max-width:100%}.lightbox-meta .lightbox-uploader-person{display:inline-flex!important;align-items:center;gap:6px;flex:0 1 auto;min-width:0;max-width:100%;line-height:1;white-space:nowrap}.lightbox-meta .lightbox-uploader-person .inline-profile-avatar{flex:0 0 26px}.lightbox-meta .lightbox-uploader-person>span:last-child{display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:700px){.today-gallery.hide-copy-mobile .today-coffee-copy{display:none}.today-gallery.hide-copy-mobile .today-coffee-media .today-coffee-photo{min-height:0;aspect-ratio:4/3}.photo-actions{bottom:8px;left:8px}.photo-actions .like-control,.photo-actions .comment-control{min-width:36px;height:36px;padding:0 9px!important}.social-icon{width:17px;height:17px}.lightbox-nav{width:42px;height:42px}.lightbox-nav svg{width:22px;height:22px}.lightbox-prev{left:8px}.lightbox-next{right:8px}.archive-date-group+.archive-date-group{margin-top:28px}.archive-date-heading{margin-bottom:11px;font-size:16px}.archive-date-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media(max-width:700px){.lightbox-image-frame{width:94vw;max-height:42vh}.lightbox-image-frame>img{max-width:94vw;max-height:42vh}.lightbox.image-fullscreen{padding:12px}.lightbox-image-action,.lightbox.image-fullscreen .lightbox-image-exit{top:12px;right:68px}.lightbox-social-actions .lightbox-controls .like-control,.lightbox-social-actions .lightbox-controls .share-control{height:42px!important}}
.lightbox button:hover:not(:focus-visible),.lightbox button:focus:not(:focus-visible){outline:0}

/* Archive photos share one compact grid; dates are no longer separate groups. */
.gallery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.gallery-grid>.gallery-item{min-width:0}
@media(max-width:900px){.gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}}
@media(max-width:700px){.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}

/* Fullscreen is an image-only viewport.  Reset the scrolling lightbox grid so
   the image gets one bounded row and can never overlap its old caption or
   comments content. */
.lightbox.image-fullscreen{
  display:grid;
  grid-template-rows:minmax(0,1fr)!important;
  align-content:stretch;
  place-items:stretch;
  overflow:hidden;
  padding:16px;
}
.lightbox{z-index:2000}
.lightbox.image-fullscreen>.lightbox-image-frame{
  grid-row:1;
  place-self:stretch;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  max-width:none;
  max-height:none;
  overflow:hidden;
}
.lightbox.image-fullscreen>.lightbox-caption,
.lightbox.image-fullscreen>#lightboxComments{display:none!important}
.lightbox.image-fullscreen .lightbox-image-frame>img{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
@media(max-width:700px){.lightbox.image-fullscreen{padding:12px}}

/* Normal viewing uses a vertical flow instead of the previous constrained
   three-row grid.  That grid could center an image taller than its row and
   make it overlap the caption, social controls, or comments. */
.lightbox:not(.image-fullscreen):not([hidden]){
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  overflow-x:hidden;
  overflow-y:auto;
  align-content:normal;
}
.lightbox[hidden]{display:none!important}
.lightbox:not(.image-fullscreen)>.lightbox-image-frame{
  flex:0 0 auto;
  width:min(900px,92vw);
  max-width:100%;
}
.lightbox:not(.image-fullscreen)>.lightbox-caption{
  flex:0 0 auto;
  width:min(900px,92vw);
  max-width:100%;
}
.lightbox:not(.image-fullscreen)>#lightboxComments{
  flex:0 0 auto;
  max-width:100%;
}

/* The expand control intentionally mirrors the close button's translucent
   circle so both image actions read as one control family. */
.lightbox-image-action{width:45px;height:45px;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.1);color:#fff;box-shadow:none}
.lightbox-image-action:hover:not(:disabled){background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.75);transform:none}
.lightbox-image-action:focus-visible{background:rgba(255,255,255,.1);transform:none}

/* Text navigation sits immediately above comments instead of floating over
   the image. RTL keeps the next action on the physical left side. */
.lightbox-navigation{display:flex;align-items:center;justify-content:center;gap:10px;width:min(900px,92vw);max-width:100%;margin:14px auto 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.16);direction:rtl}
.lightbox-navigation .lightbox-nav{position:static;top:auto;right:auto;left:auto;display:inline-flex;align-items:center;justify-content:center;width:auto;min-width:88px;height:40px;padding:0 16px;transform:none;border:1px solid rgba(255,255,255,.72);border-radius:999px;background:rgba(18,42,53,.82);color:#fffdf9;font:800 15px/1 Assistant,Arial,sans-serif;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.lightbox-navigation .lightbox-nav svg{display:none}
.lightbox-navigation .lightbox-nav:hover:not(:disabled){background:#2b6e8f;transform:translateY(-1px)}
.lightbox-navigation .lightbox-nav:disabled{opacity:.28}
/* Keep post navigation at the end of the scrollable lightbox and pinned near
   the viewport bottom while the image, details, and comments are read. Use
   the same translucent treatment as the social controls. */
.lightbox-navigation{position:sticky;bottom:12px;z-index:2003;box-sizing:border-box;width:min(900px,92vw);margin:18px auto 12px;padding:9px 10px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(255,255,255,.08);box-shadow:0 8px 22px rgba(0,0,0,.2);backdrop-filter:blur(10px)}
.lightbox-navigation .lightbox-nav{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.45);box-shadow:none}
.lightbox-navigation .lightbox-nav:hover:not(:disabled){background:rgba(255,255,255,.22);border-color:#fff;transform:translateY(-2px)}
@media(max-width:700px){.lightbox-navigation{bottom:8px;width:min(620px,calc(100% - 24px));margin:14px auto 8px;padding:8px}.lightbox-navigation .lightbox-nav{min-width:82px;height:38px;padding:0 14px}}

/* Comments share the same readable column as the preparation/taste panels. */
.lightbox-comments{width:min(900px,92vw);max-width:100%}
.lightbox-comments{background:#d9edf1}
@media(max-width:700px){
  .lightbox-navigation{width:min(620px,92vw);gap:8px;margin-top:12px;padding-top:10px}
  .lightbox-navigation .lightbox-nav{min-width:82px;height:38px;padding:0 14px;font-size:14px}
  .lightbox-comments{width:min(620px,92vw)}
  /* Reactions float in the same top row as close/fullscreen on mobile. */
  .lightbox-social-actions .lightbox-controls{position:fixed;top:12px;left:12px;z-index:2002;display:inline-flex;align-items:center;gap:6px;min-height:45px}
  .lightbox-social-actions .lightbox-controls .like-control,.lightbox-social-actions .lightbox-controls .share-control{height:45px!important;min-height:45px;min-width:45px}
}

/* Keep every lightbox action in one consistent share-button style and stack
   them under the close control: close, fullscreen, share, then like. */
.lightbox-close,
.lightbox-image-action,
.lightbox-social-actions .lightbox-controls .share-control,
.lightbox-social-actions .lightbox-controls .like-control{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  width:45px!important;
  height:45px!important;
  min-width:45px;
  min-height:45px;
  margin:0!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.72)!important;
  border-radius:999px!important;
  background:rgba(18,42,53,.9)!important;
  color:#fffdf9!important;
  box-shadow:0 4px 14px rgba(0,0,0,.28)!important;
}
.lightbox-close{top:20px;right:20px;z-index:2002;font-size:30px;line-height:1}
.lightbox-image-action,
.lightbox.image-fullscreen .lightbox-image-exit{top:72px;right:20px;left:auto;opacity:1;transform:none}
.lightbox-image-action:hover:not(:disabled),
.lightbox-close:hover:not(:disabled),
.lightbox-social-actions .lightbox-controls .share-control:hover,
.lightbox-social-actions .lightbox-controls .like-control:hover:not(:disabled){
  border-color:#fff!important;
  background:#2b6e8f!important;
  transform:translateY(-2px);
}
.lightbox-social-actions .lightbox-controls{
  position:fixed;
  top:124px;
  right:20px;
  left:auto;
  z-index:2002;
  display:flex;
  flex-direction:column-reverse;
  align-items:center;
  gap:7px;
  min-height:0;
  direction:ltr;
}
@media(max-width:700px){
  .lightbox-close{top:12px;right:12px}
  .lightbox-image-action,
  .lightbox.image-fullscreen .lightbox-image-exit{top:64px;right:12px;left:auto}
  .lightbox-social-actions .lightbox-controls{top:116px;right:12px;left:auto}
}

/* Action buttons use the compact share-button treatment. Counts are separate
   labels beneath the like/comment icons so every button remains identical in
   size. Desktop keeps the toolbar below the image; mobile floats it at the
   top-left while the close button stays at the top-right. */
.lightbox-control-group{display:flex;flex:0 0 45px;flex-direction:column;align-items:center;gap:3px;min-width:45px}
.lightbox-control-count{display:block;min-width:1ch;min-height:15px;color:#d5e8ea;font:800 13px/1 Assistant,Arial,sans-serif;text-align:center;white-space:nowrap}
.lightbox-close,
.lightbox-image-action,
.lightbox-social-actions .lightbox-controls .comment-control,
.lightbox-social-actions .lightbox-controls .share-control,
.lightbox-social-actions .lightbox-controls .like-control,
.lightbox-social-actions .lightbox-controls .lightbox-image-action{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  width:45px!important;
  height:45px!important;
  min-width:45px;
  min-height:45px;
  margin:0!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.72)!important;
  border-radius:999px!important;
  background:rgba(18,42,53,.9)!important;
  color:#fffdf9!important;
  box-shadow:0 4px 14px rgba(0,0,0,.28)!important;
}
.lightbox-close{top:20px;right:20px;z-index:2002;font-size:30px;line-height:1}
.lightbox-social-actions .lightbox-controls{
  position:static;
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  justify-content:center;
  gap:8px;
  min-height:0;
  direction:ltr;
}
.lightbox-social-actions .lightbox-image-action{position:static!important;top:auto!important;right:auto!important;left:auto!important;opacity:1!important;transform:none!important}
.lightbox-close:hover:not(:disabled),
.lightbox-image-action:hover:not(:disabled),
.lightbox-social-actions .lightbox-controls button:hover:not(:disabled){border-color:#fff!important;background:#2b6e8f!important;transform:translateY(-2px)}
@media(max-width:700px){
  .lightbox-close{top:12px;right:12px}
  .lightbox-social-actions .lightbox-controls{
    position:fixed;
    top:12px;
    left:12px;
    right:auto;
    z-index:2002;
  }
}

@media(min-width:701px){
  /* Keep the action row under the image/content instead of beside the bean
     label, while retaining one horizontal, top-aligned row of buttons. */
  .lightbox-social-meta{flex-direction:column;align-items:stretch;gap:8px}
  .lightbox-social-actions{width:100%;justify-content:center}
}

/* Final responsive lightbox action layout.  The source markup keeps the
   controls accessible in one place; ordering and presentation change with
   the viewport so the desktop and mobile layouts stay predictable. */
.lightbox-social-actions .lightbox-controls{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:12px;
  direction:ltr;
}
.lightbox-control-group{
  display:flex;
  flex:0 0 45px;
  flex-direction:column;
  align-items:center;
  gap:3px;
  min-width:45px;
}
.lightbox-inline-count{
  display:none;
  align-items:center;
  justify-content:center;
  min-width:1ch;
  color:inherit;
  font:800 13px/1 Assistant,Arial,sans-serif;
  white-space:nowrap;
}

@media(min-width:701px){
  .lightbox-social-actions .lightbox-controls{
    position:static;
    flex-direction:row;
    align-items:flex-start;
    justify-content:center;
    gap:12px;
  }
  .lightbox-social-actions .lightbox-comment-group{display:none!important}
  .lightbox-like-group > .lightbox-control-count{display:none!important}
  .lightbox-like-group .like-control{gap:6px}
  .lightbox-like-group .like-control .lightbox-inline-count{display:inline-flex}
}

/* Keep every lightbox action the same size and use one translucent matte
   surface. The like count remains inside the desktop button; mobile hides
   that inline count and keeps its external count below the button. */
.lightbox-close,
.lightbox-image-action,
.lightbox-social-actions .lightbox-controls .comment-control,
.lightbox-social-actions .lightbox-controls .share-control,
.lightbox-social-actions .lightbox-controls .like-control{
  width:45px!important;
  min-width:45px!important;
  max-width:45px!important;
  height:45px!important;
  min-height:45px!important;
  max-height:45px!important;
  padding:0!important;
  box-sizing:border-box;
  background:rgba(18,42,53,.5)!important;
  border-color:rgba(255,255,255,.55)!important;
  backdrop-filter:blur(8px);
}
.lightbox-social-actions .lightbox-controls .like-control.active{
  background:rgba(201,110,77,.5)!important;
}
.lightbox-social-actions .lightbox-controls .share-control.copied{
  background:rgba(72,113,31,.5)!important;
}
.lightbox-close:hover:not(:disabled),
.lightbox-image-action:hover:not(:disabled),
.lightbox-social-actions .lightbox-controls button:hover:not(:disabled){
  background:rgba(43,110,143,.5)!important;
}

@media(max-width:700px){
  /* Close stays in the upper-right corner; the remaining actions form a
     vertical matte rail directly beneath it. */
  .lightbox-close{top:12px;right:12px}
  .lightbox-social-actions .lightbox-controls{
    position:fixed;
    top:64px;
    right:12px;
    left:auto;
    z-index:2002;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    min-height:0;
  }
  .lightbox-social-actions .lightbox-fullscreen-group{order:1}
  .lightbox-social-actions .lightbox-share-group{order:2}
  .lightbox-social-actions .lightbox-comment-group{order:3}
  .lightbox-social-actions .lightbox-like-group{order:4}
  .lightbox-inline-count{display:none!important}
  .lightbox-control-group > .lightbox-control-count{display:block}
  .lightbox-close,
  .lightbox-image-action,
  .lightbox-social-actions .lightbox-controls button{
    background:rgba(18,42,53,.5)!important;
    border-color:rgba(255,255,255,.55)!important;
    backdrop-filter:blur(8px);
  }
}

/* Give the normal image view back half of its original top inset so the
   photograph and its metadata sit higher without changing fullscreen mode. */
.lightbox:not(.image-fullscreen):not([hidden]){padding-top:34px}

@media(min-width:701px){
  /* Desktop keeps beans on the right and the social controls on the opposite
     side of the same row. The like button has room for both its icon and the
     inline count while preserving the same inner horizontal padding. */
  .lightbox:not(.image-fullscreen):not([hidden]){padding-top:34px}
  .lightbox-social-meta{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:20px;
  }
  .lightbox-social-meta .lightbox-beans{
    order:1;
    flex:1 1 auto;
    min-width:0;
    text-align:right;
  }
  .lightbox-social-actions{
    order:2;
    width:auto;
    flex:0 0 auto;
    justify-content:flex-start;
  }
  .lightbox-social-actions .lightbox-controls{justify-content:flex-start}
  .lightbox-social-actions .lightbox-like-group{
    flex:0 0 72px;
    min-width:72px;
  }
  .lightbox-social-actions .lightbox-like-group .like-control{
    width:72px!important;
    min-width:72px!important;
    max-width:72px!important;
    padding:0 12px!important;
  }
}

@media(max-width:700px){
  .lightbox:not(.image-fullscreen):not([hidden]){padding-top:31px}
}

/* The fullscreen control is mounted inside the social toolbar. Its base
   image-action rule intentionally resets transform, which otherwise prevents
   the shared hover lift from being visible. Keep the same small "jump" as the
   close, share, like, and comment controls. */
.lightbox-social-actions .lightbox-controls .lightbox-image-action:hover:not(:disabled),
.lightbox-social-actions .lightbox-controls .lightbox-image-action:focus-visible{
  transform:translateY(-2px)!important;
}
.lightbox-image-frame .lightbox-image-exit:hover:not(:disabled),
.lightbox-image-frame .lightbox-image-exit:focus-visible{
  transform:translateY(-2px)!important;
}

/* Navigation should float on its own: remove the old enclosing pill while
   keeping the individual controls legible over pale comments and photos. */
.lightbox-navigation{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  width:auto!important;
  max-width:none!important;
  margin:18px auto 12px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  position:sticky!important;
  bottom:12px!important;
  z-index:2010!important;
}
.lightbox-navigation .lightbox-nav{
  min-width:88px!important;
  min-height:42px!important;
  padding:9px 18px!important;
  border:1px solid rgba(255,255,255,.78)!important;
  border-radius:999px!important;
  background:#163547!important;
  color:#fffdf9!important;
  box-shadow:0 7px 18px rgba(22,53,71,.28)!important;
  text-shadow:0 1px 2px rgba(0,0,0,.2);
}
.lightbox-navigation .lightbox-nav:hover:not(:disabled),
.lightbox-navigation .lightbox-nav:focus-visible{
  background:#2b6e8f!important;
  transform:translateY(-2px);
  outline:0;
}
.lightbox-navigation .lightbox-nav:disabled{opacity:.42;cursor:not-allowed}

/* Profile covers and avatars open in the same calm, high-contrast viewer. */
.media-preview-trigger{cursor:zoom-in}
.media-preview-trigger.is-empty{cursor:default}
.media-preview{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:clamp(14px,4vw,42px);background:rgba(10,29,39,.82);backdrop-filter:blur(7px);direction:rtl}
.media-preview[hidden]{display:none!important}
.media-preview-card{position:relative;display:grid;place-items:center;width:min(96vw,1180px);height:min(94vh,860px);padding:clamp(42px,5vw,68px) clamp(14px,4vw,48px) clamp(18px,4vw,40px);border:1px solid rgba(255,255,255,.26);border-radius:18px;background:rgba(22,53,71,.24);box-shadow:0 24px 90px rgba(0,0,0,.34)}
.media-preview-content{display:grid;place-items:center;width:100%;height:100%;min-height:0}
.media-preview-image{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:12px;box-shadow:0 16px 42px rgba(0,0,0,.3)}
.media-preview-vector{display:block;width:min(82vw,520px);height:min(82vw,520px);max-width:100%;max-height:100%;filter:drop-shadow(0 16px 28px rgba(0,0,0,.28))}
.media-preview-close{position:absolute;inset:14px 14px auto auto;z-index:1;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid rgba(255,255,255,.72);border-radius:50%;background:#163547;color:#fffdf9;font:700 28px/1 Arial,sans-serif;cursor:pointer;box-shadow:0 6px 15px rgba(0,0,0,.24);transition:transform .18s ease,background .18s ease}
.media-preview-close:hover,.media-preview-close:focus-visible{background:#2b6e8f;transform:translateY(-2px);outline:0}
@media(max-width:700px){
  .lightbox-navigation{gap:8px!important;bottom:8px!important}
  .lightbox-navigation .lightbox-nav{min-width:76px!important;min-height:40px!important;padding:8px 13px!important}
  .media-preview{padding:8px}
  .media-preview-card{width:100%;height:92vh;padding:52px 8px 18px;border-radius:14px}
  .media-preview-close{inset:10px 10px auto auto;width:38px;height:38px}
}

/* On desktop, keep the post navigation close to the social actions: the
   previous/next pair sits immediately before the like button. Mobile keeps
   the original sticky bottom navigation, so the compact action-row copy is
   hidden there. */
@media (min-width:701px){
  .lightbox .lightbox-navigation{display:none!important}
  .lightbox-social-actions .lightbox-desktop-navigation{
    display:flex!important;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    gap:8px;
    width:auto;
    min-width:0;
    margin:0;
    direction:rtl;
  }
  .lightbox-social-actions .lightbox-desktop-nav-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:auto;
    min-width:64px;
    height:45px;
    margin:0;
    padding:0 11px;
    border:1px solid rgba(255,255,255,.55);
    border-radius:999px;
    background:rgba(18,42,53,.5);
    color:#fffdf9;
    box-shadow:0 4px 14px rgba(0,0,0,.2);
    backdrop-filter:blur(8px);
    cursor:pointer;
    font:800 13px/1 Assistant,Arial,sans-serif;
    white-space:nowrap;
    transition:transform .18s ease,background .18s ease,border-color .18s ease,opacity .18s ease;
  }
  .lightbox-social-actions .lightbox-desktop-nav-button:hover:not(:disabled),
  .lightbox-social-actions .lightbox-desktop-nav-button:focus-visible{
    border-color:#fff;
    background:rgba(43,110,143,.5);
    transform:translateY(-2px);
    outline:0;
  }
  .lightbox-social-actions .lightbox-desktop-nav-button:disabled{opacity:.42;cursor:not-allowed}
}
@media (max-width:700px){
  .lightbox-social-actions .lightbox-desktop-navigation{display:none!important}
}

/* Keep gallery scrolling inexpensive on touch devices.  Mobile Chromium can
   otherwise repaint every card's blur, shadow, and hover transform together
   while newly visible images are being decoded.  Off-screen cards keep their
   measured space through an intrinsic size, so this does not cause jumps. */
@media (hover:none), (max-width:700px){
  .today-gallery > .today-coffee,
  #galleryGrid > .gallery-item,
  .archive-date-grid > .gallery-item,
  #publicProfileGalleryGrid > .gallery-item,
  #profileGalleryGrid > .profile-gallery-card-item{
    content-visibility:auto;
    contain-intrinsic-size:0 320px;
    transform:none!important;
    transition:none!important;
    will-change:auto!important;
  }
  .today-gallery > .today-coffee:hover,
  #galleryGrid > .gallery-item:hover,
  .archive-date-grid > .gallery-item:hover,
  #publicProfileGalleryGrid > .gallery-item:hover,
  #profileGalleryGrid > .profile-gallery-card-item:hover{
    transform:none!important;
    box-shadow:0 4px 0 rgba(22,53,71,.08)!important;
  }
  .photo-actions .like-control,
  .photo-actions .comment-control,
  .photo-share{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    box-shadow:0 3px 8px rgba(0,0,0,.18)!important;
    transition:background .12s ease,border-color .12s ease!important;
  }
  .photo-actions .like-control:hover,
  .photo-actions .comment-control:hover,
  .photo-share:hover{
    transform:none!important;
  }
}