/* =========================================================================
   DECANT — Experiences (social feed + reviews) layer.
   Builds on tokens.css + web.css. All scoped under .dcweb.
   ========================================================================= */

/* ── page header: tabs + tools ─────────────────────────────────────────── */
.dcweb .xp-tabs { display:flex; gap:4px; }
.dcweb .xp-tab {
  all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  font-size:14.5px; font-weight:700; color:var(--txt-3); padding:9px 16px; border-radius:999px;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.dcweb .xp-tab:hover { color:var(--txt-1); }
.dcweb .xp-tab.on { background:var(--accent-soft); color:var(--accent); }
.dcweb .xp-tab .cnt { font-size:11.5px; font-weight:700; color:var(--txt-3); }
.dcweb .xp-tab.on .cnt { color:var(--accent); }

.dcweb .xp-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }

/* ── feed layout ───────────────────────────────────────────────────────── */
.dcweb .feed.single { max-width:640px; margin:0 auto; display:flex; flex-direction:column; gap:18px; }
.dcweb .feed.masonry { columns:2; column-gap:18px; }
.dcweb .feed.masonry > * { break-inside:avoid; margin-bottom:18px; display:block; }
@container (max-width: 820px) { .dcweb .feed.masonry { columns:1; } }

/* ── composer prompt ───────────────────────────────────────────────────── */
.dcweb .composer {
  display:flex; align-items:center; gap:13px; padding:15px 18px;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius-4);
  box-shadow:var(--shadow-1); cursor:pointer; transition: box-shadow var(--dur-2) var(--ease-out);
}
.dcweb .composer:hover { box-shadow:var(--shadow-2); }
.dcweb .composer .ph {
  flex:1; color:var(--txt-3); font-size:14px; background:var(--page);
  border:1px solid var(--line); border-radius:999px; padding:11px 16px;
}

/* ── avatar ────────────────────────────────────────────────────────────── */
.dcweb .avatar {
  border-radius:999px; color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; flex-shrink:0; letter-spacing:0.02em;
}

