/* Pindifferent: like Pinterest, but at peace with it. White, airy, rounded. */
* { box-sizing:border-box; }
html,body { margin:0; background:#fff; color:#111;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; }

/* ── header ── */
#top { position:sticky; top:0; z-index:20; background:#fff;
  display:flex; align-items:center; gap:10px; padding:10px 14px; }
#logo { width:44px; height:44px; border-radius:50%; background:#e60023; color:#fff;
  font:400 27px/42px 'Parisienne','Snell Roundhand',cursive; text-align:center;
  flex-shrink:0; cursor:pointer; padding-right:2px; }
.pills { display:flex; gap:4px; }
.pill { padding:12px 16px; border-radius:24px; font-weight:600; font-size:15px; cursor:pointer; }
.pill.on { background:#111; color:#fff; }
#search-wrap { flex:1; }
#search { width:100%; height:48px; border:none; border-radius:24px; background:#efefef;
  padding:0 20px; font-size:15px; outline:none; }
#search:focus { box-shadow:0 0 0 4px rgba(0,116,232,.3); }
.right { display:flex; align-items:center; gap:6px; }
.ic { width:44px; height:44px; border-radius:50%; text-align:center; line-height:44px;
  font-size:20px; color:#5f5f5f; cursor:pointer; }
.ic:hover { background:#efefef; }
.ava { width:38px; height:38px; border-radius:50%; background:#c7d8c2; color:#274127;
  font:700 15px/38px sans-serif; text-align:center; cursor:pointer; }

/* ── the masonry feed (JS distributes cards into flex columns) ── */
#grid { display:flex; gap:16px; align-items:flex-start;
  max-width:1560px; margin:0 auto; padding:10px 16px 80px; }
.col { flex:1; min-width:0; }
.pin { margin-bottom:18px; cursor:zoom-in;
  opacity:0; transform:translateY(14px);
  transition:opacity .5s ease, transform .5s ease; }
.pin.in { opacity:1; transform:none; }
.ph { position:relative; border-radius:16px; overflow:hidden; background:#f1f1f1; }
.ph img { width:100%; height:100%; object-fit:cover; display:block; }
.save { position:absolute; top:10px; right:10px; z-index:2;
  background:#e60023; color:#fff; border:none; border-radius:24px;
  padding:10px 16px; font:700 14px sans-serif; cursor:pointer;
  opacity:0; transition:opacity .15s; }
.pin:hover .save { opacity:1; }
.save.done { background:#111; }
.pin.show-save .save { opacity:1; } /* the tour's Save step: visible, in its usual corner */
.pin h3 { font-size:14px; font-weight:600; margin:8px 6px 2px; line-height:1.3; }
.pin .meta { font-size:12px; color:#767676; margin:0 6px; }

#sentinel { height:2px; }

/* ── onboarding: veil, spotlight, tooltip ── */
#veil { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:60; }
.spot { position:relative; z-index:70; }
header .spot { z-index:70; } /* header targets sit above the veil too */
#tip { position:fixed; z-index:80; width:min(340px, calc(100vw - 32px));
  max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); overflow-y:auto;
  background:#fff; border-radius:16px; box-shadow:0 10px 40px rgba(0,0,0,.35);
  padding:16px 18px 14px; }
#tip.center { left:50% !important; top:50% !important;
  transform:translate(-50%,-50%) !important; width:min(400px, calc(100vw - 32px)); }
.tip-n { font-size:11px; font-weight:700; letter-spacing:.6px; color:#e60023;
  text-transform:uppercase; margin-bottom:6px; }
.tip-text { margin:0 0 14px; font-size:15px; line-height:1.5; color:#111; }
.tip-row { display:flex; align-items:center; justify-content:flex-end; }
#tip-next { background:#e60023; color:#fff; border:none; border-radius:24px;
  padding:10px 22px; font:700 14px sans-serif; cursor:pointer; }
#tip-next:hover { filter:brightness(1.08); }

/* ── toast ── */
#toast { position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  z-index:90; background:#111; color:#fff; border-radius:24px;
  padding:12px 22px; font-size:14px; box-shadow:0 6px 20px rgba(0,0,0,.3);
  max-width:calc(100vw - 40px); text-align:center; }

@media (max-width:760px){
  .pills, .ic { display:none; }
  #grid { gap:10px; padding:8px 10px 60px; }
  .pin { margin-bottom:12px; }
  .save { opacity:1; padding:8px 12px; font-size:12px; } /* no hover on touch */
}

@media (prefers-reduced-motion: reduce){
  .pin { transition:none; }
}