/* PaddleCard — MINIMAL variant (image-first tile).
   Design language: hard edges, NO curves. Each corner carries a small symmetric
   chamfer (the "dent"); a gold hairline frames the tile and thickens to a bright
   gold frame when saved. Namespaced (.pcard*) so it never collides with the
   .card rules on paddlingout / about. Tokens fall back so it looks native on both. */

.pcard--minimal {
  --pc-notch: 13px;          /* corner chamfer — the tiny dent */
  --pc-bw: 1.5px;            /* frame thickness (hairline) */
  --pc-edge: rgba(181, 147, 90, 0.22);   /* default frame colour (subtle) */
  --pc-clip: polygon(
    var(--pc-notch) 0, calc(100% - var(--pc-notch)) 0,
    100% var(--pc-notch), 100% calc(100% - var(--pc-notch)),
    calc(100% - var(--pc-notch)) 100%, var(--pc-notch) 100%,
    0 calc(100% - var(--pc-notch)), 0 var(--pc-notch)
  );

  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  border: 0;
  border-radius: 0;                 /* sharp — no curves */
  padding: 0;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  clip-path: var(--pc-clip);
  background: var(--pc-edge);        /* shows through the body inset as the frame */
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease, background 0.3s ease;
}
.pcard--minimal:hover { transform: translateY(-3px); }
.pcard--minimal:focus-visible { outline: none; --pc-edge: var(--gold-bright, #d9bd7b); --pc-bw: 2px; }

/* inner body — inset by the frame width, same chamfer, so the root shows as a border */
.pcard-body {
  position: absolute;
  inset: var(--pc-bw);
  clip-path: var(--pc-clip);
  background: #0d0b08;
  overflow: hidden;
}

/* ── media / carousel layer ── */
.pcard-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  cursor: grab;
}
.pcard-media--empty { background: linear-gradient(135deg, #1a1712, #0d0b08); cursor: default; }
.pcard-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.55s ease, transform 0.8s var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}
.pcard-img.active { opacity: 1; }
.pcard--minimal:hover .pcard-img.active { transform: scale(1.05); }

.pcard-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(8, 8, 8, 0.92) 0%, rgba(8, 8, 8, 0.42) 34%, rgba(8, 8, 8, 0) 62%);
}