/* ── post card ─────────────────────────────────────────────────────────── */
.dcweb .post {
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius-4);
  box-shadow:var(--shadow-1); overflow:hidden;
}
.dcweb .post-head { display:flex; align-items:center; gap:12px; padding:16px 18px 13px; }
.dcweb .post-head .nm { font-size:14.5px; font-weight:700; color:var(--txt-1); line-height:1.2; }
.dcweb .post-head .mt { font-size:12px; color:var(--txt-3); margin-top:2px; }
.dcweb .iconbtn {
  all:unset; cursor:pointer; width:34px; height:34px; border-radius:999px; color:var(--txt-3);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.dcweb .iconbtn:hover { background:var(--chip); color:var(--txt-1); }
.dcweb .iconbtn.on { color:var(--accent); }

/* ── photo cover (tinted by varietal + scene) ──────────────────────────── */
.dcweb .scene { position:relative; width:100%; overflow:hidden; isolation:isolate; }
.dcweb .scene .motif { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.dcweb .scene .grain { position:absolute; inset:0; background:
  radial-gradient(120% 90% at 18% 12%, rgba(255,255,255,0.16), transparent 55%),
  radial-gradient(140% 120% at 100% 100%, rgba(0,0,0,0.42), transparent 60%); }
.dcweb .scene .cap {
  position:absolute; left:0; right:0; bottom:0; padding:30px 18px 14px; color:#fff;
  background:linear-gradient(to top, rgba(0,0,0,0.55), transparent);
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
}
.dcweb .scene .cap .wn { font-size:16px; font-weight:700; letter-spacing:-0.01em; line-height:1.2; }
.dcweb .scene .cap .wsub { font-size:12px; opacity:0.82; margin-top:3px; }
.dcweb .scene .scenetag {
  position:absolute; top:13px; left:14px; display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:600; color:#fff; background:rgba(0,0,0,0.34);
  backdrop-filter:blur(3px); padding:5px 10px; border-radius:999px; text-transform:capitalize;
}
.dcweb .scene .scorebadge {
  position:absolute; top:12px; right:13px; width:46px; height:46px; border-radius:999px;
  background:rgba(0,0,0,0.4); backdrop-filter:blur(3px); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1;
}
.dcweb .scene .scorebadge .s { font-size:18px; font-weight:900; }
.dcweb .scene .scorebadge .l { font-size:7.5px; letter-spacing:0.12em; opacity:0.8; margin-top:2px; }

/* ── post body ─────────────────────────────────────────────────────────── */
.dcweb .post-body { padding:15px 18px 4px; }
.dcweb .post-caption { font-size:14.5px; line-height:1.55; color:var(--txt-1); text-wrap:pretty; }
.dcweb .post-note {
  font-size:13.5px; line-height:1.55; color:var(--txt-2); font-style:italic;
  border-left:2px solid var(--line-strong); padding-left:13px; margin-top:13px;
}
.dcweb .metaline { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:13px; }
.dcweb .bottlechip {
  all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:6px 13px 6px 8px;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.dcweb .bottlechip:hover { border-color:var(--accent); background:var(--accent-soft); }
.dcweb .bottlechip .bn { font-size:12.5px; font-weight:700; color:var(--txt-1); }
.dcweb .pairing { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--txt-2); }

/* ── action bar ────────────────────────────────────────────────────────── */
.dcweb .post-actions { display:flex; align-items:center; gap:4px; padding:12px 12px; margin-top:11px; border-top:1px solid var(--line); }
.dcweb .act {
  all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:600; color:var(--txt-2); padding:7px 12px; border-radius:999px;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.dcweb .act:hover { background:var(--chip); color:var(--txt-1); }
.dcweb .act.liked { color:var(--accent); }
.dcweb .act svg { transition: transform var(--dur-1) var(--ease-out); }
.dcweb .act.liked svg { transform:scale(1.08); }

/* ── comments ──────────────────────────────────────────────────────────── */
.dcweb .comments { padding:4px 18px 16px; display:flex; flex-direction:column; gap:13px; }
.dcweb .comment { display:flex; gap:10px; }
.dcweb .comment .bubble { background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:9px 13px; min-width:0; }
.dcweb .comment .cby { font-size:12.5px; font-weight:700; color:var(--txt-1); }
.dcweb .comment .ct { font-size:13px; line-height:1.45; color:var(--txt-2); margin-top:2px; text-wrap:pretty; }
.dcweb .comment .cw { font-size:11px; color:var(--txt-3); margin-top:5px; }
.dcweb .comment-input { display:flex; align-items:center; gap:10px; padding:2px 18px 16px; }
.dcweb .comment-input input {
  all:unset; flex:1; box-sizing:border-box; background:var(--page); border:1px solid var(--line);
  border-radius:999px; padding:10px 15px; font-size:13.5px; color:var(--txt-1);
}
.dcweb .comment-input input:focus { border-color:var(--accent); }
.dcweb .comment-input input::placeholder { color:var(--txt-3); }
.dcweb .csend { all:unset; cursor:pointer; font-size:13px; font-weight:700; color:var(--accent); padding:8px 10px; }
.dcweb .csend[disabled] { color:var(--txt-3); cursor:default; }

/* ── reviews ───────────────────────────────────────────────────────────── */
.dcweb .rev-list { display:flex; flex-direction:column; gap:16px; max-width:760px; }
.dcweb .review { background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius-4); box-shadow:var(--shadow-1); overflow:hidden; }
.dcweb .review .topbar { height:4px; background:var(--tap-gradient-bar); }
.dcweb .review-in { padding:20px 22px; }
.dcweb .rev-head { display:flex; align-items:flex-start; gap:16px; }
.dcweb .rev-score {
  width:64px; flex-shrink:0; text-align:center; border-right:1px solid var(--line); padding-right:16px;
}
.dcweb .rev-score .n { font-size:32px; font-weight:900; color:var(--accent); line-height:1; letter-spacing:-0.02em; }
.dcweb .rev-score .l { font-size:8.5px; letter-spacing:0.14em; color:var(--txt-3); margin-top:5px; }
.dcweb .rev-attrs { display:flex; flex-direction:column; gap:11px; margin-top:18px; }
.dcweb .rev-attr { display:grid; grid-template-columns:74px 1fr; gap:14px; align-items:baseline; }
.dcweb .rev-attr .k { font-size:10.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); }
.dcweb .rev-attr .v { font-size:13.5px; line-height:1.5; color:var(--txt-2); text-wrap:pretty; }
.dcweb .rev-verdict { font-size:14.5px; line-height:1.55; color:var(--txt-1); font-weight:500; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); text-wrap:pretty; }
.dcweb .rev-foot { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:16px; }

