/* ==========================================================================
   Pawsitive Salon — Components
   Reusable building blocks shared across every page in the hub.
   ========================================================================== */

/* --- Eyebrow / small labels --------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tang-deep);
}
.eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--tang);
  border-radius: var(--radius-pill);
}

.tag {
  display: inline-block;
  font-size: var(--step--1);
  font-weight: 700;
  padding: 0.3em 0.8em;
  border-radius: var(--radius-pill);
  background: var(--gold-soft);
  color: var(--ink);
}
.tag--tang { background: var(--tang-soft); color: var(--tang-deep); }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  font-weight: 800;
  font-size: var(--step-0);
  line-height: 1;
  padding: 0.95em 1.5em;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--tang); color: #fff; box-shadow: var(--shadow-m); }
.btn--primary:hover { background: var(--tang-deep); box-shadow: var(--shadow-l); }

.btn--tang-deep { background: var(--tang-deep); color: #fff; box-shadow: var(--shadow-m); }
.btn--tang-deep:hover { background: var(--ink); }

.btn--ghost { background: transparent; color: var(--tang-deep); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--tang-deep); background: var(--cream); transform: translateY(-2px); }

.btn--block { width: 100%; }

/* --- Site header / navigation ------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-1);
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.02em;
}
.brand__mark {
  display: inline-block;
  width: 38px; height: 38px;
  border-radius: 50%;
  object-fit: contain;
  vertical-align: middle;
}
/* The "Salon" half of the wordmark echoes the rainbow logo */
.brand b {
  font-weight: 600;
  background: var(--rainbow);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nav { display: flex; align-items: center; gap: var(--space-l); }
.nav__list { display: flex; align-items: center; gap: var(--space-m); }
.nav__link {
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 700;
  padding: var(--space-3xs) 0;
  position: relative;
}
.nav__link:hover { color: var(--ink); }
.nav__link[aria-current="page"] { color: var(--tang-deep); }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--tang);
  border-radius: var(--radius-pill);
}

.nav__toggle {
  display: none;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  width: 46px; height: 46px;
  align-items: center;
  justify-content: center;
}
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  display: block;
  width: 20px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav__toggle span::before { transform: translateY(-6px); }
.nav__toggle span::after  { transform: translateY(4px); }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(-1.5px) translateX(0.5px); }

@media (max-width: 860px) {
  .nav__toggle { display: inline-flex; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    gap: var(--space-m);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-m);
    padding: var(--space-l) var(--space-m);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .nav[data-open="true"] { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .nav__list { flex-direction: column; gap: var(--space-s); width: 100%; }
  .nav .btn { width: 100%; }
}

/* --- Cards --------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: var(--space-l);
  box-shadow: var(--shadow-s);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card--lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); }

.card__icon {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 18px;
  background: var(--cream);
  font-size: 1.6rem;
  margin-bottom: var(--space-s);
}
.card__price { font-family: var(--font-display); color: var(--tang-deep); font-weight: 600; }

/* --- Forms --------------------------------------------------------------- */
.field { display: grid; gap: var(--space-3xs); margin-bottom: var(--space-s); }
.field label { font-weight: 700; font-size: var(--step--1); color: var(--ink-soft); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.8em 1em;
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-s);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--tang-deep);
  box-shadow: 0 0 0 3px var(--gold-soft);
}