/* ── edge carets (replace dots) — sharp hairline chevrons, hug the sides ── */
.pcard-caret {
  --cn: 6px;                       /* small matching chamfer */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 30px;
  height: 34px;
  padding: 0;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #f2e6c4;
  clip-path: polygon(var(--cn) 0, calc(100% - var(--cn)) 0, 100% var(--cn), 100% calc(100% - var(--cn)),
    calc(100% - var(--cn)) 100%, var(--cn) 100%, 0 calc(100% - var(--cn)), 0 var(--cn));
  background: rgba(12, 11, 9, 0.4);   /* subtle chamfered chip + blur — no black glow */
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
}
.pcard-caret.prev { left: 8px; }
.pcard-caret.next { right: 8px; }
.pcard-caret svg { width: 16px; height: 16px; }
.pcard-caret:hover { background: rgba(26, 21, 15, 0.6); color: #fff1d2; }
.pcard-caret:focus-visible { outline: none; opacity: 1; box-shadow: 0 0 0 2px rgba(217, 189, 123, 0.85); }
.pcard--minimal:hover .pcard-caret,
.pcard--minimal:focus-within .pcard-caret { opacity: 1; }
@media (hover: none) { .pcard-caret { opacity: 0.82; } }   /* touch has no hover — keep discoverable */

/* ── save control — chamfered heart chip (accessible; reveals on hover/focus) ── */
.pcard-fav {
  --cn: 6px;
  position: absolute; top: 8px; right: 8px; z-index: 5;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #f2e6c4;
  clip-path: polygon(var(--cn) 0, calc(100% - var(--cn)) 0, 100% var(--cn), 100% calc(100% - var(--cn)),
    calc(100% - var(--cn)) 100%, var(--cn) 100%, 0 calc(100% - var(--cn)), 0 var(--cn));
  background: rgba(12, 11, 9, 0.42);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  opacity: 0; transform: scale(0.9);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.pcard-fav svg { width: 17px; height: 17px; display: block; }
.pcard-fav:hover { background: rgba(26, 21, 15, 0.62); color: #fff1d2; }
.pcard-fav:focus-visible { outline: none; opacity: 1; transform: scale(1); box-shadow: 0 0 0 2px rgba(217, 189, 123, 0.85); }
.pcard-fav.is-on { color: #e9d29a; }
.pcard--minimal:hover .pcard-fav,
.pcard--minimal:focus-within .pcard-fav,
.pcard--minimal.is-fav .pcard-fav { opacity: 1; transform: scale(1); }
@media (hover: none) { .pcard-fav { opacity: 0.7; } }   /* touch: quietly present so save is discoverable */

/* ── long-press charging heart — grows over the 500ms hold ── */
.pcard-charge {
  position: absolute; left: 50%; top: 50%; z-index: 5;
  width: 42px; height: 42px; margin: -21px 0 0 -21px;
  pointer-events: none; color: #e9d29a; opacity: 0; transform: scale(0.4);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));
}
.pcard-charge svg { width: 100%; height: 100%; display: block; }
.pcard-charge.go { animation: pcard-charge 0.5s ease-out forwards; }
@keyframes pcard-charge {
  0%   { opacity: 0; transform: scale(0.4); }
  60%  { opacity: 0.9; }
  100% { opacity: 0.95; transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) { .pcard-charge { display: none; } }

/* ── meta overlay ── */
.pcard-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  padding: 0.85rem 0.95rem 0.9rem;
  pointer-events: none;
}
.pcard-title {
  font-family: var(--display, var(--font-sans, 'Josefin Sans', 'Bebas Neue', sans-serif));
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--fg, #f3efe7);
}
.pcard-sub {
  font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
  color: rgba(237, 232, 223, 0.66);
  font-size: 0.82rem;
  font-style: italic;
  letter-spacing: 0.04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pcard-stat { display: flex; align-items: baseline; gap: 0.45rem; margin-top: 0.18rem; }
.pcard-stat-val {
  font-family: var(--display, var(--font-sans, 'Josefin Sans', sans-serif));
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* No number yet: the line still reads, in a muted voice, so the reader can
   tell "we have not scored this" from "there is nothing to say here". */
.pcard-stat--unscored .pcard-stat-val { color: rgba(232, 228, 220, 0.62); }
.pcard-stat--unscored .pcard-stat-label { color: rgba(232, 228, 220, 0.55); font-style: normal; }

.pcard-stat-label {
  color: rgba(217, 189, 123, 0.9);
  font-size: 0.62rem;
  font-style: italic;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── the GOLD saved frame (long-press-to-love result): brighter + thicker + glow ── */
.pcard--minimal.is-fav {
  --pc-bw: 3px;
  --pc-edge: linear-gradient(135deg, #f0d99f, #cba765);
  filter: drop-shadow(0 0 14px rgba(217, 189, 123, 0.42));
}

/* love completion — a card pop + a gold heart that blooms and rises */
@keyframes pcard-pop {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.045); }
  100% { transform: scale(1); }
}
.pcard--minimal.pcard-loved { animation: pcard-pop 0.46s cubic-bezier(0.16, 1, 0.3, 1); }
.pcard-heart {
  position: absolute; left: 50%; top: 54%; z-index: 6;
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  pointer-events: none; color: #f0d99f; opacity: 0;
  transform: translateY(0) scale(0.4);
  filter: drop-shadow(0 3px 10px rgba(217, 189, 123, 0.55));
}
.pcard-heart svg { width: 100%; height: 100%; display: block; }
.pcard-heart.go { animation: pcard-heart 0.68s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes pcard-heart {
  0%   { opacity: 0; transform: translateY(6px) scale(0.4); }
  32%  { opacity: 1; transform: translateY(-6px) scale(1.15); }
  70%  { opacity: 1; transform: translateY(-20px) scale(1); }
  100% { opacity: 0; transform: translateY(-40px) scale(0.95); }
}

/* denser grid when the list is in minimal (image-tile) mode */
.container.minimal-list { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.15rem; }

/* minimal-shaped skeletons — same chamfer + aspect as real tiles (no first-paint flash) */
.pcard-skeleton {
  aspect-ratio: 4 / 5;
  clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px),
    calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px);
  background: linear-gradient(100deg, rgba(181,147,90,0.05) 30%, rgba(181,147,90,0.13) 50%, rgba(181,147,90,0.05) 70%);
  background-size: 200% 100%;
  animation: pcard-shimmer 1.4s ease-in-out infinite;
}
@keyframes pcard-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .pcard-skeleton { animation: none; } }

/* grid entrance (main list adds .card-enter) */
@keyframes pcard-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.pcard.card-enter { animation: pcard-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* ── minimal "add a lake" tile — same chamfered, sharp language ── */
.pcard-submit {
  --pc-notch: 13px;
  --pc-clip: polygon(
    var(--pc-notch) 0, calc(100% - var(--pc-notch)) 0,
    100% var(--pc-notch), 100% calc(100% - var(--pc-notch)),
    calc(100% - var(--pc-notch)) 100%, var(--pc-notch) 100%,
    0 calc(100% - var(--pc-notch)), 0 var(--pc-notch)
  );
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  aspect-ratio: 4 / 5;
  clip-path: var(--pc-clip);
  cursor: pointer;
  text-align: center;
  padding: 1rem;
  color: var(--gold-bright, #d9bd7b);
  background: rgba(181, 147, 90, 0.34);   /* frame colour; inner drawn by ::before */
  transition: transform 0.35s ease, background 0.25s ease;
}
.pcard-submit::before {
  content: '';
  position: absolute;
  inset: 1.5px;
  clip-path: var(--pc-clip);
  background: linear-gradient(135deg, rgba(181, 147, 90, 0.12), transparent 60%), #100e0b;
  z-index: 0;
}
.pcard-submit > * { position: relative; z-index: 1; }
.pcard-submit:hover { transform: translateY(-3px); background: var(--gold-bright, #d9bd7b); }
.pcard-submit .plus { font-size: 2rem; line-height: 1; font-weight: 300; }
.pcard-submit .t {
  font-family: var(--display, var(--font-sans, 'Josefin Sans', sans-serif));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 1.05rem;
  font-weight: 600;
}
.pcard-submit .s {
  font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-size: 0.82rem;
  color: rgba(237, 232, 223, 0.62);
}

@media (prefers-reduced-motion: reduce) {
  .pcard--minimal, .pcard-img, .pcard-caret, .pcard-submit { transition: none; }
  .pcard.card-enter, .pcard--minimal.pcard-loved, .pcard-heart.go { animation: none; }
  .pcard-heart { display: none; }
  .pcard--minimal:hover { transform: none; }
  .pcard--minimal:hover .pcard-img.active { transform: none; }
}

/* ── Display tags (admin-set: Community / New / Verified / Staff pick …) ─── */
.pcard-tags {
  position: absolute; top: 8px; left: 8px; z-index: 4;
  display: flex; flex-wrap: wrap; gap: 4px; max-width: 70%;
  pointer-events: none;
}
.pcard-tag {
  --cn: 5px;
  display: inline-block;
  padding: 4px 8px 3px;
  font-family: 'Josefin Sans', Arial, sans-serif;
  font-size: 0.56rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: #f2e6c4;
  background: rgba(12, 11, 9, 0.55);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  border: 1px solid rgba(217, 189, 123, 0.35);
  clip-path: polygon(var(--cn) 0, calc(100% - var(--cn)) 0, 100% var(--cn), 100% calc(100% - var(--cn)),
    calc(100% - var(--cn)) 100%, var(--cn) 100%, 0 calc(100% - var(--cn)), 0 var(--cn));
}
.pcard-tag--community { color: #d9bd7b; }
.pcard-tag--verified  { color: #a8d88a; border-color: rgba(143, 188, 106, 0.45); }
.pcard-tag--new       { color: #fff; background: rgba(181, 147, 90, 0.72); border-color: transparent; }
.pcard-tag--staff-pick { color: #141210; background: rgba(217, 189, 123, 0.92); border-color: transparent; }
.card .pcard-tags { top: 0.9rem; left: 0.9rem; }

/* ── ROW variant — search results; any water body, curated or not ─────────── */
.pcard--row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 0.7rem;
  padding: 0.85rem 1rem; margin: 0 0 0.55rem;
  background: linear-gradient(135deg, rgba(181,147,90,0.07), rgba(181,147,90,0.03));
  border: 1px solid rgba(181,147,90,0.28); border-radius: 0;
  cursor: pointer; text-decoration: none; color: #ede8df;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.15s ease;
  animation: pcardRowIn 0.35s cubic-bezier(0.2,0.8,0.2,1) both;
}
.pcard--row:hover, .pcard--row:focus-visible { border-color: #b5935a; background: rgba(181,147,90,0.12); transform: translateY(-1px); outline: none; }
.pcard--row:focus-visible { box-shadow: 0 0 0 2px #d9bd7b; }
.pcard--row[data-severity="critical"] { border-left: 3px solid #bd3b2b; }
.pcard--row[data-severity="moderate"] { border-left: 3px solid #c59a61; }
.pcard--row[data-severity="good"]     { border-left: 3px solid #316d43; }
@keyframes pcardRowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pcard-row-body { min-width: 0; display: grid; gap: 0.25rem; }
.pcard-row-name { font-family: 'Josefin Sans', Arial, sans-serif; font-size: 0.92rem; font-weight: 600; letter-spacing: 0.02em; color: #ede8df; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 0.98rem; color: rgba(237,232,223,0.62); }
.pcard-row-chip { font-family: 'Josefin Sans', Arial, sans-serif; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: #d9bd7b; border: 1px solid rgba(217,189,123,0.35); padding: 3px 7px 2px; }
.pcard-row-badge { justify-self: start; font-family: 'Josefin Sans', Arial, sans-serif; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: #141210; background: #d9bd7b; padding: 3px 7px 2px; }
.pcard-ring { position: relative; width: 48px; height: 48px; display: grid; place-items: center; flex-shrink: 0; }
.pcard-ring-svg { position: absolute; inset: 0; width: 48px; height: 48px; }
.pcard-ring-track { fill: none; stroke: rgba(255,255,255,0.1); stroke-width: 4; }
.pcard-ring-fill { fill: none; stroke-width: 4; stroke-linecap: butt; transition: stroke-dasharray 0.6s ease; }
.pcard-ring-val { position: relative; font-family: 'Josefin Sans', Arial, sans-serif; font-size: 0.82rem; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.pcard-ring-spin { width: 22px; height: 22px; border: 2px solid rgba(181,147,90,0.25); border-top-color: #d9bd7b; border-radius: 50%; animation: pcardSpin 0.9s linear infinite; }
@keyframes pcardSpin { to { transform: rotate(360deg); } }
.pcard-row-fav { width: 34px !important; height: 34px !important; }
.pcard-row-actions { display: flex; gap: 0.35rem; }
.pcard-row-action {
  height: 34px; padding: 0 0.7rem; border: 1px solid rgba(181,147,90,0.36); background: transparent; color: #b5935a; cursor: pointer;
  font-family: 'Josefin Sans', Arial, sans-serif; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.pcard-row-action svg { width: 16px; height: 16px; }
.pcard-row-action:hover { border-color: #b5935a; color: #d9bd7b; background: rgba(181,147,90,0.1); }
@media (max-width: 560px) {
  .pcard--row { grid-template-columns: minmax(0, 1fr) auto auto; padding: 0.75rem 0.8rem; }
  .pcard-row-actions { grid-column: 1 / -1; justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) { .pcard--row { animation: none; } .pcard-ring-spin { animation: none; } }

/* ── WHY strip — the factors that actually moved the score ────────────────────
   Rendered ONLY from the pipeline's own penaltyDetails[] / adjustments[]; when
   the response carries neither array the component emits nothing, so there is
   no "no factors" copy to style for search rows. `data-state` is one of
   unscored | night | factors | none, and the two loud states (unscored, night)
   get the bright left rule so they cannot be mistaken for a normal read. */
.pcard-why {
  margin: 0 0 1.1rem;
  padding: 0.6rem 0 0.1rem 0.7rem;
  border-left: 2px solid rgba(181, 147, 90, 0.3);
  min-width: 0;                       /* never widen the card on a long message */
}
.pcard-why[data-state="night"],
.pcard-why[data-state="unscored"] { border-left-color: #d9bd7b; }

.pcard-why-head {
  font-family: 'Josefin Sans', Arial, sans-serif;
  font-size: 0.56rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(217, 189, 123, 0.75);
  margin: 0 0 0.35rem;
}
.pcard-why-flag {
  font-family: 'Josefin Sans', Arial, sans-serif;
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: #d9bd7b;
  margin: 0 0 0.4rem;
  overflow-wrap: anywhere;
}
.pcard-why-note {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.95rem; font-style: italic; line-height: 1.45;
  color: rgba(237, 232, 223, 0.6);
  margin: 0;
  overflow-wrap: anywhere;
}

.pcard-why-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.pcard-why-item {
  display: grid; grid-template-columns: 2.9rem minmax(0, 1fr); align-items: baseline; gap: 0.55rem;
  min-width: 0;
}
.pcard-why-delta {
  font-family: 'Josefin Sans', Arial, sans-serif;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.pcard-why-item[data-dir="down"] .pcard-why-delta { color: #e08872; }
.pcard-why-item[data-dir="up"]   .pcard-why-delta { color: #9ec97c; }
.pcard-why-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.97rem; line-height: 1.4;
  color: rgba(237, 232, 223, 0.82);
  min-width: 0; overflow-wrap: anywhere;
}

/* Compact (row variant): sits inside .pcard-row-body's grid, no heading. */
.pcard-why--compact {
  margin: 0.1rem 0 0; padding: 0 0 0 0.55rem;
  border-left-width: 2px;
}
.pcard-why--compact .pcard-why-list { gap: 0.15rem; }
.pcard-why--compact .pcard-why-item { grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.45rem; }
.pcard-why--compact .pcard-why-delta { font-size: 0.66rem; }
.pcard-why--compact .pcard-why-text { font-size: 0.88rem; line-height: 1.3; }
.pcard-why--compact .pcard-why-flag { font-size: 0.58rem; margin-bottom: 0.2rem; }

@media (max-width: 480px) {
  .pcard-why { margin-bottom: 0.95rem; padding-left: 0.6rem; }
  .pcard-why-item { grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0.45rem; }
  .pcard-why-text { font-size: 0.93rem; }
}