/* empty state */
.dcweb .xp-empty { text-align:center; color:var(--txt-3); padding:60px 20px; font-size:14px; }

/* =========================================================================
   EXPERIENCES — wine diary timeline (dev schema). Reuses tokens + web.css.
   ========================================================================= */

/* friendly empty state */
.dcweb .xp-empty-state {
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:10px; padding:52px 28px; max-width:480px; margin:24px auto 0;
}
.dcweb .xp-empty-glyph {
  width:64px; height:64px; border-radius:999px; background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center; margin-bottom:4px;
}
.dcweb .xp-empty-title { font-size:18px; font-weight:800; letterSpacing:-0.01em; color:var(--txt-1); }
.dcweb .xp-empty-sub { font-size:13.5px; line-height:1.55; color:var(--txt-3); max-width:340px; }

/* timeline grid of cards */
.dcweb .xp-timeline {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:18px;
}

.dcweb .xp-card {
  all:unset; cursor:pointer; display:flex; flex-direction:column; box-sizing:border-box;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius-4);
  box-shadow:var(--shadow-1); overflow:hidden;
  transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.dcweb .xp-card:hover { box-shadow:var(--shadow-2); transform:translateY(-2px); }
.dcweb .xp-card-cover {
  height:150px; background-size:cover; background-position:center; background-color:var(--chip);
}
.dcweb .xp-card-body { padding:16px 18px 14px; display:flex; flex-direction:column; gap:6px; }
.dcweb .xp-card-date { font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--txt-3); }
.dcweb .xp-card-title { font-size:17px; font-weight:800; letter-spacing:-0.01em; color:var(--txt-1); line-height:1.25; }
.dcweb .xp-card-meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:12.5px; color:var(--txt-2); }
.dcweb .xp-meta-item { display:inline-flex; align-items:center; gap:5px; }
.dcweb .xp-card-foot {
  display:flex; align-items:center; gap:6px; margin-top:4px; padding-top:12px;
  border-top:1px solid var(--line); font-size:12px; color:var(--txt-2); font-weight:600;
}

/* wine chips */
.dcweb .xp-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.dcweb .xp-chip {
  font-size:11.5px; font-weight:600; color:var(--txt-2);
  background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:4px 10px;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dcweb .xp-chip-more { color:var(--txt-3); }

/* detail — section heads */
.dcweb .xp-section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }

/* detail — photo gallery */
.dcweb .xp-gallery {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px;
}
.dcweb .xp-photo {
  position:relative; border-radius:var(--radius-3); overflow:hidden; aspect-ratio:4 / 3;
  background:var(--chip); border:1px solid var(--line);
}
.dcweb .xp-photo.is-cover { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.dcweb .xp-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.dcweb .xp-photo-tag {
  position:absolute; top:8px; left:8px; font-size:10px; font-weight:700; letter-spacing:0.06em;
  text-transform:uppercase; color:#fff; background:var(--accent); padding:3px 8px; border-radius:999px;
}
.dcweb .xp-photo-actions {
  position:absolute; inset:auto 0 0 0; display:flex; gap:6px; padding:8px;
  background:linear-gradient(to top, rgba(0,0,0,0.6), transparent);
  opacity:0; transition: opacity var(--dur-1) var(--ease-out);
}
.dcweb .xp-photo:hover .xp-photo-actions { opacity:1; }
.dcweb .xp-photo-actions button {
  all:unset; cursor:pointer; font-size:11.5px; font-weight:700; color:#fff;
  background:rgba(0,0,0,0.45); backdrop-filter:blur(2px); padding:5px 10px; border-radius:999px;
}
.dcweb .xp-photo-actions button:hover { background:rgba(0,0,0,0.7); }

/* detail — wine rows */
.dcweb .xp-wine-row { display:flex; align-items:center; gap:8px; }
.dcweb .xp-wine-link {
  all:unset; box-sizing:border-box; flex:1; display:flex; align-items:center; gap:11px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-3); padding:11px 14px;
}
.dcweb button.xp-wine-link { cursor:pointer; transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out); }
.dcweb button.xp-wine-link:hover { border-color:var(--accent); background:var(--accent-soft); }
.dcweb .xp-wine-static { cursor:default; }
.dcweb .xp-wine-name { flex:1; min-width:0; font-size:13.5px; font-weight:700; color:var(--txt-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dcweb .xp-wine-go { color:var(--txt-3); font-size:16px; }
.dcweb .xp-row-x {
  all:unset; cursor:pointer; width:30px; height:30px; border-radius:999px; flex-shrink:0;
  background:var(--chip); color:var(--txt-3); display:flex; align-items:center; justify-content:center; font-size:17px;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.dcweb .xp-row-x:hover { background:var(--accent-soft); color:var(--accent); }

/* ── Experiences — photo-forward social feed (WebExperienceCard) ───────────── */
.dcweb .xpf-feed{ max-width:560px; margin:0 auto; width:100%; display:flex; flex-direction:column; gap:24px; }
@media (max-width:600px){ .dcweb .xpf-feed{ max-width:none; } }

.dcweb .xpf-post{ background:var(--surface); border:1px solid var(--line); border-radius:16px;
  overflow:hidden; box-shadow:0 1px 2px rgba(20,16,10,.04), 0 8px 22px -12px rgba(20,16,10,.16); }

.dcweb .xpf-head{ display:flex; align-items:center; gap:11px; padding:12px 14px; }
.dcweb .xpf-av{ flex:0 0 auto; width:42px; height:42px; border-radius:50%; padding:2px;
  background:var(--tap-gradient, linear-gradient(135deg,#F15A29,#DF108F 38%,#9D4B9C 68%,#5E71B6));
  display:grid; place-items:center; }
.dcweb .xpf-face{ width:100%; height:100%; border-radius:50%; border:2px solid var(--surface);
  background:var(--accent); color:#fff; display:grid; place-items:center; font-size:11px; font-weight:700; letter-spacing:.03em; }
.dcweb .xpf-who{ min-width:0; flex:1; }
.dcweb .xpf-nm{ font-size:14px; font-weight:700; color:var(--txt-1); }
.dcweb .xpf-sub{ font-size:12px; color:var(--txt-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dcweb .xpf-more{ all:unset; cursor:pointer; margin-left:auto; color:var(--txt-3);
  width:34px; height:34px; display:grid; place-items:center; border-radius:50%; }
.dcweb .xpf-more:hover{ background:var(--chip, rgba(20,16,10,.05)); color:var(--txt-1); }

.dcweb .xpf-photo{ display:block; position:relative; width:100%;
  aspect-ratio:4/5; overflow:hidden; background:var(--page); }
.dcweb .xpf-scene{ position:absolute; inset:0; background-size:cover; background-position:center; }
.dcweb .xpf-scenefb{ position:absolute; inset:0; height:auto; }
.dcweb .xpf-vig{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 16%, transparent 42%, rgba(18,11,7,.34) 100%); }
.dcweb .xpf-loc{ position:absolute; left:13px; bottom:13px; display:inline-flex; align-items:center; gap:6px;
  background:rgba(18,12,8,.46); color:#fff; backdrop-filter:blur(6px);
  padding:6px 11px; border-radius:999px; font-size:11.5px; font-weight:600; }
.dcweb .xpf-count{ position:absolute; right:13px; top:13px; background:rgba(18,12,8,.5); color:#fff;
  padding:4px 10px; border-radius:999px; font-size:11.5px; font-weight:600; backdrop-filter:blur(6px); }
.dcweb .xpf-dots{ position:absolute; left:0; right:0; bottom:12px; display:flex; gap:6px; justify-content:center; z-index:4; }
.dcweb .xpf-dots i{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.5); cursor:pointer; transition:width .14s ease, height .14s ease, background .14s ease; }
.dcweb .xpf-dots i.on{ background:#fff; width:7px; height:7px; }

/* swipe/scroll photo gallery (PhotoStrip) — feed card + detail viewer */
.dcweb .xpf-strip{ position:absolute; inset:0; display:flex; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.dcweb .xpf-strip::-webkit-scrollbar{ display:none; }
.dcweb .xpf-slide{ position:relative; flex:0 0 100%; width:100%; height:100%; scroll-snap-align:center; }
.dcweb .xpf-scene-btn{ all:unset; display:block; width:100%; height:100%; cursor:pointer; }
.dcweb .xpf-arrow{ all:unset; box-sizing:border-box; cursor:pointer; position:absolute; top:50%; z-index:4;
  transform:translateY(-50%); width:34px; height:34px; display:grid; place-items:center; border-radius:50%;
  background:rgba(18,12,8,.5); color:#fff; backdrop-filter:blur(6px); font-size:22px; line-height:1;
  transition:background .14s ease, opacity .14s ease; }
.dcweb .xpf-arrow:hover{ background:rgba(18,12,8,.74); }
.dcweb .xpf-arrow[disabled]{ opacity:0; pointer-events:none; }
.dcweb .xpf-arrow-l{ left:10px; padding-right:2px; }
.dcweb .xpf-arrow-r{ right:10px; padding-left:2px; }

/* detail — single-photo viewer that scrolls/clicks through the gallery */
.dcweb .xp-viewer{ position:relative; aspect-ratio:4 / 3; border-radius:var(--radius-3);
  overflow:hidden; background:var(--chip); border:1px solid var(--line); }
.dcweb .xp-vphoto{ position:absolute; inset:0; }
.dcweb .xp-vphoto img{ width:100%; height:100%; object-fit:contain; display:block; background:#000; }
.dcweb .xp-viewer .xp-photo-actions{ opacity:1; padding:10px 12px; }

.dcweb .xpf-acts{ display:flex; align-items:center; gap:4px; padding:9px 10px 2px; }
.dcweb .xpf-act{ all:unset; cursor:pointer; width:38px; height:38px; display:grid; place-items:center;
  border-radius:50%; color:var(--txt-1); transition:transform .14s ease, background .14s ease; }
.dcweb .xpf-act:hover{ transform:scale(1.08); background:var(--chip, rgba(20,16,10,.04)); }
.dcweb .xpf-save{ margin-left:auto; }

.dcweb .xpf-body{ padding:2px 16px 16px; }
.dcweb .xpf-caption{ font-size:14.5px; line-height:1.55; color:var(--txt-2); }
.dcweb .xpf-title{ display:block; font-size:19px; line-height:1.25; font-weight:600; color:var(--txt-1); margin-bottom:4px;
  font-family:"Hoefler Text","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; }
.dcweb .xpf-notes{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.dcweb .xpf-ppl{ color:var(--accent); font-weight:600; }
.dcweb .xpf-wines{ margin-top:13px; }
.dcweb .xpf-wines-eyebrow{ display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.16em;
  color:var(--txt-3); font-weight:700; margin-bottom:8px; }
.dcweb .xpf-wine-wrap{ display:flex; flex-wrap:wrap; gap:8px; }
.dcweb .xpf-wine{ display:inline-flex; align-items:center; max-width:100%; padding:6px 12px;
  border:1px solid var(--line); border-radius:999px; background:var(--page); cursor:pointer;
  font-family:"Hoefler Text","Palatino Linotype",Palatino,Georgia,serif; font-size:13px; font-weight:600; color:var(--txt-1);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:border-color .14s ease; }
.dcweb .xpf-wine:hover{ border-color:var(--accent); }
.dcweb .xpf-wine-more{ cursor:default; color:var(--txt-3); }
.dcweb .xpf-view{ all:unset; cursor:pointer; display:inline-block; margin-top:13px; font-size:13.5px; color:var(--txt-3); }
.dcweb .xpf-view:hover{ color:var(--accent); }
.dcweb .xpf-ts{ font-size:10.5px; text-transform:uppercase; letter-spacing:.13em; color:var(--txt-3); margin-top:11px; }

/* ── Experience tagging — friend tag chips + wine pins on photos ──────────── */
.dcweb .xp-tag-chip{ display:inline-flex; align-items:center; gap:7px; padding:5px 11px 5px 6px;
  border:1px solid var(--line); border-radius:999px; background:var(--page);
  font-size:13px; font-weight:600; color:var(--txt-1); }
.dcweb .xp-tag-face{ width:22px; height:22px; border-radius:50%; background:var(--chip); color:var(--txt-2);
  display:inline-flex; align-items:center; justify-content:center; font-size:9px; font-weight:800;
  overflow:hidden; flex-shrink:0; }
.dcweb .xp-tag-face img{ width:100%; height:100%; object-fit:cover; display:block; }
.dcweb .xp-tag-x{ all:unset; cursor:pointer; color:var(--txt-3); font-size:14px; line-height:1; padding:0 2px; }
.dcweb .xp-tag-x:hover{ color:var(--accent); }

.dcweb .xp-vphoto.is-taggable{ cursor:crosshair; }
.dcweb .xp-pin{ position:absolute; z-index:5; transform:translate(-50%, -50%); }
.dcweb .xp-pin-dot{ display:block; width:15px; height:15px; border-radius:50%; background:#fff;
  border:3px solid rgba(18,12,8,.78); box-shadow:0 1px 6px rgba(0,0,0,.45); cursor:pointer; }
.dcweb .xp-pin-label{ position:absolute; top:calc(100% + 7px); left:50%; transform:translateX(-50%);
  white-space:nowrap; max-width:240px; overflow:hidden; text-overflow:ellipsis;
  background:rgba(18,12,8,.84); color:#fff; font-size:12px; font-weight:600; padding:5px 10px;
  border-radius:8px; opacity:0; pointer-events:none; transition:opacity .14s ease;
  display:inline-flex; gap:7px; align-items:center; backdrop-filter:blur(6px); }
.dcweb .xp-pin:hover .xp-pin-label{ opacity:1; pointer-events:auto; }
/* viewers click the photo to toggle every label on (touch-friendly) */
.dcweb .xp-labels-on .xp-pin-label{ opacity:1; pointer-events:auto; }
/* person tags — accent dot distinguishes people from wine pins */
.dcweb .xp-pin-person .xp-pin-dot{ background:var(--accent); border-color:#fff; }
.dcweb .xp-pin-label button{ all:unset; cursor:pointer; font-size:13px; line-height:1; padding:0 2px; }
.dcweb .xp-pin-label button:hover{ color:var(--accent-2, #F6B25C); }
.dcweb .xp-pin-form{ position:absolute; z-index:6; transform:translate(-50%, 12px);
  background:var(--surface-1, #fff); border:1px solid var(--line); border-radius:10px; padding:9px 10px;
  display:flex; gap:8px; align-items:center; box-shadow:0 12px 30px rgba(0,0,0,.28); }
.dcweb .xp-pin-form select{ max-width:220px; border:1px solid var(--line); border-radius:8px;
  padding:7px 9px; font-size:13px; background:var(--surface-2, var(--page)); color:var(--txt-1); }

/* click-to-tag popover — person/wine chooser at the clicked spot */
.dcweb .xp-tagform{ flex-direction:column; align-items:stretch; gap:8px; width:280px; max-width:86%; }
.dcweb .xp-tagform-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.dcweb .xp-tagform-list{ max-height:180px; overflow-y:auto; display:flex; flex-direction:column; }
.dcweb .xp-tagform-row{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center;
  gap:9px; padding:7px 6px; border-radius:8px; }
.dcweb .xp-tagform-row:hover{ background:var(--chip, rgba(20,16,10,.05)); }
.dcweb .xp-tagform-row[disabled]{ cursor:default; opacity:.55; }
.dcweb .xp-tagform-name{ flex:1; min-width:0; font-size:13.5px; font-weight:600; color:var(--txt-1);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dcweb .xp-tagform-hint{ flex-shrink:0; font-size:11.5px; font-weight:700; color:var(--accent); }
.dcweb .xp-tagform-row[disabled] .xp-tagform-hint{ color:var(--txt-3); }
.dcweb .xp-tagform-note{ font-size:12.5px; color:var(--txt-3); padding:4px 2px; }
.dcweb .xp-tagform-wine{ display:flex; gap:8px; align-items:center; }
.dcweb .xp-tagform-wine select{ flex:1; min-width:0; max-width:none; }

/* ── DETECT-2 — detection-driven tagging affordances on a photo ────────────── */
/* Overlay is click-through (manual tap-to-tag still reaches the photo); only the
   interactive affordances below re-enable pointer events. */
.dcweb .xp-detect{ position:absolute; inset:0; z-index:4; pointer-events:none; }
/* Face box — outlines where a face was located; click to person-tag it. */
.dcweb .xp-detect-face{ all:unset; box-sizing:border-box; position:absolute; cursor:pointer;
  pointer-events:auto; border:2px dashed rgba(255,255,255,.85); border-radius:8px;
  box-shadow:0 0 0 1px rgba(18,12,8,.45); transition:background .14s ease, border-color .14s ease; }
.dcweb .xp-detect-face:hover{ background:rgba(255,255,255,.12); border-color:var(--accent); }
.dcweb .xp-detect-face-hint{ position:absolute; left:50%; bottom:calc(100% + 5px); transform:translateX(-50%);
  white-space:nowrap; background:rgba(18,12,8,.84); color:#fff; font-size:11px; font-weight:700;
  padding:3px 8px; border-radius:7px; opacity:0; pointer-events:none; transition:opacity .14s ease;
  backdrop-filter:blur(6px); }
.dcweb .xp-detect-face:hover .xp-detect-face-hint{ opacity:1; }
/* Chip bar — bottle quick-pin + graceful not-analyzed / nothing-found states. */
.dcweb .xp-detect-bar{ position:absolute; left:0; right:0; bottom:0; display:flex; flex-wrap:wrap; gap:8px;
  justify-content:center; padding:10px 12px; pointer-events:none; }
.dcweb .xp-detect-chip{ all:unset; box-sizing:border-box; pointer-events:auto; display:inline-flex;
  align-items:center; gap:6px; padding:6px 12px; border-radius:999px; cursor:pointer;
  background:rgba(18,12,8,.84); color:#fff; font-size:12.5px; font-weight:700; backdrop-filter:blur(6px);
  box-shadow:0 2px 10px rgba(0,0,0,.35); transition:background .14s ease; }
.dcweb .xp-detect-chip:hover{ background:var(--accent); }
.dcweb .xp-detect-chip.is-muted{ cursor:default; pointer-events:none; background:rgba(18,12,8,.6);
  color:rgba(255,255,255,.82); font-weight:600; box-shadow:none; }

/* ── Experiences — first-run empty state (WebExperiencesZero) ─────────────── */
.dcweb .xp-zero{ max-width:560px; margin:0 auto; width:100%; display:flex; flex-direction:column; gap:24px; }
.dcweb .xp-zero-hero{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:18px 12px 0; }
.dcweb .xp-zero-mark{ width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
  background:var(--tap-gradient, linear-gradient(135deg,#F15A29,#DF108F 38%,#9D4B9C 68%,#5E71B6));
  box-shadow:0 12px 26px -12px rgba(142,42,60,.55); margin-bottom:18px; }
.dcweb .xp-zero-title{ margin:0 0 10px; font-size:27px; line-height:1.15; font-weight:600; color:var(--txt-1);
  letter-spacing:-.01em; text-wrap:balance;
  font-family:"Hoefler Text","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; }
.dcweb .xp-zero-sub{ margin:0 0 22px; font-size:15px; line-height:1.6; color:var(--txt-2); max-width:42ch; }
.dcweb .xp-zero-cta{ font-size:14.5px; }
.dcweb .xp-zero-caps{ display:flex; flex-wrap:wrap; gap:10px 18px; justify-content:center; margin-top:22px; }
.dcweb .xp-zero-cap{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--txt-3); }
.dcweb .xp-zero-cap svg{ color:var(--accent); }

.dcweb .xp-zero-preview{ margin-top:8px; }
.dcweb .xp-zero-peeklabel{ text-align:center; margin-bottom:14px; font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.18em; color:var(--txt-4, #B4ABA0); }
.dcweb .xp-zero-ghost{ pointer-events:none; opacity:.72; transform:scale(.985);
  -webkit-mask-image:linear-gradient(to bottom, #000 58%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 58%, transparent 100%); }