/* --- Grids --------------------------------------------------------------- */
.grid { display: grid; gap: var(--space-m); }
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 880px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* --- Footer -------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: #e8ddca;
  padding-block: var(--space-2xl) var(--space-l);
  margin-top: var(--space-2xl);
}
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__grid {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
.site-footer h4 { color: #fff; margin-bottom: var(--space-s); }
.site-footer__col ul { display: grid; gap: var(--space-2xs); }
.site-footer__bottom {
  margin-top: var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid rgba(255,255,255,0.15);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  justify-content: space-between;
  font-size: var(--step--1);
  color: #b7ad9b;
}

/* --- Signature: floating soap suds (hero motif) ------------------------- */
.suds { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.suds span {
  position: absolute;
  bottom: -40px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff 0%, var(--gold-soft) 60%, transparent 72%);
  opacity: 0.55;
  animation: rise linear infinite;
}
@keyframes rise {
  0%   { transform: translateY(0) scale(0.9); opacity: 0; }
  12%  { opacity: 0.6; }
  100% { transform: translateY(-115vh) scale(1.15); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .suds { display: none; }
}

/* Signed-in indicator in the public site header (v1.2.0) */
.nav__link--user { display:inline-flex; align-items:center; gap:.45rem; font-weight:800; }
.nav__avatar { display:inline-grid; place-items:center; width:1.6rem; height:1.6rem; border-radius:999px;
  background:var(--tang, #ec6a2e); color:#fff; font-size:.72rem; font-weight:800; }

/* Branded modal dialogs (v1.4.0) — replace native confirm/alert/prompt */
.modal-overlay { position:fixed; inset:0; background:rgba(23,29,37,.55); display:grid; place-items:center;
  z-index:1000; opacity:0; transition:opacity .18s ease; padding:var(--space-m); }
.modal-overlay.is-open { opacity:1; }
.modal { background:var(--paper,#fdf7ec); color:var(--ink,#171d25); border-radius:var(--radius-l,18px);
  box-shadow:0 24px 60px rgba(0,0,0,.28); max-width:30rem; width:100%; padding:var(--space-l,1.6rem);
  border-top:4px solid var(--gold,#e7ab6a); transform:translateY(10px) scale(.985); transition:transform .18s ease; }
.modal-overlay.is-open .modal { transform:none; }
.modal__title { font-family:var(--font-display); font-size:var(--step-2); margin:0 0 .4rem; }
.modal__body { color:var(--ink-soft); margin:0 0 var(--space-s); }
.modal__input { width:100%; }
.modal__actions { display:flex; gap:.5rem; justify-content:flex-end; margin-top:var(--space-m); flex-wrap:wrap; }
.btn--danger { background:#d9533b; color:#fff; }
.btn--danger:hover { background:#c4472f; }

/* ============================================================================
   Reputation tier visual language (v1.6)
   Escalating badges, avatar rings, featured posts, and the portal status hero.
   The form escalates by kind; names carry an honorific; Diamond is the one tier
   that breaks out of honey-gold. Reliability is never surfaced here.
   ========================================================================== */

/* --- inline tier badge (feed, comments, gallery) --- */
.tier-badge{
  display:inline-flex; align-items:center; gap:.3em;
  margin-left:.4em; padding:.1em .55em .14em;
  font-size:.72rem; font-weight:800; line-height:1.4;
  border-radius:999px; white-space:nowrap; vertical-align:middle;
  position:relative; overflow:hidden;
}
.tier-badge__glyph{ font-size:.82em; letter-spacing:-.08em; }
.tier-badge__label{ font-size:.92em; letter-spacing:.01em; }
.tier-badge--preferred{ background:transparent; color:var(--gold-deep); padding-inline:.2em; }
.tier-badge--trusted{ background:#f4dcae; color:#8a5e1d; box-shadow:inset 0 0 0 1px #e0bb7e; }
.tier-badge--trusted_plus{ background:linear-gradient(135deg,#f3c87e,#e7ab6a); color:#5a3a12; box-shadow:0 1px 6px -1px rgba(207,143,69,.55); }
.tier-badge--star_elite{ background:linear-gradient(135deg,#f1b85f,#dd9128); color:#4a2e08; box-shadow:0 2px 12px -2px rgba(221,145,40,.7); }
.tier-badge--diamond{ background:linear-gradient(135deg,#2e3a6b,#46578f 55%,#6f8fc4); color:#fff; box-shadow:0 2px 14px -3px rgba(70,87,143,.7); }
.tier-badge--diamond .tier-badge__glyph{ filter:drop-shadow(0 0 3px rgba(255,255,255,.6)); }
.tier-badge--star_elite::after, .tier-badge--diamond::after{
  content:""; position:absolute; top:0; left:0; width:45%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:translateX(-130%); animation:tier-sheen 5.5s ease-in-out infinite;
}
@keyframes tier-sheen{ 0%{transform:translateX(-130%)} 55%,100%{transform:translateX(260%)} }
@media (prefers-reduced-motion: reduce){ .tier-badge::after, .rephero__badge::after{ animation:none; display:none; } }
.tier-badge--mini .tier-badge__label{ display:none; }

/* --- avatar tier ring (ambient, everywhere an avatar shows) --- */
.tier-ring--preferred{ box-shadow:0 0 0 2px #f0d6a8; }
.tier-ring--trusted{ box-shadow:0 0 0 2px var(--gold-deep); }
.tier-ring--trusted_plus{ box-shadow:0 0 0 2px var(--gold-deep),0 0 0 4px var(--paper),0 0 0 6px var(--gold-deep); }
.tier-ring--star_elite{ box-shadow:0 0 0 2px #dd9128,0 0 0 6px rgba(221,145,40,.28); }
.tier-ring--diamond{ box-shadow:0 0 0 2px #6f8fc4,0 0 0 6px rgba(111,143,196,.32); }

/* --- featured "pack pillar" / owner's-circle posts --- */
.post.post--pillar{ border:2px solid var(--gold-deep); box-shadow:0 10px 26px -18px rgba(207,143,69,.9); }
.post.post--owner{ border:1.5px solid #6f8fc4; box-shadow:0 10px 26px -18px rgba(70,87,143,.8); }
.post__pillar{ display:inline-flex; align-items:center; gap:5px; margin-left:auto; font-size:.66rem; font-weight:800; padding:.25em .7em; border-radius:999px; background:linear-gradient(120deg,#cf8f45,#e7ab6a); color:#fff; white-space:nowrap; }
.post__pillar--owner{ background:linear-gradient(120deg,#46578f,#6f8fc4); }

/* --- portal "Your status" hero --- */
.rephero{ position:relative; border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.rephero__strip{ height:4px; width:100%; background:var(--rainbow); opacity:0; }
.rephero__in{ display:flex; align-items:center; gap:1rem; padding:1.1rem 1.2rem; background:linear-gradient(135deg,var(--paper),var(--cream)); }
.rephero__badge{ flex:0 0 auto; width:56px; height:56px; border-radius:15px; display:grid; place-items:center; font-size:1.6rem; font-weight:800; background:var(--gold-soft); color:var(--gold-deep); box-shadow:inset 0 0 0 1px var(--line-strong); position:relative; overflow:hidden; }
.rephero__title{ font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:1.15rem; color:var(--ink); line-height:1.15; }
.rephero__honor{ color:var(--gold-deep); font-size:.85rem; font-weight:800; margin-top:.1rem; }
.rephero__meta{ color:var(--ink-soft); font-size:.84rem; margin-top:.35rem; }
.rephero__bar{ height:7px; border-radius:999px; background:rgba(23,29,37,.1); overflow:hidden; margin-top:.45rem; max-width:340px; }
.rephero__fill{ height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-deep)); border-radius:999px; }
.rephero--trusted_plus .rephero__in{ background:linear-gradient(135deg,#fbedd2,#f5dcae); }
.rephero--trusted_plus .rephero__badge{ background:linear-gradient(135deg,#f3c87e,#e7ab6a); color:#5a3a12; }
.rephero--star_elite .rephero__in{ background:linear-gradient(135deg,#fae3bd,#f0c074); }
.rephero--star_elite .rephero__badge{ background:linear-gradient(135deg,#f1b85f,#dd9128); color:#4a2e08; box-shadow:0 2px 14px -3px rgba(221,145,40,.7); }
.rephero--diamond .rephero__strip{ opacity:1; }
.rephero--diamond .rephero__in{ background:linear-gradient(135deg,#2e3a6b,#46578f 55%,#6f8fc4); color:#fff; }
.rephero--diamond .rephero__title{ color:#fff; }
.rephero--diamond .rephero__honor{ color:rgba(255,255,255,.9); letter-spacing:.1em; text-transform:uppercase; font-size:.72rem; }
.rephero--diamond .rephero__meta{ color:rgba(255,255,255,.85); }
.rephero--diamond .rephero__bar{ background:rgba(255,255,255,.25); }
.rephero--diamond .rephero__fill{ background:rgba(255,255,255,.85); }
.rephero--diamond .rephero__badge{ background:rgba(255,255,255,.16); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); }
.rephero--diamond .rephero__badge::after{ content:""; position:absolute; top:0; left:0; width:45%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); transform:translateX(-130%); animation:tier-sheen 5.5s ease-in-out infinite; }

/* Admin reputation panel */
.reppanel{ display:grid; gap:.75rem; }
.reppanel__row{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.reppanel__dials{ display:flex; gap:1.5rem; flex-wrap:wrap; }
.reppanel__dial b{ display:block; font-size:1.35rem; color:var(--ink); line-height:1.1; }
.reppanel__dial small{ color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; font-size:.68rem; }
.reppanel__events{ max-height:230px; overflow:auto; border:1px solid var(--line); border-radius:12px; }
.reppanel__ev{ display:flex; justify-content:space-between; gap:.5rem; padding:.4rem .6rem; border-bottom:1px solid var(--line); font-size:.82rem; }
.reppanel__ev:last-child{ border-bottom:0; }
.reppanel__ev.is-forgiven{ opacity:.5; text-decoration:line-through; }
.reppanel__ev small{ color:var(--ink-faint); }
.reppanel__pos{ color:#27695a; } .reppanel__neg{ color:#b4451f; }

/* ============================================================================
   Tier surfacing on transactional pages (v1.7.0)
   Booking-flow welcome ribbon + pet-page household weave. Trusted Plus and up;
   Diamond keeps the cool jewel break. Purely additive — booking is never gated.
   ========================================================================== */
.bookrib{
  display:flex; align-items:center; gap:.85rem; position:relative; overflow:hidden;
  padding:.85rem 1.1rem; margin-bottom:1.1rem; border-radius:16px;
  background:linear-gradient(135deg,#f3c87e,#e7ab6a); color:#5a3a12;
  box-shadow:0 8px 22px -16px rgba(207,143,69,.9);
}
.bookrib__emblem{
  flex:0 0 auto; width:42px; height:42px; border-radius:11px; display:grid; place-items:center;
  font-size:1.2rem; letter-spacing:-.06em; background:rgba(255,255,255,.35); box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
}
.bookrib__text b{ font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:1.02rem; }
.bookrib__sub{ font-size:.82rem; font-weight:800; opacity:.92; margin-top:.05rem; }
.bookrib__strip{ position:absolute; left:0; bottom:0; height:3px; width:100%; background:var(--rainbow); opacity:0; }
.bookrib--star_elite{ background:linear-gradient(135deg,#f1b85f,#dd9128); color:#4a2e08; }
.bookrib--diamond{ background:linear-gradient(135deg,#2e3a6b,#46578f 55%,#6f8fc4); color:#fff; }
.bookrib--diamond .bookrib__emblem{ background:rgba(255,255,255,.18); box-shadow:inset 0 0 0 1px rgba(255,255,255,.4); }
.bookrib--diamond .bookrib__strip{ opacity:1; }
.bookrib--diamond::after{
  content:""; position:absolute; top:0; left:0; width:40%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  transform:translateX(-130%); animation:tier-sheen 5.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){ .bookrib--diamond::after{ animation:none; display:none; } }

/* pet-page household weave */
.pet-hero--tier{ position:relative; }
.petrib{
  display:inline-flex; align-items:center; white-space:nowrap;
  font-size:.72rem; font-weight:800; letter-spacing:.01em; padding:.4em .85em;
  border-radius:999px; margin-bottom:var(--space-s); max-width:100%; overflow:hidden; text-overflow:ellipsis;
  background:linear-gradient(135deg,#f3c87e,#e7ab6a); color:#5a3a12;
}
.petrib--star_elite{ background:linear-gradient(135deg,#f1b85f,#dd9128); color:#4a2e08; }
.petrib--diamond{ background:linear-gradient(135deg,#2e3a6b,#46578f 55%,#6f8fc4); color:#fff; }
.pet-honor{ margin-top:.4rem; font-size:.82rem; font-weight:800; color:var(--gold-deep); }

/* ===== Tier status popover ===== */
.tier-pop-anchor { cursor: pointer; }
.tierpop {
  position: fixed; z-index: 60; width: 300px; max-width: calc(100vw - 20px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-m, 0 12px 32px rgba(0,0,0,.16)); padding: 16px;
  font-size: .9rem; animation: tierpop-in .12s ease-out;
}
@keyframes tierpop-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.tierpop--sheet { left: 10px; right: 10px; bottom: 10px; top: auto !important; width: auto; max-width: none; }
.tierpop__x { position: absolute; top: 8px; right: 10px; border: 0; background: transparent; font-size: 1.3rem; line-height: 1; color: var(--ink-faint); cursor: pointer; }
.tierpop__hd { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding-right: 18px; }
.tierpop__glyph { font-size: 1.25rem; color: var(--gold-deep); min-width: 1.6em; text-align: center; letter-spacing: -1px; }
.tierpop__tier { font-family: "Fraunces", serif; font-weight: 600; font-size: 1.05rem; line-height: 1.1; }
.tierpop__honor { color: var(--ink-faint); font-size: .78rem; font-style: italic; }
.tierpop__perks { list-style: none; margin: 0 0 10px; padding: 0; }
.tierpop__perks li { position: relative; padding: 3px 0 3px 18px; color: var(--ink-soft); font-size: .84rem; }
.tierpop__perks li::before { content: "\2726"; position: absolute; left: 0; top: 5px; color: var(--gold); font-size: .7rem; }
.tierpop__prog { margin: 0 0 10px; }
.tierpop__progmeta { font-size: .8rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 5px; }
.tierpop__bar { height: 8px; border-radius: 999px; background: var(--cream); overflow: hidden; }
.tierpop__bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--tang)); }
.tierpop__what { font-size: .8rem; color: var(--ink-soft); margin: 0 0 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.tierpop__more { font-weight: 800; font-size: .82rem; color: var(--tang-deep); text-decoration: none; }
.tierpop__more:hover { text-decoration: underline; }

/* ===== PWA install affordance ===== */
.install-banner {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 70;
  display: flex; align-items: center; gap: 10px;
  background: var(--ink); color: #fff; border-radius: var(--radius);
  padding: 12px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.25);
  font-size: .88rem; animation: tierpop-in .15s ease-out;
}
.install-banner__txt { flex: 1; line-height: 1.3; }
.install-banner .btn { flex: none; }
.install-banner__x { border: 0; background: transparent; color: #fff; opacity: .7; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.install-banner__x:hover { opacity: 1; }
.install-foot { margin-left: auto; }
@media (min-width: 720px) { .install-banner { left: auto; right: 16px; bottom: 16px; max-width: 420px; } }

/* Push opt-in: compact "alerts on" chip (enabled state tucks the controls away) */
.pcard--mini { padding: 9px 12px !important; }
.pushmini { display: flex; align-items: center; gap: .55rem; font-size: .86rem; font-weight: 700; color: var(--ink-soft); }
.pushmini__dot { width: 9px; height: 9px; border-radius: 50%; background: #2faa6a;
  box-shadow: 0 0 0 3px rgba(47,170,106,.16); flex: 0 0 auto; }
.pushmini__label { flex: 1 1 auto; }
.pushmini__more { background: none; border: 0; color: var(--gold-deep); font: inherit; font-size: .8rem;
  font-weight: 800; cursor: pointer; padding: 2px 8px; border-radius: var(--radius-pill); }
.pushmini__more:hover { background: var(--gold-soft); }
.pushmini__menu { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 9px; }

/* Community photo lightbox (shared: portal, admin, gallery) */
.post__media--zoom { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center;
  background: rgba(10,12,16,.9); opacity: 0; transition: opacity .2s ease; padding: 24px; }
.lightbox.is-open { opacity: 1; }
.lightbox__img { max-width: 96vw; max-height: 92vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.5); cursor: zoom-out; }
.lightbox__x { position: absolute; top: 16px; right: 18px; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff; border: 0; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.lightbox__x:hover { background: rgba(255,255,255,.26); }